/* [bundle] /styles/homepage.css */ /* [bundle] /styles/breakpoints.css */ :root { --bp-mobile-max: 640px; --bp-tablet-max: 1024px; } .show-desktop { display: block; } .show-tablet { display: none; } .show-mobile { display: none; } @media (max-width: 1024px) { .show-desktop { display: none; } .show-tablet { display: block; } } @media (max-width: 640px) { .show-tablet { display: none; } .show-mobile { display: block; } } /* [bundle] /styles/base.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :root { --popup-control-border: var(--popup-border-strong); --popup-focus: var(--color-forest); } *, *::before, *::after { box-sizing: border-box; } html { scrollbar-gutter: stable; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--page-bg); font-family: var(--font-body); color: var(--color-ink); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } .icon { display: block; flex: 0 0 auto; } .jp-inline-arrow { display: inline-block; width: 14px; height: auto; max-width: none; margin-left: 6px; vertical-align: -1px; flex: 0 0 auto; } .jp-inline-arrow--back { margin-left: 0; margin-right: 6px; } .jp-icon-img, .jp-close-icon { display: block; width: 1em; height: 1em; max-width: none; object-fit: contain; flex: 0 0 auto; pointer-events: none; } .jp-icon-img--close, .jp-close-icon { width: 17px; height: 17px; } .jp-arrow-icon, .jp-arrow-right-icon, .jp-arrow-left-icon, .jp-chevron-right-icon, .jp-chevron-left-icon, .jp-chevron-down-icon, .jp-chevron-up-icon { display: block; max-width: none; object-fit: contain; flex: 0 0 auto; pointer-events: none; } .jp-arrow-icon, .jp-chevron-right-icon, .jp-chevron-left-icon { width: 17px; height: 10px; } .jp-chevron-down-icon, .jp-chevron-up-icon { width: 14px; height: 14px; } .jp-chevron-up-icon { transform: rotate(180deg); } .jp-arrow-right-icon, .jp-arrow-left-icon { width: 22px; height: 14px; } .btn-primary .jp-arrow-icon, .btn-ink .jp-arrow-icon, .btn-emerald .jp-arrow-icon { filter: brightness(0) invert(1); } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--color-slate); outline-offset: 3px; } body { line-height: var(--line-height-normal); background: var(--color-cream); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } h1, h2 { font-family: var(--font-display) !important; font-weight: 600; letter-spacing: -0.01em; } button, [role="button"], .btn, [class*="-btn"], [class*="__btn"], [class*="-button"], [class*="__button"] { font-family: var(--font-display) !important; } button *, [role="button"] *, .btn *, [class*="-btn"] *, [class*="__btn"] *, [class*="-button"] *, [class*="__button"] * { font-family: var(--font-display) !important; } :where( .price, [class*="__price"], [class*="-price"], [class*="Price"], [class*="__currency"], [class*="-currency"], [class*="__amount"], [class*="-amount"], [class*="__value-new"], [class*="__value-old"], [class*="-value-new"], [class*="-value-old"], [data-product-price-text], [data-cart-subtotal], [data-cart-shipping], [data-cart-discount], [data-cart-total], [data-track-total], #earn-amt, #bd-price, #bd-fee, #bd-stripe, #bd-net ) { font-family: var(--font-price, var(--font-heading)) !important; font-variant-numeric: tabular-nums; letter-spacing: 0; } /* [bundle] /styles/mobile-essentials.css */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } :root { --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-right: env(safe-area-inset-right, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --tap-min: 44px; } html, body { overflow-x: hidden; } * { -webkit-tap-highlight-color: rgba(63, 106, 96, 0.12); } .skip-link { position: absolute; top: -100px; left: 0; z-index: 99999; background: #1A1B1F; color: var(--color-cream); padding: 10px 16px; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; transition: top 0.18s ease; } .skip-link:focus-visible { top: 0; outline: 2px solid var(--color-emerald, #3F6A60); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (max-width: 768px) { input, textarea, select { font-size: max(16px, 1em); } a, button, [role="button"], input, textarea, select, label { touch-action: manipulation; } @media (hover: none) { a:hover, button:hover, [role="button"]:hover { transform: none !important; } } .jp-modal, .alt-text-modal, .lightbox-modal, .gift-room-modal { width: 100vw !important; max-width: none !important; max-height: 100dvh; border-radius: 0; } table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 380px) { .btn { padding-left: 12px; padding-right: 12px; } } /* [bundle] /styles/layout.css */ :root { --jp-page-shell-max: 1372px; --jp-page-shell-width: min(var(--jp-page-shell-max), calc(100% - 68px)); --jp-page-shell-inset: 6px; --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } .page { background: var(--page-bg); min-height: 100vh; } .container { width: var(--jp-page-shell-width); max-width: var(--jp-page-shell-max); margin-inline: auto; padding-inline: var(--jp-page-shell-inset); box-sizing: border-box; } .section { padding-block: var(--space-9); } .section--tight { padding-block: var(--space-7); } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .grid { display: grid; gap: var(--space-5); } .grid--cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } @media (max-width: 1142px) { :root { --jp-page-shell-width: min(calc(100% - 48px), 100%); --jp-page-shell-inset: 6px; } } @media (max-width: 1024px) { .section { padding-block: var(--space-7); } } @media (max-width: 760px) { :root { --jp-page-shell-width: calc(100% - 32px); --jp-page-shell-inset: 0px; } } @media (max-width: 640px) { .section { padding-block: var(--space-6); } } /* [bundle] /styles/components/buttons.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--font-size-body); font-weight: 600; border-radius: var(--radius-sm); border: none; padding: var(--space-3) var(--space-5); cursor: pointer; isolation: isolate; overflow: visible; transform-origin: center; transition: color var(--duration-fast) var(--ease-standard); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: transparent; transform: scale(1); transform-origin: center; transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); pointer-events: none; } .btn--primary { color: var(--color-cream); background: transparent; box-shadow: none; } .btn--primary::before { background: var(--color-forest); } .btn--primary:hover { background: transparent; box-shadow: none; color: var(--color-cream); } .btn--primary:hover::before { transform: scale(var(--hover-grow-scale)); } .btn--primary:active::before { transform: scale(1); } .btn--secondary { color: var(--color-ink); background: transparent; border: 2px solid var(--color-ink); } .btn--secondary::before { border: 2px solid var(--color-ink); inset: -2px; } .btn--secondary:hover { background: transparent; color: var(--color-ink); } .btn--secondary:hover::before { transform: scale(var(--hover-grow-scale)); } .btn--ghost { background: transparent; color: var(--color-ink); padding-inline: 0; text-decoration: underline; } .btn--compact { padding: var(--space-2) var(--space-3); font-size: var(--font-size-caption); border-radius: var(--radius-pill); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* [bundle] /styles/components/chips.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .chips-row { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-4); } .chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--color-smoke); background: var(--color-cream); font-size: var(--font-size-body); font-weight: 500; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border var(--duration-fast) var(--ease-standard); } .chip--active { border-color: transparent; background: var(--color-forest); color: var(--color-cream); } .chip:hover { border-color: var(--color-forest); } .chip-bar { overflow-x: auto; padding-bottom: var(--space-2); } .chip-bar::-webkit-scrollbar { height: 6px; } .chip-bar::-webkit-scrollbar-thumb { background: var(--color-smoke); border-radius: var(--radius-pill); } @media (max-width: 760px) { .chip-bar { overscroll-behavior-inline: contain; scroll-padding-inline: var(--space-3); padding: 0 var(--space-3) var(--space-2); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .chip-bar > * { scroll-snap-align: start; } .chip-bar::-webkit-scrollbar { display: none; } } /* [bundle] /styles/components/cards.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .card { background: var(--color-cream); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .card__image { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-sand); display: flex; align-items: center; justify-content: center; } .card__badge { align-self: flex-start; font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: 0.08em; background: rgba(31, 175, 122, 0.12); color: var(--color-forest); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); } .card__title { font-family: var(--font-heading); font-size: var(--font-size-h4); margin: 0; } .card__meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-body); } .listing-price { font-size: 1.25rem; font-weight: 700; } .category-card { background: var(--color-cream); box-shadow: var(--shadow-soft); } .category-card .card__image { aspect-ratio: 1 / 1; } /* [bundle] /styles/components/listing-cards.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .cards-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; justify-items: stretch; align-items: start; gap: 15px; } .page--search .cards-grid { --search-card-scale: 1; } .cat-card { --cat-card-scale: 1; --cat-card-scale-inverse: 1; --cat-card-media-height: 325px; --cat-card-height: 482px; --cat-card-content-shift: 0px; --cat-card-corner-badge-size: 28px; --cat-card-corner-badge-top: 8px; --cat-card-corner-badge-left: 8px; --cat-card-corner-badge-gap: 4px; --cat-card-corner-badge-pad-x: 10px; --cat-card-corner-badge-font-size: 11px; --cat-card-corner-badge-ad-font-size: 12px; --cat-card-corner-badge-icon-size: 11px; width: 100%; max-width: 100%; height: auto; aspect-ratio: 325 / 482; position: relative; background: #f8f1eb; border-radius: calc(20px * var(--cat-card-scale)); overflow: hidden; box-shadow: 0 0 0 rgba(35, 32, 48, 0); transition: box-shadow 0.2s ease; -webkit-user-select: none; user-select: none; } .page--search .cat-card { --cat-card-scale: var(--search-card-scale, 1); --cat-card-scale-inverse: var(--search-card-scale-inverse, 1); } .cat-card[data-product-href] { cursor: pointer; } .cat-card.compact { aspect-ratio: 325 / 482; } .cat-card__inner { --cat-card-unit-x: 1px; --cat-card-unit-y: 1px; position: absolute; left: 0; top: 0; width: 325px; height: var(--cat-card-height); transform: scale(var(--cat-card-scale)); transform-origin: top left; } .page--search .search-page__shell.is-filters-opening .cat-card__inner { transition: none; will-change: transform; } .cat-card.compact .cat-card__inner { height: var(--cat-card-height); } .cat-card:hover { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .cat-card:has(:focus-visible) { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .cat-card.is-actions-open { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .cat-card__media { width: calc(325 * var(--cat-card-unit-x)); height: var(--cat-card-media-height); position: absolute; left: 0; top: 0; background: #cedef0; border-radius: calc(20 * var(--cat-card-unit-x)); overflow: hidden; } .cat-card__media::before { content: ""; position: absolute; inset: -1px; background: inherit; border-radius: inherit; pointer-events: none; } .cat-card--ad .cat-card__media { isolation: isolate; } .cat-card__ad-mark { width: var(--cat-card-corner-badge-size); height: var(--cat-card-corner-badge-size); position: absolute; left: var(--cat-card-corner-badge-left); top: var(--cat-card-corner-badge-top); z-index: 4; border-radius: 50%; background: var(--color-cream); box-shadow: none; display: flex; align-items: center; justify-content: center; color: var(--color-ink); font-family: var(--font-heading); font-size: var(--cat-card-corner-badge-ad-font-size); font-weight: 800; line-height: 1; pointer-events: none; text-transform: uppercase; transition: opacity 0.16s ease; will-change: opacity; } .cat-card__hover-actions { position: absolute; right: calc(10 * var(--cat-card-unit-x)); top: calc(10 * var(--cat-card-unit-y)); width: auto; max-width: calc(305 * var(--cat-card-unit-x)); height: calc(38 * var(--cat-card-unit-y)); display: inline-flex; align-items: center; justify-content: flex-end; gap: calc(8 * var(--cat-card-unit-x)); opacity: 0; pointer-events: none; transform: translateY(calc(-6 * var(--cat-card-unit-y))) scale(0.96); transition: opacity 0.22s ease, transform 0.22s ease; will-change: opacity, transform; z-index: 6; } .cat-card:hover .cat-card__hover-actions, .cat-card:has(:focus-visible) .cat-card__hover-actions, .cat-card.is-actions-open .cat-card__hover-actions { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .cat-card__hover-board, .cat-card__hover-save { height: calc(38 * var(--cat-card-unit-y)); border: 0; border-radius: 999px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--cat-card-unit-x)); padding: 0; overflow: visible; cursor: pointer; font-family: var(--font-heading); line-height: 1; white-space: nowrap; background: transparent; isolation: isolate; } .cat-card__hover-board::before, .cat-card__hover-save::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; transform: scale(1); transform-origin: center; transition: transform 0.18s ease; } .cat-card__hover-board { min-width: calc(124 * var(--cat-card-unit-x)); color: #232030; justify-content: space-between; padding: calc(6 * var(--cat-card-unit-y)) calc(15 * var(--cat-card-unit-x)); gap: calc(10 * var(--cat-card-unit-x)); flex: 1 1 auto; max-width: calc(150 * var(--cat-card-unit-x)); } .cat-card__hover-board::before { background: #eee5da; } .cat-card__hover-board-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(8px, calc(11 * var(--cat-card-unit-x)), 11px); font-weight: 500; flex: 1 1 auto; } .cat-card__hover-board svg, .cat-card__hover-board img { width: calc(12 * var(--cat-card-unit-x)); height: calc(12 * var(--cat-card-unit-y)); flex: 0 0 calc(12 * var(--cat-card-unit-x)); } .cat-card__hover-save { min-width: calc(84 * var(--cat-card-unit-x)); width: auto; color: var(--color-cream); padding: calc(6 * var(--cat-card-unit-y)) calc(15 * var(--cat-card-unit-x)); flex: 0 0 auto; } .cat-card__hover-save::before { background: #3f6a60; } .cat-card__hover-save-label { font-size: clamp(10px, calc(13 * var(--cat-card-unit-x)), 13px); font-weight: 600; } .cat-card__hover-save svg, .cat-card__hover-save img { width: calc(17 * var(--cat-card-unit-x)); height: calc(18 * var(--cat-card-unit-y)); flex: 0 0 calc(17 * var(--cat-card-unit-x)); } .cat-card__hover-board-icon { display: block; object-fit: contain; } .cat-card__top-fav, .cat-card__save-flyout { display: none !important; } .cat-card__now { min-height: var(--cat-card-corner-badge-size); height: var(--cat-card-corner-badge-size); padding: 0 var(--cat-card-corner-badge-pad-x); position: absolute; left: var(--cat-card-corner-badge-left); top: var(--cat-card-corner-badge-top); border-radius: 999px; background: #205a4a; display: inline-flex; align-items: center; gap: var(--cat-card-corner-badge-gap); color: var(--color-cream); font-family: var(--font-heading); font-size: var(--cat-card-corner-badge-font-size); font-weight: 500; white-space: nowrap; box-shadow: none; opacity: 0.7; transition: opacity 0.16s ease; will-change: opacity; } .cat-card:hover .cat-card__now, .cat-card:has(:focus-visible) .cat-card__now, .cat-card.is-actions-open .cat-card__now { opacity: 0; transform: none; } .cat-card__now svg { width: var(--cat-card-corner-badge-icon-size); height: var(--cat-card-corner-badge-icon-size); display: block; flex: 0 0 auto; } .cat-card__now--proof { background: var(--color-ink); color: var(--color-cream); font-weight: 600; } .cat-card__now--top-signal { border: 0; background: var(--color-top-badge-glass); color: var(--color-ink); opacity: 1; } .cat-card__now--tone-blue, .cat-card__now--free-download, .cat-card__now--digital, .cat-card__now--top-rated { background: var(--color-top-badge-blue); } .cat-card__now--tone-green, .cat-card__now--shipping, .cat-card__now--bestselling-gift { background: var(--color-top-badge-green); } .cat-card__now--tone-alert, .cat-card__now--low-stock, .cat-card__now--popular-now, .cat-card__now--cart-activity { background: var(--color-top-badge-coral); } .cat-card__now--tone-purple, .cat-card__now--room-activity, .cat-card__now--campaign-curated { background: var(--color-top-badge-purple); } .cat-card__now--jedi-picks, .cat-card__jedi-pick { min-height: var(--cat-card-corner-badge-size); height: var(--cat-card-corner-badge-size); padding: 0 var(--cat-card-corner-badge-pad-x); gap: var(--cat-card-corner-badge-gap); background: var(--jedi-picks-badge-bg, var(--color-jedi-picks-yellow)); color: var(--jedi-picks-badge-ink, var(--color-ink)); font-family: var(--font-heading); font-size: var(--cat-card-corner-badge-font-size); font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; opacity: 1; } .cat-card__now--jedi-picks { border-color: transparent; } .cat-card__jedi-picks-icon, .cat-card__jedi-pick-icon { width: var(--cat-card-corner-badge-icon-size); height: var(--cat-card-corner-badge-icon-size); display: block; flex: 0 0 var(--cat-card-corner-badge-icon-size); object-fit: contain; } .cat-card__jedi-picks-label, .cat-card__jedi-pick-label { position: relative; display: inline-block; padding-bottom: 0; white-space: nowrap; } .cat-card__jedi-picks-label::after, .cat-card__jedi-pick-label::after { content: none; } .cat-card__play { width: calc(32 * var(--cat-card-unit-x)); height: calc(32 * var(--cat-card-unit-y)); position: absolute; left: calc(10 * var(--cat-card-unit-x)); top: calc((283 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); z-index: 3; } .cat-card__play svg, .cat-card__play img { width: 100%; height: 100%; display: block; object-fit: contain; } .cat-card__sale { position: absolute; left: calc(6 * var(--cat-card-unit-x)); top: calc(294 * var(--cat-card-unit-y)); height: calc(25 * var(--cat-card-unit-y)); padding: calc(6 * var(--cat-card-unit-y)) calc(13 * var(--cat-card-unit-x)); border-radius: 999px; background: #def7eb; color: #3F6A60; font-family: var(--font-heading); font-size: clamp(8px, calc(11 * var(--cat-card-unit-x)), 11px); font-weight: 700; display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; } .cat-card__title { position: absolute; left: calc(10 * var(--cat-card-unit-x)); top: calc(328 * var(--cat-card-unit-y)); width: calc(305 * var(--cat-card-unit-x)); margin: 0; color: #232030; font-family: var(--font-heading); font-size: clamp(10px, calc(13 * var(--cat-card-unit-x)), 13px); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-card__rating { width: calc(93 * var(--cat-card-unit-x)); height: calc(24 * var(--cat-card-unit-y)); position: absolute; left: calc(10 * var(--cat-card-unit-x)); top: calc(349 * var(--cat-card-unit-y)); border-radius: 999px; background: #eee5da; display: flex; align-items: center; padding: 0 calc(8 * var(--cat-card-unit-x)); gap: calc(4 * var(--cat-card-unit-x)); } .cat-card__rating svg { width: calc(14 * var(--cat-card-unit-x)); height: calc(13 * var(--cat-card-unit-y)); display: block; flex: 0 0 auto; } .cat-card__rating-value { color: #232030; font-family: var(--font-heading); font-size: clamp(10px, calc(13 * var(--cat-card-unit-x)), 13px); line-height: 1; } .cat-card__rating-value.strong { font-weight: 600; } .cat-card__rating-value.light { font-weight: 400; } .cat-card__dot { width: calc(5 * var(--cat-card-unit-x)); height: calc(5 * var(--cat-card-unit-y)); border-radius: 50%; background: #232030; margin-left: calc(1 * var(--cat-card-unit-x)); } .cat-card__store-row { position: absolute; left: calc(108 * var(--cat-card-unit-x)); top: calc(349 * var(--cat-card-unit-y)); display: inline-flex; align-items: center; gap: calc(8 * var(--cat-card-unit-x)); max-width: calc(210 * var(--cat-card-unit-x)); padding: calc(3 * var(--cat-card-unit-y)) calc(13 * var(--cat-card-unit-x)) calc(3 * var(--cat-card-unit-y)) calc(3 * var(--cat-card-unit-x)); border-radius: 999px; background: #eee5da; color: var(--color-ink-soft); text-decoration: none; } .cat-card__store-icon-wrap { width: calc(21 * var(--cat-card-unit-x)); height: calc(21 * var(--cat-card-unit-y)); flex: 0 0 calc(21 * var(--cat-card-unit-x)); border-radius: 999px; background: rgba(255, 255, 255, 0.24); display: inline-flex; align-items: center; justify-content: center; } .cat-card__store-row:not([style*="background"]) .cat-card__store-icon-wrap { background: rgba(35, 32, 48, 0.08); } .cat-card__store { min-width: 0; max-width: calc(175 * var(--cat-card-unit-x)); display: inline-flex; align-items: center; color: inherit; font-family: var(--font-heading); font-size: clamp(9px, calc(12 * var(--cat-card-unit-x)), 12px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-card__price { position: absolute; left: calc(10 * var(--cat-card-unit-x)); top: calc(378 * var(--cat-card-unit-y)); display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: calc(100% - calc(20 * var(--cat-card-unit-x))); overflow: hidden; white-space: nowrap; } .cat-card__price.no-from { gap: 6px; } .cat-card__from { height: calc(27 * var(--cat-card-unit-y)); padding: calc(6 * var(--cat-card-unit-y)) calc(13 * var(--cat-card-unit-x)); border-radius: 999px; background: #232030; color: var(--color-cream); font-family: var(--font-heading); font-size: clamp(8px, calc(11 * var(--cat-card-unit-x)), 11px); font-weight: 700; display: inline-flex; align-items: center; line-height: 1; } .cat-card__amount { padding-right: calc(10 * var(--cat-card-unit-x)); border-radius: 999px; background: transparent; display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; } .cat-card__currency { width: auto; min-width: 0; height: auto; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #3F6A60; font-family: var(--font-price, var(--font-heading)); font-size: clamp(11px, calc(15 * var(--cat-card-unit-x)), 15px); font-weight: 700; line-height: 1; } .cat-card__values { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; line-height: 1; } .cat-card__value-new { color: #3F6A60; font-family: var(--font-price, var(--font-display)); font-size: clamp(11px, calc(15 * var(--cat-card-unit-x)), 15px); font-weight: 700; } .cat-card__value-old { color: var(--color-ink-soft); font-family: var(--font-price, var(--font-display)); font-size: clamp(10px, calc(13 * var(--cat-card-unit-x)), 13px); font-weight: 400; text-decoration: line-through; } .cat-card__meta { position: absolute; left: calc(10 * var(--cat-card-unit-x)); top: calc(408 * var(--cat-card-unit-y)); display: inline-flex; align-items: center; gap: calc(4 * var(--cat-card-unit-x)); max-width: calc(300 * var(--cat-card-unit-x)); } .cat-card__ship { height: calc(25 * var(--cat-card-unit-y)); padding: calc(6 * var(--cat-card-unit-y)) calc(13 * var(--cat-card-unit-x)); border-radius: 999px; background: #eee5da; color: #232030; font-family: var(--font-heading); font-size: clamp(7px, calc(10 * var(--cat-card-unit-x)), 10px); font-weight: 500; display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; } .cat-card__popular { height: calc(25 * var(--cat-card-unit-y)); padding: calc(6 * var(--cat-card-unit-y)) calc(13 * var(--cat-card-unit-x)); border-radius: 999px; background: #ffe4e4; color: #b91515; font-family: var(--font-heading); font-size: clamp(7px, calc(10 * var(--cat-card-unit-x)), 10px); font-weight: 500; display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; } .cat-card__digital { height: calc(25 * var(--cat-card-unit-y)); padding: 0 calc(8 * var(--cat-card-unit-x)) 0 calc(4 * var(--cat-card-unit-x)); border-radius: 999px; background: #eee5da; display: inline-flex; align-items: center; gap: calc(2 * var(--cat-card-unit-x)); color: #232030; font-family: var(--font-heading); font-size: clamp(6px, calc(9 * var(--cat-card-unit-x)), 9px); font-weight: 600; line-height: 1; white-space: nowrap; } .cat-card__digital svg { width: calc(21 * var(--cat-card-unit-x)); height: calc(21 * var(--cat-card-unit-y)); display: block; flex: 0 0 auto; } .cat-card__similar { width: calc(136 * var(--cat-card-unit-x)); max-width: calc(198 * var(--cat-card-unit-x)); height: calc(38 * var(--cat-card-unit-y)); position: absolute; left: calc(10 * var(--cat-card-unit-x)); top: auto; bottom: calc(10 * var(--cat-card-unit-y)); border: 0; border-radius: 999px; background: #eee5da; color: #232030; font-family: var(--font-heading); font-size: clamp(8px, calc(11 * var(--cat-card-unit-x)), 11px); font-weight: 500; padding: 0 calc(11 * var(--cat-card-unit-x)) 0 calc(16 * var(--cat-card-unit-x)); display: flex; align-items: center; justify-content: flex-start; gap: calc(10 * var(--cat-card-unit-x)); cursor: pointer; min-width: 0; } .cat-card__similar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } .cat-card__similar-icon { width: calc(17 * var(--cat-card-unit-x)); height: calc(10 * var(--cat-card-unit-y)); display: block; object-fit: contain; flex: 0 0 calc(17 * var(--cat-card-unit-x)); margin-left: auto; transform: translateX(0); transition: transform 0.18s ease; } .cat-card__similar:hover .cat-card__similar-icon, .cat-card__similar:focus-visible .cat-card__similar-icon { transform: translateX(calc(4 * var(--cat-card-unit-x))); } .cat-card--media-square { --cat-card-media-height: 325px; --cat-card-height: 482px; --cat-card-content-shift: 0px; aspect-ratio: 325 / 482; } .cat-card--media-tall { --cat-card-media-height: 400px; --cat-card-height: 557px; --cat-card-content-shift: 75px; aspect-ratio: 325 / 557; } .cat-card--media-wide { --cat-card-media-height: 258px; --cat-card-height: 415px; --cat-card-content-shift: -67px; aspect-ratio: 325 / 415; } .cat-card.compact .cat-card__inner { height: var(--cat-card-height); } .cat-card__hover-actions { right: calc(10 * var(--cat-card-unit-x)); top: calc(10 * var(--cat-card-unit-y)); gap: calc(8 * var(--cat-card-unit-x)); transform: translateY(calc(-6 * var(--cat-card-unit-y))) scale(0.96); transition: opacity 0.22s ease, transform 0.22s ease; } .cat-card:hover .cat-card__hover-actions, .cat-card:has(:focus-visible) .cat-card__hover-actions, .cat-card.is-actions-open .cat-card__hover-actions { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .cat-card__hover-board:hover::before, .cat-card__hover-board:focus-visible::before, .cat-card__hover-save:hover::before, .cat-card__hover-save:focus-visible::before { transform: scale(1.035); } .cat-card__hover-board { min-width: calc(124 * var(--cat-card-unit-x)); max-width: calc(150 * var(--cat-card-unit-x)); padding: calc(6 * var(--cat-card-unit-y)) calc(15 * var(--cat-card-unit-x)); } .cat-card__media-stats { position: absolute; right: calc(10 * var(--cat-card-unit-x)); bottom: calc(10 * var(--cat-card-unit-y)); display: inline-flex; align-items: center; gap: calc(5 * var(--cat-card-unit-x)); z-index: 3; } .cat-card__review-pill, .cat-card__reaction { height: calc(33 * var(--cat-card-unit-y)); border: 0; border-radius: 999px; background: rgba(238, 229, 218, 0.6); display: inline-flex; align-items: center; color: #232030; font-family: var(--font-heading); line-height: 1; white-space: nowrap; } .cat-card__review-pill { padding: calc(4 * var(--cat-card-unit-y)) calc(8 * var(--cat-card-unit-x)); gap: calc(5 * var(--cat-card-unit-x)); } .cat-card__review-pill svg, .cat-card__review-star, .cat-card__review-icon { width: calc(17 * var(--cat-card-unit-x)); height: calc(16 * var(--cat-card-unit-y)); display: block; object-fit: contain; flex: 0 0 auto; } .cat-card__review-pill svg:nth-of-type(2), .cat-card__review-icon--comment { width: calc(19 * var(--cat-card-unit-x)); height: calc(19 * var(--cat-card-unit-y)); } .cat-card__reaction { min-width: calc(59 * var(--cat-card-unit-x)); padding: calc(7 * var(--cat-card-unit-y)) calc(6 * var(--cat-card-unit-x)) calc(7 * var(--cat-card-unit-y)) calc(7 * var(--cat-card-unit-x)); gap: calc(3 * var(--cat-card-unit-x)); background: rgba(238, 229, 218, 0.7); cursor: pointer; } .cat-card__reaction svg, .cat-card__reaction-icon { width: calc(19 * var(--cat-card-unit-x)); height: calc(16 * var(--cat-card-unit-y)); display: block; object-fit: contain; flex: 0 0 auto; } .cat-card__reaction.is-liked { background: rgba(238, 229, 218, 0.7); } .cat-card__reaction-count { min-width: calc(25 * var(--cat-card-unit-x)); color: #232030; font-family: var(--font-heading); font-size: clamp(10px, calc(13 * var(--cat-card-unit-x)), 13px); font-weight: 500; } @keyframes jpReactionPop { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 62% { transform: scale(0.9); } 100% { transform: scale(1); } } [data-product-reaction].is-reaction-pop [data-product-reaction-icon], [data-product-reaction].is-reaction-pop svg { animation: jpReactionPop 0.42s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; } [data-product-reaction][aria-disabled="true"] { cursor: default; } [data-product-reaction][aria-disabled="true"].is-reaction-pop [data-product-reaction-icon], [data-product-reaction][aria-disabled="true"].is-reaction-pop svg { animation: none; } @media (prefers-reduced-motion: reduce) { [data-product-reaction].is-reaction-pop [data-product-reaction-icon], [data-product-reaction].is-reaction-pop svg { animation: none; } } .cat-card__rating, .cat-card__meta { display: none !important; } .cat-card__title { top: calc((328 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } .cat-card__price { color: var(--color-forest); width: calc(307 * var(--cat-card-unit-x)); left: calc(8 * var(--cat-card-unit-x)); top: calc((342 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); gap: 6px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; } .cat-card__currency { width: auto; min-width: 0; height: auto; flex: 0 0 auto; color: #232030; font-size: clamp(11px, calc(15 * var(--cat-card-unit-x)), 15px); font-weight: 700; } .cat-card__value-new { color: #232030; font-size: clamp(11px, calc(15 * var(--cat-card-unit-x)), 15px); } .cat-card__value-old, .cat-card__discount { color: var(--color-ink-soft); font-family: var(--font-price, var(--font-display)); font-size: clamp(10px, calc(14 * var(--cat-card-unit-x)), 14px); font-weight: 500; line-height: 1; } .cat-card__discount { min-width: 0; overflow: visible; text-overflow: clip; } .cat-card--discounted .cat-card__currency, .cat-card--discounted .cat-card__value-new { color: #3F6A60; } .cat-card__service-badge { height: calc(18 * var(--cat-card-unit-y)); position: absolute; left: calc(11 * var(--cat-card-unit-x)); top: calc((373 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); display: inline-flex; align-items: center; z-index: 2; } .cat-card__service-badge-img { display: block; height: calc(18 * var(--cat-card-unit-y)); max-width: none; object-fit: contain; } .cat-card__service-badge-img--digital { width: calc(116 * var(--cat-card-unit-x)); } .cat-card__service-badge-img--free-download { width: calc(116 * var(--cat-card-unit-x)); } .cat-card__service-badge-img--shipping { width: calc(110 * var(--cat-card-unit-x)); } .cat-card__service-badge--signal { max-width: calc(220 * var(--cat-card-unit-x)); min-width: 0; height: calc(18 * var(--cat-card-unit-y)); padding: 0; border-radius: 0; background: transparent; color: var(--intent-feedback-alert-strong); font-family: "Inter", Arial, sans-serif; font-size: clamp(12px, calc(14.2 * var(--cat-card-unit-x)), 15px); font-weight: 800; line-height: 1.15; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-card__service-badge--tone-green { background: transparent; color: var(--color-forest); } .cat-card__service-badge--tone-purple { background: transparent; color: var(--color-ink-soft); } .cat-card__service-badge--tone-alert { background: transparent; color: var(--intent-feedback-alert-strong); } .cat-card__service-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } body[data-jp-language="ru"] .cat-card__service-badge[data-jp-visible-label] { min-width: 0; max-width: calc(118 * var(--cat-card-unit-x)); height: calc(18 * var(--cat-card-unit-y)); padding: 0 calc(7 * var(--cat-card-unit-x)); border-radius: calc(999 * var(--cat-card-unit-x)); background: var(--color-forest); color: var(--color-cream); font-family: "Inter", Arial, sans-serif; font-size: clamp(7px, calc(8.2 * var(--cat-card-unit-x)), 10px); font-weight: 800; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-jp-language="ru"] .cat-card__service-badge[data-jp-visible-label]::before { content: attr(data-jp-visible-label); } body[data-jp-language="ru"] .cat-card__service-badge[data-jp-visible-label] .cat-card__service-badge-img { display: none; } .cat-card__store-row { left: calc(11 * var(--cat-card-unit-x)); top: calc((402 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); position: absolute; display: inline-flex; align-items: center; gap: 0; width: auto; max-width: calc(210 * var(--cat-card-unit-x)); color: var(--color-ink-soft); text-decoration: none; z-index: 3; } .cat-card--no-service .cat-card__store-row { top: calc((373 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } .cat-card__store-icon-wrap > svg, .cat-card__store-icon-wrap > img.cat-card__store-icon { width: calc(13 * var(--cat-card-unit-x)); height: calc(13 * var(--cat-card-unit-y)); display: block; flex: 0 0 auto; object-fit: contain; } .cat-card__store-notch { display: none !important; } .cat-card__store-row > svg, .cat-card__store-row > img.cat-card__store-icon { width: calc(15 * var(--cat-card-unit-x)); height: calc(15 * var(--cat-card-unit-y)); display: block; flex: 0 0 auto; object-fit: contain; } .cat-card[data-product-source="partner"] .cat-card__store { text-decoration: none; } .cat-card__similar { width: auto; max-width: calc(166 * var(--cat-card-unit-x)); left: calc(10 * var(--cat-card-unit-x)); top: auto; bottom: calc(10 * var(--cat-card-unit-y)); background: #f8f1eb; font-size: clamp(10px, calc(12 * var(--cat-card-unit-x)), 12px); font-weight: 600; padding: calc(12 * var(--cat-card-unit-y)) calc(11 * var(--cat-card-unit-x)); gap: calc(9 * var(--cat-card-unit-x)); transition: background-color 0.18s ease; } .cat-card__similar:hover, .cat-card__similar:focus-visible { background: #eee5da; } .cat-card__cart { width: auto; min-width: calc(118 * var(--cat-card-unit-x)); height: auto; position: absolute; left: auto; right: calc(10 * var(--cat-card-unit-x)); top: auto; bottom: calc(10 * var(--cat-card-unit-y)); border: 0; border-radius: 999px; background: transparent; outline: 0; display: inline-flex; align-items: center; justify-content: center; gap: calc(5 * var(--cat-card-unit-x)); padding: calc(7 * var(--cat-card-unit-y)) calc(21 * var(--cat-card-unit-x)); color: #232030; font-family: var(--font-heading); font-size: clamp(10px, calc(13 * var(--cat-card-unit-x)), 13px); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; z-index: 3; overflow: hidden; isolation: isolate; transform-origin: center; transition: background-color 0.18s ease, transform 0.18s ease; } .cat-card[data-product-source="partner"] .cat-card__cart { display: none; } body.is-native-checkout-closed .cat-card[data-product-source="jedipic"] .cat-card__cart, .search-page.is-native-checkout-closed .cat-card[data-product-source="jedipic"] .cat-card__cart { display: none !important; } .cat-card__cart-label { display: block; line-height: 1; color: inherit; flex: 0 0 auto; } .cat-card__cart-icon { width: calc(24 * var(--cat-card-unit-x)); height: calc(24 * var(--cat-card-unit-y)); display: block; object-fit: contain; flex: 0 0 auto; pointer-events: none; } .cat-card__cart:hover, .cat-card__cart:focus-visible { background: #eee5da; } .cat-card__cart.is-in-cart { background: #eee5da; } .cat-card__cart.is-in-cart:hover, .cat-card__cart.is-in-cart:focus-visible { transform: none; } .cat-card__cart.is-cart-animating { animation: cat-card-cart-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1); } @media (min-width: 761px) { body:not(.page--homepage) .cat-card[data-product-card] .cat-card__price { top: calc((348 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__currency, body:not(.page--homepage) .cat-card[data-product-card] .cat-card__value-new { font-size: clamp(12px, calc(16.5 * var(--cat-card-unit-x)), 16.5px); line-height: 1; } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__value-old, body:not(.page--homepage) .cat-card[data-product-card] .cat-card__discount { font-size: clamp(11px, calc(15 * var(--cat-card-unit-x)), 15px); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge { top: calc((372 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-row { top: calc((398 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } body:not(.page--homepage) .cat-card[data-product-card].cat-card--no-service .cat-card__store-row { top: calc((372 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__similar { top: auto; bottom: calc(10 * var(--cat-card-unit-y)); } body:not(.page--homepage) .cat-card[data-product-card].cat-card--no-service .cat-card__similar { top: auto; bottom: calc(10 * var(--cat-card-unit-y)); } } @keyframes cat-card-cart-pop { 0% { transform: scale(0.92); } 35% { transform: scale(1.08); } 60% { transform: scale(0.98); } 100% { transform: scale(1); } } @media (max-width: 1140px) { .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 760px) { .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-inline: 0; } .container.cards-grid, .search-page__results .cards-grid, .featured-hub-marketplace__grid.cards-grid { width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); margin-right: 0; } .cat-card { --cat-card-mobile-readable: var(--cat-card-scale-inverse, 1); border-radius: 16px; box-shadow: none; } .cat-card--media-square { --cat-card-height: 560px; aspect-ratio: 325 / 560; } .cat-card--media-tall { --cat-card-height: 630px; aspect-ratio: 325 / 630; } .cat-card--media-wide { --cat-card-height: 510px; aspect-ratio: 325 / 510; } .cat-card:hover, .cat-card.is-actions-open { box-shadow: none; } .cat-card:has(:focus-visible) { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .cat-card__hover-actions, .cat-card:hover .cat-card__hover-actions, .cat-card.is-actions-open .cat-card__hover-actions { display: none; opacity: 0; pointer-events: none; transform: none; } .cat-card:hover .cat-card__now, .cat-card.is-actions-open .cat-card__now { opacity: 1; } .cat-card__title { top: calc((331 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); width: calc(305 * var(--cat-card-unit-x)); font-size: calc(14.5px * var(--cat-card-mobile-readable)); line-height: 1.12; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cat-card__price { top: calc((408 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); width: calc(307 * var(--cat-card-unit-x)); gap: calc(5px * var(--cat-card-mobile-readable)); } .cat-card__currency, .cat-card__value-new { font-size: calc(15.5px * var(--cat-card-mobile-readable)); line-height: 1; } .cat-card__value-old { font-size: calc(12.5px * var(--cat-card-mobile-readable)); line-height: 1; } .cat-card__discount { display: none; } .cat-card__service-badge { top: calc((464 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); height: calc(15px * var(--cat-card-mobile-readable)); } body[data-jp-language="ru"] .cat-card__service-badge[data-jp-visible-label] { height: calc(22px * var(--cat-card-mobile-readable)); max-width: calc(86px * var(--cat-card-mobile-readable)); padding: 0 calc(7px * var(--cat-card-mobile-readable)); font-size: calc(8.8px * var(--cat-card-mobile-readable)); } .cat-card__service-badge-img { height: 100%; } .cat-card__service-badge-img--digital, .cat-card__service-badge-img--free-download { width: calc(96px * var(--cat-card-mobile-readable)); } .cat-card__service-badge-img--shipping { width: calc(92px * var(--cat-card-mobile-readable)); } .cat-card__store-row { top: calc((506 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); min-height: calc(21px * var(--cat-card-mobile-readable)); height: calc(21px * var(--cat-card-mobile-readable)); align-items: center; font-size: calc(12.5px * var(--cat-card-mobile-readable)); max-width: min(calc(136px * var(--cat-card-mobile-readable)), calc(295 * var(--cat-card-unit-x))); } .cat-card--no-service .cat-card__store-row { top: calc((472 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } .cat-card__store { height: calc(30px * var(--cat-card-mobile-readable)); padding: 0 calc(8px * var(--cat-card-mobile-readable)); font-size: calc(12.5px * var(--cat-card-mobile-readable)); line-height: 1; } .cat-card__rating-value, .cat-card__reaction-count { font-size: clamp(19px, calc(12.5px * var(--cat-card-mobile-readable)), 29px); } .cat-card__store { font-size: calc(12.5px * var(--cat-card-mobile-readable)); line-height: 1; max-width: min(calc(136px * var(--cat-card-mobile-readable)), calc(295 * var(--cat-card-unit-x))); } .cat-card__store-row > svg, .cat-card__store-row > img.cat-card__store-icon, .cat-card__store-notch { display: none; } .cat-card__media-stats { right: calc(8 * var(--cat-card-unit-x)); bottom: calc(8 * var(--cat-card-unit-y)); gap: calc(6px * var(--cat-card-mobile-readable)); } .cat-card__review-pill { height: calc(28px * var(--cat-card-mobile-readable)); } .cat-card__review-pill { padding-inline: calc(8px * var(--cat-card-mobile-readable)); } .cat-card__reaction { position: relative; height: calc(44px * var(--cat-card-mobile-readable)); min-width: calc(44px * var(--cat-card-mobile-readable)); justify-content: center; padding-inline: calc(7px * var(--cat-card-mobile-readable)); background: transparent; } .cat-card__reaction::before { content: ""; position: absolute; inset: calc(8px * var(--cat-card-mobile-readable)) 0; border-radius: inherit; background: rgba(238, 229, 218, 0.7); pointer-events: none; } .cat-card__reaction.is-liked { background: transparent; } .cat-card__reaction > * { position: relative; z-index: 1; } .cat-card__similar, .cat-card__cart { height: calc(44px * var(--cat-card-mobile-readable)); bottom: calc(10 * var(--cat-card-unit-y)); font-size: clamp(19px, calc(13px * var(--cat-card-mobile-readable)), 29px); } .cat-card__similar { display: none; } .cat-card__similar:hover, .cat-card__similar:focus-visible { background: #f8f1eb; } .cat-card__similar:hover .cat-card__similar-icon, .cat-card__similar:focus-visible .cat-card__similar-icon { transform: none; } .cat-card__similar-icon { width: calc(17px * var(--cat-card-mobile-readable)); height: calc(10px * var(--cat-card-mobile-readable)); flex-basis: calc(17px * var(--cat-card-mobile-readable)); } .cat-card__cart { width: calc(44px * var(--cat-card-mobile-readable)); min-width: calc(44px * var(--cat-card-mobile-readable)); padding: 0; background: transparent; outline: 0; } .cat-card__cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cat-card__cart-icon { width: calc(25px * var(--cat-card-mobile-readable)); height: calc(25px * var(--cat-card-mobile-readable)); flex-basis: calc(25px * var(--cat-card-mobile-readable)); } .cat-card__cart:hover, .cat-card__cart:focus-visible, .cat-card__cart.is-in-cart { background: #eee5da; } .cat-card:not([data-product-source="jedipic"]) .cat-card__cart { display: none; } } @media (max-width: 380px) { .cards-grid { gap: 10px; } } /* [bundle] /styles/components/skeleton.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .jp-skeleton { position: relative; overflow: hidden; background: #e9ddd0; border-radius: 18px; isolation: isolate; } .jp-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(248, 241, 235, 0) 0%, rgba(248, 241, 235, 0.78) 50%, rgba(248, 241, 235, 0) 100%); animation: jp-skeleton-shimmer 1.55s ease-in-out infinite; } .jp-skeleton--text { height: 16px; border-radius: 999px; } .jp-skeleton--text-sm { height: 12px; border-radius: 999px; } .jp-skeleton--text-lg { height: 24px; border-radius: 999px; } .jp-skeleton--pill { height: 42px; border-radius: 999px; } .jp-skeleton--button { height: 55px; border-radius: 999px; } .jp-skeleton--chip { height: 42px; border-radius: 999px; } .jp-skeleton--circle { border-radius: 999px; } .jp-skeleton--card { border-radius: 22px; } @keyframes jp-skeleton-shimmer { 100% { transform: translateX(100%); } } .jp-canonical-spinner { width: var(--jp-spinner-size, 38px); height: var(--jp-spinner-size, 38px); display: block; box-sizing: border-box; } .jp-canonical-spinner__svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: center; animation: jp-spin 0.9s linear infinite; } .jp-canonical-spinner__track, .jp-canonical-spinner__arc { fill: none; stroke-width: var(--jp-spinner-stroke, 5px); } .jp-canonical-spinner__track { stroke: var(--jp-spinner-track, rgba(35, 32, 48, 0.1)); } .jp-canonical-spinner__arc { stroke: var(--jp-spinner-color, var(--color-forest)); stroke-linecap: round; stroke-dasharray: 34 113; transform: rotate(-90deg); transform-origin: center; } @keyframes jp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .jp-canonical-spinner--inline { --jp-spinner-size: 1.1em; --jp-spinner-stroke: 6px; --jp-spinner-color: currentColor; --jp-spinner-track: transparent; display: inline-block; vertical-align: -0.18em; margin-right: 0.45em; flex: 0 0 auto; } .jp-btn-is-busy { pointer-events: none; opacity: 0.72; } .jp-loading-block { display: flex; align-items: center; justify-content: center; padding: 28px 0; } /* [bundle] /styles/components/listing-filters.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .cat-filters-meta { margin-top: 10px; display: flex; justify-content: flex-end; margin-bottom: 10px; } .cat-filters { margin-top: 0; display: flex; flex-direction: column; gap: 5px; } .cat-filters__sticky { width: 100%; } .cat-filters__bar { display: flex; align-items: flex-end; gap: 5px; width: 100%; } .cat-filters__left, .cat-filters__applied-rail, .cat-filters__right { display: flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: nowrap; } .cat-filters__left { flex: 0 0 auto; } .cat-filters__right { flex: 0 0 auto; margin-left: auto; justify-content: flex-end; flex-direction: row; align-items: flex-end; gap: 0; } .cat-filters__applied-rail { position: relative; flex: 1 1 auto; min-width: 0; min-height: 42px; padding-top: 0; align-self: flex-end; } .cat-filters__applied-rail[hidden] { display: none !important; } .cat-filters__applied-viewport { position: relative; width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; overflow-y: visible; min-height: 42px; } .cat-filters__applied-rail.has-left-nav .cat-filters__applied-viewport { margin-left: 50px; } .cat-filters__applied-rail.has-right-nav .cat-filters__applied-viewport { margin-right: 50px; } .cat-filters__applied { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; padding-bottom: 0; min-height: 42px; scroll-snap-type: x proximity; scroll-padding-inline: 4px 24px; } .cat-filters__applied > * { flex: 0 0 auto; scroll-snap-align: start; scroll-snap-stop: normal; } .cat-filters__applied::-webkit-scrollbar { width: 0; height: 0; display: none; } .cat-filters__applied-nav { position: absolute; top: 4.5px; width: 50px; height: 33px; border: 0; border-radius: 999px; background: #eee5da; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, background-color 0.18s ease; z-index: 2; } .cat-filters__applied-nav:hover, .cat-filters__applied-nav:focus-visible { background: #dcddd4; } .cat-filters__applied-nav.is-visible { opacity: 1; pointer-events: auto; } .cat-filters__applied-nav--prev { left: 0; } .cat-filters__applied-nav--next { right: 0; } .cat-filters__applied-nav-icon { width: 22px; height: 14px; display: block; object-fit: contain; } .cat-filters__applied-fade { position: absolute; top: 0; width: 48px; height: 42px; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; z-index: 1; } .cat-filters__applied-fade.is-visible { opacity: 1; } .cat-filters__applied-fade--left { left: 50px; background: linear-gradient(90deg, #f8f1eb 0%, #f8f1eb 36%, rgba(248, 241, 235, 0) 100%); } .cat-filters__applied-fade--right { right: 50px; background: linear-gradient(270deg, #f8f1eb 0%, #f8f1eb 36%, rgba(248, 241, 235, 0) 100%); } .cat-filters__chip { position: relative; height: 42px; border-radius: 99px; background: #8d9b8b; display: inline-flex; align-items: center; gap: 0; padding: 0; box-sizing: border-box; flex: 0 0 auto; overflow: hidden; transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } .cat-filters__chip::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 18%, color-mix(in srgb, var(--color-cream) 30%, transparent) 46%, transparent 72%); transform: translateX(-115%); } .cat-filters__chip-main { border: 0; background: transparent; min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0; color: #f8f1eb; cursor: pointer; font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1; } .cat-filters__chip-main:focus-visible, .cat-filters__chip-remove:focus-visible { outline: 2px solid rgba(248, 241, 235, 0.45); outline-offset: 2px; } .cat-filters__chip-icon { width: 24px; height: 24px; flex: 0 0 24px; display: block; background-color: currentColor; -webkit-mask-image: var(--chip-mask); mask-image: var(--chip-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .cat-filters__chip-label { display: inline-flex; align-items: center; white-space: nowrap; } .cat-filters__chip-badge { height: 17px; padding: 0 7px; margin-left: 7px; margin-right: 1px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-cream) 88%, var(--color-olive-pill)); color: var(--color-forest); font-family: var(--font-body); font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap; } .cat-filters__chip-chevron { width: 14px; height: 14px; flex: 0 0 14px; display: block; background-color: currentColor; -webkit-mask-image: var(--chip-mask); mask-image: var(--chip-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .cat-filters__chip-divider { width: 1px; height: 30px; background: rgba(248, 241, 235, 0.58); flex: 0 0 1px; align-self: center; } .cat-filters__chip-remove { width: 52px; height: 42px; border: 0; padding: 0; border-top-right-radius: 999px; border-bottom-right-radius: 999px; border-top-left-radius: 0; border-bottom-left-radius: 0; background: #8d9b8b; color: #f8f1eb; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 52px; cursor: pointer; transition: background-color 0.18s ease; } .cat-filters__chip-remove:hover, .cat-filters__chip-remove:focus-visible { background: rgba(220, 221, 212, 0.6); } .cat-filters__chip-remove-icon { width: 12px; height: 12px; display: block; background-color: currentColor; -webkit-mask-image: var(--chip-mask); mask-image: var(--chip-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } body.page[data-category-page-live="1"] .cat-filters__chip--quick, body.page[data-category-page-live="1"] .cat-filters__chip--suggested { background: #829181; } body.page[data-category-page-live="1"] .cat-filters__chip--quick { animation: category-filter-chip-morph 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; } body.page[data-category-page-live="1"] .cat-filters__chip--quick::after { animation: category-filter-chip-sheen 0.44s ease-out both; } body.page[data-category-page-live="1"] .cat-filters__chip-main--quick { min-height: 42px; padding: 0 0 0 12px; gap: 0; } body.page[data-category-page-live="1"] .cat-filters__chip-main--quick .cat-filters__chip-icon { margin-right: 5px; } body.page[data-category-page-live="1"] .cat-filters__chip-main--quick .cat-filters__chip-label { margin-right: 6px; } body.page[data-category-page-live="1"] .cat-filters__chip-main--quick .cat-filters__chip-chevron { margin-right: 6px; } body.page[data-category-page-live="1"] .cat-filters__chip--quick .cat-filters__chip-label { color: #f8f1eb; } body.page[data-category-page-live="1"] .cat-filters__chip--quick .cat-filters__chip-divider { height: 42px; align-self: stretch; background: #f8f1eb; } body.page[data-category-page-live="1"] .cat-filters__chip--quick .cat-filters__chip-remove { width: 44px; min-width: 44px; flex: 0 0 44px; background: transparent; color: #f8f1eb; } body.page[data-category-page-live="1"] .cat-filters__chip--quick .cat-filters__chip-remove:hover, body.page[data-category-page-live="1"] .cat-filters__chip--quick .cat-filters__chip-remove:focus-visible { background: rgba(220, 221, 212, 0.6); } body.page[data-category-page-live="1"] .cat-filters__chip--quick .cat-filters__chip-remove-icon { width: 12px; height: 12px; } body.page[data-category-page-live="1"] .cat-filters__chip--suggested { transition: background-color 0.18s ease, box-shadow 0.18s ease; } body.page[data-category-page-live="1"] .cat-filters__chip-main--suggested { min-height: 42px; padding: 0 12px; gap: 0; color: var(--color-cream); } body.page[data-category-page-live="1"] .cat-filters__chip-main--suggested:focus-visible { outline-color: color-mix(in srgb, var(--color-forest) 45%, transparent); } body.page[data-category-page-live="1"] .cat-filters__chip-main--suggested .cat-filters__chip-icon, body.page[data-category-page-live="1"] .cat-filters__chip-main--suggested .cat-filters__chip-chevron, body.page[data-category-page-live="1"] .cat-filters__chip--quick .cat-filters__chip-icon, body.page[data-category-page-live="1"] .cat-filters__chip--quick .cat-filters__chip-chevron, body.page[data-category-page-live="1"] .cat-filters__chip--quick .cat-filters__chip-remove-icon { opacity: 1; } body.page[data-category-page-live="1"] .cat-filters__chip-main--suggested .cat-filters__chip-icon { margin-right: 5px; } body.page[data-category-page-live="1"] .cat-filters__chip-main--suggested .cat-filters__chip-chevron { margin-left: 6px; } @keyframes category-filter-chip-morph { from { transform: translateY(2px) scale(0.985); } to { transform: translateY(0) scale(1); } } @keyframes category-filter-chip-sheen { 0% { opacity: 0; transform: translateX(-115%); } 28% { opacity: 0.62; } 100% { opacity: 0; transform: translateX(115%); } } @media (prefers-reduced-motion: reduce) { .cat-filters__chip, body.page[data-category-page-live="1"] .cat-filters__chip--quick, body.page[data-category-page-live="1"] .cat-filters__chip--quick::after { animation: none; transition: none; } } .cat-filters__applied-popover, .cat-filters__chip-popover, .cat-filters__sort-popover { position: fixed; top: 0; left: 0; width: auto; min-width: 230px; max-width: min(320px, calc(100vw - 32px)); max-height: 420px; overflow: auto; padding: 5px; border-radius: 24px; background: var(--popup-bg); border: 1px solid var(--popup-border); box-shadow: var(--popup-shadow-soft); z-index: 5400; box-sizing: border-box; } .cat-filters__applied-backdrop, .cat-filters__sort-backdrop { position: fixed; inset: 0; background: transparent; border: 0; margin: 0; padding: 0; z-index: 5390; } .cat-filters__applied-backdrop[hidden], .cat-filters__sort-backdrop[hidden] { display: none !important; } .cat-filters__sort-popover { min-width: 230px; } .cat-filters__applied-popover[hidden], .cat-filters__chip-popover[hidden], .cat-filters__sort-popover[hidden] { display: none !important; } .cat-filters__chip-popover-title { margin: 0; padding: 10px 10px 6px; color: #232030; font-family: var(--font-heading); font-size: 14px; font-weight: 700; line-height: 1.2; } .cat-filters__chip-popover-options { display: flex; flex-direction: column; gap: 0; } .cat-filters__chip-popover-option { border: 0; border-radius: 18px; background: transparent; width: 100%; min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; gap: 10px; color: #232030; cursor: pointer; font-family: var(--font-heading); font-size: 13px; font-weight: 500; text-align: left; transition: background-color 0.18s ease; } .cat-filters__chip-popover-option.is-selected { background: var(--sort-option-selected-bg); } .cat-filters__chip-popover-option:hover, .cat-filters__chip-popover-option:focus-visible, .cat-filters__chip-popover-option:active { background: var(--sort-option-hover); } .cat-filters__chip-popover-option.is-selected:hover, .cat-filters__chip-popover-option.is-selected:focus-visible, .cat-filters__chip-popover-option.is-selected:active { background: var(--sort-option-hover); } .cat-filters__chip-popover-control { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--popup-border-strong); background: var(--popup-bg); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; position: relative; } .cat-filters__chip-popover-option.is-selected .cat-filters__chip-popover-control { border-color: #3f6a60; background: #3f6a60; } .cat-filters__chip-popover-control::after { content: ""; position: absolute; inset: 4px; border-radius: 999px; background: transparent; opacity: 0; } .cat-filters__chip-popover-option.is-selected .cat-filters__chip-popover-control::after { background: var(--popup-bg); opacity: 1; } .cat-filters__chip-popover-swatch { width: 28px; height: 28px; border-radius: 999px; flex: 0 0 28px; border: 1px solid rgba(35, 32, 48, 0.14); } .cat-filters__chip-popover-field-row, .cat-filters__chip-popover-price-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; padding: 0 5px 5px; } .cat-filters__chip-popover-field, .cat-filters__chip-popover-price-field { min-width: 0; height: 44px; border: 1.5px solid var(--popup-control-border); border-radius: 999px; background: var(--popup-bg); color: var(--color-ink); caret-color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 500; padding: 0 18px; outline: 2px solid transparent; outline-offset: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, outline-color 0.2s ease; appearance: none; -webkit-appearance: none; } .cat-filters__chip-popover-field::placeholder, .cat-filters__chip-popover-price-field::placeholder { color: var(--color-ink-soft); opacity: 1; } .cat-filters__chip-popover-field:not(:placeholder-shown), .cat-filters__chip-popover-price-field:not(:placeholder-shown) { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 10%, transparent); } .cat-filters__chip-popover-field:focus, .cat-filters__chip-popover-field:focus-visible, .cat-filters__chip-popover-price-field:focus, .cat-filters__chip-popover-price-field:focus-visible { border-color: var(--popup-focus); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } .cat-filters__chip-popover-field { width: 100%; } .cat-filters__chip-popover-price-field { flex: 1 1 0; } .cat-filters__chip-popover-price-apply { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; cursor: pointer; position: relative; isolation: isolate; overflow: visible; outline: 0; } .cat-filters__chip-popover-price-apply::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--popup-disabled); transform: scale(1); transform-origin: center; transition: transform 0.18s ease; z-index: 0; will-change: transform; } .cat-filters__chip-popover-price-apply:hover::before, .cat-filters__chip-popover-price-apply:focus-visible::before { transform: scale(var(--hover-grow-scale, 1.08)); } .cat-filters__chip-popover-price-apply:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 3px; } .cat-filters__chip-popover-price-apply-icon { position: relative; z-index: 1; width: 17px; height: 10px; display: block; object-fit: contain; pointer-events: none; transform: none; transition: none; } .cat-filters__main { --cat-filter-button-bg: var(--sort-control-bg); --cat-filter-button-text: #232030; --cat-filter-button-shadow: none; --cat-filter-button-icon-filter: none; width: auto; min-width: 120px; height: 42px; padding: 6px 22px; box-sizing: border-box; border: 0; border-radius: 999px; background: transparent; color: var(--cat-filter-button-text); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; max-width: 100%; cursor: pointer; position: relative; overflow: visible; isolation: isolate; transition: color 0.18s ease; } .cat-filters__main-frame { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; z-index: 1; } .cat-filters__main-frame::before { content: ""; width: 19px; height: 19px; flex: 0 0 19px; display: block; background: currentColor; -webkit-mask: url("/assets/header-icons/filters-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/filters-toggle.svg") center / contain no-repeat; } .cat-filters__main-frame > .cat-filters__main-icon { display: none; } .cat-filters__main-icon { width: 19px; height: 19px; flex: 0 0 19px; display: block; object-fit: contain; filter: var(--cat-filter-button-icon-filter); transition: filter 0.18s ease; } .cat-filters__main-label { color: inherit; font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; } .cat-filters__sort { --cat-filter-button-bg: var(--sort-control-bg); --cat-filter-button-text: #232030; --cat-filter-button-shadow: none; --cat-filter-button-icon-filter: none; width: auto; min-width: 0; height: 42px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--cat-filter-button-text); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; flex: 0 0 auto; cursor: pointer; position: relative; overflow: visible; isolation: isolate; transition: color 0.18s ease; max-width: 100%; } .cat-filters__sort.is-active, .cat-filters__sort[aria-expanded="true"] { z-index: 5401; } .cat-filters__main::before, .cat-filters__sort::before, .cat-filters-drawer__category-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cat-filter-button-bg); box-shadow: var(--cat-filter-button-shadow); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; z-index: 0; will-change: transform; } .cat-filters__main:hover::before, .cat-filters__main:focus-visible::before, .cat-filters__sort:hover::before, .cat-filters__sort:focus-visible::before, .cat-filters-drawer__category-button:hover::before, .cat-filters-drawer__category-button:focus-visible::before { transform: scale(var(--hover-grow-scale)); } .cat-filters__main.is-active, .cat-filters-drawer__category-button[aria-expanded="true"] { --cat-filter-button-bg: #232030; --cat-filter-button-text: #f8f1eb; --cat-filter-button-shadow: none; --cat-filter-button-icon-filter: brightness(0) saturate(100%) invert(96%) sepia(17%) saturate(434%) hue-rotate(302deg) brightness(104%) contrast(94%); } .cat-filters__main:focus-visible, .cat-filters__sort:focus-visible, .cat-filters-drawer__category-button:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.24); outline-offset: 2px; } .cat-filters__sort > span, .cat-filters-drawer__category-button > span { position: relative; z-index: 1; } .cat-filters__chevron, .cat-filters__question-icon { display: block; flex: 0 0 auto; object-fit: contain; position: relative; z-index: 1; } .cat-filters__sort .cat-filters__chevron { width: 14px; height: 14px; filter: var(--cat-filter-button-icon-filter); transition: transform 1.12s cubic-bezier(0.18, 1, 0.2, 1), filter 0.18s ease; transform-origin: center; will-change: transform; } .cat-filters__sort[aria-expanded="true"] .cat-filters__chevron { transform: rotate(180deg); } .cat-filters__question { position: relative; z-index: 4; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: help; } .cat-filters__question-icon { width: 20px; height: 20px; } .cat-filters__question:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.28); outline-offset: 3px; } .cat-filters__sponsored { position: relative; display: inline-flex; align-items: center; gap: 15px; color: #232030; font-family: var(--font-heading); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; flex: 0 0 auto; } .cat-filters__sponsored[hidden] { display: none !important; } .cat-filters__ad-tooltip { position: absolute; top: calc(100% + 10px); right: 0; z-index: 5600; width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border: 0; border-radius: 8px; background: var(--popup-bg); color: var(--color-ink); font-family: var(--font-body); font-size: 12.5px; font-weight: 650; line-height: 1.35; white-space: normal; text-align: left; box-shadow: 0 12px 32px rgba(35, 32, 48, 0.22); opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease; } .cat-filters__ad-tooltip::before { content: ""; position: absolute; top: -6px; right: 12px; width: 12px; height: 12px; border-radius: 2px; background: var(--popup-bg); border: 0; transform: rotate(45deg); } .cat-filters__question:hover + .cat-filters__ad-tooltip, .cat-filters__question:focus-visible + .cat-filters__ad-tooltip, .cat-filters__sponsored:focus-within .cat-filters__ad-tooltip { opacity: 1; visibility: visible; transform: translateY(0); } body.header-burger-panel-open .cat-filters__ad-tooltip { opacity: 0; visibility: hidden; } @media (max-width: 980px) { .cat-filters-meta { width: 100%; } .cat-filters__sticky { width: 100%; } .cat-filters__bar { flex-wrap: wrap; align-items: center; gap: 8px; } .cat-filters__left, .cat-filters__right { width: auto; flex: 0 0 auto; } .cat-filters__right { margin-left: 0; justify-content: flex-start; align-items: center; gap: 8px; } .cat-filters__main, .cat-filters__sort { width: auto; height: 42px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; } .cat-filters__main { min-width: 120px; padding-left: 22px; padding-right: 22px; } .cat-filters__sort { min-width: 108px; padding-left: 14px; padding-right: 14px; gap: 10px; } .cat-filters__main-frame { gap: 10px; } .cat-filters__main-icon { width: 19px; height: 19px; flex-basis: 19px; } .cat-filters__sort .cat-filters__chevron { width: 14px; height: 14px; } } @media (max-width: 980px) { .cat-filters__applied-rail { width: 100%; flex: 1 0 100%; padding-inline: 0; min-height: 52px; order: 3; overflow: visible; } .cat-filters__applied-viewport { min-height: 52px; overflow: visible; } .cat-filters__applied-rail.has-left-nav .cat-filters__applied-viewport, .cat-filters__applied-rail.has-right-nav .cat-filters__applied-viewport { margin-left: 0; margin-right: 0; } .cat-filters__applied { gap: 8px; min-height: 52px; padding-top: 4px; padding-bottom: 4px; scroll-padding-inline: 0 18px; scroll-snap-type: x mandatory; touch-action: pan-x; } .cat-filters__applied > * { scroll-snap-align: start; scroll-snap-stop: always; } .cat-filters__right { order: 2; } .cat-filters__left { order: 1; } .cat-filters__applied-nav, .cat-filters__applied-fade { display: none; } } @media (max-width: 760px) { .cat-filters-meta { margin-top: 18px; margin-bottom: 7px; } .cat-filters { margin-top: 0; gap: 3px; } .cat-filters__bar { flex-wrap: wrap; align-items: center; gap: 6px; justify-content: space-between; } .cat-filters__sticky { width: 100%; } .cat-filters__left, .cat-filters__right { width: auto; flex: 0 0 auto; min-width: 0; } .cat-filters__left { margin-right: auto; } .cat-filters__right { margin-left: auto; flex-wrap: nowrap; justify-content: flex-end; align-items: center; } body.page[data-category-page-live="1"] .cat-filters__left { width: clamp(136px, calc(56% - 3px), 190px); flex: 0 1 clamp(136px, calc(56% - 3px), 190px); margin-right: 0; } body.page[data-category-page-live="1"] .cat-filters__right { width: clamp(108px, calc(44% - 3px), 190px); flex: 0 1 clamp(108px, calc(44% - 3px), 190px); margin-left: auto; } .cat-filters__main, .cat-filters__sort { width: auto; height: 44px; min-height: 44px; padding-top: 6px; padding-bottom: 6px; } .cat-filters__main { min-width: 120px; padding-left: 22px; padding-right: 22px; } .cat-filters__sort { min-width: 108px; padding-left: 14px; padding-right: 14px; gap: 10px; } body.page[data-category-page-live="1"] .cat-filters__main, body.page[data-category-page-live="1"] .cat-filters__sort { width: 100%; min-width: 0; } body.page[data-category-page-live="1"] .cat-filters__main { padding-left: 14px; padding-right: 14px; } body.page[data-category-page-live="1"] .cat-filters__sort { padding-left: 12px; padding-right: 12px; gap: 8px; } .cat-filters__main-frame { gap: 10px; } body.page[data-category-page-live="1"] .cat-filters__main-frame { min-width: 0; gap: 8px; } .cat-filters__main-icon { width: 19px; height: 19px; flex-basis: 19px; } .cat-filters__main-label, .cat-filters__sort { font-size: 14px; } body.page[data-category-page-live="1"] .cat-filters__main-label, body.page[data-category-page-live="1"] .cat-filters__sort > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-filters__sort .cat-filters__chevron { width: 14px; height: 14px; } .cat-filters__main:hover::before, .cat-filters__sort:hover::before, .cat-filters-drawer__category-button:hover::before { transform: scale(1); } .cat-filters__chip { height: 44px; min-height: 44px; } .cat-filters__chip-main, body.page[data-category-page-live="1"] .cat-filters__chip-main--quick { min-height: 44px; } body.page[data-category-page-live="1"] .cat-filters__chip-main--suggested { min-height: 44px; padding-inline: 10px; } body.page[data-category-page-live="1"] .cat-filters__chip-badge { height: 16px; padding-inline: 6px; margin-left: 6px; font-size: 9px; } .cat-filters__chip-remove { height: 44px; } .cat-filters-meta { width: auto; box-sizing: border-box; } body.page[data-category-page-live="1"] .cat-filters-meta { width: calc(100% - 32px); box-sizing: border-box; } .cat-filters__sponsored { width: auto; max-width: 100%; justify-content: flex-end; } } @media (max-width: 760px) { body.page[data-category-page-live="1"] .cat-filters__bar { flex-wrap: nowrap; align-items: center; gap: 8px; justify-content: flex-start; overflow: visible; } body.page[data-category-page-live="1"] .cat-filters__applied-rail { order: 0; flex: 1 1 auto; width: calc(100% + 32px); min-width: 0; margin-left: -16px; margin-right: -16px; max-width: none; overflow: visible; } body.page[data-category-page-live="1"] .cat-filters__applied-viewport { width: 100%; max-width: none; overflow-x: hidden; overflow-y: visible; } body.page[data-category-page-live="1"] .cat-filters__applied { width: 100%; max-width: none; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: calc(max(16px, env(safe-area-inset-right, 0px)) + 94px); scroll-padding-inline: 8px calc(max(16px, env(safe-area-inset-right, 0px)) + 94px); scroll-snap-type: x mandatory; } body.page[data-category-page-live="1"] .cat-filters__chip { scroll-snap-align: start; } body.page[data-category-page-live="1"] .cat-filters-meta { box-sizing: border-box; padding-right: calc(max(16px, env(safe-area-inset-right, 0px)) + 76px); } body.page[data-category-page-live="1"] .cat-filters__left, body.page[data-category-page-live="1"] .cat-filters__right { position: fixed; bottom: calc(var(--mobile-bottom-nav-height, 72px) + 14px); z-index: 5200; width: 52px; min-width: 0; flex: none; margin: 0; } body.page[data-category-page-live="1"] .cat-filters__left { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mobile-bottom-nav-height, 72px) + 78px); } body.page[data-category-page-live="1"] .cat-filters__right { right: max(14px, env(safe-area-inset-right, 0px)); } body.page[data-category-page-live="1"] .cat-filters__main, body.page[data-category-page-live="1"] .cat-filters__sort { width: 52px; min-width: 52px; max-width: 52px; height: 52px; flex: 0 0 52px; padding: 0; gap: 0; border-radius: 50%; box-shadow: var(--popup-shadow-soft); } body.page[data-category-page-live="1"] .cat-filters__main-label, body.page[data-category-page-live="1"] .cat-filters__sort > span { display: none; } body.page[data-category-page-live="1"] .cat-filters__main-frame { gap: 0; width: auto; } body.page[data-category-page-live="1"] .cat-filters__main-frame::before { width: 24px; height: 24px; flex-basis: 24px; } body.page[data-category-page-live="1"] .cat-filters__sort .cat-filters__chevron { display: none; } body.page[data-category-page-live="1"] .cat-filters__sort::after { content: ""; position: relative; z-index: 1; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("/assets/gift-room-icons/shared/arrows-sort.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/shared/arrows-sort.svg") center / contain no-repeat; } } @media (max-width: 640px) { .cat-filters__ad-tooltip { width: min(286px, calc(100vw - 32px)); } } body.page.is-category-filters-open, body.is-search-filters-open { overflow: hidden; } .cat-filters-drawer[hidden] { display: none; } .cat-filters-drawer { --cat-filters-drawer-panel-width: min(409px, calc(100vw - 16px)); --cat-filters-drawer-panel-slide-duration: 1.18s; --cat-filters-drawer-close-appear-delay: 1.02s; --cat-filter-option-selected: #3F6A60; --cat-filter-option-shadow: 0 0 4px rgba(35, 32, 48, 0.5); --cat-filter-option-green-filter: brightness(0) saturate(100%) invert(36%) sepia(20%) saturate(718%) hue-rotate(118deg) brightness(91%) contrast(89%); position: fixed; inset: 0; z-index: var(--z-modal-front, 13000); pointer-events: none; } .cat-filters-drawer.is-open { pointer-events: auto; } .cat-filters-drawer__backdrop { position: absolute; inset: 0; border: 0; background: rgba(35, 32, 48, 0.34); cursor: pointer; opacity: 0; transition: opacity 0.88s cubic-bezier(0.16, 1, 0.3, 1); } .cat-filters-drawer.is-open .cat-filters-drawer__backdrop { opacity: 1; } .cat-filters-drawer__panel { position: absolute; top: 0; left: 0; width: var(--cat-filters-drawer-panel-width); height: 100%; background: var(--popup-bg); border-top-right-radius: 24px; border-bottom-right-radius: 24px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 24px rgba(35, 32, 48, 0.22); transform: translateX(-100%); transition: transform var(--cat-filters-drawer-panel-slide-duration) cubic-bezier(0.18, 1, 0.2, 1); will-change: transform; backface-visibility: hidden; } .cat-filters-drawer.is-open .cat-filters-drawer__panel { transform: translateX(0); } .cat-filters-drawer__sheet-grip { display: none; } .cat-filters-drawer__header { padding: 16px 16px 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #eee5da; } .cat-filters-drawer__title { margin: 0; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .cat-filters-drawer__close { width: var(--popup-close-width, 78px); height: var(--popup-close-height, 55px); position: relative; border: 0; border-radius: 999px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: visible; transition: background-color 0.24s ease, filter 0.24s ease; will-change: transform; } .cat-filters-drawer__close::before { content: none; } .cat-filters-drawer__close:hover, .cat-filters-drawer__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))); } body.page[data-category-page-live="1"] .cat-filters-drawer.is-open .cat-filters-drawer__close:hover, body.page[data-category-page-live="1"] .cat-filters-drawer.is-open .cat-filters-drawer__close:focus-visible { background-color: var(--popup-close-hover-bg, var(--sort-control-bg, rgb(225 209 188))) !important; filter: var(--popup-close-hover-filter, drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12))) !important; transition: none !important; } .cat-filters-drawer__close:active { transform: none; } .cat-filters-drawer__close:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .cat-filters-drawer__close-icon { position: absolute; left: 50%; top: 50%; width: var(--popup-close-icon-size, 17px); height: var(--popup-close-icon-size, 17px); display: block; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; } .cat-filters-drawer__close--outside { position: absolute; top: 20px; left: calc(var(--cat-filters-drawer-panel-width) + 10px); z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.92); transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.24s; will-change: opacity, transform; } .cat-filters-drawer.is-open .cat-filters-drawer__close--outside { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); transition-delay: var(--cat-filters-drawer-close-appear-delay), var(--cat-filters-drawer-close-appear-delay), var(--cat-filters-drawer-close-appear-delay); } @media (max-width: 767px) { .cat-filters-drawer__close, .cat-filters-drawer__close--outside { display: none !important; } } .cat-filters-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 10px 20px 80px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: #829181 transparent; } .cat-filters-drawer__main-view[hidden], .cat-filters-drawer__category-browser-view[hidden], .cat-filters-drawer__footer-actions[hidden] { display: none !important; } .cat-filters-drawer__body::-webkit-scrollbar { width: 7px; } .cat-filters-drawer__body::-webkit-scrollbar-track { background: transparent; } .cat-filters-drawer__body::-webkit-scrollbar-thumb { background: #829181; border-radius: 999px; } .cat-filters-drawer__main-view, .cat-filters-drawer__category-browser-view { display: flex; flex-direction: column; gap: 11px; min-height: 100%; } .cat-filters-drawer__category-browser-view { padding: 8px 4px 0; } .cat-filters-drawer__category-browser-title { margin: 0; color: #232030; font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.2; } .cat-filters-drawer__category-browser-options { display: flex; flex-direction: column; gap: 0; } .cat-filters-drawer__category-browser-option { width: 100%; min-height: 40px; padding: 4px 15px; border: 0; border-radius: 10px; background: transparent; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; color: #232030; font-family: var(--font-heading); font-size: 16px; font-weight: 500; line-height: 1.2; transition: background-color 0.18s ease; } .cat-filters-drawer__category-browser-option--root { font-weight: 700; } .cat-filters-drawer__category-browser-option.is-selected { background: #dcddd4; } .cat-filters-drawer__category-browser-option:hover, .cat-filters-drawer__category-browser-option:focus-visible { background: #eee5da; } .cat-filters-drawer__category-browser-option.is-selected:hover, .cat-filters-drawer__category-browser-option.is-selected:focus-visible { background: #dcddd4; } .cat-filters-drawer__category-browser-dots { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; min-width: 0; } .cat-filters-drawer__category-browser-dot { width: 10px; height: 10px; border-radius: 999px; background: #232030; flex: 0 0 10px; } .cat-filters-drawer__category-browser-label { min-width: 0; overflow-wrap: anywhere; } .cat-filters-drawer__category { display: flex; flex-direction: column; gap: 8px; } .cat-filters-drawer__category-label { margin: 0; color: #232030; font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1.2; } .cat-filters-drawer__category-button { --cat-filter-button-bg: #f8f1eb; --cat-filter-button-text: #232030; --cat-filter-button-shadow: inset 0 0 0 2px #232030; --cat-filter-button-icon-filter: none; min-height: 44px; padding: 5px 22px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--cat-filter-button-text); font-family: var(--font-heading); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; position: relative; overflow: visible; isolation: isolate; transition: color 0.18s ease; } .cat-filters-drawer__category-chevron { width: 22px; height: 14px; display: block; object-fit: contain; flex: 0 0 auto; position: relative; z-index: 1; filter: var(--cat-filter-button-icon-filter); transition: filter 0.18s ease; } .cat-filters-drawer__sections { display: flex; flex-direction: column; gap: 11px; padding-bottom: 40px; } .cat-filters-drawer__sections::after { content: ""; display: block; flex: 0 0 auto; height: 1px; margin-bottom: 32px; } .cat-filters-drawer__section { background: #f8f1eb; border-radius: 18px; box-shadow: var(--shadow-card-hover); padding: 6px 6px 18px 8px; overflow: visible; } .cat-filters-drawer__section[data-filter-drawer-section="color"], .cat-filters-drawer__section[data-filter-drawer-section="gem-color"], .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] { padding-bottom: 24px; } .cat-filters-drawer__section-head { padding: 0 0 0 8px; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cat-filters-drawer__section-title { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; min-width: 0; color: #232030; font-family: var(--font-heading); font-size: 13px; font-weight: 600; line-height: 1.2; } .cat-filters-drawer__section-title-icon { width: 20px; height: 20px; flex: 0 0 20px; display: block; object-fit: contain; align-self: center; } .cat-filters-drawer__section-title-icon--color { transform: none; } .cat-filters-drawer__section-title-text, .cat-filters-drawer__section-value { display: inline-flex; align-items: center; min-height: 24px; min-width: 0; overflow-wrap: anywhere; } .cat-filters-drawer__section-value { font-weight: 600; } .cat-filters-drawer__section-info { width: 13px; height: 13px; flex: 0 0 13px; display: block; object-fit: contain; } .cat-filters-drawer__section-toggle { width: 56px; height: 36px; margin-left: auto; border: 0; border-radius: 999px; background: #dcddd4; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; } .cat-filters-drawer__section-toggle-icon { width: 16px; height: 10px; display: block; object-fit: contain; transform: rotate(180deg); transition: transform 0.22s ease; } .cat-filters-drawer__section.is-collapsed .cat-filters-drawer__section-toggle-icon { transform: rotate(0deg); } .cat-filters-drawer__section.is-collapsed { padding: 6px 6px 6px 8px; } .cat-filters-drawer__section:has(.cat-filters-drawer__more) { padding-bottom: 10px; } .cat-filters-drawer__section.is-collapsed .cat-filters-drawer__section-head { padding: 0 0 0 8px; min-height: 36px; } .cat-filters-drawer__section.is-collapsed { padding-bottom: 6px; } .cat-filters-drawer__section-body { min-width: 0; max-width: 100%; max-height: 9999px; overflow: visible; padding-top: 8px; opacity: 1; transition: opacity 0.18s ease; } .cat-filters-drawer__section:not(.is-collapsed) .cat-filters-drawer__section-body { transition: none; } .cat-filters-drawer__section.is-collapsed .cat-filters-drawer__section-body { padding-top: 0; } .cat-filters-drawer__section.is-collapsed .cat-filters-drawer__section-body { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; margin: 0; padding: 0; } .cat-filters-drawer__options { display: flex; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .cat-filters-drawer__option { box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 46px; padding: 6px 13px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; box-shadow: none; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, background-color 0.16s ease; } .cat-filters-drawer__option.is-selected { border-color: transparent; background: transparent; color: var(--color-ink); } .cat-filters-drawer__option:hover, .cat-filters-drawer__option:focus-visible { background: #DCDDD4; box-shadow: none; } .cat-filters-drawer__option.is-selected:hover, .cat-filters-drawer__option.is-selected:focus-visible { background: #DCDDD4; box-shadow: none; } .cat-filters-drawer__option-label { min-width: 0; max-width: 100%; color: #232030; font-family: var(--font-heading); font-size: 13px; font-weight: 500; line-height: 1.2; transition: color 0.16s ease; } .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-label { color: var(--color-ink); } .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-sublabel { color: var(--color-ink-soft); } .cat-filters-drawer__option-info { width: 13px; height: 13px; display: block; object-fit: contain; flex: 0 0 auto; } .cat-filters-drawer__control { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--popup-outline); background: #f8f1eb; position: relative; flex: 0 0 20px; } .cat-filters-drawer__control::after { content: ""; position: absolute; inset: 4px; border-radius: 999px; background: transparent; } .cat-filters-drawer__option.is-selected .cat-filters-drawer__control { border-color: var(--cat-filter-option-selected); background: var(--cat-filter-option-selected); } .cat-filters-drawer__option.is-selected .cat-filters-drawer__control::after { background: #f8f1eb; } .cat-filters-drawer__swatch { width: 31px; height: 18px; border-radius: 999px; border: 0.5px solid var(--popup-outline-soft); flex: 0 0 31px; } .cat-filters-drawer__section--swatch-grid .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; padding: 10px 10px 16px; overflow: visible; } .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option { width: 100%; min-width: 0; overflow: visible; flex-direction: column; align-items: center; gap: 8px; padding: 4px 2px; min-height: 0; border-radius: 12px; text-align: center; background: transparent; } .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option:hover, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option:hover, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option:hover, .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option.is-selected, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option.is-selected, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option.is-selected { background: transparent; } .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option .cat-filters-drawer__control, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option .cat-filters-drawer__control, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option .cat-filters-drawer__control { display: none; } .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__swatch, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__swatch, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__swatch { width: calc(100% - 8px); height: 56px; min-height: 56px; max-height: 56px; margin-inline: 4px; box-sizing: border-box; flex: 0 0 56px; border-radius: 999px; border: 1px solid rgba(35, 32, 48, 0.18); background-clip: padding-box; transition: border-color 0.14s ease, outline-color 0.14s ease; } .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option { min-height: 100px; height: 100px; justify-content: flex-start; } .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option:hover .cat-filters-drawer__swatch, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option:hover .cat-filters-drawer__swatch, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option:hover .cat-filters-drawer__swatch { border-color: rgba(63, 106, 96, 0.48); } .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__swatch, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__swatch, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__swatch { border-color: var(--cat-filter-option-selected); outline: 2px solid var(--cat-filter-option-selected); outline-offset: 2px; } .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option-label, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option-label, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option-label { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; word-break: normal; text-wrap: balance; font-size: 12px; font-weight: 500; color: #232030; letter-spacing: 0; line-height: 1.2; } .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-label, .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-label, .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-label { color: var(--color-ink); font-weight: 500; } .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 13px 4px; } .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__option { width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 12px 8px; min-height: 56px; border: 1.5px solid transparent; border-radius: 12px; background: transparent; text-align: center; box-shadow: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease; } .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__option .cat-filters-drawer__control { display: none; } .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__option-label { display: block; width: 100%; min-width: 0; max-width: 100%; font-size: 13px; font-weight: 500; color: #232030; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; word-break: normal; text-wrap: balance; } .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__option:hover { border-color: transparent; background: transparent; box-shadow: var(--cat-filter-option-shadow); } .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__option.is-selected { background: transparent; border-color: transparent; } .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-label { color: var(--color-ink); font-weight: 500; } .cat-filters-drawer__section[data-filter-drawer-section="assembly-required"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="vegan-cruelty"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="dpi"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="customizable"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="license-type"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="framed-status"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="art-edition"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="power-source"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="play-environment"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="screen-free"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="kids-gender-style"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="kids-age-stage"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="heel-height"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="bundle-size"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="bulk-size"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="skill-level"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="signed"] .cat-filters-drawer__options, .cat-filters-drawer__section[data-filter-drawer-section="age-rating"] .cat-filters-drawer__options { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); } .cat-filters-drawer__section[data-filter-drawer-section="bundle-size"] .cat-filters-drawer__option-label { overflow-wrap: normal; word-break: normal; text-wrap: initial; } .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px 8px; padding: 10px 13px 4px; } .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option { width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 4px; min-height: 100px; height: 100px; border: 1.5px solid transparent; border-radius: 12px; background: transparent; text-align: center; color: #232030; box-shadow: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease; } .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option .cat-filters-drawer__control { display: none; } .cat-filters-drawer__option-icon { width: 56px; height: 56px; display: block; object-fit: contain; color: #232030; flex: 0 0 56px; transition: filter 0.16s ease; } .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option-label { width: 100%; min-width: 0; max-width: 100%; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; min-height: 26px; display: flex; align-items: flex-start; justify-content: center; text-align: center; overflow-wrap: anywhere; word-break: normal; text-wrap: balance; } .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option:hover { border-color: transparent; background: transparent; box-shadow: var(--cat-filter-option-shadow); } .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option.is-selected { border-color: transparent; background: transparent; color: var(--color-ink); } .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-icon { filter: var(--cat-filter-option-green-filter); } @media (max-width: 760px) { .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__options { grid-template-columns: repeat(3, 1fr); } .cat-filters-drawer__option-icon { width: 48px; height: 48px; flex-basis: 48px; } .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option { height: 92px; min-height: 92px; } } .cat-filters-drawer__section.cat-filters-drawer__section--text-options .cat-filters-drawer__options { display: flex; flex-direction: column; gap: 0; padding: 8px 0 0; } .cat-filters-drawer__section.cat-filters-drawer__section--text-options .cat-filters-drawer__option { width: 100%; min-width: 0; max-width: 100%; min-height: 46px; height: auto; padding: 6px 13px; border-radius: 10px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; overflow: visible; } .cat-filters-drawer__section.cat-filters-drawer__section--text-options .cat-filters-drawer__option .cat-filters-drawer__control { display: block; } .cat-filters-drawer__section.cat-filters-drawer__section--text-options .cat-filters-drawer__option-label { display: block; width: auto; min-width: 0; max-width: 100%; font-size: 13px; line-height: 1.2; text-align: left; white-space: normal; overflow-wrap: anywhere; word-break: normal; text-wrap: balance; } .cat-filters-drawer__price-visual { --cat-price-visual-x: 13px; padding: 14px var(--cat-price-visual-x) 6px; display: flex; flex-direction: column; gap: 14px; } .cat-filters-drawer__price-graph { position: relative; height: 92px; padding-bottom: 12px; } .cat-filters-drawer__price-bars { position: absolute; inset: 0 0 12px 0; display: flex; align-items: flex-end; gap: 2px; pointer-events: none; } .cat-filters-drawer__price-bar { flex: 1 1 0; min-width: 0; background: rgba(35, 32, 48, 0.18); border-radius: 2px 2px 0 0; transition: background-color 0.16s ease; } .cat-filters-drawer__price-bar[style*="height: 0"] { opacity: 0; } .cat-filters-drawer__price-bar.is-active { background: #232030; } .cat-filters-drawer__price-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: -10px; padding: 0 4px; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; opacity: 0.82; pointer-events: none; } .cat-filters-drawer__price-axis span, .cat-filters-drawer__price-input-prefix, .cat-filters-drawer__price-input-suffix { white-space: nowrap; } .cat-filters-drawer__price-slider { position: absolute; left: 10px; right: 10px; bottom: 0; height: 24px; touch-action: none; } .cat-filters-drawer__price-track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(35, 32, 48, 0.22); border-radius: 999px; pointer-events: none; } .cat-filters-drawer__price-fill { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: #232030; border-radius: 999px; pointer-events: none; } .cat-filters-drawer__price-thumb { position: absolute; top: 50%; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; padding: 0; border: 1.5px solid #232030; border-radius: 999px; background: #f8f1eb; box-shadow: 0 1px 4px rgba(35, 32, 48, 0.2); cursor: grab; touch-action: none; transition: box-shadow 0.16s ease, transform 0.16s ease; } .cat-filters-drawer__price-thumb:hover { box-shadow: 0 2px 6px rgba(35, 32, 48, 0.28); } .cat-filters-drawer__price-thumb.is-dragging, .cat-filters-drawer__price-thumb:active { cursor: grabbing; transform: scale(1.08); box-shadow: 0 3px 8px rgba(35, 32, 48, 0.32); } .cat-filters-drawer__price-thumb--max { z-index: 1; } .cat-filters-drawer__price-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; width: calc(100% + (var(--cat-price-visual-x) * 2)); margin-inline: calc(var(--cat-price-visual-x) * -1); box-sizing: border-box; } .cat-filters-drawer__price-input-card { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 9px; border: 1.5px solid var(--popup-control-border); border-radius: 14px; background: #f8f1eb; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); outline: 2px solid transparent; outline-offset: 0; cursor: text; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, outline-color 0.2s ease; } .cat-filters-drawer__price-input-card:focus-within { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } .cat-filters-drawer__price-input-card:has(.cat-filters-drawer__price-field:not(:placeholder-shown)) { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 10%, transparent); } .cat-filters-drawer__price-input-card:focus-within:has(.cat-filters-drawer__price-field) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } .cat-filters-drawer__price-input-label { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; } .cat-filters-drawer__price-input-row { display: flex; align-items: baseline; gap: 4px; color: #232030; font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.2; } .cat-filters-drawer__price-input-prefix, .cat-filters-drawer__price-input-suffix { flex: 0 0 auto; color: #232030; } .cat-filters-drawer__price-input-prefix { font-size: 12px; line-height: 1; } .cat-filters-drawer__price-input-card:focus-within .cat-filters-drawer__price-input-prefix { display: none; } .cat-filters-drawer__price-field { flex: 0 1 4.5ch; min-width: 0; width: 4.5ch; padding: 0; border: 0; background: transparent; color: #232030; font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.2; outline: none; } .cat-filters-drawer__price-field::placeholder { color: var(--color-ink-soft); font-weight: 500; } .cat-filters-drawer__price-field:focus, .cat-filters-drawer__price-field:focus-visible { outline: none; } .cat-filters-drawer__price-input-separator { display: none; } .cat-filters-drawer__more { width: 451px; max-width: calc(100% - 10px); min-height: 44px; margin: 10px 5px 0; padding: 8px 15px; border: 0; border-radius: 30px; background: #dcddd4; overflow: hidden; color: #232030; font-family: var(--font-heading); font-size: 13px; font-weight: 500; line-height: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start; box-sizing: border-box; cursor: pointer; } .cat-filters-drawer__footer { padding: 15px 20px 15px 30px; border-top: 1px solid #eee5da; background: #f8f1eb; } .cat-filters-drawer.is-category-browser-open .cat-filters-drawer__footer { border-top-color: #eee5da; } .cat-filters-drawer__footer-actions { display: flex; align-items: center; justify-content: space-between; gap: 23px; width: 100%; } .cat-filters-drawer__action { width: 100%; max-width: 219px; min-height: 56px; padding: 6px 27px; border-radius: 999px; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 1 1 0; } .cat-filters-drawer__action--ghost { border: 0; background: #f8f1eb; color: #232030; box-shadow: none; } .cat-filters-drawer__action--primary { border: 0; background: #232030; color: #f8f1eb; } .cat-filters-drawer__action-label { min-width: 0; } .cat-filters-drawer__action-icon { width: 22px; height: 14px; display: block; object-fit: contain; flex: 0 0 auto; transition: transform 0.22s ease; } .cat-filters-drawer__action-icon--back { order: -1; } .cat-filters-drawer__action--ghost:hover, .cat-filters-drawer__action--ghost:focus-visible { background: #f8f1eb; box-shadow: var(--shadow-card-hover); } .cat-filters-drawer__action--primary:hover, .cat-filters-drawer__action--primary:focus-visible { background: #343244; } .cat-filters-drawer__action--primary:hover .cat-filters-drawer__action-icon, .cat-filters-drawer__action--primary:focus-visible .cat-filters-drawer__action-icon { transform: translateX(4px); } .cat-filters-drawer__category-button:focus-visible, .cat-filters-drawer__section-toggle:focus-visible, .cat-filters-drawer__option:focus-visible, .cat-filters-drawer__more:focus-visible, .cat-filters-drawer__price-apply:focus-visible, .cat-filters-drawer__action:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.24); outline-offset: 2px; } @media (max-width: 767px) { .cat-filters-drawer { --cat-filters-drawer-mobile-top: clamp(84px, 13dvh, 128px); --cat-filters-drawer-mobile-offset-top: calc(env(safe-area-inset-top, 0px) + var(--cat-filters-drawer-mobile-top)); --cat-filters-drawer-panel-slide-duration: 240ms; overflow: hidden; } .cat-filters-drawer__backdrop { display: block; background: rgba(35, 32, 48, 0.42); transition: opacity 0.22s ease; } .cat-filters-drawer__panel { top: var(--cat-filters-drawer-mobile-offset-top); left: 0; right: 0; bottom: auto; width: 100%; max-width: none; height: calc(100vh - var(--cat-filters-drawer-mobile-offset-top)); height: calc(100dvh - var(--cat-filters-drawer-mobile-offset-top)); max-height: calc(100dvh - var(--cat-filters-drawer-mobile-offset-top)); min-height: 0; border-radius: 22px 22px 0 0; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); transform: translateY(100%); transition: transform var(--cat-filters-drawer-panel-slide-duration) cubic-bezier(0.22, 1, 0.36, 1); } .cat-filters-drawer.is-open .cat-filters-drawer__panel { transform: translateY(0); } .cat-filters-drawer.is-sheet-dragging .cat-filters-drawer__panel { transform: translateY(var(--cat-filters-sheet-drag-y, 0px)); transition: none; will-change: transform; } .cat-filters-drawer.is-sheet-settling .cat-filters-drawer__panel { transform: translateY(var(--cat-filters-sheet-drag-y, 0px)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .cat-filters-drawer.is-sheet-closing .cat-filters-drawer__panel { transform: translateY(var(--cat-filters-sheet-drag-y, 0px)); transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .cat-filters-drawer__sheet-grip { display: flex; flex: 0 0 var(--popup-sheet-grip-height, 44px); min-height: var(--popup-sheet-grip-height, 44px); align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; background: var(--popup-bg); } .cat-filters-drawer__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .cat-filters-drawer.is-sheet-dragging .cat-filters-drawer__sheet-grip { cursor: grabbing; } .cat-filters-drawer__header { padding-left: 16px; padding-right: 16px; padding-top: 4px; padding-bottom: 13px; min-height: 49px; cursor: grab; touch-action: none; user-select: none; } .cat-filters-drawer.is-sheet-dragging .cat-filters-drawer__header { cursor: grabbing; } .cat-filters-drawer__body { flex: 1 1 auto; min-height: 0; padding-left: 16px; padding-right: 16px; padding-bottom: 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cat-filters-drawer__body::-webkit-scrollbar { width: 0; height: 0; } .cat-filters-drawer__footer { flex: 0 0 auto; padding: 15px 16px; padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)); background: var(--popup-bg); box-shadow: 0 -10px 22px color-mix(in srgb, var(--color-ink) 8%, transparent); } .cat-filters-drawer__footer-actions { gap: 12px; } .cat-filters-drawer__price-visual { --cat-price-visual-x: 4px; padding: 12px var(--cat-price-visual-x) 4px; } .cat-filters-drawer__price-bars { inset: 0 0 22px 0; } .cat-filters-drawer__price-axis { gap: 6px; padding: 0 2px; font-size: 10px; } .cat-filters-drawer__price-inputs { gap: 8px; } .cat-filters-drawer__price-input-card { min-height: 70px; padding: 6px 12px 8px; } .cat-filters-drawer__price-input-row, .cat-filters-drawer__price-field { font-size: 15px; } .cat-filters-drawer__section-head { min-height: 44px; } .cat-filters-drawer__section-toggle { height: 44px; } .cat-filters-drawer__price-slider { height: 44px; } .cat-filters-drawer__price-thumb { width: 44px; height: 44px; margin-left: -22px; margin-top: -22px; border: 0; background: transparent; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; } .cat-filters-drawer__price-thumb::before { content: ""; width: 22px; height: 22px; border: 1.5px solid #232030; border-radius: 999px; background: #f8f1eb; box-shadow: 0 1px 4px rgba(35, 32, 48, 0.2); transition: box-shadow 0.16s ease, transform 0.16s ease; } .cat-filters-drawer__price-thumb:hover, .cat-filters-drawer__price-thumb.is-dragging, .cat-filters-drawer__price-thumb:active { box-shadow: none; transform: none; } .cat-filters-drawer__price-thumb:hover::before { box-shadow: 0 2px 6px rgba(35, 32, 48, 0.28); } .cat-filters-drawer__price-thumb.is-dragging::before, .cat-filters-drawer__price-thumb:active::before { transform: scale(1.08); box-shadow: 0 3px 8px rgba(35, 32, 48, 0.32); } .cat-filters-drawer__price-input-row { align-items: center; min-height: 44px; } .cat-filters-drawer__price-field { min-height: 44px; height: 44px; } .cat-filters-drawer__action { min-height: 52px; max-width: none; } } .cat-filters-drawer__custom-field-row { display: flex; align-items: center; gap: 8px; padding: 8px 13px 0; } .cat-filters-drawer__field { min-height: 44px; padding: 9px 12px; border-radius: 999px; border: 1.5px solid var(--popup-control-border); background: #f8f1eb; color: #232030; caret-color: var(--color-ink); font-family: var(--font-heading); font-size: 13px; font-weight: 500; line-height: 1; width: 100%; max-width: 283px; outline: 2px solid transparent; outline-offset: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, outline-color 0.2s ease; appearance: none; -webkit-appearance: none; } .cat-filters-drawer__field::placeholder { color: var(--color-ink-soft); } .cat-filters-drawer__field:focus, .cat-filters-drawer__field:focus-visible { border-color: var(--popup-focus); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } .cat-filters-drawer__field:not(:placeholder-shown) { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 10%, transparent); } .cat-filters-drawer__field:not(:placeholder-shown):focus, .cat-filters-drawer__field:not(:placeholder-shown):focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } @media (max-width: 760px) { .cat-filters__chip-popover, .cat-filters__sort-popover { display: flex; flex-direction: column; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: calc(100vh - (env(safe-area-inset-top, 0px) + clamp(84px, 13dvh, 128px))); height: calc(100dvh - (env(safe-area-inset-top, 0px) + clamp(84px, 13dvh, 128px))); max-height: none; border-radius: 22px 22px 0 0; padding: 44px 20px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 28px rgba(35, 32, 48, 0.18); z-index: 14000; transform: translateY(var(--category-popover-sheet-drag-y, 0px)) !important; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .cat-filters__chip-popover.is-sheet-dragging, .cat-filters__sort-popover.is-sheet-dragging { transition: none; will-change: transform; } .cat-filters__chip-popover.is-sheet-settling, .cat-filters__sort-popover.is-sheet-settling, .cat-filters__chip-popover.is-sheet-closing, .cat-filters__sort-popover.is-sheet-closing { will-change: transform; } body.page[data-category-page-live="1"].is-category-quick-popover-open .cat-filters, body.page[data-category-page-live="1"].is-category-sort-popover-open .cat-filters { z-index: 14000; } body.page[data-category-page-live="1"].is-category-sort-popover-open .cat-filters__right { inset: 0; width: 100vw; height: 100dvh; pointer-events: auto; } body.page[data-category-page-live="1"].is-category-sort-popover-open .cat-filters__sort { opacity: 0; pointer-events: none; } body.page[data-category-page-live="1"].is-category-sort-popover-open .cat-filters__sort-popover { pointer-events: auto; } body.page[data-category-page-live="1"] .cat-filters__chip-popover::before, body.page[data-category-page-live="1"] .cat-filters__sort-popover::before { content: ""; position: absolute; left: 50%; top: calc((var(--popup-sheet-grip-height, 44px) - var(--popup-sheet-grip-thickness, 5px)) / 2); width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); min-height: 0; border-radius: var(--radius-pill, 999px); background: var(--popup-sheet-grip-color); transform: translateX(-50%); cursor: grab; touch-action: none; user-select: none; } .cat-filters__sort.is-active, .cat-filters__sort[aria-expanded="true"] { z-index: 1; } .cat-filters__chip-popover-options, .cat-filters__sort-popover .cat-filters__chip-popover-options { gap: 4px; } .cat-filters__chip-popover-option { min-height: 48px; font-size: 15px; } .cat-filters__applied-backdrop, .cat-filters__sort-backdrop { background: transparent; z-index: 13990; } } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 10px; padding: 10px 13px 4px; } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option { flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 4px 8px; min-height: 96px; border: 1.5px solid transparent; border-radius: 14px; background: transparent; text-align: center; box-shadow: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease; } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option .cat-filters-drawer__control { display: none; } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__swatch { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 999px; border: 1px solid rgba(35, 32, 48, 0.22); margin-bottom: 2px; } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option-label { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: #232030; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; } .cat-filters-drawer__option-sublabel { display: block; font-size: 10px; font-weight: 500; color: var(--color-ink-soft); line-height: 1.1; letter-spacing: 0.02em; } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option:hover { border-color: transparent; box-shadow: var(--cat-filter-option-shadow); } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option.is-selected { border-color: transparent; background: transparent; } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-label { color: var(--color-ink); } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-sublabel { color: var(--color-ink-soft); } .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__swatch { border-color: var(--cat-filter-option-selected); outline: 2px solid var(--cat-filter-option-selected); outline-offset: 1px; } @media (max-width: 460px) { .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__options { grid-template-columns: repeat(3, 1fr); } } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 8px; padding: 10px 13px 4px; } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__option { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; padding: 12px 14px 10px; min-height: 0; border: 1.5px solid transparent; border-radius: 12px; background: transparent; text-align: left; box-shadow: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease; } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__option .cat-filters-drawer__control { display: none; } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__swatch { width: 100%; height: 24px; border-radius: 6px; border: 1px solid rgba(35, 32, 48, 0.16); flex: 0 0 24px; margin-bottom: 2px; } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__option-label { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: #232030; line-height: 1; } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__option-sublabel { font-size: 10.5px; color: var(--color-ink-soft); line-height: 1.1; text-transform: none; letter-spacing: 0; } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__option:hover { border-color: transparent; box-shadow: var(--cat-filter-option-shadow); } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__option.is-selected { border-color: transparent; background: transparent; } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-label { color: var(--color-ink); } .cat-filters-drawer__section[data-filter-drawer-section="color-story"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-sublabel { color: var(--color-ink-soft); } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; padding: 14px 13px 4px; } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option { flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 6px 2px; min-height: 0; border: 0; background: transparent; text-align: center; } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option .cat-filters-drawer__control { display: none; } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__swatch { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 999px; border: 0; box-shadow: 0 2px 8px rgba(35, 32, 48, 0.18), inset 0 -3px 6px rgba(0, 0, 0, 0.10), inset 0 3px 6px rgba(255, 249, 241, 0.45); transition: transform 0.18s ease, box-shadow 0.18s ease; } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option:hover .cat-filters-drawer__swatch { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(35, 32, 48, 0.22), inset 0 -3px 6px rgba(0, 0, 0, 0.10), inset 0 3px 6px rgba(255, 249, 241, 0.45); } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__swatch { outline: 2.5px solid var(--cat-filter-option-selected); outline-offset: 3px; } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-label, .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option.is-selected .cat-filters-drawer__option-sublabel { color: var(--color-ink); } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option-label { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: #232030; line-height: 1.1; letter-spacing: 0.02em; } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option-sublabel { font-size: 10px; color: var(--color-ink-soft); line-height: 1.1; text-transform: none; letter-spacing: 0; } @media (max-width: 460px) { .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__options { grid-template-columns: repeat(3, 1fr); } .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__swatch { width: 54px; height: 54px; flex-basis: 54px; } } .cat-filters-drawer__ring-sizer { display: flex; flex-direction: column; gap: 14px; padding: 10px 14px 14px; } .cat-filters-drawer__ring-sizer-hint { margin: 0; font-size: 12px; color: var(--color-ink-soft); line-height: 1.35; text-align: center; } .cat-filters-drawer__ring-sizer-stage { display: flex; align-items: center; justify-content: center; min-height: 182px; padding: 4px 0 0; } .cat-filters-drawer__ring-sizer-jewel { --ring-sizer-dia: 96px; position: relative; width: calc(var(--ring-sizer-dia) + 88px); height: calc(var(--ring-sizer-dia) + 100px); min-width: 174px; min-height: 190px; color: color-mix(in srgb, var(--color-olive-pill) 42%, var(--color-warn)); display: grid; place-items: center; filter: drop-shadow(0 15px 18px color-mix(in srgb, var(--color-ink) 13%, transparent)); } .cat-filters-drawer__ring-sizer-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; z-index: 1; } .cat-filters-drawer__ring-sizer-measure { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } .cat-filters-drawer__ring-sizer-circle { fill: color-mix(in srgb, var(--color-cream) 42%, transparent); stroke: color-mix(in srgb, var(--color-ink) 82%, transparent); stroke-width: 2.4; stroke-dasharray: 4 5; stroke-linecap: round; transition: r 0.18s ease; } .cat-filters-drawer__ring-sizer-size-chip { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); border-radius: 999px; padding: 5px 12px; background: color-mix(in srgb, var(--color-sand) 78%, transparent); color: var(--color-ink); font-family: var(--font-heading); font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 8%, transparent); z-index: 3; } .cat-filters-drawer__ring-sizer-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-olive-pill) 64%, var(--color-sand)), color-mix(in srgb, var(--color-forest) 55%, var(--color-sand))); border-radius: 999px; outline: none; margin: 4px 0; } .cat-filters-drawer__ring-sizer-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 999px; background: var(--color-cream); border: 3px solid color-mix(in srgb, var(--color-olive-pill) 66%, var(--color-ink)); cursor: grab; box-shadow: 0 2px 9px color-mix(in srgb, var(--color-ink) 20%, transparent); } .cat-filters-drawer__ring-sizer-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 999px; background: var(--color-cream); border: 3px solid color-mix(in srgb, var(--color-olive-pill) 66%, var(--color-ink)); cursor: grab; } .cat-filters-drawer__ring-sizer-readout { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--color-sand) 78%, transparent); border: 1px solid color-mix(in srgb, var(--color-ink) 9%, transparent); } .cat-filters-drawer__ring-sizer-readout-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .cat-filters-drawer__ring-sizer-readout-label { font-size: 12.5px; color: var(--color-ink-soft); } .cat-filters-drawer__ring-sizer-readout-value { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--color-ink); } .cat-filters-drawer__ring-sizer-readout-row:first-child .cat-filters-drawer__ring-sizer-readout-value { font-size: 19px; } .cat-filters-drawer__ring-sizer-apply { border: 0; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); padding: 12px 18px; font-family: var(--font-heading); font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background 0.16s ease, transform 0.16s ease; margin-top: 4px; } .cat-filters-drawer__ring-sizer-apply:hover { background: var(--intent-cta-ink-hover); transform: translateY(-1px); } .cat-filters-drawer__section.is-quick-filter-target { animation: cat-filter-target-pulse 0.9s ease; } @keyframes cat-filter-target-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-forest) 0%, transparent); } 38% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-forest) 13%, transparent); } } @media (max-width: 520px) { .cat-filters-drawer__ring-sizer { gap: 12px; padding-inline: 10px; } .cat-filters-drawer__ring-sizer-stage { min-height: 176px; } .cat-filters-drawer__ring-sizer-jewel { width: calc(var(--ring-sizer-dia) + 72px); height: calc(var(--ring-sizer-dia) + 86px); min-width: 164px; min-height: 176px; } } .cat-filters-drawer .cat-filters-drawer__section .cat-filters-drawer__option:hover, .cat-filters-drawer .cat-filters-drawer__section .cat-filters-drawer__option:focus-visible { background: #DCDDD4; box-shadow: none; } .cat-filters-drawer .cat-filters-drawer__section .cat-filters-drawer__option.is-selected:hover, .cat-filters-drawer .cat-filters-drawer__section .cat-filters-drawer__option.is-selected:focus-visible { border-color: transparent; background: #DCDDD4; box-shadow: none; } @media (hover: none) { .cat-filters-drawer .cat-filters-drawer__section .cat-filters-drawer__option:hover { background: transparent; box-shadow: none; } .cat-filters-drawer .cat-filters-drawer__section .cat-filters-drawer__option.is-selected:hover { border-color: transparent; background: transparent; box-shadow: none; } } @media (max-width: 720px) { .cat-filters-drawer__title { font-size: var(--popup-title-size, 25px) !important; line-height: var(--popup-title-line-height, 1.16) !important; } } /* [bundle] /styles/components/media-slots.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .media-slot { position: relative; border-radius: inherit; overflow: hidden; background: var(--color-sand); display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--color-forest); isolation: isolate; } .media-slot--hero { min-height: 320px; background: var(--gradient-hero-media, linear-gradient(135deg, rgba(63,106,96,0.2), rgba(255, 249, 241,0.4))); } .media-slot--listing { min-height: 0; background: var(--gradient-card-media, linear-gradient(135deg, #fff9f1, #f2e6d7)); } .media-slot--category { min-height: 0; background: var(--gradient-category-media, linear-gradient(135deg, #f8f5ed, #f0e7d4)); border: 1px solid rgba(63, 106, 96, 0.18); } .media-slot--banner { min-height: 220px; background: linear-gradient(135deg, rgba(255, 249, 241,0.4), rgba(63,106,96,0.25)); border: 1px dashed rgba(63,106,96,0.3); } .media-slot__fallback { text-align: center; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-heading); font-size: var(--font-size-body); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; } .media-slot__tag { font-size: var(--font-size-caption); letter-spacing: 0.18em; color: rgba(0, 0, 0, 0.65); } .media-slot__label { font-size: var(--font-size-body); } .media-slot[data-media-state='ready'] .media-slot__fallback { opacity: 0; pointer-events: none; } .media-slot__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: -1; } .media-slot[data-media-state='ready'] .media-slot__image { display: block; z-index: 0; } [data-homepage-media-slot] { overflow: hidden; } [data-homepage-media-slot] > .homepage-live-content__image { display: block; width: 100%; height: 100%; object-fit: cover; } /* [bundle] /styles/components/header.css */ /* [bundle] /styles.css */ :root { --scale: 1; --canvas-h: 5947px; --stage-h: 5947px; --fullbleed-left: 0px; --fullbleed-width: 1440px; --header-scrollbar-compensation: 0px; --header-layer-backdrop: 0; --header-layer-legacy-art: 1; --header-layer-line: 2; --header-layer-chrome: 4; --header-layer-hitboxes: 5; --header-layer-search-text: 6; --header-layer-floating: 12; --jp-spinner-color: #3F6A60; --jp-spinner-track: rgba(35, 32, 48, 0.1); --jp-spinner-size: 38px; --jp-spinner-stroke: 5px; --font-price: var(--font-display, Georgia, "Times New Roman", serif); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; } html { scrollbar-gutter: stable; scrollbar-width: none; } html::-webkit-scrollbar { width: 0; height: 0; } body { min-height: 100vh; background: #f8fffc; overflow-x: hidden; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .design-stage { width: 100%; height: var(--stage-h); position: relative; overflow: visible; } html:not(.ui-ready) .design-stage { opacity: 0; pointer-events: none; } html.ui-ready .design-stage { opacity: 1; transition: opacity 0.2s ease; } .design-canvas { width: 1440px; height: var(--canvas-h); transform: translateX(-50%) scale(var(--scale)); transform-origin: top center; position: absolute; left: 50%; top: 0; will-change: transform; background: #f8fffc; } :where( .price, [class*="__price"], [class*="-price"], [class*="Price"], [data-product-price-text], [data-cart-subtotal], [data-cart-shipping], [data-cart-discount], [data-cart-total], [data-track-total], .header-cart-card-price, .header-cart-card-price-old ) { font-family: var(--font-price) !important; font-variant-numeric: tabular-nums; letter-spacing: 0; } .design-canvas, .design-canvas * { -webkit-user-select: none; user-select: none; } .design-canvas input, .design-canvas textarea, .design-canvas [contenteditable="true"] { -webkit-user-select: text; user-select: text; } .design-canvas [data-layer="Header"] { position: relative; overflow: visible; } .design-canvas [data-layer="Header"]::after { content: ""; position: absolute; left: calc((1440px - (100vw / var(--scale))) / 2); width: calc(100vw / var(--scale)); transform: none; bottom: 0; height: 2px; background: #EFE7D5; pointer-events: none; z-index: 2; } .fixed-header::before { content: ""; position: absolute; top: 0; left: 0; right: calc(-1 * var(--header-scrollbar-compensation, 0px)); width: auto; height: 100%; transform: none; background: #FFF9F1; pointer-events: none; z-index: var(--header-layer-backdrop); } .fixed-header { position: fixed !important; left: 0 !important; right: var(--header-scrollbar-compensation) !important; top: 0 !important; width: auto !important; min-width: 0 !important; height: calc(123px * var(--scale)) !important; background: #FFF9F1; box-shadow: none; transition: box-shadow 200ms ease; transform: none !important; overflow: visible; isolation: isolate; margin: 0 !important; padding: 0 !important; box-sizing: border-box; z-index: 5000; } body.is-page-scrolled .fixed-header { box-shadow: 0 1px 2px rgba(35, 32, 48, 0.04), 0 6px 16px rgba(35, 32, 48, 0.07); } body.is-header-position-locked.is-page-scrolled .fixed-header, body.page--gift-room.is-gift-room-header-locked.is-page-scrolled .fixed-header, body.page--gift-room.is-gift-room-room-view.is-page-scrolled .fixed-header { box-shadow: none !important; transition: none !important; } body.is-header-position-locked .fixed-header::after, body.page--gift-room.is-gift-room-header-locked .fixed-header::after, body.page--gift-room.is-gift-room-room-view .fixed-header::after { opacity: 0 !important; } .fixed-header::after { content: ""; position: absolute; left: 0; right: calc(-1 * var(--header-scrollbar-compensation, 0px)); width: auto; transform: none; bottom: 0; height: 1px; background: #d9d5d0; pointer-events: none; z-index: var(--header-layer-line); } .fixed-header > svg { position: absolute; top: 0; left: 50%; width: 1440px; height: 123px; transform: translateX(-50%) scale(var(--scale)); transform-origin: top center; display: block; pointer-events: auto; z-index: var(--header-layer-legacy-art); clip-path: inset(0 0 2px 0); } .fixed-header .header-desktop-shell, .fixed-header .header-tablet-768, .fixed-header .header-mobile-414 { z-index: var(--header-layer-chrome); isolation: isolate; } .fixed-header > svg > rect:first-of-type, .fixed-header > svg > rect:nth-of-type(2) { fill: #FFF9F1 !important; } .fixed-header .header-hitboxes { position: absolute; top: 0; left: 50%; width: 1440px; height: 123px; transform: translateX(-50%) scale(var(--scale)); transform-origin: top center; pointer-events: none; z-index: var(--header-layer-hitboxes); } .fixed-header .header-floating-layer { position: fixed; inset: 0; pointer-events: none; z-index: var(--header-layer-floating); } .fixed-header .header-hitbox { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; pointer-events: auto; cursor: pointer; } .fixed-header .header-hitbox:focus-visible { outline: 2px solid #D6CFB8; outline-offset: 2px; } .fixed-header .header-hover-tip { position: absolute; left: 0; top: 0; transform: translate(-50%, 0) translateY(-4px) scale(0.985); transform-origin: center top; opacity: 0; pointer-events: none; background: #274537; border: 1px solid #274537; border-radius: 11px; box-shadow: 0 8px 18px rgba(35, 32, 48, 0.2); color: var(--color-cream); font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: pre-line; text-align: center; padding: 9px 12px 10px; z-index: 14; will-change: transform, opacity, left, top; backface-visibility: hidden; transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.18, 0.82, 0.24, 1), left 0.2s cubic-bezier(0.18, 0.82, 0.24, 1), top 0.2s cubic-bezier(0.18, 0.82, 0.24, 1); } .fixed-header .header-hover-tip::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: #274537; border-top: 1px solid #274537; border-left: 1px solid #274537; } .fixed-header .header-hover-tip.is-visible { opacity: 1; transform: translate(-50%, 0) translateY(0) scale(1); } .fixed-header { --header-primary-hover-fill: #cfe3db; --header-primary-hover-bounce-duration: 0.44s; --header-primary-hover-bounce-easing: cubic-bezier(0.22, 1, 0.28, 1); } .fixed-header .header-soft-target, .fixed-header .header-pop-target, .fixed-header .header-sign-target, .fixed-header .header-search-target, .fixed-header .header-wishlist-target, .fixed-header .header-mic-bubble { transform-box: fill-box; transform-origin: center; } .fixed-header .header-soft-target { fill: #f6f8fb !important; transition: fill 0.24s ease; } .fixed-header .header-soft-target.is-hover { fill: #EFE7D5 !important; } @keyframes header-pop-bounce { 0% { transform: scale(0.9); } 32% { transform: scale(1.068); } 58% { transform: scale(0.986); } 78% { transform: scale(1.018); } 100% { transform: scale(1); } } .fixed-header .header-pop-target { fill: transparent !important; transition: fill 0.32s ease; } .fixed-header .header-pop-target.is-hover { fill: var(--header-primary-hover-fill) !important; } .fixed-header .header-sign-target { fill: transparent !important; transition: fill 0.32s ease; } .fixed-header .header-sign-target.is-hover { fill: var(--header-primary-hover-fill) !important; } .fixed-header .header-search-target { transition: fill 0.2s ease; } .fixed-header .header-search-target.is-hover { fill: #355f55 !important; } .fixed-header .header-wishlist-target { fill: #232030 !important; stroke: transparent; stroke-width: 1.5; transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease; } .fixed-header .header-wishlist-target.is-hover { fill: #FFF9F1 !important; stroke: #232030 !important; filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.1)); } .fixed-header .header-wishlist-text { fill: #FFF9F1 !important; transition: fill 0.3s ease; } .fixed-header .header-wishlist-text.is-hover { fill: #232030 !important; } .fixed-header .header-hitbox.is-account-chip, .fixed-header .header-hitbox.is-bell-chip { display: inline-flex; align-items: center; justify-content: center; position: absolute; border-radius: 999px; background: transparent; box-shadow: none; transition: background-color 0.3s ease, filter 0.3s ease; isolation: isolate; overflow: visible; } .fixed-header .header-hitbox.is-account-chip { padding: 0; } .fixed-header .header-hitbox.is-bell-chip { padding: 0; } .fixed-header .header-account-chip-inner, .fixed-header .header-bell-chip-inner { position: relative; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; } .fixed-header .header-hitbox.is-account-chip::before, .fixed-header .header-hitbox.is-bell-chip::before { content: ""; position: absolute; inset: 0; border-radius: 999px; z-index: 0; transition: background-color 0.3s ease; } .fixed-header .header-hitbox.is-account-chip::before { background: transparent; } .fixed-header .header-hitbox.is-bell-chip::before { background: transparent; } .fixed-header .header-bell-chip-icon-wrap { position: absolute; left: 12px; top: 13px; width: 22px; height: 26px; } .fixed-header .header-hitbox.is-account-chip.is-hover, .fixed-header .header-hitbox.is-account-chip:focus-visible, .fixed-header .header-hitbox.is-bell-chip.is-hover, .fixed-header .header-hitbox.is-bell-chip:focus-visible, .fixed-header .header-hitbox.is-account-chip[aria-expanded="true"], .fixed-header .header-hitbox.is-bell-chip[aria-expanded="true"] { filter: none; } .fixed-header .header-hitbox.is-account-chip.is-hover::before, .fixed-header .header-hitbox.is-account-chip:focus-visible::before, .fixed-header .header-hitbox.is-bell-chip.is-hover::before, .fixed-header .header-hitbox.is-bell-chip:focus-visible::before, .fixed-header .header-hitbox.is-account-chip[aria-expanded="true"]::before, .fixed-header .header-hitbox.is-bell-chip[aria-expanded="true"]::before { background: #dcddd4; } .fixed-header .header-hitbox.is-account-chip.is-hover::before, .fixed-header .header-hitbox.is-account-chip:focus-visible::before, .fixed-header .header-hitbox.is-bell-chip.is-hover::before, .fixed-header .header-hitbox.is-bell-chip:focus-visible::before { animation: header-pop-bounce-soft 0.44s cubic-bezier(0.22, 1, 0.28, 1) both; } .fixed-header .header-hitbox.is-account-chip:active, .fixed-header .header-hitbox.is-bell-chip:active { transform: none; } .fixed-header .header-hitbox.is-account-chip:focus-visible, .fixed-header .header-hitbox.is-bell-chip:focus-visible { outline: 2px solid #D6CFB8; outline-offset: 2px; } .fixed-header.is-authenticated .header-sign-static { opacity: 0 !important; pointer-events: none !important; } .fixed-header.is-authenticated .header-sign-target { opacity: 0 !important; pointer-events: none !important; } .fixed-header.is-authenticated .header-bell-icon, .fixed-header.is-authenticated .header-bell-icon-secondary, .fixed-header.is-authenticated .header-bell-compact-extra, .fixed-header.is-authenticated .header-bell-static-badge { opacity: 0 !important; pointer-events: none !important; } .fixed-header .header-bell-static-badge { opacity: 0 !important; pointer-events: none !important; } .fixed-header .header-account-avatar { position: absolute; left: 5px; top: 5px; width: 42px; height: 42px; border-radius: 999px; background: linear-gradient(180deg, #FFF9F15ee 0%, #f4d8c9 100%); box-shadow: inset 0 0 0 3px #232030; color: #5a3f35; font-family: var(--font-body); font-size: 21px; font-weight: 800; line-height: 42px; text-align: center; flex: 0 0 auto; } .fixed-header .header-account-avatar.has-image { background-color: #FFF9F1; background-position: center; background-repeat: no-repeat; background-size: cover; color: transparent; text-indent: -9999px; overflow: hidden; } .fixed-header .header-account-chevron { position: absolute; left: 57px; top: 21px; width: 16px; height: 10px; min-width: 16px; min-height: 10px; max-width: 16px; max-height: 10px; display: block; object-fit: contain; object-position: center; } .fixed-header .header-account-chevron path { fill: #232030; stroke: none; } .fixed-header .header-bell-chip-icon { position: absolute; left: 0; top: 0; width: 28px; height: 32px; min-width: 28px; min-height: 32px; max-width: 28px; max-height: 32px; flex: 0 0 28px; display: block; object-fit: contain; object-position: center; } .fixed-header .header-bell-chip-icon path { stroke: #232030; stroke-width: 2.16667; stroke-linecap: round; stroke-linejoin: round; } .fixed-header .header-bell-chip-badge { position: absolute; left: 28px; top: 4px; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-alert-red); color: var(--color-cream); font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; } .fixed-header .header-tablet-bell-badge[hidden], .fixed-header .header-bell-chip-badge[hidden], .fixed-header .header-bell-guest-badge[hidden] { display: none !important; } .fixed-header .header-bell-guest-badge { position: absolute; left: 28px; top: 4px; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-alert-red); color: var(--color-cream); font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; } .fixed-header .header-hitbox.is-bell-chip .header-account-chevron { left: 45px; top: 21px; width: 16px; height: 10px; } .fixed-header .header-account-panel { position: absolute; left: 0; top: 0; width: 276px; background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 13px; box-shadow: 0 10px 20px rgba(35, 32, 48, 0.12); z-index: 4; overflow: visible; } .fixed-header .header-account-panel::before { display: none; } .fixed-header .header-account-panel.is-open { animation: header-panel-fade-in 0.22s ease both; } .fixed-header .header-account-panel-inner { position: relative; z-index: 1; border-radius: 13px; overflow: hidden; background: var(--popup-bg); } .fixed-header .header-account-sheet-grip { display: none; } .fixed-header .header-account-profile { width: 100%; border: 0; background: var(--popup-bg); margin: 0; padding: 11px 12px; display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; border-bottom: 1px solid var(--popup-border-strong); transition: background-color 0.22s ease; } .fixed-header .header-account-profile:hover, .fixed-header .header-account-profile:focus-visible { background: var(--popup-hover); } .fixed-header .header-account-profile:focus-visible, .fixed-header .header-account-item:focus-visible { outline: 2px solid #D6CFB8; outline-offset: -2px; } .fixed-header .header-account-profile .header-account-avatar { position: relative !important; left: auto !important; top: auto !important; display: block; flex: 0 0 42px; margin-right: 2px; width: 42px; height: 42px; line-height: 42px; font-size: 14px; box-shadow: inset 0 0 0 1.5px #232030, 0 3px 8px rgba(35, 32, 48, 0.12); } .fixed-header .header-account-profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .fixed-header .header-account-profile-name { color: #232030; font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fixed-header .header-account-profile-link { color: #232030; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 15px; } .fixed-header .header-account-section { padding: 0; border-top: 1px solid var(--popup-border-strong); } .fixed-header .header-account-section:first-of-type { border-top: 0; } .fixed-header .header-account-item { width: 100%; min-height: 40px; border: 0; background: transparent; margin: 0; padding: 0 12px; display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; transition: background-color 0.22s ease; } .fixed-header .header-account-item:hover, .fixed-header .header-account-item:focus-visible { background: var(--popup-hover); } .fixed-header .header-account-item-icon { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .fixed-header .header-account-item-icon svg { width: 18px; height: 18px; display: block; } .fixed-header .header-account-item-icon img { width: 18px; height: 18px; display: block; object-fit: contain; } .fixed-header .header-account-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fixed-header .header-account-item-text { color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 17px; } .fixed-header .header-account-item-note { color: var(--color-ink); font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 15px; } .fixed-header .header-account-item.is-logout .header-account-item-text { font-weight: 600; } .fixed-header .header-notifications-panel { --popup-title-font: var(--font-body); --popup-title-size: 16px; --popup-title-weight: 700; --popup-title-line-height: 20px; --popup-title-letter-spacing: 0; position: absolute; left: 0; top: 0; width: 306px; background: var(--popup-bg); border: 0; border-radius: 15px; box-shadow: var(--popup-shadow-soft); z-index: 4; overflow: hidden; } @keyframes header-notifications-fade-in { from { opacity: 0; } to { opacity: 1; } } .fixed-header .header-notifications-panel.is-open:not(.is-mobile-sheet) { animation: header-notifications-fade-in 0.14s ease both; } .fixed-header .header-notifications-panel-inner { position: relative; z-index: 1; border-radius: 15px; overflow: hidden; background: var(--popup-bg); } .fixed-header .header-notifications-sheet-grip { display: none; } .fixed-header .header-notifications-panel-head { padding: 14px 15px 10px; border-bottom: 1px solid var(--popup-border); text-align: left; } .fixed-header .header-notifications-panel-title { margin: 0; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .fixed-header .header-notifications-panel-body { padding: 9px; background: var(--popup-bg); display: flex; flex-direction: column; gap: 7px; max-height: min(366px, calc(100vh - 180px)); overflow-y: auto; } .fixed-header .header-notifications-list { display: flex; flex-direction: column; gap: 4px; } .fixed-header .header-notifications-card { --header-notification-surface: var(--color-sand-dark); --header-notification-hover-surface: var(--color-sand-dark); --header-notification-icon-surface: var(--color-sand-dark); --header-notification-line: var(--color-sand-dark); position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px 10px 10px; border-radius: 10px; background: transparent; width: 100%; border: 0; box-shadow: none; text-align: left; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease; } .fixed-header .header-notifications-card:hover, .fixed-header .header-notifications-card:focus-visible { background: var(--header-notification-hover-surface); box-shadow: inset 0 0 0 1px var(--header-notification-line); transform: none; } .fixed-header .header-notifications-card.is-type-message { --header-notification-surface: color-mix(in srgb, var(--color-forest) 5%, var(--color-sand-dark)); --header-notification-hover-surface: color-mix(in srgb, var(--color-forest) 7%, var(--color-sand-dark)); --header-notification-icon-surface: color-mix(in srgb, var(--color-forest) 8%, var(--color-sand-dark)); --header-notification-line: color-mix(in srgb, var(--color-forest) 10%, var(--color-sand-dark)); } .fixed-header .header-notifications-card.is-type-deal { --header-notification-surface: color-mix(in srgb, var(--color-warn) 4%, var(--color-sand-dark)); --header-notification-hover-surface: color-mix(in srgb, var(--color-warn) 6%, var(--color-sand-dark)); --header-notification-icon-surface: color-mix(in srgb, var(--color-warn) 7%, var(--color-sand-dark)); --header-notification-line: color-mix(in srgb, var(--color-warn) 10%, var(--color-sand-dark)); } .fixed-header .header-notifications-card.is-type-cart, .fixed-header .header-notifications-card.is-type-plant { --header-notification-surface: color-mix(in srgb, var(--color-forest) 4%, var(--color-sand-dark)); --header-notification-hover-surface: color-mix(in srgb, var(--color-forest) 6%, var(--color-sand-dark)); --header-notification-icon-surface: color-mix(in srgb, var(--color-forest) 7%, var(--color-sand-dark)); --header-notification-line: color-mix(in srgb, var(--color-forest) 9%, var(--color-sand-dark)); } .fixed-header .header-notifications-card:hover .header-notifications-card-title, .fixed-header .header-notifications-card:focus-visible .header-notifications-card-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: currentColor; } .fixed-header .header-notifications-card:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-notifications-card.is-unread { background: var(--header-notification-surface); box-shadow: inset 0 0 0 1px var(--header-notification-line); } .fixed-header .header-notifications-card.is-unread:hover, .fixed-header .header-notifications-card.is-unread:focus-visible { background: var(--header-notification-hover-surface); } .fixed-header .header-notifications-card.is-unread::after { content: none; display: none; } .fixed-header .header-notifications-card-icon { width: 24px; height: 24px; border-radius: 999px; background: var(--header-notification-icon-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--header-notification-line); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .fixed-header .header-notifications-card-icon-img { width: 14px; height: 14px; display: block; object-fit: contain; } .fixed-header .header-notifications-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; } .fixed-header .header-notifications-card-meta { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 9px; font-weight: 700; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .fixed-header .header-notifications-card-title { color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 17px; } .fixed-header .header-notifications-card-text { color: var(--color-ink); font-family: var(--font-body); font-size: 10px; font-weight: 500; line-height: 14px; } .fixed-header .header-notifications-card-timing { color: var(--color-ink); font-family: var(--font-body); font-size: 9px; font-weight: 700; line-height: 12px; letter-spacing: 0.02em; text-transform: uppercase; } .fixed-header .header-notifications-card-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } .fixed-header .header-notifications-card-action { margin-left: auto; color: var(--color-ink); font-family: var(--font-body); font-size: 9px; font-weight: 700; line-height: 12px; } .fixed-header .header-notifications-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 208px; padding: 18px 14px 16px; border-radius: 0; background: transparent; box-shadow: none; text-align: center; } .fixed-header .header-notifications-empty-illustration { width: min(182px, 100%); aspect-ratio: 645 / 524; display: block; object-fit: contain; } .fixed-header .header-notifications-empty-copy { display: flex; flex-direction: column; gap: 5px; max-width: 230px; } .fixed-header .header-notifications-empty-title { margin: 0; color: var(--color-ink); font-family: var(--font-display, var(--font-body)); font-size: 14px; font-weight: 600; line-height: 18px; } .fixed-header .header-notifications-empty-text { margin: 0; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 11px; font-weight: 500; line-height: 16px; } .fixed-header .header-notifications-more { color: #232030; font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; } @keyframes header-wishlist-attention-glow { 0% { stroke: transparent; stroke-width: 1.5; filter: drop-shadow(0 0 0 rgba(35, 32, 48, 0)); transform: scale(1); } 20% { stroke: rgba(63, 106, 96, 0.55); stroke-width: 1.8; filter: drop-shadow(0 2px 8px rgba(63, 106, 96, 0.2)); transform: scale(1.01); } 50% { stroke: rgba(63, 106, 96, 0.95); stroke-width: 2.2; filter: drop-shadow(0 0 14px rgba(63, 106, 96, 0.55)) drop-shadow(0 6px 14px rgba(35, 32, 48, 0.22)); transform: scale(1.02); } 80% { stroke: rgba(63, 106, 96, 0.55); stroke-width: 1.8; filter: drop-shadow(0 2px 8px rgba(63, 106, 96, 0.2)); transform: scale(1.01); } 100% { stroke: transparent; stroke-width: 1.5; filter: drop-shadow(0 0 0 rgba(35, 32, 48, 0)); transform: scale(1); } } @keyframes header-wishlist-attention-text { 0% { opacity: 1; } 50% { opacity: 0.74; } 100% { opacity: 1; } } .fixed-header .header-wishlist-target.is-attention:not(.is-hover) { animation: header-wishlist-attention-glow 2.2s ease-in-out infinite; } .fixed-header .header-wishlist-text.is-attention:not(.is-hover) { animation: header-wishlist-attention-text 2.2s ease-in-out infinite; } .fixed-header .header-mic-bubble { fill: transparent; pointer-events: none; transition: fill 0.24s ease, filter 0.24s ease; } .fixed-header .header-mic-bubble.is-hover { fill: rgba(63, 106, 96, 0.08) !important; animation: none; filter: none; } .fixed-header .header-search-native-text { opacity: 0 !important; } .fixed-header .header-search-shell-outer, .fixed-header .header-search-shell-inner { transition: opacity 0.18s ease, stroke 0.18s ease; } .fixed-header .header-search-shell-inner { stroke: #D6CFB8 !important; } .fixed-header .header-search-active-outline { display: block !important; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; fill: none !important; stroke: #3f6a60 !important; stroke-width: 2 !important; } .fixed-header.is-search-active .header-search-active-outline { opacity: 1; } .fixed-header .header-search-mask { position: absolute; left: 336px; top: 20px; width: 572px; height: 42px; border-radius: 21px; background: transparent; pointer-events: none; z-index: var(--header-layer-line); display: none; } .fixed-header .header-search-hints { position: absolute; left: 338px; top: 30px; width: 431px; height: 20px; border-radius: 12px; background: transparent; color: #829181; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 20px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; pointer-events: none; user-select: none; z-index: var(--header-layer-search-text); } .fixed-header .header-search-input { position: absolute; left: 338px; top: 30px; width: 431px; height: 20px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #232030; caret-color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 20px; letter-spacing: 0; appearance: none; pointer-events: auto; z-index: calc(var(--header-layer-search-text) + 1); } .fixed-header .header-search-input::placeholder { color: #829181; } @keyframes header-panel-fade-in { 0% { opacity: 0; transform: translateY(-6px) scale(0.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .fixed-header .header-search-popover, .fixed-header .header-categories-backdrop, .fixed-header .header-burger-backdrop, .fixed-header .header-burger-panel, .fixed-header .header-cart-panel, .fixed-header .header-account-panel, .fixed-header .header-notifications-panel, .fixed-header .header-categories-panel, .fixed-header .header-mic-panel { pointer-events: auto; } .fixed-header .header-search-popover[hidden], .fixed-header .header-categories-backdrop[hidden], .fixed-header .header-burger-backdrop[hidden], .fixed-header .header-burger-panel[hidden], .fixed-header .header-cart-panel[hidden], .fixed-header .header-account-panel[hidden], .fixed-header .header-notifications-panel[hidden], .fixed-header .header-categories-panel[hidden], .fixed-header .header-mic-panel[hidden] { display: none !important; } .fixed-header .header-floating-layer [hidden] { display: none !important; } .fixed-header .header-mic-panel { position: absolute; left: 0; top: 0; width: 284px; min-width: 0; padding: 14px; background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 24px; box-shadow: var(--popup-shadow-soft); z-index: 3; display: flex; flex-direction: column; gap: 10px; overflow: auto; } .fixed-header .header-mic-panel.is-open { animation: header-panel-fade-in 0.19s ease both; } .fixed-header .header-mic-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fixed-header .header-mic-title { margin: 0; color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 20px; } .fixed-header .header-mic-close { width: 64px; height: 40px; display: block; padding: 0; border: 0; border-radius: 999px; background: rgba(230, 240, 234, 0.86); cursor: pointer; transition: background-color 0.2s ease; position: relative; } .fixed-header .header-mic-close svg { position: absolute; left: 19px; top: 7px; width: 26px; height: 26px; display: block; } .fixed-header .header-mic-close:hover, .fixed-header .header-mic-close:focus-visible { background: #232030; } .fixed-header .header-mic-close:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.32); outline-offset: 1px; } .fixed-header .header-mic-status { margin: 0; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 18px; } .fixed-header .header-mic-cta { align-self: center; width: 88px; height: 88px; border: 0; border-radius: 44px; background: #232030; color: var(--color-cream); cursor: pointer; box-shadow: 0 6px 14px rgba(35, 32, 48, 0.2); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .fixed-header .header-mic-cta svg { width: 30px; height: 30px; display: block; } .fixed-header .header-mic-cta:hover, .fixed-header .header-mic-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(35, 32, 48, 0.24); } .fixed-header .header-mic-cta:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.32); outline-offset: 2px; } @keyframes header-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(63, 106, 96, 0.45), 0 6px 14px rgba(35, 32, 48, 0.2); } 100% { box-shadow: 0 0 0 14px rgba(63, 106, 96, 0), 0 6px 14px rgba(35, 32, 48, 0.2); } } .fixed-header .header-mic-panel.is-listening .header-mic-cta { background: #3f6a60; animation: header-mic-pulse 1s ease-out infinite; } .fixed-header .header-mic-suggestions { display: flex; flex-wrap: wrap; gap: 8px; } .fixed-header .header-mic-chip { border: 1px solid var(--popup-border-strong); border-radius: 999px; background: var(--popup-bg); color: #232030; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1; padding: 8px 10px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .fixed-header .header-mic-chip:hover, .fixed-header .header-mic-chip:focus-visible { background: var(--popup-hover); border-color: #3f6a60; } .fixed-header .header-mic-chip:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.32); outline-offset: 1px; } .fixed-header .header-mic-result { margin: 0; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 18px; } .fixed-header .header-mic-result__lead, .fixed-header .header-mic-result__hint { display: block; } .fixed-header .header-mic-result__lead { font-weight: 600; } .fixed-header .header-mic-result__hint { margin-top: 8px; color: #697287; font-size: 12px; line-height: 16px; } .fixed-header .header-mic-result__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .fixed-header .header-mic-result__chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; background: #f8f1eb; color: #232030; font-size: 11px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; } .fixed-header .header-search-popover { position: absolute; left: 0; top: 0; width: 653px; background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 20px; box-shadow: var(--popup-shadow-soft); z-index: 3; padding: 8px; overflow: auto; } .fixed-header .header-search-popover.is-open { animation: header-panel-fade-in 0.19s ease both; } .fixed-header .header-search-popover--focus { padding-bottom: 10px; } .fixed-header .header-search-popover--typed { padding-top: 10px; padding-bottom: 10px; } .fixed-header .header-search-popover-title { margin: 0 10px 8px; color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 20px; } .fixed-header .header-search-list { display: flex; flex-direction: column; gap: 0; } .fixed-header .header-search-row { width: 100%; min-height: 50px; border: 0; background: transparent; border-radius: 14px; padding: 8px 15px; margin: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; transition: background-color 0.2s ease; } .fixed-header .header-search-popover--focus .header-search-row { padding: 0; } .fixed-header .header-search-row:hover, .fixed-header .header-search-row:focus-visible, .fixed-header .header-search-row.is-preview { background: var(--popup-hover); } .fixed-header .header-search-row.is-static { cursor: default; } .fixed-header .header-search-row.is-static:hover, .fixed-header .header-search-row.is-static:focus-visible { background: transparent; outline: 0; } .fixed-header .header-search-row:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.32); outline-offset: 0; } .fixed-header .header-search-row--action { margin-top: 2px; } .fixed-header .header-search-thumb { width: 46px; height: 46px; border-radius: 14px; background: #8e95b2; flex: 0 0 auto; } .fixed-header .header-search-popover--focus .header-search-thumb { margin-left: 2px; } .fixed-header .header-search-thumb.is-photo { background: linear-gradient(135deg, #f6c443 0%, #c58f3f 45%, #7d87b1 100%); } .fixed-header .header-search-row-text { color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 17px; flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; } .fixed-header .header-search-popover--focus .header-search-row-text { width: auto; height: auto; display: flex; align-items: center; } .fixed-header .header-search-row-text strong, .fixed-header .header-search-row--action .header-search-row-text { font-weight: 700; } .fixed-header .header-burger-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(35, 32, 48, 0.18); z-index: 6; backdrop-filter: none; opacity: 0; pointer-events: none; transition: opacity 1.08s cubic-bezier(0.16, 1, 0.3, 1); } .fixed-header .header-burger-backdrop.is-open { opacity: 1; pointer-events: auto; } .fixed-header .header-burger-panel, .fixed-header .header-cart-panel { position: fixed; right: 0; top: 74px; width: 288px; height: calc(100vh - 74px); max-height: calc(100vh - 74px); border-radius: 0; border-left: 1px solid var(--color-line); background: #f8f1eb; box-shadow: -16px 0 18px -12px rgba(35, 32, 48, 0.32); z-index: 7; overflow: visible; display: flex; flex-direction: column; transform: translateX(100%); pointer-events: none; transition: transform 0.42s cubic-bezier(0.18, 1, 0.2, 1); will-change: transform; margin: 0; } .fixed-header .header-burger-panel.is-open, .fixed-header .header-cart-panel.is-open { transform: translateX(0); pointer-events: auto; } .fixed-header .header-burger-panel::before { content: ""; position: absolute; top: -12px; right: var(--burger-tail-right, 43px); width: 24px; height: 13px; background-image: url("/assets/header-icons/popup-tail.svg"); background-repeat: no-repeat; background-position: center top; z-index: 3; } .fixed-header .header-cart-panel::before { content: ""; position: absolute; top: -12px; right: var(--cart-tail-right, 101px); width: 24px; height: 13px; background-image: url("/assets/header-icons/popup-tail.svg"); background-repeat: no-repeat; background-position: center top; z-index: 3; } body.header-burger-panel-open .fixed-header .header-desktop-burger::before, body.header-cart-panel-open .fixed-header .header-desktop-cart::before { background: #dcddd4; } .fixed-header .header-burger-backdrop, .fixed-header .header-burger-backdrop.is-open { display: none !important; } @media (max-width: 880px) { body.header-burger-panel-open::before, body.header-cart-panel-open::before { content: ""; position: fixed; left: 0; right: 0; top: 78px; bottom: 84px; background: rgba(35, 32, 48, 0.38); pointer-events: none; z-index: 4990; } .fixed-header .header-burger-panel::before, .fixed-header .header-cart-panel::before { display: none; } .fixed-header .header-burger-panel, .fixed-header .header-cart-panel { left: auto !important; right: 0 !important; width: min(288px, calc(100vw - 24px)) !important; top: 78px !important; bottom: 84px !important; height: auto !important; max-height: none !important; } } html.header-panel-open { background: #f8f1eb !important; } html.header-categories-panel-open, body.header-categories-panel-open { overflow: hidden; overscroll-behavior: contain; } .fixed-header .header-cart-top { position: relative; width: 100%; height: 52px; flex: 0 0 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px 0 20px; border-bottom: 1px solid var(--color-line); } .fixed-header .header-cart-title { margin: 0; color: #232030; font-family: var(--font-display, var(--font-body)); font-size: 17px; font-weight: 600; line-height: 1; } .fixed-header .header-cart-view-all { min-width: 86px; height: 42px; border: 0; border-radius: 999px; background: transparent; color: #232030; font-family: var(--font-body); font-size: 12px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background-color 0.2s ease; } .fixed-header .header-cart-view-all img { width: 18px; height: 12px; display: block; transition: transform var(--duration-fast, 180ms) var(--ease-standard, ease); } .fixed-header .header-cart-view-all:hover img, .fixed-header .header-cart-view-all:focus-visible img { transform: translateX(3px); } .fixed-header .header-cart-view-all:focus-visible, .fixed-header .header-cart-continue:focus-visible, .fixed-header .header-cart-card-remove:focus-visible, .fixed-header .header-cart-empty button:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-cart-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 0 12px; } .fixed-header .header-cart-body::-webkit-scrollbar { width: 0; height: 0; } .fixed-header .header-cart-items { display: flex; flex-direction: column; gap: 14px; } .fixed-header .header-cart-card { position: relative; width: calc(100% - 35px); min-height: 0; margin: 0 25px 0 10px; border-radius: 0; background: #f8f1eb; display: flex; flex-direction: column; gap: 8px; padding: 0; overflow: visible; } .fixed-header .header-cart-card-media { position: relative; width: 100%; aspect-ratio: 1.36 / 1; border-radius: 18px; overflow: hidden; } .fixed-header .header-cart-card-thumb { position: relative; width: 100%; height: 100%; border-radius: 18px; background: var(--popup-bg); color: #3f6a60; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; } .fixed-header .header-cart-card-thumb::after { content: none; } .fixed-header .header-cart-card-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; } .fixed-header .header-cart-card-thumb-blank { width: 100%; height: 100%; display: block; background: radial-gradient(circle at 28% 22%, rgba(255, 249, 241, 0.92) 0%, rgba(255, 249, 241, 0) 35%), linear-gradient(135deg, #e9eef5 0%, #f4eee8 100%); } .fixed-header .header-cart-card-copy { min-width: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .fixed-header .header-cart-card-title { display: none; color: #232030; font-family: var(--font-body); font-size: 12px; font-weight: 800; line-height: 15px; text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fixed-header .header-cart-card-title:hover, .fixed-header .header-cart-card-title:focus-visible { color: #3f6a60; } .fixed-header .header-cart-card-meta { display: none; color: var(--color-ink-muted); font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 12px; display: flex; flex-wrap: wrap; gap: 4px; } .fixed-header .header-cart-card-price { color: #232030; font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; } .fixed-header .header-cart-card-price-pill { position: absolute; left: 9px; bottom: 10px; max-width: calc(100% - 19px); min-height: 31px; padding: 0 10px 0 9px; border-radius: 999px; background: var(--popup-bg); display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; z-index: 2; overflow: hidden; box-shadow: 0 0 4px rgba(35, 32, 48, 0.14); } .fixed-header .header-cart-card-price-old { min-width: 0; color: #232030; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1; text-decoration: line-through; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fixed-header .header-cart-card-old { display: none; color: var(--color-ink-muted); font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fixed-header .header-cart-card-status, .fixed-header .header-cart-card-signal { color: #e60023; font-family: var(--font-body); font-size: 13px; font-weight: 800; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; } .fixed-header .header-cart-card-remove { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border: 0; border-radius: 999px; background: rgba(255, 249, 241, 0.94); color: #232030; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(-4px) scale(0.94); transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .fixed-header .header-cart-card-remove::before { content: ""; width: 19px; height: 19px; display: block; margin: auto; background: currentColor; -webkit-mask: url("/assets/gift-room-icons/trash.svg") center / 19px 19px no-repeat; mask: url("/assets/gift-room-icons/trash.svg") center / 19px 19px no-repeat; } .fixed-header .header-cart-card-media:hover .header-cart-card-remove, .fixed-header .header-cart-card-media:focus-within .header-cart-card-remove { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .fixed-header .header-cart-card-remove:hover, .fixed-header .header-cart-card-remove:focus-visible { background: var(--popup-bg); color: var(--color-alert-red, #b91515); } .fixed-header .header-cart-empty { width: 264px; margin: 10px auto 0; min-height: 168px; border: 1px solid var(--popup-outline); border-radius: 18px; padding: 18px; color: #232030; display: flex; flex-direction: column; justify-content: center; gap: 9px; } .fixed-header .header-cart-empty[hidden], .fixed-header .header-cart-footer[hidden] { display: none !important; } .fixed-header .header-cart-empty strong { font-family: var(--font-display, var(--font-body)); font-size: 18px; font-weight: 700; line-height: 22px; } .fixed-header .header-cart-empty span { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 16px; } .fixed-header .header-cart-empty button { align-self: flex-start; height: 38px; border: 0; border-radius: 999px; background: #232030; color: var(--color-cream); font-family: var(--font-body); font-size: 12px; font-weight: 800; padding: 0 15px; cursor: pointer; } .fixed-header .header-cart-footer { flex: 0 0 auto; border-top: 1px solid var(--color-line); padding: 10px 10px 8px; } .fixed-header .header-cart-continue { width: 100%; min-height: 48px; border: 0; border-radius: 24px; background: #232030; color: #FFF9F1; font-family: var(--font-body); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; } .fixed-header .header-cart-continue span { font-size: 13px; font-weight: 700; line-height: 16px; } .fixed-header .header-cart-continue strong { font-size: 14px; font-weight: 800; line-height: 16px; } .fixed-header .header-cart-footer p { margin: 4px 0 0; color: #232030; font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 14px; text-align: center; } .fixed-header .header-burger-top { position: relative; width: 100%; height: 52px; flex: 0 0 52px; } .fixed-header .header-burger-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #d9d5d0; } .fixed-header .header-burger-title { position: absolute; left: 20px; top: 0; margin: 0; height: 52px; display: inline-flex; align-items: center; font-family: var(--font-display, var(--font-body)); font-size: 17px; font-weight: 600; letter-spacing: 0; color: #232030; } .fixed-header .header-burger-close { position: absolute; right: 20px; top: 27px; width: 78px; height: 55px; border: 0; border-radius: 999px; background: #dcddd4; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background-color 0.2s ease; } .fixed-header .header-burger-close svg, .fixed-header .header-burger-close img { width: 17px; height: 17px; display: block; } .fixed-header .header-burger-close:hover, .fixed-header .header-burger-close:focus-visible { background: #d2d4ca; } .fixed-header .header-burger-close:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-burger-body { position: relative; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 0 16px; } .fixed-header .header-burger-body::-webkit-scrollbar { width: 0; height: 0; } .fixed-header .header-burger-signin { width: 264px; min-height: 68px; margin: 0 auto; background: var(--popup-bg); border-radius: 18px; border: 0; padding: 13px 13px 13px 13px; display: flex; align-items: center; gap: 12px; position: relative; box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.08); } .fixed-header .header-burger-signin-avatar { width: 42px; height: 42px; border-radius: 999px; background: rgba(63, 106, 96, 0.27); border: 1px solid #3f6a60; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; } .fixed-header .header-burger-signin-avatar svg { width: 20px; height: 20px; display: block; } .fixed-header .header-burger-signin-avatar.is-account-avatar { background: linear-gradient(180deg, #FFF9F18f1 0%, #f4d3c6 100%); border: 0; box-shadow: inset 0 0 0 3px var(--color-forest), 0 2px 6px rgba(35, 32, 48, 0.14); color: #5a3f35; font-family: var(--font-body); font-size: 18px; font-weight: 800; line-height: 42px; text-align: center; } .fixed-header .header-burger-signin-avatar.is-account-avatar.has-image { background-color: #FFF9F1; background-position: center; background-repeat: no-repeat; background-size: cover; color: transparent; text-indent: -9999px; overflow: hidden; } .fixed-header .header-burger-signin-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .fixed-header .header-burger-signin-title { color: #232030; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fixed-header .header-burger-signin-hint { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fixed-header .header-burger-signin-action { margin-left: auto; width: auto; min-width: 75px; max-width: 112px; height: 38px; border-radius: 999px; border: 1px solid var(--popup-outline); background: var(--popup-bg); color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 15px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fixed-header .header-burger-signin.is-authenticated .header-burger-signin-action { display: inline-flex; } .fixed-header .header-burger-signin.is-authenticated .header-burger-signin-hint { white-space: normal; overflow: visible; text-overflow: clip; } .fixed-header .header-burger-signin.is-authenticated .header-burger-signin-title { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .fixed-header .header-burger-signin-action:hover, .fixed-header .header-burger-signin-action:focus-visible { background: var(--popup-hover); border-color: var(--popup-outline); } .fixed-header .header-burger-signin-action:focus-visible { outline: 2px solid #D6CFB8; outline-offset: 2px; } .fixed-header .header-burger-dashboard { width: 264px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 7px; } .fixed-header .header-burger-dashboard[hidden] { display: none; } .fixed-header .header-burger-dashboard-card { width: 100%; min-height: 70px; border: 0; border-radius: 18px; background: #DCDDD3; color: #232030; padding: 12px 11px 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title cta" "text cta"; column-gap: 10px; row-gap: 3px; align-items: center; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.06); transition: box-shadow 0.2s ease, background-color 0.2s ease; } .fixed-header .header-burger-dashboard-card:hover, .fixed-header .header-burger-dashboard-card:focus-visible { background: #DCDDD3; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } .fixed-header .header-burger-dashboard.is-shop-dashboard .header-burger-dashboard-card { background: var(--color-forest); color: var(--popup-bg); min-height: 70px; padding: 11px 13px; grid-template-areas: "eyebrow cta" "title cta" "text cta"; row-gap: 3px; } .fixed-header .header-burger-dashboard-eyebrow, .fixed-header .header-burger-dashboard-text, .fixed-header .header-burger-dashboard-cta, .fixed-header .header-burger-dashboard-action-label, .fixed-header .header-burger-dashboard-action-text, .fixed-header .header-burger-dashboard-action-cta, .fixed-header .header-burger-dashboard-metric-label { font-family: var(--font-body); } .fixed-header .header-burger-dashboard-eyebrow { display: none; grid-area: eyebrow; color: currentColor; opacity: 0.72; font-size: 9px; font-weight: 800; line-height: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .fixed-header .header-burger-dashboard.is-shop-dashboard .header-burger-dashboard-eyebrow { display: block; } .fixed-header .header-burger-dashboard-title { display: block; grid-area: title; color: currentColor; font-family: var(--font-display, var(--font-body)); font-size: 17px; font-weight: 700; line-height: 23px; letter-spacing: 0; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .fixed-header .header-burger-dashboard-text { display: block; grid-area: text; color: currentColor; opacity: 0.82; font-size: 11px; font-weight: 700; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fixed-header .header-burger-dashboard-cta { grid-area: cta; justify-self: end; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-height: 34px; border-radius: 999px; background: var(--color-sand); color: var(--color-ink); padding: 0; font-size: 0; font-weight: 800; line-height: 0; white-space: nowrap; } .fixed-header .header-burger-dashboard-cta-icon { width: 17px; height: 17px; display: block; object-fit: contain; } .fixed-header .header-burger-dashboard.is-shop-dashboard .header-burger-dashboard-cta { width: auto; height: auto; min-height: 26px; background: var(--popup-bg); color: var(--color-forest); padding: 0 11px; font-size: 11px; line-height: 13px; } .fixed-header .header-burger-dashboard:not(.is-shop-dashboard) .header-burger-dashboard-cta { background: var(--color-sand); color: var(--color-ink); } .fixed-header .header-burger-dashboard-metrics { display: block; } .fixed-header .header-burger-dashboard-action { width: 100%; min-height: 62px; border: 0; border-radius: 16px; padding: 9px 10px; background: var(--popup-bg-soft); color: var(--color-ink); display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--popup-outline-soft, var(--color-sand-dark)); transition: background-color 0.2s ease, box-shadow 0.2s ease; } .fixed-header .header-burger-dashboard-action.has-no-dashboard-action-icon { grid-template-columns: minmax(0, 1fr) auto; padding-left: 14px; } .fixed-header .header-burger-dashboard-action:hover, .fixed-header .header-burger-dashboard-action:focus-visible { background: var(--popup-hover); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } .fixed-header .header-burger-dashboard-action.is-active { background: color-mix(in srgb, var(--color-forest) 8%, var(--popup-bg-soft)); } .fixed-header .header-burger-dashboard-action-icon { width: 32px; height: 32px; border-radius: 999px; background: color-mix(in srgb, var(--color-forest) 9%, var(--popup-bg)); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--popup-outline-soft, var(--color-sand-dark)); } .fixed-header .header-burger-dashboard-action.has-no-dashboard-action-icon .header-burger-dashboard-action-icon, .fixed-header .header-burger-dashboard-action-icon[hidden] { display: none; } .fixed-header .header-burger-dashboard-action-icon img { width: 17px; height: 17px; display: block; object-fit: contain; } .fixed-header .header-burger-dashboard-action-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fixed-header .header-burger-dashboard-action-label { color: var(--color-ink-soft); font-size: 9px; font-weight: 800; line-height: 11px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fixed-header .header-burger-dashboard-action-title { color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 800; line-height: 15px; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .fixed-header .header-burger-dashboard-action-text { color: var(--color-ink-soft); font-size: 10px; font-weight: 700; line-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fixed-header .header-burger-dashboard-action-cta { justify-self: end; align-self: center; min-height: 24px; border-radius: 999px; background: var(--color-forest); color: var(--popup-bg); display: inline-flex; align-items: center; padding: 0 10px; font-size: 10px; font-weight: 800; line-height: 12px; white-space: nowrap; } .fixed-header .header-burger-dashboard-metric { min-height: 54px; border-radius: 16px; padding: 9px 10px; background: var(--popup-bg-soft); border: 0; color: #232030; display: flex; flex-direction: column; justify-content: space-between; gap: 5px; cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.08); transition: box-shadow 0.2s ease, background-color 0.2s ease; } .fixed-header .header-burger-dashboard-metric:hover, .fixed-header .header-burger-dashboard-metric:focus-visible { background: var(--popup-hover); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } .fixed-header .header-burger-dashboard-metric.is-active { background: #EEE5DA; } .fixed-header .header-burger-dashboard-metric-label { color: var(--color-ink-soft); font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fixed-header .header-burger-dashboard-metric-value { color: #232030; font-family: var(--font-body); font-size: 20px; font-weight: 800; line-height: 21px; letter-spacing: 0; } .fixed-header .header-burger-group { width: 272px; margin: 12px auto 0; background: #f8f1eb; border-radius: 16px; } .fixed-header .header-burger-group-primary { min-height: 281px; padding: 10px 0 4px; } .fixed-header .header-burger-group-preferences { padding: 6px 0 8px; } .fixed-header .header-burger-group-seasonal, .fixed-header .header-burger-group-featured { margin: 4px auto 0; padding: 6px 0 4px; } .fixed-header .header-burger-group-seasonal .header-burger-section-title, .fixed-header .header-burger-group-featured .header-burger-section-title { margin: 0 22px 4px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #6e6a76; text-transform: none; } .fixed-header .header-burger-group-seasonal .header-burger-item, .fixed-header .header-burger-group-featured .header-burger-item { width: 256px; } .fixed-header .header-burger-item.is-seasonal { background: #f6e3d2; } .fixed-header .header-burger-item.is-seasonal:hover, .fixed-header .header-burger-item.is-seasonal:focus-visible { background: #f1d3b5; } .fixed-header .header-burger-item.is-seasonal .header-burger-item-icon img { width: 18px; height: 18px; } .fixed-header .header-burger-divider { width: 100%; height: 1px; margin: 10px 0 0; background: #d9d5d0; } .fixed-header .header-burger-section-title { margin: 14px 12px 10px; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 15px; } .fixed-header .header-burger-item { width: 256px; height: 46px; margin: 0 auto; border: 0; border-radius: 14px; background: transparent; padding: 0 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; transition: background-color 0.2s ease; } .fixed-header .header-burger-item.is-dark { background: #232030; } .fixed-header .header-burger-item--stacked { height: 56px; align-items: center; padding-right: 18px; } .fixed-header .header-burger-item:hover, .fixed-header .header-burger-item:focus-visible { background: #dcddd4; } .fixed-header .header-burger-item.is-primary:hover, .fixed-header .header-burger-item.is-primary:focus-visible { background: #dcddd4; } .fixed-header .header-burger-item.is-dark:hover, .fixed-header .header-burger-item.is-dark:focus-visible { background: #1d1a2b; } .fixed-header .header-burger-item:focus-visible { outline: 2px solid #D6CFB8; outline-offset: 0; } .fixed-header .header-burger-item-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .fixed-header .header-burger-item-icon svg { width: 22px; height: 22px; display: block; } .fixed-header .header-burger-item-icon img { width: 22px; height: 22px; display: block; object-fit: contain; } .fixed-header .header-burger-item-text { color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 17px; } .fixed-header .header-burger-item-textwrap { min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; } .fixed-header .header-burger-item-meta { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fixed-header .header-burger-item-chevron { width: 12px; height: 12px; margin-left: auto; color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 12px; } .fixed-header .header-burger-item-chevron img { width: 12px; height: 12px; display: block; object-fit: contain; } .fixed-header .header-burger-item--stacked .header-burger-item-chevron img { transform: rotate(-90deg); transform-origin: 50% 50%; } .fixed-header .header-burger-journal-toggle { width: 28px; height: 28px; margin-left: auto; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: var(--color-ink); transition: background-color 0.18s ease; } .fixed-header .header-burger-journal-toggle:hover, .fixed-header .header-burger-journal-toggle:focus-visible { background: #cfd0c6; } .fixed-header .header-burger-journal-toggle img { width: 12px; height: 12px; display: block; object-fit: contain; transition: transform 0.2s ease; } .fixed-header .header-burger-item-journal.is-journal-open .header-burger-journal-toggle img { transform: rotate(180deg); } .fixed-header .header-burger-subitem { padding-left: 46px; } .fixed-header .header-burger-subitem[hidden] { display: none; } .fixed-header .header-burger-subitem .header-burger-item-text { font-weight: 600; color: var(--color-ink-soft); } .fixed-header .header-burger-item.is-dark .header-burger-item-text { color: var(--color-cream); } .fixed-header .header-burger-item.is-dark .header-burger-item-icon img { filter: brightness(0) saturate(100%) invert(94%) sepia(18%) saturate(272%) hue-rotate(307deg) brightness(104%) contrast(94%); } .fixed-header .header-burger-item.is-primary .header-burger-item-text { font-size: 13px; line-height: 15px; } .fixed-header .header-burger-item[data-burger-item="cart"] .header-burger-item-icon { overflow: visible; } .fixed-header .header-burger-item[data-burger-item="cart"] .header-burger-item-icon img, .fixed-header .header-burger-item[data-burger-item="cart"] .header-burger-item-icon svg { width: 52px; height: 52px; transform: scale(2); transform-origin: center; } .fixed-header .header-burger-item[data-burger-item="notifications"] .header-burger-item-icon img, .fixed-header .header-burger-item[data-burger-item="notifications"] .header-burger-item-icon svg { width: 30px; height: 30px; transform: scale(1.15); transform-origin: center; } .fixed-header .header-burger-item-badge { margin-left: auto; min-width: 29px; height: 24px; border-radius: 999px; background: var(--color-alert-red); color: var(--color-cream); font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 16px; padding: 4px 8px; display: inline-flex; align-items: center; justify-content: center; } .fixed-header .header-burger-item-badge[hidden] { display: none !important; } .fixed-header .header-burger-panel.is-subview-open .header-burger-body { display: none; } .fixed-header .header-burger-subview { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 18px; } .fixed-header .header-burger-subview::-webkit-scrollbar { width: 0; height: 0; } .fixed-header .header-burger-subview-top { width: 100%; min-height: 46px; border: 0; border-radius: 14px; background: transparent; color: var(--color-ink); padding: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; } .fixed-header .header-burger-back { width: 42px; height: 42px; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; pointer-events: none; } .fixed-header .header-burger-subview-top:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-burger-back img { width: 17px; height: 10px; display: block; transform: rotate(180deg); transform-origin: 50% 50%; transition: transform var(--duration-fast) var(--ease-standard); } .fixed-header .header-burger-subview-top:hover .header-burger-back img, .fixed-header .header-burger-subview-top:focus-visible .header-burger-back img { transform: translateX(-3px) rotate(180deg); } .fixed-header .header-burger-subview-title { margin: 0; color: var(--color-ink); font-family: var(--font-body); font-size: 18px; font-weight: 800; line-height: 22px; } .fixed-header .header-burger-choice-list { margin-top: 14px; display: flex; flex-direction: column; gap: 0; } .fixed-header .header-burger-choice { width: 100%; min-height: 46px; border: 0; border-radius: 14px; background: transparent; color: var(--color-ink); padding: 0 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard); } .fixed-header .header-burger-choice:hover, .fixed-header .header-burger-choice:focus-visible { background: var(--popup-hover); } .fixed-header .header-burger-choice:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-burger-choice-text { min-width: 0; color: var(--color-ink); font-family: var(--font-body); font-size: 15px; font-weight: 800; line-height: 18px; flex: 1 1 auto; } .fixed-header .header-burger-choice-meta { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 12px; font-weight: 800; line-height: 14px; flex: 0 0 auto; } .fixed-header .header-burger-choice-check { width: 17px; height: 14px; flex: 0 0 17px; opacity: 0; } .fixed-header .header-burger-choice.is-selected .header-burger-choice-check { opacity: 1; } .fixed-header .header-burger-choice-check img { width: 17px; height: 14px; display: block; filter: brightness(0) saturate(100%); } .fixed-header .header-categories-panel { position: fixed; left: 0; top: 0; width: 1089px; height: 584px; border-radius: 20px; background: var(--popup-bg); border: 0; box-shadow: var(--popup-shadow); z-index: 3; padding: 0; display: flex; gap: clamp(10px, 1vw, 15px); overflow: hidden; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); } .fixed-header .header-categories-backdrop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(35, 32, 48, 0.2); z-index: 1; } .fixed-header .header-categories-backdrop[hidden] { display: none !important; } .fixed-header .header-categories-panel.is-open { animation: header-panel-fade-in 0.19s ease both; } .fixed-header .header-categories-sidebar { width: clamp(220px, 28%, 314px); min-width: 220px; height: 100%; background: #dcddd4; border-radius: 20px; padding: 6px; display: flex; flex-direction: column; gap: 0; overflow: hidden; } .fixed-header .header-categories-tabs { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding-right: 6px; scrollbar-color: rgba(35, 32, 48, 0.36) transparent; scrollbar-gutter: stable; scrollbar-width: thin; } .fixed-header .header-category-tab { width: 100%; min-height: 44px; border: 0; border-radius: 14px; background: transparent; margin: 0; padding: 0 34px 0 10px; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.15; letter-spacing: 0; text-align: left; cursor: pointer; position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; transition: background-color 0.2s ease; } .fixed-header .header-category-tab-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; } .fixed-header .header-category-tab-icon img { width: 21px; height: 21px; display: block; object-fit: contain; } .fixed-header .header-category-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; padding-bottom: 1px; } .fixed-header .header-category-tab::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #232030; opacity: 0.72; font-size: 14px; font-weight: 700; } .fixed-header .header-category-tab:hover, .fixed-header .header-category-tab:focus-visible, .fixed-header .header-category-tab.is-hovering, .fixed-header .header-category-tab.is-active { background: var(--popup-bg); } .fixed-header .header-category-tab:focus-visible { outline: 2px solid #D6CFB8; outline-offset: 0; } .fixed-header .header-categories-all { margin-top: auto; width: 100%; height: 44px; border: 0; border-radius: 14px; background: #232030; color: #FFF9F1; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .fixed-header .header-categories-all:hover, .fixed-header .header-categories-all:focus-visible { background: var(--popup-bg); color: #232030; box-shadow: 0 0 4px rgba(35, 32, 48, 0.5); } .fixed-header .header-categories-all:focus-visible { outline: 2px solid #D6CFB8; outline-offset: 2px; } .fixed-header .header-categories-content { flex: 1; min-width: 0; min-height: 0; padding: 13px 12px 8px 8px; display: flex; flex-direction: column; gap: 8px; } .fixed-header .header-categories-heading { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 8px; } .fixed-header .header-categories-title { min-width: 0; margin: 0; color: #232030; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fixed-header .header-categories-browse { flex: 0 0 auto; max-width: min(100%, 320px); min-height: 32px; border: 0; border-radius: 0; background: transparent; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 16px; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; overflow: visible; } .fixed-header .header-categories-browse-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fixed-header .header-categories-browse-icon { width: 17px; height: 10px; flex: 0 0 auto; display: block; object-fit: contain; transition: transform 0.18s ease; } .fixed-header .header-categories-browse:hover, .fixed-header .header-categories-browse:focus-visible { background: transparent; } .fixed-header .header-categories-browse:focus-visible { outline: 2px solid #D6CFB8; outline-offset: 2px; } .fixed-header .header-categories-browse:hover .header-categories-browse-icon, .fixed-header .header-categories-browse:focus-visible .header-categories-browse-icon { transform: translateX(4px); } .fixed-header .header-categories-description { margin: 0; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 18px; text-align: center; } .fixed-header .header-subcategory-grid { --header-subcategory-columns: 4; box-sizing: border-box; width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(var(--header-subcategory-columns), minmax(0, 1fr)); grid-auto-rows: min-content; gap: 12px; justify-content: start; align-content: start; align-items: start; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 12px 10px 14px; scrollbar-color: rgba(35, 32, 48, 0.36) transparent; scrollbar-gutter: stable; scrollbar-width: thin; } .fixed-header .header-categories-tabs::-webkit-scrollbar, .fixed-header .header-subcategory-grid::-webkit-scrollbar { width: 8px; height: 8px; } .fixed-header .header-categories-tabs::-webkit-scrollbar-track, .fixed-header .header-subcategory-grid::-webkit-scrollbar-track { background: transparent; } .fixed-header .header-categories-tabs::-webkit-scrollbar-thumb, .fixed-header .header-subcategory-grid::-webkit-scrollbar-thumb { min-height: 44px; background: rgba(35, 32, 48, 0.34); background-clip: content-box; border: 2px solid transparent; border-radius: 999px; } .fixed-header .header-categories-tabs::-webkit-scrollbar-thumb:hover, .fixed-header .header-subcategory-grid::-webkit-scrollbar-thumb:hover { background-color: rgba(35, 32, 48, 0.46); } .fixed-header .header-categories-tabs::-webkit-scrollbar-button, .fixed-header .header-subcategory-grid::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .fixed-header .header-subcategory-card { box-sizing: border-box; width: 100%; min-width: 0; max-width: none; height: auto; min-height: 0; flex: 0 0 auto; justify-self: stretch; align-self: start; border: 1px solid transparent; border-radius: 16px; background: transparent; box-shadow: none; margin: 0; padding: 2px 2px 8px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; cursor: pointer; text-align: center; overflow: visible; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .fixed-header .header-subcategory-card:hover { background: var(--popup-bg); border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: none; } .fixed-header .header-subcategory-card.is-hovering { background: var(--popup-bg); border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: none; } .fixed-header .header-subcategory-card:focus-visible { outline: 2px solid #D6CFB8; outline-offset: 0; background: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .fixed-header .header-subcategory-thumb { box-sizing: border-box; display: block; position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; min-height: 0; border-radius: 14px; background: #f0f3f8; overflow: hidden; box-shadow: none; transition: box-shadow 0.18s ease; } .fixed-header .header-subcategory-card:hover .header-subcategory-thumb, .fixed-header .header-subcategory-card:focus-visible .header-subcategory-thumb, .fixed-header .header-subcategory-card.is-hovering .header-subcategory-thumb { background: #f0f3f8; box-shadow: none; } .fixed-header .header-subcategory-thumb-image { display: block; width: 100%; height: 100%; object-fit: cover; } .fixed-header .header-subcategory-label { box-sizing: border-box; width: 100%; height: 34px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #232030; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 18px; padding: 1px 4px 2px; text-align: center; white-space: normal; word-break: break-word; } body.auth-modal-open { overflow: hidden; } @keyframes jp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes header-auth-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes header-auth-close-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } .header-auth-overlay { --popup-control-border: var(--popup-border-strong); --popup-focus: var(--color-forest); position: fixed; inset: 0; background: var(--popup-overlay); z-index: var(--z-modal-front, 13000); display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 24px 20px; opacity: 0; pointer-events: none; transition: opacity 0.26s ease; } .header-auth-overlay[hidden], .header-auth-loader-card[hidden], .header-auth-card[hidden] { display: none !important; } .header-auth-overlay.is-open { opacity: 1; pointer-events: auto; } .header-auth-overlay.is-closing { pointer-events: none; } .header-auth-overlay.is-open:not(.is-loading-view), .header-auth-overlay.is-closing:not(.is-loading-view) { align-items: flex-start; } .header-auth-shell { width: 457px; max-width: calc(100vw - 40px); position: relative; margin: 0; opacity: 0; transform: translateY(10px) scale(0.98); transform-origin: top center; transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.23, 1, 0.32, 1); will-change: opacity, transform; } .header-auth-overlay.is-open .header-auth-shell { opacity: 1; transform: translateY(0) scale(1); } .header-auth-overlay.is-closing .header-auth-shell { opacity: 0; transform: translateY(0) scale(1); } .header-auth-close { position: absolute; top: 0; left: calc(100% + var(--popup-close-offset, 10px)); right: auto; width: var(--popup-close-width, 78px); height: var(--popup-close-height, 55px); border: 0; border-radius: 999px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); cursor: pointer; z-index: 2; transition: background-color 0.24s ease, filter 0.24s ease; will-change: transform; } .header-auth-close::before, .header-auth-close::after { content: none; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; border-radius: 2px; background: var(--color-ink); } .header-auth-close::before { transform: translate(-50%, -50%) rotate(45deg); } .header-auth-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .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; transform: translate(-50%, -50%); pointer-events: none; } .header-auth-close:hover, .header-auth-close:focus-visible { background: var(--popup-close-hover-bg, var(--sort-control-bg)); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: var(--popup-close-hover-filter); } .header-auth-close:active { transform: none; } .header-auth-close:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .header-auth-loader-card, .header-auth-card { --header-auth-label-bg: var(--popup-bg); --header-auth-field-bg: var(--header-auth-label-bg); width: 100%; background: var(--popup-bg); box-shadow: var(--popup-shadow); border-radius: 30px; animation: header-auth-pop 0.24s ease; position: relative; } .header-auth-loader-card { height: 170px; display: flex; align-items: center; justify-content: center; } .auth-page .header-auth-card { --header-auth-label-bg: var(--color-page-bg); --header-auth-field-bg: var(--color-page-bg); } .header-auth-loader-icon { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; } .jp-canonical-spinner { width: var(--jp-spinner-size, 38px); height: var(--jp-spinner-size, 38px); display: block; box-sizing: border-box; } .jp-canonical-spinner__svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: center; animation: jp-spin 0.9s linear infinite; } .jp-canonical-spinner__track, .jp-canonical-spinner__arc { fill: none; stroke-width: var(--jp-spinner-stroke, 4px); } .jp-canonical-spinner__track { stroke: var(--jp-spinner-track, rgba(35, 32, 48, 0.1)); } .jp-canonical-spinner__arc { stroke: var(--jp-spinner-color, #3F6A60); stroke-linecap: round; stroke-dasharray: 34 113; transform: rotate(-90deg); transform-origin: center; } .header-auth-canonical-spinner { --jp-spinner-size: 50px; --jp-spinner-stroke: 6px; } .header-auth-card { padding: 20px; } .header-auth-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .header-auth-title { margin: 0; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .header-auth-subtitle { margin: 4px 0 14px; color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 18px; } .header-auth-switch { min-height: 44px; padding: 4px 18px; border-radius: 999px; border: 0; background: #EEE5DA; color: #232030; font-family: var(--font-display); font-size: 15px; font-weight: 600; cursor: pointer; position: relative; transition: box-shadow 0.2s ease, background-color 0.2s ease; } .header-auth-switch::before { content: none; } .header-auth-switch:hover, .header-auth-switch:focus-visible { background: #E1D1BC; box-shadow: 0 0 0 2px #E1D1BC; transform: none; } .header-auth-switch:hover::before, .header-auth-switch:focus-visible::before { content: none; } .header-auth-switch:active { transform: translateY(0); } .header-auth-switch:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.32); outline-offset: 2px; } .header-auth-form { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; } .header-auth-field { position: relative; display: flex; flex-direction: column; gap: 0; padding-top: 8px; } .header-auth-label { position: absolute; top: 2px; left: 22px; z-index: 3; display: inline-flex; align-items: center; max-width: calc(100% - 36px); padding: 0 6px; border-radius: 999px; background: var(--header-auth-label-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 14px; white-space: nowrap; pointer-events: none; } .header-auth-required { color: var(--color-alert-red); } .header-auth-field.is-error .header-auth-label, .header-auth-field.is-error .header-auth-required { color: var(--color-alert-red); } .header-auth-input-wrap { position: relative; height: 46px; border-radius: 999px; background: var(--header-auth-field-bg, var(--header-auth-label-bg, var(--popup-bg))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); border: 1.5px solid var(--popup-control-border); outline: 2px solid transparent; outline-offset: 0; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, outline-color 0.2s ease; } .header-auth-input-wrap:focus-within { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } .header-auth-input-wrap.is-filled { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 10%, transparent); outline-color: transparent; } .header-auth-field.is-error .header-auth-input-wrap { border-color: var(--color-alert-red); background: var(--header-auth-field-bg, var(--header-auth-label-bg, var(--popup-bg))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-alert-red) 11%, transparent); outline-color: transparent; } .header-auth-field.is-error .header-auth-input-wrap:focus-within, .header-auth-field.is-error .header-auth-input-wrap.is-filled { border-color: var(--color-alert-red); background: var(--header-auth-field-bg, var(--header-auth-label-bg, var(--popup-bg))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-alert-red) 11%, transparent); outline-color: transparent; } .header-auth-input { width: 100%; height: 100%; min-height: 44px; display: block; position: relative; z-index: 1; border: 0 !important; background: transparent !important; outline: 0 !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; border-radius: 0 !important; padding: 0 20px; color: var(--color-ink); -webkit-text-fill-color: var(--color-ink); opacity: 1; caret-color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 46px; } .header-auth-input:focus, .header-auth-input:focus-visible { outline: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; color: var(--color-ink) !important; -webkit-text-fill-color: var(--color-ink) !important; } .header-auth-input::-webkit-textfield-decoration-container { padding: 0; } .header-auth-input:-webkit-autofill, .header-auth-input:-webkit-autofill:hover, .header-auth-input:-webkit-autofill:focus, .header-auth-input:-webkit-autofill:active { -webkit-text-fill-color: var(--color-ink) !important; box-shadow: 0 0 0 1000px transparent inset !important; -webkit-box-shadow: 0 0 0 1000px transparent inset !important; transition: background-color 9999s ease-out 0s; } .header-auth-input::-webkit-contacts-auto-fill-button, .header-auth-input::-webkit-credentials-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; } .header-auth-input-wrap.has-eye .header-auth-input { height: 46px; min-height: 46px; padding-right: 20px; border: 1.5px solid var(--popup-control-border) !important; border-radius: 999px !important; background: var(--header-auth-field-bg, var(--header-auth-label-bg, var(--popup-bg))) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent) !important; } .header-auth-input-wrap.has-eye { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; } .header-auth-input-wrap.has-eye:focus-within, .header-auth-input-wrap.has-eye.is-filled, .header-auth-field.is-error .header-auth-input-wrap.has-eye, .header-auth-field.is-error .header-auth-input-wrap.has-eye:focus-within, .header-auth-field.is-error .header-auth-input-wrap.has-eye.is-filled { border: 0; background: transparent; box-shadow: none; outline: 0; } .header-auth-input-wrap.has-eye:focus-within .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; } .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) 10%, transparent) !important; } .header-auth-field.is-error .header-auth-input-wrap.has-eye .header-auth-input, .header-auth-field.is-error .header-auth-input-wrap.has-eye:focus-within .header-auth-input, .header-auth-field.is-error .header-auth-input-wrap.has-eye.is-filled .header-auth-input { border-color: var(--color-alert-red) !important; background: var(--header-auth-field-bg, var(--header-auth-label-bg, var(--popup-bg))) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-alert-red) 11%, transparent) !important; outline: 0 !important; } .header-auth-eye { position: static; z-index: 2; width: 46px; height: 46px; border: 1.5px solid var(--popup-control-border); border-radius: 999px; background: var(--popup-bg); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; } .header-auth-eye svg, .header-auth-eye img { width: 36px; height: 36px; display: block; } .header-auth-eye rect { fill: transparent; } .header-auth-eye path { fill: var(--popup-outline-soft); transition: fill 0.2s ease; } .header-auth-eye:hover path, .header-auth-eye:focus-visible path, .header-auth-eye.is-on path { fill: var(--color-ink); } .header-auth-eye:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.32); outline-offset: 1px; } .header-auth-error { margin: 0; color: var(--color-alert-red); font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 17px; } .header-auth-field > .header-auth-error { margin: 8px 0 0 10px; } .header-auth-row { display: flex; align-items: center; gap: 11px; } .header-auth-remember { width: 30px; height: 30px; border-radius: 999px; border: 1.5px solid var(--popup-control-border); background: var(--popup-bg); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .header-auth-remember-mark { width: 16px; height: 16px; border-radius: 999px; background: var(--popup-bg); opacity: 0; transform: scale(0.85); transition: opacity 0.15s ease, transform 0.15s ease; } .header-auth-remember.is-active { background: #232030; border-color: #232030; } .header-auth-remember.is-active .header-auth-remember-mark { opacity: 1; transform: scale(1); } .header-auth-remember-text { color: #232030; font-family: var(--font-display); font-size: 15px; font-weight: 600; cursor: pointer; user-select: none; transition: opacity 0.2s ease; } .header-auth-remember-text:hover, .header-auth-remember-text:focus-visible { opacity: 0.76; } .header-auth-remember-text:focus-visible { outline: none; } .header-auth-text-link, .header-auth-help-link { margin-left: auto; border: 0; padding: 0; background: transparent; color: var(--color-ink-muted); font-family: var(--font-display); font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer; } .header-auth-text-link:hover, .header-auth-help-link:hover, .header-auth-text-link:focus-visible, .header-auth-help-link:focus-visible { color: var(--color-forest); } .header-auth-help-link { margin: 0; text-align: center; width: 100%; } .header-auth-primary { width: 100%; height: 48px; border: 0; border-radius: 999px; appearance: none; -webkit-appearance: none; background: var(--color-forest); color: var(--color-cream); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; isolation: isolate; overflow: visible; user-select: none; -webkit-user-select: none; transition: none; } .header-auth-primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-forest); transform: scale(1); transform-origin: center; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; pointer-events: none; } .header-auth-primary:hover:not(:disabled):not(.is-disabled), .header-auth-primary:focus-visible:not(:disabled):not(.is-disabled) { background: var(--color-forest); box-shadow: none; transform: none; } .header-auth-primary:hover:not(:disabled):not(.is-disabled)::before, .header-auth-primary:focus-visible:not(:disabled):not(.is-disabled)::before { transform: scale(1.018); } .header-auth-primary:active:not(:disabled):not(.is-disabled) { transform: none; } .header-auth-primary:active:not(:disabled):not(.is-disabled)::before { transform: scale(1); } .header-auth-primary:focus-visible:not(:disabled):not(.is-disabled) { outline: 2px solid color-mix(in srgb, var(--color-forest) 32%, transparent); outline-offset: 2px; } .header-auth-primary.is-disabled, .header-auth-primary:disabled, .header-auth-primary[aria-disabled="true"] { background: var(--control-disabled-bg); color: var(--auth-disabled-text); appearance: none; -webkit-appearance: none; cursor: not-allowed !important; pointer-events: auto; transform: none; filter: none; box-shadow: none; outline: 0; transition: none; animation: none; } .header-auth-primary.is-disabled::before, .header-auth-primary:disabled::before, .header-auth-primary[aria-disabled="true"]::before { background: var(--control-disabled-bg); transform: none; transition: none; } .header-auth-primary.is-disabled *, .header-auth-primary:disabled *, .header-auth-primary[aria-disabled="true"] * { cursor: not-allowed !important; } .header-auth-primary.is-disabled > *, .header-auth-primary:disabled > *, .header-auth-primary[aria-disabled="true"] > * { pointer-events: none; } .header-auth-primary.is-disabled:hover, .header-auth-primary:disabled:hover, .header-auth-primary[aria-disabled="true"]:hover, .header-auth-primary.is-disabled:focus-visible, .header-auth-primary:disabled:focus-visible, .header-auth-primary[aria-disabled="true"]:focus-visible, .header-auth-primary.is-disabled:active, .header-auth-primary:disabled:active, .header-auth-primary[aria-disabled="true"]:active { background: var(--control-disabled-bg); color: var(--auth-disabled-text); cursor: not-allowed !important; pointer-events: auto; box-shadow: none; transform: none; outline: 0; } .header-auth-primary .header-auth-btn-text { position: relative; z-index: 1; color: inherit; font: inherit; letter-spacing: inherit; line-height: 1; white-space: nowrap; pointer-events: none; user-select: none; } .header-auth-divider { position: relative; height: 28px; margin: 2px 0; } .header-auth-divider::before { content: ""; position: absolute; left: -20px; right: -20px; top: 50%; height: 1px; background: var(--popup-border-strong); } .header-auth-divider span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--popup-bg); padding: 0 11px; color: var(--color-ink-muted); font-family: var(--font-body); font-size: 17px; font-weight: 500; } .header-auth-socials { display: flex; flex-direction: column; gap: 10px; } .header-auth-social { width: 100%; height: 48px; border-radius: 999px; border: 0; background: #EEE5DA; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #232030; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0; cursor: pointer; position: relative; transition: box-shadow 0.2s ease, background-color 0.2s ease; } .header-auth-social::before { content: none; } .header-auth-social:hover, .header-auth-social:focus-visible { background: #E1D1BC; box-shadow: 0 0 0 2px #E1D1BC; transform: none; } .header-auth-social:hover::before, .header-auth-social:focus-visible::before { content: none; } .header-auth-social:active { transform: none; } .header-auth-social:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.32); outline-offset: 2px; } .header-auth-social .header-auth-social-icon { position: static; width: 28px; height: 28px; display: block; } .header-auth-social-icon svg, .header-auth-social-icon img { width: 100%; height: 100%; display: block; } .header-auth-social .header-auth-btn-text { position: static; color: #232030; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 16px; white-space: nowrap; } .header-auth-social.is-loading .header-auth-btn-text, .header-auth-primary.is-loading .header-auth-btn-text { opacity: 0; } .header-auth-social.is-loading .header-auth-social-icon { opacity: 0; } .header-auth-inline-loader { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .header-auth-inline-spinner { --jp-spinner-size: 38px; --jp-spinner-stroke: 5px; } .header-auth-legal, .header-auth-note { margin: 0; text-align: center; color: var(--color-ink-muted); font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.4px; } .header-auth-inline-link { border: 0; background: transparent; margin: 0; padding: 0; color: #3f6a60; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0; text-decoration: underline; cursor: pointer; } .header-auth-inline-link:hover, .header-auth-inline-link:focus-visible { color: #244b43; } .header-auth-strength { display: flex; flex-direction: column; gap: 7px; } .header-auth-strength[hidden], .header-auth-password-hints[hidden] { display: none !important; } .header-auth-strength-bar { width: 417px; max-width: 100%; height: 8px; border-radius: 999px; background: var(--popup-disabled); overflow: hidden; } .header-auth-strength-fill { display: block; width: 0; height: 100%; border-radius: 999px; transition: width 0.2s ease, background-color 0.2s ease; } .header-auth-strength-label { color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 500; } .header-auth-password-hints { width: 100%; color: #232030; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.4px; display: flex; flex-direction: column; gap: 2px; } .header-auth-password-hints strong { font-weight: 700; } @media (max-width: 760px) { .header-auth-overlay { --header-auth-mobile-top: clamp(84px, 13dvh, 128px); align-items: flex-end !important; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + var(--header-auth-mobile-top)) 0 0; overflow: hidden; } .header-auth-shell { width: 100%; max-width: 100%; height: calc(100vh - (env(safe-area-inset-top, 0px) + var(--header-auth-mobile-top))); height: calc(100dvh - (env(safe-area-inset-top, 0px) + var(--header-auth-mobile-top))); display: flex; flex-direction: column; transform-origin: bottom center; } .header-auth-close { top: 8px; left: auto; right: 14px; bottom: auto; width: 44px; height: 44px; background: transparent; box-shadow: none; z-index: 4; } .header-auth-close:hover, .header-auth-close:focus-visible { background: var(--popup-hover); filter: none; } .header-auth-card { display: flex; flex-direction: column; gap: 0; width: 100%; height: 100%; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; } .header-auth-card::before { content: ""; display: block; position: sticky; top: 0; z-index: 1; flex: 0 0 44px; min-height: 44px; width: calc(100% + 32px); margin: 0 -16px 12px; border-radius: var(--popup-sheet-radius, 22px 22px 0 0); background: var(--popup-sheet-grip-pseudo-bg); cursor: grab; touch-action: none; user-select: none; } .header-auth-card-head { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding-right: 0; } .header-auth-title { flex: 0 0 100%; min-width: 0; font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .header-auth-subtitle { margin: 4px 0 12px; font-size: 14px; line-height: 18px; } .header-auth-switch { min-height: 44px; padding: 4px 16px; font-size: 13px; align-self: flex-start; } .header-auth-form { gap: 12px; } .header-auth-divider::before { left: 0; right: 0; } .header-auth-strength-bar { width: 100%; } } @media (max-width: 560px) { .header-auth-overlay { align-items: flex-end !important; padding: calc(env(safe-area-inset-top, 0px) + var(--header-auth-mobile-top, clamp(84px, 13dvh, 128px))) 0 0; } .header-auth-shell { width: 100%; max-width: 100%; height: calc(100vh - (env(safe-area-inset-top, 0px) + var(--header-auth-mobile-top, clamp(84px, 13dvh, 128px)))); height: calc(100dvh - (env(safe-area-inset-top, 0px) + var(--header-auth-mobile-top, clamp(84px, 13dvh, 128px)))); } .header-auth-close { top: 8px; left: auto; right: 14px; bottom: auto; width: 44px; height: 44px; background: transparent; } .header-auth-close:hover, .header-auth-close:focus-visible { background: var(--popup-hover); } .header-auth-card { height: 100%; max-height: none; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); } .header-auth-card::before { flex-basis: 44px; min-height: 44px; } .header-auth-switch { width: 100%; justify-content: center; } .header-auth-row { flex-wrap: wrap; gap: 10px 11px; } .header-auth-text-link { margin-left: 0; width: 100%; text-align: left; } .header-auth-primary .header-auth-btn-text, .header-auth-social .header-auth-btn-text { white-space: normal; text-align: center; } .header-auth-social { min-height: 48px; height: auto; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .header-auth-social .header-auth-social-icon, .header-auth-social .header-auth-btn-text { position: static; } .header-auth-social .header-auth-btn-text { line-height: 1; } } @media (max-width: 420px) { .header-auth-overlay { padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-auth-mobile-top, clamp(84px, 13dvh, 128px))); } .header-auth-title { font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .header-auth-input { padding: 0 16px; font-size: 12px; } .header-auth-input-wrap.has-eye .header-auth-input { padding-right: 16px; } .header-auth-label, .header-auth-remember-text, .header-auth-text-link, .header-auth-help-link, .header-auth-strength-label { font-size: 12px; } .header-auth-legal, .header-auth-note, .header-auth-inline-link, .header-auth-password-hints { font-size: 11px; line-height: 15px; } } @media (max-width: 640px) { .header-auth-eye { right: 1px; top: 1px; width: 44px; height: 44px; border-radius: 22px; } .header-auth-eye svg, .header-auth-eye img { width: 36px; height: 36px; } .header-auth-remember { width: 44px; height: 44px; flex: 0 0 44px; } .header-auth-remember-text, .header-auth-text-link, .header-auth-help-link { min-height: 44px; display: inline-flex; align-items: center; } .header-auth-help-link { justify-content: center; } .header-auth-inline-link { min-height: 44px; display: inline-flex; align-items: center; margin-top: -14px; margin-bottom: -14px; vertical-align: middle; } } .design-canvas [style*="font-family: Montserrat"] { font-family: var(--font-body); } .design-canvas [style*="font-family: Inter"] { font-family: var(--font-body); } .design-canvas [style*="font-family: Comfortaa"] { font-family: var(--font-body); } .design-canvas .ProffesionGifts, .design-canvas .FriendsGifts, .design-canvas .KidsRoomIdea, .design-canvas .ShirtSGiftsIdea { display: block !important; width: auto !important; right: 78px !important; min-height: 0 !important; height: auto !important; color: #FFF9F1 !important; font-size: 21px !important; font-family: var(--font-body); font-weight: 700 !important; line-height: 1.14 !important; overflow: visible !important; white-space: nowrap !important; text-overflow: clip !important; } .design-canvas .BirthdaysRetirementsAnniversaries, .design-canvas .SmallBirthdaysRetirementsAnniversaries { display: block !important; width: auto !important; right: 78px !important; min-height: 0 !important; height: auto !important; color: #FFF9F1 !important; font-size: 12px !important; font-family: var(--font-body); font-weight: 700 !important; line-height: normal !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; word-break: normal !important; overflow-wrap: break-word !important; text-align: left !important; } .design-canvas .BirthdaysRetirementsAnniversaries { left: 17px !important; top: auto !important; bottom: 17px !important; margin: 0 !important; padding: 0 !important; } .design-canvas .BirthdaysRetirementsAnniversaries br, .design-canvas .SmallBirthdaysRetirementsAnniversaries br { display: block !important; } .design-canvas .PrintReady { display: block !important; color: #232030 !important; font-size: 11px !important; font-family: var(--font-body); font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; } .design-canvas .IconParkSolidPlay { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 0; } .design-canvas .IconParkSolidPlay > svg { display: block; } .design-canvas .Frame1717, .design-canvas .Frame1718 { width: 72px !important; height: 54px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; gap: 0 !important; } .design-canvas .Frame1717 > .Vector, .design-canvas .Frame1718 > .Vector { display: flex !important; align-items: center !important; justify-content: center !important; width: 10px; height: 16px; } .design-canvas .Frame1717[data-property-1="Variant5"] { width: 72px !important; height: 54px !important; padding: 19px 21px !important; gap: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .design-canvas .Frame1717[data-property-1="Variant5"] > .Vector { width: 10px !important; height: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto; transform: rotate(-90deg); transform-origin: center; } .design-canvas .Frame1718[data-property-1="Variant5"] > .Vector { transform: rotate(90deg); transform-origin: center; } .design-canvas .Frame2407 { width: 141px !important; height: 14px !important; overflow: visible !important; } .design-canvas .Frame2407 > .Rectangle6 { left: 34px !important; top: 0 !important; } .design-canvas .Frame2407 > .Rectangle7 { left: 52px !important; top: 0 !important; } .design-canvas .Frame2407 > .Rectangle4 { top: 0 !important; z-index: 1; transition: left 0.28s ease; } .design-canvas .Frame2407 > .Rectangle5 { top: 50% !important; transform: translateY(-50%); z-index: 2; transition: left 0.28s ease; } .design-canvas .Frame2407 > .Rectangle4 > svg, .design-canvas .Frame2407 > .Rectangle5 > svg { display: block; } .design-canvas .hero-carousel-viewport { position: absolute; left: 0; top: 0; width: 1360px; height: 418px; overflow: hidden; } .design-canvas .hero-carousel-track { display: flex; width: 100%; height: 418px; will-change: transform; transition: transform 0.62s cubic-bezier(0.25, 0.1, 0.25, 1); } .design-canvas .hero-carousel-slide { position: relative; flex: 0 0 1360px; width: 1360px; height: 418px; } .design-canvas .hero-banner-text-card { color: #FFF9F1; display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; } .design-canvas .hero-banner-text-card.is-main { padding: 68px 58px; justify-content: flex-start; } .design-canvas .hero-banner-text-card.is-side { padding: 280px 22px 24px; justify-content: flex-start; } .design-canvas .hero-banner-text-title, .design-canvas .hero-banner-side-title { margin: 0; color: #FFF9F1; font-family: var(--font-body); font-weight: 800; line-height: 1.14; } .design-canvas .hero-banner-text-title { font-size: 42px; } .design-canvas .hero-banner-side-title { font-size: 26px; } .design-canvas .hero-banner-text-body, .design-canvas .hero-banner-side-body { margin: 16px 0 0; color: rgba(255, 249, 241, 0.92); font-family: var(--font-body); font-weight: 500; line-height: 1.4; } .design-canvas .hero-banner-text-body { max-width: 520px; font-size: 22px; } .design-canvas .hero-banner-side-body { font-size: 18px; } .design-canvas .CustomVisualGiftsPostersHandDrawnByJedipic { display: block !important; line-height: 1.2 !important; white-space: nowrap !important; } .design-canvas .JedipicIsACuratedStudioForCustomVisualProjectsPersonalPortraitsCaricaturesAndEventArtworkMadeFromYourPhotosPerfectForGiftsTeamPostersCoachAppreciationOfficeCelebrationsAndPrintReadyBanners { display: block !important; width: 1187px !important; white-space: normal !important; line-height: 28px !important; overflow: visible !important; } .design-canvas .JedipicIsACuratedStudioForCustomVisualProjectsPersonalPortraitsCaricaturesAndEventArtworkMadeFromYourPhotosPerfectForGiftsTeamPostersCoachAppreciationOfficeCelebrationsAndPrintReadyBanners br { display: none !important; } .design-canvas .JedipicIsACuratedStudioForCustomVisualProjectsPersonalPortraitsCaricaturesAndEventArtworkMadeFromYourPhotosPerfectForGiftsTeamPostersCoachAppreciationOfficeCelebrationsAndPrintReadyBanners > span { display: inline !important; white-space: normal !important; } .design-canvas .PersonalVisualGiftsBirthdaysAnniversariesGraduationsRetirements, .design-canvas .TeamsEventsFootballBasketballBaseballCheerCoachesStaffTributes, .design-canvas .PrintBannersHighResolutionFilesForLargeFormatPrinting, .design-canvas .OfficeCompanyGroupScenesWithFunDetailsAndBrandElements { display: block !important; white-space: nowrap !important; line-height: 28px !important; } .design-canvas .PersonalVisualGiftsBirthdaysAnniversariesGraduationsRetirements > span, .design-canvas .TeamsEventsFootballBasketballBaseballCheerCoachesStaffTributes > span, .design-canvas .PrintBannersHighResolutionFilesForLargeFormatPrinting > span, .design-canvas .OfficeCompanyGroupScenesWithFunDetailsAndBrandElements > span { display: inline !important; white-space: nowrap !important; } .design-canvas .Frame1729, .design-canvas .SectionHero, .design-canvas .FeaturedOffersRail { overflow: visible !important; } .design-canvas .Section .Frame1728 { top: 42px !important; } .design-canvas .Section-discounts, .design-canvas .Section-editors-picks { position: relative; overflow: visible !important; } .design-canvas .Section-discounts > .Vector { left: var(--fullbleed-left) !important; width: var(--fullbleed-width) !important; } .design-canvas .Section-discounts > .Vector > svg { display: block; width: 100% !important; height: 257px !important; } .design-canvas .Section-editors-picks .Group1440Ok1 { left: var(--fullbleed-left) !important; width: var(--fullbleed-width) !important; } .design-canvas .Section-editors-picks .Group1440Ok1 > .Vector { left: 0 !important; width: 100% !important; } .design-canvas .Section-editors-picks .Group1440Ok1 > .Vector > svg { display: block; width: 100% !important; height: 333px !important; } .design-canvas .Section-editors-picks .Frame1721 > .Link { background: rgba(255, 249, 241, 0.2) !important; } .design-canvas .Section-editors-picks .Frame1721 > .Link:hover { background: var(--popup-control-bg) !important; } .design-canvas [data-layer="Daily deals: for inspiration"] { display: block !important; white-space: nowrap !important; line-height: 1 !important; } .design-canvas [data-layer="Daily deals: for inspiration"] > span { display: inline !important; white-space: nowrap !important; } .design-canvas .HeroBannerCard, .design-canvas .HoverShadowCard { background: #e6f0ea !important; box-shadow: none !important; transition: box-shadow 0.2s ease; } .design-canvas .SectionHero [data-layer="for photo"], .design-canvas .SectionHero .HoverShadowCard { background: #e6f0ea !important; } .design-canvas .SectionHero [data-layer="for photo"], .design-canvas .SectionHero .HoverShadowCard { position: relative; isolation: isolate; } .design-canvas .SectionHero [data-layer="for photo"]::after, .design-canvas .SectionHero .HoverShadowCard::after { content: ""; position: absolute; inset: 0; background: rgba(230, 240, 234, 0.62); pointer-events: none; z-index: 1; } .design-canvas .SectionHero [data-layer="for photo"] > img, .design-canvas .SectionHero .HoverShadowCard > img { position: relative; z-index: 0; opacity: 0.72; } .design-canvas .SectionHero [data-layer="for photo"] > :not(img), .design-canvas .SectionHero .HoverShadowCard > :not(img) { position: relative; z-index: 2; } .design-canvas .HeroBannerCard:hover, .design-canvas .HoverShadowCard:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5) !important; } .design-canvas .hero-carousel-slide .HeroBannerCard:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5) !important; } .design-canvas .hero-carousel-slide .HeroBannerCard { box-shadow: none !important; transition: box-shadow 0.2s ease !important; } .design-canvas .hover-shadow-card, .design-canvas .product-hover-card, .design-canvas .discount-card { box-shadow: none !important; z-index: 1; transition: box-shadow 0.24s ease, transform 0.24s ease, background-color 0.24s ease; } .design-canvas .hover-shadow-card:hover, .design-canvas .product-hover-card:hover, .design-canvas .discount-card:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5) !important; transform: translateY(-1px); z-index: 10; } .design-canvas .discount-card { background: transparent !important; } .design-canvas .discount-card .PersonalPortrait, .design-canvas .discount-card .CoupleArtwork, .design-canvas .discount-card .FamilyKids, .design-canvas .discount-card .Pets, .design-canvas .discount-card .SportTeams, .design-canvas .discount-card .OfficeGroup { color: #232030 !important; transition: color 0.24s ease; } .design-canvas .Section-discounts .Frame2423 > .PersonalPortrait, .design-canvas .Section-discounts .Frame2424 > .CoupleArtwork, .design-canvas .Section-discounts .Frame2425 > .FamilyKids, .design-canvas .Section-discounts .Frame2426 > .Pets, .design-canvas .Section-discounts .Frame2427 > .SportTeams, .design-canvas .Section-discounts .Frame2428 > .OfficeGroup { left: 0 !important; width: 100% !important; text-align: center !important; } .design-canvas .discount-card:hover { background: #3f6a60 !important; } .design-canvas .discount-card:hover .PersonalPortrait, .design-canvas .discount-card:hover .CoupleArtwork, .design-canvas .discount-card:hover .FamilyKids, .design-canvas .discount-card:hover .Pets, .design-canvas .discount-card:hover .SportTeams, .design-canvas .discount-card:hover .OfficeGroup { color: #FFF9F1 !important; } .design-canvas .Section-discounts .Frame2424 { width: 227px !important; } .design-canvas .Section-discounts .Frame2424 > img { width: 217px !important; } .design-canvas .zoom-in-card .Frame2429 { overflow: hidden !important; border-radius: 20px; } .design-canvas .zoom-in-card { cursor: pointer; } .design-canvas .zoom-in-card .Frame2429 img { transition: transform 0.35s ease; transform-origin: center center; } .design-canvas .zoom-in-card:hover .Frame2429 img { transform: scale(1.06); } .design-canvas .product-hover-card { position: relative; } .design-canvas .product-hover-card .favorite-button { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--popup-control-bg) !important; outline: 1px var(--popup-outline) solid !important; outline-offset: -1px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important; opacity: 0; transform: translateY(-6px) scale(0.92); pointer-events: none; cursor: pointer; transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; z-index: 5; } .design-canvas .product-hover-card:hover .favorite-button, .design-canvas .product-hover-card .favorite-button:focus-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .design-canvas .product-hover-card .favorite-button:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5), 0 6px 18px rgba(0, 0, 0, 0.08) !important; } .design-canvas .product-hover-card .favorite-button svg { width: 20px; height: 20px; display: block; } .design-canvas .product-hover-card .favorite-button path { fill: transparent; stroke: #232030; stroke-width: 1.66667; stroke-linecap: round; stroke-linejoin: round; transition: fill 0.22s ease, stroke 0.22s ease; } .design-canvas .product-hover-card .favorite-button.is-liked path { fill: #b91515; stroke: #b91515; } .favorite-toast { position: fixed; left: 50%; bottom: 24px; width: min(656px, calc(100vw - 40px)); min-height: 77px; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 13px 19px 13px 14px; color: #FFF9F1; background: #3F6A60; outline: 1px #2d4f48 solid; outline-offset: -1px; border-radius: 24px; box-shadow: 0 24px 56px rgba(8, 28, 16, 0.36), 0 4px 16px rgba(0, 0, 0, 0.18); transform: translate(-50%, 20px) scale(0.94); opacity: 0; filter: blur(4px); pointer-events: auto; z-index: 11000; transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.34s ease; } .favorite-toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); } .favorite-toast:not(.is-authenticated):not(.is-remove) { width: min(482px, calc(100vw - 40px)); min-height: 77px; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 12px 16px 12px 12px; } .favorite-toast:not(.is-authenticated):not(.is-remove) .favorite-toast__icon { width: 52px; height: 52px; flex-basis: 52px; align-self: center; margin-top: 0; } .favorite-toast:not(.is-authenticated):not(.is-remove) .favorite-toast__content { align-self: center; padding-top: 2px; gap: 4px; } .favorite-toast:not(.is-authenticated):not(.is-remove) .favorite-toast__title { font-size: 15px; line-height: 1.2; } .favorite-toast:not(.is-authenticated):not(.is-remove) .favorite-toast__subtitle { font-size: 13px; line-height: 1.28; } .favorite-toast__icon { width: 52px; height: 52px; grid-column: 1; align-self: center; flex: 0 0 52px; position: relative; overflow: visible; } .favorite-toast__icon svg { width: 100%; height: 100%; display: block; } .favorite-toast__media-frame { width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 15px; background: rgba(255, 249, 241, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 249, 241, 0.4); } .favorite-toast__media-img { width: 100%; height: 100%; display: block; object-fit: cover; } .favorite-toast__media-badge { position: absolute; right: -5px; bottom: -5px; width: 24px; height: 24px; border-radius: 999px; background: #FFF9F1; box-shadow: 0 6px 14px rgba(35, 32, 48, 0.22); display: inline-flex; align-items: center; justify-content: center; } .favorite-toast__media-badge svg { width: 18px; height: 18px; } .favorite-toast__content { grid-column: 2; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .favorite-toast__title { color: #FFF9F1; font-size: 16px; font-family: var(--font-body); font-weight: 500; line-height: 1.18; } .favorite-toast__title strong { font-weight: 700; } .favorite-toast__meta { display: flex; align-items: flex-start; gap: 5px; min-height: 18px; } .favorite-toast__meta-icon { width: 18px; height: 18px; flex: 0 0 18px; display: none; margin-top: 1px; } .favorite-toast__meta-icon svg { width: 100%; height: 100%; display: block; } .favorite-toast__subtitle { max-width: 100%; color: #FFF9F1; font-size: 14px; font-family: var(--font-body); font-weight: 400; line-height: 1.22; } .favorite-toast__link { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .favorite-toast__action { min-height: 53px; padding: 4px 18px; border: 0; border-radius: 999px; background: #3F6A60; outline: 3px solid #FFF9F1; outline-offset: -3px; display: inline-flex; align-items: center; justify-content: center; color: #FFF9F1; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: transform 0.22s ease, background-color 0.22s ease, filter 0.22s ease; } .favorite-toast__action:hover, .favorite-toast__action:focus-visible { background: var(--color-forest-dark); filter: brightness(1.03); transform: translateY(-1px); } .favorite-toast__action:focus-visible { outline-color: rgba(255, 249, 241, 0.88); } .favorite-toast.is-authenticated { width: min(453px, calc(100vw - 40px)); min-height: 58px; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 8px 16px 8px 10px; } .favorite-toast.is-authenticated .favorite-toast__icon { width: 48px; height: 48px; flex-basis: 48px; align-self: center; margin-top: 0; } .favorite-toast.is-authenticated .favorite-toast__media-frame { border-radius: 14px; } .favorite-toast.is-authenticated .favorite-toast__content { align-self: center; padding-top: 1px; gap: 1px; } .favorite-toast.is-authenticated .favorite-toast__title { font-size: 15px; font-weight: 500; } .favorite-toast.is-authenticated .favorite-toast__subtitle { font-size: 13px; line-height: 1.2; } .favorite-toast.is-authenticated .favorite-toast__meta-icon { display: inline-flex; } .favorite-toast.is-authenticated .favorite-toast__action { grid-column: 3; align-self: center; justify-self: end; } .favorite-toast__action[hidden] { display: none !important; } .favorite-toast.is-remove { width: min(360px, calc(100vw - 40px)); min-height: 76px; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 0; padding: 14px 24px; background: var(--color-forest); outline: 1px solid var(--color-forest-dark); outline-offset: -1px; border-radius: 24px; box-shadow: 0 14px 34px rgba(8, 28, 16, 0.3), 0 3px 10px rgba(0, 0, 0, 0.14); } .favorite-toast.is-remove .favorite-toast__meta, .favorite-toast.is-remove .favorite-toast__action { display: none; } .favorite-toast.is-remove .favorite-toast__icon { display: none; } .favorite-toast.is-remove .favorite-toast__content { grid-column: 1; display: flex; align-self: center; justify-content: center; gap: 0; min-width: 0; padding: 0; } .favorite-toast.is-remove .favorite-toast__title { font-size: 15px; font-weight: 600; white-space: normal; text-align: center; line-height: 1.2; } body.collection-modal-open { overflow: hidden; } @keyframes collection-modal-pop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes collection-toggle-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } } @media (max-width: 860px) { .favorite-toast.is-authenticated { width: calc(100vw - 24px); grid-template-columns: 48px minmax(0, 1fr); row-gap: 8px; padding: 10px 12px; } .favorite-toast.is-authenticated .favorite-toast__action { grid-column: 1 / -1; width: 100%; justify-self: stretch; } } @media (max-width: 640px) { .favorite-toast { bottom: 16px; width: calc(100vw - 24px); min-height: auto; grid-template-columns: 48px minmax(0, 1fr); row-gap: 8px; padding: 12px; align-items: flex-start; } .favorite-toast__icon { width: 48px; height: 48px; flex-basis: 48px; } .favorite-toast__content { padding-top: 1px; gap: 4px; } .favorite-toast__title { font-size: 15px; } .favorite-toast__subtitle { font-size: 13px; } .favorite-toast__action { grid-column: 1 / -1; width: 100%; min-height: 44px; margin-top: 2px; font-size: 14px; } .favorite-toast.is-remove { width: min(360px, calc(100vw - 24px)); min-height: 76px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 14px 20px; } .favorite-toast.is-remove .favorite-toast__icon { width: 48px; height: 48px; flex-basis: 48px; } .collection-modal-overlay { padding: 18px 12px; } .collection-modal-shell { max-width: calc(100vw - 24px); } .collection-modal__close { top: 14px; left: auto; right: 14px; width: 57px; height: 42px; background: var(--popup-bg); } .collection-modal__close::before, .collection-modal__close::after { background: var(--popup-outline); } .collection-modal__close:hover, .collection-modal__close:focus-visible { background: var(--popup-hover); filter: none; } .collection-modal { padding: 28px 16px 16px; } .collection-modal__title { padding-right: 40px; font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .collection-modal__privacy { flex-direction: column; gap: 18px; } .collection-modal__footer { flex-direction: column-reverse; gap: 12px; } .collection-modal__cancel, .collection-modal__create { width: 100%; min-width: 0; justify-content: center; } } .design-canvas .product-hover-card:hover .Price > :first-child, .design-canvas .product-hover-card:hover .Button > :first-child { color: #3F6A60 !important; } .design-canvas .Section[style*="top: 2255px"] .Frame1851 .Frame2441, .design-canvas .Section[style*="top: 2255px"] .Frame1859 > .Button, .design-canvas .Section[style*="top: 2255px"] .Frame1860 > .Button, .design-canvas .Section[style*="top: 2255px"] .Frame1861 > .Button, .design-canvas .Section[style*="top: 2255px"] .Frame1862 > .Button { white-space: nowrap !important; } .design-canvas .Section[style*="top: 2255px"] .Frame1859 > .Frame2513, .design-canvas .Section[style*="top: 2255px"] .Frame1860 > .Frame2513, .design-canvas .Section[style*="top: 2255px"] .Frame1861 > .Frame2513, .design-canvas .Section[style*="top: 2255px"] .Frame1862 > .Frame2513 { left: 6px !important; top: auto !important; bottom: 6px !important; } .design-canvas .Section[style*="top: 2255px"] .Frame1851 .Frame2441 > div, .design-canvas .Section[style*="top: 2255px"] .Frame1859 > .Button > div, .design-canvas .Section[style*="top: 2255px"] .Frame1860 > .Button > div, .design-canvas .Section[style*="top: 2255px"] .Frame1861 > .Button > div, .design-canvas .Section[style*="top: 2255px"] .Frame1862 > .Button > div { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; line-height: 1 !important; } .design-canvas .Section[style*="top: 2255px"] .Frame1851 .Frame2441 > div:first-child, .design-canvas .Section[style*="top: 2255px"] .Frame1859 > .Button > div:first-child, .design-canvas .Section[style*="top: 2255px"] .Frame1860 > .Button > div:first-child, .design-canvas .Section[style*="top: 2255px"] .Frame1861 > .Button > div:first-child, .design-canvas .Section[style*="top: 2255px"] .Frame1862 > .Button > div:first-child { transition: color 0.22s ease; } .design-canvas .Section[style*="top: 2255px"] .product-hover-card:hover .Frame2441 > div:first-child, .design-canvas .Section[style*="top: 2255px"] .product-hover-card:hover > .Button > div:first-child { color: #3F6A60 !important; } .design-canvas .Section[style*="top: 2255px"] .Frame2528 { cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .design-canvas .Section[style*="top: 2255px"] .Frame2528:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5) !important; transform: translateY(-1px); } .design-canvas .Section[style*="top: 2255px"] .Frame2528:active { transform: translateY(0); } .design-canvas .Section[style*="top: 4150px"] .Frame2528 { cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .design-canvas .Section[style*="top: 4150px"] .Frame2528:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5) !important; transform: translateY(-1px); } .design-canvas .Section[style*="top: 4150px"] .Frame2528:active { transform: translateY(0); } .design-canvas .Section[style*="top: 4150px"] .Frame1725 > .Link, .design-canvas .Section[style*="top: 4150px"] .Frame2547 > .Link { cursor: pointer; transition: box-shadow 0.24s ease, transform 0.24s ease; } .design-canvas .Section[style*="top: 4150px"] .Frame1725 > .Link:hover, .design-canvas .Section[style*="top: 4150px"] .Frame2547 > .Link:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5) !important; transform: translateY(-1px); z-index: 10; } .design-canvas .Section[style*="top: 2255px"] .ButtonMore { opacity: 0.6; transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .design-canvas .Section[style*="top: 2255px"] .ButtonMore:hover { opacity: 1; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important; transform: translateY(-1px); } .design-canvas .Section[style*="top: 2255px"] .ButtonMore.is-open { opacity: 1; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important; } .design-canvas .Section[style*="top: 2255px"] .ButtonMore:active { transform: translateY(0); } .design-canvas .Frame2413 > img, .design-canvas .Frame2414 > img, .design-canvas .Frame2415 > img, .design-canvas .Frame2416 > img, .design-canvas .Frame2417 > img { width: 258px !important; height: 258px !important; left: 7px !important; top: 7px !important; } .design-canvas .Frame2409 > div, .design-canvas .Frame2410 > div, .design-canvas .Frame2411 > div, .design-canvas .Frame2412 > div, .design-canvas .Frame2413 > div, .design-canvas .Frame2414 > div, .design-canvas .Frame2415 > div, .design-canvas .Frame2416 > div, .design-canvas .Frame2417 > div, .design-canvas .Frame2418 > div, .design-canvas .Frame2419 > div, .design-canvas .Frame2420 > div, .design-canvas .Frame2421 > div, .design-canvas .Frame2422 > div, .design-canvas .Frame2423[style*="top: 3148px"] > div { left: 0 !important; width: 100% !important; text-align: center !important; } .design-canvas .Section-editors-picks .Frame1721 > .Link > div:not(.Frame2) { left: 0 !important; width: 100% !important; text-align: center !important; } .design-canvas .FeaturedOffersRail .product-hover-card > div[style*="top: 264px"] { color: #D6CFB8 !important; transition: color 0.24s ease; } .design-canvas .FeaturedOffersRail .product-hover-card .Price > div { color: #D6CFB8 !important; transition: color 0.24s ease; } .design-canvas .Section-recently-viewed .Frame2582 { width: 250px !important; left: 5px !important; top: 260px !important; gap: 2px !important; } .design-canvas .FeaturedOffersRail .product-hover-card:hover > div[style*="top: 264px"] { color: #232030 !important; } .design-canvas .FeaturedOffersRail .product-hover-card:hover .Price > :first-child { color: #3F6A60 !important; } .design-canvas .FeaturedOffersRail .featured-store-pill { cursor: pointer; } .design-canvas .interactive-pill, .design-canvas .arrow-hover-control { transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; cursor: pointer; } .design-canvas .interactive-pill:hover, .design-canvas .arrow-hover-control:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5) !important; transform: translateY(-1px); } .design-canvas .interactive-pill:active, .design-canvas .arrow-hover-control:active { transform: translateY(0); } .design-canvas .arrow-hover-control:hover { background: var(--popup-control-bg) !important; } .design-canvas .rail-arrow-control { background: #EFE7D5 !important; } .design-canvas .rail-arrow-control .Vector path { fill: #232030 !important; } .design-canvas .Section-recently-viewed .rail-arrow-control { background: #232030 !important; } .design-canvas .Section-recently-viewed .rail-arrow-control .Vector path { fill: #FFF9F1 !important; } .design-canvas .Section-recently-viewed { overflow: hidden !important; } .design-canvas .Section-recently-viewed .recently-viewed-viewport { position: absolute; left: 40px; top: 0; width: 1360px; height: 100%; overflow: hidden; } .design-canvas .Section-recently-viewed .Heading2FeaturedOffers { width: auto !important; max-width: none !important; white-space: nowrap !important; top: 23px !important; font-size: 26px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 33px !important; } .design-canvas .Section-recently-viewed .Frame1738 { z-index: 1; } .design-canvas .Section-recently-viewed > .Gradient { pointer-events: none; z-index: 3; } .design-canvas .Section-recently-viewed .Frame1719, .design-canvas .Section-recently-viewed .Frame1739 { z-index: 4; } .design-canvas .Section-recently-viewed .Frame1719 { width: 72px !important; height: 54px !important; left: 1415px !important; top: 209px !important; padding-left: 21px !important; padding-right: 21px !important; padding-top: 19px !important; padding-bottom: 19px !important; transform: rotate(90deg) !important; transform-origin: top left !important; } .design-canvas .Section-recently-viewed .Frame1739 { width: 72px !important; height: 54px !important; left: 25px !important; top: 282px !important; padding-left: 21px !important; padding-right: 21px !important; padding-top: 19px !important; padding-bottom: 19px !important; transform: rotate(-90deg) !important; transform-origin: top left !important; } .design-canvas .Section-recently-viewed .Frame1719 .Vector, .design-canvas .Section-recently-viewed .Frame1739 .Vector { width: 10px; height: 16px; display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%; } .design-canvas .Section-recently-viewed .Frame1719 .Vector { transform: rotate(-90deg); } .design-canvas .Section-recently-viewed .Frame1739 .Vector { transform: rotate(90deg); } .design-canvas .Section-recently-viewed .Frame1719 .Vector svg, .design-canvas .Section-recently-viewed .Frame1739 .Vector svg { width: 10px; height: 16px; display: block; } .design-canvas .Section-recently-viewed .ButtonMore { opacity: 1; transition: box-shadow 0.2s ease, transform 0.2s ease; } .design-canvas .Section-recently-viewed .ButtonMore:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important; transform: translateY(-1px); } .design-canvas .Section-recently-viewed .ButtonMore:active { transform: translateY(0); } .design-canvas .Section-recently-viewed .product-hover-card:hover { transform: none !important; } .design-canvas .rail-arrow-control.is-disabled { opacity: 1 !important; pointer-events: none !important; background: #EFE7D5 !important; box-shadow: none !important; transform: none !important; } .design-canvas .rail-arrow-control.is-disabled .Vector path { fill: #D6CFB8 !important; } .design-canvas .rail-arrow-control.is-hidden { display: none !important; } .design-canvas .rail-arrow-control:hover:not(.is-disabled) { background: var(--popup-control-bg) !important; } .design-canvas .Section-recently-viewed .rail-arrow-control:hover:not(.is-disabled) .Vector path { fill: #232030 !important; } .design-canvas .Section-recently-viewed .arrow-hover-control { transition: background-color 0.2s ease, opacity 0.2s ease !important; } .design-canvas .Section-recently-viewed .rail-arrow-control:hover:not(.is-disabled), .design-canvas .Section-recently-viewed .rail-arrow-control.is-disabled { background: #232030 !important; box-shadow: 0 0 4px rgba(35, 32, 48, 0.5) !important; } .design-canvas .Section-recently-viewed .rail-arrow-control.is-disabled { opacity: 0.35 !important; } .design-canvas .Section-recently-viewed .rail-arrow-control:hover:not(.is-disabled) .Vector path, .design-canvas .Section-recently-viewed .rail-arrow-control.is-disabled .Vector path { fill: #FFF9F1 !important; } .design-canvas .arrow-hover-control.is-disabled { opacity: 0.45; pointer-events: none; box-shadow: none !important; transform: none !important; } .design-canvas .Section-recently-viewed .Frame1719.arrow-hover-control:hover, .design-canvas .Section-recently-viewed .Frame1719.arrow-hover-control:active, .design-canvas .Section-recently-viewed .Frame1719.arrow-hover-control.is-disabled { transform: rotate(90deg) !important; } .design-canvas .Section-recently-viewed .Frame1739.arrow-hover-control:hover, .design-canvas .Section-recently-viewed .Frame1739.arrow-hover-control:active, .design-canvas .Section-recently-viewed .Frame1739.arrow-hover-control.is-disabled { transform: rotate(-90deg) !important; } .design-canvas .collapsible-about { transition: height 0.34s ease; } .design-canvas .collapsible-about .BackgroundBorderShadow { overflow: hidden; transition: height 0.34s ease; } .design-canvas .collapsible-about .BackgroundBorderShadow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 78px; background: linear-gradient(180deg, rgba(255, 249, 241, 0) 0%, #FFF9F1 45%); opacity: 0; pointer-events: none; transition: opacity 0.24s ease; } .design-canvas .collapsible-about > .collapse-toggle { transition: top 0.34s ease, left 0.34s ease, box-shadow 0.2s ease, transform 0.2s ease; display: inline-flex !important; align-items: center !important; gap: 0 !important; } .design-canvas .collapsible-about > .collapse-toggle::after { content: none; } .design-canvas .collapsible-about.is-collapsed { height: 252px !important; } .design-canvas .collapsible-about.is-collapsed .BackgroundBorderShadow { height: 200px !important; } .design-canvas .collapsible-about.is-collapsed .BackgroundBorderShadow::after { opacity: 1; } .design-canvas .collapsible-about.is-collapsed .PrintBannersHighResolutionFilesForLargeFormatPrinting, .design-canvas .collapsible-about.is-collapsed .OfficeCompanyGroupScenesWithFunDetailsAndBrandElements, .design-canvas .collapsible-about.is-collapsed .UploadYourPhotosAndTellUsTheStoryWeLlTurnItIntoArtworkPeopleActuallyRemember { display: none !important; } .design-canvas .collapsible-about.is-collapsed > .collapse-toggle { left: 579.5px !important; top: 202px !important; } .design-canvas .collapsible-about.is-collapsed > .collapse-toggle::after { content: none; } .design-canvas .special-gifts-card { --special-gifts-rgb: 206, 222, 240; background: rgba(var(--special-gifts-rgb), 0.42) !important; outline: none !important; border: none !important; box-shadow: none !important; transition: background 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease; } .design-canvas .special-gifts-card > img, .design-canvas .special-gifts-card > .Frame2442 { width: 98px !important; height: 98px !important; left: 5px !important; top: 5px !important; bottom: 5px !important; border-radius: 17px !important; object-fit: cover !important; } .design-canvas .special-gifts-card > div:not(.Frame2442) { left: 113px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; display: flex !important; align-items: center !important; } .design-canvas [data-layer="Explore the most-loved categories"][style*="top: 3099px"] { left: 41px !important; } .design-canvas .Frame2419[style*="top: 3148px"] { width: 227px !important; left: 948px !important; } .design-canvas .Frame2421[style*="top: 3148px"] { left: 494px !important; } .design-canvas .Frame2422[style*="top: 3148px"] { width: 227px !important; } .design-canvas .Frame2418[style*="top: 3148px"] { left: 1175px !important; } .design-canvas .Frame2418[style*="top: 3148px"]:not(:hover) { box-shadow: none !important; } .design-canvas .Frame2418[style*="top: 3148px"] > img, .design-canvas .Frame2419[style*="top: 3148px"] > img, .design-canvas .Frame2420[style*="top: 3148px"] > img, .design-canvas .Frame2421[style*="top: 3148px"] > img, .design-canvas .Frame2422[style*="top: 3148px"] > img, .design-canvas .Frame2423[style*="top: 3148px"] > img { width: 213px !important; height: 231px !important; } .design-canvas .Frame2418[style*="top: 3148px"] > div, .design-canvas .Frame2419[style*="top: 3148px"] > div, .design-canvas .Frame2420[style*="top: 3148px"] > div, .design-canvas .Frame2421[style*="top: 3148px"] > div, .design-canvas .Frame2422[style*="top: 3148px"] > div, .design-canvas .Frame2423[style*="top: 3148px"] > div { left: 0 !important; width: 100% !important; text-align: center !important; } .design-canvas .Section-gifts-liked :is(.Frame2433, .Frame2434, .Frame2435, .Frame2436, .Frame2437, .Frame2438, .Frame2439, .Frame2440) { cursor: pointer; } .design-canvas .Section-gifts-liked :is(.Frame2433, .Frame2434, .Frame2435, .Frame2436, .Frame2437, .Frame2438, .Frame2439, .Frame2440) .Frame2429 { transition: filter 0.24s ease; } .design-canvas .Section-gifts-liked :is(.Frame2433, .Frame2434, .Frame2435, .Frame2436, .Frame2437, .Frame2438, .Frame2439, .Frame2440):hover .Frame2429 { filter: brightness(1.01); } .design-canvas .Section-gifts-liked :is(.Frame2433, .Frame2434, .Frame2435, .Frame2436, .Frame2437, .Frame2438, .Frame2439, .Frame2440) .Frame2429 img { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; object-fit: cover !important; transition: transform 0.24s ease; } .design-canvas .Section-gifts-liked :is(.Frame2433, .Frame2434, .Frame2435, .Frame2436, .Frame2437, .Frame2438, .Frame2439, .Frame2440):hover .Frame2429 img { transform: scale(1.03); } .design-canvas .Section-gifts-liked :is(.Frame2433, .Frame2434, .Frame2435, .Frame2436, .Frame2437, .Frame2438, .Frame2439, .Frame2440) > .Button { cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .design-canvas .Section-gifts-liked :is(.Frame2433, .Frame2434, .Frame2435, .Frame2436, .Frame2437, .Frame2438, .Frame2439, .Frame2440) > .Button:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5) !important; transform: translateY(-1px); } .design-canvas .Section-gifts-liked :is(.Frame2433, .Frame2434, .Frame2435, .Frame2436, .Frame2437, .Frame2438, .Frame2439, .Frame2440) > .Button:active { transform: translateY(0); } .collection-modal__giftroom, .collection-modal__giftroom-row, .collection-modal__giftroom-invite { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 0; } .collection-modal__giftroom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .collection-modal__giftroom[hidden], .collection-modal__giftroom-row[hidden], .collection-modal__giftroom-invite[hidden], .collection-modal__sections[hidden], .collection-modal__subtitle[hidden] { display: none !important; } .collection-modal__subtitle { margin: 4px 0 14px; color: var(--color-ink-soft, #4A465D); font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 14px; line-height: 1.45; } .collection-modal .gift-room-field { display: flex; flex-direction: column; gap: 7px; } .collection-modal .gift-room-field:has(.gift-room-field__input), .collection-modal .gift-room-field:has(.gift-room-field__textarea) { position: relative; gap: 0; padding-top: 8px; } .collection-modal .gift-room-field__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft); } .collection-modal .gift-room-field:has(.gift-room-field__input) .gift-room-field__label, .collection-modal .gift-room-field:has(.gift-room-field__textarea) .gift-room-field__label { position: absolute; top: 2px; left: 22px; z-index: 3; border-radius: 999px; background: var(--popup-bg, var(--color-cream)); padding: 0 6px; pointer-events: none; } .collection-modal .gift-room-field__input { padding: 11px 14px; background: var(--color-sand); border: 1px solid var(--color-line); border-radius: 999px; font-family: inherit; font-size: 0.94rem; color: var(--color-ink); transition: background .2s, border-color .2s; width: 100%; appearance: none; -webkit-appearance: none; } .collection-modal .gift-room-field__input:focus { outline: none; background: var(--color-cream); border-color: var(--color-forest); } .collection-modal .gift-room-field__textarea { padding: 11px 14px; background: var(--color-sand); border: 1px solid var(--color-line); border-radius: 28px; font-family: inherit; font-size: 0.94rem; color: var(--color-ink); resize: vertical; min-height: 70px; transition: background .2s, border-color .2s; width: 100%; } .collection-modal .gift-room-field__textarea:focus { outline: none; background: var(--color-cream); border-color: var(--color-forest); } .collection-modal .gift-room-field__hint { font-size: 0.78rem; color: var(--color-ink-soft); margin: 0; } .collection-modal .gift-room-typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .collection-modal .gift-room-typegrid__chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 14px; cursor: pointer; color: var(--color-ink-soft); font-family: inherit; font-size: 0.78rem; transition: background .2s, border-color .2s, color .2s, transform .2s; } .collection-modal .gift-room-typegrid__chip:hover { border-color: var(--color-ink); color: var(--color-ink); } .collection-modal .gift-room-typegrid__chip.is-selected { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-cream); } .collection-modal .gift-room-typegrid__chip-icon { width: 22px; height: 22px; } .collection-modal .gift-room-typegrid__chip-label { font-weight: 500; } .collection-modal .gift-room-stepper { display: flex; align-items: center; gap: 6px; } .collection-modal .gift-room-stepper__btn { width: 38px; height: 38px; flex-shrink: 0; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 12px; font-family: inherit; font-size: 1.1rem; color: var(--color-ink); cursor: pointer; transition: background .2s, border-color .2s; } .collection-modal .gift-room-stepper__btn:hover { background: var(--color-sand); border-color: var(--color-ink); } .collection-modal .gift-room-stepper__input { text-align: center; } @media (max-width: 560px) { .collection-modal__giftroom-row { grid-template-columns: 1fr; } .collection-modal .gift-room-typegrid { grid-template-columns: repeat(2, 1fr); } } .collection-modal-overlay { position: fixed; inset: 0; background: var(--popup-overlay); z-index: var(--z-modal-front, 13000); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; overflow-y: auto; } .collection-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .collection-modal-overlay[hidden] { display: none !important; } .collection-modal-shell { position: relative; width: 100%; max-width: 578px; margin: auto 0; } .collection-modal { background: var(--popup-bg); border-radius: 30px; padding: 20px 20px 24px; box-shadow: var(--popup-shadow); display: flex; flex-direction: column; gap: 18px; font-family: var(--font-body, system-ui), system-ui, sans-serif; color: #232030; } .collection-modal:focus { outline: 0; } .collection-modal__close { position: absolute; top: 0; left: calc(100% + var(--popup-close-offset, 10px)); right: auto; width: var(--popup-close-width, 78px); height: var(--popup-close-height, 55px); border: 0; border-radius: 999px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; } .collection-modal__close::before, .collection-modal__close::after { content: none; } .collection-modal__close:hover, .collection-modal__close:focus-visible { background: var(--popup-close-hover-bg, var(--sort-control-bg)); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: var(--popup-close-hover-filter); } .collection-modal__close-icon { width: var(--popup-close-icon-size, 17px); height: var(--popup-close-icon-size, 17px); display: block; } .collection-modal__title { margin: 0; padding: 0; text-align: left; font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); color: var(--color-ink); } .collection-modal__subtitle { margin: -6px 0 0; padding: 0; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.45; color: #232030; } .collection-modal__guest { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: #EEE5DA; border-radius: 20px; } .collection-modal__guest[hidden] { display: none !important; } .collection-modal__guest-copy { flex: 1 1 auto; min-width: 0; } .collection-modal__guest-title { font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 14px; font-weight: 600; color: #222031; margin-bottom: 4px; } .collection-modal__guest-text { font-size: 11px; font-weight: 500; line-height: 1.4; color: #222031; } .collection-modal__guest-action { flex-shrink: 0; height: 42px; padding: 0 22px; background: #222031; color: #FAF1EA; border: 0; border-radius: 999px; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } .collection-modal__field { position: relative; display: flex; flex-direction: column; gap: 0; padding-top: 8px; } .collection-modal__field--date { position: relative; } .collection-modal__field-head { position: absolute; top: 2px; left: 22px; right: 22px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; } .collection-modal__label { border-radius: 999px; background: var(--collection-modal-label-bg, var(--collection-modal-field-bg, var(--popup-bg))); padding: 0 6px; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; color: #232030; } .collection-modal__field > .collection-modal__label { position: absolute; top: 2px; left: 22px; z-index: 3; display: inline-flex; align-items: center; pointer-events: none; } .collection-modal__field--budget > .collection-modal__label { left: 78px; } .collection-modal__field--type { padding-top: 0; gap: 8px; } .collection-modal__field.collection-modal__field--type > .collection-modal__label, .collection-modal__label--section { position: static; left: auto; top: auto; z-index: auto; display: inline-flex; align-self: flex-start; margin: 0; padding: 0; border-radius: 0; background: transparent; pointer-events: auto; } .collection-modal__field--type .collection-modal__typegrid { margin-top: 0; } .collection-modal__field.is-error .collection-modal__label, .collection-modal__field--date.is-date-invalid > .collection-modal__label { color: var(--color-alert-red); } .collection-modal__counter { border-radius: 999px; background: var(--collection-modal-label-bg, var(--collection-modal-field-bg, var(--popup-bg))); padding: 0 6px; font-size: 13px; font-weight: 600; color: #232030; } .collection-modal__typegrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-top: 4px; } .collection-modal__type-chip { height: 81px; padding: 6px 4px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #232030; font-family: var(--font-body, system-ui), system-ui, sans-serif; transition: background-color .18s ease, box-shadow .18s ease, color .18s ease; } .collection-modal__type-chip:hover { box-shadow: var(--shadow-card-hover); } .collection-modal__type-chip.is-selected { background: transparent; color: #3F6A60; } .collection-modal__type-chip-icon { width: 34px; height: 34px; display: block; pointer-events: none; } .collection-modal__type-chip-label { font-size: 11px; font-weight: 600; line-height: 1.1; pointer-events: none; } .collection-modal__input-shell { position: relative; height: 52px; background: var(--collection-modal-field-bg, var(--popup-bg)); border-radius: 999px; border: 1.5px solid var(--color-forest); box-shadow: inset 0 1px 2px rgba(35, 32, 48, 0.05); transition: border-color .18s ease, box-shadow .18s ease; } .collection-modal__input-shell:focus-within { border-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .collection-modal__input-shell.is-error { border-color: var(--color-alert-red); background: var(--collection-modal-field-bg, var(--popup-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-alert-red) 11%, transparent); outline-color: transparent; } .collection-modal__input { width: 100%; height: 100%; border: 0; background: transparent; outline: 0; padding: 0 25px; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 13px; font-weight: 500; color: #232030; -webkit-text-fill-color: #232030; } .collection-modal__input::placeholder { color: #232030; opacity: 0.55; } .collection-modal__error { margin: 8px 0 0 10px; color: var(--color-alert-red); font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 17px; } .collection-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; } .collection-modal__field--date, .collection-modal__field--budget { gap: 6px; } .collection-modal__date-shell { position: relative; height: 50px; background: var(--popup-bg); border-radius: 999px; outline: 2px solid var(--color-forest); outline-offset: -2px; display: flex; align-items: center; padding: 0 25px; overflow: hidden; } .collection-modal__date-shell:focus-within { outline-color: var(--color-forest); } .collection-modal__date-shell { cursor: pointer; user-select: none; -webkit-user-select: none; } .collection-modal__date-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--color-ink); font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; caret-color: var(--color-forest); } .collection-modal__date-input::placeholder { color: #4A465D; opacity: 0.55; font-weight: 500; } .collection-modal__date-shell:focus-within { outline-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .collection-modal__budget { display: flex; align-items: center; gap: 6px; } .collection-modal__budget-step { width: 50px; height: 50px; flex-shrink: 0; background: var(--popup-bg); border: 2px solid var(--color-forest); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, border-color .18s ease; } .collection-modal__budget-step:hover { background: var(--popup-bg-soft); border-color: var(--color-forest); } .collection-modal__budget-step-icon { width: 26px; height: 26px; display: block; object-fit: contain; pointer-events: none; } .collection-modal__budget-step-icon--minus { width: 30px; height: 8px; object-fit: fill; } .collection-modal__budget-shell { flex: 1; min-width: 0; height: 50px; background: var(--popup-bg); border-radius: 999px; outline: 2px solid var(--color-forest); outline-offset: -2px; display: flex; align-items: center; } .collection-modal__budget-shell:focus-within { outline-color: var(--color-forest); } .collection-modal__budget-input { width: 100%; height: 100%; border: 0; background: transparent; outline: 0; padding: 0 20px; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 15px; font-weight: 700; color: var(--color-ink); text-align: center; } .collection-modal__budget-input::placeholder { color: #A9A9A9; } .collection-modal__section { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .collection-modal__row + .collection-modal__section { margin-top: 10px; } .collection-modal__section-copy { flex: 1 1 auto; min-width: 0; } .collection-modal__section-title { font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; color: #232030; margin-bottom: 6px; } .collection-modal__section-text { font-size: 14px; font-weight: 500; line-height: 1.4; color: #232030; } .collection-modal__visibility { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; min-width: 112px; } .collection-modal__visibility-status { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: #232030; line-height: 1.1; text-align: left; white-space: nowrap; } .collection-modal__visibility-icon { width: 18px; height: 18px; display: block; } .collection-modal__visibility-text { line-height: 1.1; white-space: nowrap; } .collection-modal__collab-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .collection-modal__toggle { width: 82px; height: 42px; border: 0; padding: 0; background: transparent; cursor: pointer; position: relative; flex-shrink: 0; } .collection-modal__toggle-track { position: relative; display: block; width: 100%; height: 100%; background: #FAF1EA; border: 2px solid #232030; border-radius: 999px; transition: background-color .2s ease, border-color .2s ease; overflow: hidden; } .collection-modal__toggle-thumb { position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; background: #232030; border-radius: 999px; transition: transform .22s cubic-bezier(.22, 1, .36, 1), background-color .2s ease; } .collection-modal__toggle.is-on .collection-modal__toggle-thumb { transform: translateX(40px); } .collection-modal__toggle-icon { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .collection-modal__toggle-icon img { width: 100%; height: 100%; display: block; } .collection-modal__toggle-icon--off { right: 12px; opacity: 1; } .collection-modal__toggle-icon--on { left: 12px; color: var(--popup-bg, var(--color-cream)); } .collection-modal__toggle--visibility .collection-modal__toggle-icon--on img { display: none; } .collection-modal__toggle--visibility .collection-modal__toggle-icon--on::before { content: ""; width: 17px; height: 14px; display: block; background: currentColor; -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; } .collection-modal__toggle.is-on .collection-modal__toggle-icon--off { opacity: 0; } .collection-modal__toggle.is-on .collection-modal__toggle-icon--on { opacity: 1; } .collection-modal__toggle--collab .collection-modal__toggle-track { background: #DCDDD3; border-color: transparent; } .collection-modal__toggle--collab .collection-modal__toggle-thumb { background: #FAF1EA; } .collection-modal__toggle--collab.is-on .collection-modal__toggle-track { background: #3F6A60; } .collection-modal__toggle--collab.is-on .collection-modal__toggle-thumb { background: #FAF1EA; } .collection-modal__footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px -22px 0; padding: 10px 22px 0; background: var(--popup-bg); border-top: 1px solid var(--popup-border); } .collection-modal__cancel, .collection-modal__create { margin-top: 4px; min-height: 54px; padding: 0 56px; border: 0; border-radius: 999px; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: box-shadow .22s ease, transform .22s ease; } .collection-modal__cancel { background: #FAF1EA; color: #232030; } .collection-modal__cancel:hover { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5); } .collection-modal__create { background: #3F6A60; color: #FAF1EA; padding: 0 27px; } .collection-modal__create:disabled, .collection-modal__create[aria-disabled="true"] { background: #DCDDD3; color: #B3BFB2; cursor: not-allowed; } .collection-modal__body { display: contents; } .collection-modal__sheet-grip { display: none; } @media (max-width: 720px) { .collection-modal-overlay { --collection-modal-mobile-top: clamp(84px, 13dvh, 128px); padding: calc(env(safe-area-inset-top, 0px) + var(--collection-modal-mobile-top)) 0 0; align-items: flex-end; overflow: hidden; } .collection-modal-shell { width: 100%; max-width: 100%; height: 100%; margin: 0; } .collection-modal__close { display: none; } .collection-modal { width: 100%; height: 100%; padding: 0; gap: 0; border-radius: 22px 22px 0 0; max-height: none; overflow: hidden; scrollbar-gutter: auto; transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .collection-modal-overlay:not(.is-open) .collection-modal { transform: translateY(18px); will-change: transform; } .collection-modal-overlay.is-sheet-dragging .collection-modal { transform: translateY(var(--collection-sheet-drag-y, 0px)); transition: none; will-change: transform; } .collection-modal-overlay.is-sheet-settling .collection-modal { transform: translateY(var(--collection-sheet-drag-y, 0px)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .collection-modal-overlay.is-sheet-closing .collection-modal { transform: translateY(var(--collection-sheet-drag-y, 0px)); transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .collection-modal__sheet-grip { display: flex; flex: 0 0 44px; min-height: 44px; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; } .collection-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .collection-modal-overlay.is-sheet-dragging .collection-modal__sheet-grip { cursor: grabbing; } .collection-modal__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 14px; scrollbar-gutter: auto; scrollbar-width: none; -ms-overflow-style: none; } .collection-modal__body::-webkit-scrollbar { width: 0; height: 0; } .collection-modal__title { font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); text-align: left; padding: 0; } .collection-modal__typegrid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .collection-modal__type-chip { height: 76px; } .collection-modal__row { grid-template-columns: 1fr; gap: 12px; } .collection-modal__section { flex-direction: row; align-items: center; } .collection-modal__footer { flex-direction: row; gap: 10px; flex: 0 0 auto; position: relative; bottom: 0; z-index: 20; margin: 0; padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--popup-bg); box-shadow: 0 -10px 22px rgba(35, 32, 48, 0.08); } .collection-modal__cancel, .collection-modal__create { flex: 1; min-width: 0; padding: 0 16px; min-height: 48px; } .collection-modal__guest { flex-direction: column; align-items: stretch; } .collection-modal__guest-action { align-self: flex-start; } } @media (max-width: 460px) { .collection-modal-overlay { --collection-modal-mobile-top: clamp(84px, 13dvh, 128px); } .collection-modal { height: 100%; max-height: none; padding: 0; } .collection-modal__body { padding: 4px 14px 12px; } .collection-modal__close { display: none; } .collection-modal__title { padding: 0; } .collection-modal__typegrid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .collection-modal__type-chip { height: 68px; } .collection-modal__budget-input { font-size: 13px; } .collection-modal__footer { padding-top: 8px; padding-right: 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding-left: 14px; } .collection-modal__cancel, .collection-modal__create { min-height: 46px; font-size: 15px; } 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: 560px) { .header-auth-title { font-size: 22px !important; line-height: 1.18 !important; } } /* [bundle] /css/hotfix.css */ .design-canvas [data-layer="Header"] { position: relative; overflow: visible !important; border-bottom: none !important; } .design-canvas [data-layer="Header"]::after { content: ""; position: absolute; left: calc((1440px - (100vw / var(--scale))) / 2); width: calc(100vw / var(--scale)); transform: none; bottom: 0; height: 1px; background: #c9d2ca; pointer-events: none; z-index: 2; } .fixed-header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none; background: #f8f1eb; pointer-events: none; z-index: var(--header-layer-backdrop); } .fixed-header { position: fixed !important; left: 0 !important; right: 0 !important; top: 0 !important; width: auto !important; min-width: 100vw !important; height: calc(114px * var(--scale)) !important; background: #f8f1eb; transform: none !important; overflow: visible !important; border-bottom: none !important; isolation: isolate; margin: 0 !important; padding: 0 !important; box-sizing: border-box; z-index: 5000; } .fixed-header::after { content: ""; position: absolute; left: 0; right: 0; width: auto; transform: none; bottom: 0; height: 1px; background: #d9d5d0; pointer-events: none; z-index: var(--header-layer-line); } body, .design-stage, .design-canvas { background: #e6f0ea; } .design-canvas > .Aricatures, .design-canvas > [data-layer="Caricatures"] { position: relative; isolation: isolate; background: #e6f0ea !important; } .design-canvas .Main, .design-canvas [data-layer="Main"] { background: #e6f0ea !important; } .design-canvas [style*="background: var(--color-cream)"], .design-canvas [style*="background: var(--color-cream);"] { background: #e6f0ea !important; } .design-canvas > .Aricatures::before, .design-canvas > [data-layer="Caricatures"]::before { content: ""; position: absolute; inset: 0; background: #e6f0ea; pointer-events: none; z-index: -1; } .fixed-header > svg, .fixed-header .header-tablet-768, .fixed-header .header-mobile-414 { display: none !important; } .fixed-header > svg { position: absolute; top: 0; left: 50%; width: 1440px; height: 114px; transform: translateX(-50%) scale(var(--scale)); transform-origin: top center; display: block; z-index: var(--header-layer-legacy-art); clip-path: inset(0 0 2px 0); } .fixed-header .header-desktop-shell { position: absolute; top: 0; left: 50%; width: min(1440px, calc(100vw / var(--scale))); max-width: 1440px; height: 114px; transform: translateX(-50%) scale(var(--scale)); transform-origin: top center; display: block; pointer-events: none; z-index: var(--header-layer-chrome); isolation: isolate; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; color: #232030; } .fixed-header .header-desktop-top { position: absolute; inset: 0 0 auto 0; height: 73px; } .fixed-header .header-desktop-home, .fixed-header .header-desktop-categories, .fixed-header .header-desktop-search-clear, .fixed-header .header-desktop-search-mic, .fixed-header .header-desktop-search-submit, .fixed-header .header-desktop-wishlist, .fixed-header .header-desktop-bell, .fixed-header .header-desktop-cart, .fixed-header .header-desktop-signin, .fixed-header .header-desktop-burger, .fixed-header .header-desktop-nav-chip { position: absolute; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: none; box-sizing: border-box; } .fixed-header .header-desktop-home { left: 40px; top: 15px; width: 109px; height: 52px; display: flex; align-items: center; } .fixed-header .header-desktop-logo { width: 109px; height: 42px; display: block; object-fit: contain; } .fixed-header .header-desktop-categories { left: 158px; top: 15px; width: 152px; height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: flex-start; padding: 0 24px; box-sizing: border-box; gap: 12px; } .fixed-header .header-desktop-categories, .fixed-header .header-desktop-search-clear, .fixed-header .header-desktop-search-mic, .fixed-header .header-desktop-search-submit, .fixed-header .header-desktop-wishlist, .fixed-header .header-desktop-bell, .fixed-header .header-desktop-cart, .fixed-header .header-desktop-signin, .fixed-header .header-desktop-burger, .fixed-header .header-desktop-nav-chip { isolation: isolate; overflow: visible; } .fixed-header .header-desktop-categories > *, .fixed-header .header-desktop-search-clear > *, .fixed-header .header-desktop-search-mic > *, .fixed-header .header-desktop-search-submit > *, .fixed-header .header-desktop-wishlist > *, .fixed-header .header-desktop-bell > *, .fixed-header .header-desktop-cart > *, .fixed-header .header-desktop-signin > *, .fixed-header .header-desktop-burger > *, .fixed-header .header-desktop-nav-chip > * { position: relative; z-index: 1; } .fixed-header .header-desktop-categories::before, .fixed-header .header-desktop-search-clear::before, .fixed-header .header-desktop-search-mic::before, .fixed-header .header-desktop-search-submit::before, .fixed-header .header-desktop-wishlist::before, .fixed-header .header-desktop-bell::before, .fixed-header .header-desktop-cart::before, .fixed-header .header-desktop-signin::before, .fixed-header .header-desktop-burger::before, .fixed-header .header-desktop-nav-chip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: transparent; transition: background-color 0.18s ease; z-index: 0; } .fixed-header .header-desktop-search-shell { position: absolute; left: 318px; top: 16px; width: 757px; height: 52px; padding: 2px 2px 2px 16px; border-radius: 26px; background: #f8f1eb; border: 2px solid #232030; box-shadow: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 5px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .fixed-header.is-search-active .header-desktop-search-shell { border-color: #232030; box-shadow: 0 0 0 2px rgba(63, 106, 96, 0.65); } .fixed-header .header-desktop-search-text { position: relative; flex: 1 1 0; width: auto; height: 42px; padding-left: 4px; box-sizing: border-box; display: flex; align-items: center; color: #829181; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 15px; font-weight: 500; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; opacity: 0; pointer-events: none; } .fixed-header .header-desktop-search-clear { position: relative; left: auto; top: auto; width: 44px; height: 44px; border-radius: 22px; display: none; align-items: center; justify-content: center; z-index: 1; } .fixed-header .header-desktop-search-clear.is-visible { display: flex; } .fixed-header .header-desktop-search-mic { position: relative; left: auto; top: auto; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; z-index: 1; } .fixed-header .header-desktop-search-submit { position: relative; left: auto; right: auto; top: auto; width: 112px; bottom: auto; height: 44px; border-radius: 22px; background: transparent; display: block; padding: 0; color: var(--color-cream); font-size: 17px; font-weight: 600; line-height: 1; z-index: 1; } .fixed-header .header-desktop-search-submit::before { background: #3f6a60; } .fixed-header .header-desktop-clear-icon { width: 13px; height: 13px; display: block; object-fit: contain; min-width: 13px; min-height: 13px; max-width: 13px; max-height: 13px; object-position: center; } .fixed-header .header-desktop-search-submit-icon { position: absolute; left: 15px; top: 12px; width: 20px; height: 20px; display: block; object-fit: contain; min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px; object-position: center; } .fixed-header .header-desktop-search-submit-label { position: absolute; left: 39px; top: 10px; display: flex; align-items: center; justify-content: center; height: 24px; font-family: var(--font-display) !important; font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; transform: translate(1px, -2px); } .fixed-header .header-desktop-search-active-outline { position: absolute; inset: -2px; border: 2px solid rgba(63, 106, 96, 0.65); border-radius: 999px; opacity: 0; transition: opacity 0.18s ease; z-index: 2; pointer-events: none; } .fixed-header.is-search-active .header-desktop-search-active-outline { opacity: 1; } .fixed-header .header-desktop-icon, .fixed-header .header-desktop-chevron { display: block; object-fit: contain; } .fixed-header .header-desktop-icon { width: 22px; height: 22px; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; flex: 0 0 22px; object-position: center; } .fixed-header .header-desktop-planner-icon { width: 24px; height: 26px; min-width: 24px; min-height: 26px; max-width: 24px; max-height: 26px; flex: 0 0 24px; object-position: center; } .fixed-header .header-desktop-bell .header-desktop-icon { width: 28px; height: 32px; min-width: 28px; min-height: 32px; max-width: 28px; max-height: 32px; flex: 0 0 28px; object-fit: contain; object-position: center; } .fixed-header .header-desktop-cart .header-desktop-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; flex: 0 0 44px; object-position: center; } .fixed-header .header-desktop-burger .header-desktop-icon { width: 26px; height: 20px; min-width: 26px; min-height: 20px; max-width: 26px; max-height: 20px; flex: 0 0 26px; object-position: center; } .fixed-header .header-desktop-search-mic .header-desktop-icon { width: 17px; height: 20px; min-width: 17px; min-height: 20px; max-width: 17px; max-height: 20px; flex: 0 0 17px; object-position: center; } .fixed-header .header-desktop-categories-icon { width: 22px; height: 22px; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; flex: 0 0 22px; object-position: center; } .fixed-header .header-desktop-categories-label, .fixed-header .header-desktop-signin-label { display: block; color: #232030; font-size: 14px; font-weight: 600; line-height: 1.15; white-space: nowrap; } .fixed-header .header-desktop-signin-label { font-size: 15px; font-weight: 700; } .fixed-header .header-desktop-wishlist, .fixed-header .header-desktop-bell, .fixed-header .header-desktop-cart { width: 52px; height: 52px; top: 15px; border-radius: 26px; display: flex; align-items: center; justify-content: center; } .fixed-header .header-desktop-wishlist { left: 1082px; background: transparent; } .fixed-header .header-desktop-bell { left: 1140px; background: transparent; } .fixed-header .header-desktop-cart { left: 1198px; background: transparent; } .fixed-header .header-desktop-signin { left: 1256px; top: 15px; width: 86px; height: 52px; border-radius: 26px; background: transparent; display: flex; align-items: center; justify-content: center; gap: 0; } .fixed-header .header-desktop-chevron { width: 16px; height: 10px; } .fixed-header .header-desktop-burger { left: 1348px; top: 15px; width: 52px; height: 52px; border-radius: 26px; background: transparent; display: flex; align-items: center; justify-content: center; } .fixed-header .header-desktop-burger-badge { position: absolute; left: 28px; top: 4px; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-alert-red); color: var(--color-cream); font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; } .fixed-header .header-desktop-nav { position: absolute; left: 50%; top: 73px; width: max-content; max-width: calc(100% - 80px); height: 36px; display: flex; align-items: center; justify-content: center; gap: 10px; transform: translateX(-50%); } .fixed-header .header-desktop-nav-chip { position: relative; top: 0; width: fit-content; height: 36px; border-radius: 18px; background: transparent; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 15px; box-sizing: border-box; gap: 7px; color: #232030; font-size: 14px; font-weight: 600; line-height: 1; transition: background-color 0.18s ease; } .fixed-header .header-desktop-nav-chip span { display: inline-flex; align-items: center; height: 18px; white-space: nowrap; line-height: 18px; transform: translateY(0); } .fixed-header .header-desktop-nav-chip-gift { width: auto; } .fixed-header [data-nav-id="home-picks"] { width: auto; } .fixed-header [data-nav-id="seasonal-gifts"], .fixed-header [data-nav-id="home-finds"], .fixed-header [data-nav-id="style-finds"], .fixed-header [data-nav-id="vintage-edit"] { width: auto; } .fixed-header [data-nav-id="video-gifts"] { width: auto; } .fixed-header [data-nav-id="interest-based"] { width: auto; } .fixed-header [data-nav-id="home-favorites"] { width: auto; } .fixed-header .header-desktop-nav-icon { width: 18px; height: 18px; display: block; object-fit: contain; flex: 0 0 18px; object-position: center; } .fixed-header .header-desktop-nav-chip-gift .header-desktop-nav-icon { width: 17px; height: 17px; flex-basis: 17px; } .fixed-header .header-desktop-nav-chip--seasonal { color: #232030; font-weight: 600; } .fixed-header .header-desktop-divider { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #d9d5d0; } body.page[data-category-page-live="1"] .fixed-header .header-desktop-divider { display: none; } body.page[data-category-page-live="1"] .fixed-header, body.page[data-category-page-live="1"] .fixed-header::before { transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1); } body.page[data-category-page-live="1"] .fixed-header .header-desktop-nav { transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s linear; } body.page[data-category-page-live="1"].is-category-header-preparing .fixed-header, body.page[data-category-page-live="1"].is-category-header-preparing .fixed-header::before, body.page[data-category-page-live="1"].is-category-header-preparing .fixed-header .header-desktop-nav { transition: none !important; } body.page[data-category-page-live="1"].is-category-header-preparing .fixed-header .header-desktop-nav { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(-50%) translateY(-8px) !important; } body.page[data-category-page-live="1"].is-category-header-condensed .fixed-header { height: calc(73px * var(--scale)) !important; } body.page[data-category-page-live="1"].is-category-header-condensed .fixed-header .header-desktop-nav { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-8px); } body.page.page--search .fixed-header, body.page.page--search .fixed-header::before { transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1); } body.page.page--search .fixed-header .header-desktop-divider { display: none; } body.page.page--search .design-canvas [data-layer="Header"]::after { display: none; } body.page.page--search .fixed-header .header-desktop-nav { transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s linear; } body.page.page--search.is-search-header-condensed .fixed-header { height: calc(73px * var(--scale)) !important; } body.page.page--search.is-search-header-condensed .fixed-header .header-desktop-nav { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-8px); } .fixed-header .header-desktop-categories.is-hover, .fixed-header .header-desktop-wishlist.is-hover, .fixed-header .header-desktop-bell.is-hover, .fixed-header .header-desktop-cart.is-hover, .fixed-header .header-desktop-burger.is-hover, .fixed-header .header-desktop-signin.is-hover, .fixed-header .header-desktop-signin[aria-expanded="true"] { background: transparent; } .fixed-header .header-desktop-categories.is-hover::before, .fixed-header .header-desktop-wishlist.is-hover::before, .fixed-header .header-desktop-bell.is-hover::before, .fixed-header .header-desktop-cart.is-hover::before, .fixed-header .header-desktop-burger.is-hover::before, .fixed-header .header-desktop-signin.is-hover::before, .fixed-header .header-desktop-signin[aria-expanded="true"]::before, .fixed-header .header-desktop-search-clear.is-hover::before, .fixed-header .header-desktop-search-mic.is-hover::before { background: #dcddd4; animation: header-pop-bounce-soft 0.44s cubic-bezier(0.22, 1, 0.28, 1) both; } .fixed-header .header-desktop-nav-chip.is-hover { background: transparent; } .fixed-header .header-desktop-nav-chip:hover, .fixed-header .header-desktop-nav-chip:focus-visible { background: transparent; } .fixed-header .header-desktop-nav-chip.is-hover::before { background: #dcddd4; animation: header-pop-bounce-soft 0.44s cubic-bezier(0.22, 1, 0.28, 1) both; } .fixed-header .header-desktop-nav-chip:hover::before, .fixed-header .header-desktop-nav-chip:focus-visible::before { background: #dcddd4; animation: header-pop-bounce-soft 0.44s cubic-bezier(0.22, 1, 0.28, 1) both; } .fixed-header .header-desktop-search-submit.is-hover { background: transparent; } .fixed-header .header-desktop-search-submit.is-hover::before { background: #355f55; animation: none; } .fixed-header .header-desktop-search-clear.is-hover { background: transparent; box-shadow: none; } .fixed-header .header-desktop-search-mic.is-hover { background: transparent; box-shadow: none; } .fixed-header .header-desktop-wishlist.is-attention:not(.is-hover), .fixed-header .header-desktop-wishlist.is-attention:not(.is-hover)::before { animation: none; background: transparent; } .fixed-header .header-floating-layer [hidden] { display: none !important; } @media (max-width: 1360px) { .fixed-header .header-desktop-top { top: 15px; right: 40px; bottom: auto; left: 40px; height: 52px; display: grid; grid-template-columns: 109px 152px minmax(280px, 1fr) 52px 52px 52px auto 52px; align-items: center; gap: 10px; } .fixed-header .header-desktop-home, .fixed-header .header-desktop-categories, .fixed-header .header-desktop-search-shell, .fixed-header .header-desktop-wishlist, .fixed-header .header-desktop-bell, .fixed-header .header-desktop-cart, .fixed-header .header-desktop-signin, .fixed-header .header-desktop-burger { position: relative; left: auto; top: auto; right: auto; bottom: auto; margin: 0; } .fixed-header .header-desktop-search-shell { width: auto; min-width: 0; } .fixed-header .header-desktop-signin { width: auto; min-width: 86px; padding: 0 20px; } .fixed-header .header-desktop-nav { left: 50%; right: auto; width: max-content; max-width: calc(100% - 80px); justify-content: center; transform: translateX(-50%); } } @media (max-width: 1200px) { .fixed-header .header-desktop-top { right: 32px; left: 32px; grid-template-columns: 109px 146px minmax(220px, 1fr) 52px 52px auto 52px; gap: 8px; } .fixed-header .header-desktop-categories { width: auto; padding: 0 18px; gap: 10px; } .fixed-header .header-desktop-wishlist { display: none; } .fixed-header .header-desktop-nav { left: 50%; right: auto; width: max-content; max-width: calc(100% - 48px); justify-content: flex-start; height: 36px; min-height: 36px; align-items: center; overflow-x: auto; overflow-y: visible; padding: 0 2px; box-sizing: border-box; scrollbar-width: none; transform: translateX(-50%); } .fixed-header .header-desktop-nav::-webkit-scrollbar { display: none; } } @media (max-width: 940px) { .fixed-header .header-desktop-top { grid-template-columns: 109px minmax(220px, 1fr) 52px 52px auto 52px; } .fixed-header .header-desktop-categories { display: none; } .fixed-header .header-desktop-search-text { font-size: 14px; } .fixed-header .header-desktop-signin { padding: 0 18px; } } @media (max-width: 720px) { .fixed-header .header-desktop-top { right: 16px; left: 16px; grid-template-columns: 96px minmax(160px, 1fr) 52px auto 52px; } .fixed-header .header-desktop-home { width: 96px; } .fixed-header .header-desktop-logo { width: 96px; height: 37px; } .fixed-header .header-desktop-search-shell { padding-left: 12px; } .fixed-header .header-desktop-search-submit { width: 104px; } .fixed-header .header-desktop-search-submit-label { left: 37px; font-size: 16px; } .fixed-header .header-desktop-nav { left: 50%; right: auto; max-width: calc(100% - 24px); top: 79px; transform: translateX(-50%); } } @media (max-width: 560px) { .fixed-header { height: calc(164px * var(--scale)) !important; } .fixed-header::before { height: 164px; } .fixed-header .header-desktop-shell { height: 164px; } .fixed-header .header-desktop-top { top: 12px; right: 12px; bottom: auto; left: 12px; height: auto; grid-template-columns: 88px minmax(0, 1fr) 52px auto 52px; grid-template-areas: "home spacer bell signin burger" "search search search search search"; row-gap: 10px; } .fixed-header .header-desktop-home { grid-area: home; width: 88px; } .fixed-header .header-desktop-logo { width: 88px; height: 34px; } .fixed-header .header-desktop-search-shell { grid-area: search; } .fixed-header .header-desktop-bell { grid-area: bell; } .fixed-header .header-desktop-signin { grid-area: signin; min-width: 0; padding: 0 16px; } .fixed-header .header-desktop-burger { grid-area: burger; } .fixed-header .header-desktop-nav { left: 0; right: 0; top: 118px; padding: 0 12px 8px; } } @media (max-width: 420px) { .fixed-header .header-desktop-top { grid-template-columns: 80px minmax(0, 1fr) 44px auto 44px; gap: 6px; } .fixed-header .header-desktop-home { width: 80px; } .fixed-header .header-desktop-logo { width: 80px; height: 31px; } .fixed-header .header-desktop-bell, .fixed-header .header-desktop-burger { width: 44px; height: 44px; border-radius: 22px; } .fixed-header .header-desktop-signin { height: 44px; padding: 0 14px; border-radius: 22px; } .fixed-header .header-desktop-search-shell { height: 46px; padding: 2px 2px 2px 12px; } .fixed-header .header-desktop-search-text { font-size: 13px; } .fixed-header .header-desktop-search-mic { width: 44px; height: 44px; border-radius: 22px; } .fixed-header .header-desktop-search-submit { width: 96px; height: 44px; border-radius: 22px; } .fixed-header .header-desktop-search-submit-icon { left: 13px; top: 12px; } .fixed-header .header-desktop-search-submit-label { left: 34px; top: 10px; font-size: 15px; } .fixed-header .header-desktop-nav-chip { height: 34px; padding: 0 16px; border-radius: 17px; font-size: 13px; } } @media (max-width: 951px) { .fixed-header { height: calc(126px * var(--scale)) !important; } .fixed-header::before { height: 126px; } .fixed-header .header-desktop-shell { height: 126px; } .fixed-header .header-desktop-top { top: 5px; right: 15px; bottom: auto; left: 15px; height: auto; display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px 50px 50px auto 50px; grid-template-areas: "home . wishlist bell favorite signin ." "categories search search search search search burger"; align-items: center; row-gap: 5px; column-gap: 6px; } .fixed-header .header-desktop-home, .fixed-header .header-desktop-categories, .fixed-header .header-desktop-search-shell, .fixed-header .header-desktop-wishlist, .fixed-header .header-desktop-bell, .fixed-header .header-desktop-cart, .fixed-header .header-desktop-signin, .fixed-header .header-desktop-burger { position: relative; left: auto; top: auto; right: auto; bottom: auto; margin: 0; display: flex; } .fixed-header .header-desktop-home { grid-area: home; display: flex; width: 88px; } .fixed-header .header-desktop-logo { width: 88px; height: 34px; } .fixed-header .header-desktop-categories { grid-area: categories; display: flex; width: 50px; height: 50px; border-radius: 25px; padding: 0; justify-content: center; gap: 0; } .fixed-header .header-desktop-categories-label { display: none; } .fixed-header .header-desktop-categories-icon { width: 22px; height: 22px; } .fixed-header .header-desktop-search-shell { grid-area: search; width: auto; min-width: 0; height: 52px; border-radius: 26px; padding: 2px 2px 2px 16px; } .fixed-header .header-desktop-wishlist { grid-area: wishlist; width: 50px; height: 50px; border-radius: 25px; } .fixed-header .header-desktop-bell { grid-area: bell; width: 50px; height: 50px; border-radius: 25px; } .fixed-header .header-desktop-cart { grid-area: favorite; width: 50px; height: 50px; border-radius: 25px; } .fixed-header .header-desktop-signin { grid-area: signin; width: auto; min-width: 86px; height: 50px; padding: 0 16px; border-radius: 25px; } .fixed-header .header-desktop-burger { grid-area: burger; width: 50px; height: 50px; border-radius: 25px; margin-left: 0; } .fixed-header .header-desktop-nav { display: none; } .fixed-header .header-desktop-search-text { font-size: 13px; } .fixed-header .header-desktop-search-mic { width: 44px; height: 44px; border-radius: 22px; } .fixed-header .header-desktop-search-submit { width: 112px; height: 44px; border-radius: 22px; } .fixed-header .header-desktop-search-submit-icon { left: 15px; top: 12px; } .fixed-header .header-desktop-search-submit-label { left: 39px; top: 10px; font-size: 17px; } } @media (max-width: 720px) { .fixed-header .header-desktop-top { right: 10px; left: 10px; } } .design-canvas .Section-discounts, .design-canvas .Section-editors-picks { position: relative; overflow: visible !important; } .design-canvas .Section-discounts > .Vector { left: var(--fullbleed-left) !important; width: var(--fullbleed-width) !important; } .design-canvas .Section-discounts > .Vector > svg { display: block; width: 100% !important; height: 257px !important; } .design-canvas .Section-editors-picks .Group1440Ok1 { left: var(--fullbleed-left) !important; width: var(--fullbleed-width) !important; } .design-canvas .Section-editors-picks .Group1440Ok1 > .Vector { left: 0 !important; width: 100% !important; } .design-canvas .Section-editors-picks .Group1440Ok1 > .Vector > svg { display: block; width: 100% !important; height: 333px !important; } .design-canvas [data-layer="Daily deals: for inspiration"] { display: block !important; white-space: nowrap !important; line-height: 1 !important; } .design-canvas [data-layer="Daily deals: for inspiration"] > span { display: inline !important; white-space: nowrap !important; } .fixed-header .header-tablet-768 { position: absolute; left: 50%; top: 0; width: min(1410px, calc(100vw - 30px)); height: 123px; transform: translateX(-50%); transform-origin: top center; display: none; pointer-events: none; z-index: var(--header-layer-chrome); background: var(--color-cream); font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } .fixed-header .header-tablet-top { position: absolute; left: 0; top: 16px; width: 100%; height: 54px; display: flex; align-items: center; gap: 6px; pointer-events: none; z-index: 1; } .fixed-header .header-tablet-top > * { flex: 0 0 auto; pointer-events: auto; } .fixed-header .header-tablet-logo { width: 109px; height: 42px; flex: 0 0 auto; } .fixed-header .header-tablet-logo svg { width: 109px; height: 42px; display: block; } .fixed-header .header-tablet-btn { width: 133px; height: 54px; padding: 10px 15px; border: 0; border-radius: 999px; background: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px; cursor: pointer; transition: background-color 0.2s ease; box-shadow: none; flex: 0 0 auto; isolation: isolate; overflow: visible; } .fixed-header .header-tablet-btn::before, .fixed-header .header-tablet-signin::before, .fixed-header .header-tablet-icon-btn::before, .fixed-header .header-tablet-burger::before, .fixed-header .header-mobile-signin::before, .fixed-header .header-mobile-burger::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: transparent; transition: background-color 0.2s ease; z-index: 0; pointer-events: none; } @keyframes header-pop-bounce-soft { 0% { transform: scale(0.92); } 34% { transform: scale(1.056); } 62% { transform: scale(0.988); } 82% { transform: scale(1.014); } 100% { transform: scale(1); } } .fixed-header .header-tablet-btn > *, .fixed-header .header-tablet-signin > *, .fixed-header .header-tablet-icon-btn > *, .fixed-header .header-tablet-burger > *, .fixed-header .header-mobile-signin > *, .fixed-header .header-mobile-burger > * { position: relative; z-index: 1; transform: none !important; animation: none !important; transition: none !important; backface-visibility: hidden; } .fixed-header .header-tablet-signin svg, .fixed-header .header-tablet-burger svg, .fixed-header .header-mobile-signin svg, .fixed-header .header-mobile-burger svg { transform: none !important; animation: none !important; transition: none !important; backface-visibility: hidden; } .fixed-header .header-tablet-signin:not(.is-account-pill)::before, .fixed-header .header-tablet-burger::before, .fixed-header .header-mobile-signin:not(.is-account-pill)::before, .fixed-header .header-mobile-burger::before { transform-origin: center center; will-change: transform, background-color; } .fixed-header .header-tablet-btn:hover, .fixed-header .header-tablet-signin:hover, .fixed-header .header-tablet-icon-btn:hover, .fixed-header .header-tablet-burger:hover, .fixed-header .header-tablet-btn:focus-visible, .fixed-header .header-tablet-signin:focus-visible, .fixed-header .header-tablet-icon-btn:focus-visible, .fixed-header .header-tablet-burger:focus-visible { background: transparent; animation: none; box-shadow: none; } .fixed-header .header-tablet-btn:hover::before, .fixed-header .header-tablet-signin:hover::before, .fixed-header .header-tablet-icon-btn:hover::before, .fixed-header .header-tablet-burger:hover::before, .fixed-header .header-tablet-btn:focus-visible::before, .fixed-header .header-tablet-signin:focus-visible::before, .fixed-header .header-tablet-icon-btn:focus-visible::before, .fixed-header .header-tablet-burger:focus-visible::before { background: var(--header-primary-hover-fill); animation: header-pop-bounce var(--header-primary-hover-bounce-duration) var(--header-primary-hover-bounce-easing) both; } .fixed-header .header-tablet-signin:not(.is-account-pill):hover::before, .fixed-header .header-tablet-signin:not(.is-account-pill):focus-visible::before, .fixed-header .header-tablet-burger:hover::before, .fixed-header .header-tablet-burger:focus-visible::before { animation: header-pop-bounce-soft 0.44s cubic-bezier(0.22, 1, 0.28, 1) both; } .fixed-header .header-tablet-btn[aria-expanded="true"]::before, .fixed-header .header-tablet-signin[aria-expanded="true"]::before, .fixed-header .header-tablet-icon-btn[aria-expanded="true"]::before, .fixed-header .header-mobile-signin[aria-expanded="true"]::before { background: var(--header-primary-hover-fill); animation: none; } .fixed-header .header-tablet-btn:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-tablet-btn-text { color: #232030; font-size: 12px; font-weight: 700; line-height: 15px; white-space: nowrap; } .fixed-header .header-tablet-search { flex: 1 1 auto; min-width: 0; height: 52px; padding: 2px 2px 2px 16px; border-radius: 999px; border: 2px solid var(--popup-outline); outline: 0; background: var(--color-cream); display: inline-flex; align-items: center; gap: 0; column-gap: 0; cursor: text; position: relative; box-sizing: border-box; transition: outline-color 0.2s ease, border-color 0.2s ease; } .fixed-header .header-tablet-search::after { content: none; } .fixed-header.is-search-active .header-tablet-search { border-color: var(--popup-outline); outline: 2px solid #3f6a60; outline-offset: 2px; } .fixed-header .header-tablet-search-input { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; padding: 0 4px; margin: 0; color: #232030; font-size: 15px; font-weight: 500; line-height: 20px; background: transparent; } .fixed-header .header-tablet-search-input::placeholder { color: #8793ad; opacity: 1; } .fixed-header .header-tablet-search-input:focus { outline: none; } .fixed-header .header-tablet-mic-btn { width: 42px; height: 42px; flex: 0 0 auto; margin-left: 0; margin-right: 5px !important; border: 0; border-radius: 999px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; } .fixed-header .header-tablet-mic-btn:hover, .fixed-header .header-tablet-mic-btn:focus-visible { background: #e9edf6; } .fixed-header .header-tablet-mic-btn:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-tablet-search-btn { height: 44px; padding: 12px; flex: 0 0 auto; margin-left: 0 !important; border: 0; border-radius: 999px; background: #3f6a60; color: var(--color-cream); display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; cursor: pointer; transition: filter 0.2s ease, box-shadow 0.2s ease; } .fixed-header .header-tablet-search-btn > span { color: var(--color-cream); font-size: 17px; font-weight: 500; line-height: 20px; white-space: nowrap; } .fixed-header .header-tablet-search-btn:hover, .fixed-header .header-tablet-search-btn:focus-visible { background: #355f55; filter: none; box-shadow: none; animation: none; transform: none; } .fixed-header .header-tablet-search-btn:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-tablet-signin { width: 108px; height: 54px; border: 0; border-radius: 999px; background: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #232030; font-size: 13px; font-weight: 700; line-height: 15px; cursor: pointer; transition: background-color 0.2s ease; box-shadow: none; flex: 0 0 auto; } .fixed-header .header-tablet-signin.is-account-pill { width: 84px; height: 52px; padding: 0; gap: 0; background: transparent; box-shadow: none; } .fixed-header .header-tablet-signin.is-account-pill .header-account-chip-inner { width: 100%; height: 100%; display: block; position: relative; } .fixed-header .header-tablet-signin.is-account-pill .header-account-avatar { position: absolute; left: 5px; top: 5px; } .fixed-header .header-tablet-signin.is-account-pill .header-account-chevron { position: absolute; left: 60px; top: 22px; width: 13px; height: 8px; } .fixed-header .header-tablet-signin:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-tablet-icon-btn { width: 54px !important; height: 54px !important; border: 0; border-radius: 999px; background: transparent; position: relative; padding: 0; margin: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; box-shadow: none; flex: 0 0 auto; } .fixed-header .header-tablet-icon-btn:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-tablet-icon-btn svg { display: block; transform: none !important; } .fixed-header .header-tablet-icon-btn svg path { vector-effect: non-scaling-stroke; } .fixed-header .header-tablet-bell svg, .fixed-header .header-tablet-favorite svg { position: absolute; left: 14px; top: 14px; z-index: 1; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: 26px !important; max-height: 26px !important; flex: 0 0 26px; } .fixed-header .header-tablet-bell { position: relative; } .fixed-header .header-tablet-favorite { position: relative; } .fixed-header .header-tablet-bell-badge { position: absolute; left: 28px; top: 4px; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-alert-red); color: var(--color-cream); font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 18px; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; } .fixed-header .header-tablet-bell-badge[hidden] { display: none !important; } .fixed-header .header-tablet-wishlist { width: 142px; height: 54px; border: 1.5px solid transparent; border-radius: 999px; background: #232030; color: var(--color-cream); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; flex: 0 0 auto; } .fixed-header .header-tablet-wishlist > span { font-size: 13px; font-weight: 700; line-height: 15px; white-space: nowrap; color: inherit; } .fixed-header .header-tablet-wishlist:hover, .fixed-header .header-tablet-wishlist:focus-visible { background: var(--color-cream); color: #232030; border-color: #232030; box-shadow: 0 4px 10px rgba(35, 32, 48, 0.1); outline: none; } .fixed-header .header-tablet-wishlist:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; box-shadow: none; } .fixed-header .header-tablet-burger { width: 54px; height: 54px; border: 0; border-radius: 999px; background: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; box-shadow: none; flex: 0 0 auto; } .fixed-header .header-tablet-burger svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) !important; } .fixed-header .header-tablet-burger:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-tablet-badge { position: absolute; left: 28px; top: 4px; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-alert-red); color: var(--color-cream); font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 18px; display: inline-flex; align-items: center; justify-content: center; } .fixed-header .header-tablet-nav { position: absolute; left: 0; top: 77px; right: 0; width: 100%; display: flex; align-items: flex-start; justify-content: center; justify-content: safe center; gap: 10px; padding: 0 12px; box-sizing: border-box; overflow-x: auto; overflow-y: visible; min-height: 42px; padding-top: 3px; padding-bottom: 3px; scrollbar-width: none; -ms-overflow-style: none; pointer-events: auto; z-index: 3; } .fixed-header .header-tablet-nav.is-overflowing { justify-content: flex-start; } .fixed-header .header-tablet-nav::-webkit-scrollbar { display: none; } .fixed-header .header-tablet-chip { height: 36px; padding: 8px 16px; border: 0; border-radius: 999px; background: radial-gradient(142.2% 205.88% at 30% 20%, #f6f8fb 60%), linear-gradient(180deg, #FFF9F1 0%, #fafafa 100%); display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #232030; font-size: 14px; font-weight: 700; line-height: 17px; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; flex: 0 0 auto; position: relative; z-index: 1; } .fixed-header .header-tablet-chip:hover, .fixed-header .header-tablet-chip:focus-visible { background: #e2e7f1; transform: none; box-shadow: none; animation: none; z-index: 3; } .fixed-header .header-tablet-chip:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-tablet-chip.is-gift svg { width: 20px; height: 20px; display: block; flex: 0 0 auto; opacity: 0.95; } .fixed-header .header-tablet-divider { position: absolute; left: 0; top: 121px; width: 100%; height: 2px; background: #e2e7f1; pointer-events: none; } .fixed-header.is-tablet-768 { height: 123px !important; } .fixed-header.is-tablet-768::before { height: 123px; } .fixed-header.is-tablet-768 > svg, .fixed-header.is-tablet-768 .header-desktop-shell { display: none !important; } .fixed-header.is-tablet-768 .header-tablet-768 { display: block; } .fixed-header.is-desktop-fluid { height: 123px !important; } .fixed-header.is-desktop-fluid::before { height: 123px; } .fixed-header.is-desktop-fluid > svg, .fixed-header.is-desktop-fluid .header-desktop-shell { display: none !important; } .fixed-header.is-desktop-fluid .header-tablet-768 { display: block; } .fixed-header.is-tablet-768 .header-hitboxes > .header-hitbox, .fixed-header.is-tablet-768 .header-hitboxes > .header-search-mask, .fixed-header.is-tablet-768 .header-hitboxes > .header-search-hints, .fixed-header.is-tablet-768 .header-hitboxes > .header-search-input { display: none !important; } .fixed-header.is-tablet-768 .header-hitboxes, .fixed-header.is-tablet-768 .header-hitboxes * { pointer-events: none !important; } .fixed-header.is-tablet-768 .header-hitboxes, .fixed-header.is-desktop-fluid .header-hitboxes, .fixed-header.is-mobile-414 .header-hitboxes { z-index: var(--header-layer-hitboxes) !important; } .fixed-header.is-desktop-fluid .header-hitboxes > .header-hitbox, .fixed-header.is-desktop-fluid .header-hitboxes > .header-search-mask, .fixed-header.is-desktop-fluid .header-hitboxes > .header-search-hints, .fixed-header.is-desktop-fluid .header-hitboxes > .header-search-input { display: none !important; } .fixed-header.is-desktop-fluid .header-hitboxes, .fixed-header.is-desktop-fluid .header-hitboxes * { pointer-events: none !important; } .has-tablet-header .design-stage { margin-top: calc(123px - (123px * var(--scale))); } .fixed-header.is-header-compact-958:not(.is-tablet-768) .header-bell-target, .fixed-header.is-header-compact-958:not(.is-tablet-768) .header-cart-target, .fixed-header.is-header-compact-958:not(.is-tablet-768) .header-bell-icon, .fixed-header.is-header-compact-958:not(.is-tablet-768) .header-bell-icon-secondary, .fixed-header.is-header-compact-958:not(.is-tablet-768) .header-cart-icon, .fixed-header.is-header-compact-958:not(.is-tablet-768) .header-bell-compact-extra { display: none !important; pointer-events: none !important; } .fixed-header.is-header-compact-958:not(.is-tablet-768) .header-hitbox[aria-label="Notifications"], .fixed-header.is-header-compact-958:not(.is-tablet-768) .header-hitbox[aria-label="Cart"] { display: none !important; pointer-events: none !important; } .fixed-header.is-hide-bell-favorite .header-tablet-bell, .fixed-header.is-hide-bell-favorite .header-tablet-favorite { display: none !important; pointer-events: none !important; } .fixed-header.is-hide-wishlist-958 .header-tablet-wishlist { display: none !important; pointer-events: none !important; } .fixed-header.is-hide-categories-958 .js-tablet-categories { display: none !important; pointer-events: none !important; } .fixed-header .header-mobile-414 { position: absolute; left: 0; top: 0; width: 100%; height: 68px; transform: none; display: none; pointer-events: auto; z-index: var(--header-layer-chrome); background: #f8f1eb; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .fixed-header .header-mobile-top { position: absolute; left: 10px; top: 13px; width: calc(100% - 20px); height: 42px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; pointer-events: auto; z-index: 1; } .fixed-header .header-mobile-top > * { pointer-events: auto; } .fixed-header .header-mobile-logo { width: 78px; height: 42px; flex: 0 0 78px; display: inline-flex; align-items: center; justify-content: flex-start; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; } .fixed-header .header-mobile-logo-image { width: 78px; height: 30px; display: block; object-fit: contain; object-position: left center; } .fixed-header .header-mobile-search { width: auto; flex: 1 1 auto; min-width: 0; height: 42px; padding: 2px 2px 2px 12px; border-radius: 999px; border: 1.5px solid #232030; outline: 0; background: #f8f1eb; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; column-gap: 5px; cursor: text; box-sizing: border-box; position: relative; transition: outline-color 0.2s ease, border-color 0.2s ease; } .fixed-header .header-mobile-search::after { content: none; } .fixed-header.is-search-active .header-mobile-search, .fixed-header.is-mobile-search-page-open .header-mobile-search { border-color: var(--color-forest); outline: none; box-shadow: 0 0 0 2px rgba(63, 106, 96, 0.58); } .fixed-header .header-mobile-search-input { flex: 1 1 auto; min-width: 0; width: auto; height: 36px; border: 0; margin: 0; padding: 0; background: transparent; color: #232030; font-size: 16px; font-weight: 500; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fixed-header .header-mobile-search-input::placeholder { color: var(--color-ink-soft); opacity: 1; } .fixed-header .header-mobile-search-input:focus { outline: none; } .fixed-header .header-mobile-search-btn { width: 36px; height: 36px; border: 0; border-radius: 999px; background: #3f6a60; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: filter 0.2s ease, box-shadow 0.2s ease; flex: 0 0 auto; } .fixed-header .header-mobile-search-btn:hover, .fixed-header .header-mobile-search-btn:focus-visible { background: #355f55; filter: none; box-shadow: none; animation: none; transform: none; } .fixed-header .header-mobile-search-btn:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-mobile-search-btn-icon { width: 19px; height: 19px; display: block; } .fixed-header .header-mobile-signin, .fixed-header .header-mobile-burger { width: 52px; height: 52px; border: 0; border-radius: 999px; background: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; box-shadow: none; flex: 0 0 auto; } .fixed-header .header-mobile-signin { width: 64px; background: transparent; line-height: 0; } .fixed-header .header-mobile-signin:hover, .fixed-header .header-mobile-burger:hover, .fixed-header .header-mobile-signin:focus-visible, .fixed-header .header-mobile-burger:focus-visible { background: transparent; animation: none; box-shadow: none; } .fixed-header .header-mobile-signin:hover::before, .fixed-header .header-mobile-burger:hover::before, .fixed-header .header-mobile-signin:focus-visible::before, .fixed-header .header-mobile-burger:focus-visible::before, .fixed-header .header-mobile-burger[aria-expanded="true"]::before { background: #dcded4; animation: header-pop-bounce-soft 0.44s cubic-bezier(0.22, 1, 0.28, 1) both; } .fixed-header .header-tablet-search-btn svg, .fixed-header .header-tablet-search-btn > span, .fixed-header .header-mobile-search-btn svg { transform: none !important; } .fixed-header .header-mobile-signin:focus-visible, .fixed-header .header-mobile-burger:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-mobile-signin.is-account-pill { width: 84px; height: 52px; padding: 0; gap: 0; background: transparent; box-shadow: none; } .fixed-header .header-mobile-signin.is-account-pill .header-account-chip-inner { width: 100%; height: 100%; display: block; position: relative; } .fixed-header .header-mobile-signin.is-account-pill .header-account-avatar { position: absolute; left: 5px; top: 5px; } .fixed-header .header-mobile-signin.is-account-pill .header-account-chevron { position: absolute; left: 65px; top: 27px; width: 13px; height: 8px; display: block; } .fixed-header .header-mobile-signin svg { width: 22px; height: 22px; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) !important; } .fixed-header .header-mobile-account-top { width: 42px; height: 42px; padding: 0; } .fixed-header .header-mobile-account-top .header-mobile-account-inner { gap: 0; } .fixed-header .header-mobile-account-top .header-mobile-bottom-label { display: none; } .fixed-header .header-mobile-account-top .header-mobile-account-avatar { width: 30px; height: 30px; } .fixed-header .header-mobile-account-top .header-mobile-account-avatar img { width: 22px; height: 22px; } .fixed-header .header-mobile-burger { position: relative; overflow: visible; } .fixed-header .header-mobile-burger-icon { width: 24px; height: 20px; display: block; } .fixed-header .header-mobile-badge { position: absolute; left: 28px; top: 4px; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-alert-red); color: var(--color-cream); font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 18px; display: inline-flex; align-items: center; justify-content: center; } .fixed-header .header-mobile-bottom-bar { position: fixed; left: 0 !important; right: 0 !important; bottom: 0 !important; height: var(--mobile-bottom-nav-height, 72px); width: 100%; max-width: 100%; display: flex; align-items: stretch; gap: 2px; padding: var(--mobile-bottom-nav-padding, 7px 10px); border: 0; border-top: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none; z-index: 20; pointer-events: auto; box-sizing: border-box; isolation: isolate; overflow: visible; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: height, padding, transform; transition: height 0.22s cubic-bezier(0.22, 1, 0.36, 1), padding 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, opacity 0.16s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .fixed-header .header-mobile-bottom-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: auto; border-top: 1px solid #d9d5d0; background: rgba(248, 241, 235, 0.98); box-shadow: 0 -1px 2px rgba(35, 32, 48, 0.04), 0 -8px 18px rgba(35, 32, 48, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none; z-index: 0; } .fixed-header .header-mobile-bottom-button { position: relative; z-index: 1; min-width: 0; min-height: 50px; border: 0; margin: 0; padding: 3px 2px; background: transparent; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; color: #232030; border-radius: 16px; transition: background-color 0.2s ease, gap 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .fixed-header .header-mobile-bottom-lume-slot { position: relative; z-index: 1; min-width: 0; min-height: 50px; display: flex; align-items: center; justify-content: center; flex: 1 1 0; align-self: stretch; margin: 0; pointer-events: auto; } .fixed-header .header-mobile-bottom-lume-slot:empty { display: none; } .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot { --gift-assistant-mobile-tab-color: #232030; --gift-assistant-mobile-tab-hover-bg: #dcded4; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 50px !important; flex-basis: auto !important; padding: 3px 2px !important; display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border-radius: 16px !important; background: transparent !important; border: 0 !important; color: var(--gift-assistant-mobile-tab-color) !important; box-shadow: none !important; transform: none !important; transition: background-color 0.2s ease, transform 0.16s ease !important; } .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot:hover, .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot:focus-visible { background: var(--gift-assistant-mobile-tab-hover-bg) !important; outline: none !important; } .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot:active { transform: scale(0.97) !important; } .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot .gift-room-ai-fab__icon { position: static !important; width: 24px !important; height: 24px !important; flex: 0 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--gift-assistant-mobile-tab-color) !important; } .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot svg { width: 24px !important; height: 24px !important; display: block !important; color: var(--gift-assistant-mobile-tab-color) !important; } .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot .gift-room-ai-fab__label { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 13px !important; max-height: none !important; flex: 0 0 auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; clip: auto !important; clip-path: none !important; -webkit-clip-path: none !important; margin: 0 !important; padding: 0 !important; color: var(--gift-assistant-mobile-tab-color) !important; -webkit-text-fill-color: var(--gift-assistant-mobile-tab-color) !important; font-family: var(--header-font-body, var(--jp-font-body, inherit)) !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.14 !important; letter-spacing: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 42px !important; flex-basis: auto !important; padding: 1px 2px !important; flex-direction: column !important; gap: 0 !important; border-radius: 13px !important; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot .gift-room-ai-fab__icon { width: 22px !important; height: 22px !important; flex-basis: 22px !important; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot svg { width: 22px !important; height: 22px !important; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-lume-slot > .gift-room-ai-fab.is-mobile-slot .gift-room-ai-fab__label { display: block !important; max-height: 0 !important; min-height: 0 !important; opacity: 0 !important; overflow: hidden !important; transform: translateY(4px) !important; } .fixed-header .header-mobile-bottom-button { flex: 1 1 0; } .fixed-header .header-mobile-bottom-button:hover, .fixed-header .header-mobile-bottom-button:focus-visible, .fixed-header .header-mobile-bottom-button.is-hover, .fixed-header .header-mobile-bottom-button.is-open { background: #dcded4; outline: none; } .fixed-header .header-mobile-bottom-button.is-current-tab { position: relative; } .fixed-header .header-mobile-bottom-button.is-current-tab::after { content: none; } .fixed-header .header-mobile-bottom-button.is-current-tab .header-mobile-bottom-label { color: #232030; font-weight: 600; } .fixed-header .header-mobile-bottom-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1), height 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .fixed-header .header-mobile-bottom-icon img { width: 22px; height: 22px; display: block; object-fit: contain; transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1), height 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .fixed-header .header-mobile-bottom-button.js-mobile-cart .header-mobile-bottom-icon { overflow: visible; } .fixed-header .header-mobile-bottom-button.js-mobile-cart .header-mobile-bottom-icon img { width: 48px; height: 48px; max-width: none; transform: none; } .fixed-header .header-mobile-account-avatar { width: 26px; height: 26px; } .fixed-header .header-mobile-bottom-button.header-mobile-bottom-menu .header-mobile-bottom-icon img { width: 24px; height: 20px; } .fixed-header .header-mobile-bottom-button.header-mobile-bottom-menu .header-mobile-badge { left: calc(50% + 8px); top: 4px; } .fixed-header .header-mobile-tab-badge { position: absolute; left: calc(50% + 8px); top: 4px; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-alert-red); color: var(--color-cream); font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 18px; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .fixed-header .header-mobile-account-avatar img { width: 18px; height: 18px; } .fixed-header .header-mobile-bottom-label { max-width: 100%; color: #232030; font-size: 10px; font-weight: 600; line-height: 1.14; text-align: center; letter-spacing: 0; word-break: break-word; transition: opacity 0.18s ease, max-height 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .fixed-header .header-mobile-account-inner { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .fixed-header .header-mobile-account-avatar { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #232030; font-size: 15px; font-weight: 700; line-height: 1; background: #f4d9cf; border: 2px solid #232030; box-sizing: border-box; transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1), height 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .fixed-header .header-mobile-account-avatar.is-guest { background: #dcddd4; border: 0; } .fixed-header .header-mobile-account-top .header-mobile-account-avatar.is-guest { background: transparent; } .fixed-header .header-mobile-account-avatar img { width: 21px; height: 21px; display: block; object-fit: contain; } .fixed-header .header-mobile-account-top .header-mobile-account-avatar img { width: 23px; height: 23px; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-bar { height: var(--mobile-bottom-nav-compact-height, 54px); padding: var(--mobile-bottom-nav-compact-padding, 5px 10px); border-radius: 0; box-shadow: none; opacity: 1; overflow: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-bar::before { box-shadow: 0 -1px 2px rgba(35, 32, 48, 0.04), 0 -5px 12px rgba(35, 32, 48, 0.07); } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-button { min-height: 42px; padding: 1px 2px; gap: 0; border-radius: 13px; transform: none; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-lume-slot { min-height: 42px; flex: 1 1 0; align-self: stretch; margin: 0; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-icon { width: 26px; height: 26px; overflow: visible; transform: none; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-icon img { width: 23px; height: 23px; transform: none; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-button.js-mobile-cart .header-mobile-bottom-icon img { width: 44px; height: 44px; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-button.header-mobile-bottom-menu .header-mobile-bottom-icon img { width: 24px; height: 20px; } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-bottom-label { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(4px); } body.is-mobile-quick-nav-condensed .fixed-header .header-mobile-account-avatar { width: 28px; height: 28px; overflow: hidden; transform: none; } .fixed-header .header-mobile-account-avatar.has-image { background-position: center; background-repeat: no-repeat; background-size: cover; color: transparent; } .fixed-header .header-mobile-bottom-account.is-authenticated .header-mobile-account-avatar { border: 0; background: #dcddd4; } .fixed-header .header-tablet-badge[hidden], .fixed-header .header-mobile-badge[hidden], .fixed-header .header-mobile-tab-badge[hidden] { display: none !important; } .fixed-header .header-mobile-nav { display: none !important; } .fixed-header .header-mobile-nav::-webkit-scrollbar { display: none; } .fixed-header .header-mobile-nav .header-tablet-chip { height: 36px; padding: 8px 16px; border: 0; border-radius: 999px; background: radial-gradient(142.2% 205.88% at 30% 20%, #f6f8fb 60%), linear-gradient(180deg, #FFF9F1 0%, #fafafa 100%); display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #232030; font-size: 14px; font-weight: 700; line-height: 17px; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; flex: 0 0 auto; position: relative; z-index: 1; } .fixed-header .header-mobile-nav .header-tablet-chip:hover, .fixed-header .header-mobile-nav .header-tablet-chip:focus-visible { background: #e2e7f1; transform: none; box-shadow: none; animation: none; z-index: 3; } .fixed-header .header-mobile-nav .header-tablet-chip:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .fixed-header .header-mobile-nav .header-tablet-chip.is-gift svg { width: 20px; height: 20px; display: block; flex: 0 0 auto; opacity: 0.95; } .fixed-header .header-mobile-divider { position: absolute; left: 0; top: 67px; width: 100%; height: 1px; background: #d9d5d0; pointer-events: none; } .fixed-header .header-search-popover { --popup-hover: #DCDDD4; } .fixed-header .header-search-row:hover, .fixed-header .header-search-row:focus-visible, .fixed-header .header-search-row.is-preview { background: #DCDDD4; } .fixed-header .header-search-row.is-static:hover, .fixed-header .header-search-row.is-static:focus-visible { background: transparent; } .search-shell__pill:hover, .search-shell__pill:focus-visible { background: #DCDDD4; } .fixed-header .header-mobile-search-page { position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: max(14px, env(safe-area-inset-top)) 10px calc(22px + env(safe-area-inset-bottom)); background: var(--color-page-bg, #f8f1eb); box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 15; } .fixed-header .header-mobile-search-page-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 0 0 12px; background: var(--color-page-bg, #f8f1eb); } .fixed-header .header-mobile-search-page-field { flex: 1 1 auto; min-width: 0; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 18px; border: 2px solid var(--color-forest, #3f6a60); border-radius: 999px; background: var(--color-page-bg, #f8f1eb); box-sizing: border-box; box-shadow: 0 0 0 3px rgba(63, 106, 96, 0.16); overflow: hidden; } .fixed-header .header-mobile-search-page-field-icon { width: 23px; height: 23px; flex: 0 0 auto; display: block; opacity: 0.95; } .fixed-header .header-mobile-search-page-input { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; background: transparent; color: #232030; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 16px; font-weight: 650; line-height: 1; letter-spacing: 0; outline: 0; appearance: none; -webkit-appearance: none; } .fixed-header .header-mobile-search-page-input::-webkit-search-decoration, .fixed-header .header-mobile-search-page-input::-webkit-search-cancel-button, .fixed-header .header-mobile-search-page-input::-webkit-search-results-button, .fixed-header .header-mobile-search-page-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; } .fixed-header .header-mobile-search-page-input::placeholder { color: #6f6a7c; opacity: 0.84; font-weight: 700; } .fixed-header .header-mobile-search-panel { --mobile-search-row-text-offset: 64px; width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; } .fixed-header .header-mobile-search-title { margin: 8px 0 10px; padding-left: var(--mobile-search-row-text-offset); color: #232030; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0; } .fixed-header .header-mobile-search-list, .fixed-header .header-mobile-search-list.header-search-list { display: flex; flex-direction: column; gap: 0 !important; padding: 0 0 10px; } .fixed-header .header-mobile-search-list .header-mobile-search-row + .header-mobile-search-row { margin-top: 0 !important; } .fixed-header .header-mobile-search-row { width: 100%; min-height: 56px; display: block; padding: 0; margin: 0; border-radius: 999px; background: transparent; border: 0; box-sizing: border-box; transition: none; } .fixed-header .header-mobile-search-row:hover, .fixed-header .header-mobile-search-row:focus-within, .fixed-header .header-mobile-search-row.is-preview { background: transparent; } .fixed-header .header-mobile-search-row-main { width: 100%; min-width: 0; min-height: 56px; border: 0; background: transparent; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 16px; color: #232030; cursor: pointer; text-align: left; box-sizing: border-box; border-radius: 999px; } .fixed-header .header-mobile-search-row-main:focus-visible { outline: 2px solid var(--color-forest, #3f6a60); outline-offset: -2px; border-radius: 999px; } .fixed-header .header-mobile-search-row-icon { width: 22px; height: 22px; display: block; justify-self: center; opacity: 0.98; } .fixed-header .header-mobile-search-row-text { min-width: 0; color: #232030; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 15px; font-weight: 650; line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; } .fixed-header.is-mobile-search-page-open .header-mobile-search-page { opacity: 1; pointer-events: auto; } .fixed-header.is-mobile-search-page-open .header-mobile-bottom-bar { opacity: 0; pointer-events: none; transform: translateY(10px); } .fixed-header .header-floating-layer .header-search-popover, .fixed-header .header-floating-layer .header-categories-backdrop, .fixed-header .header-floating-layer .header-categories-panel, .fixed-header .header-floating-layer .header-mic-panel { pointer-events: none; } .fixed-header .header-floating-layer .header-search-popover.is-open, .fixed-header .header-floating-layer .header-categories-backdrop.is-open, .fixed-header .header-floating-layer .header-categories-panel.is-open, .fixed-header .header-floating-layer .header-mic-panel.is-open { pointer-events: auto; } .fixed-header.is-mobile-414 { height: 68px !important; } .fixed-header.is-mobile-414::before { height: 68px; } .fixed-header.is-mobile-414 > svg, .fixed-header.is-mobile-414 .header-desktop-shell, .fixed-header.is-mobile-414 .header-tablet-768 { display: none !important; } .fixed-header.is-mobile-414 .header-mobile-414 { display: block !important; } .fixed-header.is-mobile-414::after { display: none; } .fixed-header.is-mobile-414 .header-mobile-divider { display: block; } .fixed-header.is-mobile-414 .header-hitboxes > .header-hitbox, .fixed-header.is-mobile-414 .header-hitboxes > .header-search-mask, .fixed-header.is-mobile-414 .header-hitboxes > .header-search-hints, .fixed-header.is-mobile-414 .header-hitboxes > .header-search-input { display: none !important; } .fixed-header.is-mobile-414 .header-hitboxes, .fixed-header.is-mobile-414 .header-hitboxes * { pointer-events: none !important; } .fixed-header.is-tablet-768 .js-tablet-categories, .fixed-header.is-desktop-fluid .js-tablet-categories { transition: background-color 0.2s ease, box-shadow 0.2s ease !important; } .fixed-header.is-tablet-768 .js-tablet-categories:hover, .fixed-header.is-tablet-768 .js-tablet-categories:focus-visible, .fixed-header.is-desktop-fluid .js-tablet-categories:hover, .fixed-header.is-desktop-fluid .js-tablet-categories:focus-visible { background: transparent !important; animation: none !important; } .fixed-header.is-tablet-768 .js-tablet-categories:hover::before, .fixed-header.is-tablet-768 .js-tablet-categories:focus-visible::before, .fixed-header.is-desktop-fluid .js-tablet-categories:hover::before, .fixed-header.is-desktop-fluid .js-tablet-categories:focus-visible::before { background: var(--header-primary-hover-fill) !important; animation: header-pop-bounce var(--header-primary-hover-bounce-duration) var(--header-primary-hover-bounce-easing) both !important; } .fixed-header.is-tablet-768 .header-tablet-nav .header-tablet-chip, .fixed-header.is-desktop-fluid .header-tablet-nav .header-tablet-chip, .fixed-header.is-mobile-414 .header-mobile-nav .header-tablet-chip { transition: background-color 0.2s ease !important; } .fixed-header.is-tablet-768 .header-tablet-nav .header-tablet-chip:hover, .fixed-header.is-tablet-768 .header-tablet-nav .header-tablet-chip:focus-visible, .fixed-header.is-tablet-768 .header-tablet-nav .header-tablet-chip.is-hovering, .fixed-header.is-desktop-fluid .header-tablet-nav .header-tablet-chip:hover, .fixed-header.is-desktop-fluid .header-tablet-nav .header-tablet-chip:focus-visible, .fixed-header.is-desktop-fluid .header-tablet-nav .header-tablet-chip.is-hovering, .fixed-header.is-mobile-414 .header-mobile-nav .header-tablet-chip:hover, .fixed-header.is-mobile-414 .header-mobile-nav .header-tablet-chip:focus-visible, .fixed-header.is-mobile-414 .header-mobile-nav .header-tablet-chip.is-hovering { background: #e2e7f1 !important; transform: none !important; box-shadow: none !important; animation: none !important; } .has-mobile-header .design-stage { margin-top: 8px; } body.has-mobile-header { --mobile-bottom-nav-expanded-height: calc(72px + env(safe-area-inset-bottom, 0px)); --mobile-bottom-nav-compact-height: calc(54px + env(safe-area-inset-bottom, 0px)); --mobile-bottom-nav-height: var(--mobile-bottom-nav-expanded-height); --mobile-bottom-nav-padding: 7px max(10px, calc(50vw - 178px), env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(10px, calc(50vw - 178px), env(safe-area-inset-left, 0px)); --mobile-bottom-nav-compact-padding: 5px max(10px, calc(50vw - 178px), env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(10px, calc(50vw - 178px), env(safe-area-inset-left, 0px)); padding-bottom: 0; box-sizing: border-box; } @media (max-width: 360px) { body.has-mobile-header { --mobile-bottom-nav-padding: 7px max(7px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(7px, env(safe-area-inset-left, 0px)); --mobile-bottom-nav-compact-padding: 5px max(7px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(7px, env(safe-area-inset-left, 0px)); } } body.has-mobile-header.is-mobile-quick-nav-condensed { --mobile-bottom-nav-height: var(--mobile-bottom-nav-compact-height); } body.has-mobile-header .site-footer { padding-bottom: calc(22px + var(--mobile-bottom-nav-height, 72px)); } @media (max-width: 880px) { .fixed-header .header-mobile-search-close { position: static; width: 68px; min-width: 68px; height: 52px; border: 0; border-radius: 999px; background: transparent; color: #232030; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 15px; font-weight: 750; line-height: 1; letter-spacing: 0; cursor: pointer; z-index: 16; box-shadow: none; transition: color 0.16s ease, background-color 0.16s ease; } .fixed-header .header-mobile-search-close-icon { width: 18px; height: 18px; display: block; pointer-events: none; } .fixed-header .header-mobile-search-close:hover, .fixed-header .header-mobile-search-close:focus-visible { color: #232030; background: #DCDDD4; animation: none; filter: none; } .fixed-header .header-mobile-search-close:focus-visible { outline: 2px solid var(--popup-focus, #3f6a60); outline-offset: 2px; } .fixed-header .header-mobile-search-page[aria-hidden="true"] .header-mobile-search-close { display: none; } } body.is-mobile-search-open { overflow: hidden; touch-action: none; } body.is-mobile-search-open .jp-cookie-banner { display: none !important; } @media (max-width: 880px) { body.header-burger-panel-open::before, body.header-cart-panel-open::before { display: none !important; } body.header-burger-panel-open .fixed-header .header-burger-backdrop.is-open, body.header-cart-panel-open .fixed-header .header-burger-backdrop.is-open { display: block !important; position: fixed !important; top: var(--header-side-panel-top, 78px) !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: auto !important; background: var(--popup-overlay) !important; opacity: 1 !important; pointer-events: auto !important; z-index: 48 !important; } body.header-burger-panel-open .fixed-header .header-burger-panel, body.header-cart-panel-open .fixed-header .header-cart-panel { top: var(--header-side-panel-top, 78px) !important; bottom: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 50 !important; } body.header-burger-panel-open .fixed-header .header-mobile-414, body.header-cart-panel-open .fixed-header .header-mobile-414 { z-index: 60 !important; } body.header-burger-panel-open, body.header-cart-panel-open { overflow: hidden !important; overscroll-behavior: contain; } body.header-burger-panel-open .fixed-header .header-burger-body { overscroll-behavior: contain; padding-bottom: calc(var(--mobile-bottom-nav-height, 72px) + env(safe-area-inset-bottom, 0px) + 16px) !important; } .fixed-header .header-burger-group-primary { margin-top: 4px; min-height: 242px; } } .fixed-header .header-categories-sheet-grip { display: none; } @keyframes header-categories-sheet-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 880px) { html.header-categories-sheet-open, body.header-categories-sheet-open { overflow: hidden; overscroll-behavior: contain; touch-action: none; } body.header-categories-sheet-open .jp-cookie-banner { display: none !important; } .fixed-header .header-categories-backdrop.is-mobile-sheet { position: fixed !important; inset: 0 auto auto 0 !important; width: 100vw !important; height: 100dvh !important; background: var(--popup-overlay) !important; backdrop-filter: blur(2px); z-index: 48 !important; } .fixed-header .header-categories-panel.is-mobile-sheet { --header-categories-sheet-top: clamp(84px, 13dvh, 128px); --header-categories-sheet-bg: #dcddd4; position: fixed !important; inset: auto 0 0 0 !important; width: 100vw !important; max-width: 100vw !important; height: calc(100dvh - var(--header-categories-sheet-top)) !important; max-height: calc(100dvh - var(--header-categories-sheet-top)) !important; min-height: 0; padding: 8px 10px max(18px, env(safe-area-inset-bottom)); display: flex !important; flex-direction: column; gap: 0; border: 0; border-radius: var(--popup-sheet-radius, 22px 22px 0 0); background: var(--header-categories-sheet-bg); box-shadow: 0 -18px 44px rgba(35, 32, 48, 0.22); overflow: hidden; animation: header-categories-sheet-rise 0.24s cubic-bezier(0.22, 1, 0.36, 1) both !important; transform: translateY(0); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; z-index: 50 !important; } .fixed-header .header-categories-panel.is-mobile-sheet.is-sheet-dragging, .fixed-header .header-categories-panel.is-mobile-sheet.is-sheet-settling, .fixed-header .header-categories-panel.is-mobile-sheet.is-sheet-closing { animation: none !important; transform: translateY(var(--header-categories-sheet-drag-y, 0px)) !important; will-change: transform; } .fixed-header .header-categories-panel.is-mobile-sheet.is-sheet-dragging { transition: none !important; } .fixed-header .header-categories-panel.is-mobile-sheet.is-sheet-settling { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important; } .fixed-header .header-categories-panel.is-mobile-sheet.is-sheet-closing { transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1) !important; } .fixed-header .header-categories-panel.is-mobile-sheet .header-categories-sheet-grip { flex: 0 0 44px; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--header-categories-sheet-bg); color: rgba(35, 32, 48, 0.24); display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; appearance: none; } .fixed-header .header-categories-panel.is-mobile-sheet.is-sheet-dragging .header-categories-sheet-grip { cursor: grabbing; } .fixed-header .header-categories-panel.is-mobile-sheet .header-categories-sheet-grip span { width: 48px; height: 5px; border-radius: 999px; background: currentColor; display: block; } html.header-notifications-sheet-open, body.header-notifications-sheet-open { overflow: hidden; overscroll-behavior: contain; touch-action: none; } body.header-notifications-sheet-open .jp-cookie-banner { display: none !important; } .fixed-header .header-notifications-panel.is-mobile-sheet { --header-notifications-sheet-top: clamp(92px, 14dvh, 136px); position: fixed !important; inset: auto 0 0 0 !important; width: 100vw !important; max-width: 100vw !important; height: calc(100dvh - var(--header-notifications-sheet-top)) !important; max-height: calc(100dvh - var(--header-notifications-sheet-top)) !important; min-height: 0; padding: 8px 10px max(18px, env(safe-area-inset-bottom)); display: flex !important; flex-direction: column; gap: 0; border: 0; border-radius: var(--popup-sheet-radius, 22px 22px 0 0); background: var(--popup-bg); box-shadow: 0 -18px 44px rgba(35, 32, 48, 0.18); overflow: hidden; animation: header-categories-sheet-rise 0.24s cubic-bezier(0.22, 1, 0.36, 1) both !important; transform: translateY(0); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; z-index: 50 !important; } .fixed-header .header-notifications-panel.is-mobile-sheet.is-sheet-dragging, .fixed-header .header-notifications-panel.is-mobile-sheet.is-sheet-settling, .fixed-header .header-notifications-panel.is-mobile-sheet.is-sheet-closing { animation: none !important; transform: translateY(var(--header-notifications-sheet-drag-y, 0px)) !important; will-change: transform; } .fixed-header .header-notifications-panel.is-mobile-sheet.is-sheet-dragging { transition: none !important; } .fixed-header .header-notifications-panel.is-mobile-sheet.is-sheet-settling { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important; } .fixed-header .header-notifications-panel.is-mobile-sheet.is-sheet-closing { transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1) !important; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-panel-inner { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: transparent; overflow: hidden; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-sheet-grip { flex: 0 0 44px; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--popup-bg); color: rgba(35, 32, 48, 0.24); display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; appearance: none; } .fixed-header .header-notifications-panel.is-mobile-sheet.is-sheet-dragging .header-notifications-sheet-grip { cursor: grabbing; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-sheet-grip span { width: 48px; height: 5px; border-radius: 999px; background: currentColor; display: block; } html.header-account-sheet-open, body.header-account-sheet-open { overflow: hidden; overscroll-behavior: contain; touch-action: none; } body.header-account-sheet-open .jp-cookie-banner { display: none !important; } .fixed-header .header-account-panel.is-mobile-sheet { position: fixed !important; inset: auto 0 0 0 !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; max-height: min(86dvh, calc(100dvh - 32px)) !important; min-height: 0; padding: 6px 10px max(18px, env(safe-area-inset-bottom)); display: flex !important; flex-direction: column; gap: 0; border: 0; border-radius: var(--popup-sheet-radius, 22px 22px 0 0) !important; background: var(--popup-bg); box-shadow: 0 -18px 44px rgba(35, 32, 48, 0.18); overflow: hidden; animation: header-categories-sheet-rise 0.24s cubic-bezier(0.22, 1, 0.36, 1) both !important; transform: translateY(0); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; z-index: 50 !important; } .fixed-header .header-account-panel.is-mobile-sheet::before { display: none; } .fixed-header .header-account-panel.is-mobile-sheet.is-sheet-dragging, .fixed-header .header-account-panel.is-mobile-sheet.is-sheet-settling, .fixed-header .header-account-panel.is-mobile-sheet.is-sheet-closing { animation: none !important; transform: translateY(var(--header-account-sheet-drag-y, 0px)) !important; will-change: transform; } .fixed-header .header-account-panel.is-mobile-sheet.is-sheet-dragging { transition: none !important; } .fixed-header .header-account-panel.is-mobile-sheet.is-sheet-settling { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important; } .fixed-header .header-account-panel.is-mobile-sheet.is-sheet-closing { transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1) !important; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-panel-inner { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: transparent; overflow-x: hidden; overflow-y: auto; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-sheet-grip { flex: 0 0 44px; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--popup-bg); color: rgba(35, 32, 48, 0.24); display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; appearance: none; } .fixed-header .header-account-panel.is-mobile-sheet.is-sheet-dragging .header-account-sheet-grip { cursor: grabbing; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-sheet-grip span { width: 48px; height: 5px; border-radius: 999px; background: currentColor; display: block; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-profile { flex: 0 0 auto; padding: 12px 14px 16px; gap: 12px; border-bottom: 1px solid var(--popup-border); } .fixed-header .header-account-panel.is-mobile-sheet .header-account-profile .header-account-avatar { flex-basis: 52px; width: 52px; height: 52px; line-height: 52px; font-size: 18px; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-profile-name { font-size: 18px; line-height: 23px; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-profile-link { font-size: 14px; line-height: 18px; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-section { flex: 0 0 auto; padding: 4px 0; border-top: 1px solid var(--popup-border); } .fixed-header .header-account-panel.is-mobile-sheet .header-account-item { min-height: 58px; padding: 0 16px; gap: 12px; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-item-icon { width: 30px; height: 30px; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-item-icon img, .fixed-header .header-account-panel.is-mobile-sheet .header-account-item-icon svg { width: 22px; height: 22px; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-item-text { font-size: 18px; line-height: 23px; } .fixed-header .header-account-panel.is-mobile-sheet .header-account-item-note { font-size: 13px; line-height: 17px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-panel-head { flex: 0 0 auto; padding: 8px 10px 14px; border-bottom: 1px solid var(--popup-border); } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-panel-title { font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-panel-body { flex: 1 1 auto; min-height: 0; max-height: none; padding: 12px 0 4px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-empty { flex: 1 1 auto; min-height: min(52dvh, 430px); margin: 0; padding: 26px 18px 30px; border-radius: 0; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-empty-illustration { width: min(258px, 88%); } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-empty-copy { max-width: 282px; gap: 6px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-empty-title { font-size: 18px; line-height: 23px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-empty-text { font-size: 13px; line-height: 19px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-list { gap: 8px; padding: 0; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card { border-radius: 16px; gap: 12px; padding: 14px; background: transparent; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card:hover, .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card:focus-visible { background: var(--header-notification-hover-surface); box-shadow: inset 0 0 0 1px var(--header-notification-line); } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card-icon { width: 28px; height: 28px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card-icon-img { width: 16px; height: 16px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card-copy { gap: 4px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card-meta, .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card-timing { font-size: 10px; line-height: 13px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card-title { font-size: 15px; line-height: 19px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card-text { font-size: 12px; line-height: 17px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card-action { font-size: 11px; line-height: 14px; } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card.is-unread { background: var(--header-notification-surface); box-shadow: inset 0 0 0 1px var(--header-notification-line); } .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card.is-unread:hover, .fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-card.is-unread:focus-visible { background: var(--header-notification-hover-surface); } .fixed-header .header-categories-panel.is-mobile-sheet .header-categories-sidebar { width: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; padding: 0; border-radius: 0; background: transparent; overflow: hidden; } .fixed-header .header-categories-panel.is-mobile-sheet .header-categories-tabs { width: 100%; height: 100%; padding: 6px 0 18px; display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; scrollbar-gutter: auto; overscroll-behavior: contain; } .fixed-header .header-categories-panel.is-mobile-sheet .header-categories-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; } .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab { min-height: 64px; flex: 0 0 64px; border-radius: 22px; padding: 0 48px 0 18px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; background: transparent; color: #232030; font-family: var(--font-heading); font-size: 19px; font-weight: 820; line-height: 1.12; letter-spacing: 0; transition: background-color 0.18s ease; } .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab[data-recommended-category="true"] { display: none !important; } .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab.is-hovering, .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab.is-active { background: transparent; transform: none; box-shadow: none; } .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab:active, .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab:focus-visible { background: #faf1ea; } .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.46); outline-offset: -2px; } @media (hover: hover) and (pointer: fine) { .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab:hover, .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab.is-hovering { background: #faf1ea; } } .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab::after { right: 20px; color: #232030; opacity: 0.7; font-family: var(--font-body); font-size: 28px; font-weight: 500; line-height: 1; } .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab-icon { width: 44px; height: 44px; flex-basis: 44px; } .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab-icon img { width: 34px; height: 34px; } .fixed-header .header-categories-panel.is-mobile-sheet .header-category-tab-label { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fixed-header .header-categories-panel.is-mobile-sheet .header-categories-all, .fixed-header .header-categories-panel.is-mobile-sheet .header-categories-content { display: none !important; } } .fixed-header .header-search-list { gap: 12px; } .fixed-header .header-search-section { display: flex; flex-direction: column; gap: 8px; } .fixed-header .header-search-section__title { margin: 0 10px; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 17px; } .fixed-header .header-search-section__rows { display: flex; flex-direction: column; gap: 0; } .page { padding-top: 99px; } @media (max-width: 720px) { .page { padding-top: 103px; } } /* [bundle] /styles/components/header-desktop-flex.css */ @media (min-width: 721px) { .fixed-header { height: auto !important; min-height: 73px; min-width: 0 !important; } .fixed-header .header-desktop-shell { position: relative !important; top: auto !important; left: auto !important; transform: none !important; transform-origin: initial !important; width: 100% !important; max-width: 1440px; height: auto !important; margin: 0 auto; padding: 0 clamp(16px, 2vw, 40px); pointer-events: auto !important; box-sizing: border-box; z-index: var(--header-layer-chrome); isolation: isolate; } .fixed-header > svg { display: none !important; } .fixed-header::before { right: calc(-1 * var(--header-scrollbar-compensation, 0px)) !important; width: auto !important; height: 100% !important; transform: none !important; } .fixed-header::after { left: 0 !important; right: calc(-1 * var(--header-scrollbar-compensation, 0px)) !important; width: auto !important; transform: none !important; } .fixed-header .header-desktop-top { position: relative !important; inset: auto !important; display: flex !important; align-items: center; gap: 10px; height: 73px; width: 100%; z-index: 1; } .fixed-header .header-desktop-home, .fixed-header .header-desktop-categories, .fixed-header .header-desktop-search-shell, .fixed-header .header-desktop-wishlist, .fixed-header .header-desktop-bell, .fixed-header .header-desktop-cart, .fixed-header .header-desktop-signin, .fixed-header .header-desktop-burger { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; pointer-events: auto !important; flex: 0 0 auto; isolation: isolate; } .fixed-header .header-desktop-home { width: 109px; height: 52px; display: flex; align-items: center; } .fixed-header .header-desktop-logo { width: 109px; height: 42px; display: block; object-fit: contain; } .fixed-header .header-desktop-categories { width: 152px; height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: flex-start; padding: 0 24px; box-sizing: border-box; gap: 12px; } .fixed-header .header-desktop-search-shell { position: relative !important; flex: 1 1 auto !important; width: auto !important; min-width: 200px; height: 52px; } .fixed-header .header-desktop-wishlist, .fixed-header .header-desktop-bell, .fixed-header .header-desktop-cart, .fixed-header .header-desktop-burger { width: 52px; height: 52px; } .fixed-header .header-desktop-signin { width: 86px; height: 52px; } .fixed-header .header-desktop-nav { display: none !important; } .fixed-header .header-desktop-nav-chip { position: relative !important; left: auto !important; top: auto !important; transform: translateY(-3px); flex: 0 0 auto; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 14px; font-weight: 600; color: #232030; cursor: pointer; overflow: visible; isolation: isolate; border-radius: 999px; } .fixed-header .header-desktop-nav-chip::before { content: ""; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; border-radius: 999px; background: transparent; transition: background-color 0.18s ease; z-index: 0; pointer-events: none; } .fixed-header .header-desktop-nav-chip > * { position: relative; z-index: 1; } .fixed-header .header-desktop-nav-chip.is-hover::before, .fixed-header .header-desktop-nav-chip:hover::before, .fixed-header .header-desktop-nav-chip:focus-visible::before { background: #dcddd4; } .fixed-header .header-desktop-divider { position: static !important; left: auto !important; } .fixed-header .header-hitboxes { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: 1440px; height: 100% !important; margin: 0 auto !important; transform: none !important; transform-origin: initial !important; z-index: var(--header-layer-hitboxes) !important; } body.is-ai-panel-open .fixed-header { right: 360px !important; transition: right 480ms cubic-bezier(0.16, 1, 0.3, 1); } } .fixed-header { transition: right 480ms cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 721px) and (max-width: 960px) { body.is-ai-panel-open .fixed-header { right: 0 !important; } } @media (min-width: 721px) { body.is-category-header-condensed .fixed-header, body.page--search.is-search-header-condensed .fixed-header { min-height: 73px; } body.is-category-header-condensed .fixed-header .header-desktop-nav, body.page--search.is-search-header-condensed .fixed-header .header-desktop-nav { display: none; } } @media (min-width: 721px) and (max-width: 1200px) { .fixed-header .header-desktop-wishlist { display: flex !important; } .fixed-header .header-desktop-bell { display: none !important; } } @media (min-width: 881px) and (max-width: 959px) { .fixed-header .header-desktop-categories { display: flex !important; width: 52px; min-width: 52px; padding: 0; justify-content: center; gap: 0; } .fixed-header .header-desktop-categories-label { display: none !important; } .fixed-header .header-desktop-categories-icon { width: 24px; height: 24px; } .fixed-header .header-desktop-search-shell { min-width: 0; } .fixed-header .header-desktop-search-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fixed-header .header-desktop-search-submit { width: 52px; min-width: 52px; max-width: 52px; border-radius: 26px; overflow: hidden; } .fixed-header .header-desktop-search-submit-label { display: none !important; } .fixed-header .header-desktop-search-submit-icon { left: 16px !important; top: 12px !important; } } @media (min-width: 721px) and (max-width: 880px) { .fixed-header.is-mobile-414 { height: 68px !important; min-height: 68px !important; } } @media (min-width: 721px) and (max-width: 879px) { .fixed-header .header-desktop-top { gap: 6px !important; } .fixed-header .header-desktop-shell { padding: 0 12px !important; } .fixed-header .header-desktop-signin { display: none !important; } } @media (min-width: 721px) and (max-width: 1559px) { body.is-ai-panel-open .fixed-header .header-desktop-wishlist { display: flex !important; } body.is-ai-panel-open .fixed-header .header-desktop-search-shell { min-width: 150px; } } @media (min-width: 721px) and (max-width: 1319px) { body.is-ai-panel-open .fixed-header .header-desktop-categories { display: none !important; } } @media (min-width: 721px) and (max-width: 1239px) { body.is-ai-panel-open .fixed-header .header-desktop-top { gap: 6px !important; } body.is-ai-panel-open .fixed-header:not(.is-authenticated) .header-desktop-signin { display: none !important; } } @media (min-width: 721px) and (max-width: 1719px) { body.is-ai-panel-open .fixed-header .header-desktop-bell { display: none !important; } } @media (min-width: 721px) { .fixed-header .header-desktop-search-text { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* [bundle] /styles/components/profile-avatars.css */ .jp-profile-avatar-art { background: transparent !important; background-image: none !important; color: var(--color-cream) !important; text-indent: 0 !important; overflow: visible; position: relative; isolation: isolate; } .jp-profile-avatar-art > img[data-jp-profile-avatar-img] { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; pointer-events: none; } .jp-profile-avatar-letter { position: absolute; inset: 50% auto auto 50%; z-index: 1; transform: translate(-50%, -50%); color: var(--color-cream); font-family: var(--font-display); font-size: 1em; font-weight: 750; line-height: 1; pointer-events: none; text-align: center; } .account-avatar.has-image, .gift-room-avatar.has-image, .gr-profile-card__avatar.has-image, .gr-share-person__avatar.has-image { background-position: center; background-repeat: no-repeat; background-size: cover; color: transparent; text-indent: -9999px; overflow: hidden; } .account-avatar.jp-profile-avatar-art, .gr-profile-card__avatar.jp-profile-avatar-art, .gift-room-avatar.jp-profile-avatar-art, .fixed-header .header-account-avatar.jp-profile-avatar-art, .fixed-header .header-mobile-account-avatar.jp-profile-avatar-art, .fixed-header .header-burger-signin-avatar.jp-profile-avatar-art { border: 0; box-shadow: none; } .gift-room-avatar.jp-profile-avatar-art { background: transparent !important; padding: 0; } .gift-room-avatar.jp-profile-avatar-art .jp-profile-avatar-letter, .fixed-header .header-mobile-account-avatar.jp-profile-avatar-art .jp-profile-avatar-letter, .fixed-header .header-burger-signin-avatar.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 0.9em; } .gift-room-avatar--lg.jp-profile-avatar-art .jp-profile-avatar-letter, .fixed-header .header-account-avatar.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 0.94em; } .gr-profile-card__avatar.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 1.16em; } .account-avatar.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 1.24em; } .account-avatar--hero.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 1.36em; } .fixed-header .header-account-avatar.jp-profile-avatar-art { line-height: 1; } .fixed-header .header-burger-signin-avatar.is-account-avatar.jp-profile-avatar-art { border: 0; } /* [bundle] /styles/components/hero.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body.component-preview-body .hero-preview-shell { width: min(100%, 1440px); } .hero-home { --hero-card-height: 410px; position: relative; padding-bottom: 29px; width: var(--homepage-shell-width); margin-inline: auto; max-width: var(--jp-page-shell-max, 1372px); overflow: visible; transform: translateX(0); } .hero-home--compact { --hero-card-height: 240px; padding-bottom: 0; } .hero-home--compact .hero-home__actions, .hero-home--compact .hero-home__nav, .hero-home--compact .hero-home__arrow, .hero-home--compact .hero-home__dots { display: none !important; } .hero-home--compact .hero-home__title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.16; letter-spacing: 0; } .hero-home--compact .hero-home__subtitle { font-size: clamp(14px, 1.1vw, 16px); margin-top: 8px; } @media (max-width: 960px) { .hero-home--compact { --hero-card-height: 200px; } } @media (max-width: 600px) { .hero-home--compact { --hero-card-height: 180px; } } .hero-home__viewport { position: relative; width: 100%; margin: 0; padding: 6px 0 8px; box-sizing: border-box; overflow: hidden; z-index: 0; } .hero-home__track { display: flex; width: 100%; gap: 0; transition: transform 0.62s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: transform; } .hero-home__slide { flex: 0 0 100%; width: 100%; min-width: 0; padding-inline: 6px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; align-items: start; } .hero-banner-card { position: relative; min-width: 0; min-height: var(--hero-card-height); border-radius: 30px; overflow: hidden; box-shadow: none; transition: box-shadow 0.2s ease; } .hero-banner-card:hover { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .hero-banner-card--main { display: grid; grid-template-columns: minmax(0, 1fr) 327px; background: #f8f1eb; } .hero-banner-card--main.hero-banner-card--text-only { grid-template-columns: 1fr; } .hero-banner-card__lead { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--color-cream); } .hero-banner-card__lead--green { background: #3f6a60; padding: 71px 17px 34px; } .hero-banner-card__lead--blue { background: linear-gradient(135deg, #3f5a8e 0%, #2e4570 100%); padding: 56px 64px; } .hero-banner-card__lead--brown { background: linear-gradient(135deg, #7a5a3f 0%, #5b402b 100%); padding: 56px 64px; } .hero-banner-card__lead--centered { justify-content: center; } .hero-banner-card__title { max-width: 548px; margin: 0; color: inherit; font-family: var(--font-body); font-size: 42px; font-weight: 800; line-height: 1.18; letter-spacing: 0; } .hero-banner-card__subtitle { max-width: 548px; margin: 20px 0 0; color: rgba(255, 249, 241, 0.96); font-family: var(--font-body); font-size: 21px; font-weight: 700; line-height: 1.34; } .hero-banner-card__eyebrow { max-width: 548px; margin: 20px 0 0; color: rgba(255, 249, 241, 0.92); font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.45; } .hero-banner-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; } .hero-banner-card--feature .hero-banner-card__actions { flex-wrap: nowrap; } .hero-banner-card__button { min-width: 192px; height: 62px; border: 0; border-radius: 999px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 16px; font-weight: 700; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .hero-banner-card__button--primary { background: #f1641e; color: var(--color-cream); } .hero-banner-card__button--secondary { background: var(--color-cream); color: #232030; } .hero-banner-card__button:hover, .hero-banner-card__button:focus-visible { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: none; } .hero-banner-card__button:active { transform: translateY(0); } .hero-banner-card__button:focus-visible { outline: 2px solid rgba(255, 249, 241, 0.45); outline-offset: 2px; } .hero-banner-card__media { min-height: var(--hero-card-height); border-radius: 0; background: linear-gradient(135deg, rgba(255, 249, 241, 0.24), rgba(63, 106, 96, 0.18)); } .hero-banner-card--feature { isolation: isolate; } .hero-banner-card__lead--feature { position: relative; z-index: 2; } .hero-banner-card__media--mobile { display: none; } .hero-banner-card--admin-live .hero-banner-card__title { font-size: var(--hero-live-title-size-desktop, 42px); font-weight: var(--hero-live-title-weight-desktop, 800); color: var(--hero-live-title-color-desktop, #FFF9F1); } .hero-banner-card--admin-live .hero-banner-card__subtitle { font-size: var(--hero-live-subtitle-size-desktop, 21px); font-weight: var(--hero-live-subtitle-weight-desktop, 500); color: var(--hero-live-subtitle-color-desktop, #FFF9F1); } .hero-banner-card--admin-live .hero-banner-card__eyebrow { font-size: var(--hero-live-eyebrow-size-desktop, 15px); font-weight: var(--hero-live-eyebrow-weight-desktop, 500); color: var(--hero-live-eyebrow-color-desktop, rgba(255, 249, 241, 0.92)); } .hero-banner-card__media .media-slot__fallback, .hero-banner-card__side-media .media-slot__fallback { gap: 8px; color: rgba(35, 32, 48, 0.78); font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; } .hero-banner-card__media .media-slot__tag, .hero-banner-card__side-media .media-slot__tag { color: rgba(35, 32, 48, 0.6); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; } .hero-banner-card--side { background: radial-gradient(ellipse 141.63% 101.71% at 20% 20%, rgba(241, 100, 30, 0.12) 0%, rgba(241, 100, 30, 0) 55%), radial-gradient(ellipse 141.63% 101.71% at 80% 30%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, #f8f1eb 0%, #f8f1eb 100%); cursor: default; } .hero-banner-card--side:hover { box-shadow: none; } .hero-banner-card--side.hero-banner-card--is-link { cursor: pointer; } .hero-banner-card--side.hero-banner-card--is-link:hover { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .hero-banner-card__side-media { position: absolute; inset: 0; min-height: var(--hero-card-height); background: radial-gradient(ellipse 68.91% 71.36% at 30% 30%, rgba(241, 100, 30, 0.1) 0%, rgba(241, 100, 30, 0) 60%), linear-gradient(180deg, rgba(248, 241, 235, 0.88) 0%, rgba(248, 241, 235, 0.88) 100%); } .hero-banner-card__side-gradient { position: absolute; left: 0; right: 0; bottom: 0; height: 126px; background: linear-gradient(180deg, rgba(35, 32, 48, 0.03) 0%, #232030 100%); pointer-events: none; } .hero-banner-card__tag { position: absolute; top: 12px; right: 12px; height: 28px; padding: 7px 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-cream); color: #232030; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; z-index: 2; } .hero-banner-card__play { position: absolute; right: 12px; bottom: 12px; width: 48px; height: 48px; border: 0; border-radius: 999px; padding: 0; display: none; align-items: center; justify-content: center; background: rgba(230, 236, 243, 0.7); cursor: default; pointer-events: none; z-index: 2; transition: box-shadow 0.2s ease, background-color 0.2s ease; } .hero-banner-card--has-video .hero-banner-card__play { display: inline-flex; } .hero-banner-card__play svg { display: block; } .hero-banner-card__play:hover, .hero-banner-card__play:focus-visible { background: var(--color-cream); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .hero-banner-card__play:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .hero-banner-card__side-copy { position: absolute; left: 20px; right: 84px; bottom: 20px; z-index: 2; color: var(--color-cream); } .hero-banner-card__side-copy--static { right: 22px; bottom: 24px; } .hero-banner-card__side-title { margin: 0; color: inherit; font-family: var(--font-body); font-size: 26px; font-weight: 700; line-height: 1.18; } .hero-banner-card__side-subtitle { margin: 8px 0 0; color: rgba(255, 249, 241, 0.92); font-family: var(--font-body); font-size: 21px; font-weight: 500; line-height: 1.3; } .hero-banner-card--blue-side { background: linear-gradient(145deg, #5e79ae 0%, #3e5687 100%); } .hero-banner-card--brown-side { background: linear-gradient(145deg, #a36e45 0%, #7a5233 100%); } .hero-home__arrow { position: absolute; top: var(--hero-arrow-top, 195px); width: 54px; height: 72px; border: 0; border-radius: 999px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(220, 221, 212, 0.7); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; z-index: 3; transform: translateY(-50%); } .hero-home__arrow-icon { width: 10px; height: 16px; display: block; } .hero-home__arrow--prev .hero-home__arrow-icon { transform: scaleX(-1); } .hero-home__arrow--prev { left: -10px; } .hero-home__arrow--next { right: -10px; } .hero-home__arrow:hover, .hero-home__arrow:focus-visible { background: var(--color-cream); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: translateY(calc(-50% - 1px)); } .hero-home__arrow:active { transform: translateY(-50%); } .hero-home__arrow:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .hero-home__indicators { position: absolute; left: 50%; top: var(--hero-indicators-top, calc(6px + var(--hero-card-height) + 10px)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; z-index: 3; } .hero-home__indicator { position: relative; width: 14px; height: 14px; border: 0; border-radius: 999px; padding: 0; background: #232030; cursor: pointer; transition: width 0.28s ease; } .hero-home__indicator:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .hero-home__indicator.is-active { width: 37px; } .hero-home__indicator-inner { position: absolute; left: 4px; top: 50%; width: 29px; height: 6px; border-radius: 999px; background: var(--color-cream); transform: translateY(-50%); opacity: 0; transition: opacity 0.2s ease; } .hero-home__indicator.is-active .hero-home__indicator-inner { opacity: 1; } @media (max-width: 1439px) and (min-width: 1143px) { .hero-home { --hero-card-height: 410px; padding-bottom: 29px; width: var(--homepage-shell-width); } .hero-home__viewport { width: 100%; margin: 0; padding: 6px 0 8px; } .hero-home__slide { grid-template-columns: minmax(0, 1fr) clamp(304px, 29vw, 420px); gap: 20px; } .hero-banner-card--feature { grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 327px); } .hero-banner-card--feature .hero-banner-card__lead--feature { padding: 54px 18px 34px; } .hero-banner-card--feature .hero-banner-card__title, .hero-banner-card--feature .hero-banner-card__subtitle, .hero-banner-card--feature .hero-banner-card__eyebrow { max-width: 500px; } .hero-banner-card--feature .hero-banner-card__title { font-size: clamp(34px, 3.3vw, 42px); } .hero-banner-card--feature .hero-banner-card__subtitle { font-size: clamp(18px, 1.9vw, 21px); } .hero-banner-card--feature .hero-banner-card__eyebrow { font-size: 15px; } .hero-banner-card__side-title { font-size: clamp(24px, 2.15vw, 26px); } .hero-banner-card__side-subtitle { font-size: clamp(18px, 1.85vw, 21px); } .hero-home__arrow { display: inline-flex; } .hero-home__arrow--prev { left: -10px; } .hero-home__arrow--next { right: -10px; } } @media (max-width: 1142px) and (min-width: 721px) { .hero-home { --hero-viewport-width: calc(100% - 48px); --hero-viewport-shell-width: calc(var(--hero-viewport-width) + 24px); --hero-card-height: 332px; width: var(--hero-viewport-width); margin-inline: auto; padding-bottom: 22px; } .hero-home__viewport { width: 100%; margin: 0; padding: 6px 6px 8px; box-sizing: border-box; overflow: hidden; } .hero-home__slide { grid-template-columns: 1fr; gap: 0; } .hero-home__slide > .hero-banner-card--side { display: none; } .hero-banner-card, .hero-banner-card__media, .hero-banner-card__side-media { min-height: var(--hero-card-height); border-radius: 30px; } .hero-banner-card--feature { grid-template-columns: minmax(0, 1fr) clamp(266px, 30%, 327px); } .hero-banner-card--feature .hero-banner-card__lead--feature { min-height: var(--hero-card-height); padding: 30px 17px 25px; } .hero-banner-card--feature .hero-banner-card__title { max-width: 438px; font-size: 34px; } .hero-banner-card--feature .hero-banner-card__subtitle { max-width: 438px; margin-top: 15px; font-size: 18px; line-height: 1.34; } .hero-banner-card--feature .hero-banner-card__eyebrow { max-width: 438px; margin-top: 12px; font-size: 15px; line-height: 1.34; } .hero-banner-card--feature .hero-banner-card__actions { flex-wrap: nowrap; width: 100%; gap: 12px; padding-inline: 8px; box-sizing: border-box; } .hero-banner-card--feature .hero-banner-card__button { width: clamp(164px, calc(50% - 10px), 192px); min-width: 0; height: 62px; } .hero-banner-card__media--desktop { display: block; min-height: var(--hero-card-height); } .hero-banner-card--feature .hero-banner-card__media--desktop { border-radius: 0 30px 30px 0; } .hero-banner-card--text-only .hero-banner-card__lead--blue, .hero-banner-card--text-only .hero-banner-card__lead--brown { min-height: 332px; padding: 56px 40px; } .hero-banner-card__lead--green, .hero-banner-card__lead--blue, .hero-banner-card__lead--brown { min-height: 0; } .hero-home__indicators { bottom: 0; } .hero-home__arrow { top: var(--hero-arrow-top, calc(6px + (var(--hero-card-height) / 2))); } .hero-home__arrow--prev { left: 0; } .hero-home__arrow--next { right: 0; } } @media (max-width: 720px) { .page--homepage .hero-home.section--tight { padding-top: 0 !important; padding-bottom: 24px; } .hero-banner-card--admin-live .hero-banner-card__title { font-size: var(--hero-live-title-size-mobile, 28px); font-weight: var(--hero-live-title-weight-mobile, 700); color: var(--hero-live-title-color-mobile, #FFF9F1); } .hero-banner-card--admin-live .hero-banner-card__subtitle { font-size: var(--hero-live-subtitle-size-mobile, 17px); font-weight: var(--hero-live-subtitle-weight-mobile, 400); color: var(--hero-live-subtitle-color-mobile, #FFF9F1); } .hero-banner-card--admin-live .hero-banner-card__eyebrow { font-size: var(--hero-live-eyebrow-size-mobile, 15px); font-weight: var(--hero-live-eyebrow-weight-mobile, 500); color: var(--hero-live-eyebrow-color-mobile, rgba(255, 249, 241, 0.92)); } .hero-home { --hero-viewport-width: calc(100% - 40px); --hero-viewport-shell-width: calc(var(--hero-viewport-width) + 24px); --hero-card-height: 320px; width: var(--hero-viewport-width); margin-inline: auto; padding-bottom: 24px; } .hero-home__viewport { width: 100%; margin: 0; padding: 6px 0 8px; box-sizing: border-box; overflow: hidden; } .hero-home__slide { grid-template-columns: 1fr; gap: 0; padding-inline: 6px; } .hero-home__slide > .hero-banner-card--side { display: none; } .hero-banner-card, .hero-banner-card__media, .hero-banner-card__side-media { min-height: var(--hero-card-height); border-radius: 24px; } .hero-banner-card--feature { position: relative; display: block; background: var(--color-cream); min-height: var(--hero-card-height); height: var(--hero-card-height); aspect-ratio: auto; } .hero-banner-card--feature .hero-banner-card__lead--feature { position: absolute; left: 0; top: 0; width: 100%; height: 180px; min-height: 0; padding: 0; display: block; background: transparent !important; background-image: none !important; text-align: left; z-index: 2; } .hero-banner-card--feature .hero-banner-card__lead--feature::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 180px; background-image: var(--hero-feature-mobile-accent, none), var(--hero-feature-mobile-blob, url("/assets/header-icons/hero-feature-mobile-blob.svg")); background-repeat: no-repeat, no-repeat; background-position: right bottom, center top; background-size: 180px auto, 100% 100%; z-index: 0; } .hero-banner-card--feature .hero-banner-card__title { position: absolute; left: 50%; top: 15px; width: min(calc(100% - 40px), 320px); max-width: min(calc(100% - 40px), 320px); margin: 0; font-size: 28px; line-height: 1.14; font-weight: 700; text-align: center; transform: translateX(-50%); z-index: 1; } .hero-banner-card--feature .hero-banner-card__subtitle { position: absolute; left: 50%; top: 59px; width: min(calc(100% - 54px), 320px); max-width: min(calc(100% - 54px), 320px); margin: 0; font-size: 17px; font-weight: 400; line-height: 1.18; text-align: center; transform: translateX(-50%); z-index: 1; } .hero-banner-card--feature .hero-banner-card__eyebrow { display: none; } .hero-banner-card--feature .hero-banner-card__actions { display: block; margin: 0; position: relative; z-index: 1; } .hero-banner-card--feature .hero-banner-card__button { position: absolute; font-size: 16px; z-index: 3; } .hero-banner-card--feature .hero-banner-card__button--primary { display: none; } .hero-banner-card--feature .hero-banner-card__button--secondary { top: 273px; left: 5px; width: 174px; min-width: 174px; height: 42px; padding: 0 17px; } .hero-banner-card__media--desktop { display: none; } .hero-banner-card__media--mobile { display: block; position: absolute; left: 0; top: 101px; width: 100%; height: 219px; min-height: 0; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(255, 249, 241, 0.98) 0%, rgba(241, 245, 252, 0.98) 100%); z-index: 1; } .hero-banner-card--feature.hero-banner-card--mobile-empty .hero-banner-card__lead--feature { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 15px 20px 0; box-sizing: border-box; background: transparent !important; } .hero-banner-card--feature.hero-banner-card--mobile-empty .hero-banner-card__title { position: relative; left: auto; top: auto; width: min(calc(100% - 40px), 320px); max-width: min(calc(100% - 40px), 320px); margin: 0 auto; transform: none; } .hero-banner-card--feature.hero-banner-card--mobile-empty .hero-banner-card__subtitle { position: relative; left: auto; top: auto; width: min(calc(100% - 54px), 320px); max-width: min(calc(100% - 54px), 320px); margin: 10px auto 0; transform: none; } .hero-banner-card--feature.hero-banner-card--mobile-empty .hero-banner-card__media--mobile.hero-banner-card__media--empty { top: 124px; height: 196px; } .hero-banner-card--feature .hero-banner-card__media--mobile { min-height: 0; } .hero-banner-card__media--mobile .media-slot__fallback { gap: 8px; color: rgba(35, 32, 48, 0.78); font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; } .hero-banner-card__media--mobile .media-slot__tag { color: rgba(35, 32, 48, 0.6); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; } .hero-banner-card--text-only .hero-banner-card__lead--blue, .hero-banner-card--text-only .hero-banner-card__lead--brown { min-height: 320px; padding: 42px 24px 28px; } .hero-banner-card--text-only .hero-banner-card__title { font-size: 28px; line-height: 1.14; } .hero-banner-card--text-only .hero-banner-card__subtitle { margin-top: 16px; font-size: 17px; line-height: 1.35; } .hero-banner-card--admin-live .hero-banner-card__actions { display: block; margin: 0; } .hero-banner-card--admin-live .hero-banner-card__button--mobile-preview { position: absolute; top: 273px; left: 5px; width: 174px; min-width: 174px; height: 42px; padding: 0 17px; display: inline-flex; z-index: 3; } .hero-banner-card--admin-live .hero-banner-card__button--primary { display: none; } .hero-banner-card__side-title { font-size: 22px; } .hero-banner-card__side-subtitle { font-size: 18px; } .hero-home__indicators { top: var(--hero-indicators-top, 336px); bottom: auto; } .hero-home__arrow { display: inline-flex; width: 48px; height: 64px; top: var(--hero-arrow-top, calc(6px + (var(--hero-card-height) / 2))); } .hero-home__arrow--prev { left: 0; } .hero-home__arrow--next { right: 0; } } .hero-banner-card--admin-live.hero-banner-card--text-only .hero-banner-card__actions { margin-top: 32px; } .hero-banner-card--admin-live .hero-banner-card__button--mobile-fallback { display: none; } @media (max-width: 720px) { .hero-banner-card--admin-live .hero-banner-card__button--mobile-fallback { display: inline-flex; } } /* [bundle] /styles/components/auth-home-hero.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .page--homepage > .auth-home-hero.section--tight { padding-top: 16px; padding-bottom: 24px; } body.page--homepage .auth-home-hero[data-recently-viewed-auth-only] { display: none; } body.page--homepage.is-homepage-authenticated .auth-home-hero[data-recently-viewed-auth-only] { display: block; } .auth-home-hero { --hero-card-height: 306px; position: relative; 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; overflow: visible; } .auth-home-hero__viewport { position: relative; width: 100%; padding: 6px 0 8px; box-sizing: border-box; overflow: visible; } .auth-home-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; align-items: start; } .auth-home-hero .hero-banner-card { min-height: var(--hero-card-height); box-shadow: none; transition: box-shadow 0.2s ease, transform 0.2s ease; } .auth-home-hero .hero-banner-card:hover, .auth-home-hero .hero-banner-card:has(:focus-visible) { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .auth-home-hero .hero-banner-card--main { grid-template-columns: minmax(0, 1fr) 327px; } .auth-home-hero .hero-banner-card__lead--green { padding: 46px 17px 34px; justify-content: flex-start; } .auth-home-hero .hero-banner-card__title, .auth-home-hero .hero-banner-card__subtitle, .auth-home-hero .hero-banner-card__eyebrow { max-width: 548px; } .auth-home-hero .hero-banner-card__actions { display: none; } .auth-home-hero .hero-banner-card__subtitle { margin-top: 10px; } .auth-home-hero .hero-banner-card__eyebrow { margin-top: 18px; } .auth-home-hero .hero-banner-card__media, .auth-home-hero .hero-banner-card__side-media { min-height: var(--hero-card-height); } .auth-home-hero .hero-banner-card__media { background: linear-gradient(135deg, rgba(255, 249, 241, 0.24), rgba(63, 106, 96, 0.18)); } .auth-home-hero .hero-banner-card--side { background: radial-gradient(ellipse 141.63% 101.71% at 20% 20%, rgba(241, 100, 30, 0.12) 0%, rgba(241, 100, 30, 0) 55%), radial-gradient(ellipse 141.63% 101.71% at 80% 30%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, #FFF9F1 0%, #fbfbfb 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); } .auth-home-hero .hero-banner-card--side:hover, .auth-home-hero .hero-banner-card--side:has(:focus-visible) { box-shadow: 0 0 4px rgba(35, 32, 48, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.18); } .auth-home-hero .hero-banner-card__side-media { background: radial-gradient(ellipse 68.91% 71.36% at 30% 30%, rgba(241, 100, 30, 0.1) 0%, rgba(241, 100, 30, 0) 60%), linear-gradient(180deg, rgba(255, 249, 241, 0.85) 0%, rgba(250, 250, 250, 0.85) 100%); } .auth-home-hero .hero-banner-card__side-copy { bottom: 20px; } .auth-home-hero .hero-banner-card__side-copy .hero-banner-card__side-title { font-size: 26px; } .auth-home-hero .hero-banner-card__side-copy .hero-banner-card__side-subtitle { font-size: 21px; } @media (max-width: 1439px) and (min-width: 1143px) { .auth-home-hero__layout { grid-template-columns: minmax(0, 1fr) clamp(320px, 31vw, 420px); gap: 20px; } .auth-home-hero .hero-banner-card--main { grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 327px); } .auth-home-hero .hero-banner-card__lead--green { padding: 40px 18px 30px; } .auth-home-hero .hero-banner-card__title { font-size: clamp(34px, 3.3vw, 42px); } .auth-home-hero .hero-banner-card__subtitle { font-size: clamp(18px, 1.9vw, 21px); } } @media (max-width: 1142px) { .page--homepage > .auth-home-hero.section--tight { padding-top: 16px; padding-bottom: 24px; } .auth-home-hero__layout { grid-template-columns: 1fr; } .auth-home-hero .hero-banner-card--main { grid-template-columns: minmax(0, 1fr) clamp(240px, 34vw, 327px); } } @media (max-width: 767px) { .page--homepage > .auth-home-hero.section--tight { padding-top: 16px !important; padding-bottom: 8px; } .auth-home-hero__viewport { padding: 6px 0 4px; } .auth-home-hero .hero-banner-card--main { grid-template-columns: 1fr; } .auth-home-hero .hero-banner-card__lead--green { padding: 34px 18px 28px; } .auth-home-hero .hero-banner-card__title { font-size: 32px; line-height: 1.12; } .auth-home-hero .hero-banner-card__subtitle { margin-top: 12px; font-size: 18px; } .auth-home-hero .hero-banner-card__eyebrow { margin-top: 16px; font-size: 14px; } .auth-home-hero .hero-banner-card__media { min-height: 220px; } .auth-home-hero .hero-banner-card__side-copy .hero-banner-card__side-title { font-size: 24px; } .auth-home-hero .hero-banner-card__side-copy .hero-banner-card__side-subtitle { font-size: 18px; } } /* [bundle] /styles/components/auth-event-banner.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body.page--homepage .auth-event-banner[data-recently-viewed-auth-only] { display: none; } body.page--homepage.is-homepage-authenticated .auth-event-banner[data-recently-viewed-auth-only] { display: block; } body.page--homepage.is-homepage-authenticated .page-main > .auth-event-banner[data-recently-viewed-auth-only] { padding-top: 0; } .auth-event-banner { width: var(--homepage-shell-width); max-width: var(--jp-page-shell-max, 1372px); margin-inline: auto; padding: 12px var(--homepage-shell-inset) 10px; box-sizing: border-box; } .auth-event-banner__card { position: relative; width: 100%; min-height: 178px; overflow: hidden; border-radius: 26px; background: var(--color-cream); box-shadow: none; transition: box-shadow 0.18s ease; } .auth-event-banner__card[data-homepage-link] { cursor: default; } .auth-event-banner__card:hover, .auth-event-banner__card:has(:focus-visible) { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .auth-event-banner__copy { position: absolute; inset: 0 auto 0 0; width: min(583px, 100%); background: #3f6a60; } .auth-event-banner__title { position: absolute; top: 12px; left: 17px; width: 543px; max-width: calc(100% - 34px); min-height: 92px; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--color-cream); text-align: center; font-family: var(--font-body); font-size: 22px; font-weight: 800; line-height: 1.22; } .auth-event-banner__title-text { display: block; width: 100%; } .auth-event-banner__button { position: absolute; left: 183px; top: 112px; width: 187px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 27px; border: 0; border-radius: 999px; background: transparent; color: #232030; font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.15; cursor: pointer; isolation: isolate; overflow: visible; transition: color 180ms var(--home-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .auth-event-banner__button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #f8f1eb; transform: scale(1); transform-origin: center; pointer-events: none; transition: transform 180ms var(--home-ease, cubic-bezier(0.16, 1, 0.3, 1)), background-color 180ms var(--home-ease, cubic-bezier(0.16, 1, 0.3, 1)); will-change: transform; } .auth-event-banner__button:hover::before, .auth-event-banner__button:focus-visible::before { transform: scale(1.04); } .auth-event-banner__button:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.35); outline-offset: 3px; } .auth-event-banner__button-icon { flex: 0 0 auto; } .auth-event-banner__button-label, .auth-event-banner__button-icon { position: relative; z-index: 1; } .auth-event-banner__media, .auth-event-banner__media-secondary { position: absolute; top: 0; bottom: 0; height: 100%; min-height: 178px; pointer-events: auto; cursor: default; overflow: hidden; } .auth-event-banner__media { left: 583px; width: calc((100% - 583px) / 2); background-color: var(--auth-event-banner-tone, transparent); background-image: var(--auth-event-banner-media-url, url("/uploads/categories/2026/05/1778227865722-7c90cc684bb2.webp")); background-size: cover; background-position: center center; background-repeat: no-repeat; } .auth-event-banner__media-secondary { left: calc(583px + ((100% - 583px) / 2)); right: 0; background: var(--auth-event-banner-media-secondary-url, url("/uploads/categories/2026/05/1778226694835-88c75d5aebb8.webp")) center center / cover no-repeat; } .auth-event-banner__media-secondary img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .auth-event-banner__media[data-homepage-link] { transform-origin: center; transition: none; } .auth-event-banner__media[data-homepage-link]:hover, .auth-event-banner__media[data-homepage-link]:focus-visible { transform: none; box-shadow: none; } @media (max-width: 920px) { .auth-event-banner { padding-top: 8px; padding-bottom: 10px; background-image: none !important; background-size: auto !important; background-position: center !important; } .auth-event-banner__card { min-height: 166px; } .auth-event-banner__copy { width: 100%; } .auth-event-banner__title { left: 18px; width: calc(100% - 36px); font-size: 22px; } .auth-event-banner__button { left: 50%; top: 106px; transform: translateX(-50%); } .auth-event-banner__media, .auth-event-banner__media-secondary { display: none; min-height: 166px; } } @media (max-width: 520px) { .auth-event-banner { width: var(--homepage-shell-width, calc(100% - 32px)); padding-top: 4px; padding-bottom: 8px; } .auth-event-banner__card { min-height: 152px; border-radius: 22px; cursor: pointer; } .auth-event-banner__media, .auth-event-banner__media-secondary { cursor: pointer; min-height: 152px; } .auth-event-banner__title { top: 12px; min-height: 62px; font-size: 18px; } .auth-event-banner__button { top: 84px; width: 168px; height: 40px; } } /* [bundle] /styles/components/explore-by-scenario.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .explore-scenarios { --explore-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --explore-shell-inset: var(--homepage-shell-inset, 6px); margin-top: 20px; padding-top: 40px; padding-bottom: 24px; -webkit-user-select: none; user-select: none; } .explore-scenarios__inner { width: var(--explore-shell-width); margin-inline: auto; padding-inline: var(--explore-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 25px; } @media (min-width: 721px) and (max-width: 1439px) { .explore-scenarios { --explore-shell-width: min(1410px, calc(100% - 30px)); --explore-shell-inset: 0px; } } @media (max-width: 720px) { .explore-scenarios { --explore-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --explore-shell-inset: 0px; } } .explore-scenarios__top { width: 100%; display: grid; grid-template-columns: 402px minmax(0, 1fr); align-items: start; column-gap: 24px; min-width: 0; } .explore-scenarios__copy { width: 402px; max-width: 402px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 47px; } .explore-scenarios__copy-stack { width: 402px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; } .explore-scenarios__eyebrow-row { width: 402px; display: flex; align-items: center; gap: 10px; } .explore-scenarios__badge { width: 120px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 5px; border-radius: 999px; background: #ffdec7; outline: 1px solid #f1641e; outline-offset: -1px; color: #7a2c11; font-family: var(--font-body); font-size: 11.6px; font-weight: 700; letter-spacing: 0.96px; text-transform: uppercase; line-height: 1; box-sizing: border-box; } .explore-scenarios__meta { margin: 0; width: 272px; min-height: 16px; display: flex; align-items: center; color: #232030; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; line-height: 14px; } .explore-scenarios__title { margin: 0; width: 402px; height: 50px; display: flex; align-items: center; color: #232030; font-family: var(--font-body); font-size: 28px; font-weight: 700; line-height: 50px; } .explore-scenarios__body { margin: 0; width: 402px; min-height: 80px; max-width: 402px; color: #232030; font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 27.2px; } .explore-scenarios__cta { position: relative; align-self: flex-start; width: fit-content; min-height: 54px; display: inline-grid; grid-template-columns: max-content 22px; align-items: center; justify-content: center; column-gap: 16px; padding: 17px 22px; box-sizing: border-box; border: 0; border-radius: 999px; background: #f8f1eb; outline: 3px solid #232030; outline-offset: -3px; color: #232030; text-decoration: none; isolation: isolate; backface-visibility: hidden; box-shadow: 0 20px 60px rgba(35, 32, 48, 0); cursor: pointer; transition: box-shadow 180ms ease, background-color 180ms ease; } .explore-scenarios__cta-label { position: relative; z-index: 1; display: block; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.15; white-space: nowrap; } .explore-scenarios__cta-label--short { display: none; } .explore-scenarios__cta-icon { position: relative; z-index: 1; width: 22px; height: 16px; display: block; justify-self: start; object-fit: contain; transform: translate3d(0, 0, 0); backface-visibility: hidden; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .explore-scenarios__cta:hover, .explore-scenarios__cta:focus-visible { box-shadow: var(--shadow-card); } .explore-scenarios__cta:hover .explore-scenarios__cta-icon, .explore-scenarios__cta:focus-visible .explore-scenarios__cta-icon { transform: translate3d(4px, 0, 0); } .explore-scenarios__hero-card, .explore-scenarios__mini-card { position: relative; overflow: hidden; border-radius: 20px; background: var(--color-cream); box-shadow: none; transition: box-shadow 180ms ease; } .explore-scenarios__hero-card { width: min(100%, 670px); max-width: 670px; height: auto; aspect-ratio: 670 / 327; min-width: 0; justify-self: end; margin-left: 0; cursor: default; } .explore-scenarios__hero-card--is-link { cursor: pointer; } .explore-scenarios__hero-card--is-link:focus-visible { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .explore-scenarios__media-slot { position: absolute; inset: 0; background: #e8eef5; } .explore-scenarios__media-slot img { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); transform: none; transform-origin: center; backface-visibility: hidden; will-change: transform; } .explore-scenarios__media-slot::after { content: none; } .explore-scenarios__hero-pill { position: absolute; top: 15px; right: 15px; z-index: 2; height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: #ffe2a3; outline: 1px solid #f1641e; outline-offset: -1px; color: #7a2c11; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.96px; text-transform: uppercase; display: none; } .explore-scenarios__hero-overlay { position: absolute; inset: auto 0 0; height: 123px; background: linear-gradient(180deg, rgba(35, 32, 48, 0.03) 0%, #232030 100%); } .explore-scenarios__hero-copy { position: absolute; left: 15px; right: 80px; bottom: 15px; z-index: 2; display: flex; flex-direction: column; gap: 2px; } .explore-scenarios__hero-title { margin: 0; color: var(--color-cream); font-family: var(--font-body); font-size: 18px; font-weight: 700; line-height: 1.2; } .explore-scenarios__hero-kicker { margin: 0; color: var(--color-cream); font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2; } .explore-scenarios__play { position: absolute; right: 15px; bottom: 15px; z-index: 2; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: default; pointer-events: none; display: none; } .explore-scenarios__hero-card--has-badge .explore-scenarios__hero-pill { display: inline-flex; } .explore-scenarios__hero-card--has-video .explore-scenarios__play { display: inline-flex; } .explore-scenarios__grid { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; justify-content: start; min-width: 0; } .explore-scenarios__mini-card { width: 100%; height: auto; aspect-ratio: 1 / 1; min-width: 0; outline: 0; cursor: pointer; } .explore-scenarios__mini-card:hover, .explore-scenarios__mini-card:focus-visible { box-shadow: var(--shadow-card); } .explore-scenarios__mini-card:hover .explore-scenarios__media-slot img, .explore-scenarios__mini-card:focus-visible .explore-scenarios__media-slot img { transform: scale(1.04); } .explore-scenarios__hero-card--is-link:hover .explore-scenarios__media-slot img, .explore-scenarios__hero-card--is-link:focus-visible .explore-scenarios__media-slot img { transform: scale(1.04); } .explore-scenarios__mini-overlay { position: absolute; inset: auto 0 0; height: 112px; background: linear-gradient(180deg, rgba(35, 32, 48, 0.03) 0%, #232030 100%); } .explore-scenarios__mini-title { position: absolute; left: 15px; bottom: 15px; margin: 0; width: min(296px, calc(100% - 30px)); color: var(--color-cream); font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.18; } @media (max-width: 1142px) { .explore-scenarios { padding-top: 24px; padding-bottom: 16px; } .explore-scenarios__inner { gap: 20px; } .explore-scenarios__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'eyebrow eyebrow' 'title cta' 'hero hero'; row-gap: 20px; column-gap: 20px; align-items: center; } .explore-scenarios__copy, .explore-scenarios__copy-stack { display: contents; } .explore-scenarios__eyebrow-row { grid-area: eyebrow; width: 100%; flex-wrap: nowrap; } .explore-scenarios__meta { width: min(492px, calc(100% - 130px)); min-height: 16px; flex: 0 1 auto; } .explore-scenarios__title { grid-area: title; width: auto; height: auto; min-height: 0; font-size: 28px; line-height: 1.2; } .explore-scenarios__body { display: none; } .explore-scenarios__hero-card { grid-area: hero; max-width: none; width: 100%; height: auto; aspect-ratio: 670 / 327; justify-self: stretch; margin-left: 0; } .explore-scenarios__cta { grid-area: cta; align-self: center; justify-self: end; width: 394px; max-width: 394px; min-width: 394px; padding: 17px 15px; } } @media (max-width: 820px) { .explore-scenarios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 753px) { .explore-scenarios__cta { width: 177px; max-width: 177px; min-width: 177px; min-height: 54px; padding: 17px 15px; justify-self: end; } .explore-scenarios__cta-label--full { display: none; } .explore-scenarios__cta-label--short { display: inline; } } @media (max-width: 640px) { .explore-scenarios { padding-top: 18px; padding-bottom: 8px; padding-inline: 0; } .explore-scenarios__inner { margin-inline: auto; row-gap: 16px; box-sizing: border-box; } .explore-scenarios__eyebrow-row { flex-direction: row; align-items: center; gap: 10px; flex-wrap: nowrap; } .explore-scenarios__badge { width: 120px; min-width: 120px; } .explore-scenarios__meta { width: min(264px, calc(100% - 130px)); min-height: 18px; font-size: 12px; letter-spacing: 1.2px; line-height: 1.2; } .explore-scenarios__top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'eyebrow eyebrow' 'title cta' 'hero hero'; row-gap: 10px; column-gap: 12px; align-items: center; } .explore-scenarios__title { width: auto; height: auto; font-size: 28px; line-height: 1.2; } .explore-scenarios__hero-card { width: 100%; max-width: 100%; height: auto; aspect-ratio: 670 / 327; } .explore-scenarios__hero-pill { top: 12px; right: 12px; } .explore-scenarios__hero-overlay { height: 88px; } .explore-scenarios__hero-copy { left: 12px; right: 68px; bottom: 12px; } .explore-scenarios__hero-title { font-size: 16px; } .explore-scenarios__hero-kicker { font-size: 12px; } .explore-scenarios__play { right: 12px; bottom: 12px; } .explore-scenarios__grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .explore-scenarios__mini-overlay { height: 72px; } .explore-scenarios__mini-title { left: 12px; bottom: 12px; font-size: 14px; } .explore-scenarios__cta { width: 177px; max-width: 177px; min-width: 177px; min-height: 54px; padding: 17px 15px; justify-self: end; } .explore-scenarios__cta-label--full { display: none; } .explore-scenarios__cta-label--short { display: inline; } } /* [bundle] /styles/components/similar-interests.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .similar-interests { --similar-interests-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --similar-interests-shell-inset: var(--homepage-shell-inset, 6px); --similar-interests-inline-offset: 5px; --similar-interests-safe-buffer: 15px; padding-top: 24px; padding-bottom: 24px; -webkit-user-select: none; user-select: none; } .similar-interests__inner { width: var(--similar-interests-shell-width); margin-inline: auto; padding-inline: var(--similar-interests-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 15px; } @media (min-width: 721px) and (max-width: 1439px) { .similar-interests { --similar-interests-shell-width: min(1410px, calc(100% - 30px)); --similar-interests-shell-inset: 0px; } } @media (max-width: 720px) { .similar-interests { --similar-interests-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --similar-interests-shell-inset: 0px; --similar-interests-safe-buffer: 16px; } } .similar-interests__title { margin: 0; padding-top: 5px; position: relative; left: var(--similar-interests-inline-offset); color: #232030; font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: 0; user-select: none; } .similar-interests__track { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: visible; width: 100%; padding-inline: 0; box-sizing: border-box; } .similar-interest-card { position: relative; z-index: 0; min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; background: #f8f1eb; border-radius: 30px; box-shadow: none; overflow: hidden; contain: layout; transform: translateZ(0); backface-visibility: hidden; will-change: box-shadow; transition: box-shadow 180ms ease, z-index 0ms linear 0ms; cursor: pointer; } @media (hover: hover) { .similar-interest-card:hover, .similar-interest-card:focus-within { z-index: 3; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } } .similar-interest-card__media { width: calc(100% - 14px); margin: 7px 7px 0; aspect-ratio: 326 / 394; flex: 0 0 auto; border-radius: 27px; overflow: hidden; contain: paint; transform: translateZ(0); backface-visibility: hidden; background: radial-gradient(circle at 18% 16%, rgba(241, 100, 30, 0.12) 0%, rgba(241, 100, 30, 0) 50%), linear-gradient(160deg, #efe9e2 0%, #f7f3ee 100%); } .similar-interest-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0) scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { .similar-interest-card:hover .similar-interest-card__media img, .similar-interest-card:focus-visible .similar-interest-card__media img { transform: translateZ(0) scale(1.04); } } .similar-interest-card__copy { flex: 0 0 auto; min-height: 86px; margin: 0; padding: 14px 18px 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: flex-start; text-align: center; } .similar-interest-card__title { margin: 0; max-width: 100%; color: #232030; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; } .similar-interest-card__subtitle { margin: 0; max-width: 100%; color: #232030; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.2; } @media (max-width: 1142px) { .similar-interests__inner { padding-inline: var(--similar-interests-shell-inset); } } @media (max-width: 1030px) { .similar-interests__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (2 * var(--similar-interests-safe-buffer))) / 3.2); grid-template-columns: none; gap: 0; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; scroll-snap-type: none; scroll-padding-inline: var(--similar-interests-safe-buffer); scrollbar-width: none; -ms-overflow-style: none; width: calc(100% + (2 * var(--similar-interests-safe-buffer))); padding-left: var(--similar-interests-safe-buffer); padding-right: var(--similar-interests-safe-buffer); margin-left: calc(-1 * var(--similar-interests-safe-buffer)); margin-right: calc(-1 * var(--similar-interests-safe-buffer)); padding-top: 6px; padding-bottom: 8px; box-sizing: border-box; } .similar-interests__track::-webkit-scrollbar { display: none; } .similar-interest-card { scroll-snap-align: start; } } @media (max-width: 767px) { .similar-interests { padding-top: 20px; padding-bottom: 20px; } .similar-interests__inner { gap: 15px; } .similar-interests__title { left: var(--similar-interests-inline-offset); font-size: 22px; line-height: 28px; letter-spacing: 0; } .similar-interests__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100vw - 16px) / 2.2); grid-template-columns: none; gap: 0; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; scroll-snap-type: none; scroll-padding-inline: var(--similar-interests-safe-buffer); scrollbar-width: none; -ms-overflow-style: none; width: calc(100% + var(--similar-interests-safe-buffer) + 16px); padding-left: var(--similar-interests-safe-buffer); padding-right: var(--similar-interests-safe-buffer); margin-left: calc(-1 * var(--similar-interests-safe-buffer)); margin-right: calc(-1 * var(--similar-interests-safe-buffer)); padding-top: 6px; padding-bottom: 8px; box-sizing: border-box; } .similar-interests__track::-webkit-scrollbar { display: none; } .similar-interest-card { scroll-snap-align: start; } .similar-interest-card__media { width: calc(100% - 14px); aspect-ratio: 326 / 394; margin: 7px 7px 0; } .similar-interest-card__copy { min-height: 82px; padding: 14px 18px 14px; gap: 4px; } .similar-interest-card__title { font-size: 16px; line-height: 1.15; } .similar-interest-card__subtitle { font-size: 11px; } } /* [bundle] /styles/components/winter-best-products.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .winter-best-products { --winter-best-products-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --winter-best-products-shell-inset: var(--homepage-shell-inset, 6px); --winter-best-products-inline-offset: 5px; --winter-best-products-safe-buffer: 15px; padding-top: 24px; padding-bottom: 24px; -webkit-user-select: none; user-select: none; } .winter-best-products__inner { width: var(--winter-best-products-shell-width); margin-inline: auto; padding-inline: var(--winter-best-products-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 15px; } @media (min-width: 721px) and (max-width: 1439px) { .winter-best-products { --winter-best-products-shell-width: min(1410px, calc(100% - 30px)); --winter-best-products-shell-inset: 0px; } } @media (max-width: 720px) { .winter-best-products { --winter-best-products-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --winter-best-products-shell-inset: 0px; --winter-best-products-safe-buffer: 16px; } } .winter-best-products__title { margin: 0; padding-top: 5px; position: relative; left: var(--winter-best-products-inline-offset); color: #232030; font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: 0; user-select: none; } .winter-best-products__track { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; overflow: visible; width: 100%; padding-inline: 0; box-sizing: border-box; } .winter-best-product-card { position: relative; z-index: 0; min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; background: #f8f1eb; border-radius: 30px; box-shadow: none; overflow: visible; isolation: isolate; contain: layout; transform: translateZ(0); backface-visibility: hidden; transition: z-index 0ms linear 0ms; cursor: pointer; } .winter-best-product-card::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; box-shadow: none; opacity: 0; pointer-events: none; transition: opacity 180ms ease; } @media (hover: hover) { .winter-best-product-card:hover, .winter-best-product-card:focus-within { z-index: 3; } .winter-best-product-card:hover::after, .winter-best-product-card:focus-within::after { opacity: 1; } } .winter-best-product-card__media { position: relative; z-index: 1; width: calc(100% - 14px); margin: 7px 7px 0; aspect-ratio: 1 / 1; flex: 0 0 auto; border-radius: 27px; overflow: hidden; contain: paint; transform: translateZ(0); backface-visibility: hidden; background: radial-gradient(circle at 18% 16%, rgba(241, 100, 30, 0.12) 0%, rgba(241, 100, 30, 0) 50%), linear-gradient(160deg, #efe9e2 0%, #f7f3ee 100%); } .winter-best-product-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0) scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { .winter-best-product-card:hover .winter-best-product-card__media img, .winter-best-product-card:focus-visible .winter-best-product-card__media img { transform: translateZ(0) scale(1.04); } } .winter-best-product-card__copy { position: relative; z-index: 1; flex: 0 0 auto; min-height: 57px; margin: 0; padding: 10px 13px 13px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } .winter-best-product-card__title { margin: 0; max-width: 100%; color: #232030; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.2; } @media (max-width: 1142px) { .winter-best-products__inner { padding-inline: var(--winter-best-products-shell-inset); } } @media (max-width: 1030px) { .winter-best-products__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (2 * var(--winter-best-products-safe-buffer))) / 3.2); grid-template-columns: none; gap: 0; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; scroll-snap-type: none; scroll-padding-inline: var(--winter-best-products-safe-buffer); scrollbar-width: none; -ms-overflow-style: none; width: calc(100% + (2 * var(--winter-best-products-safe-buffer))); padding-left: var(--winter-best-products-safe-buffer); padding-right: var(--winter-best-products-safe-buffer); margin-left: calc(-1 * var(--winter-best-products-safe-buffer)); margin-right: calc(-1 * var(--winter-best-products-safe-buffer)); padding-top: 6px; padding-bottom: 8px; box-sizing: border-box; } .winter-best-products__track::-webkit-scrollbar { display: none; } .winter-best-product-card { scroll-snap-align: start; } } @media (max-width: 767px) { .winter-best-products { padding-top: 20px; padding-bottom: 20px; } .winter-best-products__inner { gap: 15px; } .winter-best-products__title { left: var(--winter-best-products-inline-offset); font-size: 22px; line-height: 28px; letter-spacing: 0; } .winter-best-products__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100vw - 16px) / 2.2); grid-template-columns: none; gap: 0; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; scroll-snap-type: none; scroll-padding-inline: var(--winter-best-products-safe-buffer); scrollbar-width: none; -ms-overflow-style: none; width: calc(100% + var(--winter-best-products-safe-buffer) + 16px); padding-left: var(--winter-best-products-safe-buffer); padding-right: var(--winter-best-products-safe-buffer); margin-left: calc(-1 * var(--winter-best-products-safe-buffer)); margin-right: calc(-1 * var(--winter-best-products-safe-buffer)); padding-top: 6px; padding-bottom: 8px; box-sizing: border-box; } .winter-best-products__track::-webkit-scrollbar { display: none; } .winter-best-product-card { scroll-snap-align: start; } } /* [bundle] /styles/components/christmas-special-gifts.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .christmas-special-gifts { --christmas-special-gifts-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --christmas-special-gifts-shell-inset: var(--homepage-shell-inset, 6px); --christmas-special-gifts-safe-buffer: 15px; padding-block: 24px; -webkit-user-select: none; user-select: none; } .christmas-special-gifts__inner { width: var(--christmas-special-gifts-shell-width); margin-inline: auto; padding-inline: var(--christmas-special-gifts-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 23px; } .christmas-special-gifts__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; } .christmas-special-gifts__intro { width: 380px; flex: 0 0 380px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 21px; } .christmas-special-gifts__title-group { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 39px; } .christmas-special-gifts__title { width: 100%; margin: 0; color: #232030; font-family: var(--font-body); font-size: 28px; font-weight: 700; line-height: 1.15; user-select: none; } .christmas-special-gifts__eyebrow { margin: 0; color: #232030; font-family: var(--font-body); font-size: 20px; font-weight: 300; line-height: 1.3; user-select: none; } .christmas-special-gifts__cta { position: relative; width: fit-content; min-height: 54px; padding: 17px 22px; box-sizing: border-box; display: inline-grid; grid-template-columns: max-content 22px; align-items: center; justify-content: center; column-gap: 16px; border-radius: 999px; background: #f8f1eb; border: 0; outline: 3px solid #232030; outline-offset: -3px; color: #232030; text-decoration: none; isolation: isolate; backface-visibility: hidden; box-shadow: 0 20px 60px rgba(35, 32, 48, 0); transition: box-shadow 180ms ease, background-color 180ms ease; } .christmas-special-gifts__cta-label { position: relative; z-index: 1; display: block; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.15; white-space: nowrap; } .christmas-special-gifts__cta-label--short { display: none; } .christmas-special-gifts__cta-icon { position: relative; z-index: 1; width: 22px; height: 16px; display: block; flex: 0 0 auto; justify-self: start; object-fit: contain; transform: translate3d(0, 0, 0); backface-visibility: hidden; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .christmas-special-gifts__cta:hover, .christmas-special-gifts__cta:focus-visible { box-shadow: var(--shadow-card); } .christmas-special-gifts__cta:hover .christmas-special-gifts__cta-icon, .christmas-special-gifts__cta:focus-visible .christmas-special-gifts__cta-icon { transform: translate3d(4px, 0, 0); } .christmas-special-gifts__feature-track { width: min(964px, 100%); max-width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; justify-content: flex-end; overflow: visible; } .christmas-special-feature-card { position: relative; min-width: 0; width: 100%; aspect-ratio: 1 / 1; border-radius: 30px; overflow: visible; background: radial-gradient(ellipse 149.4% 192.66% at 10% 20%, rgba(241, 100, 30, 0.12) 0%, rgba(241, 100, 30, 0) 60%), linear-gradient(165deg, #efe9e2 0%, #f7f3ee 100%); box-shadow: none; isolation: isolate; contain: layout; transform: translateZ(0); backface-visibility: hidden; transition: border-color 180ms ease, z-index 0ms linear 0ms; z-index: 0; } .christmas-special-feature-card::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: var(--shadow-card); opacity: 0; pointer-events: none; transition: opacity 180ms ease; } .christmas-special-feature-card__media { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; contain: paint; transform: translateZ(0); backface-visibility: hidden; background: radial-gradient(ellipse 149.4% 192.66% at 10% 20%, rgba(241, 100, 30, 0.12) 0%, rgba(241, 100, 30, 0) 60%), linear-gradient(165deg, #efe9e2 0%, #f7f3ee 100%); } .christmas-special-feature-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0) scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { .christmas-special-feature-card:hover, .christmas-special-feature-card:focus-within { z-index: 2; } .christmas-special-feature-card:hover::after, .christmas-special-feature-card:focus-within::after { opacity: 1; } } .christmas-special-feature-card__gradient { position: absolute; left: 0; right: 0; bottom: 0; height: 119px; border-radius: 0 0 30px 30px; background: linear-gradient(180deg, rgba(35, 32, 48, 0.03) 0%, #232030 100%); display: flex; align-items: flex-start; justify-content: center; z-index: 2; } .christmas-special-feature-card { cursor: pointer; } .christmas-special-feature-card:hover .christmas-special-feature-card__image { transform: translateZ(0) scale(1.04); } .christmas-special-feature-card__title { position: absolute; z-index: 3; left: 15px; right: 15px; bottom: 21px; margin: 0; color: var(--color-cream); font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.24; overflow-wrap: anywhere; user-select: none; } .christmas-special-gifts__product-track { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; width: 100%; overflow: visible; padding-inline: 0; box-sizing: border-box; } .christmas-special-product-card { --christmas-special-product-card-bg: #dbe6dd; --christmas-special-product-card-border: rgba(35, 32, 48, 0.12); position: relative; z-index: 0; min-width: 0; width: 100%; aspect-ratio: 1 / 1; background: var(--christmas-special-product-card-bg); border: 1px solid var(--christmas-special-product-card-border); border-radius: 20px; overflow: visible; box-shadow: none; isolation: isolate; contain: layout; transform: translateZ(0); backface-visibility: hidden; transition: z-index 0ms linear 0ms; scroll-snap-align: start; cursor: pointer; } .christmas-special-product-card::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); opacity: 0; pointer-events: none; transition: opacity 180ms ease; } .christmas-special-product-card:nth-child(2) { --christmas-special-product-card-bg: #ece2d2; } .christmas-special-product-card:nth-child(3) { --christmas-special-product-card-bg: #d9e3ef; } .christmas-special-product-card:nth-child(4) { --christmas-special-product-card-bg: #eadbd7; } .christmas-special-product-card:nth-child(5) { --christmas-special-product-card-bg: #e8e1c9; } .christmas-special-product-card:hover, .christmas-special-product-card:has(:focus-visible), .christmas-special-product-card.is-actions-open { border-color: transparent; z-index: 3; } .christmas-special-product-card:hover::after, .christmas-special-product-card:has(:focus-visible)::after, .christmas-special-product-card.is-actions-open::after { opacity: 1; } .christmas-special-product-card__media { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; contain: paint; transform: translateZ(0); backface-visibility: hidden; background: var(--christmas-special-product-card-bg); } .christmas-special-feature-card__image { transition: transform 0.24s ease; } .christmas-special-product-card__image { display: none !important; } .christmas-special-product-card__price { position: absolute; z-index: 2; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 0 10px 0 8px; background: var(--color-cream); overflow: hidden; border-radius: 999px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; } .christmas-special-product-card__currency { width: auto; min-width: 0; height: auto; padding: 0; border-radius: 999px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; color: #232030; font-family: var(--font-price, var(--font-body)); font-size: 14px; font-weight: 700; line-height: normal; text-align: center; } .christmas-special-product-card__values { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; } .christmas-special-product-card__price-new, .christmas-special-product-card__price-old { display: inline; color: #232030; font-family: var(--font-price, var(--font-display)); font-size: 14px; line-height: normal; white-space: nowrap; } .christmas-special-product-card__price-new { font-weight: 700; } .christmas-special-product-card__price-old { margin-left: 0; font-weight: 400; text-decoration: line-through; } .christmas-special-product-card__hover-actions { position: absolute; top: 10px; left: 10px; right: 10px; width: auto; max-width: none; height: 38px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; opacity: 0; pointer-events: none; transform: translate3d(0, 0, 0) scale(1); backface-visibility: hidden; transition: opacity 0.18s ease; z-index: 4; } .christmas-special-product-card:hover .christmas-special-product-card__hover-actions, .christmas-special-product-card:has(:focus-visible) .christmas-special-product-card__hover-actions, .christmas-special-product-card.is-actions-open .christmas-special-product-card__hover-actions { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); } .christmas-special-product-card__hover-board, .christmas-special-product-card__hover-save { height: 38px; border: 0; border-radius: 999px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0; overflow: visible; cursor: pointer; font-family: var(--font-body); line-height: 1; white-space: nowrap; background: transparent; isolation: isolate; transform: translateZ(0); backface-visibility: hidden; } .christmas-special-product-card__hover-board::before, .christmas-special-product-card__hover-save::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; transform: translateZ(0) scale(1); transform-origin: center; transition: transform 0.18s ease; } .christmas-special-product-card__hover-board:hover::before, .christmas-special-product-card__hover-board:focus-visible::before, .christmas-special-product-card__hover-save:hover::before, .christmas-special-product-card__hover-save:focus-visible::before { transform: translateZ(0) scale(1.035); } .christmas-special-product-card__hover-board { min-width: 0; max-width: none; color: #232030; justify-content: space-between; padding: 6px 12px; flex: 1 1 0; } .christmas-special-product-card__hover-board::before { background: #eee5da; } .christmas-special-product-card__hover-board-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; flex: 1 1 auto; } .christmas-special-product-card__hover-board img { width: 12px; height: 12px; flex: 0 0 12px; display: block; object-fit: contain; } .christmas-special-product-card__hover-save { min-width: max-content; width: auto; color: var(--color-cream); gap: 0; padding: 6px 14px; flex: 0 0 auto; } .christmas-special-product-card__hover-save::before { background: #3f6a60; } .christmas-special-product-card__hover-save-label { font-size: 13px; font-weight: 600; } .christmas-special-product-card__hover-save img { display: none !important; } @media (min-width: 721px) and (max-width: 1439px) { .christmas-special-gifts { --christmas-special-gifts-shell-width: min(1410px, calc(100% - 30px)); --christmas-special-gifts-shell-inset: 0px; } } @media (max-width: 1142px) { .christmas-special-gifts__top { display: flex; flex-direction: column; gap: 20px; } .christmas-special-gifts__intro { width: 100%; flex: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .christmas-special-gifts__title-group { gap: 10px; flex: 1 1 auto; } .christmas-special-gifts__eyebrow { display: none; } .christmas-special-gifts__feature-track { width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; box-sizing: border-box; } } @media (max-width: 1030px) { .christmas-special-gifts__product-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (2 * var(--christmas-special-gifts-safe-buffer))) / 3.2); grid-template-columns: none; gap: 22px; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; scroll-snap-type: none; scroll-padding-inline: var(--christmas-special-gifts-safe-buffer); scrollbar-width: none; -ms-overflow-style: none; width: calc(100% + (2 * var(--christmas-special-gifts-safe-buffer))); padding-left: var(--christmas-special-gifts-safe-buffer); padding-right: var(--christmas-special-gifts-safe-buffer); margin-left: calc(-1 * var(--christmas-special-gifts-safe-buffer)); margin-right: calc(-1 * var(--christmas-special-gifts-safe-buffer)); padding-top: 6px; padding-bottom: 8px; box-sizing: border-box; } .christmas-special-gifts__product-track::-webkit-scrollbar { display: none; } } @media (max-width: 753px) { .christmas-special-gifts__cta { width: 177px; padding: 17px 15px; } .christmas-special-gifts__cta-label--long { display: none; } .christmas-special-gifts__cta-label--short { display: inline; } } @media (max-width: 720px) { .christmas-special-gifts { --christmas-special-gifts-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --christmas-special-gifts-shell-inset: 0px; --christmas-special-gifts-safe-buffer: 10px; padding-block: 20px; } .christmas-special-gifts__product-track { width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); margin-right: 0; padding-left: 0; padding-right: 0; scroll-padding-inline: 0; } } @media (max-width: 560px) { .christmas-special-gifts__intro { align-items: flex-start; flex-direction: column; } .christmas-special-gifts__title { font-size: 24px; } .christmas-special-gifts__feature-track { gap: 16px; } .christmas-special-product-card__price { max-width: calc(100% - 12px); padding-right: 8px; } .christmas-special-product-card__price-old { display: none; } } @media (max-width: 767px) { .christmas-special-gifts__feature-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .christmas-special-gifts__feature-track .christmas-special-feature-card:nth-child(3) { display: none; } .christmas-special-gifts__product-track { grid-auto-columns: calc((100% - (2 * var(--christmas-special-gifts-safe-buffer))) / 2.5); gap: 16px; } } /* [bundle] /styles/components/special-illustrations.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .special-illustrations { --special-illustrations-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --special-illustrations-shell-inset: var(--homepage-shell-inset, 6px); padding-block: 24px; -webkit-user-select: none; user-select: none; } .special-illustrations__inner { width: var(--special-illustrations-shell-width); margin-inline: auto; padding-inline: var(--special-illustrations-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 23px; } .special-illustrations__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; } .special-illustrations__intro { width: 454px; flex: 0 0 454px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 21px; } .special-illustrations__title-group { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 39px; } .special-illustrations__title { width: 100%; margin: 0; color: #232030; font-family: var(--font-body); font-size: 28px; font-weight: 700; line-height: 1.15; } .special-illustrations__eyebrow { margin: 0; color: #232030; font-family: var(--font-body); font-size: 20px; font-weight: 300; line-height: 1.3; } .special-illustrations__cta { position: relative; z-index: 0; width: fit-content; min-height: 54px; padding: 17px 22px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border-radius: 999px; background: #f8f1eb; border: 0; outline: 3px solid #232030; outline-offset: -3px; color: #232030; text-decoration: none; isolation: isolate; transform: translateZ(0); backface-visibility: hidden; transition: none; } .special-illustrations__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--shadow-card); opacity: 0; transition: opacity 180ms ease; z-index: -1; } .special-illustrations__cta:hover, .special-illustrations__cta:focus-visible { box-shadow: none; } .special-illustrations__cta:hover::after, .special-illustrations__cta:focus-visible::after { opacity: 0; } .special-illustrations__cta-label { position: relative; z-index: 1; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.15; white-space: nowrap; } .special-illustrations__cta-label--short { display: none; } .special-illustrations__cta-icon { position: relative; z-index: 1; width: 22px; height: 16px; display: block; flex: 0 0 auto; pointer-events: none; transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; object-fit: contain; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .special-illustrations__cta:hover .special-illustrations__cta-icon, .special-illustrations__cta:focus-visible .special-illustrations__cta-icon { transform: translate3d(4px, 0, 0); } .special-illustrations__feature-track { width: min(886px, 100%); max-width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; justify-content: flex-end; overflow: visible; } .special-illustration-feature-card, .special-illustration-card { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: visible; background: radial-gradient(ellipse 149.4% 192.66% at 10% 20%, rgba(241, 100, 30, 0.12) 0%, rgba(241, 100, 30, 0) 60%), linear-gradient(165deg, #efe9e2 0%, #f7f3ee 100%); box-shadow: none; isolation: isolate; contain: layout; transform: translateZ(0); backface-visibility: hidden; transition: z-index 0ms linear 0ms; z-index: 0; cursor: pointer; } .special-illustration-feature-card { border-radius: 20px; } .special-illustration-card { border-radius: 20px; } .special-illustration-feature-card::after, .special-illustration-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: none; opacity: 0; transition: opacity 180ms ease; z-index: 4; } @media (hover: hover) { .special-illustration-feature-card:hover, .special-illustration-feature-card:focus-within, .special-illustration-card:hover, .special-illustration-card:focus-within { z-index: 2; box-shadow: none; outline: 0; } .special-illustration-feature-card:hover::after, .special-illustration-feature-card:focus-within::after, .special-illustration-card:hover::after, .special-illustration-card:focus-within::after { opacity: 1; } } .special-illustration-feature-card__media, .special-illustration-card__media { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; contain: paint; transform: translateZ(0); backface-visibility: hidden; background: radial-gradient(circle at 28% 24%, rgba(241, 100, 30, 0.16) 0%, rgba(241, 100, 30, 0) 38%), linear-gradient(165deg, #efe9e2 0%, #f7f3ee 100%); z-index: 1; } .special-illustration-feature-card__media img, .special-illustration-card__media img { transform: translateZ(0) scale(1); backface-visibility: hidden; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { .special-illustration-feature-card:hover .special-illustration-feature-card__media img, .special-illustration-feature-card:focus-visible .special-illustration-feature-card__media img, .special-illustration-card:hover .special-illustration-card__media img, .special-illustration-card:focus-visible .special-illustration-card__media img { transform: translateZ(0) scale(1.04); } } .special-illustration-feature-card__gradient, .special-illustration-card__gradient { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(35, 32, 48, 0.03) 0%, #232030 100%); z-index: 2; } .special-illustration-feature-card__gradient { height: 119px; } .special-illustration-card__gradient { height: 112px; } .special-illustration-feature-card__title, .special-illustration-card__title { position: absolute; left: 15px; right: 15px; margin: 0; color: var(--color-cream); font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.22; overflow-wrap: anywhere; z-index: 3; } .special-illustration-feature-card__title { bottom: 21px; } .special-illustration-card__title { bottom: 22px; } .special-illustrations__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%; } @media (min-width: 721px) and (max-width: 1439px) { .special-illustrations { --special-illustrations-shell-width: min(1410px, calc(100% - 30px)); --special-illustrations-shell-inset: 0px; } } @media (max-width: 1142px) { .special-illustrations__title { font-size: 24px; } .special-illustrations__top { flex-direction: column; gap: 20px; } .special-illustrations__intro { width: 100%; flex: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .special-illustrations__title-group { gap: 10px; flex: 1 1 auto; } .special-illustrations__eyebrow { display: none; } .special-illustrations__feature-track { width: 100%; } } @media (max-width: 753px) { .special-illustrations__cta { width: 177px; padding: 17px 15px; } .special-illustrations__cta-label--long { display: none; } .special-illustrations__cta-label--short { display: inline; } } @media (max-width: 720px) { .special-illustrations { --special-illustrations-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --special-illustrations-shell-inset: 0px; padding-block: 20px; } } @media (max-width: 560px) { .special-illustrations__intro { align-items: flex-start; flex-direction: column; } } @media (max-width: 767px) { .special-illustrations__feature-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .special-illustrations__feature-track .special-illustration-feature-card:nth-child(3) { display: none; } .special-illustrations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .special-illustration-feature-card__title, .special-illustration-card__title { font-size: 16px; } } /* [bundle] /styles/components/special-people-gifts.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .special-people-gifts { --special-people-gifts-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --special-people-gifts-shell-inset: var(--homepage-shell-inset, 6px); --special-people-gifts-inline-offset: 5px; --special-people-gifts-safe-buffer: 10px; padding-top: 24px; padding-bottom: 24px; -webkit-user-select: none; user-select: none; } .special-people-gifts__inner { width: var(--special-people-gifts-shell-width); margin-inline: auto; padding-inline: var(--special-people-gifts-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 15px; } @media (min-width: 721px) and (max-width: 1439px) { .special-people-gifts { --special-people-gifts-shell-width: min(1410px, calc(100% - 30px)); --special-people-gifts-shell-inset: 0px; --special-people-gifts-safe-buffer: 15px; } } @media (max-width: 720px) { .special-people-gifts { --special-people-gifts-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --special-people-gifts-shell-inset: 0px; --special-people-gifts-safe-buffer: 10px; padding-top: 20px; padding-bottom: 20px; } } .special-people-gifts__title { margin: 0; padding-top: 5px; position: relative; left: var(--special-people-gifts-inline-offset); color: #232030; font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: 0; } .special-people-gifts__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; align-items: start; width: 100%; } .special-people-gift-card { --special-people-card-tint: rgba(231, 239, 247, 0.8); --special-people-card-frame-padding: 5px; --special-people-card-media-size: 98px; position: relative; z-index: 0; min-height: calc(var(--special-people-card-media-size) + (var(--special-people-card-frame-padding) * 2)); display: grid; grid-template-columns: var(--special-people-card-media-size) minmax(0, 1fr); align-items: center; gap: 10px; padding: var(--special-people-card-frame-padding); box-sizing: border-box; background: radial-gradient(circle at 14% 22%, rgba(255, 249, 241, 0.4) 0%, rgba(255, 249, 241, 0) 42%), linear-gradient(180deg, rgba(255, 249, 241, 0.3) 0%, rgba(255, 249, 241, 0.1) 100%), var(--special-people-card-tint); border-radius: 20px; box-shadow: none; overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 180ms ease; } .special-people-gift-card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (hover: hover) { .special-people-gift-card:hover, .special-people-gift-card:focus-within { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } } .special-people-gift-card__media { width: 100%; height: var(--special-people-card-media-size); aspect-ratio: 1 / 1; border-radius: 17px; background: radial-gradient(circle at 20% 20%, rgba(255, 249, 241, 0.55) 0%, rgba(255, 249, 241, 0) 55%), linear-gradient(160deg, #cedeF0 0%, #e7eef6 100%); } .special-people-gift-card__copy { min-width: 0; display: flex; align-items: center; min-height: 100%; padding-right: 10px; } .special-people-gift-card__title { margin: 0; color: #232030; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.2; text-align: left; } @media (max-width: 1280px) and (min-width: 721px) { .special-people-gifts__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .special-people-gift-card:nth-child(5) { grid-column: 1 / -1; width: calc((100% - 20px) / 2); justify-self: center; } } @media (max-width: 720px) { .special-people-gifts__inner { gap: 15px; } .special-people-gifts__track { grid-template-columns: 1fr; gap: 12px; overflow: visible; width: 100%; } .special-people-gift-card { width: 100%; } } /* [bundle] /styles/components/favorite-categories.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .favorite-categories { --favorite-categories-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --favorite-categories-shell-inset: var(--homepage-shell-inset, 6px); --favorite-categories-inline-offset: 5px; padding-top: 24px; padding-bottom: 24px; -webkit-user-select: none; user-select: none; } .favorite-categories__inner { width: var(--favorite-categories-shell-width); margin-inline: auto; padding-inline: var(--favorite-categories-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 15px; } @media (min-width: 721px) and (max-width: 1439px) { .favorite-categories { --favorite-categories-shell-width: min(1410px, calc(100% - 30px)); --favorite-categories-shell-inset: 0px; } } @media (max-width: 720px) { .favorite-categories { --favorite-categories-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --favorite-categories-shell-inset: 0px; padding-top: 20px; padding-bottom: 20px; } } .favorite-categories__title { margin: 0; padding-top: 5px; position: relative; left: var(--favorite-categories-inline-offset); color: #232030; font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: 0; } .favorite-categories__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; align-items: start; width: 100%; } .favorite-category-card { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: stretch; background: #f8f1eb; border-radius: 30px; box-shadow: none; overflow: hidden; will-change: box-shadow; transition: box-shadow 180ms ease, z-index 0ms linear 0ms; } @media (hover: hover) { .favorite-category-card:hover, .favorite-category-card:focus-within { z-index: 3; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } } .favorite-category-card__media { width: calc(100% - 14px); margin: 7px 7px 0; aspect-ratio: 213 / 231; border-radius: 27px; background: radial-gradient(circle at 20% 18%, rgba(241, 100, 30, 0.12) 0%, rgba(241, 100, 30, 0) 50%), linear-gradient(160deg, #efe9e2 0%, #f7f3ee 100%); } .favorite-category-card__copy { min-height: 72px; padding: 8px 14px 16px; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; text-align: center; } .favorite-category-card__title { margin: 0; width: 100%; color: #232030; font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.2; } @media (max-width: 1280px) and (min-width: 721px) { .favorite-categories__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } } @media (max-width: 720px) { .favorite-categories__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .favorite-category-card__copy { min-height: 78px; padding: 8px 12px 14px; } .favorite-category-card__title { font-size: 15px; } } /* [bundle] /styles/components/editors-picks.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .editors-picks { --editors-picks-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --editors-picks-shell-inset: var(--homepage-shell-inset, 6px); --editors-picks-safe-buffer: 15px; position: relative; width: 100%; max-width: none; margin-left: 0; margin-right: 0; isolation: isolate; overflow: visible; padding-top: 54px; padding-bottom: 28px; -webkit-user-select: none; user-select: none; background: none; } .editors-picks__band { position: absolute; top: 0; left: 0; right: 0; width: auto; height: 333px; pointer-events: none; z-index: 0; overflow: hidden; } .editors-picks__band-svg { display: block; width: 100%; height: 100%; } .editors-picks__band-svg--tablet, .editors-picks__band-svg--mobile { display: none; } .editors-picks__inner { position: relative; z-index: 1; width: min(100%, var(--editors-picks-shell-width)); margin-inline: auto; padding-inline: var(--editors-picks-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 15px; overflow: visible; } .editors-picks__title { margin: 0; position: relative; left: 5px; color: var(--color-cream); font-family: var(--font-body); font-size: 30px; font-weight: 700; line-height: 1.16; } .editors-picks__viewport { width: 100%; overflow: visible; } .editors-picks__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; width: 100%; align-items: start; } .editors-picks-card { position: relative; z-index: 0; min-width: 0; display: flex; flex-direction: column; background: transparent; border-radius: 30px; overflow: hidden; box-shadow: none; will-change: box-shadow; transition: background-color 180ms ease, box-shadow 180ms ease, z-index 0ms linear 0ms; } @media (hover: hover) { .editors-picks-card:hover, .editors-picks-card:focus-within { z-index: 3; background: var(--color-forest); box-shadow: none; } .editors-picks-card:hover .editors-picks-card__title, .editors-picks-card:hover .editors-picks-card__meta, .editors-picks-card:focus-within .editors-picks-card__title, .editors-picks-card:focus-within .editors-picks-card__meta { color: var(--color-cream); } } .editors-picks-card__media { position: relative; width: calc(100% - 10px); margin: 5px 5px 0; aspect-ratio: 302 / 358; border-radius: 27px; overflow: hidden; background: radial-gradient(circle at 20% 18%, rgba(63, 106, 96, 0.1) 0%, rgba(63, 106, 96, 0) 52%), linear-gradient(160deg, var(--color-sand-dark) 0%, var(--color-sand) 100%); } .editors-picks-card__play, .editors-picks-card__badge { display: none; } .editors-picks-card--has-video .editors-picks-card__play { display: none; place-items: center; position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; } .editors-picks-card__play svg { width: 32px; height: 32px; } .editors-picks-card__play rect { fill: rgba(231, 226, 213, 0.78); } .editors-picks-card__play path { fill: rgba(35, 32, 48, 0.8); } .editors-picks-card--has-badge .editors-picks-card__badge { display: inline-flex; position: absolute; top: 10px; right: 10px; align-items: center; justify-content: center; min-height: 28px; padding: 7px 9px; box-sizing: border-box; border-radius: 999px; background: var(--color-cream); color: var(--color-ink); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; } .editors-picks-card__copy { min-height: 84px; padding: 9px 18px 18px; box-sizing: border-box; text-align: center; } .editors-picks-card__title { margin: 0; color: var(--color-ink); font-family: var(--font-body); font-size: 18px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .editors-picks-card__meta { margin: 8px 0 0; color: var(--color-ink); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.2; } @media (min-width: 721px) and (max-width: 1439px) { .editors-picks { --editors-picks-shell-width: min(1410px, calc(100% - 30px)); --editors-picks-shell-inset: 0px; } .editors-picks__band { height: 327px; } .editors-picks__band-svg--desktop, .editors-picks__band-svg--mobile { display: none; } .editors-picks__band-svg--tablet { display: block; } } @media (max-width: 1280px) { .editors-picks__viewport { width: calc(100% + (2 * var(--editors-picks-safe-buffer))); margin-left: calc(-1 * var(--editors-picks-safe-buffer)); margin-right: calc(-1 * var(--editors-picks-safe-buffer)); padding-left: var(--editors-picks-safe-buffer); padding-right: var(--editors-picks-safe-buffer); box-sizing: border-box; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; scroll-snap-type: none; scroll-padding-inline: var(--editors-picks-safe-buffer); scrollbar-width: none; -ms-overflow-style: none; } .editors-picks__viewport::-webkit-scrollbar { display: none; } .editors-picks__track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(280px, 320px); width: max-content; overflow: visible; padding-top: 6px; padding-bottom: 8px; box-sizing: border-box; } .editors-picks-card { scroll-snap-align: start; } } @media (max-width: 720px) { .editors-picks { --editors-picks-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --editors-picks-shell-inset: 0px; --editors-picks-safe-buffer: 16px; padding-top: 36px; padding-bottom: 20px; } .editors-picks__band { height: clamp(192px, calc(39vw + 42px), 286px); transform: translateY(-30px); } .editors-picks__band-svg--desktop, .editors-picks__band-svg--tablet { display: none; } .editors-picks__band-svg--mobile { display: block; } .editors-picks__title { font-size: 26px; top: 7px; } .editors-picks__viewport { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: var(--editors-picks-safe-buffer); padding-right: var(--editors-picks-safe-buffer); scroll-padding-inline: var(--editors-picks-safe-buffer); } .editors-picks__track { gap: 0; grid-auto-columns: calc((100vw - 16px) / 2.2); } .page-main > .favorite-categories + .editors-picks { margin-top: 30px; } } /* [bundle] /styles/components/daily-deals.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .daily-deals { --daily-deals-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --daily-deals-shell-inset: var(--homepage-shell-inset, 6px); --daily-deals-safe-buffer: 15px; position: relative; width: 100%; max-width: none; margin-left: 0; margin-right: 0; isolation: isolate; padding-top: 18px; padding-bottom: 14px; overflow: visible; -webkit-user-select: none; user-select: none; } .daily-deals__band { position: absolute; top: 0; left: 0; right: 0; width: auto; height: 257px; pointer-events: none; z-index: 0; overflow: hidden; } .daily-deals__band-svg { display: block; width: 100%; height: 100%; } .daily-deals__inner { position: relative; z-index: 1; width: min(100%, var(--daily-deals-shell-width)); margin-inline: auto; padding-inline: var(--daily-deals-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 17px; overflow: visible; } body.page--homepage .daily-deals[data-recently-viewed-auth-only] { display: none; } body.page--homepage.is-homepage-authenticated .daily-deals[data-recently-viewed-auth-only] { display: block; } .daily-deals__header { display: flex; flex-direction: column; gap: 14px; min-height: 41px; padding-left: 5px; box-sizing: border-box; } .daily-deals__title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--color-cream); font-family: var(--font-body); font-size: 28px; line-height: 1.15; } .daily-deals__title-strong { font-weight: 700; } .daily-deals__title-light { font-weight: 500; } .daily-deals__status-row { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; } .daily-deals__countdown { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .daily-deals__clock { flex: 0 0 auto; width: 30px; height: 30px; } .daily-deals__clock svg { width: 100%; height: 100%; display: block; } .daily-deals__clock circle, .daily-deals__clock line { stroke: var(--color-cream); } .daily-deals__clock circle { fill: none; stroke-width: 2.5; } .daily-deals__clock-hand { stroke-width: 2.5; stroke-linecap: round; transform-origin: 15px 15px; } .daily-deals__clock-hand--hour { animation: none; } .daily-deals__clock-hand--minute { animation: daily-deals-minute-spin 16s linear infinite; } .daily-deals__timer { margin: 0; color: var(--color-cream); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.15; letter-spacing: 1.2px; text-transform: uppercase; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; } .daily-deals__bundle { min-height: 36px; padding: 7px 16px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(66, 235, 179, 0.35); outline: 1px solid rgba(86, 243, 191, 0.25); outline-offset: -1px; color: var(--color-cream); font-family: var(--font-body); font-size: 11.6px; font-weight: 700; line-height: 1; white-space: nowrap; } .daily-deals__viewport { width: 100%; margin-block: -6px -10px; padding-block: 6px 10px; box-sizing: border-box; overflow: hidden; } .daily-deals__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; width: 100%; align-items: start; } .daily-deal-card { position: relative; z-index: 0; display: flex; flex-direction: column; width: 100%; min-width: 0; aspect-ratio: 227 / 280; border-radius: 18px; overflow: hidden; background: transparent; box-shadow: none; text-decoration: none; transition: box-shadow 180ms ease, z-index 0ms linear 0ms; scroll-snap-align: start; } .daily-deal-card__media { display: block; flex: 0 0 auto; width: calc(100% - 10px); margin: 5px 5px 0; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 20% 18%, rgba(241, 100, 30, 0.14) 0%, rgba(241, 100, 30, 0) 52%), linear-gradient(160deg, var(--daily-deal-card-tone, #efe9e2) 0%, var(--daily-deal-card-accent, #f7f3ee) 100%); } .daily-deal-card__media img { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .daily-deal-card__copy { flex: 1 1 auto; min-height: 58px; padding: 12px 18px 16px; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; text-align: center; } .daily-deal-card__title { margin: 0; color: #232030; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; } .daily-deal-card:focus-visible { outline: 2px solid rgba(255, 249, 241, 0.8); outline-offset: 4px; } @media (hover: hover) and (pointer: fine) { .daily-deal-card:hover, .daily-deal-card:focus-within { z-index: 2; background: #3f6a60; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .daily-deal-card:hover .daily-deal-card__title, .daily-deal-card:focus-within .daily-deal-card__title { color: var(--color-cream); } .daily-deal-card:hover .daily-deal-card__media img, .daily-deal-card:focus-within .daily-deal-card__media img { transform: scale(1.04); } } @media (hover: none), (pointer: coarse) { .daily-deal-card:hover { background: transparent; box-shadow: none; } .daily-deal-card:hover .daily-deal-card__title { color: #232030; } } @media (min-width: 721px) and (max-width: 1439px) { .daily-deals { --daily-deals-shell-width: min(1410px, calc(100% - 30px)); --daily-deals-shell-inset: 0px; } .daily-deals__band { height: 257px; } .daily-deals__header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .daily-deals__title { font-size: 24px; flex-wrap: nowrap; white-space: nowrap; } .daily-deals__status-row { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; } } @media (max-width: 1280px) { .daily-deals__viewport { width: calc(100% + (2 * var(--daily-deals-safe-buffer))); margin-left: calc(-1 * var(--daily-deals-safe-buffer)); margin-right: calc(-1 * var(--daily-deals-safe-buffer)); padding-left: var(--daily-deals-safe-buffer); padding-right: var(--daily-deals-safe-buffer); box-sizing: border-box; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: none; scroll-padding-inline: var(--daily-deals-safe-buffer); scrollbar-width: none; -ms-overflow-style: none; } .daily-deals__viewport::-webkit-scrollbar { display: none; } .daily-deals__track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(210px, calc((100vw - 30px) / 3.5), 227px); width: max-content; } .daily-deal-card { aspect-ratio: 227 / 284; } } @media (max-width: 720px) { .daily-deals { --daily-deals-shell-width: min(720px, calc(100% - 32px)); --daily-deals-shell-inset: 0px; --daily-deals-safe-buffer: 16px; padding-top: 16px; padding-bottom: 14px; } .daily-deals__viewport { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: var(--daily-deals-safe-buffer); padding-right: var(--daily-deals-safe-buffer); scroll-padding-inline: var(--daily-deals-safe-buffer); } .daily-deals__band { height: clamp(216px, calc(18vw + 146px), 280px); } .daily-deals__header { gap: 10px; transform: translateY(10px); } .daily-deals__title { font-size: 22px; letter-spacing: 0; } .daily-deals__status-row { gap: 10px; } .daily-deals__countdown { gap: 8px; } .daily-deals__timer { font-size: 11px; letter-spacing: 1px; } .daily-deals__track { grid-auto-columns: clamp(218px, calc((100vw - 48px) / 1.65), 260px); } .daily-deal-card { aspect-ratio: 227 / 284; } } @media (min-width: 520px) and (max-width: 720px) { .daily-deals__track { gap: 0; grid-auto-columns: calc((100vw - (2 * var(--daily-deals-safe-buffer))) / 2); } } @media (min-width: 1440px) { .daily-deals__header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; } .daily-deals__title { flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; } .daily-deals__status-row { flex: 1 1 auto; min-width: 0; justify-content: flex-start; flex-wrap: nowrap; gap: 28px; } .daily-deals__countdown, .daily-deals__timer { flex-wrap: nowrap; white-space: nowrap; } .daily-deals__bundle { flex: 0 0 auto; } } @keyframes daily-deals-minute-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* [bundle] /styles/components/special-gifts-rail.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .special-gifts-rail { --special-gifts-rail-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --special-gifts-rail-shell-inset: var(--homepage-shell-inset, 6px); --special-gifts-card-width: 258px; --special-gifts-card-media-height: calc(var(--special-gifts-card-width) - 12px); --special-gifts-track-gap: 17.5px; --special-gifts-rail-start-buffer: 0px; --special-gifts-rail-end-buffer: 0px; --special-gifts-rail-fade-width: var(--homepage-rail-fade-width, 52px); --special-gifts-rail-fade-overhang: var(--homepage-rail-fade-overhang, 26px); --special-gifts-rail-arrow-overhang: var(--homepage-rail-arrow-overhang, 27px); --special-gifts-rail-overlay-reserve: var(--homepage-rail-overlay-reserve, 96px); --special-gifts-rail-viewport-top: 6px; --special-gifts-rail-viewport-bottom: 10px; --special-gifts-rail-hover-safe-inline: 8px; --special-gifts-rail-hover-safe-block: 8px; --special-gifts-rail-header-offset: 50px; --special-gifts-card-height: 300px; --special-gifts-card-copy-gap: 17px; position: relative; z-index: 1; isolation: isolate; padding-top: 14px; padding-bottom: 14px; overflow: visible; -webkit-user-select: none; user-select: none; } .special-gifts-rail__inner { position: relative; width: min(100%, var(--special-gifts-rail-shell-width)); margin-inline: auto; padding-inline: var(--special-gifts-rail-shell-inset); box-sizing: border-box; overflow: visible; } body.page--homepage .special-gifts-rail[data-recently-viewed-auth-only] { display: none; } body.page--homepage.is-homepage-authenticated .special-gifts-rail[data-recently-viewed-auth-only] { display: block; } .special-gifts-rail__header { position: relative; z-index: 5; margin-bottom: 4px; padding-inline: 0; min-height: 46px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; } .special-gifts-rail__title { margin: 0; min-height: 46px; display: inline-flex; align-items: center; color: #232030; font-family: var(--font-body); font-size: 26px; font-weight: 600; line-height: 1.26; letter-spacing: 0; } .special-gifts-rail__viewport { position: relative; z-index: 1; width: calc(100% + (2 * var(--special-gifts-rail-hover-safe-inline))); margin: calc(-1 * var(--special-gifts-rail-hover-safe-block)) calc(-1 * var(--special-gifts-rail-hover-safe-inline)); padding: calc(var(--special-gifts-rail-viewport-top) + var(--special-gifts-rail-hover-safe-block)) calc(var(--special-gifts-rail-end-buffer) + var(--special-gifts-rail-hover-safe-inline)) calc(var(--special-gifts-rail-viewport-bottom) + var(--special-gifts-rail-hover-safe-block)); padding-left: calc(var(--special-gifts-rail-start-buffer) + var(--special-gifts-rail-hover-safe-inline)); box-sizing: border-box; overflow-x: hidden; overflow-y: hidden; scroll-padding-inline: var(--special-gifts-rail-start-buffer); scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x pan-y pinch-zoom; } .special-gifts-rail__viewport::-webkit-scrollbar { display: none; } .special-gifts-rail__track { width: max-content; display: inline-flex; align-items: flex-start; gap: var(--special-gifts-track-gap); padding: 0; box-sizing: border-box; transform: translate3d(0, 0, 0); } .special-gifts-rail__gradient { position: absolute; top: calc(var(--special-gifts-rail-header-offset) + var(--special-gifts-rail-viewport-top) - 8px); width: var(--special-gifts-rail-fade-width); height: calc(var(--special-gifts-card-height) + var(--special-gifts-rail-viewport-bottom) + 16px); pointer-events: none; z-index: 3; opacity: 1; transition: opacity 0.62s cubic-bezier(0.25, 0.1, 0.25, 1); } .special-gifts-rail__gradient--left { left: calc(-1 * var(--special-gifts-rail-fade-overhang)); background: linear-gradient(90deg, #f8f1eb 0%, rgba(248, 241, 235, 0) 100%); } .special-gifts-rail__gradient--right { right: calc(-1 * var(--special-gifts-rail-fade-overhang)); background: linear-gradient(270deg, #f8f1eb 0%, rgba(248, 241, 235, 0) 100%); } .special-gifts-rail.is-at-start .special-gifts-rail__gradient--left, .special-gifts-rail.is-at-end .special-gifts-rail__gradient--right { opacity: 0; } .special-gifts-rail__arrow { width: 56px; height: 46px; padding: 0; margin: 0; border: 0; border-radius: 999px; background-position: center; background-repeat: no-repeat; background-size: 22px 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: visible; background: transparent; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: opacity 0.18s ease; backface-visibility: hidden; flex: 0 0 auto; z-index: 6; } .special-gifts-rail__arrow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: #232030; pointer-events: none; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: transform 0.18s ease; will-change: transform; backface-visibility: hidden; } .special-gifts-rail__arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; transform: translate(-50%, -50%); transform-origin: 50% 50%; backface-visibility: hidden; } .special-gifts-rail__arrow--next { background-image: none; } .special-gifts-rail__arrow--next::after { background-image: url("/assets/header-icons/pager-pill-next.svg"); } .special-gifts-rail__arrow--prev { background-image: none; } .special-gifts-rail__arrow--prev::after { background-image: url("/assets/header-icons/pager-pill-prev.svg"); } .special-gifts-rail__arrow:hover:not(.is-hidden), .special-gifts-rail__arrow:focus-visible:not(.is-hidden) { transform: translate3d(0, 0, 0) scale(1); } .special-gifts-rail__arrow:hover:not(.is-hidden)::before, .special-gifts-rail__arrow:focus-visible:not(.is-hidden)::before { transform: translate3d(0, 0, 0) scale(1.04); } .special-gifts-rail__arrow:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.18); outline-offset: 3px; } .special-gifts-rail__arrow-icon { display: none; } .special-gifts-rail__inner > .special-gifts-rail__arrow { position: absolute; top: 4px; z-index: 6; } .special-gifts-rail__inner > .special-gifts-rail__arrow--next { right: 5px; left: auto; } .special-gifts-rail__inner > .special-gifts-rail__arrow--prev { right: 71px; left: auto; } .special-gifts-rail__arrow.is-hidden { display: inline-flex; pointer-events: none; cursor: default; opacity: 0.35; } .special-gifts-rail__arrow.is-hidden:hover, .special-gifts-rail__arrow.is-hidden:focus-visible { transform: none; } .special-gifts-rail.is-at-start.is-at-end .special-gifts-rail__arrow { display: none; } .special-gifts-rail__header.is-pager-host { display: flex; } .special-gifts-rail__header.is-pager-host.has-no-view-all .special-gifts-rail__title { margin-right: auto; } .special-gifts-rail__header.is-pager-host .special-gifts-rail__arrow--next { margin-left: 0; } .special-gifts-rail-card { width: var(--special-gifts-card-width); min-width: var(--special-gifts-card-width); height: var(--special-gifts-card-height); position: relative; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 0; background: #f8f1eb; overflow: hidden; border-radius: 30px; color: #232030; text-decoration: none; box-shadow: none; transition: box-shadow 180ms ease; } @media (hover: hover) { .special-gifts-rail-card:hover, .special-gifts-rail-card:focus-visible { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .special-gifts-rail-card:hover .special-gifts-rail-card__media, .special-gifts-rail-card:focus-visible .special-gifts-rail-card__media { box-shadow: none; } .special-gifts-rail-card:hover .special-gifts-rail-card__media img, .special-gifts-rail-card:focus-visible .special-gifts-rail-card__media img, .special-gifts-rail-card:focus-within .special-gifts-rail-card__media img { transform: scale(1.04); } } .special-gifts-rail-card:focus-visible { outline: none; } .special-gifts-rail-card__media { position: absolute; top: 6px; left: 6px; width: calc(100% - 12px); height: calc(var(--special-gifts-card-width) - 12px); border-radius: 27px; overflow: hidden; transition: box-shadow 180ms ease; background: radial-gradient(circle at 20% 18%, rgba(255, 249, 241, 0.55) 0%, rgba(255, 249, 241, 0) 48%), linear-gradient(160deg, var(--special-gifts-card-tone, #e2e7f1) 0%, var(--special-gifts-card-accent, #ece3db) 100%); } .special-gifts-rail-card__media img { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .special-gifts-rail-card__copy { position: absolute; left: 50%; top: calc(var(--special-gifts-card-media-height) + var(--special-gifts-card-copy-gap)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; padding: 0; text-align: center; } .special-gifts-rail-card__icon { width: 20px; height: 20px; flex: 0 0 20px; display: block; object-fit: contain; } .special-gifts-rail-card__title { display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; justify-content: center; min-width: 0; max-width: 196px; margin: 0; overflow: hidden; color: #232030; text-align: center; font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-overflow: clip; word-break: normal; overflow-wrap: anywhere; } .special-gifts-rail-card__title.is-two-line { display: flex; white-space: normal; text-wrap: balance; max-height: calc(2 * 1.2em); } @media (min-width: 961px) { body.is-ai-panel-open:not(.page--gift-room) .special-gifts-rail { --special-gifts-card-height: calc(var(--special-gifts-card-width) + 48px); --special-gifts-card-copy-gap: clamp(12px, 1vw, 15px); --special-gifts-rail-viewport-bottom: 14px; --special-gifts-rail-hover-safe-inline: 10px; --special-gifts-rail-hover-safe-block: 10px; } body.is-ai-panel-open:not(.page--gift-room) .special-gifts-rail-card { border-radius: 28px; } body.is-ai-panel-open:not(.page--gift-room) .special-gifts-rail-card__media { border-radius: 25px; } } @media (min-width: 1281px) { .special-gifts-rail { --special-gifts-rail-start-buffer: 0px; --special-gifts-rail-end-buffer: 0px; } } @media (min-width: 721px) and (max-width: 1439px) { .special-gifts-rail { --special-gifts-rail-shell-width: min(1410px, calc(100% - 30px)); --special-gifts-rail-shell-inset: 0px; } } @media (max-width: 1280px) { .special-gifts-rail { --special-gifts-card-width: clamp(232px, calc((100vw - 30px) / 3.3), 258px); --special-gifts-rail-start-buffer: 8px; --special-gifts-rail-end-buffer: 24px; } } @media (max-width: 1024px) { .special-gifts-rail { --special-gifts-rail-start-buffer: 16px; --special-gifts-rail-end-buffer: 16px; --special-gifts-rail-viewport-top: 4px; --special-gifts-rail-viewport-bottom: 8px; --special-gifts-card-height: 292px; padding-top: 12px; padding-bottom: 10px; } .special-gifts-rail__title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: 0; } .special-gifts-rail__gradient, .special-gifts-rail__arrow { display: none !important; } .special-gifts-rail__viewport { overflow-x: auto; } } @media (max-width: 720px) { .special-gifts-rail { --special-gifts-rail-shell-width: min(720px, calc(100% - 32px)); --special-gifts-rail-shell-inset: 0px; --special-gifts-card-width: clamp(140px, calc((100vw - 50px) / 2.5), 164px); --special-gifts-rail-start-buffer: 16px; --special-gifts-rail-end-buffer: 16px; --special-gifts-rail-viewport-top: 4px; --special-gifts-rail-viewport-bottom: 8px; --special-gifts-card-height: calc(var(--special-gifts-card-width) + 60px); padding-top: 10px; padding-bottom: 8px; } .special-gifts-rail__header { margin-bottom: 6px; padding-inline: 0; } .special-gifts-rail__viewport { width: calc(100vw + (2 * var(--special-gifts-rail-hover-safe-inline))); margin-left: calc(50% - 50vw - var(--special-gifts-rail-hover-safe-inline)); margin-right: calc(50% - 50vw - var(--special-gifts-rail-hover-safe-inline)); padding-left: calc(var(--special-gifts-rail-start-buffer) + var(--special-gifts-rail-hover-safe-inline)); padding-right: calc(var(--special-gifts-rail-end-buffer) + var(--special-gifts-rail-hover-safe-inline)); scroll-padding-inline: var(--special-gifts-rail-start-buffer); } .special-gifts-rail__title { font-size: 21px; line-height: 26px; font-weight: 600; letter-spacing: 0; } .special-gifts-rail-card { border-radius: 22px; padding: 6px 6px 14px; } .special-gifts-rail-card__media { border-radius: 18px; } .special-gifts-rail-card__copy { gap: 5px; } .special-gifts-rail-card__title { text-align: center; } } /* [bundle] /styles/components/gifts-you-like.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .gifts-you-like { --gifts-you-like-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --gifts-you-like-shell-inset: var(--homepage-shell-inset, 6px); padding-top: 24px; padding-bottom: 24px; -webkit-user-select: none; user-select: none; } .gifts-you-like__inner { width: min(100%, var(--gifts-you-like-shell-width)); margin-inline: auto; padding-inline: var(--gifts-you-like-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; } .gifts-you-like__intro { display: flex; flex-direction: column; gap: 8px; } .gifts-you-like__title { margin: 0; position: relative; left: 5px; color: #232030; font-family: var(--font-body); font-size: 28px; font-weight: 700; line-height: 1.15; } .gifts-you-like__subtitle { margin: 0; position: relative; left: 5px; color: #232030; font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.25; } .gifts-you-like__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; width: 100%; align-items: start; } .gifts-you-like-card { min-width: 0; display: flex; flex-direction: column; } .gifts-you-like-card__media { width: 100%; aspect-ratio: 329 / 330; border-radius: 20px; overflow: hidden; contain: paint; transform: translateZ(0); backface-visibility: hidden; background: #c5c7d7; } .gifts-you-like-card__media-surface { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 20% 18%, rgba(255, 249, 241, 0.18) 0%, rgba(255, 249, 241, 0) 48%), linear-gradient(150deg, #c9ccdb 0%, #d8d9e4 100%); transform: translate3d(0, 0, 0) scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform 220ms ease; } @media (hover: hover) { .gifts-you-like-card:hover .gifts-you-like-card__media-surface, .gifts-you-like-card:focus-within .gifts-you-like-card__media-surface { transform: translate3d(0, 0, 0) scale(1.05); } } .gifts-you-like-card__copy { min-height: 90px; padding-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .gifts-you-like-card__title { margin: 0; color: #232030; font-family: var(--font-body); font-size: 21px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .gifts-you-like-card__cta { min-height: 45px; padding: 6px 22px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; border-radius: 999px; outline: 2px solid #232030; outline-offset: -2px; background: #f8f1eb; color: #232030; text-decoration: none; transition: none; } .gifts-you-like-card__cta:hover, .gifts-you-like-card__cta:focus-visible { box-shadow: none; } .gifts-you-like-card__cta-label { font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.15; white-space: nowrap; } .gifts-you-like-card__cta-icon { width: 22px; height: 16px; display: block; flex: 0 0 auto; pointer-events: none; transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); object-fit: contain; } .gifts-you-like-card__cta:hover .gifts-you-like-card__cta-icon, .gifts-you-like-card__cta:focus-visible .gifts-you-like-card__cta-icon { transform: translate3d(4px, 0, 0); } @media (min-width: 721px) and (max-width: 1439px) { .gifts-you-like { --gifts-you-like-shell-width: min(1410px, calc(100% - 30px)); --gifts-you-like-shell-inset: 0px; } .gifts-you-like__title { font-size: 24px; } .gifts-you-like__subtitle { font-size: 16px; } .gifts-you-like__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gifts-you-like-card__title { font-size: 19px; } .gifts-you-like-card__cta { gap: 18px; padding-inline: 22px; } } @media (max-width: 720px) { .gifts-you-like { --gifts-you-like-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --gifts-you-like-shell-inset: 0px; padding-top: 20px; padding-bottom: 20px; } .gifts-you-like__inner { gap: 18px; } .gifts-you-like__title { font-size: 24px; } .gifts-you-like__subtitle { font-size: 16px; } .gifts-you-like__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } .gifts-you-like-card__copy { min-height: 84px; gap: 10px; padding-top: 8px; } .gifts-you-like-card__title { font-size: 15.5px; line-height: 1.16; } .gifts-you-like-card__cta { min-height: 42px; gap: 14px; padding-inline: 18px; } .gifts-you-like-card__cta-label { font-size: 14px; } } /* [bundle] /styles/components/marketplace-info.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .marketplace-info { --marketplace-info-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --marketplace-info-shell-inset: var(--homepage-shell-inset, 6px); --marketplace-info-fill: linear-gradient(180deg, #fff7e8 0%, #fff2db 100%); --marketplace-info-button-fill: #DADDC6; position: relative; isolation: isolate; overflow: visible; padding-top: 62px; padding-bottom: 0; margin-bottom: 0; border-top: 0; background: none; -webkit-user-select: none; user-select: none; } .marketplace-info__band { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; pointer-events: none; z-index: 0; overflow: hidden; } .marketplace-info__band-svg { display: block; width: 100%; height: 100%; object-fit: fill; } .marketplace-info__inner { position: relative; z-index: 1; width: min(100%, var(--marketplace-info-shell-width)); margin-inline: auto; padding-inline: var(--marketplace-info-shell-inset); box-sizing: border-box; display: flex; flex-direction: column; gap: 34px; } .marketplace-info__hero { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .marketplace-info__hero-copy { max-width: 930px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .marketplace-info__eyebrow { margin: 0; color: rgba(35, 32, 48, 0.56); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 1.7px; text-transform: uppercase; } .marketplace-info__title { margin: 0; color: #232030; font-family: var(--font-body); font-size: 42px; font-weight: 700; line-height: 1.14; letter-spacing: 0; } .marketplace-info__lede { margin: 0; color: rgba(35, 32, 48, 0.88); font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.52; max-width: 820px; } .marketplace-info__hero-actions { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .marketplace-info__hero-note { margin: 0; color: rgba(35, 32, 48, 0.72); font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.5; } .marketplace-info__story-link { min-height: 54px; padding: 0 28px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--marketplace-info-button-fill); outline: 3px solid #232030; outline-offset: -3px; box-shadow: none; color: #232030; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; transition: box-shadow 180ms ease, background-color 180ms ease, color 180ms ease; } .marketplace-info__story-link:hover, .marketplace-info__story-link:focus-visible { background: #232030; color: var(--color-cream); box-shadow: none; } .marketplace-info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .marketplace-info-point { min-width: 0; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 20px; align-items: start; padding: 8px 26px 0; background: none; box-shadow: none; outline: 0; border-radius: 0; } .marketplace-info-point + .marketplace-info-point { border-left: 1px solid rgba(35, 32, 48, 0.12); } .marketplace-info-point__icon-wrap { width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; } .marketplace-info-point__copy { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; } .marketplace-info-point__icon { width: 90px; height: 90px; display: block; object-fit: contain; } .marketplace-info-point__kicker { margin: 0; color: rgba(35, 32, 48, 0.5); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; } .marketplace-info-point__title { margin: 0; color: #232030; font-family: var(--font-body); font-size: 25px; font-weight: 700; line-height: 1.24; letter-spacing: 0; } .marketplace-info-point__text { margin: 0; color: rgba(35, 32, 48, 0.86); font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.54; } .marketplace-info__support { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 22px 0 28px; border-top: 1px solid rgba(35, 32, 48, 0.12); background: none; box-shadow: none; } .marketplace-info__support-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .marketplace-info__support-label { margin: 0; color: rgba(35, 32, 48, 0.56); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; text-transform: uppercase; } .marketplace-info__support-text { margin: 0; color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.48; max-width: 760px; } .marketplace-info__support-cta { min-height: 50px; padding: 0 24px; box-sizing: border-box; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: #DADDC6; color: #232030; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; transition: transform 180ms ease, background-color 180ms ease, color 180ms ease; } .marketplace-info__support-cta:hover, .marketplace-info__support-cta:focus-visible { background: #DADDC6; color: #232030; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: none; } @media (min-width: 721px) and (max-width: 1439px) { .marketplace-info { --marketplace-info-shell-width: min(1410px, calc(100% - 30px)); --marketplace-info-shell-inset: 0px; padding-top: 46px; } .marketplace-info__inner { gap: 26px; } .marketplace-info__title { font-size: 34px; max-width: 760px; } .marketplace-info__lede { font-size: 16px; } .marketplace-info__grid { grid-template-columns: 1fr; gap: 0; } .marketplace-info-point { grid-template-columns: 78px minmax(0, 1fr); gap: 18px; padding: 20px 0; } .marketplace-info-point + .marketplace-info-point { border-left: 0; border-top: 1px solid rgba(35, 32, 48, 0.12); } .marketplace-info-point__icon-wrap { width: 102px; height: 102px; } .marketplace-info-point__icon { width: 82px; height: 82px; } .marketplace-info-point__title { font-size: 24px; } .marketplace-info-point__text { font-size: 15px; } .marketplace-info__support { grid-template-columns: 1fr; align-items: start; gap: 14px; padding-bottom: 24px; } } @media (max-width: 720px) { .marketplace-info { --marketplace-info-shell-width: var(--homepage-shell-width, min(720px, calc(100% - 32px))); --marketplace-info-shell-inset: 0px; margin-top: 30px; padding-top: 34px; } .marketplace-info__band { top: -14px; } .marketplace-info__inner { gap: 22px; } .marketplace-info__title { font-size: 29px; line-height: 1.16; letter-spacing: 0; } .marketplace-info__lede { font-size: 15px; } .marketplace-info__hero-note { font-size: 14px; } .marketplace-info__story-link { width: 100%; } .marketplace-info__grid { grid-template-columns: 1fr; } .marketplace-info-point { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 18px 0; } .marketplace-info-point + .marketplace-info-point { border-left: 0; border-top: 1px solid rgba(35, 32, 48, 0.12); } .marketplace-info-point__icon-wrap { width: 94px; height: 94px; } .marketplace-info-point__icon { width: 74px; height: 74px; } .marketplace-info-point__title { font-size: 21px; } .marketplace-info-point__text { font-size: 14.5px; line-height: 1.45; } .marketplace-info__support { grid-template-columns: 1fr; align-items: start; gap: 14px; padding: 18px 0 22px; } .marketplace-info__support-text { font-size: 14px; } .marketplace-info__support-cta { width: 100%; } } /* [bundle] /styles/components/search.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .search-shell { position: relative; background: var(--color-cream); padding: 12px 0 14px; } .search-shell__frame { width: min(100% - 48px, 1552px); margin-inline: auto; display: flex; flex-direction: column; gap: 12px; } .search-shell__form { min-height: 80px; display: flex; align-items: center; gap: 10px; padding: 4px; border: 3px solid var(--popup-outline); border-radius: var(--radius-pill); background: var(--color-cream); } .search-shell__input { flex: 1 1 auto; min-width: 0; height: 68px; border: 0; background: transparent; outline: 0; padding: 0 18px 0 24px; color: var(--color-ink); font-family: var(--font-heading); font-size: 22px; font-weight: 500; line-height: 1; } .search-shell__input::placeholder { color: rgba(35, 32, 48, 0.38); } .search-shell__submit { width: 68px; height: 68px; flex: 0 0 68px; border: 0; border-radius: var(--radius-pill); background: var(--color-forest); color: var(--color-cream); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .search-shell__submit:hover { background: var(--color-forest-dark); transform: translateY(-1px); } .search-shell__shortcuts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .search-shell__pill { min-height: 36px; padding: 8px 18px; border: 0; border-radius: var(--radius-pill); background: #f6f8fb; color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .search-shell__pill:hover { transform: translateY(-1px); background: #eef2f8; } @media (max-width: 1024px) { .search-shell__frame { width: min(100% - 32px, 100%); } .search-shell__form { min-height: 68px; } .search-shell__input { height: 56px; font-size: 18px; } .search-shell__submit { width: 56px; height: 56px; flex-basis: 56px; } } @media (max-width: 640px) { .search-shell { padding: 8px 0 12px; } .search-shell__frame { gap: 10px; } .search-shell__form { min-height: 58px; border-width: 2px; } .search-shell__input { height: 48px; padding-left: 18px; font-size: 16px; } .search-shell__submit { width: 48px; height: 48px; flex-basis: 48px; } .search-shell__shortcuts { gap: 16px; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; padding: 0 16px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .search-shell__shortcuts::-webkit-scrollbar { display: none; } .search-shell__pill { min-height: 34px; padding-inline: 14px; font-size: 13px; scroll-snap-align: start; } } /* [bundle] /styles/components/search-page.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } html:has(> body.page--search), html:has(> body.page--search) > body.page--search { overflow-x: clip; } .page--search { --page-bg: #f8f1eb; --search-filters-width: 0px; --search-filters-gap: 0px; --search-filters-open-width: 247px; --search-filters-panel-width: 243px; --search-filters-inline-sticky-top: 90px; --search-filter-sidebar-sticky-top: 90px; --search-filter-sidebar-current-top: var(--search-filter-sidebar-sticky-top); --search-filters-inline-assistant-offset: 68px; --search-filters-open-column-offset: -130px; --search-filters-transition-duration: 420ms; --search-filters-drawer-transition-duration: 620ms; --search-filters-transition-ease: cubic-bezier(0.16, 0.84, 0.22, 1); background: #f8f1eb; scrollbar-gutter: stable; } body.page.is-search-filters-open { overflow: hidden; } .page--search.is-group-mode, .page--search.is-group-mode .search-page { background: #f8f1eb; } .search-page { padding: 0 0 72px; } .page--search.is-group-mode .search-page { padding-top: 0; } .page--search.is-curated-group-mode .search-page__shell { margin-top: -15px; } .search-page__shell { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 981px) { .page--search .search-page__shell.is-filters-open:has(.search-assistant-bar[hidden]) { --search-filters-inline-sticky-top: calc(90px + var(--search-filters-inline-assistant-offset)); --search-filters-open-column-offset: calc(-130px + var(--search-filters-inline-assistant-offset)); } .page--search .search-page__shell.is-filter-drawer-docked .search-page__filters-column .cat-filters-drawer.is-open { position: sticky; left: auto; top: var(--search-filter-sidebar-current-top); max-height: calc(100vh - var(--search-filter-sidebar-current-top) - 18px); overflow: visible; clip-path: none; } .page--search .search-page__shell.is-filter-drawer-docked .search-page__filters-column .cat-filters-drawer.is-open .cat-filters-drawer__panel { min-height: 0; height: auto; max-height: inherit; overflow: visible; } .page--search .search-page__shell.is-filter-drawer-docked .search-page__filters-column .cat-filters-drawer.is-open .cat-filters-drawer__body { margin-inline: -18px; padding-inline: 18px; } } @media (min-width: 981px) { .page--search.is-ai-panel-open .search-page > .search-page__shell { margin-left: auto; margin-right: calc(var(--lume-panel-reserve, 360px) - clamp(0px, calc(2160px - 100vw), var(--lume-panel-reserve, 360px))); } } .search-page__breadcrumbs { margin-top: -11px; } .search-page__breadcrumbs[hidden] { display: none !important; } .search-jedipicks[hidden], .pager[hidden] { display: none !important; } .search-curated-card[hidden] { display: none !important; } .search-curated-card { margin: -15px 0 0; border-bottom: 1px solid #ded9d2; background: #f8f1eb; padding-bottom: 19px; } .search-curated-card:not([hidden]) + .search-page__breadcrumbs { margin-top: -4px; } .search-curated-card__frame { position: relative; display: grid; grid-template-columns: 251px 122px minmax(0, 1fr); column-gap: 7px; width: min(1037px, 100%); height: 251px; margin: 0; overflow: visible; cursor: default; } .search-curated-card__media-main, .search-curated-card__thumb { position: relative; display: block; overflow: hidden; border-radius: 23px; background: var(--search-curated-media, var(--search-curated-thumb, var(--color-sand))); box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.06); color: inherit; text-decoration: none; transition: box-shadow 0.2s ease; } .search-curated-card__media-main { width: 251px; height: 251px; } .search-curated-card__media-main:focus-visible, .search-curated-card__title-link:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.65); outline-offset: 3px; } .search-curated-card__media-main:hover, .search-curated-card__media-main:focus-visible, .search-curated-card__thumb:hover { z-index: 4; box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.06), 0 0 4px rgba(35, 32, 48, 0.5); } .search-curated-card__media-main::before, .search-curated-card__thumb::before { content: ""; position: absolute; width: 68%; height: 68%; left: 16%; top: 18%; border-radius: 42% 58% 46% 54%; background: rgba(255, 249, 241, 0.48); } .search-curated-card__thumbs { display: grid; grid-template-rows: 122px 122px; gap: 7px; } .search-curated-card__thumb { width: 122px; height: 122px; } .search-curated-card__thumb--alt { filter: saturate(0.9) brightness(1.02); } .search-curated-card__pick-badge { position: absolute; left: 0 !important; top: auto !important; right: auto !important; bottom: 0 !important; z-index: 2; width: 59px !important; height: 59px !important; min-height: 59px; padding: 0 0 11px 12px; border-radius: 0 30px 0 0; display: grid; place-items: end start; gap: 0; background: var(--jedi-picks-badge-bg, var(--color-jedi-picks-yellow)); color: var(--jedi-picks-badge-ink, var(--color-ink)); font-family: var(--font-heading); pointer-events: none; } .search-curated-card__pick-badge img { width: 36px; height: 36px; display: block; object-fit: contain; } .search-curated-card__pick-badge-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .search-curated-card__content { position: relative; height: 251px; margin-left: 13px; min-width: 0; } .search-curated-card__store-row, .search-curated-card__price-row, .search-curated-card__actions { display: flex; align-items: center; } .search-curated-card__store-row { position: absolute; left: 0; top: 10px; gap: 5px; max-width: 100%; min-height: 36px; color: #232030; font-family: var(--font-heading); } .search-curated-card__reaction-pill, .search-curated-card__seller-wrap, .search-curated-card__rating-pill { display: inline-flex; align-items: center; border-radius: 999px; background: #f2e9e0; color: #232030; font-family: var(--font-heading); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; } .search-curated-card__reaction-pill { gap: 5px; min-height: 36px; padding: 0 10px 0 9px; border: 0; cursor: pointer; } .search-curated-card__reaction-pill img, .search-curated-card__reaction-pill svg { width: 19px; height: 16px; display: block; object-fit: contain; flex: 0 0 auto; } .search-curated-card__reaction-count { min-width: 25px; font-size: 13px; font-weight: 500; } .search-curated-card__seller-wrap { gap: 4px; background: transparent; min-height: 36px; padding: 0; color: var(--color-ink-soft); } .search-curated-card__seller-status, .search-curated-card__seller-status svg, .search-curated-card__seller-status img { width: 13px; height: 18px; display: block; flex: 0 0 auto; object-fit: contain; } .search-curated-card__seller-status { display: none; } .search-curated-card__seller { display: inline-flex; align-items: center; gap: 0; min-height: 25px; max-width: 206px; color: var(--color-ink-soft); text-decoration: none; } .search-curated-card__seller > svg { width: 25px; height: 25px; display: block; flex: 0 0 25px; } .search-curated-card__store-notch { width: 10px; height: 14px; display: block; flex: 0 0 10px; margin-left: -2px; margin-right: -4px; background: #eee5da; clip-path: polygon(0 7.14%, 33.7% 33.95%, 61.8% 36.05%, 100% 0, 86.6% 58.6%, 100% 100%, 62.45% 64%, 31.7% 56.7%, 0 92.86%, 20.45% 44.12%); } .search-curated-card__store-name { min-width: 0; max-width: 166px; height: 25px; padding: 4px 8px 5px; display: inline-flex; align-items: center; justify-content: flex-start; border-radius: 999px; background: #eee5da; overflow: hidden; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 13px; font-weight: 600; line-height: 1; text-overflow: ellipsis; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .search-curated-card__rating-pill { gap: 6px; min-height: 24px; padding: 0 8px; font-size: 13px; } .search-curated-card__rating-pill img, .search-curated-card__rating-pill svg { width: 17px; height: 16px; display: block; object-fit: contain; flex: 0 0 auto; } .search-curated-card__rating-pill .cat-card__review-icon--comment { width: 19px; height: 19px; } .search-curated-card__rating-pill img + span { font-weight: 400; } .search-curated-card__dot { width: 5px; height: 5px; border-radius: 999px; background: #232030; } .search-curated-card__title { position: absolute; left: 0; top: 56px; width: min(639px, 100%); margin: 0; color: #232030; font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.22; letter-spacing: 0; overflow: hidden; } .search-curated-card__title-link { color: inherit; text-decoration: none; display: -webkit-box; max-height: 44px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .search-curated-card__title-link:hover, .search-curated-card__title-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; } .search-curated-card__price-row { position: absolute; left: 0; top: 84px; gap: 8px; margin: 0; } .search-curated-card__price { color: #3F6A60; font-family: var(--font-price, var(--font-display)); font-size: 20px; font-weight: 700; line-height: 1; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 6px; } .search-curated-card__old-price { color: var(--color-ink-soft); font-family: var(--font-price, var(--font-display)); font-size: 14px; font-weight: 500; text-decoration: line-through; white-space: nowrap; } .search-curated-card__old-price::before { content: "USD "; } .search-curated-card__discount { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; } .search-curated-card__smart-badge { position: absolute; left: 0; top: 124px; width: min(450px, 100%); min-height: 36px; display: inline-flex; align-items: center; gap: 10px; color: #9a0027; font-family: var(--font-heading); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.13px; } .search-curated-card__smart-badge-icon { width: 36px; height: 36px; display: block; flex: 0 0 36px; } .search-curated-card__smart-badge-copy { min-width: 0; display: flex; flex-direction: column; } .search-curated-card__smart-badge-primary, .search-curated-card__smart-badge-secondary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-curated-card__actions { position: absolute; left: 0; top: 209px; display: inline-flex; align-items: center; gap: 8px; margin: 0; } .search-curated-card__board, .search-curated-card__save { height: 42px; display: inline-flex; align-items: center; justify-content: flex-start; border-radius: 999px; border: 0; position: relative; isolation: isolate; overflow: visible; background: transparent; text-decoration: none; font-family: var(--font-heading); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; } .search-curated-card__board::before, .search-curated-card__save::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; transform: scale(1); transform-origin: center; transition: transform 0.18s ease; } .search-curated-card__board:hover::before, .search-curated-card__board:focus-visible::before, .search-curated-card__save:hover::before, .search-curated-card__save:focus-visible::before { transform: scale(1.035); } .search-curated-card__board:focus-visible, .search-curated-card__save:focus-visible { outline: 1px solid rgba(35, 32, 48, 0.7); outline-offset: 0; } .search-curated-card__board { justify-content: center; gap: 9px; width: 150px; padding: 0 16px; color: var(--color-ink); font-size: 13px; } .search-curated-card__board::before { background: rgba(238, 229, 218, 0.72); } .search-curated-card__board-label { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; } .search-curated-card__board img, .search-curated-card__board svg { width: 12px; height: 12px; display: block; object-fit: contain; flex: 0 0 auto; } .search-curated-card__save { gap: 8px; width: 104px; justify-content: center; padding: 0 18px; color: var(--color-cream); font-size: 13px; } .search-curated-card__save::before { background: #3f6a60; } .search-curated-card__save-label { font-size: 13px; font-weight: 600; } .search-curated-card__save img { width: 17px; height: 18px; display: block; object-fit: contain; } .search-page__breadcrumbs .crumbs { width: 100%; justify-content: flex-start; } .search-page__breadcrumbs .crumbs__track { max-width: 100%; } .search-page__personalized-hero { margin-top: 8px; } .search-page__group-hero-inner { align-items: stretch; gap: 14px; } .search-page__personalized-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 10px; text-align: center; } .search-page__group-hero-frame { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .search-page__group-title-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; } .search-page__group-eyebrow { margin: 0; color: var(--color-forest); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; } .search-page__personalized-title { margin: 0; color: #232030; font-family: var(--font-heading); font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: 0; } .search-page__personalized-copy { max-width: 720px; margin: 0; color: rgba(35, 32, 48, 0.72); font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.45; } .search-page__group-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 0; color: var(--color-ink); font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: color 0.18s ease, transform 0.18s ease; } .search-page__group-back:hover, .search-page__group-back:focus-visible { color: color-mix(in srgb, var(--color-ink) 88%, var(--color-forest)); transform: translateY(-1px); outline: 0; } .search-page__group-title-spacer { display: none; } .search-page__group-back::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; -webkit-mask: url("/assets/header-icons/pager-arrow-prev-active.svg") center / contain no-repeat; mask: url("/assets/header-icons/pager-arrow-prev-active.svg") center / contain no-repeat; } .search-page__group-context { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .search-page__group-context-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--color-sand) 72%, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 1.2; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 8%, transparent); } .page--search.is-gift-room-group-mode .search-page__group-hero-frame { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .page--search.is-gift-room-group-mode .search-page__personalized-hero { margin-top: 0; } .page--search.is-gift-room-group-mode .search-page__personalized-hero-inner { gap: 6px; padding: 0 0 4px; } .page--search.is-gift-room-group-mode .search-page__breadcrumbs { margin-top: -6px; order: -1; } .page--search.is-gift-room-group-mode .search-page__breadcrumbs .crumbs { justify-content: flex-start; gap: 8px; } .page--search.is-gift-room-group-mode .search-page__group-back { display: none !important; } .page--search.is-gift-room-group-mode .search-page__group-title { max-width: 760px; font-size: 32px; line-height: 1.2; } .page--search.is-gift-room-group-mode .search-page__group-eyebrow, .page--search.is-gift-room-group-mode .search-page__group-context { display: none !important; } .page--search.is-gift-room-group-mode .search-page__personalized-copy { max-width: 760px; margin: 6px auto 0; font-family: var(--font-heading); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--color-ink-soft); } .page--search.is-gift-room-group-mode .cat-filters-meta { display: none !important; } .page--search.is-gift-room-group-mode .search-page__group-bar { margin-top: 0; } .page--search.is-gift-room-group-mode .search-page__group-context { justify-content: center; } .page--search.is-gift-room-group-mode .search-page__breadcrumbs:not([hidden]) + .search-page__personalized-hero { margin-top: 2px; } @media (min-width: 961px) { .search-page__group-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; } .search-page__group-back { grid-column: 1; justify-self: start; align-self: center; } .search-page__group-title { grid-column: 2; max-width: min(720px, 100%); } .search-page__group-title-spacer { display: block; grid-column: 3; min-width: 0; } .page--search.is-gift-room-group-mode .search-page__group-title-row { display: block; } .page--search.is-gift-room-group-mode .search-page__group-title { max-width: 760px; margin-inline: auto; } .page--search.is-gift-room-group-mode .search-page__group-title-spacer { display: none; } } .page--search.is-group-mode .cat-filters { display: none; } .page--search.is-group-mode .search-page__content { grid-template-columns: minmax(0, 1fr); column-gap: 0; } .page--search.is-group-mode .search-page__filters-column { display: none; } .page--search.is-group-mode .pager { display: none !important; } .page--search.is-group-mode .search-empty-state { display: none !important; } .search-page__group-bar { position: relative; margin-top: 4px; z-index: 3; } .page--search.is-group-mode .search-page__group-bar + .search-assistant-bar { margin-top: -6px; } .search-page__group-spotlight { width: min(856px, 100%); margin: 14px auto 4px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .search-page__group-spotlight-card { min-width: 0; color: #232030; text-decoration: none; display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .search-page__group-spotlight-media { aspect-ratio: 1.28 / 1; position: relative; overflow: hidden; border-radius: 8px; background: radial-gradient(circle at 28% 24%, rgba(255, 249, 241, 0.74), transparent 30%), linear-gradient(135deg, var(--group-spotlight-tone, #e8dfd6), var(--group-spotlight-accent, #dce6ed)); box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.08); transition: box-shadow 0.18s ease, transform 0.18s ease; display: grid; place-items: center; } .search-page__group-spotlight-media.has-image { display: block; background: linear-gradient(180deg, rgba(248, 241, 235, 0.04), rgba(248, 241, 235, 0.18)), linear-gradient(135deg, var(--group-spotlight-tone, #e8dfd6), var(--group-spotlight-accent, #dce6ed)); } .search-page__group-spotlight-photo { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .search-page__group-spotlight-shape { width: 54%; aspect-ratio: 1; border-radius: 32% 68% 48% 52%; background: rgba(255, 249, 241, 0.72); box-shadow: 10px 14px 28px rgba(35, 32, 48, 0.09); } .search-page__group-spotlight-media.has-image .search-page__group-spotlight-shape { display: none; } .search-page__group-spotlight-card:hover .search-page__group-spotlight-media, .search-page__group-spotlight-card:focus-visible .search-page__group-spotlight-media { box-shadow: 0 0 4px rgba(35, 32, 48, 0.45); transform: translateY(-1px); } .search-page__group-spotlight-label { min-width: 0; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 1.18; text-align: center; } .search-page__group-bar-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .search-page__group-filters, .search-page__group-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .search-page__group-filter-button, .search-page__group-sort-trigger, .search-page__group-empty-reset { --search-group-button-bg: var(--sort-control-bg); --search-group-button-text: var(--color-ink); --search-group-button-shadow: none; min-width: 0; height: 42px; min-height: 42px; padding: 6px 16px; box-sizing: border-box; border: 0; border-radius: 999px; background: transparent; color: var(--search-group-button-text); font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; position: relative; overflow: visible; isolation: isolate; transition: color 0.18s ease; } .search-page__group-sort-trigger { --search-group-button-bg: var(--sort-control-bg); min-width: 0; } .search-page__group-filter-button { --search-group-button-bg: var(--filter-pill-bg); } .search-page__group-filter-button[data-search-group-filter-trigger="price"] { min-width: 100px; } .search-page__group-filter-button::before, .search-page__group-sort-trigger::before, .search-page__group-empty-reset::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--search-group-button-bg); box-shadow: var(--search-group-button-shadow); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; z-index: 0; will-change: transform; } .search-page__group-filter-button:hover, .search-page__group-filter-button:focus-visible, .search-page__group-sort-trigger:hover, .search-page__group-sort-trigger:focus-visible, .search-page__group-empty-reset:hover, .search-page__group-empty-reset:focus-visible { box-shadow: none; } .search-page__group-filter-button:hover::before, .search-page__group-filter-button:focus-visible::before, .search-page__group-sort-trigger:hover::before, .search-page__group-sort-trigger:focus-visible::before, .search-page__group-empty-reset:hover::before, .search-page__group-empty-reset:focus-visible::before { transform: scale(1.035); } .search-page__group-filter-button.is-active { --search-group-button-bg: var(--color-ink); --search-group-button-text: var(--color-cream); } .search-page__group-filter-chip { --search-group-button-bg: var(--filter-pill-bg); --search-group-button-text: var(--color-ink); height: 42px; min-height: 42px; border-radius: 999px; display: inline-flex; align-items: center; flex: 0 0 auto; position: relative; isolation: isolate; overflow: visible; } .search-page__group-filter-chip.is-active { --search-group-button-bg: var(--color-ink); --search-group-button-text: var(--color-cream); } .search-page__group-filter-chip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--search-group-button-bg); transform: scale(1); transform-origin: center; transition: transform 0.18s ease; z-index: 0; will-change: transform; } .search-page__group-filter-chip:hover::before, .search-page__group-filter-chip:focus-within::before { transform: scale(1.035); } .search-page__group-filter-chip .search-page__group-filter-button { height: 42px; min-height: 42px; padding-right: 8px; background: transparent; color: var(--search-group-button-text); } .search-page__group-filter-chip .search-page__group-filter-button::before { content: none; } .search-page__group-filter-remove { width: 34px; min-width: 34px; height: 34px; min-height: 34px; margin: 4px 4px 4px 0; padding: 0; border: 0; border-radius: 999px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 1; transition: background-color 0.18s ease; } .search-page__group-filter-remove:hover, .search-page__group-filter-remove:focus-visible { background: rgba(248, 241, 235, 0.12); } .search-page__group-filter-remove-icon { width: 13px; height: 13px; display: block; flex: 0 0 13px; pointer-events: none; } .search-page__group-filter-button > span, .search-page__group-sort-trigger > span, .search-page__group-empty-reset > span, .search-page__group-filter-button > img, .search-page__group-sort-trigger > img, .search-page__group-empty-reset > img { position: relative; z-index: 1; } .search-page__group-trigger-chevron { width: 14px; height: 14px; display: block; transition: transform 1.12s cubic-bezier(0.18, 1, 0.2, 1), filter 0.18s ease; transform-origin: center; will-change: transform; } .search-page__group-filter-button.is-active .search-page__group-trigger-chevron { filter: brightness(0) saturate(100%) invert(96%) sepia(17%) saturate(434%) hue-rotate(302deg) brightness(104%) contrast(94%); } .search-page__group-sort-trigger[aria-expanded="true"] .search-page__group-trigger-chevron, .search-page__group-filter-button[aria-expanded="true"] .search-page__group-trigger-chevron { transform: rotate(180deg); } .search-page__group-popover { position: fixed; width: auto; min-width: 230px; max-width: min(320px, calc(100vw - 32px)); padding: 5px; border-radius: 24px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); border: 1px solid var(--popup-border); z-index: 5400; box-sizing: border-box; } .search-page__group-popover-title { margin: 0; padding: 10px 10px 6px; color: #232030; font-family: var(--font-heading); font-size: 14px; font-weight: 700; line-height: 1.2; } .search-page__group-popover-option { width: 100%; min-height: 42px; padding: 0 15px; border: 0; border-radius: 18px; background: transparent; color: #232030; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; font-family: var(--font-heading); font-size: 13px; font-weight: 500; line-height: 1; text-align: left; cursor: pointer; transition: background-color 0.18s ease; } .search-page__group-popover-option:hover, .search-page__group-popover-option:focus-visible, .search-page__group-popover-option:active { background: var(--sort-option-hover); } .search-page__group-popover-option.is-selected { background: var(--sort-option-selected-bg); color: #232030; } .search-page__group-popover-option.is-selected:hover, .search-page__group-popover-option.is-selected:focus-visible, .search-page__group-popover-option.is-selected:active { background: var(--sort-option-hover); } .search-page__group-popover-check { order: -1; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--popup-border-strong); background: var(--popup-bg); opacity: 1; flex: 0 0 20px; position: relative; } .search-page__group-popover-option.is-selected .search-page__group-popover-check { border-color: #3f6a60; background: #3f6a60; } .search-page__group-popover-check::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: transparent; opacity: 0; } .search-page__group-popover-option.is-selected .search-page__group-popover-check::after { background: var(--popup-bg); opacity: 1; } .search-page__group-grid { margin-top: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 17px; } .search-page__group-grid .cat-card { width: 100%; min-width: 0; --cat-card-scale: var(--search-group-card-scale, 1); scroll-snap-align: unset; } .page--search.is-group-mode .search-page__group-grid .cat-card--media-square { --cat-card-height: 482px; aspect-ratio: 325 / 482; } .page--search.is-group-mode .search-page__group-grid .cat-card--no-service .cat-card__store-row { top: calc((372 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } .search-page__group-loader { margin-top: 18px; } .search-page__group-loader-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 17px; } .search-page__group-loader-card { display: flex; flex-direction: column; gap: 10px; min-height: 382px; padding: 0 0 12px; } .search-page__group-loader-media { width: 100%; aspect-ratio: 325 / 325; border-radius: 20px; } .search-page__group-loader-line--title { width: 82%; } .search-page__group-loader-line--price { width: 48%; } .search-page__group-empty { width: min(720px, 100%); margin: 14px auto 0; padding: 44px 28px; border-radius: 30px; background: #eee5da; text-align: center; } .search-page__group-empty-title, .search-page__group-empty-copy { margin: 0; color: #232030; font-family: var(--font-body); } .search-page__group-empty-title { font-size: 24px; font-weight: 600; line-height: 1.1; } .search-page__group-empty-copy { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.45; } .search-page__group-empty-reset { margin-top: 22px; background: #232030; color: #f8f1eb; } .search-page__content { display: grid; grid-template-columns: var(--search-filters-width) minmax(0, 1fr); align-items: flex-start; column-gap: var(--search-filters-gap); row-gap: 0; min-width: 0; transition: grid-template-columns var(--search-filters-transition-duration) var(--search-filters-transition-ease), column-gap var(--search-filters-transition-duration) var(--search-filters-transition-ease); } .search-page__shell.is-filters-open .search-page__content { --search-filters-width: var(--search-filters-open-width); --search-filters-gap: 15px; align-items: stretch; } .search-page__filters-column { position: relative; min-width: 0; box-sizing: border-box; padding: 0; margin-top: 0; overflow: hidden; pointer-events: none; transition: none; } .search-page__filters-column.is-open { align-self: stretch; padding: 0; overflow: visible; pointer-events: auto; } .search-page__main-column { flex: 1 1 auto; width: 100%; min-width: 0; display: flex; flex-direction: column; } .search-jedipicks { margin: 0 0 28px; } .search-jedipicks__header { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 14px; margin-bottom: 15px; } .search-jedipicks__title { margin: 0; color: #232030; font-family: var(--font-heading); font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.04em; } .search-jedipicks__view-all { flex: 0 0 auto; } .search-jedipicks__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 17px; } .search-jedipicks .personalized-card { --personalized-card-height: 280px; --personalized-card-media-height: 171px; width: auto; min-width: 0; height: var(--personalized-card-height); display: block; color: #232030; text-decoration: none; overflow: visible; background: #f8f1eb; border-radius: 20px; position: relative; } .search-jedipicks .personalized-card:hover, .search-jedipicks .personalized-card:focus-visible { box-shadow: none; } .search-jedipicks .personalized-card:focus-visible { outline: none; } .search-jedipicks__card-media { background-position: center; background-repeat: no-repeat; background-size: cover; } .search-jedipicks .personalized-card__body { top: calc(var(--personalized-card-media-height) + 6px); bottom: 10px; gap: 3px; overflow: hidden; } .search-jedipicks .personalized-card__media { height: var(--personalized-card-media-height); overflow: visible; border-radius: 20px; transition: box-shadow 0.24s ease; } .search-jedipicks .personalized-card__media-surface { border-radius: 20px; } .search-jedipicks .personalized-card:hover .personalized-card__media, .search-jedipicks .personalized-card:focus-visible .personalized-card__media { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .search-jedipicks .personalized-card__title.search-jedipicks__card-title { width: 100%; max-width: 100%; min-width: 0; display: block; min-height: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; font-size: 14px; line-height: 1.22; } .search-jedipicks__card-rating { display: inline-flex; align-items: center; gap: 3px; margin: 2px 0 0; font-family: var(--font-heading); color: #232030; font-size: 14px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } .search-jedipicks__card-rating-star { width: 12px; height: 12px; display: block; flex: 0 0 12px; } .search-jedipicks__card-rating-count { color: #232030; } .search-jedipicks__card-price { width: 100%; margin-top: 1px; font-family: var(--font-heading); } .search-jedipicks .personalized-card__price-new { font-size: 18px; } .search-jedipicks .personalized-card__currency { font-size: 18px; } .search-jedipicks .personalized-card__price-old { font-size: 14px; } .search-jedipicks .personalized-card--discounted .personalized-card__currency, .search-jedipicks .personalized-card--discounted .personalized-card__price-new { color: #3F6A60; } .search-jedipicks .personalized-card__store-row { display: inline-flex; align-items: center; gap: 0; max-width: 100%; margin-top: 2px; color: var(--color-ink-soft); text-decoration: none; } .search-jedipicks .personalized-card__store-row > svg, .search-jedipicks .personalized-card__store-row > img.cat-card__store-icon { width: 22px; height: 22px; display: block; flex: 0 0 22px; object-fit: contain; } .search-jedipicks .personalized-card__store-notch { width: 8px; height: 12px; display: block; flex: 0 0 8px; margin-left: -2px; margin-right: -3px; background: #eee5da; clip-path: polygon(0 7.14%, 33.7% 33.95%, 61.8% 36.05%, 100% 0, 86.6% 58.6%, 100% 100%, 62.45% 64%, 31.7% 56.7%, 0 92.86%, 20.45% 44.12%); } .search-jedipicks .personalized-card__store { min-width: 0; max-width: calc(100% - 27px); height: 22px; padding: 4px 8px 5px; display: inline-flex; align-items: center; justify-content: flex-start; background: #eee5da; border-radius: 999px; color: var(--color-ink-soft); font-size: 12px; font-weight: 600; line-height: 1; text-decoration: underline; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .search-jedipicks .personalized-card[data-product-partner-color]:not([data-product-partner-color=""]) .personalized-card__store-notch, .search-jedipicks .personalized-card[data-product-partner-color]:not([data-product-partner-color=""]) .personalized-card__store { background: var(--personalized-card-partner-color); } .search-jedipicks .personalized-card[data-product-partner-color]:not([data-product-partner-color=""]) .personalized-card__store { color: var(--color-cream); text-decoration: none; } .search-jedipicks .personalized-card[data-product-partner-color]:not([data-product-partner-color=""]) .cat-card__store-icon { background: var(--personalized-card-partner-color); border-radius: 999px; } .search-jedipicks .personalized-card__hover-actions { top: 8px; left: 8px; right: 8px; width: auto; max-width: none; height: 30px; gap: 5px; } .search-jedipicks .personalized-card__hover-board { height: 30px; min-width: 0; max-width: none; flex: 1 1 0; padding: 5px 10px; gap: 6px; } .search-jedipicks .personalized-card__hover-board-label { font-size: 10px; line-height: 1.15; } .search-jedipicks .personalized-card__hover-board img { width: 10px; height: 10px; flex-basis: 10px; } .search-jedipicks .personalized-card__hover-save { height: 30px; min-width: 59px; padding: 5px 10px; } .search-jedipicks .personalized-card__hover-save-label { font-size: 11px; line-height: 1.15; } .search-jedipicks .personalized-card__hover-save img { width: 14px; height: 14px; } .search-jedipicks .personalized-card.is-product-saved .personalized-card__hover-actions, .search-jedipicks .personalized-card.is-in-collection .personalized-card__hover-actions { justify-content: flex-end; } .search-jedipicks .personalized-card.is-product-saved .personalized-card__hover-board, .search-jedipicks .personalized-card.is-in-collection .personalized-card__hover-board { flex: 0 1 auto; width: auto; min-width: 0; max-width: calc(100% - 68px); height: 30px; min-height: 0; padding: 0 3px 0 0; justify-content: flex-end; align-items: center; text-align: right; } .search-jedipicks .personalized-card.is-product-saved .personalized-card__hover-board-label, .search-jedipicks .personalized-card.is-in-collection .personalized-card__hover-board-label { font-size: 10px; line-height: 1.25; font-weight: 720; } .search-page__results { display: flex; flex-direction: column; width: 100%; } .search-page .cat-filters-meta { margin-top: -1px; margin-bottom: 5px; min-height: 20px; } .search-page__shell.is-personalized-mode .cat-filters-meta { margin-top: 0; } .search-page .cat-filters { margin-top: 0; position: static; top: auto; z-index: auto; background: transparent; } .search-assistant-bar { width: 100%; min-height: 64px; margin: -12px 0 0; padding: 10px 16px; border: 1px solid rgba(35, 32, 48, 0.12); border-radius: 18px; background: rgba(255, 249, 241, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.44) inset; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; box-sizing: border-box; transition: margin-left var(--search-filters-transition-duration) var(--search-filters-transition-ease), width var(--search-filters-transition-duration) var(--search-filters-transition-ease); } .search-assistant-bar[hidden] { display: none !important; } .search-assistant-bar__copy { min-width: 0; min-height: 28px; display: flex; align-items: center; color: #232030; font-family: var(--font-display); font-size: 22px; font-weight: 650; line-height: 1.18; letter-spacing: 0; } .search-assistant-bar__typed { min-width: 0; overflow-wrap: anywhere; } .search-assistant-bar__cursor { display: none; } .search-assistant-bar__button { position: relative; isolation: isolate; min-height: 42px; min-width: 142px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream) !important; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; cursor: pointer; transform-origin: center; box-shadow: none; transform: none; transition: color 0.18s ease; } .search-assistant-bar__button::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: background-color 0.18s ease, transform 0.18s ease; pointer-events: none; } .search-assistant-bar__button span { position: relative; z-index: 1; } .search-assistant-bar__button:hover, .search-assistant-bar__button:focus-visible { background: transparent; outline: none; box-shadow: none; transform: none; } .search-assistant-bar__button:hover::before, .search-assistant-bar__button:focus-visible::before { background: var(--color-forest); transform: scale(1.035); } .search-assistant-bar__button:active { transform: none; } .search-assistant-bar__button:active::before { transform: scale(1.015); } .search-page .cat-filters__applied-rail { min-height: 42px; height: 42px; align-self: flex-start; overflow: visible; } .search-page .cat-filters__applied-viewport { min-height: 42px; height: 42px; overflow: hidden; } .search-page .cat-filters__applied { min-height: 42px; height: 42px; gap: 7px; padding: 0 2px; align-items: center; overflow-y: hidden; } .search-page .cat-filters__applied-nav { top: 4.5px; z-index: 4; } .search-page .cat-filters__applied-fade { height: 42px; } .search-page .search-query-refinement { height: 42px; min-height: 42px; border-radius: 999px; flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; gap: 0; overflow: visible; box-sizing: border-box; isolation: isolate; } .search-page .search-query-refinement:hover, .search-page .search-query-refinement:focus-within { z-index: 2; } .search-page .search-query-refinement::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--search-query-refinement-bg, transparent); transform-origin: center; transform: scale(1); transition: transform 0.18s ease; z-index: 0; will-change: transform; } .search-page .search-query-refinement:hover::before, .search-page .search-query-refinement:focus-within::before { transform: scale(1.038); } .search-page .search-query-refinement--active { --search-query-refinement-bg: #232030; } .search-page .search-query-refinement--suggested { --search-query-refinement-bg: #eee5da; } .search-page .search-query-refinement__main, .search-page .search-query-refinement__remove, .search-page .search-query-refinement__suggest { border: 0; background: transparent; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); line-height: 1; } .search-page .search-query-refinement__remove, .search-page .search-query-refinement__suggest { cursor: pointer; } .search-page .search-query-refinement__main, .search-page .search-query-refinement__suggest { min-height: 42px; } .search-page .search-query-refinement__main { padding: 0 8px 0 14px; color: #f8f1eb !important; font-size: 14px; font-weight: 600; cursor: default; } .search-page__group-filter-button--event { gap: 9px; } .search-page__group-filter-button-icon { width: 14px; height: 14px; display: block; flex: 0 0 14px; object-fit: contain; filter: brightness(0); } .search-page__group-filter-button.is-active .search-page__group-filter-button-icon { filter: brightness(0) saturate(100%) invert(96%) sepia(17%) saturate(434%) hue-rotate(302deg) brightness(104%) contrast(94%); } .search-page__group-interstitial { grid-column: 1 / -1; margin: 24px 0 16px; } .search-page__group-interstitial .search-pivots { margin: 0; } .search-page .search-query-refinement__remove { width: 34px; min-width: 34px; flex: 0 0 34px; min-height: 34px; height: 34px; margin: 4px 4px 4px 0; padding: 0; border-radius: 999px; color: #f8f1eb; font-size: 0; transition: background-color 0.18s ease; } .search-page .search-query-refinement__remove:hover, .search-page .search-query-refinement__remove:focus-visible { background: rgba(248, 241, 235, 0.12); } .search-page .search-query-refinement__remove::before { content: none; } .search-page .search-query-refinement__remove-icon { width: 13px; height: 13px; display: block; flex: 0 0 13px; pointer-events: none; } .search-page .search-query-refinement__suggest { padding: 0 14px; color: #232030 !important; font-size: 14px; font-weight: 600; } .search-page .search-query-refinement__suggest:hover, .search-page .search-query-refinement__suggest:focus-visible { background: transparent; } .search-page .search-query-refinement__label { white-space: nowrap; } .search-page .cat-filters__applied .cat-filters__chip { height: 42px; min-height: 42px; background: #232030 !important; border-radius: 999px; } .search-page .cat-filters__applied .cat-filters__chip-main { min-height: 42px; padding: 0 8px 0 14px; color: #f8f1eb !important; cursor: default; } .search-page .cat-filters__applied .cat-filters__chip-icon, .search-page .cat-filters__applied .cat-filters__chip-chevron, .search-page .cat-filters__applied .cat-filters__chip-divider { display: none !important; } .search-page .cat-filters__applied .cat-filters__chip-remove { width: 34px; height: 34px; min-height: 34px; flex: 0 0 34px; margin: 4px 4px 4px 0; background: transparent; border-radius: 999px; } .search-page .cat-filters__applied .cat-filters__chip-remove:hover, .search-page .cat-filters__applied .cat-filters__chip-remove:focus-visible { background: rgba(248, 241, 235, 0.12); } .search-page .cat-filters__applied .cat-filters__chip-remove-icon { width: 12px; height: 12px; filter: brightness(0) saturate(100%) invert(96%) sepia(17%) saturate(434%) hue-rotate(302deg) brightness(104%) contrast(94%); } .search-page .cat-filters__left { transition: margin-left var(--search-filters-transition-duration) var(--search-filters-transition-ease); } .search-page__results .cards-grid { width: 100%; margin-top: 0; } .search-page__results .search-empty-state { grid-column: 1 / -1; min-width: 0; margin-top: 6px; } @media (max-width: 1100px) { .search-jedipicks__grid { --search-jedipicks-rail-gap: 16px; display: flex; grid-template-columns: none; gap: var(--search-jedipicks-rail-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .search-jedipicks__grid::-webkit-scrollbar { display: none; } .search-jedipicks__grid > * { flex: 0 0 clamp(210px, 30vw, 248px); scroll-snap-align: start; } } @media (max-width: 720px) { .search-jedipicks { margin-bottom: 22px; } .search-jedipicks__header { gap: 12px; margin-bottom: 12px; align-items: center; } .search-jedipicks__title { font-size: 18px; } .search-jedipicks__grid { --search-jedipicks-rail-gap: 14px; width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); margin-right: 0; } .search-jedipicks__grid::-webkit-scrollbar { display: none; } .search-jedipicks__grid > * { flex-basis: calc((100% - var(--search-jedipicks-rail-gap)) / 2.2); } .search-jedipicks__card { --personalized-card-width: calc((100vw - 20px - var(--search-jedipicks-rail-gap)) / 2.2); --personalized-card-height: calc(var(--personalized-card-width) + 120px); --personalized-card-media-height: var(--personalized-card-width); } .search-jedipicks .personalized-card__store-row { min-height: 44px; } .search-curated-card__frame { grid-template-columns: 1fr; height: auto; row-gap: 14px; } .search-curated-card__media-main { width: 100%; height: auto; aspect-ratio: 1 / 1; } .search-curated-card__thumbs { display: none; } } @media (max-width: 520px) { .search-jedipicks__grid { grid-template-columns: none; } } .search-empty-state__panel { position: relative; overflow: visible; border-radius: 0; padding: clamp(16px, 2.6vw, 34px) 0 0; min-height: 0; background: transparent; box-shadow: none; isolation: isolate; } .search-empty-state__panel::before, .search-empty-state__panel::after { content: none; } .search-empty-state__lead, .search-empty-state__content { position: relative; z-index: 1; } .search-empty-state__title, .search-empty-state__subtitle, .search-empty-state__collection-title, .search-empty-state__collection-text, .search-empty-state__cta { margin: 0; font-family: var(--font-heading); } .search-empty-state__title { max-width: 58ch; color: var(--color-ink); font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: 0; } .search-empty-state__subtitle { margin-top: 14px; color: var(--color-ink); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: 0; } .search-empty-state__content { margin-top: clamp(18px, 2.4vw, 30px); display: grid; grid-template-columns: minmax(320px, 0.86fr) minmax(360px, 0.74fr); align-items: center; gap: clamp(26px, 5vw, 84px); } .search-empty-state__copy-stack { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 3.4vw, 46px); } .search-empty-state__collection { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .search-empty-state__collection-copy { display: flex; flex-direction: column; gap: 10px; } .search-empty-state__collection-title { color: var(--color-ink); font-family: var(--font-body); font-size: 24px; font-weight: 800; line-height: 1.05; } .search-empty-state__collection-text { max-width: 235px; color: var(--color-ink-soft); font-size: 18px; font-weight: 400; line-height: 1.35; } .search-empty-state__cta { min-height: 62px; padding: 6px 27px; border: 0; border-radius: 999px; background: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--color-cream); text-decoration: none; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; position: relative; overflow: visible; isolation: isolate; } .search-empty-state__cta::before { content: none; } .search-empty-state__cta-label, .search-empty-state__cta-icon { position: relative; z-index: 1; } .search-empty-state__cta-label { color: var(--color-cream); } .search-empty-state__cta-icon { width: 22px; height: 14px; display: block; filter: brightness(0) invert(1); transform: translateX(0) scale(1); transform-origin: center; transition: transform 0.18s ease; } .search-empty-state__cta:hover .search-empty-state__cta-icon, .search-empty-state__cta:focus-visible .search-empty-state__cta-icon { transform: translateX(4px) scale(1.04); } .search-empty-state__art { min-width: 0; display: flex; justify-content: center; align-self: center; margin-top: 0; } .search-empty-state__art img { display: block; width: min(100%, 430px); height: auto; } .search-empty-state__suggestions { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); justify-content: stretch; gap: 12px; min-width: 0; margin-top: clamp(22px, 2.6vw, 36px); } .search-empty-interest-card { position: relative; width: 100%; max-width: 167px; min-height: 226px; padding: 10px 5px 0; border: 0; border-radius: 30px; background: var(--search-empty-interest-card-bg, var(--filter-pill-bg)); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: center; text-decoration: none; overflow: hidden; box-sizing: border-box; isolation: isolate; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease; } .search-empty-interest-card:hover, .search-empty-interest-card:focus-visible { transform: translateY(-3px); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .search-empty-interest-card__title { position: relative; z-index: 2; width: 157px; max-width: 100%; min-height: 58px; margin-top: 12px; display: flex; align-items: center; justify-content: center; color: var(--search-empty-interest-card-title-color, var(--color-ink)); font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } .search-empty-interest-card__media { position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 1; height: 148px; border-radius: 28px; overflow: hidden; background: var(--popup-bg); } .search-empty-interest-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); opacity: 1; } .search-empty-interest-card--sky { --search-empty-interest-card-bg: color-mix(in srgb, var(--color-forest) 28%, var(--popup-bg)); --search-empty-interest-card-title-color: var(--color-ink); } .search-empty-interest-card--iris { --search-empty-interest-card-bg: color-mix(in srgb, var(--color-ink) 52%, var(--color-forest)); --search-empty-interest-card-title-color: var(--color-cream); } .search-empty-interest-card--amber { --search-empty-interest-card-bg: var(--sort-control-bg); --search-empty-interest-card-title-color: var(--color-ink); } .search-empty-interest-card--sun { --search-empty-interest-card-bg: color-mix(in srgb, var(--color-sand-dark) 70%, var(--color-cream)); --search-empty-interest-card-title-color: var(--color-ink); } .search-empty-interest-card--sage { --search-empty-interest-card-bg: color-mix(in srgb, var(--color-forest) 16%, var(--color-sand)); --search-empty-interest-card-title-color: var(--color-ink); } .search-empty-interest-card--rose { --search-empty-interest-card-bg: color-mix(in srgb, var(--sort-control-bg) 52%, var(--popup-bg-soft)); --search-empty-interest-card-title-color: var(--color-ink); } .search-empty-interest-card--linen { --search-empty-interest-card-bg: var(--color-line); --search-empty-interest-card-title-color: var(--color-ink); } .search-empty-interest-card--clay { --search-empty-interest-card-bg: color-mix(in srgb, var(--color-forest) 18%, var(--sort-control-bg)); --search-empty-interest-card-title-color: var(--color-ink); } .search-page__shell.is-filters-open .search-page__results .cards-grid { gap: 15px; } .search-page .pager { margin-top: 30px; } .search-page__shell.is-empty-results .pager { display: none !important; } .search-page__shell.is-empty-results .cat-filters__applied-nav, .search-page__shell.is-empty-results .cat-filters__applied-fade { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .search-page-skeleton { background: #f8f1eb; padding: 24px 0 96px; } .search-page-skeleton__section + .search-page-skeleton__section { margin-top: 30px; } .search-page-skeleton__title { display: flex; justify-content: flex-start; } .search-page-skeleton__title-bar { width: min(420px, 60vw); } .search-page-skeleton__meta { display: flex; justify-content: flex-end; } .search-page-skeleton__meta-text { width: 200px; } .search-page-skeleton__filters { display: flex; flex-direction: column; gap: 10px; } .search-page-skeleton__filter-bar { display: flex; align-items: center; gap: 10px; } .search-page-skeleton__filter-main { width: 120px; flex: 0 0 auto; } .search-page-skeleton__filter-chip { width: 168px; flex: 0 0 auto; } .search-page-skeleton__filter-spacer { flex: 1 1 auto; } .search-page-skeleton__filter-sort { width: 152px; flex: 0 0 auto; } .search-page-skeleton__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 17px; } .search-page-skeleton__card { display: flex; flex-direction: column; gap: 14px; } .search-page-skeleton__card-media { width: 100%; aspect-ratio: 0.82; border-radius: 22px; } .search-page-skeleton__card-title { width: 88%; } .search-page-skeleton__card-title--short { width: 62%; } .search-page-skeleton__card-row { display: flex; gap: 10px; } .search-page-skeleton__card-pill { flex: 0 0 32%; } @media (max-width: 1024px) { .search-page-skeleton__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .search-page-skeleton { padding-block: 16px 32px; } .search-page-skeleton__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .search-page-skeleton__title-bar { width: min(300px, 70vw); height: 22px; } .search-page-skeleton__filter-bar { flex-wrap: wrap; } .search-page-skeleton__filter-spacer { display: none; } } .page--search .search-page__filters-column .cat-filters-drawer { position: sticky; inset: auto; top: var(--search-filter-sidebar-current-top); width: var(--search-filters-panel-width); max-height: calc(100vh - var(--search-filter-sidebar-current-top) - 18px); z-index: 2; pointer-events: none; overflow: visible; transform: translateX(-100%); opacity: 0; transition: transform var(--search-filters-drawer-transition-duration) var(--search-filters-transition-ease), opacity calc(var(--search-filters-drawer-transition-duration) * 0.78) ease; will-change: transform; } .page--search .search-page__filters-column .cat-filters-drawer.is-open { pointer-events: auto; transform: none; opacity: 1; } .page--search .search-page__filters-column .cat-filters-drawer__backdrop, .page--search .search-page__filters-column .cat-filters-drawer__close, .page--search .search-page__filters-column .cat-filters-drawer__footer { display: none !important; } .page--search .search-page__filters-column .cat-filters-drawer__panel { position: relative; top: auto; left: auto; width: var(--search-filters-panel-width); max-width: none; min-height: calc(100vh - 180px); max-height: inherit; height: auto; transform: none; border-radius: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; overflow: visible; box-sizing: border-box; } .page--search .search-page__filters-column .cat-filters-drawer__header { padding: 0 0 18px; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 0; } .page--search .search-page__filters-column .cat-filters-drawer__title { font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .cat-filters-drawer__reset { width: 99px; min-width: 99px; height: 42px; padding: 7px 13px; border: 0; border-radius: 999px; background: #f29e9e; box-shadow: inset 0 0 0 1px #c55252; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .cat-filters-drawer__reset-label { color: var(--color-cream); font-family: var(--font-heading); font-size: 12px; font-weight: 700; line-height: 1; } .cat-filters-drawer__reset:hover, .cat-filters-drawer__reset:focus-visible { background: #e06f6f; box-shadow: inset 0 0 0 1px #b84a4a; } .page--search .search-page__filters-column .cat-filters-drawer__body { flex: 1 1 auto; min-height: 0; margin-inline: -8px; padding: 0 8px 8px; gap: 14px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; } .page--search .search-page__filters-column .cat-filters-drawer__body::-webkit-scrollbar { width: 0; height: 0; } .page--search .search-page__filters-column .cat-filters-drawer__main-view, .page--search .search-page__filters-column .cat-filters-drawer__category-browser-view { min-height: 0; } .page--search .search-page__filters-column .cat-filters-drawer__category { gap: 10px; } .page--search .search-page__filters-column .cat-filters-drawer__category-button { min-height: 48px; padding-left: 18px; padding-right: 18px; font-size: 14px; } .page--search .search-page__filters-column .cat-filters-drawer__sections { gap: 12px; } .page--search .search-page__filters-column .cat-filters-drawer__section { padding: 7px 7px 16px 8px; border-radius: 18px; max-width: 100%; box-sizing: border-box; overflow: visible; } .page--search .search-page__filters-column .cat-filters-drawer__section.is-collapsed { padding: 7px 7px 7px 8px; } .page--search .search-page__filters-column .cat-filters-drawer__section-head { min-height: 44px; padding-left: 8px; gap: 12px; } .page--search .search-page__filters-column .cat-filters-drawer__section-title { gap: 6px; font-size: 12px; } .page--search .search-page__filters-column .cat-filters-drawer__section-title-icon { width: 18px; height: 18px; flex-basis: 18px; } .page--search .search-page__filters-column .cat-filters-drawer__section-toggle { width: 56px; height: 44px; min-height: 44px; } .page--search .search-page__filters-column .cat-filters-drawer__option { min-width: 0; max-width: 100%; min-height: 46px; padding: 6px 10px 6px 12px; } .page--search .search-page__filters-column .cat-filters-drawer__option-label { font-size: 13px; } .page--search .search-page__filters-column .cat-filters-drawer__control { width: 20px; height: 20px; flex-basis: 20px; } .page--search .search-page__filters-column .cat-filters-drawer__control::after { inset: 4px; } .page--search .search-page__filters-column .cat-filters-drawer__custom-field-row { padding-left: 12px; padding-right: 12px; } .page--search .search-page__filters-column .cat-filters-drawer__field, .page--search .search-page__filters-column .cat-filters-drawer__price-field { max-width: none; width: 100%; } .page--search .search-page__filters-column .cat-filters-drawer__price-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; box-sizing: border-box; padding-left: 0; padding-right: 0; } .page--search .search-page__filters-column .cat-filters-drawer__price-input-card { min-width: 0; padding: 7px 14px 8px; } .page--search .search-page__filters-column .cat-filters-drawer__price-input-label { font-size: 10px; } .page--search .search-page__filters-column .cat-filters-drawer__price-input-row { font-size: 13px; } .page--search .search-page__filters-column .cat-filters-drawer__price-input-separator, .page--search .search-page__filters-column .cat-filters-drawer__price-apply { display: none; } .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__options, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__options, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__options, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__options, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 6px; padding: 8px 8px 12px; overflow: visible; } .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option { min-height: 76px; height: 76px; gap: 5px; padding: 3px 1px; } .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__swatch, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__swatch, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__swatch { height: 42px; min-height: 42px; max-height: 42px; flex-basis: 42px; } .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option { min-width: 0; min-height: 78px; padding: 6px 2px; } .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__swatch { width: 42px; height: 42px; flex-basis: 42px; } .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="color"] .cat-filters-drawer__option-label, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="gem-color"] .cat-filters-drawer__option-label, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="metal-type"] .cat-filters-drawer__option-label, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option-label, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option-label, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="birthstone"] .cat-filters-drawer__option-sublabel, .page--search .search-page__filters-column .cat-filters-drawer__section[data-filter-drawer-section="scent-family"] .cat-filters-drawer__option-sublabel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="age-rating"]) .cat-filters-drawer__options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 8px 10px; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="age-rating"]) .cat-filters-drawer__option { min-height: 58px; padding: 8px 6px; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="age-rating"]) .cat-filters-drawer__option-label { overflow-wrap: normal; word-break: normal; text-wrap: initial; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 8px 10px; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__option { height: auto; min-height: 58px; padding: 8px 6px; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="size"],[data-filter-drawer-section="ring-size"],[data-filter-drawer-section="gold-karat"],[data-filter-drawer-section="chain-length"],[data-filter-drawer-section="earring-back"],[data-filter-drawer-section="fit"],[data-filter-drawer-section="season"],[data-filter-drawer-section="assembly-required"],[data-filter-drawer-section="shoe-size"],[data-filter-drawer-section="heel-height"],[data-filter-drawer-section="toe-shape"],[data-filter-drawer-section="bag-size"],[data-filter-drawer-section="pet-size"],[data-filter-drawer-section="age-rating"],[data-filter-drawer-section="num-players"],[data-filter-drawer-section="skill-level"],[data-filter-drawer-section="bulk-size"],[data-filter-drawer-section="kids-age-stage"],[data-filter-drawer-section="kids-gender-style"],[data-filter-drawer-section="screen-free"],[data-filter-drawer-section="play-environment"],[data-filter-drawer-section="power-source"],[data-filter-drawer-section="device-compatibility"],[data-filter-drawer-section="device-connection"],[data-filter-drawer-section="orientation"],[data-filter-drawer-section="framed-status"],[data-filter-drawer-section="art-edition"],[data-filter-drawer-section="signed"],[data-filter-drawer-section="vegan-cruelty"],[data-filter-drawer-section="dpi"],[data-filter-drawer-section="bundle-size"],[data-filter-drawer-section="customizable"],[data-filter-drawer-section="license-type"],[data-filter-drawer-section="bag-closure"],[data-filter-drawer-section="strap-type"],[data-filter-drawer-section="shoe-closure"]) .cat-filters-drawer__option-label { overflow-wrap: normal; word-break: normal; text-wrap: initial; } .page--search .search-page__filters-column .cat-filters-drawer__section.cat-filters-drawer__section--text-options .cat-filters-drawer__options { display: flex; flex-direction: column; gap: 0; padding: 8px 0 0; } .page--search .search-page__filters-column .cat-filters-drawer__section.cat-filters-drawer__section--text-options .cat-filters-drawer__option { width: 100%; min-height: 46px; height: auto; padding: 6px 13px; border-radius: 10px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; overflow: visible; } .page--search .search-page__filters-column .cat-filters-drawer__section.cat-filters-drawer__section--text-options .cat-filters-drawer__option .cat-filters-drawer__control { display: block; } .page--search .search-page__filters-column .cat-filters-drawer__section.cat-filters-drawer__section--text-options .cat-filters-drawer__option-label { display: block; width: auto; min-width: 0; max-width: 100%; font-size: 13px; line-height: 1.2; text-align: left; white-space: normal; overflow-wrap: anywhere; word-break: normal; text-wrap: balance; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; padding: 8px 8px 10px; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option { height: auto; min-height: 92px; padding: 8px 4px; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option-icon { width: 48px; height: 48px; flex-basis: 48px; } .page--search .search-page__filters-column .cat-filters-drawer__section:is([data-filter-drawer-section="sleeve"],[data-filter-drawer-section="neckline"],[data-filter-drawer-section="garment-length"],[data-filter-drawer-section="gem-cut"],[data-filter-drawer-section="furniture-type"],[data-filter-drawer-section="lighting-type"],[data-filter-drawer-section="shoe-type"],[data-filter-drawer-section="bag-type"],[data-filter-drawer-section="pet-type"],[data-filter-drawer-section="device-type"],[data-filter-drawer-section="hair-type"],[data-filter-drawer-section="accessory-type"],[data-filter-drawer-section="wedding-piece"],[data-filter-drawer-section="party-type"],[data-filter-drawer-section="craft-category"],[data-filter-drawer-section="pet-product"],[data-filter-drawer-section="kids-category"]) .cat-filters-drawer__option-label { overflow-wrap: normal; word-break: normal; text-wrap: initial; } .page--search .search-page__filters-column .cat-filters-drawer__more { width: calc(100% - 10px); } .cat-filters-drawer__category-browser-head { display: flex; align-items: center; } .cat-filters-drawer__browser-back { min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px; background: #eee5da; display: inline-flex; align-items: center; gap: 8px; color: #232030; font-family: var(--font-heading); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; } .cat-filters-drawer__browser-back-icon { width: 18px; height: 12px; display: block; } @media (min-width: 981px) { .page--search .search-page__filters-column .cat-filters-drawer__header { visibility: visible; pointer-events: auto; padding: 0 0 12px; } .page--search .search-page__filters-column .cat-filters-drawer__title { font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } } @media (max-width: 1180px) { .search-page__group-grid, .search-page__group-loader-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .search-empty-state__content { grid-template-columns: 1fr; gap: 22px; } .search-empty-state__suggestions { grid-template-columns: repeat(auto-fit, minmax(146px, 167px)); } .search-empty-state__collection-text { max-width: 320px; } } @media (max-width: 767px) { .search-page__content { display: flex; flex-direction: column; gap: 0; } .search-page__shell.is-filters-open .search-page__content { gap: 18px; } .search-page__shell.is-filters-open .cat-filters__left { margin-left: 0; } .search-page__shell.is-filters-open .search-page__filters-column { margin-top: 0; } .search-page__filters-column { width: auto; max-width: none; transform: none; } .search-page__filters-column:not(.is-open) { display: none; } .search-page__filters-column.is-open { display: block; transform: none; } .page--search .search-page__filters-column .cat-filters-drawer { position: relative; top: auto; width: 100%; } .page--search .search-page__filters-column .cat-filters-drawer__panel { width: 100%; min-height: 0; } } @media (min-width: 768px) { .search-page .cat-filters::before { content: none; } .search-page .cat-filters__applied-rail { min-height: 48px; height: 48px; align-self: center; } .search-page .cat-filters__applied-viewport, .search-page .cat-filters__applied { min-height: 48px; height: 48px; } .search-page .cat-filters__applied { padding: 3px; } .search-page .cat-filters__applied-nav { top: 7.5px; } .search-page .cat-filters__applied-fade { height: 48px; } .search-page .cat-filters__bar, .search-page .cat-filters__left, .search-page .cat-filters__right { align-items: center; } .search-page__shell.is-filters-open .cat-filters__left { margin-left: calc(var(--search-filters-panel-width) + 15px); } .search-page__shell.is-filters-open .search-page__filters-column { margin-top: var(--search-filters-open-column-offset); } } @media (min-width: 981px) { .search-page__shell.is-filters-open .search-assistant-bar { width: calc(100% - var(--search-filters-panel-width) - 15px); margin-left: calc(var(--search-filters-panel-width) + 15px); } } @media (min-width: 768px) and (max-width: 980px) { .search-page__shell.is-filters-open .search-page__filters-column { margin-top: 0; } } @media (max-width: 767px) { .search-page { padding: 0 0 44px; } .page--search.has-mobile-quick-nav .search-page { padding-bottom: calc(112px + env(safe-area-inset-bottom)); } .page--search.has-mobile-quick-nav .search-page__results .cat-card__cart { display: none; } .page--search.has-mobile-quick-nav .search-page__results .cat-card[data-product-source="jedipic"] .cat-card__cart { display: inline-flex; } .search-page__shell { gap: 18px; } .search-page__personalized-hero-inner { align-items: flex-start; text-align: left; padding: 0 0 6px; } .search-page__personalized-title { font-size: clamp(30px, 9vw, 42px); } .page--search.is-curated-group-mode .search-page__group-title { font-size: clamp(27px, 7.2vw, 31px); line-height: 1.08; } .search-page__personalized-copy { max-width: 100%; font-size: 15px; } .search-page__group-hero-inner { align-items: center; text-align: center; } .page--search.is-gift-room-group-mode .search-page__group-hero-frame { padding: 0; } .page--search.is-gift-room-group-mode .search-page__personalized-hero-inner { padding: 0 0 2px; } .page--search.is-gift-room-group-mode .search-page__group-title { font-size: 26px; } .page--search.is-gift-room-group-mode .search-page__personalized-copy { max-width: 92%; font-size: 13px; } .page--search.is-curated-group-mode .search-page__group-spotlight { width: 100vw; max-width: none; margin: 10px calc(50% - 50vw) 2px; padding: 0 16px 4px; box-sizing: border-box; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(118px, calc(40vw - 22px), 156px); grid-template-columns: none; gap: 16px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; } .page--search.is-curated-group-mode .search-page__group-spotlight::-webkit-scrollbar { display: none; } .page--search.is-curated-group-mode .search-page__group-spotlight-card { scroll-snap-align: start; } .page--search.is-curated-group-mode .search-page__group-spotlight-media { aspect-ratio: 1.28 / 1; } .search-page__group-bar.is-popover-open { z-index: 12149; } .search-page__group-bar.is-popover-open::before { content: ""; position: fixed; inset: 0; background: var(--popup-overlay); z-index: 12140; } .search-page__group-bar-inner { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; padding: 6px 16px; box-sizing: border-box; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .search-page__group-bar-inner::-webkit-scrollbar { display: none; } .search-page__group-filters, .search-page__group-bar-actions { width: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: 16px; } .search-page__group-filter-chip, .search-page__group-filter-button, .search-page__group-sort-trigger, .search-page__group-empty-reset { flex: 0 0 auto; scroll-snap-align: start; } .search-page__group-filter-button, .search-page__group-sort-trigger { width: auto; min-width: 0; min-height: 42px; padding-left: 18px; padding-right: 18px; font-size: 14px; } .search-page__group-sort-trigger { min-width: 108px; } .search-page__group-filter-chip .search-page__group-filter-button { padding-right: 8px; } .search-page__group-popover { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; max-height: 70vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 16px 20px 28px; box-shadow: 0 -8px 28px rgba(35, 32, 48, 0.18); z-index: 12150 !important; transform: none !important; } .search-page__group-grid, .search-page__group-loader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); margin-right: 0; } .page--search.is-group-mode .search-page__group-grid .cat-card--media-square { --cat-card-height: 670px; aspect-ratio: 325 / 670; } .page--search.is-group-mode .search-page__group-grid .cat-card--no-service .cat-card__store-row { top: calc((443 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } .search-page__group-empty { padding: 32px 18px; border-radius: 24px; } .search-page__group-empty-title { font-size: 20px; } .search-page__group-empty-copy { font-size: 14px; } .search-page__group-context { justify-content: flex-start; gap: 8px; } .page--search.is-gift-room-group-mode .search-page__group-context { justify-content: center; } .search-page__group-context-pill { min-height: 32px; padding: 7px 12px; font-size: 12px; } .search-assistant-bar { width: calc(100vw - 32px); margin: -12px calc(50% - 50vw + 16px) 0; min-height: 108px; padding: 12px; border-radius: 16px; grid-template-columns: minmax(0, 1fr); gap: 10px; cursor: pointer; } .search-assistant-bar__copy { min-height: 40px; align-items: flex-start; font-size: 19px; line-height: 1.16; } .search-assistant-bar__button { width: 100%; min-width: 0; min-height: 44px; padding-inline: 18px; font-size: 15px; } .search-page .cat-filters__applied-rail { width: 100vw; max-width: none; flex-basis: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 58px; align-self: stretch; overflow: visible; } .search-page .cat-filters__applied-viewport, .search-page .cat-filters__applied { min-height: 58px; height: auto; } .search-page .cat-filters__applied-viewport { overflow-x: hidden; overflow-y: visible; } .search-page .cat-filters__applied { gap: 16px; padding-left: 16px; padding-right: 16px; padding-top: 7px; padding-bottom: 7px; box-sizing: border-box; overflow-y: hidden; } .search-page .search-query-refinement { height: 44px; } .search-page .search-query-refinement__main, .search-page .search-query-refinement__suggest { min-height: 44px; } .search-page .search-query-refinement__main { padding-left: 16px; padding-right: 8px; } .search-page .search-query-refinement__suggest { padding: 0 16px; } .search-page .search-query-refinement__remove { width: 44px; min-width: 44px; flex-basis: 44px; min-height: 44px; height: 44px; margin-top: 0; margin-bottom: 0; } .search-page__content { display: flex; flex-direction: column; gap: 0; } .search-page__shell.is-filters-open .search-page__content { gap: 18px; } .search-page__filters-column { width: auto; max-width: none; transform: none; } .search-page__filters-column.is-open { transform: none; } .page--search .search-page__filters-column .cat-filters-drawer { position: relative; top: auto; } .page--search .search-page__filters-column .cat-filters-drawer__panel { width: 100%; min-height: 0; } .search-page__results .search-empty-state { margin-top: 0; } .search-empty-state__panel { min-height: 0; padding: 24px 22px 24px; border-radius: 28px; } .search-empty-state__title { font-size: 20px; } .search-empty-state__subtitle { margin-top: 12px; font-size: 18px; line-height: 1.3; } .search-empty-state__content { margin-top: 24px; grid-template-columns: 1fr; gap: 18px; } .search-empty-state__collection { gap: 16px; } .search-empty-state__collection-title { font-size: 22px; } .search-empty-state__collection-text { max-width: none; font-size: 16px; } .search-empty-state__cta { min-height: 56px; padding-left: 22px; padding-right: 22px; } .search-empty-state__suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .search-empty-interest-card { max-width: none; min-height: 188px; border-radius: 24px; } .search-empty-interest-card__title { font-size: 15px; margin-top: 6px; } .search-empty-interest-card__media { left: 4px; right: 4px; bottom: 4px; height: 118px; border-radius: 22px; } } @media (max-width: 760px) { .search-curated-card { padding-bottom: 18px; } .search-curated-card__frame { display: grid; grid-template-columns: minmax(0, 1fr) clamp(78px, 27vw, 122px); column-gap: 8px; row-gap: 12px; height: auto; overflow: visible; } .search-curated-card__media-main { width: 100%; height: auto; aspect-ratio: 1 / 1; } .search-curated-card__thumbs { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); align-self: stretch; gap: 8px; min-width: 0; min-height: 0; } .search-curated-card__thumb { width: 100%; height: 100%; } .search-curated-card__content { grid-column: 1 / -1; height: auto; margin: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; } .search-curated-card__store-row, .search-curated-card__title, .search-curated-card__price-row, .search-curated-card__smart-badge, .search-curated-card__actions { position: static; left: auto; top: auto; } .search-curated-card__store-row { flex-wrap: wrap; align-items: center; gap: 6px 5px; min-height: 0; } .search-curated-card__title { width: 100%; font-size: 16px; } .search-curated-card__smart-badge { width: 100%; min-height: 0; } } .page--search .category-hero { margin-top: -10px; } .page--search.is-discover-route .cat-filters__applied-rail { flex: 1 1 100%; padding-left: 0; overflow: visible; } .page--search.is-discover-route .cat-filters__left { display: none; } .page--search.is-discover-route .search-page__filters-column { width: 0; min-width: 0; overflow: hidden; visibility: hidden; pointer-events: none; } .page--search.is-discover-route .cat-filters-drawer { display: none !important; } .page--search.is-discover-route .cat-filters__applied { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scrollbar-width: none; } .page--search.is-discover-route .cat-filters__applied::-webkit-scrollbar { display: none; } .page--search.is-discover-route .cat-filters__applied .quick-filters__pill { flex: 0 0 auto; scroll-snap-align: start; } .search-page .cat-filters__applied .quick-filters__pill, .search-page .cat-filters__applied .quick-filters__pill.is-active, .search-page .cat-filters__applied .quick-filters__pill-main, .search-page .cat-filters__applied .quick-filters__label, .search-page .cat-filters__applied .search-query-refinement, .search-page .cat-filters__applied .search-query-refinement__main, .search-page .cat-filters__applied .search-query-refinement__suggest, .search-page .cat-filters__applied .search-query-refinement__label { font-family: var(--font-display); font-size: 14px; font-style: normal; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; } .page--search .quick-filters__pill.is-active .quick-filters__remove { opacity: 1; } .page--search .quick-filters__pill.is-active .quick-filters__remove img { filter: brightness(0) saturate(100%) invert(96%) sepia(17%) saturate(434%) hue-rotate(302deg) brightness(104%) contrast(94%); } @media (max-width: 760px) { .page--search.is-discover-route .cat-filters__applied-rail { width: auto; max-width: none; min-width: 0; flex: 1 1 0; flex-basis: 0; margin-left: 0; margin-right: 0; } .page--search.is-discover-route .cat-filters__applied { padding-left: 0; padding-right: 0; scroll-padding-inline: 0; box-sizing: border-box; } } @media (max-width: 760px) { .search-page .cards-grid { width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); margin-right: 0; gap: 10px; } .search-page .cat-filters__applied { scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-inline: contain; } .search-page .cat-filters__applied .cat-filters__chip, .search-page .cat-filters__applied .search-query-refinement, .search-page .cat-filters__applied .quick-filters__pill { scroll-snap-align: start; } .search-page .cat-filters__applied .cat-filters__chip-remove { width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; margin: 0; } .search-page .cat-filters__bar { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 16px 4px; box-sizing: border-box; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; } .search-page .cat-filters__bar::-webkit-scrollbar { display: none; } .search-page .cat-filters__left, .search-page .cat-filters__right, .search-page .cat-filters__applied-rail { width: auto; min-width: 0; flex: 0 0 auto; margin-left: 0; margin-right: 0; align-self: center; } .search-page .cat-filters__left { order: 0; } .search-page .cat-filters__right { order: 1; } .search-page .cat-filters__applied-rail { order: 2; flex-basis: auto; max-width: none; min-height: 44px; overflow: visible; } .search-page .cat-filters__applied-viewport, .search-page .cat-filters__applied { width: auto; min-height: 44px; height: 44px; overflow: visible; } .search-page .cat-filters__applied { gap: 8px; padding: 0; scroll-snap-type: none; } .search-page .cat-filters__main, .search-page .cat-filters__sort, .search-page .cat-filters__applied .cat-filters__chip, .search-page .cat-filters__applied .search-query-refinement, .search-page .cat-filters__applied .quick-filters__pill { max-width: min(64vw, 220px); } body[data-jp-language="ru"] .search-page .cat-filters__main, body[data-jp-language="ru"] .search-page .cat-filters__sort { max-width: min(58vw, 190px); padding-left: 14px; padding-right: 14px; } .search-page .cat-filters__main-frame, .search-page .cat-filters__sort > span, .search-page .cat-filters__chip-label, .search-page .search-query-refinement__label, .search-page .quick-filters__label { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page--search.is-discover-route .cat-filters__applied-rail { width: auto; max-width: none; flex: 1 1 0; flex-basis: 0; min-width: 0; min-height: 52px; margin-left: 0; margin-right: 0; align-self: center; } .page--search.is-discover-route .cat-filters__applied-viewport, .page--search.is-discover-route .cat-filters__applied { width: 100%; min-height: 52px; height: 52px; overflow-y: visible; } .page--search.is-discover-route .cat-filters__applied { padding: 4px 0; box-sizing: border-box; overflow-x: auto; scroll-padding-inline: 0; } .search-jedipicks__grid { scroll-snap-type: x mandatory; scroll-padding: 12px; } .search-jedipicks__grid > * { scroll-snap-align: start; } } @media (max-width: 767px) { .page--search .search-page__filters-column { overflow: visible; } .page--search .search-page__filters-column .cat-filters-drawer { --cat-filters-drawer-mobile-top: clamp(84px, 13dvh, 128px); --cat-filters-drawer-mobile-offset-top: calc(env(safe-area-inset-top, 0px) + var(--cat-filters-drawer-mobile-top)); --cat-filters-drawer-panel-slide-duration: 240ms; position: fixed; inset: 0; width: auto; z-index: var(--z-modal-front, 13000); overflow: hidden; opacity: 1; transform: none; pointer-events: none; transition: none; } .page--search .search-page__filters-column .cat-filters-drawer.is-open { pointer-events: auto; transform: none; opacity: 1; } .page--search .search-page__filters-column .cat-filters-drawer__backdrop { display: block !important; } .page--search .search-page__filters-column .cat-filters-drawer__close { display: none !important; } .page--search .search-page__filters-column .cat-filters-drawer__footer { display: block !important; } .page--search .search-page__filters-column .cat-filters-drawer__panel { position: absolute; top: var(--cat-filters-drawer-mobile-offset-top); left: 0; right: 0; bottom: auto; width: 100%; max-width: none; height: calc(100vh - var(--cat-filters-drawer-mobile-offset-top)); height: calc(100dvh - var(--cat-filters-drawer-mobile-offset-top)); max-height: calc(100dvh - var(--cat-filters-drawer-mobile-offset-top)); min-height: 0; background: var(--popup-bg); border-radius: 22px 22px 0 0; box-shadow: var(--popup-shadow-soft); display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%); transition: transform var(--cat-filters-drawer-panel-slide-duration) cubic-bezier(0.22, 1, 0.36, 1); } .page--search .search-page__filters-column .cat-filters-drawer.is-open .cat-filters-drawer__panel { transform: translateY(0); } .page--search .search-page__filters-column .cat-filters-drawer.is-sheet-dragging .cat-filters-drawer__panel { transform: translateY(var(--cat-filters-sheet-drag-y, 0px)); transition: none; will-change: transform; } .page--search .search-page__filters-column .cat-filters-drawer.is-sheet-settling .cat-filters-drawer__panel { transform: translateY(var(--cat-filters-sheet-drag-y, 0px)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .page--search .search-page__filters-column .cat-filters-drawer.is-sheet-closing .cat-filters-drawer__panel { transform: translateY(var(--cat-filters-sheet-drag-y, 0px)); transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .page--search .search-page__filters-column .cat-filters-drawer__header { padding: 4px 16px 13px; min-height: 49px; border-bottom: 1px solid #eee5da; visibility: visible; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; } .page--search .search-page__filters-column .cat-filters-drawer.is-sheet-dragging .cat-filters-drawer__header { cursor: grabbing; } .page--search .search-page__filters-column .cat-filters-drawer__category-browser-head { display: none; } .page--search .search-page__filters-column .cat-filters-drawer__body { flex: 1 1 auto; min-height: 0; margin-inline: 0; padding: 10px 16px 18px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; gap: 14px; scrollbar-width: none; } .page--search .search-page__filters-column .cat-filters-drawer__body::-webkit-scrollbar { width: 0; height: 0; } .page--search .search-page__filters-column .cat-filters-drawer__footer { flex: 0 0 auto; padding: 15px 16px; padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)); background: var(--popup-bg); border-top: 1px solid var(--popup-border); box-shadow: 0 -10px 22px color-mix(in srgb, var(--color-ink) 8%, transparent); } .page--search .search-page__filters-column .cat-filters-drawer__section { overflow: visible; } } @media (max-width: 720px) { .page--search .search-page__filters-column .cat-filters-drawer__title { font-size: 22px !important; line-height: 1.18 !important; } } /* [bundle] /styles/components/search-pivots.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .search-page__group-endcap { margin-top: 30px; } .search-pivots { display: flex; flex-direction: column; gap: 18px; } .search-pivots__title { margin: 0; color: #232030; font-family: var(--font-body); font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 0.98; letter-spacing: -0.04em; } .search-pivots__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 15px; } .search-pivots__card { min-height: 114px; padding: 7px 18px 7px 7px; border-radius: 20px; border: 1px solid var(--color-line); background: #f8f1eb; box-shadow: none; display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 14px; color: #232030; text-decoration: none; transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; } .search-pivots__card:hover, .search-pivots__card:focus-visible { box-shadow: var(--shadow-card-hover); border-color: transparent; } .search-pivots__preview { width: 100px; height: 100px; border-radius: 17px; background: var(--search-pivot-tone, #dbe2eb); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: background-color 0.18s ease; } .search-pivots__preview::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 249, 241, 0.1); pointer-events: none; opacity: 0; transition: opacity 0.18s ease; } .search-pivots__preview-search { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; opacity: 0; z-index: 2; pointer-events: none; transform: translate3d(-50%, -50%, 0); transition: opacity 0.18s ease; will-change: opacity; backface-visibility: hidden; } .search-pivots__preview-search-icon { width: 36px; height: 36px; display: block; pointer-events: none; } .search-pivots__card:hover .search-pivots__preview::after, .search-pivots__card:focus-visible .search-pivots__preview::after { opacity: 1; } .search-pivots__card:hover .search-pivots__preview-search, .search-pivots__card:focus-visible .search-pivots__preview-search { opacity: 1; } .search-pivots__label { min-width: 0; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 16px; letter-spacing: 0.16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 1180px) { .search-pivots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .search-page__group-endcap { margin-top: 26px; } .search-pivots { gap: 14px; } .search-pivots__title { font-size: clamp(20px, 6vw, 26px); } .search-pivots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .search-pivots__card { min-height: 96px; padding: 12px; border-radius: 20px; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; } .search-pivots__preview { width: 76px; height: 76px; border-radius: 16px; } .search-pivots__preview-frame { width: 50px; height: 50px; border-radius: 12px; } .search-pivots__label { font-size: 12px; line-height: 15px; } } /* [bundle] /styles/components/personalized-group-rail.css */ .personalized-group-rail { --personalized-group-rail-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --personalized-group-rail-title-inline-offset: 10px; --personalized-group-rail-safe-buffer: 6px; --personalized-group-rail-fade-width: var(--homepage-rail-fade-width, 52px); --personalized-group-rail-fade-overhang: var(--homepage-rail-fade-overhang, 26px); --personalized-group-rail-arrow-overhang: var(--homepage-rail-arrow-overhang, 27px); --personalized-group-rail-overlay-reserve: var(--homepage-rail-overlay-reserve, 96px); --personalized-group-rail-track-top: 74px; --personalized-group-rail-track-bottom: 14px; --personalized-group-rail-card-height: 367px; --personalized-group-rail-gradient-top: 66px; padding-block: 8px 12px; overflow: visible; } .personalized-group-rail__frame { width: var(--personalized-group-rail-shell-width); max-width: 100%; height: 455px; margin: 0 auto; position: relative; overflow: visible; } .personalized-group-rail__header { position: absolute; top: 8px; left: var(--personalized-group-rail-title-inline-offset); right: var(--personalized-group-rail-safe-buffer, 6px); min-height: 46px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; z-index: 5; } .personalized-group-rail__title { margin: 0; min-height: 46px; display: inline-flex; align-items: center; color: #232030; font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: 0; } .personalized-group-rail__viewport { position: absolute; inset: 0; padding: 0 var(--personalized-group-rail-safe-buffer); box-sizing: border-box; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; z-index: 1; } .personalized-group-rail__viewport::-webkit-scrollbar { display: none; } .personalized-group-rail__track { width: max-content; display: inline-flex; align-items: flex-start; gap: 20px; padding: var(--personalized-group-rail-track-top) 0 var(--personalized-group-rail-track-bottom); box-sizing: border-box; } .personalized-group-rail__gradient { position: absolute; top: var(--personalized-group-rail-gradient-top); width: var(--personalized-group-rail-fade-width); height: calc(var(--personalized-group-rail-card-height) + 16px); pointer-events: none; z-index: 3; opacity: 1; transition: opacity 0.62s cubic-bezier(0.25, 0.1, 0.25, 1); } .personalized-group-rail__gradient--left { left: calc(-1 * var(--personalized-group-rail-fade-overhang)); background: linear-gradient(90deg, #f8f1eb 0%, rgba(248, 241, 235, 0) 100%); } .personalized-group-rail__gradient--right { right: calc(-1 * var(--personalized-group-rail-fade-overhang)); background: linear-gradient(270deg, #f8f1eb 0%, rgba(248, 241, 235, 0) 100%); } .personalized-group-rail.is-at-start .personalized-group-rail__gradient--left, .personalized-group-rail.is-at-end .personalized-group-rail__gradient--right { opacity: 0; } .personalized-group-rail__arrow { width: 56px; height: 46px; padding: 0; margin: 0; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: visible; background: transparent; background-position: center; background-repeat: no-repeat; background-size: 22px 14px; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: opacity 0.18s ease; backface-visibility: hidden; z-index: 6; flex: 0 0 auto; } .personalized-group-rail__arrow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: #232030; pointer-events: none; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: transform 0.18s ease; will-change: transform; backface-visibility: hidden; } .personalized-group-rail__arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; transform: translate(-50%, -50%); transform-origin: 50% 50%; backface-visibility: hidden; } .personalized-group-rail__arrow-icon { display: none; } .personalized-group-rail__arrow--next { background-image: none; } .personalized-group-rail__arrow--next::after { background-image: url("/assets/header-icons/pager-pill-next.svg"); } .personalized-group-rail__arrow--prev { background-image: none; } .personalized-group-rail__arrow--prev::after { background-image: url("/assets/header-icons/pager-pill-prev.svg"); } .personalized-group-rail__arrow:hover:not(.is-hidden), .personalized-group-rail__arrow:focus-visible:not(.is-hidden) { transform: translate3d(0, 0, 0) scale(1); } .personalized-group-rail__arrow:hover:not(.is-hidden)::before, .personalized-group-rail__arrow:focus-visible:not(.is-hidden)::before { transform: translate3d(0, 0, 0) scale(1.04); } .personalized-group-rail__arrow:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.18); outline-offset: 3px; } .personalized-group-rail__frame > .personalized-group-rail__arrow { position: absolute; top: 18px; z-index: 6; } .personalized-group-rail__frame > .personalized-group-rail__arrow--next { right: var(--personalized-group-rail-title-inline-offset); left: auto; } .personalized-group-rail__frame > .personalized-group-rail__arrow--prev { right: calc(var(--personalized-group-rail-title-inline-offset) + 66px); left: auto; } .personalized-group-rail__arrow.is-hidden { display: inline-flex; pointer-events: none; cursor: default; opacity: 0.35; } .personalized-group-rail__arrow.is-hidden:hover, .personalized-group-rail__arrow.is-hidden:focus-visible { transform: none; } .personalized-group-rail.is-at-start.is-at-end .personalized-group-rail__arrow { display: none; } .personalized-group-rail__header.is-pager-host { display: flex; } .personalized-group-rail__header.is-pager-host.has-no-view-all .personalized-group-rail__title { margin-right: auto; } .personalized-group-rail__header.is-pager-host .personalized-group-rail__arrow--next { margin-left: 0; } .personalized-group-card { width: 325px; min-width: 325px; height: var(--personalized-group-rail-card-height); padding: 10px 10px 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; background: #f8f1eb; border: 1px solid var(--color-line); border-radius: 30px; text-decoration: none; color: #232030; box-shadow: none; transition: box-shadow 0.24s ease, border-color 0.24s ease; scroll-snap-align: start; } .personalized-group-card:hover, .personalized-group-card:focus-visible { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); border-color: transparent; } @media (hover: none), (pointer: coarse) { .personalized-group-card:hover { box-shadow: none; border-color: var(--color-line); } } .personalized-group-card:focus-visible { outline: none; } .personalized-group-card__preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .personalized-group-card__tile { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 27px; background: var(--personalized-group-tile, #e2e7f1); } .personalized-group-card__title { display: -webkit-box; max-width: calc(100% - 20px); margin: 0 auto; overflow: hidden; color: #232030; text-align: center; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } @media (max-width: 1024px) { .personalized-group-rail { --personalized-group-rail-safe-buffer: 16px; --personalized-group-rail-card-height: 336px; padding-block: 12px 10px; } .personalized-group-rail__frame { height: 432px; } .personalized-group-rail__gradient, .personalized-group-rail__arrow { display: none !important; } .personalized-group-rail__viewport { left: calc(-1 * var(--personalized-group-rail-safe-buffer)); right: calc(-1 * var(--personalized-group-rail-safe-buffer)); padding-inline: var(--personalized-group-rail-safe-buffer); overflow-x: auto; overflow-y: hidden; } .personalized-group-rail__track { padding-bottom: 22px; } .personalized-group-rail__title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: 0; } .personalized-group-card { width: 286px; min-width: 286px; height: var(--personalized-group-rail-card-height); border-radius: 24px; } .personalized-group-card__tile { border-radius: 20px; } } @media (max-width: 640px) { .personalized-group-rail { --personalized-group-rail-shell-width: min(720px, calc(100% - 32px)); --personalized-group-rail-safe-buffer: 16px; --personalized-group-rail-track-top: 68px; --personalized-group-rail-track-bottom: 16px; --personalized-group-rail-card-width: clamp(188px, calc((100vw - 52px) / 1.9), 226px); --personalized-group-rail-card-height: calc(var(--personalized-group-rail-card-width) + 70px); padding-block: 10px 8px; } .personalized-group-rail__frame { height: calc(var(--personalized-group-rail-track-top) + var(--personalized-group-rail-card-height) + var(--personalized-group-rail-track-bottom)); } .personalized-group-rail__header { top: 10px; } .personalized-group-rail__track { padding-bottom: var(--personalized-group-rail-track-bottom); } .personalized-group-rail__title { font-size: 21px; line-height: 26px; font-weight: 600; letter-spacing: 0; } .personalized-group-card { width: var(--personalized-group-rail-card-width); min-width: var(--personalized-group-rail-card-width); height: var(--personalized-group-rail-card-height); padding: 10px 10px 16px; gap: 12px; border-radius: 22px; } .personalized-group-card__tile { border-radius: 18px; } .personalized-group-card__title { font-size: 15px; line-height: 19px; -webkit-line-clamp: 2; } } /* [bundle] /styles/components/footer.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .site-footer { --popup-control-border: var(--popup-border-strong); --popup-focus: var(--color-forest); margin-top: 0; background: var(--color-footer-green); color: rgba(255, 249, 241, 0.92); -webkit-user-select: none; user-select: none; transition: margin-right 480ms var(--home-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .site-footer__newsletter { background: var(--color-sand-dark); color: #232030; } .site-footer__newsletter-inner { padding: 34px 0 36px; display: grid; gap: 20px; justify-items: center; text-align: center; } .site-footer__newsletter-text { max-width: 980px; margin: 0; color: #232030; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.45; } .site-footer__newsletter-form { width: min(100%, 553px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 4px; border: 2px solid #203022; border-radius: 999px; overflow: hidden; background: #FFF9F1; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .site-footer__newsletter-form:hover, .site-footer__newsletter-form:focus-within { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } .site-footer__newsletter-input { appearance: none; -webkit-appearance: none; min-width: 0; height: 46px; padding: 0 20px; border: 0; outline: 0; box-shadow: none; background: transparent; color: #232030; font-family: var(--font-heading); font-size: 12px; font-weight: 500; } .site-footer__newsletter-input:focus, .site-footer__newsletter-input:focus-visible { outline: 0; box-shadow: none; } .site-footer__newsletter-input:-webkit-autofill, .site-footer__newsletter-input:-webkit-autofill:hover, .site-footer__newsletter-input:-webkit-autofill:focus { -webkit-text-fill-color: #232030; -webkit-box-shadow: 0 0 0 1000px #FFF9F1 inset; box-shadow: 0 0 0 1000px #FFF9F1 inset; transition: background-color 9999s ease-out 0s; } .site-footer__newsletter-input::placeholder { color: var(--color-ink-muted); opacity: 1; } .site-footer__newsletter-button { min-width: 158px; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: #FFF9F1; color: #232030; font-family: var(--font-heading); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .site-footer__newsletter-button:hover, .site-footer__newsletter-button:focus-visible { background: #232030; color: #FFF9F1; } .site-footer__main { background: var(--color-footer-green); } .site-footer__promise { border-bottom: 1px solid rgba(255, 249, 241, 0.12); } body:not(.page--homepage) .site-footer__promise, body.page--homepage.is-homepage-authenticated .site-footer__promise { display: none !important; } .site-footer__promise-inner { min-height: 106px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 0; } .site-footer__promise-icon { width: 32px; height: 32px; flex: 0 0 32px; color: #FFF9F1; } .site-footer__asset-icon { display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--site-footer-icon-url) center / contain no-repeat; mask: var(--site-footer-icon-url) center / contain no-repeat; } .site-footer__asset-icon--promise { --site-footer-icon-url: url("/assets/footer-icons/promise-plus.svg"); } .site-footer__asset-icon--globe { --site-footer-icon-url: url("/assets/footer-icons/globe.svg"); } .site-footer__promise-text { margin: 0; color: rgba(255, 249, 241, 0.94); font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.45; text-decoration: underline dotted rgba(255, 249, 241, 0.28); text-underline-offset: 8px; } .site-footer__inner { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, max-content); justify-content: space-between; gap: 40px; padding: 46px 0 52px; } .site-footer__brand-column { width: min(100%, 440px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; } .site-footer__brandmark { display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .site-footer__brandmark-logo { display: block; width: 150px; height: auto; } .site-footer__app-button { min-height: 46px; padding: 0 21px; position: relative; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: #FFF9F1; font-family: var(--font-heading); font-size: 15px; font-weight: 700; cursor: pointer; isolation: isolate; overflow: visible; transform: none; } .site-footer__app-button:hover, .site-footer__app-button:focus-visible { background: transparent; transform: none; } .site-footer__app-button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--color-cream) 16%, transparent); transform: scale(1); transform-origin: center; transition: transform 180ms ease; will-change: transform; } .site-footer__app-button:hover::before, .site-footer__app-button:focus-visible::before { transform: scale(1.04); } .site-footer__nav { display: grid; justify-self: start; margin-left: -80px; grid-template-columns: repeat(3, minmax(112px, 148px)) minmax(172px, 196px); gap: 70px; } .site-footer__column { display: flex; flex-direction: column; gap: 14px; } .site-footer__column[hidden] { display: none !important; } .site-footer__heading { margin: 0; color: #FFF9F1; font-family: var(--font-heading); font-size: 17px; font-weight: 700; line-height: 1.2; } .site-footer__links { display: flex; flex-direction: column; gap: 8px; } .site-footer__links a { color: rgba(255, 249, 241, 0.84); font-family: var(--font-heading); font-size: 15px; font-weight: 400; line-height: 1.4; text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } .site-footer__links a:hover { color: #FFF9F1; } .site-footer__socials { display: grid; grid-template-columns: repeat(4, 38px); gap: 16px 14px; align-items: center; justify-content: start; margin-top: 4px; max-width: 194px; } .site-footer__social-link { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-cream); transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); overflow: visible; } .site-footer__social-link:hover { color: var(--color-cream); transform: none; } .site-footer__social-link svg { width: 100%; height: 100%; } .site-footer__social-icon { display: block; width: 34px; height: 34px; flex: 0 0 34px; background: currentColor; -webkit-mask: var(--site-footer-icon-url) center / contain no-repeat; mask: var(--site-footer-icon-url) center / contain no-repeat; } .site-footer__social-icon--facebook { --site-footer-icon-url: url("/assets/social-icons/facebook.svg"); } .site-footer__social-icon--instagram { --site-footer-icon-url: url("/assets/social-icons/instagram.svg"); } .site-footer__social-icon--pinterest { --site-footer-icon-url: url("/assets/social-icons/pinterest.svg"); } .site-footer__social-icon--youtube { --site-footer-icon-url: url("/assets/social-icons/youtube.svg"); } .site-footer__social-icon--reddit { --site-footer-icon-url: url("/assets/social-icons/reddit.svg"); } .site-footer__social-icon--x { --site-footer-icon-url: url("/assets/social-icons/x.svg"); } .site-footer__social-icon--whatsapp { --site-footer-icon-url: url("/assets/social-icons/whatsapp.svg"); } .site-footer__social-icon--messenger { --site-footer-icon-url: url("/assets/social-icons/messenger.svg"); } .site-footer__social-link svg path { fill: currentColor; } .site-footer__meta { border-top: 1px solid rgba(255, 249, 241, 0.12); } .site-footer__meta-inner { min-height: 72px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; } .site-footer__copyright, .site-footer__legal a { color: rgba(255, 249, 241, 0.76); font-family: var(--font-heading); font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; } .site-footer__locale-trigger { margin: 0; padding: 14px 20px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 249, 241, 0.9); display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .site-footer__locale-trigger:hover, .site-footer__locale-trigger:focus-visible, .site-footer__locale-trigger[aria-expanded="true"] { background: rgba(255, 249, 241, 0.12); } .site-footer__locale-trigger:focus-visible { outline: 0; } .site-footer__locale-icon { width: 15px; height: 15px; flex: 0 0 15px; line-height: 0; color: #FFF9F1; } .site-footer__locale-icon svg { width: 100%; height: 100%; display: block; } .site-footer__locale-divider { color: rgba(255, 249, 241, 0.44); } .site-footer__copyright { justify-self: center; } .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px 22px; } .site-footer__legal a:hover { color: #FFF9F1; } body.site-footer-locale-open { overflow: hidden; } @keyframes site-footer-locale-close-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } .site-footer__locale-modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal-front, 13000); display: flex; align-items: center; justify-content: center; padding: 24px 20px; background: rgba(35, 32, 48, 0.52); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.6; opacity: 0; pointer-events: none; transition: opacity 0.26s ease; } .site-footer__locale-modal-overlay[hidden] { display: none !important; } .site-footer__locale-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .site-footer__locale-modal-overlay.is-closing { pointer-events: none; } .site-footer__locale-modal-shell { width: 580px; max-width: calc(100vw - 40px); position: relative; opacity: 0; transform: translateY(10px) scale(0.98); transform-origin: top center; transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.23, 1, 0.32, 1); will-change: opacity, transform; } .site-footer__locale-modal-overlay.is-open .site-footer__locale-modal-shell { opacity: 1; transform: translateY(0) scale(1); } .site-footer__locale-modal-overlay.is-closing .site-footer__locale-modal-shell { opacity: 0; transform: translateY(0) scale(1); } .site-footer__locale-sheet-grip { display: none; } .site-footer__locale-modal-close { position: absolute; top: 0; left: calc(100% + var(--popup-close-offset, 10px)); width: var(--popup-close-width, 78px); height: var(--popup-close-height, 55px); border: 0; border-radius: 999px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); cursor: pointer; z-index: 2; transition: background-color 0.24s ease, filter 0.24s ease; will-change: transform; } .site-footer__locale-modal-close::before, .site-footer__locale-modal-close::after { content: none; } .site-footer__locale-modal-close-icon { position: absolute; left: 50%; top: 50%; width: var(--popup-close-icon-size, 17px); height: var(--popup-close-icon-size, 17px); display: block; transform: translate(-50%, -50%); pointer-events: none; } .site-footer__locale-modal-close:hover, .site-footer__locale-modal-close:focus-visible { background: var(--popup-close-hover-bg, var(--sort-control-bg)); animation: site-footer-locale-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: var(--popup-close-hover-filter); } .site-footer__locale-modal-close:active { transform: none; } .site-footer__locale-modal-close:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .site-footer__locale-modal { --site-footer-locale-field-bg: var(--popup-bg); width: 100%; padding: 30px 28px 20px; background: var(--popup-bg); border-radius: 30px; color: var(--color-ink); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.6; box-shadow: var(--popup-shadow); } .site-footer__locale-modal-title { margin: 0; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: 0; } .site-footer__locale-modal-copy { margin-top: 14px; color: var(--color-ink); font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.5; } .site-footer__locale-modal-link { margin: 0; padding: 0; border: 0; background: transparent; color: #232030; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .site-footer__locale-fields { margin-top: 18px; display: grid; gap: 14px; } .site-footer__locale-field { position: relative; padding-top: 8px; } .site-footer__locale-label { position: absolute; top: 2px; left: 22px; z-index: 3; display: inline-flex; align-items: center; max-width: calc(100% - 36px); margin: 0; padding: 0 6px; border-radius: 999px; background: var(--site-footer-locale-field-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 14px; white-space: nowrap; pointer-events: none; } .site-footer__locale-select { width: 100%; height: 46px; min-height: 46px; padding: 0 46px 0 20px; border: 0; background: transparent; background-image: none; color: var(--color-ink); display: block; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 46px; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: 0; box-shadow: none; } .site-footer__locale-select::-ms-expand { display: none; } .site-footer__locale-select-shell { position: relative; height: 46px; min-height: 46px; background: var(--site-footer-locale-field-bg, var(--popup-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); overflow: hidden; border: 1.5px solid var(--popup-border-strong); border-radius: 999px; outline: 2px solid transparent; outline-offset: 0; transition: border-color 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease; } .site-footer__locale-select-shell:focus-within { border-color: var(--color-forest); outline-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .site-footer__locale-select-caret { width: 13px; height: 13px; pointer-events: none; position: absolute; right: 19px; top: 50%; margin-top: -6.5px; color: var(--color-ink); background: currentColor; -webkit-mask: url("/assets/header-icons/filter-chevron.svg") center / contain no-repeat; mask: url("/assets/header-icons/filter-chevron.svg") center / contain no-repeat; opacity: 0.92; } .site-footer__locale-select-caret::before, .site-footer__locale-select-caret::after { content: none; } .site-footer__locale-actions { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .site-footer__locale-cancel, .site-footer__locale-save { min-height: 54px; border-radius: 999px; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer; } .site-footer__locale-cancel { min-width: 149px; padding: 0 30px; border: 0; background: transparent; color: #232030; transition: box-shadow 0.22s ease; } .site-footer__locale-cancel:hover, .site-footer__locale-cancel:focus-visible { background: transparent; box-shadow: var(--shadow-card-hover); outline: 0; } .site-footer__locale-cancel:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 18%, transparent); outline-offset: 2px; } .site-footer__locale-save { min-width: 161px; padding: 0 30px; border: 0; background: transparent; color: #FFF9F1; position: relative; isolation: isolate; overflow: visible; transition: none; } .site-footer__locale-save::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #232030; transform: scale(1); transform-origin: center; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; pointer-events: none; } .site-footer__locale-save:hover, .site-footer__locale-save:focus-visible { background: transparent; outline: 0; } .site-footer__locale-save:hover::before, .site-footer__locale-save:focus-visible::before { transform: scale(1.04); } .site-footer__locale-save:active::before { transform: scale(1); } .site-footer__locale-save:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 18%, transparent); outline-offset: 2px; } @media (max-width: 1140px) { .site-footer__inner { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); align-items: start; gap: 30px; } .site-footer__brand-column { width: 100%; max-width: 320px; justify-self: center; align-self: center; } .site-footer__nav { margin-left: 0; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 24px 30px; } .site-footer__meta-inner { grid-template-columns: 1fr; justify-items: flex-start; gap: 12px; padding: 18px 0; } .site-footer__copyright { justify-self: start; } .site-footer__legal { justify-content: flex-start; } .site-footer__legal a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; } .site-footer__locale-modal-shell { max-width: calc(100vw - 32px); } } @media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr; gap: 32px; } .site-footer__brand-column { width: 100%; max-width: none; justify-self: center; } .site-footer__nav { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; } } @media (max-width: 767px) { .site-footer__inner { grid-template-columns: 1fr; gap: 32px; padding: 34px 0 38px; } .site-footer__newsletter-inner { padding: 28px 0 30px; gap: 18px; } .site-footer__newsletter-text { font-size: 16px; } .site-footer__newsletter-form { width: 100%; } .site-footer__newsletter-input { padding: 0 18px; } .site-footer__newsletter-button { min-width: 144px; } .site-footer__promise-inner { min-height: auto; align-items: flex-start; justify-content: flex-start; padding: 22px 0; } .site-footer__promise-text { font-size: 15px; text-underline-offset: 6px; } .site-footer__brand-column { width: 100%; max-width: none; justify-self: center; align-self: center; gap: 18px; align-items: center; text-align: center; } .site-footer__brandmark { width: 164px; height: 63px; margin-inline: auto; } .site-footer__brandmark::before { left: 44px; width: 120px; } .site-footer__brandmark::after { left: -15px; top: 53px; width: 120px; } .site-footer__brandmark-text { width: 155px; height: 45px; font-size: 37.8px; line-height: 45px; } .site-footer__app-button { width: min(100%, 320px); min-height: 46px; justify-content: center; font-size: 15px; margin-inline: auto; } .site-footer__nav { margin-left: 0; grid-template-columns: 1fr; gap: 28px; } .site-footer__heading { font-size: 18px; } .site-footer__links a { min-height: 44px; display: flex; align-items: center; font-size: 15px; } .site-footer__socials { gap: 18px; } .site-footer__social-link { width: 44px; height: 44px; } .site-footer__locale-trigger { min-height: 44px; padding: 12px 18px; gap: 10px; font-size: 13px; } .site-footer__locale-modal-overlay { --site-footer-locale-sheet-top: clamp(84px, 13dvh, 128px); align-items: flex-end; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + var(--site-footer-locale-sheet-top)) 0 0; overflow: hidden; background: rgba(35, 32, 48, 0.42); transition: opacity 0.22s ease; } .site-footer__locale-modal-shell { width: 100%; max-width: none; height: calc(100vh - (env(safe-area-inset-top, 0px) + var(--site-footer-locale-sheet-top))); height: calc(100dvh - (env(safe-area-inset-top, 0px) + var(--site-footer-locale-sheet-top))); max-height: none; display: flex; flex-direction: column; background: var(--popup-bg); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 28px rgba(35, 32, 48, 0.22); opacity: 1; overflow: hidden; transform: translateY(100%); transform-origin: bottom center; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } .site-footer__locale-modal-overlay.is-open .site-footer__locale-modal-shell { opacity: 1; transform: translateY(0); } .site-footer__locale-modal-overlay.is-closing .site-footer__locale-modal-shell { opacity: 1; transform: translateY(100%); transition: transform 180ms cubic-bezier(0.4, 0, 1, 1); } .site-footer__locale-modal-overlay.is-sheet-dragging .site-footer__locale-modal-shell { transform: translateY(var(--site-footer-locale-sheet-drag-y, 0px)); transition: none; will-change: transform; } .site-footer__locale-modal-overlay.is-sheet-settling .site-footer__locale-modal-shell { transform: translateY(var(--site-footer-locale-sheet-drag-y, 0px)); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .site-footer__locale-modal-overlay.is-sheet-closing .site-footer__locale-modal-shell { transform: translateY(var(--site-footer-locale-sheet-drag-y, 100%)); transition: transform 180ms cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .site-footer__locale-sheet-grip { min-height: var(--popup-sheet-grip-height, 44px); display: flex; flex: 0 0 var(--popup-sheet-grip-height, 44px); align-items: center; justify-content: center; background: var(--popup-bg); cursor: grab; touch-action: none; user-select: none; } .site-footer__locale-sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .site-footer__locale-modal-overlay.is-sheet-dragging .site-footer__locale-sheet-grip { cursor: grabbing; } .site-footer__locale-modal-close { display: none !important; } .site-footer__locale-modal { min-height: 0; padding: 2px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .site-footer__locale-modal-title { font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .site-footer__locale-select { height: 46px; min-height: 46px; font-size: 13px; line-height: 46px; } .site-footer__locale-actions { flex-direction: column-reverse; } .site-footer__locale-cancel, .site-footer__locale-save { width: 100%; } } @media (min-width: 961px) { body.is-ai-panel-open .site-footer { margin-left: 0 !important; } body.is-ai-panel-open:not(.page--homepage) .site-footer { --site-footer-lume-compression: 360px; margin-right: var(--site-footer-lume-compression) !important; } body.is-ai-panel-open.page--gift-room .site-footer { --site-footer-lume-compression: 360px; } body.is-ai-panel-open footer.site-footer .container, body.is-ai-panel-open .site-footer .container { margin-left: auto !important; margin-right: auto !important; } body.is-ai-panel-open .site-footer__promise-inner { min-height: auto; align-items: flex-start; justify-content: flex-start; padding: 22px 0; } body.is-ai-panel-open .site-footer__promise-text { flex: 1 1 auto; min-width: 0; max-width: 100%; font-size: 15px; line-height: 1.45; text-underline-offset: 6px; } } @media (min-width: 961px) and (max-width: 1640px) { body.is-ai-panel-open .site-footer__inner { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); align-items: start; gap: 30px; } body.is-ai-panel-open .site-footer__brand-column { width: 100%; max-width: 320px; justify-self: center; align-self: center; } body.is-ai-panel-open .site-footer__nav { margin-left: 0; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 24px 30px; } body.is-ai-panel-open .site-footer__meta-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: flex-start; gap: 12px; padding: 18px 0; } body.is-ai-panel-open .site-footer__copyright { justify-self: start !important; } body.is-ai-panel-open .site-footer__legal { justify-content: flex-start !important; max-width: 100%; min-width: 0; } body.is-ai-panel-open .site-footer__locale-modal-shell { max-width: calc(100vw - 32px); } } @media (min-width: 961px) and (max-width: 1264px) { body.is-ai-panel-open .site-footer__inner { grid-template-columns: 1fr; gap: 32px; padding: 34px 0 38px; } body.is-ai-panel-open .site-footer__newsletter-inner { padding: 28px 0 30px; gap: 18px; } body.is-ai-panel-open .site-footer__newsletter-text { font-size: 16px; } body.is-ai-panel-open .site-footer__newsletter-form { width: 100%; } body.is-ai-panel-open .site-footer__newsletter-input { padding: 0 18px; } body.is-ai-panel-open .site-footer__newsletter-button { min-width: 144px; } body.is-ai-panel-open .site-footer__promise-inner { min-height: auto; align-items: flex-start; justify-content: flex-start; padding: 22px 0; } body.is-ai-panel-open .site-footer__promise-text { font-size: 15px; text-underline-offset: 6px; } body.is-ai-panel-open .site-footer__brand-column { width: 100%; max-width: none; justify-self: center; align-self: center; gap: 18px; align-items: center; text-align: center; } body.is-ai-panel-open .site-footer__app-button { width: min(100%, 320px); min-height: 46px; justify-content: center; font-size: 15px; margin-inline: auto; } body.is-ai-panel-open .site-footer__nav { margin-left: 0; grid-template-columns: 1fr; gap: 28px; } body.is-ai-panel-open .site-footer__heading { font-size: 18px; } body.is-ai-panel-open .site-footer__links a { font-size: 15px; } body.is-ai-panel-open .site-footer__socials { gap: 18px; } body.is-ai-panel-open .site-footer__social-link { width: 22px; height: 22px; } body.is-ai-panel-open .site-footer__locale-trigger { padding: 12px 18px; gap: 10px; font-size: 13px; } } @media (max-width: 720px) { .site-footer__locale-modal-title { font-size: 22px !important; line-height: 1.18 !important; } } /* [bundle] /styles/components/promo.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .promo-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-cream); box-shadow: var(--shadow-soft); } .promo-banner__content { display: flex; flex-direction: column; gap: var(--space-3); } .promo-banner__eyebrow { font-size: var(--font-size-caption); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-forest); margin: 0; } .promo-banner__title { font-family: var(--font-heading); font-size: var(--font-size-h3); margin: 0; } .promo-banner__body { margin: 0; } .promo-banner__media { min-height: 240px; } /* [bundle] /styles/components/pagination.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .pager { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .pager__title { margin: 0; text-align: center; color: #232030; font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.1; } .category-page.is-category-discovery-page .pager__title { display: none; } .pager__row { display: inline-flex; align-items: center; justify-content: center; gap: 42px; } .pager__pages { display: inline-flex; align-items: center; gap: 10px; } .pager__btn { position: relative; isolation: isolate; min-width: 72px; width: 72px; height: 54px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #232030; text-align: center; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; transition: color 0.18s ease; } .pager__btn::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: #eee5da; box-shadow: none; transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } .pager__label, .pager__arrow-icon { position: relative; z-index: 1; transform: none; transition: none; } .pager__btn:not(:disabled):not(.pager__btn--active):not(.pager__btn--arrow):hover, .pager__btn:not(:disabled):not(.pager__btn--active):not(.pager__btn--arrow):focus-visible { background: transparent; box-shadow: none; } .pager__btn:not(:disabled):not(.pager__btn--active):not(.pager__btn--arrow):hover::before, .pager__btn:not(:disabled):not(.pager__btn--active):not(.pager__btn--arrow):focus-visible::before, .pager__btn--arrow:not(:disabled):hover::before, .pager__btn--arrow:not(:disabled):focus-visible::before { transform: scale(1.04); } .pager__btn:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.35); outline-offset: 6px; } .pager__btn--active { color: #232030; outline: 0; box-shadow: none; } .pager__btn--active::before { background: #b3bfb2; box-shadow: inset 0 0 0 2px #829181; } .pager__btn--arrow .icon { display: none; } .pager__btn--arrow { padding: 0; } .pager__btn--arrow::before { background: #b3bfb2; } .pager__arrow-icon { width: 22px; height: 14px; display: block; flex: 0 0 auto; object-fit: contain; } .pager__arrow-icon--inactive { display: none; } .pager__btn--arrow:disabled .pager__arrow-icon--active { display: none; } .pager__btn--arrow:disabled .pager__arrow-icon--inactive { display: block; } .pager__btn--arrow:disabled { cursor: not-allowed; box-shadow: none; opacity: 1; } .pager__btn--arrow:disabled::before { background: #dcddd3; } .pager__dots { position: relative; isolation: isolate; min-width: 72px; width: 72px; height: 54px; padding: 0; border-radius: 999px; background: #eee5da; color: #232030; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 16px; letter-spacing: 1.6px; display: inline-flex; align-items: center; justify-content: center; user-select: none; cursor: default; } .pager__dots:hover { background: #eee5da; color: #232030; box-shadow: none; } @media (max-width: 980px) { .pager__row { width: 100%; overflow-x: auto; padding: 4px 2px 10px; justify-content: flex-start; } } @media (max-width: 640px) { .pager__row { gap: 10px; justify-content: center; overflow-x: visible; } .pager__pages { gap: 6px; } .pager__btn, .pager__dots { min-width: 54px; width: 54px; } } @media (max-width: 360px) { .pager__row { gap: 8px; flex-wrap: wrap; } .pager__pages { gap: 3px; } .pager__btn, .pager__dots { min-width: 48px; width: 48px; height: 48px; } } /* [bundle] /styles/components/breadcrumbs.css */ :root { --bg-pill: #eee5da; --bg-pill-active: #eee5da; --bg-pill-hover: #b3bfb2; --text-main: var(--color-ink); --text-muted: var(--color-ink-soft); --dot: var(--color-ink); --radius: var(--radius-pill); --ring: rgba(35, 32, 48, 0.22); } .crumbs { width: fit-content; max-width: 100%; margin-inline: auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .crumbs__home { width: 36px; height: 36px; flex: 0 0 36px; padding: 0; border: 0; border-radius: var(--radius); background: var(--bg-pill); color: var(--text-main); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: background-color 0.16s ease; } .crumbs__home::before { content: ""; position: absolute; inset: 2px; border-radius: 999px; background: transparent; transition: background-color 0.16s ease; pointer-events: none; } .crumbs__home-icon { position: relative; z-index: 1; width: 18px; height: 18px; display: block; object-fit: contain; } .crumbs__home:hover { background: var(--bg-pill); } .crumbs__home:hover::before { background: var(--bg-pill-hover); } .crumbs__home:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.3); outline-offset: 2px; } .crumbs__track { height: 36px; min-height: 36px; max-width: calc(100% - 41px); padding: 3px; box-sizing: border-box; border-radius: var(--radius); background: var(--bg-pill); display: inline-flex; align-items: center; gap: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .crumbs__track::-webkit-scrollbar { width: 0; height: 0; display: none; } .crumbs__pill { height: 30px; border: 0; padding: 0 10px; border-radius: var(--radius); background: transparent; color: var(--text-main); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; } .crumbs__pill:hover { background: var(--bg-pill-hover); } .crumbs__pill:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.3); outline-offset: 2px; } .crumbs__pill--active { background: transparent; } .crumbs__pill--active:hover { background: var(--bg-pill-hover); } .crumbs__pill--current { color: var(--text-muted); cursor: default; pointer-events: none; } .crumbs__pill--current:hover { background: transparent; } .crumbs__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dot); flex: 0 0 6px; } @media (max-width: 900px) { .crumbs { width: 100%; align-items: flex-start; } .crumbs__track { height: 36px; min-height: 36px; max-width: calc(100vw - 78px); padding-inline: 6px; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scroll-padding-inline: 6px; scroll-snap-type: x mandatory; } .crumbs__pill { height: 30px; min-height: 30px; padding: 0 10px; flex: 0 0 auto; scroll-snap-align: start; } .crumbs__home { width: 36px; height: 36px; flex-basis: 36px; } } /* [bundle] /styles/components/category-page.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body.page[data-category-page-live="1"] { --category-header-content-gap: 26px; background: var(--color-page-bg); padding-top: calc(var(--category-expanded-header-height, 73px) + var(--category-header-content-gap)); } @media (max-width: 720px) { body.page[data-category-page-live="1"] { --category-header-content-gap: 20px; } } @media (min-width: 900px) { html.is-category-page-live, body.page[data-category-page-live="1"] { overflow-x: visible; } } body.page[data-category-page-live="1"] .category-page-skeleton { display: none; } body.page[data-category-page-live="1"].is-category-header-preparing .category-page, body.page[data-category-page-live="1"].is-category-header-preparing .cat-filters-meta, body.page[data-category-page-live="1"].is-category-header-preparing .site-footer { display: none; } body.page[data-category-page-live="1"].is-category-header-preparing .category-page-skeleton { display: block; } .category-page { display: flex; flex-direction: column; padding-bottom: 20px; background: var(--color-page-bg); transition: opacity 0.12s ease; } .category-page-skeleton { padding: 24px 0 96px; background: var(--color-page-bg); } .category-page-skeleton__section + .category-page-skeleton__section { margin-top: 30px; } .category-page-skeleton__breadcrumbs { display: flex; justify-content: center; } .category-page-skeleton__breadcrumbs-row { display: flex; align-items: center; gap: 10px; } .category-page-skeleton__crumb-home { width: 42px; height: 42px; } .category-page-skeleton__crumb { width: 140px; } .category-page-skeleton__crumb--short { width: 110px; } .category-page-skeleton__crumb-dot { width: 8px; height: 8px; background: #dfd2c2; } .category-page-skeleton__hero { display: flex; flex-direction: column; align-items: center; gap: 14px; } .category-page-skeleton__hero-title { width: min(360px, 60vw); } .category-page-skeleton__hero-copy { width: min(620px, 82vw); } .category-page-skeleton__hero-copy--short { width: min(460px, 66vw); } .category-page-skeleton__subnav { display: flex; flex-direction: column; align-items: center; gap: 30px; } .category-page-skeleton__subnav-grid { width: 100%; max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 20px; } .category-page-skeleton__subnav-card { display: flex; flex-direction: column; gap: 10px; } .category-page-skeleton__subnav-media { width: 100%; aspect-ratio: 6 / 7; border-radius: 20px; } .category-page-skeleton__subnav-label { width: 78%; margin: 0 auto; } .category-page-skeleton__subnav-button { width: 220px; } .category-page-skeleton__meta { display: flex; justify-content: flex-end; } .category-page-skeleton__meta-row { display: flex; align-items: center; gap: 10px; } .category-page-skeleton__meta-text { width: 182px; } .category-page-skeleton__meta-dot { width: 22px; height: 22px; } .category-page-skeleton__filters { display: flex; flex-direction: column; gap: 10px; } .category-page-skeleton__filter-bar { display: flex; align-items: center; gap: 10px; } .category-page-skeleton__filter-main { width: 120px; flex: 0 0 auto; } .category-page-skeleton__filter-chip { width: 168px; flex: 0 0 auto; } .category-page-skeleton__filter-spacer { flex: 1 1 auto; } .category-page-skeleton__filter-sort { width: 152px; flex: 0 0 auto; } .category-page-skeleton__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; } .category-page-skeleton__card { display: flex; flex-direction: column; gap: 14px; } .category-page-skeleton__card-media { width: 100%; aspect-ratio: 0.82; border-radius: 22px; } .category-page-skeleton__card-title { width: 88%; } .category-page-skeleton__card-title--short { width: 62%; } .category-page-skeleton__card-row { display: flex; gap: 10px; } .category-page-skeleton__card-pill { flex: 0 0 32%; } .category-page-skeleton__footer { display: flex; flex-direction: column; gap: 24px; } .category-page-skeleton__footer-bar { width: 100%; height: 120px; border-radius: 28px; } .category-page-skeleton__footer-grid { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 30px; } .category-page-skeleton__footer-column { display: flex; flex-direction: column; gap: 16px; } .category-page-skeleton__footer-logo { width: 170px; } .category-page-skeleton__footer-button { width: 220px; } .category-page-skeleton__footer-heading { width: 110px; } .category-page-skeleton__footer-link { width: 80%; } .category-page-skeleton__footer-link--short { width: 58%; } .category-breadcrumbs { margin-top: 24px; display: flex; justify-content: center; } .category-breadcrumbs--header { margin-top: -6px; } .category-breadcrumbs[hidden] { display: none !important; } .category-page-skeleton__breadcrumbs[hidden] { display: none !important; } .category-breadcrumbs--header .crumbs { width: 100%; } .category-breadcrumbs--header .crumbs__track { max-width: 100%; } .category-hero { margin-top: 0; text-align: center; } .category-breadcrumbs--header:not([hidden]) + .category-hero { margin-top: 10px; } .category-hero__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 32px; font-weight: 600; line-height: 1.2; } .category-hero__description { margin: 10px auto 0; max-width: 760px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 14px; font-weight: 500; line-height: 1.5; } .category-hero__description[hidden] { display: none !important; } .category-leaf-promo { margin-top: 24px; display: flex; justify-content: center; } .category-leaf-promo[hidden] { display: none !important; } .category-leaf-promo__shell { width: min(984px, 100%); height: 255px; box-sizing: border-box; padding: 20px 5px 5px 20px; border: 1px solid var(--color-line); border-radius: 30px; background: var(--color-page-bg); display: grid; align-items: start; grid-template-columns: minmax(0, 402px) minmax(0, 1fr); gap: 40px; overflow: hidden; } .category-leaf-promo__copy { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 25px; } .category-leaf-promo__meta { display: flex; align-items: center; gap: 10px; min-width: 0; } .category-leaf-promo__chip { min-width: 120px; width: fit-content; max-width: 210px; min-height: 38px; box-sizing: border-box; padding: 0 18px; border: 1px solid var(--category-leaf-promo-chip-border, #f1641e); border-radius: 999px; background: var(--category-leaf-promo-chip-bg, #ffdec7); color: var(--category-leaf-promo-chip-color, #7a2c11); font-family: var(--font-heading); font-size: 11px; font-weight: 700; line-height: 1.05; letter-spacing: 0.72px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .category-leaf-promo__kicker { min-width: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 1.2px; text-transform: uppercase; overflow-wrap: anywhere; } .category-leaf-promo__text { margin: 0; max-width: 402px; color: var(--color-ink); font-family: var(--font-heading); font-size: 16px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; } .category-leaf-promo__media { position: relative; height: 245px; margin-top: -15px; border-radius: 27px; background: #6f6b7c; overflow: hidden; } .category-leaf-promo__media-surface { position: absolute; inset: 0; background: radial-gradient(circle at 70% 24%, rgba(255, 249, 241, 0.34) 0, rgba(255, 249, 241, 0) 34%), radial-gradient(circle at 24% 78%, rgba(241, 100, 30, 0.22) 0, rgba(241, 100, 30, 0) 28%), var(--category-leaf-promo-slide-bg, linear-gradient(135deg, #6f6b7c 0%, #9b8f87 100%)); } .category-leaf-promo__video, .category-leaf-promo__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .category-leaf-promo__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(230, 236, 243, 0.7); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(255, 249, 241, 0.22); } .category-leaf-promo__play::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; border: 2px solid rgba(255, 249, 241, 0.72); } .category-leaf-promo__play-triangle { width: 0; height: 0; margin-left: 5px; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 20px solid rgba(255, 249, 241, 0.9); position: relative; z-index: 1; } .category-leaf-promo__carousel, .category-leaf-promo__slide { position: absolute; inset: 0; } .category-leaf-promo__slide { opacity: 0; transition: opacity 0.36s ease; } .category-leaf-promo__slide.is-active { opacity: 1; } .category-leaf-promo__dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 8px; border-radius: 999px; background: rgba(35, 32, 48, 0.22); } .category-leaf-promo__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 249, 241, 0.56); cursor: pointer; } .category-leaf-promo__dot.is-active { background: var(--color-cream); } .category-leaf-promo__dot:focus-visible { outline: 2px solid rgba(255, 249, 241, 0.86); outline-offset: 2px; } .category-smart-summary { margin-top: 32px; margin-bottom: 8px; display: flex; justify-content: center; text-align: center; } .category-smart-summary[hidden] { display: none !important; } .category-smart-summary__inner { max-width: 760px; } .category-smart-summary__heading { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px; margin: 0 0 8px; color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 500; } .category-smart-summary__heading strong { font-weight: 750; } .category-smart-summary__heading-sub { color: rgba(35, 32, 48, 0.7); font-weight: 500; } .category-smart-summary__sparkle { color: #b58a3c; font-size: 16px; line-height: 1; } .category-smart-summary__text { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 16px; font-weight: 500; line-height: 1.55; } .market-related-chips { margin-top: 34px; padding-top: 6px; color: var(--color-ink); } .market-related-chips[hidden] { display: none !important; } .market-related-chips__title { margin: 0 0 16px; font-family: var(--font-heading); font-size: 18px; font-weight: 750; line-height: 1.25; letter-spacing: 0; } .market-related-chips__row { display: flex; flex-wrap: wrap; gap: 10px; } .market-related-chips__pill { position: relative; isolation: isolate; min-height: 48px; padding: 0 22px 0 24px; border-radius: 999px; background: transparent; color: var(--color-ink); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 17px; font-weight: 750; line-height: 1; text-decoration: none; } .market-related-chips__pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: #eee5da; transition: background-color 0.16s ease, transform 0.18s ease; } .market-related-chips__pill:hover::before, .market-related-chips__pill:focus-visible::before { background: #E1D1BC; transform: scale(var(--hover-grow-scale)); } .market-related-chips__pill:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.38); outline-offset: 3px; } .market-related-chips__pill:active::before { transform: scale(0.99); } .market-related-chips__pill img { width: 22px; height: 13px; object-fit: contain; } .category-related-carousel { margin-top: 40px; margin-bottom: 12px; } .category-related-carousel[hidden] { display: none !important; } .category-related-carousel__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .category-related-carousel__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 20px; font-weight: 750; line-height: 1.2; } .category-related-carousel__nav { display: flex; gap: 8px; } .category-related-carousel__arrow { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(35, 32, 48, 0.2); background: var(--color-cream); color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease; } .category-related-carousel__arrow img { width: 22px; height: 14px; display: block; } .category-related-carousel__arrow:hover { background: #f4ece3; border-color: rgba(35, 32, 48, 0.35); } .category-related-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; } .category-related-carousel__track::-webkit-scrollbar { display: none; } .category-related-carousel__card { display: flex; align-items: stretch; min-height: 156px; border-radius: 16px; background: var(--color-cream); text-decoration: none; color: var(--color-ink); overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(35, 32, 48, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .category-related-carousel__card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(35, 32, 48, 0.12); border-color: rgba(35, 32, 48, 0.16); } .category-related-carousel__card--accent-0 .category-related-carousel__media { background: linear-gradient(135deg, #ecdcc8 0%, #d4b893 100%); } .category-related-carousel__card--accent-1 .category-related-carousel__media { background: linear-gradient(135deg, #f7d8d2 0%, #e6a9a3 100%); } .category-related-carousel__card--accent-2 .category-related-carousel__media { background: linear-gradient(135deg, #d8e0d0 0%, #a9bd9b 100%); } .category-related-carousel__card--accent-3 .category-related-carousel__media { background: linear-gradient(135deg, #f3e3bf 0%, #d8b876 100%); } .category-related-carousel__media { flex: 0 0 124px; position: relative; background: #ddd; } .category-related-carousel__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, rgba(255, 249, 241, 0.45), transparent 60%); pointer-events: none; } .category-related-carousel__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 22px; gap: 12px; } .category-related-carousel__label { font-family: var(--font-heading); font-size: 19px; font-weight: 750; line-height: 1.22; color: var(--color-ink); letter-spacing: -0.1px; } .category-related-carousel__cta { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--color-ink); text-transform: uppercase; letter-spacing: 0.4px; display: inline-flex; align-items: center; gap: 6px; } .category-related-carousel__card:hover .category-related-carousel__cta { color: #3f6a60; } .category-related-carousel__cta img { width: 17px; height: 10px; flex: 0 0 auto; transition: transform 0.18s ease; } .category-related-carousel__card:hover .category-related-carousel__cta img { transform: translateX(4px); } .category-review-spotlight { margin-top: 40px; } .category-review-spotlight[hidden] { display: none !important; } .category-review-spotlight__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .category-review-spotlight__heading { min-width: 0; } .category-review-spotlight__nav { display: flex; gap: 8px; flex: none; } .category-review-spotlight__arrow { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(35, 32, 48, 0.2); background: var(--color-cream); color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease; } .category-review-spotlight__arrow img { width: 22px; height: 14px; display: block; } .category-review-spotlight__arrow:hover { background: #f4ece3; border-color: rgba(35, 32, 48, 0.35); } .category-review-spotlight__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 20px; font-weight: 750; line-height: 1.2; } .category-review-spotlight__subtitle { margin: 6px 0 0; color: rgba(35, 32, 48, 0.7); font-family: var(--font-heading); font-size: 13px; font-weight: 500; line-height: 1.5; max-width: 720px; } .category-review-spotlight__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; } .category-review-spotlight__track::-webkit-scrollbar { display: none; } .category-review-spotlight__track > * { scroll-snap-align: start; } .category-review-spotlight__card { border: 1px solid rgba(35, 32, 48, 0.12); border-radius: 14px; padding: 18px; background: var(--color-cream); display: flex; flex-direction: column; gap: 10px; min-width: 0; } .category-review-spotlight__meta { display: flex; align-items: center; gap: 8px; } .category-review-spotlight__avatar { width: 28px; height: 28px; border-radius: 999px; background: #c9bfb1; background-position: center; background-size: cover; color: var(--color-cream); display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-heading); font-size: 12px; font-weight: 700; line-height: 1; } .category-review-spotlight__avatar.jp-profile-avatar-art { background: transparent !important; overflow: visible; } .category-review-spotlight__avatar.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 10px; } .category-review-spotlight__name { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--color-ink); } .category-review-spotlight__stars { margin-left: auto; color: var(--color-ink); letter-spacing: 1px; font-size: 13px; } .category-review-spotlight__quote { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 500; line-height: 1.5; } .category-review-spotlight__product { display: block; margin: 0; font-family: var(--font-heading); font-size: 13px; font-weight: 500; color: rgba(35, 32, 48, 0.62); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 760px) { .category-smart-summary { margin-top: 26px; padding-inline: 4px; } .category-smart-summary__text { font-size: 15px; } .category-related-carousel { margin-top: 28px; } .category-related-carousel__title { font-size: 18px; } .category-related-carousel__nav { display: none; } .category-related-carousel__track { grid-auto-columns: minmax(220px, 80%); gap: 12px; } .category-related-carousel__card { min-height: 110px; } .category-related-carousel__media { flex-basis: 90px; } .category-related-carousel__body { padding: 14px 16px; gap: 4px; } .category-related-carousel__label { font-size: 16px; } .category-review-spotlight { margin-top: 36px; } .category-review-spotlight__title { font-size: 18px; } .category-review-spotlight__track { grid-template-columns: 1fr; } } @media (min-width: 761px) and (max-width: 1100px) { .category-review-spotlight__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .category-subnav { margin-top: 15px; display: flex; flex-direction: column; align-items: center; gap: 30px; } .category-page.is-category-discovery-page .category-subnav { display: none !important; } .category-subnav__grid { width: 100%; max-width: 1180px; margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 24px 20px; transition: height 0.46s cubic-bezier(0.22, 1, 0.36, 1); overflow: visible; } .category-subnav__item--extra.is-hidden { display: none; } .category-subnav__item { width: calc((100% - 100px) / 6); min-width: 0; max-width: calc((100% - 100px) / 6); cursor: pointer; display: block; color: inherit; text-decoration: none; } .category-subnav__media { display: block; position: relative; width: 100%; aspect-ratio: 6 / 7; border-radius: 20px; background: radial-gradient(circle at 50% 22%, rgba(255, 249, 241, 0.7) 0, rgba(255, 249, 241, 0) 34%), linear-gradient(180deg, rgba(255, 249, 241, 0.72) 0%, var(--category-subnav-tint, #E7E2D5) 100%); box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.06); overflow: hidden; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .category-subnav__image { display: block; width: 100%; height: 100%; object-fit: cover; } .category-subnav__name { display: block; margin-top: 10px; width: 100%; padding-inline: 8px; box-sizing: border-box; text-align: center; color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.2s ease, color 0.2s ease; } .category-subnav__item:hover .category-subnav__media { background: #d4dceb; box-shadow: 0 0 4px rgba(35, 32, 48, 0.28); transform: scale(1.01); } .category-subnav__item:hover .category-subnav__name { text-decoration-color: var(--color-ink); text-decoration-thickness: 2px; } .category-subnav__item:focus-visible { outline: none; } .category-subnav__item:focus-visible .category-subnav__media, .category-subnav__item.is-active .category-subnav__media { background: #dbe6f3; box-shadow: 0 0 0 2px rgba(63, 106, 96, 0.22), 0 0 4px rgba(35, 32, 48, 0.25); } .category-subnav__item:focus-visible .category-subnav__name, .category-subnav__item.is-active .category-subnav__name { text-decoration-color: var(--color-ink); } .category-subnav__more { border: 0; border-radius: 999px; background: var(--sort-control-bg); color: var(--color-ink); font-family: var(--font-heading); font-size: 16px; font-weight: 700; padding: 15px 52px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .category-subnav__more[hidden] { display: none; } .category-subnav__more:hover { background: var(--sort-control-bg-hover); } .category-subnav.category-subnav--without-more + .cat-filters-meta { margin-top: 25px; } .quick-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; margin-bottom: 6px; align-items: center; } .quick-filters[hidden] { display: none !important; } .quick-filters__pill { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; position: relative; overflow: visible; isolation: isolate; transition: color 0.16s ease; } .quick-filters__pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #eee5da; transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease; z-index: 0; will-change: transform; } .quick-filters__pill:hover { background: transparent; } .quick-filters__pill:hover::before { transform: scale(var(--hover-grow-scale)); } .quick-filters__pill:focus-within::before { transform: scale(var(--hover-grow-scale)); } .quick-filters__pill:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.45); outline-offset: 2px; } .quick-filters__pill.is-active { color: #f8f1eb; gap: 4px; padding: 0 4px 0 14px; cursor: default; } .quick-filters__pill.is-active::before { background: var(--color-ink); } .quick-filters__pill.is-active:hover { background: transparent; } .quick-filters__check { display: none; } .quick-filters__check::after { content: none; } .quick-filters__pill-main { min-height: 42px; padding: 0; border: 0; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; font: inherit; line-height: 1; cursor: pointer; position: relative; z-index: 1; } .quick-filters__pill-main:focus-visible { outline: 2px solid rgba(248, 241, 235, 0.45); outline-offset: 2px; border-radius: 999px; } .quick-filters__remove { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; padding: 0; border: 0; border-radius: 999px; background: transparent; font-size: 0; font-weight: 700; line-height: 1; margin: 4px 0; opacity: 1; cursor: pointer; position: relative; z-index: 1; transition: background-color 0.18s ease; } .quick-filters__remove:hover, .quick-filters__remove:focus-visible { background: rgba(248, 241, 235, 0.12); } .quick-filters__remove:focus-visible { outline: 2px solid rgba(248, 241, 235, 0.45); outline-offset: 2px; } .quick-filters__remove img { width: 12px; height: 12px; display: block; max-width: none; } .quick-filters__label { white-space: nowrap; position: relative; z-index: 1; } .category-page.is-category-discovery-page .cat-filters__left { display: none; } .category-page.is-category-discovery-page .cat-filters__applied-rail { padding-left: 0; } .category-page.is-category-discovery-page .cat-filters__applied .quick-filters__pill { flex: 0 0 auto; scroll-snap-align: start; } @media (max-width: 760px) { .quick-filters { gap: 16px; min-height: 58px; margin-top: 10px; margin-bottom: 4px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scrollbar-width: none; padding-top: 8px; padding-bottom: 10px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; } .category-page.is-category-discovery-page .quick-filters { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 16px; padding-right: 16px; box-sizing: border-box; } .category-page.is-category-discovery-page .cat-filters__applied-rail { width: 100vw; max-width: none; flex-basis: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .category-page.is-category-discovery-page .cat-filters__applied { padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; box-sizing: border-box; } .quick-filters::-webkit-scrollbar { display: none; } .quick-filters__pill { flex: none; min-height: 44px; padding: 0 16px; font-size: 14px; scroll-snap-align: start; } .quick-filters__pill.is-active { padding: 0 0 0 16px; } .quick-filters__pill-main { min-height: 44px; } .quick-filters__remove { width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; margin: 0; } .category-related-carousel__track { scroll-padding-inline: 16px; overscroll-behavior-inline: contain; } } .category-breadcrumbs--footer { margin-top: 56px; justify-content: flex-start; } .category-breadcrumbs--footer .crumbs { margin-inline: 0; justify-content: flex-start; } .category-related-links { margin-top: 12px; margin-bottom: 36px; padding-top: 16px; border-top: 1px solid rgba(35, 32, 48, 0.1); color: var(--color-ink); } .category-related-links[hidden] { display: none !important; } .category-related-links__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 12px; } .category-related-links__copy { max-width: 720px; } .category-related-links__title { margin: 0; font-family: var(--font-heading); font-size: 18px; font-weight: 750; line-height: 1.25; letter-spacing: 0; } .category-related-links__text { max-width: 680px; margin: 4px 0 0; color: rgba(35, 32, 48, 0.64); font-family: var(--font-heading); font-size: 12px; font-weight: 500; line-height: 1.45; } .category-related-links__grid, .category-related-links__extras-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .category-related-links__extras-wrapper { display: grid; grid-template-rows: 0fr; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: grid-template-rows 0.5s cubic-bezier(0.18, 1, 0.2, 1), max-height 0.5s cubic-bezier(0.18, 1, 0.2, 1), margin-top 0.5s cubic-bezier(0.18, 1, 0.2, 1), opacity 0.32s ease; will-change: grid-template-rows, max-height, opacity; } .category-related-links__extras-wrapper > .category-related-links__extras-grid { min-height: 0; } .category-related-links.is-expanded .category-related-links__extras-wrapper { grid-template-rows: 1fr; max-height: 1200px; margin-top: 12px; opacity: 1; } .category-related-links__group-title { margin: 0 0 5px; color: var(--color-ink); font-family: var(--font-heading); font-size: 13px; font-weight: 750; line-height: 1.25; letter-spacing: 0; } .category-related-links__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .category-related-links__item { min-width: 0; } .category-related-links__link { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: 44px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-heading); font-size: 13px; font-weight: 750; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: color 0.16s ease; } .category-related-links__link-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-olive-pill); box-shadow: none; transform: scale(1); transform-origin: center; transition: transform 0.18s ease; will-change: transform; } .category-related-links__link-label { position: relative; z-index: 1; } .category-related-links__link:hover, .category-related-links__link:focus-visible { transform: none; } .category-related-links__link:hover .category-related-links__link-bg, .category-related-links__link:focus-visible .category-related-links__link-bg { transform: scale(var(--hover-grow-scale)); } .category-related-links__link:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.38); outline-offset: 3px; border-radius: 999px; } .category-related-links__toggle { min-width: 0; min-height: 0; margin: 12px auto 0; padding: 15px 52px; border: 0; border-radius: 999px; background: #e1d1bc; color: var(--color-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .category-related-links__toggle:hover, .category-related-links__toggle:focus-visible { background: #ccb89f; } .category-related-links__toggle:active { transform: none; } .category-seo-summary { --category-seo-summary-height: 360px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(35, 32, 48, 0.1); color: var(--color-ink); } .category-seo-summary[hidden] { display: none !important; } .category-seo-summary__panel { position: relative; min-height: 250px; box-sizing: border-box; padding: 28px 36px 58px 133px; border: 0; border-radius: 22px; background: var(--color-page-bg); overflow: hidden; transition: min-height 0.48s cubic-bezier(0.18, 1, 0.2, 1), padding 0.48s cubic-bezier(0.18, 1, 0.2, 1); } .category-seo-summary.is-collapsed .category-seo-summary__panel { min-height: 178px; padding-bottom: 50px; } .category-seo-summary__media { position: absolute; left: 23px; top: 23px; width: 76px; height: 76px; border-radius: 999px; background: #7d6d6d url("/assets/homepage/editorpix/universal-category-media/01-default-gift-box.webp") center / cover no-repeat; } .category-seo-summary__body { position: relative; max-height: var(--category-seo-summary-height); opacity: 1; overflow: hidden; transition: max-height 0.52s cubic-bezier(0.18, 1, 0.2, 1), opacity 0.28s ease; will-change: max-height, opacity; } .category-seo-summary.is-collapsed .category-seo-summary__body { max-height: 104px; opacity: 1; } .category-seo-summary.is-collapsed .category-seo-summary__body::after { content: ""; position: absolute; inset: auto 0 0 0; height: 72px; pointer-events: none; background: linear-gradient( to bottom, rgba(248, 241, 235, 0) 0%, rgba(248, 241, 235, 0.65) 45%, rgba(248, 241, 235, 0.92) 75%, var(--color-page-bg) 100% ); } .category-seo-summary__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 21px; font-weight: 700; line-height: 1.3; } .category-seo-summary__text { max-width: 1040px; margin: 10px 0 18px; color: var(--color-ink); font-family: var(--font-heading); font-size: 15px; font-weight: 400; line-height: 1.86; } .category-seo-summary__list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .category-seo-summary__item { color: var(--color-ink); font-family: var(--font-heading); font-size: 15px; font-weight: 400; line-height: 1.45; } .category-seo-summary__item::before { content: "•"; margin-right: 7px; font-weight: 700; } .category-seo-summary__item strong { font-weight: 700; } .category-seo-summary__note { margin: 20px 0 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 15px; font-weight: 400; line-height: 1.86; } .category-seo-summary__toggle { min-width: 172px; min-height: 50px; margin: -26px auto 0; padding: 15px 50px; border: 0; border-radius: 999px; background: #e1d1bc; color: var(--color-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1; position: relative; z-index: 1; transition: background-color 0.18s ease, transform 0.18s ease; } .category-seo-summary__toggle:hover, .category-seo-summary__toggle:focus-visible { background: #d8c4aa; outline: none; } .category-seo-summary__toggle:active { transform: translateY(1px); } .category-knowledge { margin-top: 52px; padding-top: 30px; border-top: 1px solid rgba(35, 32, 48, 0.12); color: var(--color-ink); text-align: center; } .category-knowledge[hidden] { display: none !important; } .category-knowledge__heading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 22px; text-align: center; } .category-knowledge__icon { width: 38px; height: 38px; border: 1px solid rgba(35, 32, 48, 0.16); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #eee5da; } .category-knowledge__icon img { width: 20px; height: 20px; display: block; } .category-knowledge__title { margin: 0; font-family: var(--font-heading); font-size: 26px; font-weight: 700; line-height: 1.2; } .category-knowledge__intro { max-width: 720px; margin: 0; color: rgba(35, 32, 48, 0.7); font-family: var(--font-heading); font-size: 14px; font-weight: 500; line-height: 1.55; } .category-knowledge__snapshot { max-width: 980px; margin: 6px auto 26px; padding: 20px 0; border-top: 1px solid rgba(35, 32, 48, 0.1); border-bottom: 1px solid rgba(35, 32, 48, 0.1); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .category-knowledge__snapshot-item { min-width: 0; padding: 0 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .category-knowledge__snapshot-item + .category-knowledge__snapshot-item { border-left: 1px solid rgba(35, 32, 48, 0.1); } .category-knowledge__snapshot-value { color: var(--color-forest); font-family: var(--font-heading); font-size: 24px; font-weight: 800; line-height: 1; } .category-knowledge__snapshot-label { color: rgba(35, 32, 48, 0.64); font-family: var(--font-heading); font-size: 13px; font-weight: 650; line-height: 1.25; } .category-knowledge__faq { max-width: 980px; margin: 10px auto 0; display: flex; flex-direction: column; gap: 8px; text-align: left; } .category-knowledge__item { border-radius: 20px; background: transparent; box-shadow: 0 1px 0 rgba(35, 32, 48, 0.1); overflow: hidden; transition: background-color 0.18s ease, box-shadow 0.18s ease; } .category-knowledge__item:hover { background: #fdf8f4; box-shadow: none; } .category-knowledge__question { min-height: 64px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-family: var(--font-heading); font-size: 17px; font-weight: 650; line-height: 1.35; } .category-knowledge__question::-webkit-details-marker { display: none; } .category-knowledge__question:hover, .category-knowledge__question:focus-visible { background: transparent; } .category-knowledge__question:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(35, 32, 48, 0.18); border-radius: 20px; } .category-knowledge__chevron { width: 14px; height: 14px; flex: 0 0 14px; display: block; transform: rotate(0deg); transform-origin: center; transition: transform 1.12s cubic-bezier(0.18, 1, 0.2, 1); will-change: transform; } .category-knowledge__item.is-open .category-knowledge__chevron { transform: rotate(180deg); } .category-knowledge__item[open] .category-knowledge__chevron { transform: rotate(180deg); } .category-knowledge__item.is-closing .category-knowledge__chevron { transform: rotate(0deg); } .category-knowledge__answer { max-width: 900px; max-height: 0; overflow: hidden; opacity: 0; padding: 0 18px; color: rgba(35, 32, 48, 0.78); font-family: var(--font-heading); font-size: 15px; font-weight: 500; line-height: 1.65; transition: max-height 0.42s cubic-bezier(0.18, 1, 0.2, 1), opacity 0.28s ease; will-change: max-height, opacity; } .category-knowledge__item.is-open .category-knowledge__answer { max-height: var(--category-knowledge-answer-height, 4000px); opacity: 1; } .category-knowledge__item[open] .category-knowledge__answer { max-height: var(--category-knowledge-answer-height, 4000px); opacity: 1; } .category-knowledge__item.is-closing .category-knowledge__answer { max-height: 0; opacity: 0; } .category-knowledge__answer-inner { padding-bottom: 22px; } @media (min-width: 981px) { body.page[data-category-page-live="1"].is-ai-panel-open { overflow-x: clip; } body.page[data-category-page-live="1"].is-ai-panel-open .category-page > .container { margin-left: auto; margin-right: calc(var(--lume-panel-reserve, 360px) + 15px - clamp(0px, calc(2160px - 100vw), var(--lume-panel-reserve, 360px))); } body.page[data-category-page-live="1"] .cat-filters { --category-filter-bleed: calc((100vw - min(var(--jp-page-shell-max, 1372px), calc(100vw - 68px))) / 2); position: sticky; top: var(--category-expanded-header-height, 114px); z-index: 130; background: var(--color-page-bg); padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; opacity: 1; transition: top 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease; } body.page[data-category-page-live="1"] .cat-filters.is-sort-popover-open, body.page[data-category-page-live="1"] .cat-filters.is-applied-popover-open { z-index: 5402; } body.page[data-category-page-live="1"] .cat-filters::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--category-filter-bleed)); width: 100vw; background: var(--color-page-bg); z-index: -1; } body.page[data-category-page-live="1"] .cat-filters::after { content: ""; position: absolute; left: calc(-1 * var(--category-filter-bleed)); bottom: 0; width: 100vw; height: 1px; background: #d9d5d0; box-shadow: 0 1px 2px rgba(35, 32, 48, 0.04), 0 6px 16px rgba(35, 32, 48, 0.07); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 1; } body.page[data-category-page-live="1"].is-category-header-condensed .cat-filters { top: var(--category-condensed-header-height, 73px); } body.page[data-category-page-live="1"].is-category-filters-docked .cat-filters::after { opacity: 1; } body.page[data-category-page-live="1"].is-category-filters-docked .fixed-header { box-shadow: none; } body.page[data-category-page-live="1"].is-category-filter-release .cat-filters { opacity: 0; pointer-events: none; } body.page[data-category-page-live="1"].is-category-filter-release .cat-filters::after { opacity: 0; } body.page[data-category-page-live="1"].is-category-header-preparing .cat-filters { transition: none !important; opacity: 0; } } @media (min-width: 900px) and (max-width: 980px) { body.page[data-category-page-live="1"] .cat-filters { --category-filter-bleed: calc((100vw - min(var(--jp-page-shell-max, 1372px), calc(100vw - 68px))) / 2); position: sticky; top: var(--category-expanded-header-height, 73px); z-index: 130; background: var(--color-page-bg); padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; opacity: 1; transition: top 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease; } body.page[data-category-page-live="1"] .cat-filters.is-sort-popover-open, body.page[data-category-page-live="1"] .cat-filters.is-applied-popover-open { z-index: 5402; } body.page[data-category-page-live="1"] .cat-filters::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--category-filter-bleed)); width: 100vw; background: var(--color-page-bg); z-index: -1; } body.page[data-category-page-live="1"] .cat-filters::after { content: ""; position: absolute; left: calc(-1 * var(--category-filter-bleed)); bottom: 0; width: 100vw; height: 1px; background: color-mix(in srgb, var(--color-ink) 14%, var(--color-page-bg)); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent), 0 6px 16px color-mix(in srgb, var(--color-ink) 7%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 1; } body.page[data-category-page-live="1"].is-category-header-condensed .cat-filters { top: var(--category-condensed-header-height, 73px); } body.page[data-category-page-live="1"].is-category-filters-docked .cat-filters::after { opacity: 1; } body.page[data-category-page-live="1"].is-category-filters-docked .fixed-header { box-shadow: none; } body.page[data-category-page-live="1"].is-category-filter-release .cat-filters { opacity: 0; pointer-events: none; } body.page[data-category-page-live="1"].is-category-filter-release .cat-filters::after { opacity: 0; } body.page[data-category-page-live="1"].is-category-header-preparing .cat-filters { transition: none !important; opacity: 0; } } @media (max-width: 760px) { html.is-category-page-live, body.page[data-category-page-live="1"] { overflow-x: clip; } body.page[data-category-page-live="1"] { --cat-filters-mobile-header-h: var(--category-current-header-height, 68px); --cat-filters-mobile-header-offset: var(--cat-filters-mobile-header-h); --cat-mobile-header-slide-duration: 0.42s; --cat-mobile-header-slide-ease: cubic-bezier(0.2, 0.82, 0.22, 1); } body.page[data-category-page-live="1"] .fixed-header { transition: top var(--cat-mobile-header-slide-duration) var(--cat-mobile-header-slide-ease), height 0.34s cubic-bezier(0.18, 0.82, 0.2, 1), box-shadow 0.16s ease; will-change: top; } body.page[data-category-page-live="1"].is-category-mobile-header-hidden .fixed-header { top: calc(-1 * var(--cat-filters-mobile-header-h, 68px)) !important; } body.page[data-category-page-live="1"].is-category-mobile-header-hidden { --cat-filters-mobile-header-offset: 0px; } body.page[data-category-page-live="1"] .fixed-header::after { transition: opacity 0.16s ease; } body.page[data-category-page-live="1"].is-category-mobile-filters-docked .fixed-header { box-shadow: none !important; } body.page[data-category-page-live="1"].is-category-mobile-filters-docked .fixed-header::after { opacity: 0; } body.page[data-category-page-live="1"] .cat-filters-meta { position: relative; z-index: 2; width: calc(100% - 32px); margin: 0 auto 8px; padding: 8px 0 6px; display: flex; justify-content: flex-end; box-sizing: border-box; } body.page[data-category-page-live="1"] .cat-filters__sponsored { width: auto; max-width: 100%; justify-content: flex-end; } body.page[data-category-page-live="1"] .cat-filters { position: sticky; top: var(--cat-filters-mobile-header-offset); z-index: 132; padding-block: 6px 8px; background: transparent; isolation: isolate; transition: top var(--cat-mobile-header-slide-duration) var(--cat-mobile-header-slide-ease); } body.page[data-category-page-live="1"] .cat-filters::before, body.page[data-category-page-live="1"] .cat-filters::after { content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; } body.page[data-category-page-live="1"] .cat-filters::before { inset-block: 0; background: var(--color-page-bg); z-index: -1; } body.page[data-category-page-live="1"] .cat-filters::after { bottom: 0; height: 1px; background: color-mix(in srgb, var(--color-ink) 14%, var(--color-page-bg)); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent), 0 6px 16px color-mix(in srgb, var(--color-ink) 7%, transparent); opacity: 0; transition: opacity 0.18s ease; z-index: 1; } body.page[data-category-page-live="1"].is-category-mobile-filters-docked .cat-filters::after { opacity: 1; } body.page[data-category-page-live="1"].is-category-mobile-filters-docked .cat-filters { padding-top: 8px; } body.page[data-category-page-live="1"].is-category-mobile-filters-docked .cat-filters__applied { padding-top: 0; } body.page[data-category-page-live="1"].is-page-scrolled .cat-filters { box-shadow: none; } } .category-recently-viewed { margin-top: 46px; } .category-recently-viewed + .category-recently-viewed { margin-top: 14px; } .category-recently-viewed__header { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 16px; } .category-recently-viewed__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.6px; min-height: 42px; display: inline-flex; align-items: center; } .category-recently-viewed__grid { margin-top: 15px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 17px; } .category-recently-viewed .personalized-card { --personalized-card-height: 280px; --personalized-card-media-height: 171px; width: auto; min-width: 0; height: var(--personalized-card-height); overflow: visible; } .category-recently-viewed .personalized-card__media { height: var(--personalized-card-media-height); overflow: visible; border-radius: 20px; transition: box-shadow 0.24s ease; } .category-recently-viewed .personalized-card__media-surface { border-radius: 20px; } .category-recently-viewed .personalized-card__badge { top: calc(var(--personalized-card-media-height) - 30px); } .category-recently-viewed .personalized-card__body { top: calc(var(--personalized-card-media-height) + 6px); bottom: 10px; gap: 3px; } .category-recently-viewed .personalized-card__title { display: block; flex-shrink: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; } .category-recently-viewed .personalized-card__price-new { font-size: 17px; } .category-recently-viewed .personalized-card__currency { font-size: 17px; } .category-recently-viewed .personalized-card__price-old { font-size: 13px; } .category-recently-viewed .personalized-card__store-row { display: inline-flex; align-items: center; gap: 0; max-width: 100%; margin-top: 2px; color: var(--color-ink-muted); text-decoration: none; } .category-recently-viewed .personalized-card__store-row > svg, .category-recently-viewed .personalized-card__store-row > img.cat-card__store-icon { width: 22px; height: 22px; display: block; flex: 0 0 22px; object-fit: contain; } .category-recently-viewed .personalized-card__store-notch { width: 8px; height: 12px; display: block; flex: 0 0 8px; margin-left: -2px; margin-right: -3px; background: #eee5da; clip-path: polygon(0 7.14%, 33.7% 33.95%, 61.8% 36.05%, 100% 0, 86.6% 58.6%, 100% 100%, 62.45% 64%, 31.7% 56.7%, 0 92.86%, 20.45% 44.12%); } .category-recently-viewed .personalized-card__store { min-width: 0; max-width: calc(100% - 27px); height: 22px; padding: 4px 8px 5px; display: inline-flex; align-items: center; justify-content: flex-start; background: #eee5da; border-radius: 999px; color: var(--color-ink-muted); font-size: 11px; font-weight: 600; line-height: 1; text-decoration: underline; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .category-recently-viewed .personalized-card[data-product-partner-color]:not([data-product-partner-color=""]) .personalized-card__store-notch, .category-recently-viewed .personalized-card[data-product-partner-color]:not([data-product-partner-color=""]) .personalized-card__store { background: var(--personalized-card-partner-color); } .category-recently-viewed .personalized-card[data-product-partner-color]:not([data-product-partner-color=""]) .personalized-card__store { color: var(--color-cream); text-decoration: none; } .category-recently-viewed .personalized-card[data-product-partner-color]:not([data-product-partner-color=""]) .cat-card__store-icon { background: var(--personalized-card-partner-color); border-radius: 999px; } .category-recently-viewed .personalized-card:hover, .category-recently-viewed .personalized-card:has(:focus-visible), .category-recently-viewed .personalized-card.is-actions-open { box-shadow: none; } .category-recently-viewed .personalized-card:hover .personalized-card__media, .category-recently-viewed .personalized-card:has(:focus-visible) .personalized-card__media, .category-recently-viewed .personalized-card.is-actions-open .personalized-card__media { box-shadow: var(--shadow-card-hover); } .category-recently-viewed .personalized-card__hover-actions { top: 8px; left: 8px; right: 8px; width: auto; max-width: none; height: 30px; gap: 5px; } .category-recently-viewed .personalized-card__hover-board { height: 30px; min-width: 0; max-width: none; flex: 1 1 0; padding: 5px 10px; gap: 6px; } .category-recently-viewed .personalized-card__hover-board-label { font-size: 8px; } .category-recently-viewed .personalized-card__hover-board img { width: 10px; height: 10px; flex-basis: 10px; } .category-recently-viewed .personalized-card__hover-save { height: 30px; min-width: 59px; padding: 5px 10px; } .category-recently-viewed .personalized-card__hover-save-label { font-size: 10px; } .category-recently-viewed .personalized-card__hover-save img { width: 14px; height: 14px; flex-basis: 14px; } .category-empty { grid-column: 1 / -1; width: 100%; min-height: 330px; display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 0.68fr); align-items: center; justify-content: center; gap: clamp(28px, 6vw, 86px); padding: clamp(18px, 3vw, 38px) 0 clamp(8px, 2vw, 18px); text-align: left; } .category-empty__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .category-empty__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: 0; } .category-empty__text { margin: 0; max-width: 460px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 18px; font-weight: 500; line-height: 1.4; } .category-empty__button { min-width: 176px; min-height: 56px; margin-top: 6px; padding: 10px 26px; border: 0; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; transform-origin: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .category-empty__button:hover, .category-empty__button:focus-visible { transform: scale(var(--hover-grow-scale)); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .category-empty__button:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-ink) 22%, transparent); outline-offset: 3px; } .category-empty__button:hover { outline: none; } .category-empty__art { min-width: 0; display: flex; justify-content: center; align-items: center; } .category-empty__art img { display: block; width: min(100%, 430px); height: auto; } @media (max-width: 964px) { .category-page-skeleton__subnav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; } .category-page-skeleton__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .category-page-skeleton__footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-subnav__grid { gap: 22px 16px; } .category-subnav__item { width: calc((100% - 48px) / 4); max-width: calc((100% - 48px) / 4); } .category-leaf-promo__shell { height: auto; min-height: 255px; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; } .category-leaf-promo__copy, .category-leaf-promo__text { max-width: none; } .category-leaf-promo__media { height: 230px; margin-top: 0; } .category-recently-viewed__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .category-related-links__grid, .category-related-links__extras-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .category-related-links.is-expanded .category-related-links__extras-wrapper { margin-top: 12px; } .category-seo-summary__panel { padding-right: 28px; } .category-knowledge__snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); } .category-knowledge__snapshot-item:nth-child(4) { border-left: 0; } } @media (max-width: 760px) { .category-page-skeleton { padding-top: 16px; } .category-page-skeleton__breadcrumbs-row { gap: 8px; } .category-page-skeleton__crumb { width: 104px; } .category-page-skeleton__crumb--short { width: 80px; } .category-page-skeleton__hero-title { width: min(280px, 72vw); } .category-page-skeleton__hero-copy { width: min(460px, 88vw); } .category-page-skeleton__subnav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; } .category-page-skeleton__filter-bar { flex-wrap: wrap; } .category-page-skeleton__filter-main { width: 100%; max-width: 220px; } .category-page-skeleton__filter-chip { flex: 1 1 calc(50% - 5px); min-width: 150px; } .category-page-skeleton__filter-spacer { display: none; } .category-page-skeleton__filter-sort { width: 100%; max-width: 220px; margin-left: auto; } .category-page-skeleton__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .category-page-skeleton__footer-grid { grid-template-columns: 1fr; } .category-breadcrumbs { margin-top: 16px; } .category-breadcrumbs--header { margin-top: 1px; } .category-hero__title { font-size: 26px; } .category-hero__description { max-width: 92%; font-size: 13px; } .category-leaf-promo { margin-top: 18px; } .category-leaf-promo__shell { border-radius: 24px; padding: 14px; } .category-leaf-promo__copy { gap: 16px; } .category-leaf-promo__meta { align-items: flex-start; flex-direction: column; gap: 8px; } .category-leaf-promo__chip { width: auto; max-width: 100%; min-width: 112px; } .category-leaf-promo__kicker { font-size: 11px; letter-spacing: 0.8px; } .category-leaf-promo__text { font-size: 15px; line-height: 1.55; } .category-leaf-promo__media { height: 205px; border-radius: 20px; } .category-subnav__grid { gap: 18px 14px; } .category-subnav__item { width: calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); } .category-page-skeleton__subnav-media, .category-subnav__media { aspect-ratio: 4 / 3; border-radius: 18px; } .category-recently-viewed { margin-top: 40px; } .category-recently-viewed + .category-recently-viewed { margin-top: 14px; } .category-recently-viewed__title { font-size: 24px; } .category-recently-viewed__grid { margin-top: 15px; width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); margin-right: 0; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .category-recently-viewed__grid::-webkit-scrollbar { display: none; } .category-recently-viewed__grid > * { flex: 0 0 min(46vw, 188px); scroll-snap-align: start; } .category-recently-viewed .personalized-card { --personalized-card-width: min(46vw, 188px); --personalized-card-height: calc(var(--personalized-card-width) + 132px); --personalized-card-media-height: var(--personalized-card-width); } .category-recently-viewed .personalized-card__store-row { min-height: 44px; } .category-empty { min-height: 0; grid-template-columns: 1fr; gap: 22px; padding: 24px 0 12px; text-align: center; } .category-empty__copy { align-items: center; } .category-empty__title { max-width: 14ch; font-size: 22px; } .category-empty__text { max-width: 320px; font-size: 15px; } .category-empty__button { min-height: 52px; min-width: 168px; } .category-empty__art img { width: min(100%, 340px); } .category-breadcrumbs--footer { margin-top: 48px; } .category-related-links { margin-top: 12px; margin-bottom: 32px; padding-top: 14px; } .category-related-links__header { margin-bottom: 10px; } .category-related-links__title { font-size: 17px; } .category-related-links__text { max-width: 560px; font-size: 11px; } .category-related-links__group-title { font-size: 12px; } .category-related-links__link { height: 44px; min-height: 44px; padding: 0 16px; font-size: 10px; } .category-seo-summary { margin-top: 40px; } .category-seo-summary__panel { min-height: 0; padding: 22px 24px 58px 112px; } .category-seo-summary__media { width: 70px; height: 70px; } .category-seo-summary__title { font-size: 20px; } .category-seo-summary__text, .category-seo-summary__item, .category-seo-summary__note { font-size: 14px; } .category-knowledge { margin-top: 44px; } .category-knowledge__heading { padding-bottom: 24px; } .category-knowledge__title { font-size: 24px; } .category-knowledge__intro { max-width: 520px; font-size: 13px; } .category-knowledge__question { min-height: 66px; padding: 16px 10px; font-size: 16px; } .category-knowledge__answer { padding: 0 10px; font-size: 14px; } .category-knowledge__answer-inner { padding-bottom: 22px; } } @media (max-width: 620px) { .category-page-skeleton__subnav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } .category-page-skeleton__cards { grid-template-columns: 1fr; } .category-subnav__grid { gap: 14px 12px; } .category-subnav__item { width: calc((100% - 12px) / 2); max-width: calc((100% - 12px) / 2); } .category-page-skeleton__subnav-media, .category-subnav__media { aspect-ratio: 16 / 10; border-radius: 16px; } .category-leaf-promo__media { height: 180px; } .category-leaf-promo__play { width: 54px; height: 54px; } .category-leaf-promo__play-triangle { border-top-width: 11px; border-bottom-width: 11px; border-left-width: 17px; } .category-subnav__more { padding: 14px 28px; } .category-related-links__grid, .category-related-links__extras-grid { grid-template-columns: 1fr; gap: 12px; } .category-related-links.is-expanded .category-related-links__extras-wrapper { margin-top: 12px; } .category-related-links__toggle { width: 100%; max-width: 220px; } .category-seo-summary { margin-top: 40px; padding-top: 22px; } .category-seo-summary__panel { padding: 22px 18px 56px; } .category-seo-summary.is-collapsed .category-seo-summary__panel { min-height: 152px; padding-bottom: 42px; } .category-seo-summary.is-collapsed .category-seo-summary__body { max-height: 88px; } .category-seo-summary__media { position: static; width: 58px; height: 58px; margin-bottom: 16px; transform: none; } .category-seo-summary.is-collapsed .category-seo-summary__media { top: auto; transform: none; } .category-seo-summary__toggle { width: 100%; max-width: 220px; min-height: 46px; padding: 14px 28px; font-size: 15px; } .category-knowledge__snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-knowledge__snapshot-item { padding: 12px 10px; } .category-knowledge__snapshot-item:nth-child(odd) { border-left: 0; } } @media (max-width: 480px) { .category-page-skeleton__crumb-home { width: 34px; height: 34px; } .category-page-skeleton__breadcrumbs-row { justify-content: center; flex-wrap: wrap; } .category-page-skeleton__meta-text { width: 146px; } .category-page-skeleton__filter-chip, .category-page-skeleton__filter-sort, .category-page-skeleton__filter-main { max-width: none; width: 100%; } .category-subnav__grid { gap: 12px 10px; } .category-subnav__item { width: calc((100% - 10px) / 2); max-width: calc((100% - 10px) / 2); } .category-subnav__media { aspect-ratio: 16 / 10; border-radius: 15px; } .category-subnav__name { margin-top: 8px; padding-inline: 2px; font-size: 13px; } .category-leaf-promo__shell { border-radius: 20px; padding: 12px; min-height: 0; } .category-leaf-promo__media { height: 164px; border-radius: 18px; } .category-subnav__more { width: auto; max-width: none; text-align: center; padding: 15px 52px; } .category-recently-viewed__header { gap: 12px; } } @media (max-width: 640px) { .category-subnav { align-items: center; gap: 14px; margin-top: 12px; } .category-subnav__grid { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; overflow: visible; } .category-subnav__item { flex: 0 0 calc((100% - 10px) / 2); width: calc((100% - 10px) / 2); max-width: calc((100% - 10px) / 2); } .category-subnav__media { aspect-ratio: 16 / 10; border-radius: 16px; } .category-subnav__name { margin-top: 8px; padding-inline: 2px; font-size: 13px; line-height: 1.18; } } /* [bundle] /styles/components/categories-directory.css */ .categories-directory-page { background: var(--color-page-bg); color: var(--color-ink); font-family: var(--font-body); margin: 0; } .categories-directory { padding: 0 0 76px; } .categories-directory__inner { width: var(--jp-page-shell-width); max-width: var(--jp-page-shell-max, 1372px); margin-inline: auto; padding-inline: var(--jp-page-shell-inset); box-sizing: border-box; } .categories-directory__hero { padding: 25px 0 36px; text-align: center; } .categories-directory__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: 0; } .categories-directory__section { margin-top: 58px; } .categories-directory__section--primary { margin-top: 20px; } .categories-directory__section--last { margin-bottom: 12px; } .categories-directory__section-title { margin: 0 0 28px; color: var(--color-ink); font-family: var(--font-display); font-size: 29px; font-weight: 600; line-height: 1.18; letter-spacing: 0; } .categories-directory__category-columns { column-count: 4; column-gap: clamp(42px, 6vw, 92px); } .categories-directory__group { display: block; break-inside: avoid; margin: 0 0 34px; padding: 0; } .categories-directory__group h3 { margin: 0 0 12px; font-family: var(--font-body); font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: 0; } .categories-directory__group ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .categories-directory__group li { margin: 0; padding: 0; } .categories-directory__link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px clamp(36px, 6vw, 92px); align-items: start; } .categories-directory a { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .categories-directory a:hover, .categories-directory a:focus-visible { color: var(--color-forest); } .categories-directory a:focus-visible { outline: 3px solid var(--color-forest); outline-offset: 3px; border-radius: var(--radius-xs); } .categories-directory__group li a, .categories-directory__link-grid a { display: inline-block; max-width: 100%; font-size: 16px; font-weight: 650; line-height: 1.28; overflow-wrap: anywhere; } @media (max-width: 1100px) { .categories-directory__category-columns { column-count: 3; } .categories-directory__link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .categories-directory { padding: 0 0 58px; } .categories-directory__inner { width: min(100% - 32px, 1520px); } .categories-directory__hero { padding: 15px 0 24px; } .categories-directory__title { font-size: 26px; } .categories-directory__section { margin-top: 42px; } .categories-directory__section-title { margin-bottom: 22px; font-size: 24px; } .categories-directory__category-columns { column-count: 1; column-gap: 0; } .categories-directory__group { margin-bottom: 32px; } .categories-directory__group ul { gap: 4px; } .categories-directory__link-grid { grid-template-columns: 1fr; gap: 14px; } .categories-directory__group li a, .categories-directory__link-grid a { min-height: 32px; padding-block: 5px; font-size: 15px; line-height: 1.34; } } /* [bundle] /styles/components/category-shop-by-interest.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .category-shop-the-look { margin-top: 28px; margin-bottom: 18px; } .category-shop-look__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .category-shop-look__title { margin: 0; color: #232030; font-family: var(--font-heading); font-size: 28px; font-weight: 600; line-height: 1; } .category-shop-look__subtitle { max-width: 520px; margin: 0; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.45; text-align: right; } .category-shop-look__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .category-shop-look__card { position: relative; min-width: 0; border-radius: 22px; overflow: visible; } .category-shop-look__image-shell { display: block; color: inherit; text-decoration: none; } .category-shop-look__image { display: block; width: 100%; aspect-ratio: 9 / 12; border-radius: 22px; background-color: #eee5da; background-repeat: no-repeat; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.08); } .category-shop-look__caption { display: block; margin-top: 8px; color: #5f5b69; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.35; text-decoration: underline; text-underline-offset: 2px; } .category-shop-look__pin { position: absolute; left: var(--pin-x); top: var(--pin-y); width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; border-radius: 999px; background: rgba(35, 32, 48, 0.42); box-shadow: 0 10px 28px rgba(35, 32, 48, 0.22); cursor: pointer; z-index: 3; } .category-shop-look__pin::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; } .category-shop-look__pin-dot { position: absolute; inset: 7px; border-radius: inherit; background: var(--color-cream); box-shadow: 0 0 0 2px rgba(255, 249, 241, 0.62); } .category-shop-look__pin:hover, .category-shop-look__pin:focus-visible, .category-shop-look__pin.is-active { background: rgba(35, 32, 48, 0.72); } .category-shop-look__pin:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.24); outline-offset: 4px; } .category-shop-look__popover { position: absolute; left: var(--pin-x); top: calc(var(--pin-y) + 28px); width: min(424px, calc(100vw - 44px)); padding: 14px; border: 1px solid rgba(35, 32, 48, 0.18); border-radius: 18px; background: var(--color-cream); box-shadow: 0 22px 56px rgba(35, 32, 48, 0.22); transform: translate(calc(-50% + var(--look-popover-offset-x, 0px)), 0); z-index: 8; } .category-shop-look__popover--left { transform: translate(calc(-20% + var(--look-popover-offset-x, 0px)), 0); } .category-shop-look__popover--right { transform: translate(calc(-80% + var(--look-popover-offset-x, 0px)), 0); } .category-shop-look__popover--above { top: auto; bottom: calc(100% - var(--pin-y) + 28px); } .category-shop-look__popover::before { content: none; } .category-shop-look__popover--left::before { content: none; } .category-shop-look__popover--right::before { content: none; } .category-shop-look__popover-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding-top: 0; } .category-shop-look__popover-products--count-1 { grid-template-columns: minmax(0, 1fr); } .category-shop-look__popover-products--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-shop-look__product { min-width: 0; color: inherit; text-decoration: none; } .category-shop-look__product-media { display: block; width: 100%; aspect-ratio: 1.12; border-radius: 12px; background-size: cover; background-position: center; } .category-shop-look__product-copy { display: block; margin-top: 8px; } .category-shop-look__product-title { display: -webkit-box; min-height: 32px; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 16px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .category-shop-look__product-price { display: block; margin-top: 4px; color: var(--color-forest); font-family: var(--font-body); font-size: 16px; font-weight: 800; line-height: 1; } .category-editorial-strip { margin-top: 36px; } .category-editorial-strip__header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; } .category-editorial-strip__eyebrow { margin: 0 0 6px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .category-editorial-strip__title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1.12; letter-spacing: 0; } .category-editorial-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } .category-editorial-strip--count-1 .category-editorial-strip__grid { grid-template-columns: minmax(260px, 420px); } .category-editorial-strip--count-2 .category-editorial-strip__grid { grid-template-columns: repeat(2, minmax(260px, 390px)); } .category-editorial-strip--count-3 .category-editorial-strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .category-editorial-strip__card { min-width: 0; min-height: 100%; padding: 0; border: 0; border-radius: 22px; background: var(--color-white); color: var(--color-ink); text-decoration: none; display: flex; flex-direction: column; gap: 0; overflow: hidden; box-shadow: none; transition: box-shadow 0.16s ease; } .category-editorial-strip__card-media { display: block; width: 100%; aspect-ratio: 4 / 3; position: relative; overflow: hidden; border-radius: 0; border: 0; background-color: var(--color-page-bg); } .category-editorial-strip__card-media-image { display: block; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1); transition: filter 0.18s ease; } .category-editorial-strip__card-media--empty, .category-editorial-strip__card-media-image--empty { background: linear-gradient(135deg, rgba(63, 106, 96, 0.16), rgba(201, 164, 95, 0.18)), var(--color-page-bg); } .category-editorial-strip__card:hover { background: var(--color-white); outline: none; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .category-editorial-strip__card:hover .category-editorial-strip__card-media-image, .category-editorial-strip__card:focus-visible .category-editorial-strip__card-media-image { filter: saturate(1.04); } .category-editorial-strip__card:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-forest) 38%, transparent); outline-offset: 4px; } .category-editorial-strip__card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; padding: 22px 20px 20px; background: var(--color-white); } .category-editorial-strip__label { display: inline-flex; align-items: center; align-self: flex-start; min-height: 24px; max-width: 100%; padding: 4px 10px 5px; border-radius: 999px; background: var(--journal-kicker-bg, color-mix(in srgb, var(--color-line-dark) 58%, var(--color-white))); color: var(--journal-kicker-color, var(--color-ink)); font-family: var(--font-heading); font-size: 12px; font-weight: 850; letter-spacing: 0; text-transform: none; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .category-editorial-strip__tag-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; } .category-editorial-strip__fresh-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 10px 5px; border-radius: 999px; background: color-mix(in srgb, var(--intent-feedback-warning-soft) 76%, var(--color-white)); color: var(--color-warn); font-family: var(--font-heading); font-size: 12px; font-weight: 900; letter-spacing: 0; line-height: 1; text-transform: none; white-space: nowrap; } .category-editorial-strip__card[data-journal-cat="picks"] { --journal-kicker-bg: color-mix(in srgb, var(--color-forest) 18%, var(--color-white)); --journal-kicker-color: var(--color-forest-dark); } .category-editorial-strip__card[data-journal-cat="makers"] { --journal-kicker-bg: color-mix(in srgb, var(--intent-feedback-alert-soft) 72%, var(--color-white)); --journal-kicker-color: var(--intent-feedback-alert-strong); } .category-editorial-strip__card[data-journal-cat="ideas"] { --journal-kicker-bg: color-mix(in srgb, var(--intent-feedback-warning-soft) 86%, var(--color-white)); --journal-kicker-color: var(--color-warn); } .category-editorial-strip__card[data-journal-cat="guides"] { --journal-kicker-bg: color-mix(in srgb, var(--color-line-dark) 70%, var(--color-white)); --journal-kicker-color: var(--color-ink); } .category-editorial-strip__card[data-journal-cat="trends"] { --journal-kicker-bg: color-mix(in srgb, var(--color-olive-pill) 28%, var(--color-white)); --journal-kicker-color: var(--color-forest-dark); } .category-editorial-strip__card[data-journal-cat="interviews"] { --journal-kicker-bg: color-mix(in srgb, var(--color-ink-soft) 14%, var(--color-white)); --journal-kicker-color: var(--color-ink); } .category-editorial-strip__card-title { color: var(--color-ink); font-family: var(--font-heading); font-size: 18px; font-weight: 850; line-height: 1.18; letter-spacing: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-decoration-line: none; text-decoration-thickness: 1.5px; text-underline-offset: 2px; } .category-editorial-strip__card:hover .category-editorial-strip__card-title, .category-editorial-strip__card:focus-visible .category-editorial-strip__card-title { text-decoration-line: underline; } .category-editorial-strip__card-description { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 15px; font-weight: 500; line-height: 1.35; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .category-editorial-strip__author { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; } .category-editorial-strip__author-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--color-line-dark) 64%, var(--color-white)); color: var(--color-ink); font-family: var(--font-heading); font-size: 13px; font-weight: 850; line-height: 1; } .category-editorial-strip__author-avatar.jp-profile-avatar-art { overflow: hidden; background: transparent; } .category-editorial-strip__author-avatar.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 0.74em; } .category-editorial-strip__author-copy { min-width: 0; overflow: hidden; color: var(--color-ink); font-family: var(--font-heading); font-size: 13px; font-weight: 800; line-height: 1.18; text-overflow: ellipsis; white-space: nowrap; } .category-editorial-strip__card-meta { color: var(--color-ink-muted); font-family: var(--font-heading); font-size: 12px; font-weight: 600; line-height: 1.25; } .category-editorial-strip__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; padding-top: 2px; } .category-editorial-strip__stat { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-page-bg) 82%, var(--color-white)); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 12px; font-weight: 800; line-height: 1; } .category-editorial-strip__stat img { width: 13px; height: 13px; flex: 0 0 13px; } .category-editorial-strip__cta { display: none; } @media (max-width: 900px) { .category-shop-look__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-editorial-strip__grid, .category-editorial-strip--count-3 .category-editorial-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-editorial-strip--count-1 .category-editorial-strip__grid, .category-editorial-strip--count-2 .category-editorial-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-editorial-strip__header { align-items: flex-start; flex-direction: column; } .category-shop-look__header { align-items: flex-start; flex-direction: column; } .category-shop-look__subtitle { text-align: left; } .category-shop-look__image { aspect-ratio: 4 / 3; } } @media (max-width: 560px) { .category-editorial-strip__grid, .category-editorial-strip--count-1 .category-editorial-strip__grid, .category-editorial-strip--count-2 .category-editorial-strip__grid, .category-editorial-strip--count-3 .category-editorial-strip__grid { grid-template-columns: 1fr; gap: 22px; } .category-editorial-strip__title { font-size: 26px; } .category-shop-look__popover { left: 50%; right: auto; top: auto; bottom: 44px; transform: translateX(-50%); } .category-shop-look__grid { grid-template-columns: 1fr; } .category-shop-look__popover-products { grid-template-columns: 1fr; } .category-shop-look__product { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; } } .shop-by-interest { margin-top: 48px; } .shop-by-interest__header { position: relative; top: 5px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } #categoryShopByInterest .shop-by-interest__heading { padding-top: 40px; } .shop-by-interest__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .shop-by-interest__title { margin: 0; color: #232030; font-family: var(--font-heading); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.6px; } .shop-by-interest__category { margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 16px; font-weight: 500; line-height: 1.2; } .shop-by-interest__nav { display: flex; gap: 8px; flex-shrink: 0; } .shop-by-interest__arrow { width: 56px; height: 46px; padding: 0; margin: 0; border: 0; border-radius: 999px; background-color: #232030; background-position: center; background-repeat: no-repeat; background-size: 22px 14px; cursor: pointer; transition: transform 0.18s ease, opacity 0.18s ease; flex: 0 0 auto; } .shop-by-interest__arrow--prev { background-image: url("/assets/header-icons/pager-pill-prev.svg"); } .shop-by-interest__arrow--next { background-image: url("/assets/header-icons/pager-pill-next.svg"); } .shop-by-interest__arrow:hover:not(:disabled), .shop-by-interest__arrow:focus-visible:not(:disabled) { transform: scale(1.04); } .shop-by-interest__arrow:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.18); outline-offset: 3px; } .shop-by-interest__arrow:disabled { opacity: 0.35; cursor: default; } .shop-by-interest__viewport { margin-top: 5px; padding: 12px 4px 16px; margin-left: -4px; margin-right: -4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .shop-by-interest__viewport::-webkit-scrollbar { display: none; } .shop-by-interest.is-not-scrollable .shop-by-interest__nav { display: none; } .shop-by-interest__grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 18px) / 6); align-items: stretch; gap: 18px; } .shop-by-interest__grid > * { scroll-snap-align: start; } @media (max-width: 1024px) { .shop-by-interest__grid { grid-auto-columns: calc((100% - 3 * 18px) / 4); } } @media (max-width: 720px) { .shop-by-interest__grid { grid-auto-columns: calc((100% - 2 * 14px) / 2.4); gap: 14px; } .shop-by-interest__nav { display: none; } } .shop-by-interest__card { min-width: 0; min-height: 100%; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; background: #f8f1eb; border-radius: 30px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 0 0 rgba(35, 32, 48, 0); transition: box-shadow 0.18s ease; } .shop-by-interest__card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--color-line); pointer-events: none; transition: opacity 0.18s ease; } .shop-by-interest__card:hover { box-shadow: var(--shadow-card-hover); } .shop-by-interest__card:focus-visible { outline: none; box-shadow: var(--shadow-card-hover); } .shop-by-interest__card:hover::after, .shop-by-interest__card:focus-visible::after { opacity: 0; } .shop-by-interest__card-media { width: 100%; aspect-ratio: 219 / 207; position: relative; z-index: 0; display: block; background: radial-gradient(circle at 18% 18%, rgba(255, 249, 241, 0.8) 0%, rgba(255, 249, 241, 0) 32%), linear-gradient(145deg, #dfe7f4 0%, #eee5da 100%); background-size: cover; background-position: center; background-repeat: no-repeat; } .shop-by-interest__card-body { min-height: 113px; position: relative; z-index: 0; padding: 12px 14px 12px; box-sizing: border-box; display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; } .shop-by-interest__card-title { margin: auto 0; min-height: 18px; display: block; color: #232030; font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 18px; text-align: center; text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .shop-by-interest__card-cta { width: 100%; min-height: 45px; height: 45px; margin-top: 0; padding: 6px 27px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; border: 1px solid var(--color-line); background: #f8f1eb; color: #232030; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .shop-by-interest__card-cta:hover, .shop-by-interest__card-cta:focus-visible { border-color: transparent; box-shadow: var(--shadow-card-hover); } .shop-by-interest__card-arrow { width: 22px; height: 14px; flex: 0 0 22px; display: block; object-fit: contain; } @media (max-width: 760px) { .shop-by-interest { margin-top: 42px; } .shop-by-interest__title { font-size: 24px; } .shop-by-interest__category { font-size: 15px; } .shop-by-interest__grid { margin-top: 15px; gap: 16px 14px; } .shop-by-interest__card-body { min-height: 102px; padding: 10px 12px 10px; gap: 6px; } .shop-by-interest__card-title { min-height: 34px; font-size: 14px; line-height: 17px; } .shop-by-interest__card-cta { min-height: 42px; height: 42px; padding-inline: 18px; font-size: 14px; gap: 8px; } .shop-by-interest__card-arrow { width: 20px; height: 13px; flex-basis: 20px; } } /* [bundle] /styles/components/recently-viewed.css */ .recently-viewed-rail { --recently-viewed-shell-width: var(--homepage-shell-width, min(calc(100% - 68px), 1372px)); --recently-viewed-shell-inset: var(--homepage-shell-inset, 6px); --recently-viewed-safe-buffer: 6px; --recently-viewed-fade-width: var(--homepage-rail-fade-width, 52px); --recently-viewed-fade-overhang: var(--homepage-rail-fade-overhang, 26px); --recently-viewed-arrow-overhang: var(--homepage-rail-arrow-overhang, 27px); --recently-viewed-overlay-reserve: 0px; --recently-viewed-track-top: 74px; --recently-viewed-track-bottom: 26px; --recently-viewed-card-height: 339px; --recently-viewed-gradient-top: 52px; --recently-viewed-title-inline-offset: 10px; padding-block: 8px 12px; overflow: visible; } .recently-viewed-rail__frame { width: var(--recently-viewed-shell-width); max-width: 100%; height: 441px; margin: 0 auto; position: relative; padding-inline: 0; box-sizing: border-box; overflow: visible; } .recently-viewed-rail__title { margin: 0; position: absolute; left: var(--recently-viewed-title-inline-offset); top: 8px; height: 46px; display: inline-flex; align-items: center; color: #232030; font-family: var(--font-body); font-size: 22px; font-style: normal; font-weight: 600; line-height: 28px; letter-spacing: 0; } .recently-viewed-rail__header { position: absolute; top: 8px; left: var(--recently-viewed-title-inline-offset); right: var(--recently-viewed-safe-buffer, 6px); display: flex; align-items: center; justify-content: flex-start; gap: 10px; z-index: 5; } .recently-viewed-rail--featured .recently-viewed-rail__title { position: relative; left: 0; top: 0; height: auto; min-height: 46px; display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 410px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; line-height: 28px; letter-spacing: 0; } .recently-viewed-rail--featured .recently-viewed-rail__header .recently-viewed-rail__view-all-button { top: 0; margin-right: auto; } .recently-viewed-rail--sponsored.recently-viewed-rail--featured .recently-viewed-rail__title { max-width: calc(100% - 332px); } .recently-viewed-rail__header-note { margin-left: auto; position: relative; display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 322px; min-width: 0; text-align: right; } .recently-viewed-rail__header-note-text { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 12px; font-style: normal; font-weight: 500; line-height: 1.2; } .recently-viewed-rail__header-note-link { margin: 0; padding: 0; border: 0; background: transparent; color: #232030; font-family: var(--font-body); font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .recently-viewed-rail__header-note-link:hover, .recently-viewed-rail__header-note-link:focus-visible { color: #3f6a60; } .recently-viewed-rail__header-note-link:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.18); outline-offset: 4px; border-radius: 999px; } .recently-viewed-rail__header-note-icon { width: 14px; height: 14px; display: block; object-fit: contain; opacity: 0.78; } .recently-viewed-rail__header-note-popover { position: absolute; top: calc(100% + 10px); right: 0; width: min(292px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--popup-border); border-radius: 16px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); color: var(--color-ink-muted); font-family: var(--font-body); font-size: 12px; font-style: normal; font-weight: 500; line-height: 1.45; text-align: left; z-index: 8; } .recently-viewed-rail__header-note.is-open .recently-viewed-rail__header-note-link { color: #3f6a60; } .recently-viewed-rail__view-all-button { width: 104px; height: 42px; position: relative; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; overflow: visible; background: transparent; color: #232030; text-decoration: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-style: normal; font-weight: 700; line-height: 1; isolation: isolate; } .recently-viewed-rail__view-all-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; transform: scale(1); transform-origin: center; will-change: transform; transition: background-color 0.18s ease; } .recently-viewed-rail__view-all-button:hover::before, .recently-viewed-rail__view-all-button:focus-visible::before { animation: recently-viewed-pop-bounce-soft 0.44s cubic-bezier(0.22, 1, 0.28, 1) both; } .recently-viewed-rail__view-all-button:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.18); outline-offset: 2px; } .recently-viewed-rail__view-all-button--cream { width: auto; min-width: 119px; padding: 0 15px; justify-content: center; gap: 12px; color: #232030; margin-left: 0; } .recently-viewed-rail__view-all-button--cream::before { background: #eee5da; } .recently-viewed-rail__view-all-button--cream:hover::before, .recently-viewed-rail__view-all-button--cream:focus-visible::before { background: #e5dacf; } .recently-viewed-rail__view-all-button--cream::after { content: ""; position: relative; z-index: 1; flex: 0 0 auto; width: 17.6px; height: 11.2px; background: center / 17.6px 11.2px no-repeat url("/assets/header-icons/pager-arrow-next-active.svg"); } .recently-viewed-rail__view-all-button--dark { color: var(--color-cream); } .recently-viewed-rail__view-all-button--dark::before { background: #232030; } .recently-viewed-rail__view-all-button-label { position: relative; z-index: 1; } @keyframes recently-viewed-pop-bounce-soft { 0% { transform: scale(0.92); } 34% { transform: scale(1.056); } 62% { transform: scale(0.988); } 82% { transform: scale(1.014); } 100% { transform: scale(1); } } .personalization-dismiss { position: relative; margin-left: 0; flex: 0 0 auto; z-index: 8; } .personalization-dismiss + .recently-viewed-rail__view-all-button { margin-left: 0; margin-right: 0; } .personalization-dismiss__button { position: relative; min-width: 124px; height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; isolation: isolate; } .personalization-dismiss__button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #eee5da; transform: scale(1); transform-origin: center; transition: background-color 0.18s ease; will-change: transform; z-index: -1; } .personalization-dismiss__button:hover::before, .personalization-dismiss__button:focus-visible::before, .personalization-dismiss__button[aria-expanded="true"]::before { background: #e5dacf; animation: recently-viewed-pop-bounce-soft 0.44s cubic-bezier(0.22, 1, 0.28, 1) both; } .personalization-dismiss__button:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.18); outline-offset: 2px; } .personalization-dismiss__popover { position: absolute; left: 0; top: calc(100% + 10px); width: min(292px, calc(100vw - 32px)); padding: 18px; border: 0; border-radius: 16px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); color: #232030; z-index: 12; } .personalization-dismiss__popover::before { content: none; } .personalization-dismiss__title { display: block; color: #232030; font-family: var(--font-display); font-size: 17px; font-weight: 650; line-height: 1.18; } .personalization-dismiss__text { max-width: 220px; margin: 10px 0 16px; color: #3a3647; font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.28; } .personalization-dismiss__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .personalization-dismiss__remove, .personalization-dismiss__cancel { min-width: 104px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 0; border-radius: 999px; font-family: var(--font-body); font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; white-space: nowrap; } .personalization-dismiss__remove { position: relative; isolation: isolate; order: 2; gap: 8px; background: transparent; color: var(--color-cream); overflow: visible; transition: none; } .personalization-dismiss__remove::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transition: transform 0.18s ease, box-shadow 0.18s ease; } .personalization-dismiss__remove i, .personalization-dismiss__remove img, .personalization-dismiss__remove-icon { flex: 0 0 auto; width: 15px; height: 15px; line-height: 1; object-fit: contain; filter: brightness(0) invert(1); transform: none; } .personalization-dismiss__remove:hover, .personalization-dismiss__remove:focus-visible { background: transparent; color: var(--color-cream); outline: 0; transform: none; } .personalization-dismiss__remove:hover::before, .personalization-dismiss__remove:focus-visible::before { transform: scale(1.055); } .personalization-dismiss__cancel { order: 1; background: var(--popup-bg); color: #232030; box-shadow: none; transition: box-shadow .2s ease; } .personalization-dismiss__cancel:hover, .personalization-dismiss__cancel:focus-visible { background: var(--popup-bg); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .personalization-dismiss__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .recently-viewed-rail__viewport { width: auto; top: 0; left: 0; right: 0; padding: 0 var(--recently-viewed-safe-buffer); box-sizing: border-box; overflow-x: hidden; overflow-y: hidden; scroll-padding-inline: var(--recently-viewed-safe-buffer); height: 100%; position: absolute; z-index: 1; scrollbar-width: none; -ms-overflow-style: none; } .recently-viewed-rail__viewport::-webkit-scrollbar { display: none; } .recently-viewed-rail__track { width: max-content; display: inline-flex; align-items: flex-start; gap: 17.5px; margin-inline: 0; padding: var(--recently-viewed-track-top) 0 var(--recently-viewed-track-bottom); box-sizing: border-box; } .recently-viewed-rail .personalized-card, .recently-viewed-rail .recently-viewed-rail__view-all-card { --personalized-card-width: var(--recently-viewed-runtime-card-width, 258px); --personalized-card-media-height: var(--recently-viewed-runtime-media-height, var(--personalized-card-width)); --personalized-card-height: var(--recently-viewed-runtime-card-height, calc(var(--personalized-card-width) + 81px)); } @media (min-width: 721px) and (max-width: 1439px) { .recently-viewed-rail { --recently-viewed-shell-width: min(1410px, calc(100% - 30px)); --recently-viewed-shell-inset: 0px; } } @media (max-width: 720px) { .recently-viewed-rail { --recently-viewed-shell-width: min(720px, calc(100% - 32px)); --recently-viewed-shell-inset: 0px; } } .recently-viewed-rail__gradient { position: absolute; top: var(--recently-viewed-gradient-top); width: var(--recently-viewed-fade-width); height: calc(var(--recently-viewed-card-height) + 16px); pointer-events: none; z-index: 3; opacity: 1; transition: opacity 0.62s cubic-bezier(0.25, 0.1, 0.25, 1); } .recently-viewed-rail__gradient--left { left: calc(-1 * var(--recently-viewed-fade-overhang)); background: linear-gradient(90deg, #f8f1eb 0%, rgba(248, 241, 235, 0) 100%); } .recently-viewed-rail__gradient--right { right: calc(-1 * var(--recently-viewed-fade-overhang)); background: linear-gradient(270deg, #f8f1eb 0%, rgba(248, 241, 235, 0) 100%); } .recently-viewed-rail.is-at-start .recently-viewed-rail__gradient--left, .recently-viewed-rail.is-at-end .recently-viewed-rail__gradient--right { opacity: 0; } .recently-viewed-rail__arrow { width: 56px; height: 46px; padding: 0; margin: 0; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: visible; background: transparent; background-position: center; background-repeat: no-repeat; background-size: 22px 14px; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: opacity 0.18s ease; backface-visibility: hidden; z-index: 6; flex: 0 0 auto; } .recently-viewed-rail__arrow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: #232030; pointer-events: none; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: transform 0.18s ease; will-change: transform; backface-visibility: hidden; } .recently-viewed-rail__arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; transform: translate(-50%, -50%); transform-origin: 50% 50%; backface-visibility: hidden; } .recently-viewed-rail__arrow-icon { display: none; } .recently-viewed-rail__arrow--next { background-image: none; } .recently-viewed-rail__arrow--next::after { background-image: url("/assets/header-icons/pager-pill-next.svg"); } .recently-viewed-rail__arrow--prev { background-image: none; } .recently-viewed-rail__arrow--prev::after { background-image: url("/assets/header-icons/pager-pill-prev.svg"); } .recently-viewed-rail__arrow:hover:not(.is-hidden), .recently-viewed-rail__arrow:focus-visible:not(.is-hidden) { transform: translate3d(0, 0, 0) scale(1); } .recently-viewed-rail__arrow:hover:not(.is-hidden)::before, .recently-viewed-rail__arrow:focus-visible:not(.is-hidden)::before { transform: translate3d(0, 0, 0) scale(1.04); } .recently-viewed-rail__arrow:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.18); outline-offset: 3px; } .recently-viewed-rail__frame > .recently-viewed-rail__arrow { position: absolute; top: 8px; z-index: 6; } .recently-viewed-rail__frame > .recently-viewed-rail__arrow--next { right: var(--recently-viewed-title-inline-offset); left: auto; } .recently-viewed-rail__frame > .recently-viewed-rail__arrow--prev { right: calc(var(--recently-viewed-title-inline-offset) + 66px); left: auto; } .recently-viewed-rail__arrow.is-hidden { display: inline-flex; pointer-events: none; cursor: default; opacity: 0.35; } .recently-viewed-rail__arrow.is-hidden:hover, .recently-viewed-rail__arrow.is-hidden:focus-visible { transform: none; } .recently-viewed-rail.is-at-start.is-at-end .recently-viewed-rail__arrow { display: none; } .recently-viewed-rail__header.is-pager-host { display: flex; align-items: center; gap: 10px; } .recently-viewed-rail__header.is-pager-host .recently-viewed-rail__view-all-button { margin-right: auto; } .recently-viewed-rail__header.is-pager-host.has-no-view-all .recently-viewed-rail__title { margin-right: auto; } .recently-viewed-rail__header.is-pager-host .recently-viewed-rail__arrow--next { margin-left: 0; } .personalized-card { --personalized-card-width: 258px; --personalized-card-height: 339px; --personalized-card-media-height: 258px; width: var(--personalized-card-width); min-width: var(--personalized-card-width); height: var(--personalized-card-height); position: relative; background: #f8f1eb; border-radius: 20px; overflow: hidden; box-shadow: none; scroll-snap-align: start; transition: box-shadow 0.24s ease; -webkit-user-select: none; user-select: none; } .personalized-card[data-product-href] { cursor: pointer; } .personalized-card:hover, .personalized-card:has(:focus-visible) { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .personalized-card.is-actions-open { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .personalized-card__media { width: 100%; height: var(--personalized-card-media-height); position: relative; overflow: hidden; } .personalized-card__media-surface { width: 100%; height: 100%; display: block; border-top-left-radius: 20px; border-top-right-radius: 20px; background: #eef2f8; background-position: center; background-repeat: no-repeat; background-size: cover; } .personalized-card__badge { position: absolute; left: 5px; top: calc(var(--personalized-card-media-height) - 30px); min-height: 27px; padding: 6px 13px; border-radius: 999px; background: #def7eb; color: #3F6A60; font-family: var(--font-body); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: 0.01em; display: inline-flex; align-items: center; justify-content: center; z-index: 1; } .personalized-card__body { position: absolute; width: calc(100% - 10px); left: 5px; top: calc(var(--personalized-card-media-height) + 2px); bottom: 10px; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; } .personalized-card__title { width: 100%; margin: 0; color: #232030; font-family: var(--font-body); font-size: 13px; font-style: normal; font-weight: 700; line-height: 1.15; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .personalized-card__price { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: transparent; width: 100%; margin-top: 2px; } .personalized-card__values { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; } .personalized-card__currency, .personalized-card__price-new { color: var(--color-forest); font-family: var(--font-price, var(--font-display)); font-style: normal; font-weight: 700; line-height: 1.15; } .personalized-card__currency { min-width: 0; min-height: 0; padding: 0; font-size: 18px; margin-right: 0; text-align: left; display: inline-flex; align-items: center; justify-content: flex-start; } .personalized-card__price-new { font-size: 18px; } .personalized-card__price-old { margin-left: 0; color: var(--color-ink-soft); font-family: var(--font-price, var(--font-display)); font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.15; text-decoration-line: line-through; } .personalized-card__status-badge, .personalized-card__status-text { margin-top: 3px; } .personalized-card__status-badge { display: block; height: 25px; max-width: none; object-fit: contain; } .personalized-card__status-badge--digital { width: 161px; } .personalized-card__status-badge--free-download { width: 161px; } .personalized-card__status-badge--shipping { width: 153px; } .personalized-card__status-text { color: #b91515; font-family: var(--font-body); font-size: 14px; font-style: normal; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; min-height: 25px; } .personalized-card--discounted .personalized-card__currency, .personalized-card--discounted .personalized-card__price-new { color: #3F6A60; } .personalized-card__hover-actions { position: absolute; top: 10px; right: 10px; width: auto; max-width: calc(100% - 20px); height: 38px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.96); transition: opacity 0.22s ease, transform 0.22s ease; z-index: 5; } .personalized-card:hover .personalized-card__hover-actions, .personalized-card:has(:focus-visible) .personalized-card__hover-actions, .personalized-card.is-actions-open .personalized-card__hover-actions { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } @media (hover: none), (pointer: coarse) { .personalized-card:hover { box-shadow: none; } .personalized-card:hover .personalized-card__hover-actions { opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.96); } } .personalized-card__hover-board, .personalized-card__hover-save { height: 38px; border: 0; border-radius: 999px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0; overflow: visible; cursor: pointer; font-family: var(--font-body); line-height: 1; white-space: nowrap; background: transparent; isolation: isolate; } .personalized-card__hover-board::before, .personalized-card__hover-save::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; transform: scale(1); transform-origin: center; transition: transform 0.18s ease; } .personalized-card__hover-board:hover::before, .personalized-card__hover-board:focus-visible::before, .personalized-card__hover-save:hover::before, .personalized-card__hover-save:focus-visible::before { transform: scale(1.035); } .personalized-card__hover-board { min-width: 38px; max-width: 38px; width: 38px; color: #232030; justify-content: center; padding: 0; flex: 0 0 38px; } .personalized-card__hover-board::before { background: #eee5da; } .personalized-card__hover-board-label { display: none; } .personalized-card__hover-board img { width: 12px; height: 12px; flex: 0 0 12px; display: block; object-fit: contain; } .personalized-card__hover-save { min-width: 38px; width: 38px; color: var(--color-cream); padding: 0; flex: 0 0 38px; } .personalized-card__hover-save::before { background: #3f6a60; } .personalized-card__hover-save-label { display: none; } .personalized-card__hover-save img { width: 17px; height: 18px; flex: 0 0 17px; display: block; object-fit: contain; } .recently-viewed-rail__view-all-card { --personalized-card-width: 258px; --personalized-card-height: 339px; --personalized-card-media-height: 258px; width: var(--personalized-card-width); min-width: var(--personalized-card-width); height: var(--personalized-card-height); position: relative; background: #f8f1eb; border-radius: 20px; overflow: hidden; scroll-snap-align: start; box-shadow: none; transition: box-shadow 0.24s ease; } .recently-viewed-rail__view-all-card-media { width: 100%; height: var(--personalized-card-media-height); background: #eee5da; position: relative; display: flex; align-items: center; justify-content: center; } .recently-viewed-rail__view-all-card-body { width: 100%; height: calc(var(--personalized-card-height) - var(--personalized-card-media-height)); background: #f8f1eb; } .recently-viewed-rail__view-all-card--endcap .recently-viewed-rail__view-all-card-media { background: #eee5da; height: 100%; border-radius: 20px; } .recently-viewed-rail__view-all-card--endcap .recently-viewed-rail__view-all-card-body { display: none; } .recently-viewed-rail__view-all-card-button { width: 104px; height: 42px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .recently-viewed-rail--featured .recently-viewed-rail__view-all-card-button { top: 50%; } .recently-viewed-rail__view-all-card-button:hover, .recently-viewed-rail__view-all-card-button:focus-visible { transform: translate(-50%, -50%); } .recently-viewed-rail__view-all-card--endcap:hover, .recently-viewed-rail__view-all-card--endcap:has(:focus-visible) { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } @media (min-width: 1025px) { body.page--homepage.is-homepage-authenticated .recently-viewed-rail[data-recently-viewed-auth-only] { padding-block: 4px 6px; } body.page--homepage.is-homepage-authenticated .recently-viewed-rail[data-recently-viewed-auth-only] .recently-viewed-rail__frame { height: 423px; } body.page--homepage.is-homepage-authenticated .recently-viewed-rail[data-recently-viewed-auth-only] .recently-viewed-rail__title { top: 8px; } body.page--homepage.is-homepage-authenticated .recently-viewed-rail[data-recently-viewed-auth-only] .recently-viewed-rail__header { top: 8px; } body.page--homepage.is-homepage-authenticated .recently-viewed-rail[data-recently-viewed-auth-only].recently-viewed-rail--featured .recently-viewed-rail__title { top: 0; } body.page--homepage.is-homepage-authenticated .recently-viewed-rail[data-recently-viewed-auth-only] { --recently-viewed-track-top: 74px; --recently-viewed-track-bottom: 10px; --recently-viewed-gradient-top: 52px; } } @media (min-width: 1025px) { .recently-viewed-rail__frame { overflow: visible; } } @media (max-width: 1480px) { .recently-viewed-rail__frame { width: var(--recently-viewed-shell-width); } } @media (max-width: 1024px) { .recently-viewed-rail { --recently-viewed-safe-buffer: 16px; --recently-viewed-title-inline-offset: 16px; padding-block: 12px 10px; } .recently-viewed-rail__frame { min-height: 0; overflow: visible; } .recently-viewed-rail__gradient { display: none; } .recently-viewed-rail__title { left: var(--recently-viewed-title-inline-offset); padding-left: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: 0; } .recently-viewed-rail__header { top: 12px; } .recently-viewed-rail--featured .recently-viewed-rail__title { max-width: calc(100% - 124px); font-size: 22px; line-height: 28px; } body.is-ai-panel-open:not(.page--gift-room) .recently-viewed-rail--featured .recently-viewed-rail__title { overflow: visible; text-overflow: clip; white-space: normal; } .recently-viewed-rail--sponsored.recently-viewed-rail--featured .recently-viewed-rail__title { max-width: calc(100% - 290px); } body.is-ai-panel-open:not(.page--gift-room) .recently-viewed-rail--sponsored.recently-viewed-rail--featured .recently-viewed-rail__title { max-width: calc(100% - 250px); overflow: visible; text-overflow: clip; white-space: normal; } .recently-viewed-rail__viewport { width: auto; top: 0; left: calc(-1 * var(--recently-viewed-safe-buffer)); right: calc(-1 * var(--recently-viewed-safe-buffer)); margin-left: 0; margin-top: 0; padding-inline: var(--recently-viewed-safe-buffer); height: 100%; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: var(--recently-viewed-safe-buffer); } .recently-viewed-rail__arrow { display: none !important; } .personalized-card, .recently-viewed-rail__view-all-card { --personalized-card-width: 228px; --personalized-card-height: 309px; --personalized-card-media-height: 228px; width: var(--personalized-card-width); min-width: var(--personalized-card-width); height: var(--personalized-card-height); } } @media (max-width: 720px) { .recently-viewed-rail { --recently-viewed-mobile-card-gap: 17.5px; --recently-viewed-mobile-card-width: calc((100vw - var(--recently-viewed-safe-buffer) - (2 * var(--recently-viewed-mobile-card-gap))) / 2.2); } .recently-viewed-rail .personalized-card, .recently-viewed-rail__view-all-card { --personalized-card-width: var(--recently-viewed-mobile-card-width); --personalized-card-height: calc(var(--personalized-card-width) + 81px); --personalized-card-media-height: var(--personalized-card-width); } } @media (min-width: 641px) and (max-width: 1024px) { .recently-viewed-rail__track { margin-inline: 0; padding-left: 0; padding-right: 0; } } @media (max-width: 640px) { .recently-viewed-rail { --recently-viewed-safe-buffer: 16px; --recently-viewed-title-inline-offset: 16px; --recently-viewed-track-top: 64px; --recently-viewed-track-bottom: 14px; --recently-viewed-mobile-card-gap: 17.5px; --recently-viewed-mobile-card-width: calc((100vw - var(--recently-viewed-safe-buffer) - (2 * var(--recently-viewed-mobile-card-gap))) / 2.2); --personalized-card-width: var(--recently-viewed-mobile-card-width); --personalized-card-height: calc(var(--personalized-card-width) + 81px); --personalized-card-media-height: var(--personalized-card-width); padding-block: 10px 8px; } .recently-viewed-rail__frame { height: calc(var(--recently-viewed-track-top) + var(--personalized-card-height) + var(--recently-viewed-track-bottom)); overflow: visible; } .recently-viewed-rail__title { left: var(--recently-viewed-title-inline-offset); padding-left: 0; font-size: 21px; line-height: 26px; font-weight: 600; letter-spacing: 0; } .recently-viewed-rail__header { top: 10px; gap: 10px; } .recently-viewed-rail--featured .recently-viewed-rail__title { max-width: 100%; font-size: 21px; line-height: 26px; white-space: normal; } .recently-viewed-rail--sponsored .recently-viewed-rail__header { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; } .recently-viewed-rail--sponsored.recently-viewed-rail--featured .recently-viewed-rail__title { max-width: 100%; } .recently-viewed-rail__header-note { display: none; } .recently-viewed-rail__header-note-popover { right: 0; } .recently-viewed-rail__header-note-text, .recently-viewed-rail__header-note-link { font-size: 11px; } .recently-viewed-rail__view-all-button { width: 104px; height: 42px; } .recently-viewed-rail__view-all-button--cream { width: auto; min-width: 119px; padding: 0 15px; } .personalization-dismiss { display: none; } .recently-viewed-rail__viewport { width: auto; left: calc(-1 * var(--recently-viewed-safe-buffer)); right: calc(-1 * var(--recently-viewed-safe-buffer)); margin-left: 0; padding-inline: var(--recently-viewed-safe-buffer); box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: var(--recently-viewed-safe-buffer); } .recently-viewed-rail__track { margin-inline: 0; padding-left: 0; padding-right: 0; } .recently-viewed-rail__arrow { display: none !important; } .personalized-card, .recently-viewed-rail__view-all-card { width: var(--personalized-card-width); min-width: var(--personalized-card-width); height: var(--personalized-card-height); border-radius: 24px; } .personalized-card__media-surface { border-top-left-radius: 24px; border-top-right-radius: 24px; } .personalized-card__hover-actions { display: none; } .personalized-card__status-badge { width: min(100%, 142px); height: 22px; } } /* [bundle] /styles/components/overlays.css */ .product-action-favorite { width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 249, 241, 0.94); box-shadow: 0 0 4px rgba(35, 32, 48, 0.28); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.22s ease, opacity 0.22s ease, box-shadow 0.22s ease; } .product-action-favorite svg, .product-action-favorite__icon { width: 20px; height: 20px; display: block; } .product-action-favorite path { fill: transparent; stroke: #232030; stroke-width: 1.66667; stroke-linecap: round; stroke-linejoin: round; transition: fill 0.22s ease, stroke 0.22s ease; } .product-action-favorite.is-liked path { fill: #b91515; stroke: #b91515; } .product-action-favorite:focus-visible { outline: 1px solid var(--popup-outline); outline-offset: 2px; } .card-board-menu { --card-board-menu-base-width: 558px; --card-board-menu-right-extension: 5px; position: fixed; box-sizing: border-box; width: calc(var(--card-board-menu-base-width) + var(--card-board-menu-right-extension)); max-width: calc(100vw - 20px); max-height: min(438px, calc(100vh - 24px)); padding: 0 var(--card-board-menu-right-extension) 0 0; display: flex; flex-direction: column; border-radius: 18px; background: var(--popup-bg); border: 0; box-shadow: var(--popup-shadow); z-index: var(--z-modal-front, 13000); overflow: hidden; } .card-board-menu:focus { outline: 0; } .card-board-menu__sheet-grip { display: none; } .card-board-menu__desktop-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr); } .card-board-menu__panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .card-board-menu__product { min-width: 0; min-height: 0; padding: 10px 12px; border-right: 0; background: var(--popup-bg); display: flex; flex-direction: column; gap: 7px; overflow: hidden; } .card-board-menu__product[hidden] { display: none !important; } .card-board-menu__product[hidden] + .card-board-menu__panel { grid-column: 1 / -1; } .card-board-menu__product-media { width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; background: var(--popup-bg-muted); background-position: center; background-size: cover; overflow: hidden; } .card-board-menu__product-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .card-board-menu__product-title { color: var(--color-ink); font-family: var(--font-body) !important; font-size: 12px; font-weight: 800; line-height: 1.18; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-board-menu__product-price-row { min-width: 0; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; overflow: hidden; } .card-board-menu__product-price { color: var(--color-forest); font-family: var(--font-price); font-size: 16px; font-weight: 800; line-height: 1; } .card-board-menu__product-old-price { color: var(--color-ink-soft); font-family: var(--font-price); font-size: 10px; font-weight: 700; line-height: 1; text-decoration: line-through; } .card-board-menu__product-discount { min-width: 0; color: var(--color-ink-soft); font-family: var(--font-body) !important; font-size: 10px; font-weight: 800; line-height: 1; overflow: hidden; text-overflow: ellipsis; } .card-board-menu__product-shop { --board-menu-shop-bg: var(--filter-pill-bg); --board-menu-shop-text: var(--color-ink); max-width: 100%; height: 19px; display: inline-flex; align-items: center; align-self: flex-start; gap: 0; color: var(--board-menu-shop-text); font-family: var(--font-body); font-size: 9px; font-weight: 800; line-height: 1; overflow: hidden; } .card-board-menu__product-shop.is-uncommon { --board-menu-shop-bg: var(--intent-feedback-alert-strong); } .card-board-menu__product-shop.is-etsy { --board-menu-shop-bg: var(--color-warn); } .card-board-menu__product-shop.is-ebay { --board-menu-shop-bg: var(--color-ink); } .card-board-menu__product-shop.is-default { --board-menu-shop-bg: var(--filter-pill-bg); --board-menu-shop-text: var(--color-ink); } .card-board-menu__product-shop-icon { width: 19px; height: 19px; border-radius: 999px; background: var(--board-menu-shop-bg); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 19px; overflow: hidden; } .card-board-menu__product-shop-icon img { width: 13px; height: 13px; display: block; object-fit: contain; } .card-board-menu__product-shop-notch { width: 7px; height: 10px; flex: 0 0 7px; margin-left: -2px; margin-right: -3px; background: var(--board-menu-shop-bg); clip-path: polygon(0 7.14%, 33.7% 33.95%, 61.8% 36.05%, 100% 0, 86.6% 58.6%, 100% 100%, 62.45% 64%, 31.7% 56.7%, 0 92.86%, 20.45% 44.12%); } .card-board-menu__product-shop-label { max-width: 158px; height: 19px; padding: 2px 7px 0; border-radius: 999px; background: var(--board-menu-shop-bg); display: inline-flex; align-items: center; color: var(--board-menu-shop-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-board-menu__product-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 0; } .card-board-menu__product-badge { display: inline-flex; align-items: center; height: 19px; max-width: 126px; overflow: hidden; } .card-board-menu__product-badge img { display: block; height: 19px; max-width: none; object-fit: contain; } .card-board-menu__product-badge--shipping img { width: 116px; } .card-board-menu__product-badge--digital img, .card-board-menu__product-badge--free-download img { width: 122px; } .card-board-menu__product-demand { color: var(--intent-feedback-alert-strong); font-family: var(--font-body); font-size: 10px; font-weight: 800; line-height: 1.16; max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; } .card-board-menu-backdrop { position: fixed; inset: 0; border: 0; margin: 0; padding: 0; background: transparent; z-index: calc(var(--z-modal-front, 13000) - 1); cursor: default; } .card-board-menu-backdrop[hidden] { display: none !important; } .card-board-menu[hidden] { display: none !important; } .card-board-menu__header { flex: 0 0 auto; padding: 7px 7px 6px; background: var(--popup-bg); border-bottom: 0; } .card-board-menu__title { padding: 0 4px 6px; text-align: center; color: var(--color-ink); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .card-board-menu__search { position: relative; width: 100%; height: 52px; display: flex; align-items: center; gap: 0; padding: 0 12px 0 40px; border-radius: 999px; background: var(--card-board-menu-field-bg, var(--popup-bg)); border: 1.5px solid var(--popup-border-strong); outline: none; overflow: visible; isolation: isolate; transition: border-color .18s ease, box-shadow .18s ease; } .card-board-menu__search.is-active .card-board-menu__search-active-outline { opacity: 0; } .card-board-menu__search.is-active { border-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .card-board-menu__search-icon { position: absolute; left: 15px; top: 50%; z-index: 1; width: 19px; height: 19px; flex: 0 0 19px; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; transform: translateY(-50%); } .card-board-menu__search-icon img { width: 19px; height: 19px; display: block; object-fit: contain; } .card-board-menu__search-input { flex: 1 1 auto; min-width: 0; border: 0 !important; background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 500; outline: none !important; box-shadow: none !important; padding: 0; line-height: 1; -webkit-appearance: none; appearance: none; position: relative; z-index: 1; } .card-board-menu__search-input::placeholder { color: var(--color-ink-soft); opacity: 1; } .card-board-menu__search-input:focus, .card-board-menu__search-input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; } .card-board-menu__search-input::-webkit-search-decoration, .card-board-menu__search-input::-webkit-search-cancel-button, .card-board-menu__search-input::-webkit-search-results-button, .card-board-menu__search-input::-webkit-search-results-decoration { display: none; -webkit-appearance: none; } .card-board-menu__search-clear { position: relative; z-index: 1; width: 32px; height: 32px; flex: 0 0 32px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; display: none; align-items: center; justify-content: center; cursor: pointer; } .card-board-menu__search-clear.is-visible { display: inline-flex; } .card-board-menu__search-clear-icon { width: 12px; height: 12px; display: block; object-fit: contain; } .card-board-menu__search-active-outline { position: absolute; inset: -4px; border: 2px solid rgba(63, 106, 96, 0.65); border-radius: 999px; opacity: 0; transition: opacity 0.18s ease; pointer-events: none; z-index: 0; } .card-board-menu__body { flex: 1 1 auto; min-height: 0; padding: 6px; overflow: auto; } .card-board-menu__list { width: 100%; display: flex; flex-direction: column; gap: 0; padding: 0; } .card-board-menu__section { display: flex; flex-direction: column; gap: 2px; } .card-board-menu__section + .card-board-menu__section { margin-top: 6px; } .card-board-menu__section-title { padding: 2px 4px 4px; color: var(--color-ink); font-family: var(--font-body); font-size: 10px; font-weight: 600; line-height: 1.2; } .card-board-menu__item { width: 100%; height: auto; min-height: 46px; margin: 0; border-radius: 12px; background: transparent; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px; color: var(--color-ink); cursor: pointer; transition: background-color 0.18s ease; } .card-board-menu__item:hover, .card-board-menu__item:focus-visible, .card-board-menu__item.is-selected:hover { background: var(--popup-hover); outline: none; } .card-board-menu__item.is-selected { background: transparent; } .card-board-menu__item-cover { width: 36px; height: 36px; border-radius: 10px; background: var(--popup-bg-muted); background-position: center; background-size: cover; border: 1px solid rgba(35, 32, 48, 0.08); display: block; overflow: hidden; } .card-board-menu__item-main { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; align-self: center; gap: 2px; overflow: hidden; } .card-board-menu__item-title-row { min-width: 0; width: 100%; display: inline-flex; align-items: center; gap: 6px; } .card-board-menu__item-label, .card-board-menu__profile-label, .card-board-menu__create-label { font-family: var(--font-body) !important; font-size: 11px; font-weight: 700; line-height: 1.15; letter-spacing: 0; } .card-board-menu__item-label { min-width: 0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-board-menu .card-board-menu__item[role="button"] .card-board-menu__item-label { font-family: var(--font-body) !important; } .card-board-menu__item-meta { min-width: 0; color: color-mix(in srgb, var(--color-ink) 62%, var(--color-cream)); font-family: var(--font-body); font-size: 10px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-board-menu__item-trailing { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 68px; padding-right: 3px; } .card-board-menu__item-lock { width: 13px; height: 13px; display: block; object-fit: contain; flex: 0 0 auto; } .card-board-menu__item-save { position: relative; min-width: 86px; height: 32px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; opacity: 1; visibility: visible; pointer-events: none; isolation: isolate; } .card-board-menu__item-save::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-forest); transform: scale(1); transition: background-color 0.18s ease, transform 0.18s ease; z-index: -1; } .card-board-menu__item[data-create-suggested-room="1"] .card-board-menu__item-save { color: var(--color-cream); } .card-board-menu__item[data-create-suggested-room="1"] .card-board-menu__item-save::before { background: color-mix(in srgb, var(--color-forest) 78%, var(--color-cream)); } .card-board-menu__item:hover .card-board-menu__item-save::before, .card-board-menu__item:focus-visible .card-board-menu__item-save::before { background: var(--color-forest-dark, var(--color-forest)); transform: scale(1.018); } .card-board-menu__item[data-create-suggested-room="1"]:hover .card-board-menu__item-save::before, .card-board-menu__item[data-create-suggested-room="1"]:focus-visible .card-board-menu__item-save::before { background: color-mix(in srgb, var(--color-forest) 88%, var(--color-cream)); } .card-board-menu__item.is-selected .card-board-menu__item-save { display: inline-flex; } .card-board-menu__item-save.is-saved { color: var(--color-cream); } .card-board-menu__item-save.is-saved::before { background: var(--color-ink); outline: 1px solid var(--color-ink); outline-offset: -1px; transform: none; } .card-board-menu__item:hover .card-board-menu__item-save.is-saved::before, .card-board-menu__item:focus-visible .card-board-menu__item-save.is-saved::before { background: var(--color-black, var(--color-ink)); transform: none; } .card-board-menu__item-check { flex: 0 0 auto; width: 17px; height: 17px; display: block; object-fit: contain; } .card-board-menu__footer { flex: 0 0 auto; height: 58px; padding: 7px 7px 6px; background: var(--popup-bg); border-top: 0; } .card-board-menu__profile-divider { display: none; } .card-board-menu__profile { min-height: 46px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px; border-radius: 12px; background: transparent; transition: background-color 0.18s ease; } .card-board-menu__profile:hover { background: var(--popup-hover); } .card-board-menu__profile.is-saved { background: transparent; } .card-board-menu__profile.is-saved:hover { background: color-mix(in srgb, var(--color-ink) 6%, transparent); } .card-board-menu__profile-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--popup-bg); display: inline-flex; align-items: center; justify-content: center; } .card-board-menu__profile-icon img { width: 18px; height: 18px; display: block; object-fit: contain; } .card-board-menu__profile-label { color: var(--color-ink); } .card-board-menu__profile-save { position: relative; min-width: 86px; height: 32px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; isolation: isolate; } .card-board-menu__profile-save::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-forest); transform: scale(1); transition: background-color 0.18s ease, transform 0.18s ease; z-index: -1; } .card-board-menu__profile-save:hover::before, .card-board-menu__profile-save:focus-visible::before { background: var(--color-forest-dark); transform: scale(1.018); } .card-board-menu__profile-save:hover, .card-board-menu__profile-save:focus-visible { outline: none; } .card-board-menu__profile-save.is-saved { background: transparent; color: var(--color-cream); } .card-board-menu__profile-save.is-saved::before { background: var(--color-ink); outline: 1px solid var(--color-ink); outline-offset: -1px; transform: none; } .card-board-menu__profile-save.is-saved:hover::before, .card-board-menu__profile-save.is-saved:focus-visible::before { background: var(--color-black, var(--color-ink)); transform: none; } .card-board-menu .card-board-menu__item-save, .card-board-menu .card-board-menu__profile-save { font-family: var(--font-body) !important; } .card-board-menu__create { position: relative; width: 100%; height: 44px; border: 0; border-radius: 999px; background: var(--popup-bg); box-shadow: none; display: flex; align-items: center; justify-content: flex-start; color: var(--color-ink); font-family: var(--font-body) !important; padding: 0 13px 0 72px; transition: box-shadow 0.18s ease; } .card-board-menu__create:hover, .card-board-menu__create:focus-visible { color: var(--color-ink); background: var(--popup-bg); box-shadow: 0 0 6px rgba(35, 32, 48, 0.55); outline: none; } .card-board-menu__create:active { background: var(--popup-bg); } .card-board-menu__create-icon { position: absolute; left: 5px; top: 5px; width: 48px; height: 34px; border-radius: 999px; background: var(--popup-bg-muted); display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.18s ease; } .card-board-menu__create-icon img { width: 18px; height: 18px; display: block; object-fit: contain; } .card-board-menu__create-label { color: inherit; line-height: 1; } .card-board-menu__empty { min-height: 76px; padding: 20px 12px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 12px; font-weight: 600; text-align: center; } .favorite-toast { position: fixed; left: 50%; bottom: 24px; width: min(656px, calc(100vw - 40px)); min-height: 77px; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 13px 19px 13px 14px; color: var(--color-cream); background: var(--color-forest); outline: 1px solid var(--color-forest-dark); outline-offset: -1px; border-radius: 24px; box-shadow: 0 24px 56px rgba(8, 28, 16, 0.36), 0 4px 16px rgba(0, 0, 0, 0.18); transform: translate(-50%, 20px) scale(0.94); opacity: 0; filter: blur(4px); pointer-events: auto; z-index: 11000; transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.34s ease; } .favorite-toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); } .favorite-toast:not(.is-authenticated):not(.is-remove) { width: min(482px, calc(100vw - 40px)); min-height: 77px; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 12px 16px 12px 12px; } .favorite-toast:not(.is-authenticated):not(.is-remove) .favorite-toast__icon { width: 52px; height: 52px; flex-basis: 52px; align-self: center; margin-top: 0; } .favorite-toast:not(.is-authenticated):not(.is-remove) .favorite-toast__content { align-self: center; padding-top: 2px; gap: 4px; } .favorite-toast:not(.is-authenticated):not(.is-remove) .favorite-toast__title { font-size: 15px; line-height: 1.2; } .favorite-toast:not(.is-authenticated):not(.is-remove) .favorite-toast__subtitle { font-size: 13px; line-height: 1.28; } .favorite-toast__icon { width: 52px; height: 52px; grid-column: 1; align-self: center; flex: 0 0 52px; position: relative; overflow: visible; } .favorite-toast__icon svg, .favorite-toast__asset-img { width: 100%; height: 100%; display: block; } .favorite-toast__media-frame { width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 15px; background: rgba(255, 249, 241, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 249, 241, 0.4); } .favorite-toast__media-img { width: 100%; height: 100%; display: block; object-fit: cover; } .favorite-toast__media-badge { position: absolute; right: -5px; bottom: -5px; width: 24px; height: 24px; border-radius: 999px; background: var(--color-cream); box-shadow: 0 6px 14px rgba(35, 32, 48, 0.22); display: inline-flex; align-items: center; justify-content: center; } .favorite-toast__media-badge svg, .favorite-toast__media-badge img { width: 18px; height: 18px; } .favorite-toast__content { grid-column: 2; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .favorite-toast__title { color: var(--color-cream); font-size: 16px; font-family: var(--font-body); font-weight: 500; line-height: 1.18; } .favorite-toast__title strong { font-weight: 700; } .favorite-toast__meta { display: flex; align-items: flex-start; gap: 5px; min-height: 18px; } .favorite-toast__meta-icon { width: 18px; height: 18px; flex: 0 0 18px; display: none; margin-top: 1px; } .favorite-toast__meta-icon svg, .favorite-toast__meta-img { width: 100%; height: 100%; display: block; } .favorite-toast__meta-img { filter: brightness(0) saturate(100%) invert(96%) sepia(17%) saturate(434%) hue-rotate(302deg) brightness(104%) contrast(94%); } .favorite-toast__subtitle { max-width: 100%; color: var(--color-cream); font-size: 14px; font-family: var(--font-body); font-weight: 400; line-height: 1.22; } .favorite-toast__link { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .favorite-toast__action { min-height: 53px; padding: 4px 18px; border: 0; border-radius: 999px; background: var(--color-forest); outline: 3px solid var(--color-cream); outline-offset: -3px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-cream); font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: transform 0.22s ease, background-color 0.22s ease, filter 0.22s ease; } .favorite-toast__action:hover, .favorite-toast__action:focus-visible { background: var(--color-forest-dark); filter: brightness(1.03); transform: translateY(-1px); } .favorite-toast__action:focus-visible { outline-color: color-mix(in srgb, var(--color-cream) 88%, transparent); } .favorite-toast.is-authenticated { width: min(453px, calc(100vw - 40px)); min-height: 58px; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 8px 16px 8px 10px; } .favorite-toast.is-authenticated .favorite-toast__icon { width: 48px; height: 48px; flex-basis: 48px; align-self: center; margin-top: 0; } .favorite-toast.is-authenticated .favorite-toast__media-frame { border-radius: 14px; } .favorite-toast.is-authenticated .favorite-toast__content { align-self: center; padding-top: 1px; gap: 1px; } .favorite-toast.is-authenticated .favorite-toast__title { font-size: 15px; font-weight: 500; } .favorite-toast.is-authenticated .favorite-toast__subtitle { font-size: 13px; line-height: 1.2; } .favorite-toast.is-authenticated .favorite-toast__meta-icon { display: inline-flex; } .favorite-toast.is-authenticated .favorite-toast__action { grid-column: 3; align-self: center; justify-self: end; } .favorite-toast.is-authenticated .favorite-toast__action--cancel { position: relative; isolation: isolate; overflow: visible; min-height: 40px; padding: 7px 17px; background: transparent; color: var(--color-ink); outline: 0; font-size: 14px; box-shadow: none; transform: none; transition: color 0.22s ease; } .favorite-toast.is-authenticated .favorite-toast__action--cancel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-cream); transform: scale(1); transform-origin: center; transition: transform 0.22s ease; z-index: -1; pointer-events: none; } .favorite-toast.is-authenticated .favorite-toast__action--cancel:hover, .favorite-toast.is-authenticated .favorite-toast__action--cancel:focus-visible { background: transparent; color: var(--color-ink); filter: none; transform: none; } .favorite-toast.is-authenticated .favorite-toast__action--cancel:hover::before, .favorite-toast.is-authenticated .favorite-toast__action--cancel:focus-visible::before { transform: scale(1.04); } .favorite-toast.is-authenticated .favorite-toast__action--cancel:focus-visible { outline: 0; outline-offset: 0; } .favorite-toast__action[hidden] { display: none !important; } .favorite-toast.is-remove { width: min(360px, calc(100vw - 40px)); min-height: 76px; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 0; padding: 14px 24px; background: var(--color-forest); outline: 1px solid var(--color-forest-dark); outline-offset: -1px; border-radius: 24px; box-shadow: 0 14px 34px rgba(8, 28, 16, 0.3), 0 3px 10px rgba(0, 0, 0, 0.14); } .favorite-toast.is-remove .favorite-toast__meta, .favorite-toast.is-remove .favorite-toast__action { display: none; } .favorite-toast.is-remove .favorite-toast__icon { display: none; } .favorite-toast.is-remove .favorite-toast__content { grid-column: 1; display: flex; align-self: center; justify-content: center; gap: 0; min-width: 0; padding: 0; } .favorite-toast.is-remove .favorite-toast__title { font-size: 15px; font-weight: 600; white-space: normal; text-align: center; line-height: 1.2; } .smart-gift-room-prompt-overlay.header-auth-overlay { background: transparent; justify-content: flex-start; overflow: visible; padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left)); pointer-events: none; z-index: 12080; } .smart-gift-room-prompt-overlay.is-open:not(.is-loading-view), .smart-gift-room-prompt-overlay.is-closing:not(.is-loading-view) { align-items: flex-end; } .smart-gift-room-prompt__shell { width: min(640px, calc(100vw - 36px)); max-width: calc(100vw - 36px); pointer-events: auto; transform-origin: left bottom; } .smart-gift-room-prompt__close.header-auth-close { top: 0; left: calc(100% + var(--popup-close-offset, 10px)); right: auto; width: var(--popup-close-width, 78px); height: var(--popup-close-height, 55px); background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); } .smart-gift-room-prompt { --color-forest: var(--color-ink); --color-forest-dark: var(--color-ink); --popup-focus: var(--color-ink); width: 100%; min-height: 178px; box-sizing: border-box; padding: 20px 88px 20px 20px; display: grid; grid-template-columns: 152px minmax(0, 1fr); grid-template-areas: "media copy" "media actions"; align-items: center; gap: 14px 20px; border: 1px solid var(--popup-border); border-radius: 24px; color: var(--color-ink); } .smart-gift-room-prompt__media { grid-area: media; width: 100%; aspect-ratio: 1; align-self: center; display: block; overflow: hidden; border-radius: 24px; background: var(--popup-bg-soft); box-shadow: inset 0 0 0 1px var(--popup-border); } .smart-gift-room-prompt__media-img, .smart-gift-room-prompt__media-color, .smart-gift-room-prompt__media-fallback { width: 100%; height: 100%; display: block; } .smart-gift-room-prompt__media-img { object-fit: cover; } .smart-gift-room-prompt__media-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--popup-hover); } .smart-gift-room-prompt__media-fallback img { width: 46%; height: 46%; display: block; } .smart-gift-room-prompt__copy { grid-area: copy; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-right: 4px; } .smart-gift-room-prompt__title.header-auth-title { margin: 0; text-align: left; font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .smart-gift-room-prompt__desc.header-auth-subtitle { margin: 0; color: var(--color-ink); font-size: 16px; line-height: 1.34; } .smart-gift-room-prompt__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 2px; min-width: 0; } .smart-gift-room-prompt__primary.header-auth-primary { width: auto; min-width: 204px; height: 48px; min-height: 48px; padding: 0 24px; flex: 0 0 auto; font-size: 15px; } .smart-gift-room-prompt__primary.header-auth-primary, .smart-gift-room-prompt__primary.header-auth-primary:hover:not(:disabled):not(.is-disabled), .smart-gift-room-prompt__primary.header-auth-primary:focus-visible:not(:disabled):not(.is-disabled) { transform: none; box-shadow: none; } .smart-gift-room-prompt__primary.header-auth-primary .header-auth-btn-text { display: inline-block; position: relative; z-index: 1; transform: none; transition: none; white-space: nowrap; } .smart-gift-room-prompt__secondary.header-auth-help-link { position: relative; isolation: isolate; overflow: visible; width: auto; min-width: 104px; min-height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0; color: var(--color-ink); font-size: 14px; line-height: 1; text-align: center; text-decoration: none; transform: none; transition: color 0.22s ease; } .smart-gift-room-prompt__secondary.header-auth-help-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--popup-bg); box-shadow: none; z-index: -1; transform: scale(1); transform-origin: center; transition: box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease; pointer-events: none; } .smart-gift-room-prompt__secondary.header-auth-help-link:hover, .smart-gift-room-prompt__secondary.header-auth-help-link:focus-visible { color: var(--color-ink); transform: none; } .smart-gift-room-prompt__secondary.header-auth-help-link:hover::before, .smart-gift-room-prompt__secondary.header-auth-help-link:focus-visible::before { background: var(--popup-bg); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: none; } .smart-gift-room-prompt__secondary.header-auth-help-link:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } @media (max-width: 760px) { .smart-gift-room-prompt-overlay.header-auth-overlay { --header-auth-mobile-top: 0px; align-items: flex-end !important; justify-content: flex-start; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); overflow: visible; } .smart-gift-room-prompt-overlay.is-open:not(.is-loading-view), .smart-gift-room-prompt-overlay.is-closing:not(.is-loading-view) { align-items: flex-end; } .smart-gift-room-prompt__shell.header-auth-shell { width: min(344px, calc(100vw - 32px)); max-width: calc(100vw - 32px); height: auto; display: block; transform-origin: left bottom; } .smart-gift-room-prompt__close.header-auth-close { top: 6px; left: auto; right: 8px; bottom: auto; width: 44px; height: 44px; background: transparent; box-shadow: none; filter: none; z-index: 4; } .smart-gift-room-prompt.header-auth-card { min-height: 0; max-height: calc(100dvh - 28px); overflow-y: auto; display: grid; grid-template-columns: 82px minmax(0, 1fr); grid-template-areas: "media copy" "actions actions"; gap: 5px 10px; border-radius: 20px; padding: 8px 46px 8px 8px; align-items: start; } .smart-gift-room-prompt.header-auth-card::before { content: none; display: none; } .smart-gift-room-prompt__media { width: 100%; border-radius: 14px; } .smart-gift-room-prompt__title.header-auth-title { font-size: 16px; line-height: 1.08; } .smart-gift-room-prompt__desc.header-auth-subtitle { font-size: 11.5px; line-height: 1.2; } .smart-gift-room-prompt__actions { grid-column: 1 / -1; gap: 7px; margin-right: -38px; } .smart-gift-room-prompt__primary.header-auth-primary { min-width: 0; height: 32px; min-height: 32px; flex: 1 1 auto; padding: 0 11px; font-size: 11.5px; } .smart-gift-room-prompt__secondary.header-auth-help-link { min-width: 72px; min-height: 32px; padding: 0 9px; font-size: 11.5px; } .smart-gift-room-prompt__secondary.header-auth-help-link:hover::before, .smart-gift-room-prompt__secondary.header-auth-help-link:focus-visible::before { box-shadow: none; } } @media (max-width: 420px) { .smart-gift-room-prompt__shell.header-auth-shell { width: min(336px, calc(100vw - 32px)); } .smart-gift-room-prompt.header-auth-card { grid-template-columns: 78px minmax(0, 1fr); gap: 5px 8px; padding: 7px 44px 7px 7px; } .smart-gift-room-prompt__actions { margin-right: -37px; } .smart-gift-room-prompt__media { width: 100%; } .smart-gift-room-prompt__title.header-auth-title { font-size: 15px; line-height: 1.08; } } .favorite-commerce-card { position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); width: min(468px, calc(100vw - 36px)); min-height: 120px; box-sizing: border-box; display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px; color: var(--color-ink, #232030); background: var(--popup-bg, #FFF9F1); border: 1px solid rgba(35, 32, 48, 0.12); border-radius: 17px; box-shadow: 0 22px 60px rgba(35, 32, 48, 0.18), 0 4px 16px rgba(35, 32, 48, 0.08); transform: translateY(18px) scale(0.97); transform-origin: left bottom; opacity: 0; visibility: hidden; filter: blur(4px); pointer-events: none; z-index: 11020; transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s ease, visibility 0s linear 0.34s; } .favorite-commerce-card.is-visible { opacity: 1; visibility: visible; filter: blur(0); pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; } .favorite-commerce-card__media { position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 0; align-self: center; border-radius: 14px; background: linear-gradient(135deg, #F8F5ED 0%, #CFEAC0 100%); background-position: center; background-size: cover; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.08); } .favorite-commerce-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 249, 241, 0) 58%, rgba(35, 32, 48, 0.14) 100%); pointer-events: none; } .favorite-commerce-card__media-fallback { width: 100%; height: 100%; min-height: inherit; display: flex; align-items: center; justify-content: center; color: rgba(35, 32, 48, 0.72); font-family: var(--font-display, var(--font-heading)); font-size: 44px; font-weight: 700; line-height: 1; } .favorite-commerce-card__media.has-image .favorite-commerce-card__media-fallback { display: none; } .favorite-commerce-card__badge { position: absolute; left: 7px; bottom: 7px; width: 35px; height: 35px; border-radius: 999px; background: #D7F0C6; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(35, 32, 48, 0.18); z-index: 1; } .favorite-commerce-card.is-scarcity .favorite-commerce-card__badge { background: #D3132A; } .favorite-commerce-card.is-native-commerce .favorite-commerce-card__badge { background: var(--color-forest, #3F6A60); } .favorite-commerce-card__badge-icon { width: 18px; height: 18px; display: block; object-fit: contain; } .favorite-commerce-card.is-scarcity .favorite-commerce-card__badge-icon, .favorite-commerce-card.is-native-commerce .favorite-commerce-card__badge-icon { filter: brightness(0) saturate(100%) invert(96%) sepia(17%) saturate(434%) hue-rotate(302deg) brightness(104%) contrast(94%); } .favorite-commerce-card__body { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0; } .favorite-commerce-card__eyebrow { color: var(--color-forest, #3F6A60); font-family: var(--font-body); font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: 0; text-transform: uppercase; } .favorite-commerce-card__title { color: var(--color-ink, #232030); font-family: var(--font-body); font-size: 14px; font-weight: 750; line-height: 1.1; } .favorite-commerce-card__price { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 20px; } .favorite-commerce-card__price[hidden] { display: none !important; } .favorite-commerce-card__price-current, .favorite-commerce-card__price-old { font-family: var(--font-price, var(--font-display)); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; } .favorite-commerce-card__price-current { color: #3F6A20; font-size: 14px; font-weight: 800; } .favorite-commerce-card__price-old { color: var(--color-ink-soft, #6B667C); font-size: 13px; font-weight: 500; text-decoration: line-through; } .favorite-commerce-card__price-old[hidden], .favorite-commerce-card__price-badge[hidden] { display: none !important; } .favorite-commerce-card__price-badge { min-height: 18px; padding: 3px 7px; border-radius: 999px; background: var(--intent-brand-primary); color: var(--intent-brand-on); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 10px; font-weight: 850; line-height: 1; } .favorite-commerce-card__meta { color: #3F6A20; font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1.25; } .favorite-commerce-card.is-scarcity .favorite-commerce-card__meta, .favorite-commerce-card.is-planning .favorite-commerce-card__meta { color: var(--color-ink-soft, #5F596E); font-weight: 650; } .favorite-commerce-card__action { width: 100%; min-height: 36px; margin-top: 3px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--color-ink, #232030); color: var(--color-cream, #FFF9F1); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-family: var(--font-body); font-size: 12px; font-weight: 800; line-height: 1.18; cursor: pointer; transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .favorite-commerce-card__action-label { min-width: 0; } .favorite-commerce-card__action-icon { width: 14px; height: 14px; display: block; flex: 0 0 14px; object-fit: contain; filter: brightness(0) saturate(100%) invert(96%) sepia(17%) saturate(434%) hue-rotate(302deg) brightness(104%) contrast(94%); } .favorite-commerce-card__action:hover, .favorite-commerce-card__action:focus-visible { background: var(--color-ink, #232030); filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(35, 32, 48, 0.18); outline: none; } .favorite-commerce-card__action:focus-visible { outline: 2px solid rgba(63, 106, 96, 0.55); outline-offset: 3px; } .favorite-commerce-card__close.header-auth-close { top: 0; left: calc(100% + var(--popup-close-offset, 10px)); right: auto; width: var(--popup-close-width, 78px); height: var(--popup-close-height, 55px); margin: 0; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); } .favorite-commerce-card__close.header-auth-close:hover, .favorite-commerce-card__close.header-auth-close:focus-visible { background: var(--popup-close-hover-bg, var(--sort-control-bg)); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: var(--popup-close-hover-filter); } .favorite-commerce-card__close .header-auth-close-icon { width: var(--popup-close-icon-size, 17px); height: var(--popup-close-icon-size, 17px); display: block; object-fit: contain; } body.collection-modal-open { overflow: hidden; } @keyframes collection-modal-pop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes collection-toggle-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } } .collection-modal-overlay { position: fixed; inset: 0; background: rgba(35, 32, 48, 0.52); z-index: 12400; display: flex; align-items: center; justify-content: center; padding: 24px 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .collection-modal-overlay[hidden] { display: none !important; } .collection-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .collection-modal-shell { width: 578px; max-width: calc(100vw - 40px); position: relative; } .collection-modal__close { position: absolute; top: 0; left: calc(100% + var(--popup-close-offset, 10px)); right: auto; width: var(--popup-close-width, 78px); height: var(--popup-close-height, 55px); border: 0; border-radius: 999px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background-color 0.24s ease, filter 0.24s ease; } .collection-modal__close::before { content: none; } .collection-modal__close::after { content: none; } .collection-modal__close-icon { display: block !important; width: 17px; height: 17px; flex: 0 0 auto; filter: none; } .collection-modal__close:hover .collection-modal__close-icon, .collection-modal__close:focus-visible .collection-modal__close-icon { filter: none; } .collection-modal__close:hover, .collection-modal__close:focus-visible { background: var(--popup-hover); filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); } .collection-modal { width: 100%; background: var(--popup-bg-soft); border: 1px solid var(--popup-border); border-radius: 30px; box-shadow: var(--popup-shadow); padding: 20px; animation: collection-modal-pop 0.24s ease; } .collection-modal__title { text-align: center; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); padding: 0 56px; } .collection-modal__guest-note { margin-top: 18px; padding: 16px 18px; border-radius: 22px; background: #ece4db; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; } .collection-modal__guest-note-copy { min-width: 0; } .collection-modal__guest-note-title { color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1.2; } .collection-modal__guest-note-text { margin-top: 6px; color: #232030; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.45; } .collection-modal__guest-note-action { min-height: 42px; padding: 10px 18px; border: 0; border-radius: 999px; background: #232030; color: #f8f1eb; font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color 0.22s ease, transform 0.22s ease; } .collection-modal__guest-note-action:hover, .collection-modal__guest-note-action:focus-visible { background: #39415d; transform: translateY(-1px); } .collection-modal__cover { width: 159px; height: 105px; position: relative; margin: 18px auto 10px; display: block; } .collection-modal__cover-cell { position: absolute; border-radius: 15px; background: var(--popup-bg); overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.04); } .collection-modal__cover-cell--primary { left: 0; top: 0; width: 105px; height: 105px; } .collection-modal__cover-cell--secondary, .collection-modal__cover-cell--tertiary { display: block; width: 51px; height: 51px; left: 108px; } .collection-modal__cover-cell--secondary { top: 0; } .collection-modal__cover-cell--tertiary { top: 54px; } .collection-modal__cover-cell.has-color { box-shadow: none; } .collection-modal__cover-cell--primary.has-preview::before { content: ""; position: absolute; left: 0; bottom: 0; width: 35px; height: 35px; background: #DB0026; border-top-right-radius: 30px; z-index: 1; } .collection-modal__cover-cell--primary.has-preview::after { content: ""; position: absolute; left: 9px; bottom: 9px; width: 15px; height: 12px; background: center / contain no-repeat url("/assets/header-icons/collection-cover-heart.svg"); z-index: 2; } .collection-modal__field { position: relative; margin-top: 10px; padding-top: 8px; } .collection-modal__field-head { position: absolute; top: 2px; left: 22px; right: 22px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0; pointer-events: none; } .collection-modal__label, .collection-modal__counter { color: #232030; font-family: var(--font-body); font-size: 13px; line-height: 1.2; } .collection-modal__label { border-radius: 999px; background: var(--collection-modal-label-bg, var(--collection-modal-field-bg, var(--popup-bg))); padding: 0 6px; font-weight: 600; } .collection-modal__field > .collection-modal__label { position: absolute; top: 2px; left: 22px; z-index: 3; display: inline-flex; align-items: center; pointer-events: none; } .collection-modal__field--budget > .collection-modal__label { left: 78px; } .collection-modal__field--type { padding-top: 0; gap: 8px; } .collection-modal__field.collection-modal__field--type > .collection-modal__label, .collection-modal__label--section { position: static; left: auto; top: auto; z-index: auto; display: inline-flex; align-self: flex-start; margin: 0; padding: 0; border-radius: 0; background: transparent; pointer-events: auto; } .collection-modal__field--type .collection-modal__typegrid { margin-top: 0; } .collection-modal__field.is-error .collection-modal__label, .collection-modal__field--date.is-date-invalid > .collection-modal__label { color: var(--color-alert-red); } .collection-modal__counter { border-radius: 999px; background: var(--collection-modal-label-bg, var(--collection-modal-field-bg, var(--popup-bg))); padding: 0 6px; color: var(--color-ink-soft); font-weight: 400; } .collection-modal__input-shell { position: relative; height: 52px; background: var(--collection-modal-field-bg, var(--popup-bg)); box-shadow: inset 0 1px 2px rgba(35, 32, 48, 0.05); overflow: hidden; border-radius: 999px; border: 1.5px solid var(--control-border-resting, var(--popup-border-strong)); outline: 0; padding: 0 25px; display: flex; align-items: center; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .collection-modal__input-shell:focus-within { border-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .collection-modal__input-shell.is-filled { border-color: var(--control-border-resting, var(--popup-border-strong)); box-shadow: inset 0 1px 2px rgba(35, 32, 48, 0.05); } .collection-modal__input-shell.is-filled:focus-within { border-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .collection-modal__field.is-error .collection-modal__input-shell { border-color: var(--color-alert-red); background: var(--collection-modal-field-bg, var(--popup-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-alert-red) 11%, transparent); outline-color: transparent; } .collection-modal__field.is-error .collection-modal__input-shell:focus-within, .collection-modal__field.is-error .collection-modal__input-shell.is-filled { border-color: var(--color-alert-red); background: var(--collection-modal-field-bg, var(--popup-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-alert-red) 11%, transparent); outline-color: transparent; } .collection-modal__input { width: 100%; height: 100%; display: block; position: relative; z-index: 1; border: 0 !important; background: transparent !important; outline: 0 !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; border-radius: 0 !important; color: #232030; -webkit-text-fill-color: #232030; opacity: 1; caret-color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 46px; } .collection-modal__input::placeholder { color: var(--color-ink-soft); opacity: 1; } .collection-modal__input:focus, .collection-modal__input:focus-visible { outline: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; color: #232030 !important; -webkit-text-fill-color: #232030 !important; } .collection-modal__input::-webkit-textfield-decoration-container { padding: 0; } .collection-modal__input:-webkit-autofill, .collection-modal__input:-webkit-autofill:hover, .collection-modal__input:-webkit-autofill:focus, .collection-modal__input:-webkit-autofill:active { -webkit-text-fill-color: #232030 !important; box-shadow: 0 0 0 1000px transparent inset !important; -webkit-box-shadow: 0 0 0 1000px transparent inset !important; transition: background-color 9999s ease-out 0s; } .collection-modal__error { margin: 8px 0 0 10px; color: var(--color-alert-red); font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 17px; } .collection-modal__sections { margin-top: 34px; display: flex; flex-direction: column; gap: 30px; } .collection-modal__section { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .collection-modal__section-copy { flex: 1 1 auto; min-width: 0; } .collection-modal__section-title { color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.25; } .collection-modal__section-text { margin-top: 10px; color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.45; } .collection-modal__visibility { flex: 0 0 112px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .collection-modal__toggle-button { margin: 0; padding: 0; border: 0; background: transparent; display: block; width: 102px; height: 42px; line-height: 0; flex: 0 0 auto; cursor: pointer; appearance: none; } .collection-modal__toggle-button:focus-visible { outline: 1px solid rgba(35, 32, 48, 0.24); outline-offset: 4px; } .collection-modal__toggle { position: relative; display: block; width: 102px; height: 42px; border-radius: 999px; background: #F8F1EB; outline: 2px solid #232030; outline-offset: -2px; overflow: hidden; transition: background-color 0.24s ease, outline-color 0.24s ease; } .collection-modal__toggle-thumb { position: absolute; left: 4px; top: 4px; width: 63px; height: 34px; border-radius: 17px; background: #232030; transition: transform 0.24s cubic-bezier(0.23, 1.2, 0.32, 1), background-color 0.24s ease; } .collection-modal__toggle-off, .collection-modal__toggle-on { position: absolute; inset: 0; display: block; transition: opacity 0.22s ease; } .collection-modal__toggle-off-icon, .collection-modal__toggle-on-icon { position: absolute; display: block; line-height: 0; } .collection-modal__toggle-off-icon { left: 71px; top: 13px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } .collection-modal__toggle-off-icon::before { content: ""; width: 17px; height: 17px; display: block; flex: 0 0 auto; background: center / contain no-repeat url("/assets/header-icons/close.svg"); } .collection-modal__toggle-off-icon svg, .collection-modal__toggle-off-icon-image { display: none !important; } .collection-modal__toggle-on { opacity: 0; } .collection-modal__toggle-on-icon { left: 10px; top: 10px; width: 20px; height: 20px; } .collection-modal__toggle-on-icon-image { width: 17px; height: 14px; display: block; margin: 3px auto 0; } .collection-modal__visibility.is-private .collection-modal__toggle { background: #3f6a60; outline-color: #3f6a60; animation: collection-toggle-bounce 0.26s cubic-bezier(0.23, 1.2, 0.32, 1); } .collection-modal__visibility.is-private .collection-modal__toggle-thumb { transform: translateX(31px); background: var(--popup-bg); } .collection-modal__visibility.is-private .collection-modal__toggle-off { opacity: 0; } .collection-modal__visibility.is-private .collection-modal__toggle-on { opacity: 1; } .collection-modal__visibility-status { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; } .collection-modal__visibility-icon { width: 18px; height: 18px; flex: 0 0 18px; } .collection-modal__visibility-icon svg, .collection-modal__visibility-icon-image { width: 100%; height: 100%; display: block; } .collection-modal__visibility-text { color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.2; text-align: left; max-width: none; white-space: nowrap; } .collection-modal__footer { margin-top: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .collection-modal__cancel, .collection-modal__create { min-height: 54px; border-radius: 999px; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.2; transform: none; transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; } .collection-modal__cancel { min-width: 183px; padding: 17px 56px; border: 0; background: #f8f1eb; outline: 0; box-shadow: none; color: #232030; cursor: pointer; } .collection-modal__cancel:hover, .collection-modal__cancel:focus-visible { background: #f8f1eb; box-shadow: var(--shadow-card-hover); } .collection-modal__create { min-width: 228px; padding: 6px 27px; border: 0; background: #A5ACA7; color: #F8F1EB; cursor: not-allowed; } .collection-modal__create.is-enabled { background: #232030; color: var(--color-cream); cursor: pointer; } .collection-modal__create.is-enabled:hover, .collection-modal__create.is-enabled:focus-visible { background: #39415D; transform: none; box-shadow: none; } .collection-invite-modal-overlay { position: fixed; inset: 0; padding: 24px; background: var(--popup-overlay); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal-front, 13000); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .collection-invite-modal-overlay[hidden] { display: none !important; } .collection-invite-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .collection-invite-modal-shell { width: min(578px, 100%); } .collection-invite-modal { position: relative; width: 100%; max-height: min(760px, calc(100vh - 48px)); overflow: hidden; display: flex; flex-direction: column; background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 30px; box-shadow: var(--popup-shadow); padding: 20px 20px 18px; } .collection-invite-modal:focus { outline: 0; } .collection-invite-modal__sheet-grip { display: none; } .collection-invite-modal__back { position: absolute; left: 20px; top: 15px; width: 44px; height: 40px; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: none; } .collection-invite-modal__back:hover, .collection-invite-modal__back:focus-visible { background: transparent; box-shadow: none; outline: none; } .collection-invite-modal__back-icon { width: 22px; height: 14px; display: block; transition: transform 0.18s ease; } .collection-invite-modal__back:hover .collection-invite-modal__back-icon, .collection-invite-modal__back:focus-visible .collection-invite-modal__back-icon { transform: translateX(-4px); } .collection-invite-modal__title { text-align: center; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .collection-invite-modal__intro { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; } .collection-invite-modal__intro-title { color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.3; } .collection-invite-modal__intro-text { color: #232030; font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.45; } .collection-invite-modal__field { position: relative; margin-top: 20px; display: flex; flex-direction: column; gap: 0; padding-top: 8px; } .collection-invite-modal__field-head { position: absolute; top: 2px; left: 22px; right: 22px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; } .collection-invite-modal__label { border-radius: 999px; background: var(--collection-invite-modal-label-bg, var(--collection-invite-modal-field-bg, var(--popup-bg))); padding: 0 6px; color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.2; } .collection-invite-modal__input-shell { position: relative; height: 52px; background: var(--collection-invite-modal-field-bg, var(--popup-bg)); box-shadow: inset 0 1px 2px rgba(35, 32, 48, 0.05); overflow: visible; isolation: isolate; border-radius: 999px; border: 1.5px solid var(--control-border-resting, var(--popup-border-strong)); padding: 0 42px 0 40px; display: flex; align-items: center; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .collection-invite-modal__input-shell.is-active { border-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .collection-invite-modal__input-shell.is-active .collection-invite-modal__input-active-outline { opacity: 0; } .collection-invite-modal__input-icon { position: absolute; z-index: 1; left: 15px; top: 50%; width: 19px; height: 19px; line-height: 0; transform: translateY(-50%); } .collection-invite-modal__input-icon img { width: 19px; height: 19px; display: block; } .collection-invite-modal__input { width: 100%; height: 100%; margin: 0; padding: 0; border: 0 !important; background: transparent !important; color: #232030; caret-color: #232030; -webkit-text-fill-color: #232030; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1; outline: none !important; outline-offset: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; border-radius: 0 !important; appearance: none !important; -webkit-appearance: none !important; position: relative; z-index: 1; } .collection-invite-modal__input::placeholder { color: var(--color-ink-soft); opacity: 1; } .collection-invite-modal__input:focus, .collection-invite-modal__input:focus-visible { border: 0 !important; outline: none !important; outline-offset: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; color: #232030 !important; -webkit-text-fill-color: #232030 !important; } .collection-invite-modal__input::-webkit-search-decoration, .collection-invite-modal__input::-webkit-search-cancel-button, .collection-invite-modal__input::-webkit-search-results-button, .collection-invite-modal__input::-webkit-search-results-decoration { display: none; -webkit-appearance: none; } .collection-invite-modal__input::-webkit-textfield-decoration-container { padding: 0; } .collection-invite-modal__input:-webkit-autofill, .collection-invite-modal__input:-webkit-autofill:hover, .collection-invite-modal__input:-webkit-autofill:focus, .collection-invite-modal__input:-webkit-autofill:active { -webkit-text-fill-color: #232030 !important; box-shadow: 0 0 0 1000px transparent inset !important; -webkit-box-shadow: 0 0 0 1000px transparent inset !important; transition: background-color 9999s ease-out 0s; } .collection-invite-modal__input-clear { position: absolute; right: 7px; top: 7px; z-index: 1; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; display: none; align-items: center; justify-content: center; cursor: pointer; } .collection-invite-modal__input-clear.is-visible { display: inline-flex; } .collection-invite-modal__input-clear-icon { width: 12px; height: 12px; display: block; object-fit: contain; } .collection-invite-modal__input-active-outline { position: absolute; inset: -4px; border: 2px solid rgba(63, 106, 96, 0.65); border-radius: 999px; opacity: 0; transition: opacity 0.18s ease; pointer-events: none; z-index: 0; } .collection-invite-modal__results { margin-top: 22px; flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0; } .collection-invite-modal__person { position: relative; box-sizing: border-box; min-height: 60px; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px; border-radius: 14px; transition: background-color 0.18s ease; } .collection-invite-modal__person:hover, .collection-invite-modal__person:focus-within { background: var(--control-disabled-bg); } .collection-invite-modal__person-avatar { width: 50px; height: 50px; border-radius: 999px; background: var(--color-sand); display: inline-flex; align-items: center; justify-content: center; color: var(--color-ink); font-family: var(--font-display); font-size: 0.86rem; font-weight: 650; overflow: hidden; } .collection-invite-modal__person:nth-child(4n + 1) .collection-invite-modal__person-avatar { background: color-mix(in srgb, var(--color-sand-dark) 70%, var(--popup-bg)); } .collection-invite-modal__person:nth-child(4n + 2) .collection-invite-modal__person-avatar { background: linear-gradient(135deg, color-mix(in srgb, var(--color-forest) 28%, var(--popup-bg)), var(--color-forest)); color: var(--color-cream); } .collection-invite-modal__person:nth-child(4n + 3) .collection-invite-modal__person-avatar { background: color-mix(in srgb, var(--color-sand-dark) 42%, var(--popup-bg)); color: var(--color-forest-dark); } .collection-invite-modal__person:nth-child(4n) .collection-invite-modal__person-avatar { background: color-mix(in srgb, var(--color-ink-soft) 28%, var(--popup-bg)); color: var(--color-cream); } .collection-invite-modal__person-avatar.jp-profile-avatar-art { background: transparent !important; border: 0; box-shadow: none; color: var(--color-cream) !important; overflow: visible; padding: 0; } .collection-invite-modal__person-avatar.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 0.92em; } .collection-invite-modal__person-copy { min-width: 0; display: flex; flex-direction: column; gap: 0; } .collection-invite-modal__person-name, .collection-invite-modal__person-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink); font-family: var(--font-body); line-height: 1.1; } .collection-invite-modal__person-name { font-size: 0.86rem; font-weight: 700; } .collection-invite-modal__person-handle { color: var(--color-ink-soft); font-size: 0.78rem; font-weight: 500; } .collection-invite-modal__person-action { position: relative; min-width: 120px; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-heading); font-size: 0.82rem; font-weight: 800; cursor: pointer; isolation: isolate; overflow: visible; transition: color 0.18s ease; } .collection-invite-modal__person-action::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-forest); transition: background-color 0.18s ease, transform 0.18s ease; } .collection-invite-modal__person-action.is-added { color: var(--color-cream); } .collection-invite-modal__person-action.is-added::before { background: var(--color-ink); } .collection-invite-modal__person-action:hover, .collection-invite-modal__person-action:focus-visible { color: var(--popup-bg); outline: none; } .collection-invite-modal__person-action:hover::before, .collection-invite-modal__person-action:focus-visible::before { background: var(--color-forest-dark, var(--color-forest)); transform: scale(1.018); } .collection-invite-modal__person-action.is-added:hover, .collection-invite-modal__person-action.is-added:focus-visible { color: var(--popup-bg); } .collection-invite-modal__person-action.is-added:hover::before, .collection-invite-modal__person-action.is-added:focus-visible::before { background: var(--color-ink); } .collection-invite-modal__empty { min-height: 140px; display: flex; align-items: center; justify-content: center; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 13px; font-weight: 600; } @media (max-width: 760px) { .collection-invite-modal-overlay { --collection-invite-modal-mobile-top: clamp(84px, 13dvh, 128px); padding: calc(env(safe-area-inset-top, 0px) + var(--collection-invite-modal-mobile-top)) 0 0; align-items: flex-end; overflow: hidden; } .collection-invite-modal-shell { width: 100%; max-width: 100%; height: 100%; margin: 0; } .collection-invite-modal { width: 100%; height: 100%; max-height: none; border-radius: 22px 22px 0 0; padding: 0; overflow: hidden; scrollbar-gutter: auto; transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .collection-invite-modal-overlay:not(.is-open) .collection-invite-modal { transform: translateY(18px); will-change: transform; } .collection-invite-modal-overlay.is-sheet-dragging .collection-invite-modal { transform: translateY(var(--collection-invite-sheet-drag-y, 0px)); transition: none; will-change: transform; } .collection-invite-modal-overlay.is-sheet-settling .collection-invite-modal { transform: translateY(var(--collection-invite-sheet-drag-y, 0px)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .collection-invite-modal-overlay.is-sheet-closing .collection-invite-modal { transform: translateY(var(--collection-invite-sheet-drag-y, 0px)); transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .collection-invite-modal__sheet-grip { display: flex; flex: 0 0 var(--popup-sheet-grip-height, 44px); min-height: var(--popup-sheet-grip-height, 44px); align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; background: var(--popup-bg); } .collection-invite-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .collection-invite-modal-overlay.is-sheet-dragging .collection-invite-modal__sheet-grip { cursor: grabbing; } .collection-invite-modal__back { left: 14px; top: 42px; width: 44px; height: 36px; } .collection-invite-modal__title { min-height: 48px; padding: 4px 72px 0; display: flex; align-items: center; justify-content: center; font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .collection-invite-modal__intro { margin: 16px 16px 0; gap: 8px; } .collection-invite-modal__intro-title, .collection-invite-modal__intro-text { font-size: 14px; } .collection-invite-modal__field { margin: 18px 16px 0; } .collection-invite-modal__results { margin-top: 14px; padding: 0 9px 14px; scrollbar-width: none; -ms-overflow-style: none; } .collection-invite-modal__results::-webkit-scrollbar { width: 0; height: 0; } } @media (max-width: 460px) { .collection-invite-modal__title { padding: 4px 64px 0; font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .collection-invite-modal__person { min-height: 58px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; } .collection-invite-modal__person-avatar { width: 42px; height: 42px; font-size: 13px; } .collection-invite-modal__person-action { min-width: 96px; height: 36px; padding: 0 12px; } } @media (max-width: 360px) { .collection-invite-modal__person { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 7px; padding: 4px; } .collection-invite-modal__person-action { min-width: 86px; padding: 0 10px; font-size: 0.76rem; } .collection-invite-modal__person-name, .collection-invite-modal__person-handle { font-size: 12px; } } @media (max-width: 860px) { .favorite-toast.is-authenticated { width: calc(100vw - 24px); grid-template-columns: 48px minmax(0, 1fr); row-gap: 8px; padding: 10px 12px; } .favorite-toast.is-authenticated .favorite-toast__action { grid-column: 1 / -1; width: 100%; justify-self: stretch; } } @media (max-width: 640px) { .favorite-toast { bottom: 16px; width: calc(100vw - 24px); min-height: auto; grid-template-columns: 48px minmax(0, 1fr); row-gap: 8px; padding: 12px; align-items: flex-start; } body.has-mobile-header .favorite-toast { bottom: calc(var(--mobile-bottom-nav-height, 72px) + 12px); } .favorite-toast__icon { width: 48px; height: 48px; flex-basis: 48px; } .favorite-toast__content { padding-top: 1px; gap: 4px; } .favorite-toast__title { font-size: 15px; } .favorite-toast__subtitle { font-size: 13px; } .favorite-toast__action { grid-column: 1 / -1; width: 100%; min-height: 44px; margin-top: 2px; font-size: 14px; } .favorite-toast.is-remove { width: min(360px, calc(100vw - 24px)); min-height: 76px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 14px 20px; } .favorite-toast.is-remove .favorite-toast__icon { display: none; } .favorite-commerce-card { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 24px)); min-height: 0; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; padding: 8px 52px 8px 8px; border-radius: 16px; touch-action: none; } .favorite-commerce-card__media { aspect-ratio: 1 / 1; min-height: 0; border-radius: 14px; } .favorite-commerce-card__badge { left: 6px; bottom: 6px; width: 34px; height: 34px; } .favorite-commerce-card__badge-icon { width: 18px; height: 18px; } .favorite-commerce-card__body { gap: 3px; } .favorite-commerce-card__eyebrow { font-size: 9px; } .favorite-commerce-card__title { font-size: 12px; line-height: 1.08; } .favorite-commerce-card__price { min-height: 17px; gap: 4px; } .favorite-commerce-card__price-current { font-size: 12px; } .favorite-commerce-card__price-old { font-size: 10px; } .favorite-commerce-card__price-badge { min-height: 16px; padding: 2px 5px; font-size: 9px; } .favorite-commerce-card__meta { font-size: 9px; line-height: 1.16; } .favorite-commerce-card__action { min-height: 32px; margin-top: 2px; padding: 6px 10px; font-size: 10px; } .favorite-commerce-card__close.header-auth-close { top: 8px; left: auto; right: 8px; bottom: auto; width: 44px; height: 44px; background: transparent; box-shadow: none; filter: none; z-index: 4; } .collection-modal-overlay { padding: 18px 12px; } .collection-modal-shell { max-width: calc(100vw - 24px); } .collection-modal__close { top: 14px; left: auto; right: 14px; width: 57px; height: 42px; background: transparent; } .collection-modal__close:hover, .collection-modal__close:focus-visible { background: var(--popup-hover); filter: none; } .collection-modal { padding: 28px 16px 16px; } .collection-modal__title { padding-right: 40px; font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .collection-modal__guest-note { grid-template-columns: 1fr; gap: 12px; padding: 14px 14px 16px; } .collection-modal__guest-note-action { width: 100%; justify-self: stretch; } .collection-modal__privacy { flex-direction: column; gap: 18px; } .collection-modal__footer { flex-direction: column-reverse; gap: 12px; } .collection-modal__cancel, .collection-modal__create { width: 100%; min-width: 0; justify-content: center; } } .collection-modal-overlay { background: rgba(35, 32, 48, 0.64); display: flex; align-items: center; justify-content: center; padding: 80px 20px 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } .collection-modal-shell { position: relative; width: min(100%, 640px); max-width: calc(100vw - 40px); margin: 0; } .collection-modal { width: 100%; max-height: calc(100dvh - 36px); overflow: hidden; overscroll-behavior: contain; background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 30px; box-shadow: var(--popup-shadow); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; color: #232030; scrollbar-gutter: stable; } .collection-modal:focus { outline: 0; } .collection-modal__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; margin: -6px; padding: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .collection-modal__close { position: absolute; top: 0; left: calc(100% + 10px); right: auto; width: 78px; height: 55px; border: 0; border-radius: 999px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); cursor: pointer; z-index: 2; transition: background-color 0.24s ease, filter 0.24s ease; will-change: transform; } .collection-modal__close:hover, .collection-modal__close:focus-visible { background: var(--popup-close-hover-bg, var(--sort-control-bg)); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: var(--popup-close-hover-filter); } .collection-modal__close:active { transform: none; } .collection-modal__close:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .collection-modal__close-icon { position: absolute; left: 50%; top: 50%; width: var(--popup-close-icon-size, 17px); height: var(--popup-close-icon-size, 17px); display: block; transform: translate(-50%, -50%); pointer-events: none; } .collection-modal__sheet-grip { display: none; } .collection-modal__title { margin: 0; padding: 0; text-align: left; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)) !important; font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .collection-modal__subtitle { margin: -4px 0 0; padding: 0; color: #232030; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.35; } .collection-modal__guest { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; background: #EEE5DA; border-radius: 18px; } .collection-modal__guest[hidden] { display: none !important; } .collection-modal__guest-copy { min-width: 0; } .collection-modal__guest-title { margin: 0 0 4px; color: #222031; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; } .collection-modal__guest-text { color: #222031; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.35; } .collection-modal__guest-action { position: relative; isolation: isolate; min-height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: #232030; color: #FAF1EA; cursor: pointer; font-size: 15px; font-weight: 700; white-space: nowrap; } .collection-modal__guest-action::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #232030; z-index: -1; transform: scale(1); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .collection-modal__guest-action:hover::before, .collection-modal__guest-action:focus-visible::before { transform: scale(1.04); } .collection-modal__field { position: relative; display: flex; flex-direction: column; gap: 0; margin-top: 0; padding-top: 8px; } .collection-modal__field--date { position: relative; } .collection-modal__field-head { position: absolute; top: 2px; left: 22px; right: 22px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0; pointer-events: none; } .collection-modal__label, .collection-modal__counter { color: #232030; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 13px; line-height: 1.2; } .collection-modal__label { border-radius: 999px; background: var(--collection-modal-label-bg, var(--collection-modal-field-bg, var(--popup-bg))); padding: 0 6px; font-weight: 700; } .collection-modal__field > .collection-modal__label { position: absolute; top: 2px; left: 22px; z-index: 3; display: inline-flex; align-items: center; pointer-events: none; } .collection-modal__field--budget > .collection-modal__label { left: 78px; } .collection-modal__field--type { padding-top: 0; gap: 8px; } .collection-modal__field.collection-modal__field--type > .collection-modal__label, .collection-modal__label--section { position: static; left: auto; top: auto; z-index: auto; display: inline-flex; align-self: flex-start; margin: 0; padding: 0; border-radius: 0; background: transparent; pointer-events: auto; } .collection-modal__field--type .collection-modal__typegrid { margin-top: 0; } .collection-modal__field.is-error .collection-modal__label, .collection-modal__field--date.is-date-invalid > .collection-modal__label { color: var(--color-alert-red); } .collection-modal__counter { border-radius: 999px; background: var(--collection-modal-label-bg, var(--collection-modal-field-bg, var(--popup-bg))); padding: 0 6px; color: #4A465D; font-weight: 600; } .collection-modal__typegrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 0; } .collection-modal__type-chip { min-width: 0; height: 74px; padding: 6px 4px; border: 0; border-radius: 10px; background: transparent; color: #232030; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; } .collection-modal__type-chip:hover, .collection-modal__type-chip:focus-visible { box-shadow: var(--shadow-card-hover); } .collection-modal__type-chip.is-selected { background: transparent; color: #3F6A60; } .collection-modal__type-chip-icon { width: 32px; height: 32px; display: block; flex-shrink: 0; pointer-events: none; background: currentColor; -webkit-mask: var(--collection-type-icon) center / contain no-repeat; mask: var(--collection-type-icon) center / contain no-repeat; } .collection-modal__type-chip[data-type="other"] .collection-modal__type-chip-icon { --collection-type-icon: url("/assets/event-type-icons/other.svg"); } .collection-modal__type-chip[data-type="birthday"] .collection-modal__type-chip-icon { --collection-type-icon: url("/assets/event-type-icons/birthday.svg"); } .collection-modal__type-chip[data-type="wedding"] .collection-modal__type-chip-icon { --collection-type-icon: url("/assets/event-type-icons/wedding.svg"); } .collection-modal__type-chip[data-type="anniversary"] .collection-modal__type-chip-icon { --collection-type-icon: url("/assets/event-type-icons/anniversary.svg"); } .collection-modal__type-chip[data-type="holiday"] .collection-modal__type-chip-icon { --collection-type-icon: url("/assets/event-type-icons/holiday.svg"); } .collection-modal__type-chip[data-type="baby"] .collection-modal__type-chip-icon { --collection-type-icon: url("/assets/event-type-icons/baby.svg"); } .collection-modal__type-chip-label { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; line-height: 1.1; text-align: center; pointer-events: none; } .collection-modal__input-shell, .collection-modal__budget-shell, .collection-modal__date-shell { background: var(--collection-modal-field-bg, var(--popup-bg)); border: 1.5px solid var(--control-border-resting, var(--popup-border-strong)); outline: 0; box-shadow: inset 0 1px 2px rgba(35, 32, 48, 0.05); } .collection-modal__input-shell { position: relative; height: 52px; border-radius: 999px; padding: 0; display: flex; align-items: center; overflow: hidden; } .collection-modal__input-shell:focus-within, .collection-modal__budget-shell:focus-within, .collection-modal__date-shell:focus-within { border-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); outline: 0; } .collection-modal__budget-shell:focus-within { box-shadow: inset 0 1px 2px rgba(35, 32, 48, 0.05); } .collection-modal__input { width: 100%; height: 100%; border: 0 !important; background: transparent !important; outline: 0 !important; box-shadow: none !important; padding: 0 22px; color: #232030; -webkit-text-fill-color: #232030; caret-color: #232030; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: normal; } .collection-modal__input::placeholder { color: #4A465D; opacity: 0.72; } .collection-modal__row { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 16px; align-items: end; } .collection-modal__date-shell { position: relative; height: 48px; border-radius: 999px; display: flex; align-items: center; gap: 8px; padding: 0 18px; overflow: hidden; } .collection-modal__date-shell.has-date { padding-right: 58px; } .collection-modal__date-clear { position: absolute; right: 8px; top: 50%; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--intent-text-primary); display: inline-flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.92); transition: opacity 0.15s ease, transform 0.15s ease; } .collection-modal__date-clear img { width: 12px; height: 12px; display: block; object-fit: contain; } .collection-modal__date-shell.has-date .collection-modal__date-clear { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); } .collection-modal__date-shell { cursor: text; } .collection-modal__date-input { flex: 1 1 auto; min-width: 0; appearance: none; -webkit-appearance: none; border: 0 !important; background: transparent !important; outline: 0 !important; box-shadow: none !important; color: #232030; -webkit-text-fill-color: #232030; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1; cursor: text; caret-color: var(--popup-focus, #3F6A60); } .collection-modal__date-input[type="date"] { appearance: auto; -webkit-appearance: auto; min-height: 100%; padding: 0; cursor: pointer; color-scheme: light; } .collection-modal__date-input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.78; } .collection-modal__date-input:focus, .collection-modal__date-input:focus-visible { appearance: none; -webkit-appearance: none; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } .collection-modal__date-input[type="date"]:focus, .collection-modal__date-input[type="date"]:focus-visible { appearance: auto; -webkit-appearance: auto; } .collection-modal__date-input::placeholder { color: #4A465D; opacity: 0.55; font-weight: 500; } .collection-modal__date-shell:focus-within { border-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .collection-modal__field--date.is-date-invalid .collection-modal__date-shell { border-color: var(--intent-feedback-alert-strong); } .collection-modal__budget { display: flex; align-items: center; gap: 8px; } .collection-modal__budget-step { width: 48px; height: 48px; flex: 0 0 48px; border: 2px solid var(--control-border-resting, var(--popup-border-strong)); border-radius: 999px; background: var(--popup-bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.18s ease, border-color 0.18s ease; } .collection-modal__budget-step:hover, .collection-modal__budget-step:focus-visible { background: var(--popup-bg-soft); border-color: var(--color-forest); } .collection-modal__budget-step-icon { width: 26px; height: 26px; display: block; object-fit: contain; pointer-events: none; } .collection-modal__budget-step-icon--minus { width: 30px; height: 8px; object-fit: fill; } .collection-modal__budget-shell { height: 48px; min-width: 0; flex: 1 1 auto; border-radius: 999px; display: flex; align-items: center; } .collection-modal__budget-input { width: 100%; height: 100%; border: 0; background: transparent; outline: 0; padding: 0 14px; color: #232030; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 15px; font-weight: 700; text-align: center; } .collection-modal__budget-input:focus, .collection-modal__budget-input:focus-visible { outline: 0 !important; box-shadow: none !important; } .collection-modal__budget-input::placeholder { color: #8D8A94; } .collection-modal__section { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; } .collection-modal__row + .collection-modal__section { margin-top: 10px; } .collection-modal__section-copy { min-width: 0; flex: 1 1 auto; } .collection-modal__section-title { margin: 0 0 4px; color: #232030; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; } .collection-modal__section-text { margin: 0; color: #232030; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.34; } .collection-modal__visibility, .collection-modal__collab-controls { flex: 0 0 auto; } .collection-modal__visibility { width: 112px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .collection-modal__visibility-status { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; color: #232030; font-size: 13px; font-weight: 600; line-height: 1.08; } .collection-modal__visibility-icon { width: 18px; height: 18px; flex: 0 0 18px; } .collection-modal__visibility-text { max-width: none; color: #232030; font-family: var(--font-body, system-ui), system-ui, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.08; text-align: left; white-space: nowrap; } .collection-modal__toggle { position: relative; display: block; width: 82px; height: 44px; border: 0; border-radius: 999px; background: transparent; outline: 0; padding: 0; overflow: visible; cursor: pointer; flex: 0 0 auto; } .collection-modal__toggle-track { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border: 2px solid #232030; border-radius: 999px; background: #FAF1EA; transition: background-color 0.2s ease, border-color 0.2s ease; } .collection-modal__toggle-thumb { position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 999px; background: #232030; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease; } .collection-modal__toggle.is-on .collection-modal__toggle-thumb { transform: translateX(40px); } .collection-modal__toggle-icon { position: absolute; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .collection-modal__toggle-icon img { width: 100%; height: 100%; display: block; } .collection-modal__toggle-icon--off { right: 12px; opacity: 1; } .collection-modal__toggle-icon--on { left: 12px; } .collection-modal__toggle.is-on .collection-modal__toggle-icon--off { opacity: 0; } .collection-modal__toggle.is-on .collection-modal__toggle-icon--on { opacity: 1; } .collection-modal__toggle--visibility { width: 87px; height: 44px; display: flex; align-items: center; } .collection-modal__toggle--visibility .collection-modal__toggle-track { height: 36px; background: #FAF1EA; border: 0; outline: 2px solid #232030; outline-offset: -2px; } .collection-modal__toggle--visibility .collection-modal__toggle-thumb { top: 4px; left: 4px; width: 54px; height: 28px; border-radius: 14px; z-index: 2; } .collection-modal__toggle--visibility .collection-modal__toggle-icon { z-index: 1; } .collection-modal__toggle--visibility .collection-modal__toggle-icon--off { right: 11px; } .collection-modal__toggle--visibility .collection-modal__toggle-icon--on { left: 8px; width: 17px; height: 17px; color: var(--popup-bg, var(--color-cream)); } .collection-modal__toggle--visibility .collection-modal__toggle-icon--on img { display: none; } .collection-modal__toggle--visibility .collection-modal__toggle-icon--on::before { content: ""; width: 17px; height: 14px; display: block; background: currentColor; -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; } .collection-modal__toggle--visibility.is-on .collection-modal__toggle-track { background: #3F6A60; outline-color: #3F6A60; } .collection-modal__toggle--visibility.is-on .collection-modal__toggle-thumb { background: #FAF1EA; transform: translateX(25px); } .collection-modal__toggle--collab { position: relative; width: 83px; min-width: 83px; height: 54px; border: 0; border-radius: 999px; background: transparent; display: inline-flex; align-items: center; justify-content: center; outline: 0; isolation: isolate; overflow: visible; } .collection-modal__toggle--collab::before { content: ""; position: relative; z-index: 1; width: 31px; height: 31px; background: center / contain no-repeat url("/assets/header-icons/collection-collaborator-add.svg"); display: block; } .collection-modal__toggle--collab::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #EEE5DA; transform: scale(1); transition: transform 0.22s ease-out, background-color 0.18s ease; } .collection-modal__toggle--collab:hover, .collection-modal__toggle--collab:focus-visible { transform: none; } .collection-modal__toggle--collab:hover::after, .collection-modal__toggle--collab:focus-visible::after { transform: scale(1.06); } .collection-modal__toggle--collab .collection-modal__toggle-track { display: none; } .collection-modal__toggle--collab .collection-modal__toggle-thumb { display: none; } .collection-modal__toggle--collab.is-on { background: transparent; } .collection-modal__toggle--collab.is-on::after { background: #DCDDD3; } .collection-modal__collab-controls { display: flex; align-items: center; gap: 10px; } .collection-modal__footer { flex: 0 0 auto; position: relative; bottom: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px -22px -22px; padding: 10px 22px 22px; background: var(--popup-bg); border-top: 1px solid var(--popup-border); } .collection-modal__cancel, .collection-modal__create { position: relative; isolation: isolate; min-width: 0; margin-top: 4px; min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #232030; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1.2; } .collection-modal__create::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #3F6A60; z-index: -1; transform: scale(1); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .collection-modal__create:hover:not(:disabled):not([aria-disabled="true"])::before, .collection-modal__create.is-enabled:hover::before, .collection-modal__create.is-enabled:focus-visible::before { transform: scale(1.04); } .collection-modal__create:disabled::before, .collection-modal__create[aria-disabled="true"]::before { background: var(--control-disabled-bg); transform: none; } .collection-modal__cancel { background: var(--popup-bg); } .collection-modal__cancel:hover, .collection-modal__cancel:focus-visible { background: var(--popup-bg); box-shadow: 0 0 4px rgba(35, 32, 48, 0.42); } .collection-modal__cancel:active { background: var(--popup-bg); } .collection-modal__create, .collection-modal__create.is-enabled { background: #3F6A60; color: #FAF1EA; } .collection-modal__create:disabled, .collection-modal__create[aria-disabled="true"] { background: var(--control-disabled-bg); color: var(--control-disabled-text); cursor: not-allowed; transform: none; } @media (max-width: 820px) { .collection-modal-overlay { padding: 85px 16px 24px; } .collection-modal-shell { max-width: calc(100vw - 24px); } .collection-modal__close { top: auto; left: auto; right: 0; bottom: calc(100% + 10px); width: 78px; height: 55px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); } .collection-modal__title { padding: 0; text-align: left; } } @media (max-width: 720px) { .collection-modal-overlay { --collection-modal-mobile-top: clamp(84px, 13dvh, 128px); --collection-modal-mobile-offset: calc(env(safe-area-inset-top, 0px) + var(--collection-modal-mobile-top)); height: 100vh; height: 100dvh; min-height: 0; padding: var(--collection-modal-mobile-offset) 0 0; align-items: flex-end; overflow: hidden; } .collection-modal-shell { width: 100%; max-width: 100%; height: calc(100vh - var(--collection-modal-mobile-offset)); height: calc(100dvh - var(--collection-modal-mobile-offset)); min-height: 0; margin: 0; display: flex; flex-direction: column; } .collection-modal { width: 100%; height: auto; flex: 1 1 auto; border-radius: 22px 22px 0 0; max-height: none; min-height: 0; padding: 0; gap: 0; overflow: hidden; scrollbar-gutter: auto; transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .collection-modal-overlay:not(.is-open) .collection-modal { transform: translateY(18px); will-change: transform; } .collection-modal-overlay.is-sheet-dragging .collection-modal { transform: translateY(var(--collection-sheet-drag-y, 0px)); transition: none; will-change: transform; } .collection-modal-overlay.is-sheet-settling .collection-modal { transform: translateY(var(--collection-sheet-drag-y, 0px)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .collection-modal-overlay.is-sheet-closing .collection-modal { transform: translateY(var(--collection-sheet-drag-y, 0px)); transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .collection-modal__sheet-grip { display: flex; flex: 0 0 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 { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .collection-modal-overlay.is-sheet-dragging .collection-modal__sheet-grip { cursor: grabbing; } .collection-modal__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; margin: 0 -6px; padding: 4px 22px 12px; display: flex; flex-direction: column; gap: 12px; scrollbar-gutter: auto; scrollbar-width: none; -ms-overflow-style: none; } .collection-modal__body::-webkit-scrollbar { width: 0; height: 0; } .collection-modal__close { display: none; } .collection-modal__title { font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); padding-right: 0; } .collection-modal__subtitle { font-size: 13px; } .collection-modal__guest { grid-template-columns: 1fr; align-items: stretch; } .collection-modal__guest-action { justify-self: start; } .collection-modal__typegrid { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: -8px -8px -6px; padding: 8px 8px 10px; } .collection-modal__typegrid::-webkit-scrollbar { display: none; } .collection-modal__type-chip { flex: 0 0 86px; height: 68px; scroll-snap-align: start; } .collection-modal__row { grid-template-columns: 1fr; gap: 12px; } .collection-modal__footer { flex-direction: row; gap: 10px; flex: 0 0 auto; position: relative; bottom: 0; z-index: 20; margin: 0; padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--popup-bg); box-shadow: 0 -10px 22px rgba(35, 32, 48, 0.08); } .collection-modal__cancel, .collection-modal__create { flex: 1; min-width: 0; padding: 0 16px; min-height: 48px; } } @media (max-width: 460px) { .collection-modal-overlay { --collection-modal-mobile-top: clamp(84px, 13dvh, 128px); } .collection-modal-shell { max-width: 100%; } .collection-modal { height: auto; flex: 1 1 auto; max-height: none; min-height: 0; padding: 0; } .collection-modal__body { padding: 4px 20px 12px; } .collection-modal__title { padding: 0; font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); text-align: left; } .collection-modal__typegrid { gap: 6px; } .collection-modal__type-chip { height: 68px; } .collection-modal__section { align-items: flex-start; gap: 12px; } .collection-modal__visibility { width: 87px; } .collection-modal__date-input, .collection-modal__budget-input { font-size: 16px; } .collection-modal__close { display: none; } .collection-modal__footer { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding-right: 14px; padding-left: 14px; } .collection-modal__cancel, .collection-modal__create { min-height: 46px; font-size: 15px; } } @media (max-width: 760px) { .card-board-menu { --card-board-menu-mobile-top: clamp(84px, 13dvh, 128px); --card-board-menu-right-extension: 0px; top: calc(env(safe-area-inset-top, 0px) + var(--card-board-menu-mobile-top)) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; width: 100% !important; max-width: 100% !important; max-height: none !important; border-radius: var(--popup-sheet-radius, 22px 22px 0 0); box-shadow: 0 -8px 28px rgba(35, 32, 48, 0.22); transform: none !important; transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .card-board-menu__desktop-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .card-board-menu__product { display: none !important; } .card-board-menu__panel { flex: 1 1 auto; min-height: 0; } .card-board-menu__header { padding: 8px 7px 7px; } .card-board-menu__title { padding-bottom: 7px; font-size: 13px; } .card-board-menu.is-sheet-dragging { transform: translateY(var(--card-board-sheet-drag-y, 0px)) !important; transition: none; will-change: transform; } .card-board-menu.is-sheet-settling { transform: translateY(var(--card-board-sheet-drag-y, 0px)) !important; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .card-board-menu.is-sheet-closing { transform: translateY(var(--card-board-sheet-drag-y, 0px)) !important; transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .card-board-menu__sheet-grip { display: flex; flex: 0 0 var(--popup-sheet-grip-height, 44px); min-height: var(--popup-sheet-grip-height, 44px); align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; background: var(--popup-bg); } .card-board-menu__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .card-board-menu.is-sheet-dragging .card-board-menu__sheet-grip { cursor: grabbing; } .card-board-menu__body { padding: 7px; scrollbar-width: none; -ms-overflow-style: none; } .card-board-menu__item, .card-board-menu__profile { min-height: 50px; overflow: hidden; contain: paint; } .card-board-menu__item { height: auto; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 7px; border-radius: 13px; } .card-board-menu__item-cover, .card-board-menu__profile-icon { width: 40px; height: 40px; border-radius: 11px; } .card-board-menu__profile { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 7px; border-radius: 13px; } .card-board-menu__profile-icon img { width: 20px; height: 20px; } .card-board-menu__item-trailing { min-width: auto; } .card-board-menu__item-save { display: none; } .card-board-menu__profile-save { min-width: 78px; height: 32px; } .card-board-menu__footer { height: 64px; padding: 8px 7px 7px; } .card-board-menu__create { height: 48px; padding-left: 78px; } .card-board-menu__create-icon { width: 52px; height: 38px; } .card-board-menu__body::-webkit-scrollbar { width: 0; height: 0; } .card-board-menu-backdrop { background: var(--popup-overlay); } } /* [bundle] /styles/components/product-action-pills.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :is( .cat-card__hover-board, .cat-card__hover-save, .personalized-card__hover-board, .personalized-card__hover-save, .christmas-special-product-card__hover-board, .listing-side-card__tag, .listing-side-card__save ) { --product-action-unit-x: 1px; --product-action-unit-y: 1px; --product-action-hover-scale: 1.035; --product-action-ink-wash: color-mix(in srgb, var(--color-ink) 46%, transparent); --product-action-ink-wash-strong: color-mix(in srgb, var(--color-ink) 56%, transparent); } @media (hover: hover) and (pointer: fine) { :is( .cat-card__media, .personalized-card__media, .christmas-special-product-card__media ) { isolation: isolate; } :is( .cat-card__media, .personalized-card__media, .christmas-special-product-card__media )::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-ink) 44%, transparent) 0%, color-mix(in srgb, var(--color-ink) 24%, transparent) 32%, transparent 68% ); transition: opacity 0.22s ease; } :is( .cat-card:hover .cat-card__media, .cat-card:has(:focus-visible) .cat-card__media, .cat-card.is-actions-open .cat-card__media, .personalized-card:hover .personalized-card__media, .personalized-card:has(:focus-visible) .personalized-card__media, .personalized-card.is-actions-open .personalized-card__media, .christmas-special-product-card:hover .christmas-special-product-card__media, .christmas-special-product-card:has(:focus-visible) .christmas-special-product-card__media, .christmas-special-product-card.is-actions-open .christmas-special-product-card__media )::after { opacity: 1; } } .cat-card__hover-board, .cat-card__hover-save { --product-action-unit-x: var(--cat-card-unit-x, 1px); --product-action-unit-y: var(--cat-card-unit-y, 1px); } :is( .cat-card__hover-board, .personalized-card__hover-board, .christmas-special-product-card__hover-board, .listing-side-card__tag ) { --product-action-board-height: 38; --product-action-board-min-width: 124; --product-action-board-max-width: 150; --product-action-board-pad-y: 6; --product-action-board-pad-x: 15; --product-action-board-gap: 10; --product-action-board-label-size: 11; --product-action-board-label-weight: 650; --product-action-board-icon-width: 12; --product-action-board-icon-height: 12; --product-action-board-bg: var(--intent-surface-sunken); --product-action-board-active-bg: transparent; --product-action-board-active-bg-strong: var(--product-action-ink-wash-strong); } :is( .cat-card__hover-board, .personalized-card__hover-board, .christmas-special-product-card__hover-board ) { --product-action-board-bg: transparent; --product-action-board-label-size: 13; --product-action-board-label-weight: 700; } .listing-side-card__tag { --product-action-board-height: 35; --product-action-board-min-width: 104; --product-action-board-max-width: 104; --product-action-board-pad-x: 10; --product-action-board-gap: 7; --product-action-board-label-size: 10.5; --product-action-board-icon-width: 11; --product-action-board-icon-height: 11; } .personalized-card__hover-board { --product-action-board-min-width: 102; --product-action-board-max-width: 132; --product-action-board-pad-x: 12; --product-action-board-gap: 7; } :is( .cat-card__hover-save, .personalized-card__hover-save, .listing-side-card__save ) { --product-action-save-height: 38; --product-action-save-min-width: 84; --product-action-save-pad-y: 6; --product-action-save-pad-x: 15; --product-action-save-gap: 10; --product-action-save-label-size: 13; --product-action-save-label-weight: 600; --product-action-save-icon-width: 17; --product-action-save-icon-height: 18; --product-action-save-bg: var(--color-forest); } .listing-side-card__save { --product-action-save-height: 35; --product-action-save-min-width: 78; --product-action-save-pad-x: 13; --product-action-save-gap: 8; --product-action-save-label-size: 12; --product-action-save-icon-width: 15; --product-action-save-icon-height: 16; } .personalized-card__hover-save { --product-action-save-pad-x: 12; --product-action-save-gap: 8; } :is( .cat-card__hover-board, .personalized-card__hover-board, .christmas-special-product-card__hover-board, .listing-side-card__tag ) { min-width: calc(var(--product-action-board-min-width) * var(--product-action-unit-x)); width: auto; max-width: calc(var(--product-action-board-max-width) * var(--product-action-unit-x)); height: calc(var(--product-action-board-height) * var(--product-action-unit-y)); padding: calc(var(--product-action-board-pad-y) * var(--product-action-unit-y)) calc(var(--product-action-board-pad-x) * var(--product-action-unit-x)); border: 0; border-radius: 999px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: calc(var(--product-action-board-gap) * var(--product-action-unit-x)); overflow: visible; cursor: pointer; font-family: var(--font-heading); font-weight: var(--product-action-board-label-weight); line-height: 1; white-space: nowrap; background: transparent; color: var(--color-ink); isolation: isolate; flex: 1 1 auto; } :is( .cat-card__hover-board, .personalized-card__hover-board, .christmas-special-product-card__hover-board ) { color: var(--color-cream); } :is( .cat-card__hover-save, .personalized-card__hover-save, .listing-side-card__save ) { min-width: calc(var(--product-action-save-min-width) * var(--product-action-unit-x)); width: auto; height: calc(var(--product-action-save-height) * var(--product-action-unit-y)); padding: calc(var(--product-action-save-pad-y) * var(--product-action-unit-y)) calc(var(--product-action-save-pad-x) * var(--product-action-unit-x)); border: 0; border-radius: 999px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--product-action-save-gap) * var(--product-action-unit-x)); overflow: visible; cursor: pointer; font-family: var(--font-heading); line-height: 1; white-space: nowrap; background: transparent; color: var(--color-cream); isolation: isolate; flex: 0 0 auto; } :is( .cat-card__hover-board, .personalized-card__hover-board, .christmas-special-product-card__hover-board, .listing-side-card__tag )::before, :is( .cat-card__hover-save, .personalized-card__hover-save, .listing-side-card__save )::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; transform: scale(1); transform-origin: center; transition: transform 0.18s ease; } :is( .cat-card__hover-board, .personalized-card__hover-board, .christmas-special-product-card__hover-board, .listing-side-card__tag )::before { background: var(--product-action-board-bg); } :is( .cat-card__hover-save, .personalized-card__hover-save, .listing-side-card__save )::before { background: var(--product-action-save-bg); } :is( .cat-card__hover-board, .personalized-card__hover-board, .christmas-special-product-card__hover-board, .listing-side-card__tag ):hover::before, :is( .cat-card__hover-board, .personalized-card__hover-board, .christmas-special-product-card__hover-board, .listing-side-card__tag ):focus-visible::before, :is( .cat-card__hover-save, .personalized-card__hover-save, .listing-side-card__save ):hover::before, :is( .cat-card__hover-save, .personalized-card__hover-save, .listing-side-card__save ):focus-visible::before { transform: scale(var(--product-action-hover-scale)); } :is( .cat-card__hover-board, .personalized-card__hover-board, .christmas-special-product-card__hover-board, .listing-side-card__tag ):focus-visible, :is( .cat-card__hover-save, .personalized-card__hover-save, .listing-side-card__save ):focus-visible { outline: 1px solid color-mix(in srgb, var(--color-ink) 70%, transparent); outline-offset: 0; } :is( .cat-card:hover .cat-card__hover-board, .cat-card:has(:focus-visible) .cat-card__hover-board, .cat-card.is-actions-open .cat-card__hover-board, .personalized-card:hover .personalized-card__hover-board, .personalized-card:has(:focus-visible) .personalized-card__hover-board, .personalized-card.is-actions-open .personalized-card__hover-board, .christmas-special-product-card:hover .christmas-special-product-card__hover-board, .christmas-special-product-card:has(:focus-visible) .christmas-special-product-card__hover-board, .christmas-special-product-card.is-actions-open .christmas-special-product-card__hover-board ) { color: var(--intent-text-on-brand); } :is( .cat-card:hover .cat-card__hover-board, .cat-card:has(:focus-visible) .cat-card__hover-board, .cat-card.is-actions-open .cat-card__hover-board, .personalized-card:hover .personalized-card__hover-board, .personalized-card:has(:focus-visible) .personalized-card__hover-board, .personalized-card.is-actions-open .personalized-card__hover-board, .christmas-special-product-card:hover .christmas-special-product-card__hover-board, .christmas-special-product-card:has(:focus-visible) .christmas-special-product-card__hover-board, .christmas-special-product-card.is-actions-open .christmas-special-product-card__hover-board )::before { background: var(--product-action-board-active-bg); } :is( .cat-card:hover .cat-card__hover-board:hover, .cat-card:has(:focus-visible) .cat-card__hover-board:focus-visible, .personalized-card:hover .personalized-card__hover-board:hover, .personalized-card:has(:focus-visible) .personalized-card__hover-board:focus-visible, .christmas-special-product-card:hover .christmas-special-product-card__hover-board:hover, .christmas-special-product-card:has(:focus-visible) .christmas-special-product-card__hover-board:focus-visible )::before { background: var(--product-action-board-active-bg-strong); } :is( .cat-card:hover .cat-card__hover-board img, .cat-card:has(:focus-visible) .cat-card__hover-board img, .cat-card.is-actions-open .cat-card__hover-board img, .personalized-card:hover .personalized-card__hover-board img, .personalized-card:has(:focus-visible) .personalized-card__hover-board img, .personalized-card.is-actions-open .personalized-card__hover-board img, .christmas-special-product-card:hover .christmas-special-product-card__hover-board img, .christmas-special-product-card:has(:focus-visible) .christmas-special-product-card__hover-board img, .christmas-special-product-card.is-actions-open .christmas-special-product-card__hover-board img ) { filter: brightness(0) invert(1); } :is( .cat-card.is-product-saved .cat-card__hover-actions, .cat-card.is-in-collection .cat-card__hover-actions, .personalized-card.is-product-saved .personalized-card__hover-actions, .personalized-card.is-in-collection .personalized-card__hover-actions, .christmas-special-product-card.is-product-saved .christmas-special-product-card__hover-actions, .christmas-special-product-card.is-in-collection .christmas-special-product-card__hover-actions ) { right: calc(18 * var(--cat-card-unit-x, 1px)); left: auto; width: auto; max-width: calc(100% - calc(36 * var(--cat-card-unit-x, 1px))); height: auto; align-items: flex-start; justify-content: flex-end; gap: calc(10 * var(--cat-card-unit-x, 1px)); } :is( .cat-card.is-product-saved .cat-card__hover-board, .cat-card.is-in-collection .cat-card__hover-board, .personalized-card.is-product-saved .personalized-card__hover-board, .personalized-card.is-in-collection .personalized-card__hover-board, .christmas-special-product-card.is-product-saved .christmas-special-product-card__hover-board, .christmas-special-product-card.is-in-collection .christmas-special-product-card__hover-board ) { flex: 0 1 auto; width: max-content; min-width: calc(76 * var(--product-action-unit-x)); max-width: min( calc(156 * var(--product-action-unit-x)), calc(100% - calc(96 * var(--product-action-unit-x))) ); height: auto; min-height: calc(38 * var(--product-action-unit-y)); padding: 0; border-radius: 0; justify-content: flex-start; gap: 0; color: var(--color-cream); cursor: default; pointer-events: none; text-align: right; text-shadow: none; } .cat-card.cat-card--ad:is(.is-product-saved, .is-in-collection) .cat-card__hover-board { max-width: min( calc(132 * var(--product-action-unit-x)), calc(100% - calc(100 * var(--product-action-unit-x))) ); } :is( .cat-card.is-product-saved .cat-card__hover-board::before, .cat-card.is-in-collection .cat-card__hover-board::before, .cat-card.is-product-saved:hover .cat-card__hover-board:hover::before, .cat-card.is-in-collection:hover .cat-card__hover-board:hover::before, .cat-card.is-product-saved:has(:focus-visible) .cat-card__hover-board:focus-visible::before, .cat-card.is-in-collection:has(:focus-visible) .cat-card__hover-board:focus-visible::before, .personalized-card.is-product-saved .personalized-card__hover-board::before, .personalized-card.is-in-collection .personalized-card__hover-board::before, .personalized-card.is-product-saved:hover .personalized-card__hover-board:hover::before, .personalized-card.is-in-collection:hover .personalized-card__hover-board:hover::before, .personalized-card.is-product-saved:has(:focus-visible) .personalized-card__hover-board:focus-visible::before, .personalized-card.is-in-collection:has(:focus-visible) .personalized-card__hover-board:focus-visible::before, .christmas-special-product-card.is-product-saved .christmas-special-product-card__hover-board::before, .christmas-special-product-card.is-in-collection .christmas-special-product-card__hover-board::before, .christmas-special-product-card.is-product-saved:hover .christmas-special-product-card__hover-board:hover::before, .christmas-special-product-card.is-in-collection:hover .christmas-special-product-card__hover-board:hover::before, .christmas-special-product-card.is-product-saved:has(:focus-visible) .christmas-special-product-card__hover-board:focus-visible::before, .christmas-special-product-card.is-in-collection:has(:focus-visible) .christmas-special-product-card__hover-board:focus-visible::before ) { background: transparent; transform: none; } :is( .cat-card.is-product-saved .cat-card__hover-board img, .cat-card.is-in-collection .cat-card__hover-board img, .cat-card.is-product-saved .cat-card__hover-board svg, .cat-card.is-in-collection .cat-card__hover-board svg, .personalized-card.is-product-saved .personalized-card__hover-board img, .personalized-card.is-in-collection .personalized-card__hover-board img, .christmas-special-product-card.is-product-saved .christmas-special-product-card__hover-board img, .christmas-special-product-card.is-in-collection .christmas-special-product-card__hover-board img ) { display: none; } :is( .cat-card.is-product-saved .cat-card__hover-board-label, .cat-card.is-in-collection .cat-card__hover-board-label, .personalized-card.is-product-saved .personalized-card__hover-board-label, .personalized-card.is-in-collection .personalized-card__hover-board-label, .christmas-special-product-card.is-product-saved .christmas-special-product-card__hover-board-label, .christmas-special-product-card.is-in-collection .christmas-special-product-card__hover-board-label ) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 1.28; font-size: calc(15 * var(--product-action-unit-x)); font-weight: 760; max-width: 100%; padding-bottom: calc(1 * var(--product-action-unit-y)); } :is( .cat-card.is-product-saved .cat-card__hover-board.is-board-label-long .cat-card__hover-board-label, .cat-card.is-in-collection .cat-card__hover-board.is-board-label-long .cat-card__hover-board-label, .personalized-card.is-product-saved .personalized-card__hover-board.is-board-label-long .personalized-card__hover-board-label, .personalized-card.is-in-collection .personalized-card__hover-board.is-board-label-long .personalized-card__hover-board-label, .christmas-special-product-card.is-product-saved .christmas-special-product-card__hover-board.is-board-label-long .christmas-special-product-card__hover-board-label, .christmas-special-product-card.is-in-collection .christmas-special-product-card__hover-board.is-board-label-long .christmas-special-product-card__hover-board-label ) { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.22; } :is( .cat-card__hover-save, .personalized-card__hover-save, .christmas-special-product-card__hover-save, .listing-side-card__save, .search-curated-card__save ).is-liked { background: transparent; color: var(--color-cream); overflow: hidden; } :is( .cat-card__hover-save, .personalized-card__hover-save, .christmas-special-product-card__hover-save, .listing-side-card__save, .search-curated-card__save ).is-liked::before { background: var(--color-ink); } :is( .cat-card__hover-save, .personalized-card__hover-save, .christmas-special-product-card__hover-save, .listing-side-card__save, .search-curated-card__save )::before { transition: transform 180ms ease; } :is( .cat-card__hover-save, .personalized-card__hover-save, .christmas-special-product-card__hover-save, .listing-side-card__save, .search-curated-card__save ).is-liked::after { content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; background: var(--color-ink); clip-path: circle(var(--product-action-ripple-radius, 150%) at var(--product-action-ripple-x, 50%) var(--product-action-ripple-y, 50%)); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { :is( .cat-card__hover-save, .personalized-card__hover-save, .christmas-special-product-card__hover-save, .listing-side-card__save, .search-curated-card__save ).is-liked { animation: product-action-saved-settle 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } :is( .cat-card__hover-save, .personalized-card__hover-save, .christmas-special-product-card__hover-save, .listing-side-card__save, .search-curated-card__save ).is-liked::after { animation: product-action-saved-ripple 420ms cubic-bezier(0.0, 0.0, 0.2, 1) forwards; } .cat-card__hover-save.is-liked .cat-card__hover-save-label, .personalized-card__hover-save.is-liked .personalized-card__hover-save-label, .christmas-special-product-card__hover-save.is-liked .christmas-special-product-card__hover-save-label, .listing-side-card__save.is-liked .listing-side-card__save-label, .search-curated-card__save.is-liked .search-curated-card__save-label { animation: product-action-saved-label 240ms ease-out; } } @keyframes product-action-saved-settle { 0% { transform: scale(1); } 28% { transform: scale(0.92); } 100% { transform: scale(1); } } @keyframes product-action-saved-ripple { 0% { clip-path: circle(0% at var(--product-action-ripple-x, 50%) var(--product-action-ripple-y, 50%)); } 100% { clip-path: circle(var(--product-action-ripple-radius, 150%) at var(--product-action-ripple-x, 50%) var(--product-action-ripple-y, 50%)); } } @keyframes product-action-saved-label { 0% { opacity: 0; transform: translateY(3px); } 100% { opacity: 1; transform: translateY(0); } } :is( .cat-card__hover-board-label, .personalized-card__hover-board-label, .listing-side-card__tag-label ) { display: block; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--product-action-board-label-size) * var(--product-action-unit-x)); font-weight: var(--product-action-board-label-weight); line-height: 1.24; letter-spacing: 0; padding-bottom: calc(1 * var(--product-action-unit-y)); } :is( .cat-card__hover-save-label, .personalized-card__hover-save-label, .christmas-special-product-card__hover-save-label, .listing-side-card__save-label, .search-curated-card__save-label ) { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading); font-size: calc(var(--product-action-save-label-size) * var(--product-action-unit-x)); font-weight: var(--product-action-save-label-weight); line-height: 1; letter-spacing: 0; position: relative; z-index: 1; } :is( .cat-card__hover-board svg, .cat-card__hover-board img, .personalized-card__hover-board img, .christmas-special-product-card__hover-board img, .listing-side-card__tag-icon ) { width: calc(var(--product-action-board-icon-width) * var(--product-action-unit-x)); height: calc(var(--product-action-board-icon-height) * var(--product-action-unit-y)); flex: 0 0 calc(var(--product-action-board-icon-width) * var(--product-action-unit-x)); display: block; object-fit: contain; } :is( .cat-card__hover-board img, .personalized-card__hover-board img, .christmas-special-product-card__hover-board img ) { filter: brightness(0) invert(1); } :is( .cat-card__hover-save svg, .cat-card__hover-save img, .personalized-card__hover-save img, .listing-side-card__save-icon ) { width: calc(var(--product-action-save-icon-width) * var(--product-action-unit-x)); height: calc(var(--product-action-save-icon-height) * var(--product-action-unit-y)); flex: 0 0 calc(var(--product-action-save-icon-width) * var(--product-action-unit-x)); display: block; object-fit: contain; filter: none; } @media (max-width: 1199px) { .personalized-card__hover-board { --product-action-board-min-width: 38; --product-action-board-max-width: 38; --product-action-board-pad-y: 0; --product-action-board-pad-x: 0; --product-action-board-gap: 0; width: 38px; flex: 0 0 38px; justify-content: center; } .personalized-card__hover-save { --product-action-save-min-width: 84; --product-action-save-pad-y: 6; --product-action-save-pad-x: 15; --product-action-save-gap: 0; width: auto; flex: 0 0 auto; } .personalized-card__hover-board-label { display: none; } .personalized-card__hover-save-label { display: block; } } @media (hover: none), (pointer: coarse) { :is( .cat-card__hover-actions, .personalized-card__hover-actions, .christmas-special-product-card__hover-actions ) { display: none !important; opacity: 0 !important; pointer-events: none !important; transform: none !important; } } .cat-card__ad-mark { width: var(--cat-card-corner-badge-size, 38px); height: var(--cat-card-corner-badge-size, 38px); left: var(--cat-card-corner-badge-left, 8px); top: var(--cat-card-corner-badge-top, 8px); box-shadow: none; opacity: 0.7; font-size: var(--cat-card-corner-badge-ad-font-size, 15px); font-weight: 800; } /* [bundle] /styles/components/assistant-platform.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* [bundle] /styles/animations.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @keyframes jp-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes jp-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes jp-fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes jp-fade-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes jp-pop-in { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes jp-slide-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes jp-slide-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes jp-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes jp-pulse-glow { 0%, 100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes jp-typing-dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } @keyframes jp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes jp-voice-pulse { 0% { box-shadow: 0 0 0 0 var(--color-ai-glow); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes jp-voice-wave { 0%, 100% { height: 4px; } 50% { height: 16px; } } @keyframes jp-ai-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes jp-ai-sparkle { 0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(180deg); } } @keyframes jp-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes jp-bar-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes jp-stroke-draw { from { stroke-dashoffset: var(--stroke-length, 1000); } to { stroke-dashoffset: 0; } } .jp-anim-fade-in { animation: jp-fade-in var(--duration-normal) var(--ease-standard) both; } .jp-anim-fade-up { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-fade-down { animation: jp-fade-down var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-fade-scale { animation: jp-fade-scale var(--duration-normal) var(--ease-spring) both; } .jp-anim-pop-in { animation: jp-pop-in var(--duration-slow) var(--ease-spring) both; } .jp-anim-slide-in-right { animation: jp-slide-in-right var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-slide-in-left { animation: jp-slide-in-left var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-bar-grow { animation: jp-bar-grow var(--duration-slower) var(--ease-out-expo) both; transform-origin: left center; } .jp-anim-pulse-glow { animation: jp-pulse-glow 2s ease-in-out infinite; } .jp-anim-shimmer { background: linear-gradient( 90deg, rgba(35,32,48,0.04) 0%, rgba(35,32,48,0.08) 50%, rgba(35,32,48,0.04) 100% ); background-size: 200% 100%; animation: jp-shimmer 1.4s ease-in-out infinite; } .jp-stagger-1 { animation-delay: 50ms; } .jp-stagger-2 { animation-delay: 100ms; } .jp-stagger-3 { animation-delay: 150ms; } .jp-stagger-4 { animation-delay: 200ms; } .jp-stagger-5 { animation-delay: 250ms; } .jp-stagger-6 { animation-delay: 300ms; } .jp-stagger-7 { animation-delay: 350ms; } .jp-stagger-8 { animation-delay: 400ms; } .jp-auto-stagger > * { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; } .jp-auto-stagger > *:nth-child(1) { animation-delay: 0ms; } .jp-auto-stagger > *:nth-child(2) { animation-delay: 50ms; } .jp-auto-stagger > *:nth-child(3) { animation-delay: 100ms; } .jp-auto-stagger > *:nth-child(4) { animation-delay: 150ms; } .jp-auto-stagger > *:nth-child(5) { animation-delay: 200ms; } .jp-auto-stagger > *:nth-child(6) { animation-delay: 250ms; } .jp-auto-stagger > *:nth-child(7) { animation-delay: 300ms; } .jp-auto-stagger > *:nth-child(8) { animation-delay: 350ms; } .jp-auto-stagger > *:nth-child(9) { animation-delay: 400ms; } .jp-auto-stagger > *:nth-child(10) { animation-delay: 450ms; } .assistant-platform { position: fixed; right: var(--assistant-offset-right, max(18px, env(safe-area-inset-right))); bottom: var(--assistant-offset-bottom, max(18px, env(safe-area-inset-bottom))); z-index: var(--assistant-z-index, 1200); width: min(var(--assistant-width, 360px), calc(100vw - 28px)); color: var(--assistant-text, var(--color-ink)); font-family: var(--assistant-font-family, var(--font-body)); --assistant-ai-accent: var(--site-ai-accent, var(--color-ai-accent, #3F6A60)); --assistant-ai-accent-soft: var(--site-ai-accent-soft, var(--color-ai-accent-soft, #F8F5ED)); --assistant-ai-glow: var(--site-ai-glow, var(--color-ai-glow, rgba(63, 106, 96, 0.2))); --assistant-ai-gradient: var(--site-ai-gradient, var(--gradient-ai, linear-gradient(135deg, #3F6A60 0%, #3F6A60 100%))); } .assistant-platform.is-placement-under-header { top: var(--assistant-header-offset, 96px); right: var(--assistant-offset-right, 18px); bottom: auto; } .assistant-platform.is-density-compact .assistant-platform__hint { min-height: 58px; padding: 10px 11px; } .assistant-platform.is-density-compact .assistant-platform__head { padding: 13px 14px 10px; } .assistant-platform.is-density-compact .assistant-platform__body { gap: 8px; padding: 10px; } .assistant-platform.is-density-compact .assistant-platform__option { padding: 10px; } .assistant-platform[hidden] { display: none; } .gift-room-ai-panel[aria-hidden="true"]:not(.is-open) { display: none !important; pointer-events: none !important; visibility: hidden !important; } .gift-room-ai-panel.is-open { visibility: visible !important; } .gift-room-ai-panel, .gift-room-ai-panel__tools, .gift-room-ai-panel__tool, .gift-room-ai-panel__tool-icon { box-sizing: border-box; } @media (max-width: 768px) { .gift-room-ai-panel { inset: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; transform: translateY(100%) !important; } .gift-room-ai-panel.is-open { transform: translate3d(0, var(--lume-sheet-drag-y, 0), 0) !important; } .gift-room-ai-panel::after { display: none !important; } .gift-room-ai-panel__tools { left: 8px !important; right: auto !important; bottom: 5px !important; gap: 9px !important; } .gift-room-ai-panel__tool { position: relative !important; width: 40px !important; height: 40px !important; background: rgba(35, 32, 48, 0.045) !important; color: var(--lume-ink, var(--color-ink)) !important; } .gift-room-ai-panel__tool::before { display: none !important; } .gift-room-ai-panel__tool-icon { display: block !important; width: 24px !important; height: 24px !important; flex-basis: 24px !important; object-fit: contain !important; } .gift-room-ai-panel__tool svg { width: 24px !important; height: 24px !important; flex-basis: 24px !important; display: none !important; } } .assistant-platform__hint, .assistant-platform__panel { border: 1px solid rgba(35, 32, 48, 0.12); background: var(--assistant-surface, rgba(255, 249, 241, 0.92)); box-shadow: 0 18px 44px rgba(35, 32, 48, 0.16); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .assistant-platform__hint { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 68px; padding: 12px 12px 12px 14px; border-radius: var(--assistant-radius, 18px); cursor: pointer; text-align: left; } .assistant-platform__mark { display: grid; place-items: center; width: var(--assistant-icon-size, 36px); height: var(--assistant-icon-size, 36px); border-radius: calc(var(--assistant-radius, 18px) * 0.66); background: var(--assistant-accent-soft, #eff6ef); color: var(--assistant-accent, #2d5d46); font-size: 16px; font-weight: 800; } .assistant-platform__hint-copy { min-width: 0; } .assistant-platform__eyebrow { display: block; margin-bottom: 3px; font-size: 11px; line-height: 1; font-weight: 800; color: var(--assistant-muted, #597064); text-transform: uppercase; letter-spacing: 0.04em; } .assistant-platform__hint-text { display: block; font-size: 14px; line-height: 1.25; font-weight: 700; color: var(--assistant-text, var(--color-ink)); } .assistant-platform__hint-action { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--assistant-accent, var(--color-ink)); color: var(--assistant-accent-text, var(--color-cream)); font-size: 18px; line-height: 1; } .assistant-platform__panel { display: none; overflow: hidden; border-radius: calc(var(--assistant-radius, 18px) + 2px); } .assistant-platform.is-open .assistant-platform__hint { display: none; } .assistant-platform.is-open .assistant-platform__panel { display: block; } .assistant-platform__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid rgba(35, 32, 48, 0.08); } .assistant-platform__head-main { display: flex; min-width: 0; gap: 10px; align-items: flex-start; } .assistant-platform__mark--panel { flex: 0 0 auto; width: 34px; height: 34px; font-size: 15px; } .assistant-platform__title { margin: 0; font-size: 18px; line-height: 1.1; font-weight: 800; } .assistant-platform__subtitle { margin: 5px 0 0; font-size: 13px; line-height: 1.35; color: var(--assistant-muted, var(--color-ink-soft)); } .assistant-platform__close { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(35, 32, 48, 0.1); border-radius: 999px; background: var(--assistant-card-surface, var(--color-cream)); color: var(--assistant-text, var(--color-ink)); cursor: pointer; font-size: 18px; line-height: 1; } .assistant-platform__body { display: flex; flex-direction: column; gap: 10px; padding: 12px; } .assistant-platform__messages { display: flex; flex-direction: column; gap: 10px; max-height: min(430px, calc(100vh - 270px)); padding: 12px; overflow: auto; overscroll-behavior: contain; } .assistant-platform__message { max-width: 92%; } .assistant-platform__message p { margin: 0; padding: 10px 12px; border-radius: calc(var(--assistant-radius, 18px) - 6px); font-size: 13px; line-height: 1.4; } .assistant-platform__message--assistant { align-self: flex-start; } .assistant-platform__message--assistant p { background: var(--assistant-card-surface, #fbfaf7); color: var(--assistant-text, var(--color-ink)); } .assistant-platform__message--user { align-self: flex-end; } .assistant-platform__message--user p { background: var(--assistant-accent, var(--color-ink)); color: var(--assistant-accent-text, var(--color-cream)); } .assistant-platform__message-meta { display: grid; gap: 8px; margin-top: 8px; } .assistant-platform__evidence, .assistant-platform__sources, .assistant-platform__memory { display: flex; flex-wrap: wrap; gap: 6px; } .assistant-platform__evidence span, .assistant-platform__sources span, .assistant-platform__memory span { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; min-height: 24px; padding: 5px 7px; border-radius: var(--assistant-pill-radius, 999px); background: var(--assistant-card-surface, #fbfaf7); color: var(--assistant-muted, var(--color-ink-soft)); font-size: 10px; font-weight: 800; line-height: 1.1; } .assistant-platform__evidence span { border: 1px solid rgba(61, 102, 158, 0.14); background: rgba(235, 241, 255, 0.7); } .assistant-platform__evidence b { color: var(--assistant-text, var(--color-ink)); font-weight: 900; } .assistant-platform__plan { display: grid; gap: 5px; margin: 0; padding: 9px 10px 9px 28px; border: 1px solid rgba(35, 32, 48, 0.08); border-radius: calc(var(--assistant-radius, 18px) - 8px); background: rgba(255, 249, 241, 0.62); color: var(--assistant-muted, var(--color-ink-soft)); font-size: 11px; line-height: 1.32; } .assistant-platform__message-cards { display: grid; gap: 8px; margin-top: 8px; } .assistant-platform__quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 10px; } .assistant-platform__quick[hidden] { display: none; } .assistant-platform__quick-reply { min-height: 32px; padding: 7px 10px; border: 1px solid rgba(35, 32, 48, 0.1); border-radius: var(--assistant-pill-radius, 999px); background: var(--assistant-card-surface, #fbfaf7); color: var(--assistant-text, var(--color-ink)); cursor: pointer; font-size: 12px; font-weight: 800; } .assistant-platform__composer { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 12px; border-top: 1px solid rgba(35, 32, 48, 0.08); } .assistant-platform__voice, .assistant-platform__send { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 0; border-radius: var(--assistant-pill-radius, 999px); cursor: pointer; font-size: 12px; font-weight: 900; } .assistant-platform__voice { min-width: 44px; padding: 0 10px; background: var(--assistant-card-surface, #fbfaf7); color: var(--assistant-accent, var(--color-ink)); } .assistant-platform__voice img { width: 18px; height: 18px; } .assistant-platform.is-listening .assistant-platform__voice { background: var(--assistant-accent-soft, #eef5ee); box-shadow: 0 0 0 3px var(--assistant-accent-soft, #eef5ee); } .assistant-platform__input { min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid rgba(35, 32, 48, 0.12); border-radius: var(--assistant-pill-radius, 999px); background: var(--assistant-surface, #FFF9F1); color: var(--assistant-text, var(--color-ink)); font: inherit; font-size: 13px; outline: none; } .assistant-platform__input:focus { border-color: var(--assistant-accent, var(--color-ink)); box-shadow: 0 0 0 3px var(--assistant-accent-soft, rgba(63, 106, 96, 0.12)); } .assistant-platform__send { min-width: 58px; padding: 0 13px; background: var(--assistant-accent, var(--color-ink)); color: var(--assistant-accent-text, var(--color-cream)); } .assistant-platform.is-loading .assistant-platform__send { opacity: 0.65; cursor: wait; } .assistant-platform__option { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(35, 32, 48, 0.1); border-radius: calc(var(--assistant-radius, 18px) - 4px); background: var(--assistant-card-surface, #fbfaf7); } .assistant-platform__option-type { display: block; margin-bottom: 4px; font-size: 10px; line-height: 1; font-weight: 800; color: var(--assistant-muted, #6a7e70); text-transform: uppercase; letter-spacing: 0.05em; } .assistant-platform__option-title { margin: 0; font-size: 14px; line-height: 1.2; font-weight: 800; color: var(--assistant-text, var(--color-ink)); } .assistant-platform__option-body { margin: 5px 0 0; font-size: 12px; line-height: 1.35; color: var(--assistant-muted, var(--color-ink-soft)); } .assistant-platform__option-link { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; min-height: 36px; padding: 8px 12px; border-radius: var(--assistant-pill-radius, 999px); background: var(--assistant-accent, var(--color-ink)); color: var(--assistant-accent-text, var(--color-cream)); font-size: 12px; font-weight: 800; white-space: nowrap; } .assistant-platform__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 12px; } .assistant-platform__why { border: 0; background: transparent; color: var(--assistant-accent, #476256); cursor: pointer; font-size: 12px; font-weight: 800; text-align: left; } .assistant-platform__dismiss { border: 0; background: transparent; color: var(--assistant-muted, var(--color-ink-soft)); cursor: pointer; font-size: 12px; font-weight: 700; } .assistant-platform__why-text { display: none; margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px; background: var(--assistant-accent-soft, #eef5ee); color: var(--assistant-accent, #40584c); font-size: 12px; line-height: 1.35; } .assistant-platform.is-why-open .assistant-platform__why-text { display: block; } @media (max-width: 640px) { .assistant-platform { right: 14px; bottom: 14px; width: calc(100vw - 28px); } .assistant-platform__panel { max-height: min(620px, calc(100vh - 28px)); overflow: auto; } .assistant-platform__option { grid-template-columns: 1fr; } .assistant-platform__option-link { width: 100%; } .assistant-platform__messages { max-height: min(520px, calc(100vh - 230px)); } .assistant-platform__composer { grid-template-columns: auto 1fr; } .assistant-platform__send { grid-column: 1 / -1; width: 100%; } } .assistant-platform__hint { animation: jp-fade-up var(--duration-slow) var(--ease-out-expo) both; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .assistant-platform__hint:hover { transform: translateY(-2px); box-shadow: 0 24px 56px rgba(35, 32, 48, 0.18); } .assistant-platform__hint:active { transform: translateY(0); } .assistant-platform__mark { background: var(--assistant-ai-gradient); color: var(--color-cream); position: relative; transition: transform var(--duration-fast) var(--ease-spring); } .assistant-platform__hint:hover .assistant-platform__mark { transform: scale(1.08); } .assistant-platform__mark::after { content: "✨"; position: absolute; top: -3px; right: -3px; font-size: 10px; line-height: 1; background: var(--color-cream); border-radius: 50%; width: 14px; height: 14px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.12); animation: jp-pulse-glow 2.4s ease-in-out infinite; } .assistant-platform.is-open .assistant-platform__panel { animation: jp-fade-scale var(--duration-slow) var(--ease-out-expo) both; transform-origin: bottom right; } .assistant-platform__message { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; } .assistant-platform__message--assistant p { position: relative; border: 1px solid rgba(63, 106, 96, 0.08); } .assistant-platform__message--assistant p::before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background: var(--assistant-ai-gradient); opacity: 0.06; border-radius: calc(var(--assistant-radius, 18px) - 6px) 0 12px 0; pointer-events: none; } .assistant-platform__message-cards .assistant-platform__option { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; transition: all var(--duration-fast) var(--ease-standard); } .assistant-platform__message-cards .assistant-platform__option:nth-child(1) { animation-delay: 0ms; } .assistant-platform__message-cards .assistant-platform__option:nth-child(2) { animation-delay: 60ms; } .assistant-platform__message-cards .assistant-platform__option:nth-child(3) { animation-delay: 120ms; } .assistant-platform__message-cards .assistant-platform__option:nth-child(4) { animation-delay: 180ms; } .assistant-platform__message-cards .assistant-platform__option:nth-child(5) { animation-delay: 240ms; } .assistant-platform__option:hover { transform: translateY(-2px); border-color: var(--assistant-ai-accent); box-shadow: 0 12px 32px rgba(63, 106, 96, 0.14); } .assistant-platform__option-link { transition: all var(--duration-fast) var(--ease-standard); } .assistant-platform__option-link:hover { transform: scale(1.04); filter: brightness(1.05); } .assistant-platform__quick-reply { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; transition: all var(--duration-fast) var(--ease-standard); } .assistant-platform__quick-reply:nth-child(1) { animation-delay: 50ms; } .assistant-platform__quick-reply:nth-child(2) { animation-delay: 100ms; } .assistant-platform__quick-reply:nth-child(3) { animation-delay: 150ms; } .assistant-platform__quick-reply:nth-child(4) { animation-delay: 200ms; } .assistant-platform__quick-reply:nth-child(5) { animation-delay: 250ms; } .assistant-platform__quick-reply:nth-child(6) { animation-delay: 300ms; } .assistant-platform__quick-reply:hover { transform: translateY(-2px); border-color: var(--assistant-ai-accent); background: var(--assistant-ai-accent-soft); color: var(--assistant-ai-accent); } .assistant-platform__skeleton { display: grid; gap: 10px; padding: 12px; animation: jp-fade-in var(--duration-normal) var(--ease-standard); } .assistant-platform__skeleton-card { height: 76px; border-radius: calc(var(--assistant-radius, 18px) - 4px); background: linear-gradient( 90deg, rgba(35,32,48,0.04) 0%, rgba(35,32,48,0.08) 50%, rgba(35,32,48,0.04) 100% ); background-size: 200% 100%; animation: jp-shimmer 1.4s ease-in-out infinite; } .assistant-platform__typing { display: inline-flex; align-items: center; gap: 5px; padding: 12px 16px; margin: 0; background: var(--assistant-ai-accent-soft); border-radius: calc(var(--assistant-radius, 18px) - 6px); animation: jp-fade-up var(--duration-normal) var(--ease-out-expo); align-self: flex-start; max-width: 92%; } .assistant-platform__typing-dot { width: 6px; height: 6px; background: var(--assistant-ai-accent); border-radius: 50%; animation: jp-typing-dot 1.4s infinite ease-in-out; } .assistant-platform__typing-dot:nth-child(2) { animation-delay: 0.16s; } .assistant-platform__typing-dot:nth-child(3) { animation-delay: 0.32s; } .assistant-platform__voice { position: relative; overflow: hidden; transition: transform var(--duration-fast) var(--ease-spring), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .assistant-platform__voice:hover { transform: scale(1.06); background: var(--assistant-ai-accent-soft); color: var(--assistant-ai-accent); } .assistant-platform__voice-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; animation: jp-pop-in var(--duration-slow) var(--ease-spring) both; } .assistant-platform__voice-icon svg { width: 100%; height: 100%; fill: currentColor; transition: transform var(--duration-fast) var(--ease-spring); } .assistant-platform.is-listening .assistant-platform__voice { background: var(--assistant-ai-accent); color: var(--color-cream); animation: jp-voice-pulse 1.5s infinite; } .assistant-platform.is-listening .assistant-platform__voice-icon { display: none; } .assistant-platform__voice-waveform { display: none; align-items: center; gap: 2px; } .assistant-platform.is-listening .assistant-platform__voice-waveform { display: inline-flex; animation: jp-fade-in var(--duration-fast) var(--ease-standard); } .assistant-platform__voice-waveform span { display: block; width: 2px; height: 4px; background: currentColor; border-radius: 1px; animation: jp-voice-wave 0.9s ease-in-out infinite; } .assistant-platform__voice-waveform span:nth-child(2) { animation-delay: 0.1s; } .assistant-platform__voice-waveform span:nth-child(3) { animation-delay: 0.2s; } .assistant-platform__voice-waveform span:nth-child(4) { animation-delay: 0.3s; } .assistant-platform__send { transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-standard); } .assistant-platform__send:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(35, 32, 48, 0.18); } .assistant-platform__send:active { transform: scale(0.98); } .assistant-platform__close { transition: transform var(--duration-fast) var(--ease-spring), border-color var(--duration-fast) var(--ease-standard); } .assistant-platform__close:hover { transform: rotate(90deg); border-color: var(--assistant-ai-accent); } .assistant-platform__ai-label { display: block; margin: 4px 0 0; font-size: 11px; line-height: 1.3; color: var(--assistant-ai-accent); font-weight: 600; letter-spacing: 0.01em; } .assistant-platform__ai-label::before { content: "✨"; margin-right: 4px; display: inline-block; animation: jp-pulse-glow 2.4s ease-in-out infinite; } .assistant-platform.is-why-open .assistant-platform__why-text { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo); } /* [bundle] /styles/components/assistant-search.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* [bundle] /styles/animations.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @keyframes jp-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes jp-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes jp-fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes jp-fade-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes jp-pop-in { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes jp-slide-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes jp-slide-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes jp-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes jp-pulse-glow { 0%, 100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes jp-typing-dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } @keyframes jp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes jp-voice-pulse { 0% { box-shadow: 0 0 0 0 var(--color-ai-glow); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes jp-voice-wave { 0%, 100% { height: 4px; } 50% { height: 16px; } } @keyframes jp-ai-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes jp-ai-sparkle { 0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(180deg); } } @keyframes jp-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes jp-bar-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes jp-stroke-draw { from { stroke-dashoffset: var(--stroke-length, 1000); } to { stroke-dashoffset: 0; } } .jp-anim-fade-in { animation: jp-fade-in var(--duration-normal) var(--ease-standard) both; } .jp-anim-fade-up { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-fade-down { animation: jp-fade-down var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-fade-scale { animation: jp-fade-scale var(--duration-normal) var(--ease-spring) both; } .jp-anim-pop-in { animation: jp-pop-in var(--duration-slow) var(--ease-spring) both; } .jp-anim-slide-in-right { animation: jp-slide-in-right var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-slide-in-left { animation: jp-slide-in-left var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-bar-grow { animation: jp-bar-grow var(--duration-slower) var(--ease-out-expo) both; transform-origin: left center; } .jp-anim-pulse-glow { animation: jp-pulse-glow 2s ease-in-out infinite; } .jp-anim-shimmer { background: linear-gradient( 90deg, rgba(35,32,48,0.04) 0%, rgba(35,32,48,0.08) 50%, rgba(35,32,48,0.04) 100% ); background-size: 200% 100%; animation: jp-shimmer 1.4s ease-in-out infinite; } .jp-stagger-1 { animation-delay: 50ms; } .jp-stagger-2 { animation-delay: 100ms; } .jp-stagger-3 { animation-delay: 150ms; } .jp-stagger-4 { animation-delay: 200ms; } .jp-stagger-5 { animation-delay: 250ms; } .jp-stagger-6 { animation-delay: 300ms; } .jp-stagger-7 { animation-delay: 350ms; } .jp-stagger-8 { animation-delay: 400ms; } .jp-auto-stagger > * { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; } .jp-auto-stagger > *:nth-child(1) { animation-delay: 0ms; } .jp-auto-stagger > *:nth-child(2) { animation-delay: 50ms; } .jp-auto-stagger > *:nth-child(3) { animation-delay: 100ms; } .jp-auto-stagger > *:nth-child(4) { animation-delay: 150ms; } .jp-auto-stagger > *:nth-child(5) { animation-delay: 200ms; } .jp-auto-stagger > *:nth-child(6) { animation-delay: 250ms; } .jp-auto-stagger > *:nth-child(7) { animation-delay: 300ms; } .jp-auto-stagger > *:nth-child(8) { animation-delay: 350ms; } .jp-auto-stagger > *:nth-child(9) { animation-delay: 400ms; } .jp-auto-stagger > *:nth-child(10) { animation-delay: 450ms; } .assistant-search { --assistant-ai-accent: var(--site-ai-accent, var(--color-ai-accent, #3F6A60)); --assistant-ai-accent-soft: var(--site-ai-accent-soft, var(--color-ai-accent-soft, #F8F5ED)); --assistant-ai-gradient: var(--site-ai-gradient, var(--gradient-ai, linear-gradient(135deg, #3F6A60 0%, #7A563D 100%))); margin: 0 0 18px; animation: jp-fade-up var(--duration-slow) var(--ease-out-expo) both; } .assistant-search[hidden] { display: none; } .assistant-search__shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 14px; padding: 18px; border: 1px solid rgba(35, 32, 48, 0.1); border-radius: 16px; background: #FFF9F1; box-shadow: 0 16px 36px rgba(35, 32, 48, 0.06); overflow: hidden; transition: box-shadow var(--duration-normal) var(--ease-standard); } .assistant-search__shell:hover { box-shadow: 0 24px 56px rgba(63, 106, 96, 0.12); } .assistant-search__shell::before { content: ""; position: absolute; inset: 0; padding: 1.5px; background: linear-gradient( 135deg, rgba(63, 106, 96, 0.36) 0%, rgba(45, 79, 72, 0.34) 50%, rgba(63, 106, 96, 0.36) 100% ); background-size: 200% 200%; border-radius: inherit; -webkit-mask: linear-gradient(#FFF9F1 0 0) content-box, linear-gradient(#FFF9F1 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: jp-ai-shimmer 5s ease-in-out infinite; pointer-events: none; opacity: 0.7; } .assistant-search__main { min-width: 0; } .assistant-search__eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 5px 12px; background: var(--assistant-ai-accent-soft); color: var(--assistant-ai-accent); font-size: 11px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; border-radius: 999px; animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; } .assistant-search__eyebrow::before { content: "✨"; display: inline-block; font-size: 10px; animation: jp-ai-sparkle 3s ease-in-out infinite; } .assistant-search__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 24px; font-weight: 850; line-height: 1.12; } .assistant-search__answer { margin: 10px 0 0; color: var(--color-ink-soft); font-size: 15px; line-height: 1.48; } .assistant-search__evidence { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; } .assistant-search__evidence:empty { display: none; } .assistant-search__evidence-item { display: inline-flex; max-width: 100%; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(61, 102, 158, 0.16); border-radius: 999px; background: rgba(235, 241, 255, 0.72); color: #344054; font-size: 11px; line-height: 1.15; } .assistant-search__evidence-item b, .assistant-search__plan-block strong { font-weight: 900; } .assistant-search__evidence-item em { min-width: 0; overflow: hidden; color: #667085; font-style: normal; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .assistant-search__plan { margin-top: 13px; } .assistant-search__plan:empty { display: none; } .assistant-search__plan-block { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(35, 32, 48, 0.1); border-radius: 8px; background: rgba(255, 249, 241, 0.72); } .assistant-search__plan-block strong { color: var(--color-ink); font-size: 11px; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; } .assistant-search__plan-block ol { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--color-ink-soft); font-size: 13px; line-height: 1.35; } .assistant-search__sources, .assistant-search__memory { display: flex; flex-wrap: wrap; gap: 7px; } .assistant-search__sources span, .assistant-search__memory span { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 8px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 11px; font-weight: 850; line-height: 1; } .assistant-search__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .assistant-search__quick button { min-height: 34px; padding: 7px 11px; border: 1px solid rgba(35, 32, 48, 0.12); border-radius: 999px; background: #FFF9F1; color: var(--color-ink); cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; } .assistant-search__cards { display: grid; gap: 10px; } .assistant-search__card { display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(35, 32, 48, 0.1); border-radius: 8px; background: #FFF9F1; } .assistant-search__card-type { color: var(--color-forest-dark, #2D4F48); font-size: 10px; font-weight: 900; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; } .assistant-search__card h3 { margin: 0; color: var(--color-ink); font-size: 15px; line-height: 1.2; } .assistant-search__card p { margin: 0; color: var(--color-ink-soft); font-size: 13px; line-height: 1.38; } .assistant-search__card a { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; margin-top: 2px; padding: 7px 12px; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); font-size: 12px; font-weight: 900; text-decoration: none; } .assistant-search__loading { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #667085; font-size: 13px; font-weight: 800; } .assistant-search__loading::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--color-emerald); animation: assistant-search-pulse 1s ease-in-out infinite; } @keyframes assistant-search-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } @media (max-width: 900px) { .assistant-search__shell { grid-template-columns: 1fr; } } @media (max-width: 640px) { .assistant-search { margin-bottom: 12px; } .assistant-search__shell { padding: 13px; } .assistant-search__title { font-size: 21px; } } .assistant-search__title { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) 50ms both; } .assistant-search__answer { animation: jp-fade-in var(--duration-slow) var(--ease-standard) 100ms both; } .assistant-search__quick button { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; transition: all var(--duration-fast) var(--ease-standard); } .assistant-search__quick button:nth-child(1) { animation-delay: 150ms; } .assistant-search__quick button:nth-child(2) { animation-delay: 200ms; } .assistant-search__quick button:nth-child(3) { animation-delay: 250ms; } .assistant-search__quick button:nth-child(4) { animation-delay: 300ms; } .assistant-search__quick button:nth-child(5) { animation-delay: 350ms; } .assistant-search__quick button:hover { transform: translateY(-2px); border-color: var(--assistant-ai-accent); background: var(--assistant-ai-accent-soft); color: var(--assistant-ai-accent); } .assistant-search__card { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); position: relative; overflow: hidden; } .assistant-search__card:nth-child(1) { animation-delay: 100ms; } .assistant-search__card:nth-child(2) { animation-delay: 180ms; } .assistant-search__card:nth-child(3) { animation-delay: 260ms; } .assistant-search__card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(63, 106, 96, 0.16); border-color: rgba(63, 106, 96, 0.3); } .assistant-search__card::after { content: "✨"; position: absolute; top: 8px; right: 10px; font-size: 11px; opacity: 0.35; transition: opacity var(--duration-fast); } .assistant-search__card:hover::after { opacity: 0.8; } .assistant-search__card a { transition: all var(--duration-fast) var(--ease-spring); } .assistant-search__card a:hover { transform: scale(1.04); filter: brightness(1.05); } .assistant-search__loading { animation: jp-fade-in var(--duration-fast) var(--ease-standard); } .assistant-search__loading::before { background: var(--assistant-ai-accent); } .assistant-search__ai-label { display: block; margin-top: 8px; font-size: 11px; line-height: 1.3; color: var(--assistant-ai-accent); font-weight: 600; opacity: 0.85; } /* [bundle] /styles/components/favorites.css */ .page--favorites { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); background: var(--intent-surface-page); overflow-x: clip; padding-top: 63px; } .favorites-page.section { padding: 0 0 12px; } body.page--favorites .favorites-page > .container { width: var(--homepage-shell-width); max-width: var(--jp-page-shell-max, 1372px); margin: 0 auto; padding-inline: var(--homepage-shell-inset); box-sizing: border-box; } @media (max-width: 1142px) { .page--favorites { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } } @media (max-width: 951px) { .page--favorites { padding-top: 89px; } } @media (max-width: 760px) { .page--favorites { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } } @media (max-width: 720px) { .page--favorites { padding-top: 68px; } } .favorites-page__intro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0 0 18px; padding: 30px 0 8px; text-align: left; color: var(--color-ink); } .favorites-page__intro-main { min-width: 0; } .favorites-page__title { font-family: var(--font-display); font-size: 40px; line-height: 1.05; letter-spacing: 0; color: var(--color-forest); margin: 0 0 8px; font-weight: 650; } .favorites-page__lead { font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--intent-text-primary); margin: 0; max-width: 660px; } .favorites-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 0 14px; border-bottom: 1px solid rgba(35, 32, 48, 0.08); } .favorites-toolbar__heading { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: 0; color: var(--color-ink); } .favorites-toolbar__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 9px; border-radius: var(--radius-pill, 999px); background: var(--color-sand); color: var(--color-ink); font-size: 13px; font-weight: 600; } .favorites-section--products { padding-top: 28px; } .favorites-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; } .favorites-section__title { margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 750; line-height: 1.1; color: var(--color-ink); } body.page--favorites .favorites-section--products .cards-grid { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: stretch; } .favorites-section--products .cat-card__reaction.is-liked { cursor: pointer; transition: box-shadow var(--duration-fast, 0.15s) var(--ease-standard, ease); } .favorites-section--products .cat-card__reaction.is-liked:hover { transform: none; box-shadow: var(--shadow-card-hover); } .favorites-card__actions .cat-card__hover-board-label, .favorites-recommendation-card__actions .cat-card__hover-board-label { font-weight: 750; } .favorites-card__actions .cat-card__hover-save { --product-action-save-bg: var(--color-ink); } .favorites-section--discovery { padding: 44px 0 0; } .favorites-discovery-grid { display: grid; gap: 18px; } .favorites-section--discovery[hidden], .favorites-section--collections[hidden], .favorites-section--searches[hidden] { display: none !important; } .favorites-discovery-set { --favorites-discovery-gap: 18px; --favorites-discovery-group-height: 508px; --favorites-discovery-wide-height: 210px; --favorites-discovery-square-height: calc(var(--favorites-discovery-group-height) - var(--favorites-discovery-gap) - var(--favorites-discovery-wide-height)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--favorites-discovery-gap); align-items: start; } .favorites-discovery-row { display: grid; gap: var(--favorites-discovery-gap); align-items: start; min-width: 0; } .favorites-discovery-card { position: relative; display: block; min-width: 0; overflow: hidden; border-radius: 20px; background: var(--intent-surface-sunken); box-shadow: inset 0 0 0 1px var(--intent-surface-line); transition: box-shadow 0.2s ease; } .favorites-discovery-card:hover, .favorites-discovery-card:has(:focus-visible), .favorites-discovery-card.is-actions-open { box-shadow: inset 0 0 0 1px var(--intent-surface-line), var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .favorites-discovery-card--tall { aspect-ratio: 1 / 2.06; } .favorites-discovery-card--square { aspect-ratio: 1 / 1; } .favorites-discovery-card--wide { aspect-ratio: 2 / 1; } .favorites-discovery-row .favorites-discovery-card--square { height: var(--favorites-discovery-square-height); aspect-ratio: auto; } .favorites-discovery-row .favorites-discovery-card--wide { height: var(--favorites-discovery-wide-height); aspect-ratio: auto; } .favorites-discovery-card__media { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; background-position: center; background-size: cover; background-repeat: no-repeat; } .favorites-discovery-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-ink) 44%, transparent) 0%, color-mix(in srgb, var(--color-ink) 24%, transparent) 32%, transparent 68% ); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .favorites-discovery-card:hover .favorites-discovery-card__media::after, .favorites-discovery-card:has(:focus-visible) .favorites-discovery-card__media::after, .favorites-discovery-card.is-actions-open .favorites-discovery-card__media::after { opacity: 1; } .favorites-discovery-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--color-forest) 56%, transparent); font-family: var(--font-display); font-size: clamp(54px, 8vw, 116px); font-weight: 650; line-height: 1; } .favorites-discovery-card__actions { position: absolute; z-index: 3; top: 10px; right: 10px; width: auto; height: 38px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; max-width: calc(100% - 20px); opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.96); transition: opacity 0.22s ease, transform 0.22s ease; } .favorites-discovery-card:hover .favorites-discovery-card__actions, .favorites-discovery-card:has(:focus-visible) .favorites-discovery-card__actions, .favorites-discovery-card.is-actions-open .favorites-discovery-card__actions { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .favorites-discovery-card__button { height: 38px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-cream); cursor: pointer; font-family: var(--font-heading); line-height: 1; white-space: nowrap; } .favorites-discovery-card__button--board { min-width: 124px; max-width: 150px; padding: 6px 15px; gap: 10px; justify-content: space-between; } .favorites-discovery-card__button--save { min-width: 84px; padding: 6px 15px; gap: 10px; } .favorites-discovery-card:is(.is-product-saved, .is-in-collection) .favorites-discovery-card__button--board { flex: 0 1 auto; width: max-content; min-width: 64px; max-width: min(220px, calc(100% - 96px)); min-height: 38px; padding: 0; border-radius: 0; justify-content: flex-start; gap: 0; cursor: default; pointer-events: auto; text-align: right; } .favorites-discovery-card:is(.is-product-saved, .is-in-collection) .favorites-discovery-card__button--board::before { background: transparent; transform: none; } .favorites-discovery-card:is(.is-product-saved, .is-in-collection) .favorites-discovery-card__button--board img, .favorites-discovery-card:is(.is-product-saved, .is-in-collection) .favorites-discovery-card__button--board svg { display: none; } .favorites-discovery-card:is(.is-product-saved, .is-in-collection) .favorites-discovery-card__button--board .cat-card__hover-board-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.18; } .favorites-discovery-card__price { position: absolute; z-index: 2; left: 10px; bottom: 10px; max-width: calc(100% - 20px); min-height: 26px; border-radius: 999px; padding: 0 9px; display: inline-flex; align-items: center; gap: 4px; background: var(--color-cream); color: var(--color-ink); font-family: var(--font-price, var(--font-heading)); font-weight: 750; line-height: 1; box-shadow: none; white-space: nowrap; } .favorites-discovery-card__price-currency, .favorites-discovery-card__price-current { font-size: 13px; } .favorites-discovery-card__price-old { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--color-ink-soft); font-size: 12px; font-weight: 600; text-decoration: line-through; } .favorites-discovery-card--wide .favorites-discovery-card__placeholder { font-size: clamp(48px, 6vw, 92px); } @media (hover: none), (pointer: coarse) { .favorites-discovery-card:hover, .favorites-discovery-card.is-actions-open { box-shadow: inset 0 0 0 1px var(--intent-surface-line); } .favorites-discovery-card:has(:focus-visible) { box-shadow: inset 0 0 0 1px var(--intent-surface-line), var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .favorites-discovery-card__media::after { opacity: 1; } .favorites-discovery-card__actions.cat-card__hover-actions { display: inline-flex !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } } .favorites-section--collections { padding: 58px 0 0; } .favorites-collections-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .favorites-collection-card { display: grid; gap: 10px; align-content: start; color: var(--color-ink); text-decoration: none; min-width: 0; } .favorites-collection-card__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.62 / 1; overflow: hidden; border-radius: 13px; background: var(--intent-surface-sunken); box-shadow: inset 0 0 0 1px var(--intent-surface-line); } .favorites-collection-card__media--count-1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .favorites-collection-card__media--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); } .favorites-collection-card__media--count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .favorites-collection-card__media--count-3 .favorites-collection-card__tile:first-child { grid-row: 1 / span 2; } .favorites-collection-card__tile { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; background-position: center; background-size: cover; border: 1px solid var(--intent-surface-page); color: color-mix(in srgb, var(--color-forest) 64%, transparent); font-family: var(--font-display); font-size: 34px; font-weight: 650; overflow: hidden; text-decoration: none; } .favorites-collection-card__tile::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-ink) 10%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .favorites-collection-card__tile:hover::after, .favorites-collection-card__tile:focus-visible::after { opacity: 1; } .favorites-collection-card__tile:focus-visible { outline: none; } .favorites-collection-card__tile[style*="background-image"] > span { display: none; } .favorites-collection-card__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title count" "view count"; align-items: start; gap: 4px 12px; } .favorites-collection-card__title { grid-area: title; min-width: 0; font-family: var(--font-heading); font-size: 16px; font-weight: 750; line-height: 1.12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .favorites-collection-card__count { grid-area: count; justify-self: end; align-self: start; color: var(--color-ink-soft); font-size: 14px; font-weight: 650; line-height: 1; white-space: nowrap; } .favorites-collection-card__meta { display: contents; } .favorites-collection-card__view-all { grid-area: view; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; margin-top: 8px; padding: 0 22px 0 24px; border-radius: 999px; background: var(--filter-pill-bg); color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 750; line-height: 1; text-decoration: none; transition: background-color 0.16s ease; } .favorites-collection-card__view-all:hover, .favorites-collection-card__view-all:focus-visible { background: var(--filter-pill-bg); } .favorites-collection-card__view-all img { width: 17px; height: 12px; flex: 0 0 auto; transition: transform 0.18s ease; } .favorites-collection-card__view-all:hover img, .favorites-collection-card__view-all:focus-visible img { transform: translateX(4px); } .favorites-section--searches { padding: 58px 0 18px; } .favorites-searches-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; } .favorites-search-chip { display: grid; justify-items: center; gap: 10px; min-width: 0; color: var(--color-ink); text-decoration: none; } .favorites-search-chip__media { display: grid; place-items: center; width: min(132px, 100%); aspect-ratio: 1 / 1; border-radius: 13px; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px var(--intent-surface-line); transition: box-shadow 0.2s ease; } .favorites-search-chip:hover .favorites-search-chip__media, .favorites-search-chip:focus-visible .favorites-search-chip__media { box-shadow: inset 0 0 0 1px var(--intent-surface-line), var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .favorites-search-chip__label { max-width: 126px; text-align: center; font-family: var(--font-heading); font-size: 15px; font-weight: 750; line-height: 1.16; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color 0.16s ease; } .favorites-search-chip:hover .favorites-search-chip__label, .favorites-search-chip:focus-visible .favorites-search-chip__label { text-decoration-color: currentColor; } .cat-card__media--placeholder { display: flex; align-items: center; justify-content: center; } .cat-card__media--placeholder::before { display: none; } .favorites-card__placeholder { position: relative; z-index: 1; font-family: var(--font-display); font-size: 92px; font-weight: 650; line-height: 1; color: color-mix(in srgb, var(--color-forest) 68%, transparent); } .favorites-section--products .cards-grid[hidden], .favorites-empty[hidden] { display: none !important; } .favorites-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 420px; margin: 40px auto 64px; padding: 48px 24px; } .favorites-empty__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--color-sand); margin-bottom: 6px; } .favorites-empty__icon img { width: 28px; height: 28px; display: block; } .favorites-empty__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 650; color: var(--color-forest); } .favorites-empty__copy { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-ink-soft); } .favorites-empty__cta { margin-top: 12px; } .favorites-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 30px auto 4px; } .favorites-pagination[hidden] { display: none !important; } .favorites-pagination__button { min-width: 118px; min-height: 44px; border: 0; border-radius: var(--radius-pill, 999px); background: var(--color-cream); color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: none; transition: box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .favorites-pagination__button:hover:not(:disabled), .favorites-pagination__button:focus-visible:not(:disabled) { background: var(--color-forest); color: var(--color-cream); box-shadow: var(--shadow-card-hover); } .favorites-pagination__button:disabled { cursor: default; opacity: 0.48; } .favorites-pagination__status { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2; } @media (max-width: 640px) { .favorites-page__title { font-size: 32px; } .favorites-toolbar { flex-direction: column; align-items: stretch; } .favorites-card__placeholder { font-size: 120px; } .favorites-pagination { flex-wrap: wrap; gap: 10px; } .favorites-pagination__status { order: -1; width: 100%; text-align: center; } .favorites-section__title { font-size: 20px; } .favorites-searches-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin-inline: -2px; } .favorites-search-chip { flex: 0 0 118px; scroll-snap-align: start; } .favorites-search-chip__media { width: 96px; } .favorites-search-chip__label { font-size: 14px; } } @media (max-width: 1140px) { body.page--favorites .favorites-section--products .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .favorites-discovery-set { --favorites-discovery-group-height: 620px; --favorites-discovery-wide-height: 210px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .favorites-collections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .favorites-searches-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { body.page--favorites .favorites-section--products .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .favorites-collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .favorites-discovery-grid { gap: 12px; } .favorites-discovery-set { --favorites-discovery-gap: 12px; grid-template-columns: minmax(0, 1fr); gap: 14px; } .favorites-discovery-row { gap: 12px; } .favorites-discovery-row .favorites-discovery-card--wide { height: clamp(170px, 52vw, 210px); aspect-ratio: auto; } .favorites-discovery-row .favorites-discovery-card--square { height: auto; aspect-ratio: 1 / 1; } .favorites-discovery-row .favorites-discovery-card__actions { top: 8px; right: 8px; gap: 6px; max-width: calc(100% - 16px); } .favorites-discovery-row .favorites-discovery-card__button { width: auto; min-width: 62px; height: 30px; padding: 0 9px; gap: 5px; font-size: 10px; } .favorites-discovery-row .favorites-discovery-card__button-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; } .favorites-discovery-row .favorites-discovery-card__button svg, .favorites-discovery-row .favorites-discovery-card__button img { width: 10px; height: 10px; flex-basis: 10px; } .favorites-discovery-row .favorites-discovery-card__price { left: 8px; bottom: 8px; max-width: calc(100% - 16px); min-height: 26px; padding: 0 8px; gap: 3px; } .favorites-discovery-row .favorites-discovery-card__price-currency, .favorites-discovery-row .favorites-discovery-card__price-current { font-size: 11px; } .favorites-discovery-row .favorites-discovery-card__price-old { font-size: 10px; } .favorites-section--discovery, .favorites-section--collections, .favorites-section--searches { padding-top: 38px; } .favorites-collection-card__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "count" "view"; gap: 5px; } .favorites-collection-card__count, .favorites-collection-card__view-all { justify-self: start; } .favorites-collection-card__title { font-size: 15px; } .favorites-collection-card__count, .favorites-collection-card__view-all { font-size: 13px; } .favorites-discovery-card__actions { top: 8px; right: 8px; max-width: calc(100% - 16px); gap: 6px; } .favorites-discovery-card__button { min-width: 62px; height: 30px; padding: 0 9px; gap: 5px; font-size: 10px; } .favorites-discovery-card__button--save { min-width: 54px; } .favorites-discovery-card__button svg, .favorites-discovery-card__button img { width: 10px; height: 10px; flex-basis: 10px; } .favorites-discovery-card__price { left: 8px; bottom: 8px; max-width: calc(100% - 16px); min-height: 30px; padding: 0 10px; } .favorites-discovery-card__price-currency, .favorites-discovery-card__price-current { font-size: 13px; } .favorites-discovery-card__price-old { font-size: 12px; } } /* [bundle] /styles/components/support.css */ .page--support { background: var(--color-page-bg); } .support-hero { text-align: center; padding: 42px 0 58px; } .support-hero__title { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(2rem, 1vw + 1.45rem, 2.35rem); font-weight: 700; line-height: 1.05; letter-spacing: 0; color: var(--color-ink); } .support-hero__lead { margin: 0 auto; max-width: 560px; font-size: 16px; line-height: 1.55; color: var(--color-ink-soft); } .support-search { margin: 32px auto 0; max-width: 560px; display: flex; background: var(--popup-bg); border-radius: var(--radius-pill); padding: 6px; border: 1px solid var(--color-line); box-shadow: none; } .support-search__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 14px 22px; font: inherit; font-size: 15px; color: var(--color-ink); } .support-search__input::placeholder { color: var(--color-ink-soft); } .support-search__submit { position: relative; z-index: 0; isolation: isolate; overflow: visible; padding: 12px 28px; border-radius: var(--radius-pill); background: transparent; color: var(--color-cream); font-weight: 600; font-size: 14px; border: 0; outline: 0; cursor: pointer; box-shadow: none; transition: color var(--duration-fast) var(--ease-standard); } .support-search__submit::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-forest); transform: scale(1); transform-origin: center; transition: transform var(--duration-normal) var(--ease-soft), background-color var(--duration-fast) var(--ease-standard); pointer-events: none; will-change: transform; } .support-search__submit:hover, .support-search__submit:focus-visible { background: transparent; color: var(--color-cream); box-shadow: none; } .support-search__submit:hover::before, .support-search__submit:focus-visible::before { transform: scale(var(--hover-grow-scale)); } .support-search__submit:active::before { transform: scale(1); } .support-search__submit:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 3px; } .support-section { padding: 56px 0; } .support-section--faq { background: var(--popup-bg); } .support-section__head { text-align: center; max-width: 640px; margin: 0 auto 36px; } .support-section__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: 0; color: var(--color-ink); } .support-section__copy { margin: 0; color: var(--color-ink-soft); font-size: 15px; } .topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .topic-card { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left; color: inherit; text-decoration: none; background: var(--popup-bg); border: 0; border-radius: 22px; padding: 24px 22px 22px; cursor: pointer; box-shadow: none; transition: box-shadow var(--duration-normal) var(--ease-standard); } .topic-card:hover { background: var(--popup-bg); box-shadow: var(--shadow-card-hover); } .topic-card:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 3px; } .topic-card__icon { width: 28px; height: 28px; border-radius: 0; display: block; background: transparent; object-fit: contain; margin-bottom: 8px; } .topic-card__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-ink); } .topic-card__copy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); } .topic-card__count { margin-top: auto; padding-top: 14px; font-size: 12px; font-weight: 600; color: var(--color-ink); display: inline-flex; align-items: center; gap: 5px; } .support-inline-icon { display: inline-block; width: 12px; height: 12px; flex: 0 0 auto; object-fit: contain; } .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--popup-bg); border: 1px solid var(--color-line); border-radius: 20px; overflow: hidden; } .faq-question:hover, .faq-question:focus-visible { background: transparent; } .faq-question:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: -4px; } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; background: transparent; border: 0; padding: 18px 22px; font: inherit; font-size: 15px; font-weight: 600; color: var(--color-ink); text-align: left; cursor: pointer; } .faq-question__chevron { flex: 0 0 auto; width: 16px; height: 16px; object-fit: contain; transition: transform var(--duration-normal) var(--ease-standard); } .faq-item.is-open .faq-question__chevron { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--ease-standard); } .faq-item.is-open .faq-answer { max-height: 360px; } .faq-answer__inner { padding: 0 22px 20px; font-size: 14px; line-height: 1.6; color: var(--color-ink-soft); } .contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .contact-card { display: flex; flex-direction: column; gap: 8px; background: var(--popup-bg); border: 0; border-radius: 22px; padding: 28px 24px; color: inherit; text-decoration: none; cursor: pointer; box-shadow: none; transition: box-shadow var(--duration-normal) var(--ease-standard); } .contact-card:hover { box-shadow: var(--shadow-card-hover); } .contact-card__icon { width: 30px; height: 30px; border-radius: 0; display: block; object-fit: contain; margin-bottom: 6px; } .contact-card__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-ink); } .contact-card__copy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); } .contact-card__cta { margin-top: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--color-ink); display: inline-flex; align-items: center; gap: 5px; width: fit-content; } @media (max-width: 640px) { .support-hero { padding: 30px 0 38px; } .support-hero__title { font-size: 30px; } .support-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 5px; gap: 4px; } .support-search__input { padding: 12px 14px; font-size: 14px; } .support-search__submit { min-width: 92px; padding: 12px 16px; } .support-section { padding: 42px 0; } .support-section__title { font-size: 25px; } .topic-card, .contact-card { padding: 20px; } } /* [bundle] /styles/components/gift-room.css */ body.page--gift-room { --popup-control-border: var(--popup-border-strong); --popup-focus: var(--color-forest); --workspace-soft-surface: var(--popup-bg-soft); --workspace-hover-surface: var(--popup-hover); --workspace-close-hover-surface: var(--popup-close-hover-bg, var(--sort-control-bg)); --workspace-profile-hover-surface: var(--intent-surface-raised); --workspace-profile-hover-strong: var(--workspace-hover-surface); --workspace-control-bg: var(--intent-surface-page); --workspace-control-bg-focus: color-mix(in srgb, var(--intent-surface-raised) 72%, var(--intent-surface-page)); --workspace-control-border: color-mix(in srgb, var(--intent-text-primary) 18%, var(--intent-surface-line)); --workspace-focus-ring: color-mix(in srgb, var(--color-forest) 14%, transparent); --workspace-field-border-active: var(--color-forest); } body.page--gift-room.is-gift-room-header-locked .fixed-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; z-index: 12000 !important; margin: 0 !important; transform: none !important; } body.page--gift-room.is-gift-room-room-view .fixed-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; z-index: 12000 !important; margin: 0 !important; transform: none !important; } body.page--gift-room.is-gift-room-header-locked.has-mobile-header.is-mobile-header-auto-hidden .fixed-header, body.page--gift-room.is-gift-room-room-view.has-mobile-header.is-mobile-header-auto-hidden .fixed-header { top: 0 !important; transform: none !important; } @media (max-width: 720px) { body.page--gift-room.is-gift-room-header-locked .fixed-header .header-hitboxes, body.page--gift-room.is-gift-room-room-view .fixed-header .header-hitboxes { display: none !important; } } @media (min-width: 1500px) { body.page--gift-room.is-gift-room-header-locked .fixed-header .header-desktop-shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: clamp(64px, 4.4vw, 96px) !important; padding-right: clamp(64px, 4.4vw, 96px) !important; } body.page--gift-room.is-gift-room-header-locked .fixed-header .header-desktop-home { width: clamp(109px, 8.5vw, 172px) !important; } body.page--gift-room.is-gift-room-header-locked .fixed-header .header-desktop-search-shell { max-width: min(56vw, 1120px) !important; } body.page--gift-room.is-gift-room-room-view .fixed-header .header-desktop-shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: clamp(64px, 4.4vw, 96px) !important; padding-right: clamp(64px, 4.4vw, 96px) !important; } body.page--gift-room.is-gift-room-room-view .fixed-header .header-desktop-home { width: clamp(109px, 8.5vw, 172px) !important; } body.page--gift-room.is-gift-room-room-view .fixed-header .header-desktop-search-shell { max-width: min(56vw, 1120px) !important; } } .gift-room-shell { --gr-bg: #f3ede2; --gr-bg-soft: #fbf6ed; --gr-bg-deep: #2d4f48; --gr-accent: #3F6A60; --gr-accent-soft: #F8F5ED; --gr-ink: #232030; --gr-ink-soft: #4a465d; --gr-pattern: rgba(63, 106, 96, 0.6); --gr-cover-from: #f0e5d6; --gr-cover-to: #e1d2bd; --gr-cover-ink: #2d4f48; } .gift-room-shell[data-scenario="wedding"] { --gr-bg: #fbeeec; --gr-bg-soft: #fff5ee; --gr-bg-deep: #6b3d3a; --gr-accent: #b8866a; --gr-accent-soft: #f3e2d4; --gr-ink: #3c252b; --gr-ink-soft: #6b4751; --gr-pattern: rgba(184, 134, 106, 0.7); --gr-cover-from: #f4d7d0; --gr-cover-to: #e3b6a9; --gr-cover-ink: #5a2f33; } .gift-room-shell[data-scenario="baby"] { --gr-bg: #eef4ee; --gr-bg-soft: #f6faf5; --gr-bg-deep: #4b6a5a; --gr-accent: #6a9a82; --gr-accent-soft: #e0eee5; --gr-ink: #2c3a32; --gr-ink-soft: #4b5a52; --gr-pattern: rgba(106, 154, 130, 0.7); --gr-cover-from: #e6efd9; --gr-cover-to: #c9dcc1; --gr-cover-ink: #3e5644; } .gift-room-shell[data-scenario="anniversary"] { --gr-bg: #f3e8e6; --gr-bg-soft: #f9efeb; --gr-bg-deep: #5e2030; --gr-accent: #8e2b3b; --gr-accent-soft: #f0dad4; --gr-ink: #2d1417; --gr-ink-soft: #5b323a; --gr-pattern: rgba(142, 43, 59, 0.6); --gr-cover-from: #e9c6b6; --gr-cover-to: #c87b6f; --gr-cover-ink: #4a181f; } .gift-room-shell[data-scenario="holiday"] { --gr-bg: #e7eee5; --gr-bg-soft: #f5f8f1; --gr-bg-deep: #1f3a2c; --gr-accent: #2f5742; --gr-accent-soft: #d8e6da; --gr-ink: #1a2a20; --gr-ink-soft: #44574b; --gr-pattern: rgba(47, 87, 66, 0.7); --gr-cover-from: #c8d9c1; --gr-cover-to: #5a8364; --gr-cover-ink: #f7f4ec; } .gift-room-shell[data-scenario="birthday"] { --gr-bg: #f5e7da; --gr-bg-soft: #fbf2e6; --gr-bg-deep: #6e3a26; --gr-accent: #c46f4a; --gr-accent-soft: #f6dfd1; --gr-ink: #2f1c14; --gr-ink-soft: #5f3f30; --gr-pattern: rgba(196, 111, 74, 0.6); --gr-cover-from: #f7d2b4; --gr-cover-to: #e29671; --gr-cover-ink: #4a1d11; } .page--gift-room { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); --gift-room-room-chrome-height: 74px; background: var(--color-page-bg, #f8f1eb); overflow-x: hidden !important; overflow-y: auto !important; padding-top: 0 !important; min-height: 100vh; min-height: 100dvh; } html.is-gift-room-page { min-height: 100%; overflow-x: hidden !important; overflow-y: auto !important; } @media (max-width: 951px) { .page--gift-room { padding-top: 0 !important; } } @media (max-width: 720px) { .page--gift-room { --gift-room-mobile-header-clearance: 68px; --gift-room-room-chrome-height: var(--gift-room-mobile-header-clearance); padding-top: 0 !important; } } body.page--gift-room > main.container { width: var(--homepage-shell-width); max-width: var(--jp-page-shell-max, 1372px); min-height: 0; margin: var(--gift-room-room-chrome-height, 74px) auto 0; padding: 0 var(--homepage-shell-inset) 64px; box-sizing: border-box; overflow: visible; } @supports (height: 100svh) { .page--gift-room { min-height: 100svh; } } .gift-room-page-skeleton { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); display: none; min-height: calc(100vh - 63px); background: var(--color-page-bg, #f8f1eb); padding: 24px 0 72px; } body.is-gift-room-preparing .gift-room-page-skeleton { display: block; } body.is-gift-room-preparing > main.container, body.is-gift-room-preparing > footer.site-footer { display: none; } .gift-room-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; } .gift-room-skeleton__lobby-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 26px; } .gift-room-skeleton__intro { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 8px; } .gift-room-skeleton__title { width: min(260px, 68vw); height: 28px; } .gift-room-skeleton__lead { width: min(460px, 78vw); } .gift-room-skeleton__meta { display: flex; flex-wrap: wrap; gap: 10px; } .gift-room-skeleton__meta-pill { width: 92px; height: 18px; } .gift-room-skeleton__meta-pill--wide { width: 156px; } .gift-room-skeleton__calendar { width: 150px; height: 46px; } .gift-room-skeleton__profile { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; } .gift-room-skeleton__avatar { width: 54px; height: 54px; } .gift-room-skeleton__profile-copy { min-width: 0; } .gift-room-skeleton__profile-name { width: min(170px, 42vw); } .gift-room-skeleton__profile-meta { width: min(220px, 54vw); margin-top: 8px; } .gift-room-skeleton__profile-button { grid-column: 1 / -1; width: min(176px, 100%); height: 46px; } .gift-room-skeleton__tabs { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 24px; } .gift-room-skeleton__tab-list { display: flex; flex: 1 1 420px; gap: 10px; overflow: hidden; } .gift-room-skeleton__tab { width: 116px; flex: 0 0 116px; height: 38px; } .gift-room-skeleton__new-room { width: min(178px, 100%); height: 46px; } .gift-room-skeleton__rooms { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; } .gift-room-skeleton-card { position: relative; overflow: hidden; min-height: clamp(238px, 48vw, 316px); background: #e9ddd0; border: 0; border-radius: 22px; box-shadow: none; isolation: isolate; } .gift-room-skeleton-card::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(248, 241, 235, 0) 0%, rgba(248, 241, 235, 0.78) 50%, rgba(248, 241, 235, 0) 100%); animation: jp-skeleton-shimmer 1.55s ease-in-out infinite; } .gift-room-skeleton-card__cover { display: none; } .gift-room-skeleton-card__body { display: none; } .gift-room-skeleton-card__title { width: 76%; height: 16px; } .gift-room-skeleton-card__date { width: 62%; } .gift-room-skeleton-card__budget { width: 100%; height: 4px; border-radius: 999px; } .gift-room-skeleton-card__foot { display: none; } .gift-room-skeleton-card__avatars { display: inline-flex; flex: 0 0 auto; } .gift-room-skeleton-card__avatar { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--color-cream); } .gift-room-skeleton-card__avatar + .gift-room-skeleton-card__avatar { margin-left: -6px; } .gift-room-skeleton-card__status { width: min(132px, 42vw); } @media (min-width: 600px) { body.page--gift-room > main.container { width: var(--homepage-shell-width); } .gift-room-skeleton__lobby-head { grid-template-columns: minmax(0, 1fr) minmax(304px, 448px); align-items: start; gap: 28px; padding-top: 10px; } .gift-room-skeleton__profile { justify-self: end; width: min(100%, 448px); } .gift-room-skeleton__tabs { grid-template-columns: minmax(0, 1fr) 176px; } .gift-room-skeleton__new-room { justify-self: end; width: 176px; } .gift-room-skeleton__rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } } @media (min-width: 768px) { body.page--gift-room > main.container { padding-bottom: 72px; } } @media (min-width: 860px) { .gift-room-skeleton__rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .gift-room-skeleton__rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1280px) { .gift-room-skeleton__rooms { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1142px) { .page--gift-room { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } .gift-room-page-skeleton { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } } @media (max-width: 760px) { .page--gift-room { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } .gift-room-page-skeleton { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } } .gift-room-shell { position: relative; display: block; color: var(--gr-ink); } .gift-room-view { display: none; } .gift-room-view.is-active { display: block; } .gift-room-view.is-switching { animation: gr-fade-in .28s var(--ease-out-expo, cubic-bezier(.19,1,.22,1)); } @keyframes gr-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .gr-lobby-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0 0 4px; padding: 30px 0 0; text-align: left; color: var(--color-ink); } .gr-lobby-head__main { min-width: 0; } .gr-lobby-head__title { font-family: var(--font-display); font-size: 34px; line-height: 1.24; letter-spacing: 0; color: var(--color-ink); margin: 0 0 8px; font-weight: 650; } .gr-lobby-head__lead { font-family: var(--font-display); font-size: 1.03rem; font-weight: 650; line-height: 1.3; color: var(--color-ink); margin: 0; } .gr-lobby-head__pulse { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 249, 241, 0.8); box-shadow: 0 0 0 0 rgba(255, 249, 241, 0.4); animation: gr-pulse 2.6s ease-in-out infinite; } @keyframes gr-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 249, 241, 0.45); } 70% { box-shadow: 0 0 0 10px rgba(255, 249, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 249, 241, 0); } } .gr-lobby-head__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 7px; margin: 16px 0 0; } .gr-lobby-head-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; } .gr-lobby-head-tab, .gr-lobby-head__row [data-upcoming="calendar-overview"] { appearance: none; position: relative; min-width: 0; height: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 8px 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: color-mix(in srgb, var(--color-ink) 76%, var(--color-page-bg)); font-family: inherit; font-size: 0.92rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transform: none; transition: color .18s ease; } .gr-lobby-head-tab::after, .gr-lobby-head__row [data-upcoming="calendar-overview"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 999px 999px 0 0; background: transparent; transition: background-color .18s ease; } .gr-lobby-head-calendar__dot { position: absolute; top: 4px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-alert-red); opacity: 0; transform: scale(0.72); transform-origin: center; transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } .gr-lobby-head-calendar.has-calendar-alert .gr-lobby-head-calendar__dot { opacity: 1; transform: scale(1); } .gr-lobby-head-tab:hover, .gr-lobby-head-tab:focus-visible, .gr-lobby-head__row [data-upcoming="calendar-overview"]:hover, .gr-lobby-head__row [data-upcoming="calendar-overview"]:focus-visible { background: transparent; color: var(--color-ink); outline: 0; box-shadow: none; transform: none; } .gr-lobby-head-tab.is-active { background: transparent; color: var(--color-ink); box-shadow: none; } .gr-lobby-head-tab.is-active::after { background: var(--color-ink); } .gr-lobby-head-tab__icon { width: 18px; height: 18px; flex: 0 0 auto; } .gr-profile-card { --gr-profile-surface: var(--filter-pill-bg); --gr-profile-surface-hover: var(--sort-control-bg); display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; padding: 11px; background: var(--color-page-bg); border: 0; border-radius: 999px; box-shadow: none; cursor: pointer; transition: background-color .18s ease; } .gr-profile-card:hover, .gr-profile-card:focus-within { background: var(--gr-profile-surface); } .gr-profile-card__media { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .gr-profile-card__avatar { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #6c8795 0%, #243345 100%); color: var(--color-forest-dark); font-family: var(--font-display); font-size: 1.22rem; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(255, 249, 241, 0.2); } .gr-profile-card__avatar.is-image { background-size: cover; background-position: center; color: transparent; } .gr-profile-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; text-align: left; } .gr-profile-card__name { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.05; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-profile-card__meta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--color-ink); font-weight: 600; } .gr-profile-card__meta button { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; } .gr-profile-card__meta button:hover, .gr-profile-card__meta button:focus-visible { color: var(--color-forest); text-decoration-color: currentColor; outline: 0; } .gift-room-cta.gr-profile-card__share { flex: 0 1 clamp(176px, 14vw, 190px); width: clamp(176px, 14vw, 190px); min-width: 0; height: 54px; min-height: 54px; padding: 0 clamp(16px, 1.6vw, 20px); position: relative; isolation: isolate; z-index: 0; overflow: visible; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 0; border-radius: 999px; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(0.7rem, 0.68rem + 0.06vw, 0.74rem); font-weight: 850; line-height: 1; text-decoration: none; white-space: nowrap; transform: none; transition: color .18s ease, transform .18s ease; } .gift-room-cta.gr-profile-card__share::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--gr-profile-surface); transition: background-color .18s ease, transform .18s ease; } .gift-room-cta.gr-profile-card__share:hover, .gift-room-cta.gr-profile-card__share:focus-visible { background: transparent; color: var(--color-ink); outline: 0; transform: none; } .gift-room-cta.gr-profile-card__share:hover::before, .gift-room-cta.gr-profile-card__share:focus-visible::before { background: var(--gr-profile-surface-hover); transform: scale(1.018); } .gr-profile-card:hover .gift-room-cta.gr-profile-card__share:hover::before, .gr-profile-card:focus-within .gift-room-cta.gr-profile-card__share:focus-visible::before { background: var(--gr-profile-surface-hover); transform: scale(1.018); } .gr-profile-card__share-icon { display: none; } @media (max-width: 599px) { .gr-lobby-head { gap: 12px; margin-bottom: 4px; padding: 16px 0 0; text-align: left; } .gr-lobby-head__title { margin-bottom: 6px; font-size: 28px; line-height: 1.02; font-weight: 620; } .gr-lobby-head__lead { font-size: 0.92rem; line-height: 1.28; } .gr-lobby-head__row { justify-content: flex-start; } .gr-lobby-head__row { margin-top: 12px; } .gr-lobby-head__row [data-upcoming="calendar-overview"] { min-width: 0; height: 36px; min-height: 36px; padding: 0 11px; font-size: 0.76rem; } .gr-profile-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 999px; } .gr-profile-card__media { gap: 0; } .gr-profile-card__avatar { width: 38px; height: 38px; font-size: 1.05rem; } .gr-profile-card__body { gap: 2px; } .gr-profile-card__name { font-size: 0.98rem; } .gr-profile-card__meta { overflow: hidden; font-size: 0.66rem; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; } .gift-room-cta.gr-profile-card__share { width: auto; height: 44px; min-height: 44px; flex: 0 0 auto; min-width: 0; max-width: 136px; padding: 0 10px; font-size: 0.62rem; line-height: 1; white-space: nowrap; } } @media (max-width: 380px) { .gr-lobby-head__title { font-size: 26px; } .gr-lobby-head__lead { font-size: 0.86rem; } .gr-profile-card { display: inline-flex; gap: 7px; padding: 0; } .gr-profile-card__avatar { width: 34px; height: 34px; font-size: 0.96rem; } .gift-room-cta.gr-profile-card__share { width: 34px; height: 34px; min-width: 34px; min-height: 34px; max-width: none; padding: 0; } .gift-room-cta.gr-profile-card__share .gr-profile-card__share-icon { width: 16px; height: 16px; } } @media (min-width: 900px) { .gr-lobby-head { grid-template-columns: minmax(0, 1fr) minmax(304px, 448px); align-items: start; gap: 14px 28px; padding-top: 30px; } .gr-profile-card { justify-self: end; width: min(100%, 448px); margin-top: -5px; } } .gr-cta-leading { width: 14px; height: 14px; flex-shrink: 0; } .gift-room-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; } .gift-room-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 12px; min-height: auto; position: relative; } .gift-room-stat__label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); font-weight: 600; } .gift-room-stat__value { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.1; color: var(--color-ink); font-weight: 500; letter-spacing: -0.005em; } .gift-room-stat__value--accent { color: var(--color-forest); } .gift-room-stat__delta { font-size: 0.78rem; color: var(--color-ink); } .gift-room-stat__delta--muted { color: var(--color-ink-soft); opacity: 0.78; } .gift-room-stat__dots { display: inline-flex; gap: 5px; margin-top: 4px; } .gift-room-stat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-line-dark); } .gift-room-stat__dot--urgent { background: #b91515; } .gift-room-stat__dot--coming { background: #C98A1A; } .gift-room-stat__dot--relaxed { background: #BFB8AE; } .gift-room-stat--ring { flex-direction: row; align-items: center; gap: 12px; } .gift-room-stat--ring .gift-room-stat__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .gift-room-stat__ring-track { fill: none; stroke: var(--color-line); stroke-width: 3; } .gift-room-stat__ring-fill { fill: none; stroke: var(--color-forest); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; } .gift-room-stat__ring--amber .gift-room-stat__ring-fill { stroke: #C98A1A; } .gift-room-stat__ring--red .gift-room-stat__ring-fill { stroke: #b91515; } .gift-room-stat__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--color-forest); animation: gr-pulse 2.6s ease-in-out infinite; } .gift-room-stat__segbar { display: flex; gap: 2px; height: 6px; margin-top: 4px; border-radius: 3px; overflow: hidden; } .gift-room-stat__segbar > span { display: block; border-radius: 2px; } .gift-room-stat__icon { color: var(--color-warn, #C98A1A); } .gift-room-assistant { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 12px; margin: 0 0 22px; position: relative; overflow: hidden; } .gift-room-assistant::before { display: none; } .gift-room-assistant__body { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; } .gift-room-assistant__tag { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 3px 9px; border-radius: 999px; background: rgba(63, 106, 96, 0.10); color: var(--color-forest); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; } .gift-room-assistant__tag svg { color: var(--color-forest); } .gift-room-assistant__title { font-family: var(--font-display); font-size: 0.92rem; line-height: 1.3; color: var(--color-ink); margin: 0; font-weight: 500; letter-spacing: -0.005em; } .gift-room-assistant__copy { font-size: 0.78rem; color: var(--color-ink-soft); margin: 0; line-height: 1.4; } .gift-room-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 14px 0 12px; } .gift-room-section-head h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; letter-spacing: -0.005em; color: var(--color-ink); font-weight: 500; } .gift-room-section-head__meta { font-size: 0.78rem; color: var(--color-ink-soft); } .gr-spotlight { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; padding: 18px; margin: 0 0 24px; border-radius: 18px; overflow: hidden; background: var(--color-cream); border: 1px solid var(--color-line); color: var(--color-ink); isolation: isolate; } .gr-spotlight::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gr-accent, var(--color-forest)); z-index: 2; } .gr-spotlight[data-scenario="birthday"] { --gr-bg:#f5e7da; --gr-bg-soft:#fbf2e6; --gr-ink:#2f1c14; --gr-ink-soft:#5f3f30; --gr-accent:#c46f4a; --gr-pattern:rgba(196,111,74,.55); } .gr-spotlight[data-scenario="wedding"] { --gr-bg:#fbeeec; --gr-bg-soft:#fff5ee; --gr-ink:#3c252b; --gr-ink-soft:#6b4751; --gr-accent:#b8866a; --gr-pattern:rgba(184,134,106,.6); } .gr-spotlight[data-scenario="baby"] { --gr-bg:#eef4ee; --gr-bg-soft:#f6faf5; --gr-ink:#2c3a32; --gr-ink-soft:#4b5a52; --gr-accent:#6a9a82; --gr-pattern:rgba(106,154,130,.6); } .gr-spotlight[data-scenario="anniversary"] { --gr-bg:#f3e8e6; --gr-bg-soft:#f9efeb; --gr-ink:#2d1417; --gr-ink-soft:#5b323a; --gr-accent:#8e2b3b; --gr-pattern:rgba(142,43,59,.55); } .gr-spotlight[data-scenario="holiday"] { --gr-bg:#e7eee5; --gr-bg-soft:#f5f8f1; --gr-ink:#1a2a20; --gr-ink-soft:#44574b; --gr-accent:#2f5742; --gr-pattern:rgba(47,87,66,.6); } .gr-spotlight::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 0%, rgba(255, 249, 241, .32) 0%, transparent 45%), radial-gradient(circle at 100% 100%, rgba(0,0,0,.06) 0%, transparent 50%); pointer-events: none; z-index: 0; } .gr-spotlight__motif { display: none; } .gr-spotlight__panel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; max-width: 540px; padding-left: 6px; } .gr-spotlight__brow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gr-accent, var(--color-forest)); font-weight: 600; margin-bottom: 2px; } .gr-spotlight__pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--gr-accent, var(--color-forest)); animation: gr-pulse-spot 2.4s ease-in-out infinite; } @keyframes gr-pulse-spot { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px rgba(0,0,0,0); } } .gr-spotlight__title { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw + 0.5rem, 1.7rem); line-height: 1.1; letter-spacing: -0.008em; color: var(--color-ink); margin: 0; font-weight: 400; } .gr-spotlight__copy { font-size: 0.84rem; line-height: 1.4; color: var(--color-ink-soft); margin: 2px 0 8px; max-width: 440px; } .gr-spotlight__stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 12px; padding: 10px 0 0; border-top: 1px solid var(--color-line); } .gr-spotlight__stats > div { display: flex; flex-direction: column; gap: 1px; } .gr-spotlight__stats strong { font-family: var(--font-display); font-size: 1.05rem; line-height: 1; font-weight: 500; color: var(--color-ink); letter-spacing: -0.005em; } .gr-spotlight__stats strong em { font-style: normal; color: var(--color-ink-soft); font-size: 0.78em; } .gr-spotlight__stats span { font-size: 0.7rem; color: var(--color-ink-soft); letter-spacing: 0.04em; } .gr-spotlight__cta-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; } .gr-spotlight__deck { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-self: stretch; } .gr-spotlight__deck { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-self: stretch; } .gr-spotlight__tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; aspect-ratio: 1 / 1; padding: 8px 10px; background: var(--color-sand); border: 1px solid var(--color-line); border-radius: 12px; color: var(--color-ink); overflow: hidden; transition: border-color .2s, background .2s; } .gr-spotlight__tile:hover { border-color: color-mix(in srgb, var(--color-ink) 20%, transparent); background: var(--color-cream); } .gr-spotlight__tile svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 44%; max-width: 40px; height: auto; color: var(--color-ink-soft); opacity: 0.32; } .gr-spotlight__tile span { position: relative; z-index: 1; font-family: var(--font-heading); font-size: 0.66rem; line-height: 1.2; color: var(--color-ink); font-weight: 500; letter-spacing: 0.01em; align-self: flex-start; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; } .gr-spotlight__tile em { position: relative; z-index: 1; font-style: normal; font-size: 0.66rem; font-weight: 600; color: var(--color-forest); letter-spacing: 0.01em; } .gr-spotlight__tile--1, .gr-spotlight__tile--2, .gr-spotlight__tile--3, .gr-spotlight__tile--4 { transform: none; } @media (min-width: 900px) { .gr-spotlight { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 22px 24px; gap: 28px; } .gr-spotlight__deck { align-self: center; } } @media (min-width: 1200px) { .gr-spotlight { padding: 28px 32px; gap: 40px; } } .gift-room-rooms { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: stretch; gap: 16px; width: 100%; margin: 0 0 22px; padding: 8px 0 10px; } .gift-room-card { position: relative; display: flex; flex-direction: column; background: var(--color-page-bg); border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; min-width: 0; height: 100%; box-shadow: none; transition: box-shadow .2s ease; } .gift-room-card:hover { z-index: 2; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-card:has(:focus-visible) { z-index: 2; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-card:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 2px; } .gift-room-icon { --gr-icon-url: none; display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--gr-icon-url) center / contain no-repeat; mask: var(--gr-icon-url) center / contain no-repeat; } .gift-room-icon--calendar { --gr-icon-url: url("/assets/gift-room-icons/calendar.svg"); } .gift-room-icon--more { --gr-icon-url: url("/assets/gift-room-icons/more-vertical.svg"); } .gift-room-icon--pin { --gr-icon-url: url("/assets/gift-room-icons/pin.svg"); } .gift-room-icon--private { --gr-icon-url: url("/assets/header-icons/collection-lock.svg"); } .gift-room-icon--public { --gr-icon-url: url("/assets/header-icons/collection-visibility-globe.svg"); } .gift-room-icon--open { --gr-icon-url: url("/assets/gift-room-icons/open-room.svg"); } .gift-room-icon--edit { --gr-icon-url: url("/assets/gift-room-icons/edit.svg"); } .gift-room-icon--invite { --gr-icon-url: url("/assets/gift-room-icons/invite.svg"); } .gift-room-icon--check { --gr-icon-url: url("/assets/header-icons/check-toggle.svg"); } .gift-room-icon--trash { --gr-icon-url: url("/assets/gift-room-icons/trash.svg"); } .gift-room-icon--lobby-rooms { --gr-icon-url: url("/assets/gift-room-icons/lobby-rooms.svg"); } .gift-room-icon--lobby-ideas { --gr-icon-url: url("/assets/gift-room-icons/lobby-ideas.svg"); } .gift-room-icon--lobby-favorite { --gr-icon-url: url("/assets/header-icons/heart.svg"); } .gift-room-icon--lobby-archive { --gr-icon-url: url("/assets/gift-room-icons/lobby-archive.svg"); } .gift-room-icon--lobby-guide { --gr-icon-url: url("/assets/gift-room-icons/lobby-rooms.svg"); } .gift-room-icon--chat { --gr-icon-url: url("/assets/gift-room-icons/chat.svg"); } .gift-room-icon--savings { --gr-icon-url: url("/assets/gift-room-icons/savings.svg"); } .gift-room-icon--share-profile { --gr-icon-url: url("/assets/gift-room-icons/share-profile.svg"); } .gift-room-icon--sparkle { --gr-icon-url: url("/assets/gift-room-icons/shared/sparkles.svg"); } .gift-room-icon--settings { --gr-icon-url: url("/assets/header-account-menu-icons/settings.svg"); } .gift-room-icon--journal { --gr-icon-url: url("/assets/support-icons/journal-editorial.svg"); } .gift-room-icon--plus { --gr-icon-url: url("/assets/icons/listing/plus-icon.svg"); } .gift-room-card__cover { --gr-card-action-edge: 10px; --gr-card-action-gap: 8px; --gr-card-action-size: 32px; position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 14px; overflow: hidden; color: var(--gr-cover-ink, #2d4f48); isolation: isolate; } .gift-room-card__cover::after { display: none; } .gift-room-card__cover--birthday { background: linear-gradient(135deg, #f7d2b4 0%, #e29671 100%); color: #4a1d11; } .gift-room-card__cover--wedding { background: linear-gradient(135deg, #f4d7d0 0%, #e3b6a9 100%); color: #5a2f33; } .gift-room-card__cover--christmas { background: linear-gradient(135deg, #c8d9c1 0%, #5a8364 100%); color: #f7f4ec; } .gift-room-card__cover--office { background: linear-gradient(135deg, #f0e5d6 0%, #d4c5ad 100%); color: #4a3f30; } .gift-room-card[data-scenario] .gift-room-card__cover { background: linear-gradient(135deg, var(--gr-cover-from) 0%, var(--gr-cover-to) 100%); color: var(--gr-cover-ink); } .gift-room-card[data-scenario="wedding"] { --gr-cover-from: #f4d7d0; --gr-cover-to: #e3b6a9; --gr-cover-ink: #5a2f33; } .gift-room-card[data-scenario="baby"] { --gr-cover-from: #e6efd9; --gr-cover-to: #c9dcc1; --gr-cover-ink: #3e5644; } .gift-room-card[data-scenario="anniversary"] { --gr-cover-from: #e9c6b6; --gr-cover-to: #c87b6f; --gr-cover-ink: #4a181f; } .gift-room-card[data-scenario="holiday"] { --gr-cover-from: #c8d9c1; --gr-cover-to: #5a8364; --gr-cover-ink: #f7f4ec; } .gift-room-card[data-scenario="birthday"] { --gr-cover-from: #f7d2b4; --gr-cover-to: #e29671; --gr-cover-ink: #4a1d11; } .gift-room-card[data-cover="cream"] { --gr-cover-from: #EEE5DA; --gr-cover-to: #DCDDD3; --gr-cover-ink: #232030; } .gift-room-card[data-cover="forest"] { --gr-cover-from: #DCDDD3; --gr-cover-to: #3F6A60; --gr-cover-ink: #FFF9F1; } .gift-room-card[data-cover="peach"] { --gr-cover-from: #F7D2B4; --gr-cover-to: #E29671; --gr-cover-ink: #4A1D11; } .gift-room-card[data-cover="rose"] { --gr-cover-from: #F4D7D0; --gr-cover-to: #C87B6F; --gr-cover-ink: #4A181F; } .gift-room-card[data-cover="sage"] { --gr-cover-from: #E6EFD9; --gr-cover-to: #5A8364; --gr-cover-ink: #F7F4EC; } .gift-room-card__motif { display: none; } .gift-room-card__motif svg { width: 100%; height: 100%; display: block; opacity: 0.85; } .gift-room-card[data-auto-cover-asset] .gift-room-card__cover::after, .gift-room-cover-editor__preview--auto[data-auto-cover-asset]::after { content: ""; position: absolute; inset: 0; z-index: 0; display: block; background-image: var(--gr-cover-auto-image); background-repeat: no-repeat; background-position: center; background-size: cover; pointer-events: none; } .gift-room-card[data-auto-cover-asset="wedding"] .gift-room-card__cover::after, .gift-room-cover-editor__preview--auto[data-auto-cover-asset="wedding"]::after { background-position: center; } .gift-room-card.has-media-cover .gift-room-card__cover { padding: 0; background: #E3E5DD; color: var(--color-cream); } .gift-room-card.has-media-cover .gift-room-card__cover::after, .gift-room-card.has-media-cover .gift-room-card__motif { display: none; } .gift-room-card__media-grid { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(82px, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; background: rgba(255, 249, 241, 0.84); } .gift-room-card__media-grid[data-media-count="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .gift-room-card__media-grid[data-media-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); } .gift-room-card__media-tile { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; background: var(--gr-tile-bg, linear-gradient(135deg, #EEE5DA, #DCDDD3)); color: var(--gr-tile-ink, var(--color-ink)); } .gift-room-card__media-tile--primary { grid-row: 1 / span 2; } .gift-room-card__media-grid[data-media-count="1"] .gift-room-card__media-tile, .gift-room-card__media-grid[data-media-count="2"] .gift-room-card__media-tile { grid-row: 1; } .gift-room-card__media-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 24% 18%, rgba(255, 249, 241, 0.36), transparent 36%), linear-gradient(160deg, rgba(255, 249, 241, 0.16), color-mix(in srgb, var(--color-ink) 8%, transparent)); pointer-events: none; } .gift-room-card__media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .gift-room-card__media-mark { position: relative; z-index: 1; width: clamp(38px, 20%, 64px); aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; color: currentColor; opacity: 0.76; } .gift-room-card__media-tile:not(.gift-room-card__media-tile--primary) .gift-room-card__media-mark { width: clamp(25px, 34%, 40px); } .gift-room-card__media-mark svg { width: 100%; height: 100%; display: block; } .gift-room-card__media-empty { position: relative; z-index: 1; width: 26px; height: 2px; border-radius: 999px; background: currentColor; opacity: 0.26; } .gift-room-card.has-media-cover .gift-room-card__countdown { background: rgba(255, 249, 241, 0.9); color: var(--color-ink); box-shadow: none; } .gift-room-card.has-media-cover .gift-room-card__menu-btn, .gift-room-card.has-media-cover .gr-pin-btn, .gift-room-card.has-media-cover .gift-room-card__privacy-status { background-color: rgba(255, 249, 241, 0.92); } .gift-room-card[data-event-phase="past"] .gift-room-card__countdown { background: #EEE5DA; color: var(--color-forest); } .gift-room-card[data-event-phase="today"] .gift-room-card__countdown { background: var(--color-forest); color: var(--color-cream); } .gift-room-card[data-event-phase="collection"] .gift-room-card__countdown { background: #EEE5DA; color: var(--color-forest); } .gift-room-card__countdown { position: absolute; top: 10px; left: 14px; z-index: 1; display: inline-flex; align-items: center; padding: 3px 9px; background: rgba(255, 249, 241, 0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 999px; font-size: 0.66rem; font-weight: 600; color: var(--color-ink); width: max-content; box-shadow: none; } .gift-room-card__menu-btn { position: absolute; top: 10px; right: var(--gr-card-action-edge); width: var(--gr-card-action-size); height: var(--gr-card-action-size); display: inline-flex; align-items: center; justify-content: center; background-color: rgba(255, 249, 241, 0.85); border: 0; border-radius: 50%; cursor: pointer; color: var(--color-ink); z-index: 5; opacity: 0; pointer-events: none; transform: translateX(8px) scale(0.96); transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.18s ease; will-change: opacity, transform; padding: 0; outline: 0; } .gift-room-card:hover .gift-room-card__menu-btn, .gift-room-card:focus-within .gift-room-card__menu-btn, .gift-room-card__menu-btn.is-open, .gift-room-card__menu-btn:focus-visible { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); } .gift-room-card__menu-btn:hover { background-color: var(--color-cream); } .gift-room-card__menu-btn .gift-room-icon { width: 18px; height: 18px; } .gift-room-card__privacy-status { position: absolute; top: 10px; right: var(--gr-card-action-edge); width: var(--gr-card-action-size); height: var(--gr-card-action-size); display: inline-flex; align-items: center; justify-content: center; background-color: rgba(255, 249, 241, 0.85); border: 0; border-radius: 50%; color: var(--color-ink); z-index: 4; opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.18s ease, right 0.22s ease; will-change: opacity, transform; cursor: pointer; padding: 0; outline: 0; } .gift-room-card__privacy-status:hover { background-color: var(--color-cream); } .gift-room-card.is-pinned:not(:hover):not(:focus-within):not(:has(.gift-room-card__menu-btn.is-open)) .gift-room-card__privacy-status { right: calc(var(--gr-card-action-edge) + var(--gr-card-action-size) + var(--gr-card-action-gap)); } .gift-room-card:hover .gift-room-card__privacy-status, .gift-room-card:focus-within .gift-room-card__privacy-status, .gift-room-card:has(.gift-room-card__menu-btn.is-open) .gift-room-card__privacy-status { right: calc(var(--gr-card-action-edge) + ((var(--gr-card-action-size) + var(--gr-card-action-gap)) * 2)); } .gift-room-card[data-room-private="false"] .gift-room-card__privacy-status { color: var(--color-forest); } .gift-room-card__privacy-status .gift-room-icon { width: 16px; height: 16px; } .gift-room-card__body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 7px; } .gift-room-card__title { font-family: var(--font-display); font-size: 0.96rem; line-height: 1.2; margin: 0; font-weight: 500; color: var(--color-ink); letter-spacing: -0.003em; } .gift-room-card__date { font-size: 0.7rem; color: var(--color-ink-soft); } .gift-room-create-card { appearance: none; display: grid; place-items: stretch; align-self: start; width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1; padding: 0; border: 0; background: transparent; color: var(--color-ink); text-align: center; overflow: visible; } .gift-room-create-card[hidden] { display: none !important; } .gift-room-create-card__cover { position: relative; flex: none; width: 100%; height: 100%; min-height: 0; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: inherit; background: var(--intent-surface-page, var(--color-page-bg)); box-shadow: inset 0 0 0 3px var(--intent-cta-ink, var(--color-ink)); pointer-events: none; isolation: isolate; } .gift-room-create-card__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; opacity: 1; pointer-events: none; } .gift-room-create-card__cover::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: color-mix(in srgb, var(--color-cream) 16%, transparent); backdrop-filter: blur(1px); pointer-events: none; } .gift-room-create-card__button { position: relative; z-index: 2; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(82%, 260px); min-height: 0; padding: 0; border-radius: 0; background: transparent; color: var(--color-ink); font-family: var(--font-heading); line-height: 1.05; box-shadow: none; transform: translateY(0); transition: color 0.18s ease; } .gift-room-create-card__button::before { content: none; } .gift-room-create-card:hover .gift-room-create-card__button, .gift-room-create-card:focus-visible .gift-room-create-card__button { color: var(--color-ink); } .gift-room-create-card__icon { width: 64px; aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 11px; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); box-shadow: none; transform: translateZ(0) scale(1); transform-origin: center; transition: transform 0.18s var(--ease-out-expo, cubic-bezier(.19,1,.22,1)), box-shadow 0.18s ease; } .gift-room-create-card:hover .gift-room-create-card__icon, .gift-room-create-card:focus-visible .gift-room-create-card__icon { transform: translateZ(0) scale(1); box-shadow: none; } .gift-room-create-card__button:hover .gift-room-create-card__icon, .gift-room-create-card:hover .gift-room-create-card__icon:hover { transform: translateZ(0) scale(1.035); box-shadow: none; } .gift-room-create-card__plus { width: 38%; height: 38%; display: block; } .gift-room-create-card__headline, .gift-room-create-card__subline { display: block; } .gift-room-create-card__headline { max-width: 9.8ch; color: var(--color-ink); font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; line-height: 1.05; text-shadow: 0 1px 16px color-mix(in srgb, var(--color-cream) 82%, transparent); } .gift-room-create-card__subline { margin-top: 10px; color: color-mix(in srgb, var(--color-ink) 86%, transparent); font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 14px color-mix(in srgb, var(--color-cream) 82%, transparent); } .gift-room-create-card__body { display: none; } .gift-room-create-card__title { font-family: var(--font-display); font-size: 0.96rem; font-weight: 500; line-height: 1.2; } .gift-room-create-card__copy { max-width: 24ch; color: var(--color-ink-soft); font-size: 0.7rem; font-weight: 600; line-height: 1.25; } .budget-bar { display: flex; flex-direction: column; gap: 4px; } .budget-bar__track { height: 4px; border-radius: 2px; background: var(--color-line); overflow: hidden; } .budget-bar__fill { height: 100%; background: var(--color-forest); border-radius: 2px; transition: width .5s ease; } .budget-bar__meta { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--color-ink-soft); } .budget-bar__meta strong { color: var(--color-ink); } .crew-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .crew-stack { display: inline-flex; } .crew-stack > * + * { margin-left: -6px; } .crew-row__progress { font-size: 0.7rem; color: var(--color-ink-soft); } .gift-room-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-forest); color: var(--color-cream); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em; border: 2px solid var(--color-cream); flex-shrink: 0; } .gift-room-avatar--lg { width: 30px; height: 30px; font-size: 0.68rem; } .gift-room-avatar--more { background: var(--color-sand); color: var(--color-ink-soft); } .gift-room-shell.is-room-view #view-dashboard { display: none; } .gift-room-room-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 13px; } .gift-room-breadcrumb { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 8px 14px 8px 12px; background: transparent; border: 1px solid transparent; border-radius: 999px; font-size: 0.86rem; color: var(--color-ink); cursor: pointer; transition: none; font-family: inherit; } .gift-room-breadcrumb:hover { background: transparent; color: var(--color-ink); border-color: transparent; transform: none; } .gift-room-breadcrumb svg { flex: 0 0 14px; width: 14px; height: 14px; transform: scaleX(-1); transition: transform .2s; } .gift-room-breadcrumb:hover svg, .gift-room-breadcrumb:focus-visible svg { transform: translateX(-3px) scaleX(-1); } .gift-room-room-topbar .gift-room-breadcrumb { flex: 0 0 auto; margin: 0; } .gift-room-room-signals { min-width: 0; display: flex; justify-content: flex-end; } .gift-room-shell.is-room-view #view-room { padding-top: 13px; } .gift-room-room-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 0 0 14px; } .gift-room-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 32px 24px; margin: 0 0 24px; background: linear-gradient(135deg, var(--gr-bg) 0%, var(--gr-bg-soft) 100%); color: var(--gr-ink); isolation: isolate; } .gift-room-hero--bleed { margin: 0; padding: 18px 18px 20px; border-radius: 24px; width: auto; max-width: none; min-height: auto; display: block; background: linear-gradient(135deg, var(--color-cream) 0%, var(--gr-bg-soft, var(--color-cream)) 100%); border: 1px solid var(--color-line); box-shadow: none; } .gift-room-hero--bleed::before { background: radial-gradient(115% 130% at 100% 0%, var(--gr-accent-soft, transparent) 0%, transparent 58%); opacity: 0.55; } @media (min-width: 600px) { .gift-room-hero--bleed { padding-left: 25.6px; padding-right: 25.6px; } } @media (min-width: 768px) { .gift-room-hero--bleed { padding: 22px 24px 24px; } .gift-room-hero--bleed .gift-room-hero__label { transform: translateY(-10px); } } .gift-room-hero--bleed .gift-room-hero__inner { max-width: none; margin: 0; width: 100%; } .gift-room-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(255, 249, 241, 0.3) 0%, transparent 40%), radial-gradient(circle at 90% 70%, rgba(0, 0, 0, 0.05) 0%, transparent 50%); pointer-events: none; z-index: 0; } .gift-room-hero--has-cover-image { background: var(--color-cream); } .gift-room-hero--has-cover-image::after { content: ""; position: absolute; inset: 0 0 0 48%; z-index: 0; background-image: var(--gift-room-hero-cover-image); background-repeat: no-repeat; background-position: center right; background-size: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-ink) 8%, transparent) 14%, color-mix(in srgb, var(--color-ink) 58%, transparent) 38%, var(--color-ink) 66%); mask-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-ink) 8%, transparent) 14%, color-mix(in srgb, var(--color-ink) 58%, transparent) 38%, var(--color-ink) 66%); pointer-events: none; } .gift-room-hero--has-cover-image::before { z-index: 1; background-image: linear-gradient(90deg, var(--color-cream) 0%, var(--color-cream) 46%, color-mix(in srgb, var(--color-cream) 90%, transparent) 58%, color-mix(in srgb, var(--gr-bg-soft, var(--color-cream)) 58%, transparent) 76%, transparent 94%), radial-gradient(circle at 10% 20%, var(--gr-bg-soft, transparent) 0%, transparent 44%); } .gift-room-hero--has-cover-image .gift-room-hero__motif { display: none; } .gift-room-hero--has-cover-image .gift-room-hero__inner { z-index: 2; } .gift-room-hero__motif { position: absolute; inset: 0; z-index: 0; color: var(--gr-pattern); pointer-events: none; opacity: 0.65; } .gift-room-hero__motif svg { width: 100%; height: 100%; display: block; } .gift-room-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; } .gift-room-hero__copy { min-width: 0; } .gift-room-hero__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gr-accent, var(--color-forest)); font-weight: 600; margin: 0 0 4px; padding: 0; background: transparent; border: 0; border-radius: 0; } .gift-room-hero__title { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw + 0.5rem, 1.7rem); line-height: 1.18; letter-spacing: -0.008em; color: var(--color-ink); margin: 0 0 10px; font-weight: 500; max-width: 720px; } .gift-room-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 0 0; margin-top: 4px; border-top: 0; } .gift-room-hero__meta > div { display: flex; flex-direction: column; gap: 1px; } .gift-room-hero__meta strong { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-soft); font-weight: 600; } .gift-room-hero__meta span { font-family: var(--font-display); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.005em; color: var(--color-ink); } .gift-room-hero__signals { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--popup-bg) 84%, transparent); box-shadow: var(--shadow-card-soft); } .gift-room-hero__participants, .gift-room-hero__add-participant, .gift-room-hero__rating, .gift-room-hero__rating-panel { display: inline-flex; align-items: center; border-radius: 999px; background: var(--popup-bg); } .gift-room-hero__participants { gap: 8px; min-height: 34px; padding: 4px 10px 4px 6px; border: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .gift-room-hero__participants:hover, .gift-room-hero__participants:focus-visible { background: var(--popup-bg); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--popup-border); outline: 0; transform: none; } .gift-room-hero__participant-stack { display: inline-flex; margin: 0; } .gift-room-hero__participant-avatar { width: 24px; height: 24px; font-size: 0.62rem; } .gift-room-hero__participant-count { white-space: nowrap; } .gift-room-hero__add-participant { position: relative; width: 34px; height: 34px; flex: 0 0 34px; justify-content: center; border: 0; color: var(--color-ink); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .gift-room-hero__add-participant::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient( from -8deg, var(--color-ink) 0deg 10deg, transparent 10deg 20deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); pointer-events: none; } .gift-room-hero__add-participant:hover, .gift-room-hero__add-participant:focus-visible { background: var(--popup-bg); color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-hero__add-icon { position: relative; z-index: 1; width: 15px; height: 15px; display: block; object-fit: contain; } .gift-room-hero__rating { min-height: 34px; gap: 4px; padding: 0 10px; border: 0; background: var(--color-sand); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 850; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .gift-room-hero__rating:hover, .gift-room-hero__rating:focus-visible { background: var(--color-ink); color: var(--color-cream); outline: 0; transform: none; } .gift-room-hero__rating.is-rated { background: var(--color-ink); color: var(--color-cream); } .gift-room-hero__rating-icon { width: 13px; height: 13px; display: block; background: currentColor; -webkit-mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; } .gift-room-hero__rating-panel { position: absolute; top: calc(100% + 8px); right: 6px; gap: 8px; min-height: 38px; padding: 6px 10px; color: var(--color-ink); box-shadow: var(--shadow-card-soft); } .gift-room-hero__rating-panel[hidden] { display: none; } .gift-room-hero__rating-label { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 0.68rem; font-weight: 800; white-space: nowrap; } .gift-room-hero__rating-options { display: inline-flex; gap: 2px; } .gift-room-hero__rating-option { width: 24px; height: 24px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink-soft); cursor: pointer; font-size: 0.9rem; line-height: 1; } .gift-room-hero__rating-option-star { width: 15px; height: 14px; display: block; background: currentColor; -webkit-mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; } .gift-room-hero__rating-option:hover, .gift-room-hero__rating-option:focus-visible, .gift-room-hero__rating-option.is-selected { background: var(--color-jedi-picks-yellow); color: var(--color-ink); outline: 0; } @media (max-width: 720px) { .gift-room-room-topbar { align-items: center; flex-direction: row; gap: 8px; } .gift-room-room-topbar .gift-room-breadcrumb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-room-signals { flex: 0 0 auto; width: auto; justify-content: flex-end; margin-left: auto; } .gift-room-hero__signals { align-self: center; flex-wrap: nowrap; gap: 5px; padding: 4px; } .gift-room-hero__participants { min-height: 32px; gap: 6px; padding: 4px 8px 4px 5px; } .gift-room-hero__add-participant { width: 32px; height: 32px; flex-basis: 32px; } .gift-room-hero__rating-panel { position: static; flex-basis: 100%; justify-content: center; } } .gift-room-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-top: 16px; } .gift-room-hero__actions .gift-room-cta[data-room-action] { overflow: visible; background: transparent; border-color: transparent; color: var(--color-cream); min-height: 42px; height: 42px; padding: 0 16px; gap: 7px; font-family: var(--font-display); font-size: 0.82rem; font-weight: 650; transform: none; transition: none; } .gift-room-hero__actions .gift-room-cta[data-room-action]::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--color-ink); border: 1px solid var(--color-ink); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; pointer-events: none; } .gift-room-hero__actions .gift-room-cta[data-room-action]:hover, .gift-room-hero__actions .gift-room-cta[data-room-action]:focus-visible { background: transparent; border-color: transparent; color: var(--color-cream); transform: none; } .gift-room-hero__actions .gift-room-cta[data-room-action]:hover::before, .gift-room-hero__actions .gift-room-cta[data-room-action]:focus-visible::before { transform: scale(1.025); } .gift-room-hero__actions .gift-room-cta[data-room-action] .gift-room-icon, .gift-room-hero__actions .gift-room-cta[data-room-action] .gift-room-cta__asset, .gift-room-hero__actions .gift-room-cta[data-room-action] .gift-room-cta__label { position: relative; z-index: 1; transform: none; transition: none; } .gift-room-hero__actions .gift-room-cta[data-room-action]:hover .gift-room-icon, .gift-room-hero__actions .gift-room-cta[data-room-action]:focus-visible .gift-room-icon, .gift-room-hero__actions .gift-room-cta[data-room-action]:active .gift-room-icon, .gift-room-hero__actions .gift-room-cta[data-room-action]:hover .gift-room-cta__asset, .gift-room-hero__actions .gift-room-cta[data-room-action]:focus-visible .gift-room-cta__asset, .gift-room-hero__actions .gift-room-cta[data-room-action]:active .gift-room-cta__asset, .gift-room-hero__actions .gift-room-cta[data-room-action]:hover .gift-room-cta__label, .gift-room-hero__actions .gift-room-cta[data-room-action]:focus-visible .gift-room-cta__label, .gift-room-hero__actions .gift-room-cta[data-room-action]:active .gift-room-cta__label { transform: none; } .gift-room-hero__actions .gift-room-cta__asset { width: 1em; height: 1em; flex: 0 0 auto; } .gift-room-budget { width: 100%; max-width: none; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 0; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 24px; padding: 22px 24px; margin: 0; box-shadow: none; cursor: pointer; } .gift-room-budget__copy { min-width: 0; } .gift-room-budget__head { display: block; margin-bottom: 12px; } .gift-room-budget__head h4 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 4px; font-weight: 500; color: var(--color-ink); letter-spacing: -0.005em; } .gift-room-budget__head .summary { display: block; max-width: 100%; overflow: visible; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.98rem; font-weight: 560; line-height: 1.25; text-overflow: clip; white-space: normal; } .gift-room-budget__head .summary strong { color: var(--color-ink); font-weight: 760; } .gift-room-budget__legend { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; margin: 12px 0 0; font-size: 0.84rem; line-height: 1.2; color: var(--color-ink-soft); } .gift-room-budget__legend > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-budget__legend .dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; display: inline-block; } .gift-room-budget__legend .dot--spent { background: var(--color-forest); } .gift-room-budget__legend .dot--commit { background: color-mix(in srgb, var(--color-forest) 34%, var(--color-cream)); } .gift-room-budget__legend .dot--left { background: var(--color-line); } .gift-room-budget__chart { min-width: 0; display: flex; align-items: center; justify-content: center; margin: 14px 0 2px; } .gift-room-budget__gauge { width: 100%; max-width: 210px; height: auto; display: block; overflow: visible; } .gift-room-budget__gauge-base, .gift-room-budget__gauge-commit, .gift-room-budget__gauge-fill { fill: none; stroke-linecap: round; stroke-width: 26; } .gift-room-budget__gauge-base { stroke: var(--color-line); } .gift-room-budget__gauge-commit { stroke: color-mix(in srgb, var(--color-forest) 34%, var(--color-cream)); transition: stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .gift-room-budget__gauge-fill { stroke: var(--color-forest); transition: stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .gift-room-budget__gauge-value { fill: var(--color-ink); font-family: var(--font-display); font-size: 32px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; } .gift-room-budget__gauge-label { fill: var(--color-ink-soft); font-family: var(--font-heading); font-size: 12px; font-weight: 760; letter-spacing: 0.08em; text-anchor: middle; text-transform: uppercase; } .gift-room-plan-rail { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0; margin: 0 0 10px; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .gift-room-plan-rail:empty { display: none; } .gift-room-plan-rail__body { flex: 1 1 auto; min-width: 0; min-height: 54px; display: flex; align-items: center; gap: 6px; padding: 5px; background: color-mix(in srgb, var(--color-cream) 82%, var(--gr-bg-soft, var(--color-sand))); border: 1px solid var(--color-line); border-radius: 999px; overflow: hidden; } .gift-room-plan-rail__summary { flex: 0 0 176px; min-width: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 999px; background: var(--sort-option-hover, color-mix(in srgb, var(--color-forest) 12%, var(--color-cream))); color: var(--color-ink); white-space: nowrap; overflow: hidden; } .gift-room-plan-rail__gauge { position: relative; flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: conic-gradient(var(--color-forest) calc(var(--plan-progress) * 1%), color-mix(in srgb, var(--color-ink) 9%, transparent) 0); color: var(--color-ink); } .gift-room-plan-rail__gauge::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--color-forest); } .gift-room-plan-rail__gauge span { position: relative; z-index: 1; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.58rem; font-weight: 800; line-height: 1; } .gift-room-plan-rail__summary-copy { min-width: 0; display: grid; gap: 3px; } .gift-room-plan-rail__summary-copy strong { display: block; font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; line-height: 1.28; padding-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-plan-rail__eyebrow { color: color-mix(in srgb, var(--color-ink) 54%, transparent); font-family: var(--font-heading); font-size: 0.58rem; font-weight: 740; line-height: 1; letter-spacing: 0.11em; text-transform: uppercase; } .gift-room-plan-rail__track { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gift-room-plan-rail__track::-webkit-scrollbar { display: none; } .gift-room-plan-chip { flex: 0 0 auto; min-width: 102px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font: inherit; cursor: pointer; transform: none; transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .gift-room-plan-chip:hover, .gift-room-plan-chip:focus-visible { background: var(--sort-option-hover, color-mix(in srgb, var(--color-forest) 12%, var(--color-cream))); box-shadow: none; outline: none; } .gift-room-plan-chip.is-current { background: var(--sort-option-hover, color-mix(in srgb, var(--color-forest) 12%, var(--color-cream))); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--popup-border); } .gift-room-plan-chip.is-complete:not(.is-current) { color: var(--color-forest); } .gift-room-plan-chip__dot { width: 7px; height: 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 38%, transparent); } .gift-room-plan-chip.is-complete .gift-room-plan-chip__dot { background: var(--color-forest); } .gift-room-plan-chip.is-empty .gift-room-plan-chip__dot { background: color-mix(in srgb, var(--color-ink) 20%, transparent); } .gift-room-plan-chip__label { font-family: var(--font-display); font-size: 0.84rem; font-weight: 650; line-height: 1.18; white-space: nowrap; } .gift-room-plan-chip__count { min-width: 30px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 780; line-height: 1; } .gift-room-plan-action { position: relative; isolation: isolate; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transform: none; } .gift-room-plan-action__icon { width: 15px; height: 15px; } .gift-room-plan-action::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--color-forest); transform: scale(1); transition: transform 0.18s ease; } .gift-room-plan-action:hover, .gift-room-plan-action:focus-visible { color: var(--color-cream); outline: none; transform: none; } .gift-room-plan-action:hover::before, .gift-room-plan-action:focus-visible::before { transform: scale(1.045); } .gift-room-plan-action--ghost { color: var(--color-ink); } .gift-room-plan-action--ghost::before { background: color-mix(in srgb, var(--color-cream) 86%, transparent); } .gift-room-plan-action--ghost:hover, .gift-room-plan-action--ghost:focus-visible { color: var(--color-ink); } .gift-room-plan-focus { margin: 0; } .gift-room-plan-focus:empty { display: none; } .gift-room-plan-focus__card { display: grid; grid-template-columns: minmax(190px, 0.82fr) minmax(280px, 1.45fr) minmax(164px, 0.5fr); align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--popup-border); border-radius: 18px; background: color-mix(in srgb, var(--popup-bg) 94%, transparent); box-shadow: none; } .gift-room-plan-focus__lead { min-width: 0; display: grid; gap: 4px; } .gift-room-plan-focus__eyebrow { color: var(--color-forest); font-family: var(--font-heading); font-size: 0.64rem; font-weight: 780; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; } .gift-room-plan-focus__title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.02rem, 1.18vw, 1.24rem); font-weight: 760; line-height: 1.24; letter-spacing: 0; padding-bottom: 2px; } .gift-room-plan-focus__tool { width: max-content; max-width: 100%; display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 12%, transparent); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.63rem; font-weight: 780; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; } .gift-room-plan-focus__copy { max-width: 42rem; margin: 0; color: color-mix(in srgb, var(--color-ink) 76%, transparent); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 620; line-height: 1.32; } .gift-room-plan-focus__steps { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .gift-room-plan-focus__step { min-width: 0; min-height: 36px; display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--popup-border) 66%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--color-cream) 78%, transparent); } .gift-room-plan-focus__step-dot { width: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 24%, transparent); } .gift-room-plan-focus__step.is-done .gift-room-plan-focus__step-dot { background: var(--color-forest); } .gift-room-plan-focus__step-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: normal; } .gift-room-plan-focus__side { min-width: 0; display: grid; justify-items: end; gap: 8px; } .gift-room-plan-focus__progress { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 999px; background: var(--sort-option-hover, color-mix(in srgb, var(--color-forest) 12%, var(--color-cream))); color: var(--color-ink); white-space: nowrap; } .gift-room-plan-focus__progress strong { font-family: var(--font-heading); font-size: 0.96rem; font-weight: 820; line-height: 1; } .gift-room-plan-focus__progress span { color: color-mix(in srgb, var(--color-ink) 62%, transparent); font-family: var(--font-heading); font-size: 0.64rem; font-weight: 720; line-height: 1; } .gift-room-plan-focus__actions { display: flex; justify-content: flex-end; gap: 8px; } .gift-room-plan-focus__button { position: relative; isolation: isolate; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 88%, transparent); color: var(--color-ink); font-family: var(--font-display); font-size: 0.72rem; font-weight: 740; line-height: 1; white-space: nowrap; cursor: pointer; transform: none; transition: box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-plan-focus__button:hover, .gift-room-plan-focus__button:focus-visible { background: var(--sort-option-hover, color-mix(in srgb, var(--color-forest) 12%, var(--color-cream))); box-shadow: 0 12px 24px color-mix(in srgb, var(--color-ink) 10%, transparent); outline: none; } .gift-room-plan-focus__button--primary { background: var(--color-forest); color: var(--color-cream); } .gift-room-plan-focus__button--primary:hover, .gift-room-plan-focus__button--primary:focus-visible { background: var(--color-forest); color: var(--color-cream); } .gift-room-plan-focus__button .gift-room-icon { width: 13px; height: 13px; } .gift-room-workspace-frame { min-width: 0; display: grid; gap: 12px; } .gift-room-workspace-frame > * { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; } .gift-room-workspace-summary { min-width: 0; } .gift-room-workspace-summary:empty { display: none; } .gift-room-workspace-summary .gift-room-plan-focus__card { position: relative; overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box; grid-template-columns: minmax(180px, 0.82fr) minmax(250px, 1.2fr) minmax(156px, 0.46fr); border-radius: 14px; background: color-mix(in srgb, var(--popup-bg) 96%, var(--gr-accent, var(--color-forest))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr-accent, var(--color-forest)) 10%, transparent); } .gift-room-workspace-summary .gift-room-plan-focus__card::before { display: none; } .gift-room-workspace-summary__kicker { color: var(--color-forest); font-family: var(--font-heading); font-size: 0.62rem; font-weight: 800; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .gift-room-workspace-summary .gift-room-plan-focus__step { background: color-mix(in srgb, var(--color-cream) 88%, transparent); } .gift-room-workspace-summary .gift-room-plan-focus__copy { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .gift-room-plan-step-overlay { z-index: 5450; } .gift-room-plan-step-shell { position: relative; width: min(100%, 540px); max-height: calc(100vh - 32px); z-index: 1; } .gift-room-plan-step-modal { position: relative; overflow: visible; z-index: 1; } .gift-room-plan-step-shell .gift-room-plan-step-modal { max-width: none; } .gift-room-plan-step-modal__close.header-auth-close { position: absolute; top: 0; left: calc(100% + 10px); right: auto; width: 78px; height: 55px; border: 0; border-radius: 999px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); cursor: pointer; z-index: 5; transition: background-color 0.24s ease, filter 0.24s ease; will-change: transform; } .gift-room-plan-step-modal__close .header-auth-close-icon { position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; display: block; transform: translate(-50%, -50%); pointer-events: none; } .gift-room-plan-step-modal__close.header-auth-close:hover, .gift-room-plan-step-modal__close.header-auth-close:focus-visible { background: var(--sort-control-bg); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--color-ink) 12%, transparent)); } .gift-room-plan-step-modal__close.header-auth-close:active { transform: none; } .gift-room-plan-step-modal__close.header-auth-close:focus-visible { outline: 2px solid var(--popup-focus, var(--color-forest)); outline-offset: 2px; } .gift-room-plan-step-modal__sheet-grip { display: none; } .gift-room-plan-step-modal__head { padding-bottom: 8px; } .gift-room-plan-step-modal__body { gap: 14px; } .gift-room-plan-step-list { display: grid; gap: 8px; } .gift-room-plan-step-option { width: 100%; min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 14px; border: 0; border-radius: 18px; background: transparent; color: var(--color-ink); cursor: pointer; text-align: left; transition: background-color 0.16s ease, box-shadow 0.16s ease; } .gift-room-plan-step-option:hover, .gift-room-plan-step-option:focus-visible { background: var(--sort-option-hover, color-mix(in srgb, var(--color-forest) 12%, var(--color-cream))); box-shadow: none; outline: none; } .gift-room-plan-step-option span { min-width: 0; font-family: var(--font-display); font-size: 0.96rem; font-weight: 700; line-height: 1.2; } .gift-room-plan-step-option small { padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 7%, transparent); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.66rem; font-weight: 760; line-height: 1; white-space: nowrap; } .gift-room-plan-step-custom { display: grid; gap: 8px; padding-top: 2px; } .gift-room-plan-step-custom__label { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 780; } .gift-room-plan-step-custom__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .gift-room-plan-step-custom__row input { min-width: 0; min-height: 48px; border: 1px solid var(--popup-border); border-radius: 999px; background: var(--popup-bg); color: var(--color-ink); font: inherit; padding: 0 16px; outline: none; } .gift-room-plan-step-custom__row input:focus { border-color: var(--color-forest); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-forest) 16%, transparent); } .gift-room-plan-step-add { position: relative; isolation: isolate; min-width: 86px; min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-display); font-size: 0.84rem; font-weight: 700; cursor: pointer; } .gift-room-plan-step-add::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-forest); transition: transform 0.18s ease; } .gift-room-plan-step-add:hover::before, .gift-room-plan-step-add:focus-visible::before { transform: scale(1.045); } .gift-room-plan-step-add:focus-visible { outline: none; } @media (max-width: 760px) { .gift-room-plan-rail { align-items: stretch; flex-direction: column; gap: 8px; } .gift-room-plan-rail__body { align-items: stretch; flex-direction: column; border-radius: 22px; padding: 7px; } .gift-room-plan-rail__summary { flex: 0 0 auto; width: 100%; min-width: 0; height: 44px; justify-content: center; } .gift-room-plan-rail__track { width: 100%; padding-bottom: 2px; } .gift-room-plan-chip { min-width: 108px; height: 42px; } .gift-room-plan-focus { margin: 0 0 12px; } .gift-room-plan-focus__card { grid-template-columns: 1fr; align-items: stretch; gap: 10px; padding: 12px; border-radius: 22px; } .gift-room-workspace-summary .gift-room-plan-focus__card { grid-template-columns: 1fr; gap: 8px; padding: 10px; border-radius: 18px; } .gift-room-workspace-summary .gift-room-plan-focus__lead { order: 1; } .gift-room-plan-focus__steps { grid-template-columns: 1fr; } .gift-room-workspace-summary .gift-room-plan-focus__steps { order: 3; gap: 6px; } .gift-room-workspace-summary .gift-room-plan-focus__step { min-height: 34px; padding: 5px 8px; } .gift-room-workspace-summary .gift-room-plan-focus__step:nth-child(n+3) { display: none; } .gift-room-plan-focus__side { justify-items: stretch; } .gift-room-plan-focus__progress, .gift-room-plan-focus__actions, .gift-room-plan-focus__button { width: 100%; } .gift-room-plan-focus__actions { flex-direction: column; } .gift-room-workspace-summary .gift-room-plan-focus__side { order: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; } .gift-room-workspace-summary .gift-room-plan-focus__actions { width: auto; flex-direction: row; justify-content: stretch; } .gift-room-workspace-summary .gift-room-plan-focus__progress, .gift-room-workspace-summary .gift-room-plan-focus__button { width: auto; min-height: 36px; justify-content: center; } .gift-room-workspace-summary .gift-room-plan-focus__button { padding: 0 10px; font-size: 0.68rem; } .gift-room-plan-action--ghost { width: 100%; } .gift-room-plan-action { flex: 1 1 0; height: 42px; } } .gift-room-room-shell { margin: 0 0 56px; transition: padding-top 0.2s ease; } .gift-room-tabbar { position: relative; z-index: 150; width: 100%; max-width: 100%; min-width: 0; display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; background: var(--color-page-bg); isolation: isolate; } .gift-room-tabbar::before { content: ""; position: absolute; inset: -7px 0; z-index: -1; background: var(--color-page-bg); pointer-events: none; } .gift-room-tabbar::after { content: none; } body.page--gift-room.is-gift-room-room-tabs-docked .gift-room-room-shell { padding-top: calc(var(--gift-room-room-tabs-height, 46px) + var(--gift-room-room-tabs-gap, 12px)); } body.page--gift-room.is-gift-room-room-tabs-docked .gift-room-tabbar { position: fixed; top: var(--gift-room-room-tabs-fixed-top, 0px); left: var(--gift-room-room-tabs-fixed-left, 0px); width: var(--gift-room-room-tabs-fixed-width, 100%); margin-bottom: 0; transition: gap 0.2s ease; } body.page--gift-room.is-gift-room-room-tabs-docked.is-gift-room-room-tabs-compact .gift-room-tabbar { gap: 6px; } body.page--gift-room.is-gift-room-room-tabs-docked .gift-room-tabbar::before, body.page--gift-room.is-gift-room-room-tabs-docked .gift-room-tabbar::after { left: calc(-1 * var(--gift-room-room-tabs-fixed-left, 0px)); width: 100vw; } body.page--gift-room.is-gift-room-room-tabs-docked .gift-room-tabbar::before { inset-block: calc(-1 * var(--gift-room-room-tabs-fixed-top, 0px)) -7px; } body.page--gift-room.is-gift-room-room-tabs-docked .gift-room-tabbar::after { content: ""; position: absolute; bottom: -7px; height: 1px; z-index: -1; background: var(--color-line); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent), 0 8px 18px color-mix(in srgb, var(--color-ink) 8%, transparent); pointer-events: none; } body.page--gift-room .gift-room-tabs { transition: gap 0.2s ease, padding 0.2s ease; } body.page--gift-room.is-gift-room-room-tabs-docked.is-gift-room-room-tabs-compact .gift-room-tabs { gap: 3px; padding: 3px; scroll-padding-inline: 3px; } body.page--gift-room .gift-room-tab { transition: min-height 0.2s ease, gap 0.2s ease, padding 0.2s ease, font-size 0.2s ease, line-height 0.2s ease, background .2s, color .2s; } body.page--gift-room.is-gift-room-room-tabs-docked.is-gift-room-room-tabs-compact .gift-room-tab { min-height: 38px; gap: 5px; padding: 0 11px; font-size: 0.76rem; line-height: 1.08; } body.page--gift-room .gift-room-tab__primary, body.page--gift-room .gift-room-tab__count, body.page--gift-room .gift-room-tab__icon { transition: font-size 0.2s ease, line-height 0.2s ease, width 0.2s ease, height 0.2s ease; } body.page--gift-room.is-gift-room-room-tabs-docked.is-gift-room-room-tabs-compact .gift-room-tab__primary { font-size: 0.92em; line-height: 1.08; } body.page--gift-room.is-gift-room-room-tabs-docked.is-gift-room-room-tabs-compact .gift-room-tab__count { font-size: 0.66rem; line-height: 1.08; } body.page--gift-room.is-gift-room-room-tabs-docked.is-gift-room-room-tabs-compact .gift-room-tab__icon { width: 13px; height: 13px; } .gift-room-tabs { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; flex: 1 1 auto; display: flex; gap: 4px; padding: 5px; background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 999px; margin: 0; box-shadow: none; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 5px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gift-room-tabs::-webkit-scrollbar { display: none; } .gift-room-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; background: transparent; border: 0; border-radius: 999px; font-size: 0.82rem; font-family: var(--font-heading); font-weight: 760; line-height: 1.16; color: var(--color-ink-soft); cursor: pointer; scroll-snap-align: start; transition: background .2s, color .2s; white-space: nowrap; } .gift-room-tab:hover { color: var(--color-ink); background: var(--color-sand); } .gift-room-tab > span:not(.gift-room-tab__count) { min-width: 0; display: inline-flex; align-items: center; line-height: 1.16; padding-block: 0.14em 0.2em; overflow: visible; } .gift-room-tab__primary, .gift-room-tab__secondary { min-width: 0; overflow: visible; text-overflow: clip; white-space: nowrap; } .gift-room-tab__primary { color: currentColor; font-family: var(--font-heading); font-size: 0.96em; font-weight: 760; line-height: 1.14; } .gift-room-tab__secondary { display: none; } .gift-room-tab.is-plan-linked:not(.is-active) { color: var(--color-ink); background: transparent; } .gift-room-tab.is-active { background: var(--color-ink); color: var(--color-cream); font-weight: 760; box-shadow: none; } .gift-room-tab.is-active .gift-room-tab__icon, .gift-room-tab.is-active .gift-room-tab__primary, .gift-room-tab.is-active .gift-room-tab__secondary, .gift-room-tab.is-active .gift-room-tab__count { color: var(--color-cream); } .gift-room-tab__icon { width: 14px; height: 14px; flex-shrink: 0; } .gift-room-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: auto; padding: 0; background: transparent; border-radius: 0; color: color-mix(in srgb, currentColor 74%, transparent); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.14; box-sizing: border-box; white-space: nowrap; overflow: visible; } .gift-room-tab.is-active .gift-room-tab__count { background: transparent; color: var(--color-cream); } .gift-room-tab[data-tab="crew"] { display: none; } .gift-room-tab--chat { position: relative; flex: 0 0 auto; align-self: stretch; min-height: 0; padding-block: 0; padding-inline: 15px; isolation: isolate; overflow: visible; background: transparent; color: var(--color-cream); border: 0; box-shadow: none; transform: none; transition: color 0.18s ease; } .gift-room-tab--chat::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--color-ink); border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; pointer-events: none; } .gift-room-tab--chat:hover, .gift-room-tab--chat:focus-visible, .gift-room-tab--chat.is-active { background: transparent; color: var(--color-cream); outline: 0; transform: none; } .gift-room-tab--chat:hover::before, .gift-room-tab--chat:focus-visible::before { transform: scale(1.075); } .gift-room-tab--chat .gift-room-tab__icon, .gift-room-tab--chat.is-active .gift-room-tab__icon { position: relative; z-index: 1; color: var(--color-cream); transform: none; } .gift-room-tab--chat > span:not(.gift-room-tab__count) { position: relative; z-index: 1; transform: none; } .gift-room-tab--chat .gift-room-tab__count { display: none; } .gift-room-tab-panels { background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 14px; padding: 14px 14px 18px; box-shadow: none; } .gift-room-tab-content { display: none; } .gift-room-tab-content[data-tab-pane="overview"]:focus, .gift-room-tab-content[data-tab-pane="overview"]:focus-visible { outline: none; } .gift-room-tab-content.is-active { display: block; animation: gr-fade-in .25s var(--ease-out-expo, cubic-bezier(.19,1,.22,1)); } .gift-room-tab-content[data-tab-pane="chat"]:not([data-chat-ready="true"]) { opacity: 0; pointer-events: none; } .gift-room-tab-content[data-tab-pane="chat"][data-chat-ready="true"] { opacity: 1; pointer-events: auto; } .gift-room-items-toolbar { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; } .gift-room-pills { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; padding: 0 8px 2px; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; -webkit-overflow-scrolling: touch; } .gift-room-pills::-webkit-scrollbar { display: none; } .gift-room-pill { flex-shrink: 0; padding: 5px 11px; background: transparent; border: 1px solid var(--color-line); border-radius: 999px; font-size: 0.72rem; font-family: inherit; color: var(--color-ink-soft); cursor: pointer; transition: background .2s, color .2s, border-color .2s; scroll-snap-align: start; white-space: nowrap; } .gift-room-pill:hover { background: var(--color-sand); color: var(--color-ink); } .gift-room-pill.is-active { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); } .gift-room-items-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gift-room-item { display: flex; flex-direction: column; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s ease; } .gift-room-item:hover { border-color: color-mix(in srgb, var(--color-ink) 18%, transparent); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-item__visual { position: relative; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: var(--filter-pill-bg, var(--color-sand-dark)); color: var(--color-ink-soft); overflow: hidden; isolation: isolate; } .gift-room-item__visual::before { display: none; } .gift-room-item__icon { width: 38%; height: 38%; max-width: 64px; max-height: 64px; opacity: 0.5; transition: opacity .25s; position: relative; z-index: 2; } .gift-room-item:hover .gift-room-item__icon { opacity: 0.7; } .gift-room-item__status { position: absolute; top: 8px; left: 8px; padding: 2px 7px; background: rgba(255, 249, 241, 0.94); border: 1px solid var(--color-line); border-radius: 999px; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink); z-index: 3; } .gift-room-item__status--open { color: #b91515; } .gift-room-item__status--claimed { color: var(--color-forest); } .gift-room-item__status--purchased { color: var(--color-ink-soft); } .gift-room-item__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .gift-room-item__title { font-family: var(--font-display); font-size: 0.88rem; line-height: 1.22; margin: 0; color: var(--color-ink); font-weight: 500; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gift-room-item__price { font-family: var(--font-display); font-size: 0.96rem; font-weight: 500; color: var(--color-forest); letter-spacing: 0; } .gift-room-item__claim { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; color: var(--color-ink-soft); margin-top: 1px; } .gift-room-item__claim .gift-room-avatar { width: 16px; height: 16px; font-size: 0.5rem; border-width: 1.5px; } .gift-room-item__action { margin-top: auto; position: relative; z-index: 0; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; background: transparent; border: 0; border-radius: 999px; font-size: 0.74rem; font-weight: 650; font-family: inherit; color: var(--color-ink); cursor: pointer; line-height: 1; letter-spacing: 0; transform-origin: center; transition: none; width: 100%; } .gift-room-item__action::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--color-ink); border-radius: inherit; background: transparent; pointer-events: none; transition: inset .18s ease; } .gift-room-item__action:hover { color: var(--color-ink); background: transparent; box-shadow: none; transform: none; } .gift-room-item__action:hover::before { inset: -3px; } .gift-room-item__action:focus-visible { outline: 0; box-shadow: none; } .gift-room-item__action:focus-visible::before { inset: -3px; } .gift-room-item__action:active { transform: none; } .gift-room-item__action.is-done { color: var(--color-ink-soft); cursor: default; opacity: 0.78; } .gift-room-item__action.is-done:hover { color: var(--color-ink-soft); background: transparent; box-shadow: none; transform: none; } .gift-room-item__action.is-done:hover::before { inset: 0; } .gift-room-item__action-arrow { width: 22px; height: 16px; display: inline-block; flex: 0 0 22px; background: currentColor; mask: url("/assets/gift-room-icons/shared/arrow-right.svg") center / contain no-repeat; -webkit-mask: url("/assets/gift-room-icons/shared/arrow-right.svg") center / contain no-repeat; transition: none; } .gift-room-tasks { display: flex; flex-direction: column; gap: 4px; } .gift-room-task { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: transparent; border-radius: 8px; cursor: pointer; transition: background .2s; } .gift-room-task:hover { background: var(--color-sand); } .gift-room-task__check { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; border: 1.5px solid var(--color-line-dark); display: inline-flex; align-items: center; justify-content: center; color: var(--color-cream); background: var(--color-cream); transition: background .2s, border-color .2s; } .gift-room-task__check::after { content: ""; width: 13px; height: 11px; background: currentColor; opacity: 0; -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; } .gift-room-task__check.is-done { background: var(--color-forest); border-color: var(--color-forest); } .gift-room-task__check.is-done::after { opacity: 1; } .gift-room-task__text { flex: 1; font-size: 0.9rem; color: var(--color-ink); line-height: 1.35; } .gift-room-task__text.is-done { color: var(--color-ink-soft); text-decoration: line-through; } .gift-room-task__owner { font-size: 0.7rem; color: var(--color-ink-soft); font-weight: 500; padding: 2px 7px; background: var(--color-sand); border-radius: 999px; flex-shrink: 0; } .gift-room-task__assignees { display: inline-flex; align-items: center; margin-left: 4px; } .gift-room-task__delete { width: 24px; height: 24px; border-radius: 50%; background: transparent; border: 0; color: var(--color-ink-soft); font-size: 0; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, background .2s, color .2s; font-family: inherit; } .gift-room-task__delete img { width: 12px; height: 12px; display: block; max-width: none; } .gift-room-task:hover .gift-room-task__delete { opacity: 1; } .gift-room-task__delete:hover { background: rgba(200, 20, 28, 0.1); color: var(--color-alert-red, #b91515); } .gift-room-task-add { margin-top: 12px; } .gift-room-task-add__input { width: 100%; padding: 12px 14px; background: var(--color-sand); border: 1px dashed var(--color-line-dark); border-radius: 12px; font-family: inherit; font-size: 0.92rem; color: var(--color-ink); transition: background .2s, border-color .2s, border-style .2s; } .gift-room-task-add__input:focus { outline: none; background: var(--color-cream); border-color: var(--color-forest); border-style: solid; } .gift-room-tasks-pane { gap: 16px; } .gift-room-tasks-pane .gift-room-planner__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gift-room-tasks-pane .gift-room-task-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; margin: 0; } .gift-room-tasks-pane .gift-room-task-add__input { min-height: 52px; padding: 0 20px; border: 1.5px solid var(--gift-room-popup-field-border, var(--popup-control-border)); border-radius: 999px; background: var(--gift-room-popup-field-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 0.9rem; font-weight: 550; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .gift-room-tasks-pane .gift-room-task-add__input:focus, .gift-room-tasks-pane .gift-room-task-add__input:focus-visible { border-color: var(--gift-room-popup-field-focus, var(--popup-focus)); background: var(--gift-room-popup-field-bg, var(--popup-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gift-room-popup-field-focus, var(--popup-focus)) 14%, transparent); outline: 0; } .gift-room-task-add__button.gift-room-cta { position: relative; min-width: 148px; justify-content: center; gap: 10px; background: transparent; border-color: transparent; color: var(--color-cream); transform: none; transition: none; } .gift-room-task-add__button.gift-room-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: transform 0.18s ease; pointer-events: none; } .gift-room-task-add__button.gift-room-cta:hover, .gift-room-task-add__button.gift-room-cta:focus-visible { transform: none; outline: 0; } .gift-room-task-add__button.gift-room-cta:hover::before, .gift-room-task-add__button.gift-room-cta:focus-visible::before { transform: scale(var(--hover-grow-scale, 1.04)); } .gift-room-task-add__button .gift-room-cta__asset, .gift-room-task-add__button .gift-room-cta__label { position: relative; z-index: 1; transform: none; } .gift-room-tasks-pane .gift-room-tasks { display: grid; gap: 12px; } .gift-room-tasks-pane .gift-room-task { min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border: 1px solid var(--gift-room-popup-field-border, var(--popup-control-border)); border-radius: 28px; background: var(--gift-room-popup-field-bg, var(--popup-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); cursor: default; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-tasks-pane .gift-room-task:hover, .gift-room-tasks-pane .gift-room-task:focus-within { border-color: transparent; background: var(--gift-room-popup-field-bg, var(--popup-bg)); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-tasks-pane .gift-room-task.is-done { border-color: var(--color-forest); background: color-mix(in srgb, var(--color-forest) 5%, var(--gift-room-popup-field-bg, var(--popup-bg))); } .gift-room-tasks-pane .gift-room-task__check { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; padding: 0; border-radius: 14px; border-color: var(--gift-room-popup-field-border, var(--popup-control-border)); background: var(--gift-room-popup-field-bg, var(--popup-bg)); color: var(--color-cream); cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-tasks-pane .gift-room-task__check::after { width: 17px; height: 14px; } .gift-room-tasks-pane .gift-room-task__check:hover, .gift-room-tasks-pane .gift-room-task__check:focus-visible { border-color: var(--color-forest); box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 14%, transparent); outline: 0; transform: translateY(-1px); } .gift-room-tasks-pane .gift-room-task__check.is-done { border-color: var(--color-forest); background: var(--color-forest); } .gift-room-tasks-pane .gift-room-task__body { min-width: 0; display: grid; gap: 6px; } .gift-room-tasks-pane .gift-room-task__text { min-width: 0; font-size: 0.95rem; font-weight: 650; } .gift-room-tasks-pane .gift-room-task__meta { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gift-room-tasks-pane .gift-room-task__meta > span, .gift-room-tasks-pane .gift-room-task__owner { min-width: 0; display: inline-flex; align-items: center; max-width: 100%; padding: 4px 9px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-sand); color: var(--color-ink-soft); font-size: 0.72rem; font-weight: 650; line-height: 1.1; } .gift-room-tasks-pane .gift-room-task__assignees { min-width: 38px; display: inline-flex; align-items: center; justify-content: flex-end; margin-left: 0; } .gift-room-tasks-pane .gift-room-task__avatar.gift-room-avatar { width: 28px; height: 28px; margin-left: -8px; border: 2px solid var(--gift-room-popup-field-bg, var(--popup-bg)); font-size: 0.64rem; } .gift-room-tasks-pane .gift-room-task__avatar.gift-room-avatar:first-child { margin-left: 0; } .gift-room-tasks-pane .gift-room-task__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; opacity: 0; transition: opacity 0.15s ease; } .gift-room-tasks-pane .gift-room-task__icon-button { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-ink-soft); cursor: pointer; font-family: inherit; font-size: 0; line-height: 1; transition: opacity 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .gift-room-tasks-pane .gift-room-task__icon-button i { color: currentColor; font-size: 15px; line-height: 1; } .gift-room-tasks-pane .gift-room-task__delete { opacity: 1; } .gift-room-tasks-pane .gift-room-task__delete img { width: 14px; height: 14px; } .gift-room-tasks-pane .gift-room-task:hover .gift-room-task__actions, .gift-room-tasks-pane .gift-room-task:focus-within .gift-room-task__actions { opacity: 1; } .gift-room-tasks-pane .gift-room-task__icon-button:hover, .gift-room-tasks-pane .gift-room-task__icon-button:focus-visible { background-color: var(--popup-hover); box-shadow: none; color: var(--color-ink); outline: 0; } .gift-room-task-empty { margin-top: 0; } @media (hover: none), (max-width: 560px) { .gift-room-tasks-pane .gift-room-task__actions { opacity: 1; } } @media (max-width: 720px) { .gift-room-tasks-pane .gift-room-task-add { grid-template-columns: minmax(0, 1fr); } .gift-room-task-add__button.gift-room-cta { width: 100%; min-width: 0; } .gift-room-tasks-pane .gift-room-task { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; border-radius: 22px; } .gift-room-tasks-pane .gift-room-task__assignees { grid-column: 2; justify-content: flex-start; } .gift-room-tasks-pane .gift-room-task__actions { grid-column: 3; grid-row: 1; } } @media (max-width: 420px) { .gift-room-tasks-pane .gift-room-planner__metrics { grid-template-columns: 1fr; } } .gift-room-chat__list { display: flex; flex-direction: column; gap: 4px; } .gift-room-chat__empty { text-align: center; padding: 24px; color: var(--color-ink-soft); font-size: 0.92rem; } .gift-room-chat__form { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-line); } .gift-room-chat__input { flex: 1; min-height: 52px; height: 52px; padding: 0 18px; background: var(--popup-bg, var(--color-cream)); border: 1.5px solid var(--popup-control-border, var(--color-line)); border-radius: 999px; font-family: inherit; font-size: 0.92rem; color: var(--color-ink); box-sizing: border-box; transition: border-color .2s; } .gift-room-chat__input:focus { outline: none; background: var(--popup-bg, var(--color-cream)); border-color: var(--popup-focus, var(--color-forest)); } .gift-room-chat__btn { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--color-forest); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s, background .2s; } .gift-room-chat__btn:hover { transform: scale(1.04); background: var(--color-forest-dark); } .gift-room-chat__btn img { width: 18px; height: 18px; } .gift-room-chat__form { flex-direction: column; align-items: stretch; } .gift-room-chat__bar { display: flex; gap: 8px; align-items: center; } .gift-room-chat__attach { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--color-sand); border: 1px solid var(--color-line); color: var(--color-forest); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; } .gift-room-chat__attach:hover, .gift-room-chat__attach:focus-visible { background: var(--color-cream); border-color: var(--color-forest); outline: none; } .gift-room-chat__pending { margin-bottom: 10px; } .gift-room-chat__att, .gift-room-chat__picker-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 62px; padding: 8px 12px 8px 8px; background: var(--popup-bg); border: 1.5px solid var(--intent-surface-line); border-radius: 18px; text-decoration: none; color: var(--color-ink); max-width: 100%; } .gift-room-chat__pending .gift-room-chat__att--item { width: min(100%, 520px); } .gift-room-chat__att-glyph { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--intent-cta-ink); background: color-mix(in srgb, var(--intent-cta-ink) 6%, transparent); } .gift-room-chat__att-glyph img { width: 24px; height: 24px; display: block; object-fit: contain; } .gift-room-chat__att-glyph .gift-room-item__icon { width: 24px; height: 24px; opacity: 1; } .gift-room-chat__att-thumb { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; overflow: hidden; border: 1px solid var(--intent-surface-line); } .gift-room-chat__att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gift-room-chat__att-meta { display: grid; gap: 2px; min-width: 0; } .gift-room-chat__att-title { min-width: 0; font-family: var(--font-heading); font-weight: 900; font-size: 1rem; line-height: 1.14; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gift-room-chat__att-price { font-family: var(--font-price, var(--font-display)); font-size: .94rem; font-weight: 800; color: var(--color-forest); } .gift-room-chat__att--photo { padding: 0; border: 0; background: transparent; } .gift-room-chat__att-img { width: 130px; max-width: 70%; height: auto; border-radius: 14px; border: 1px solid var(--color-line); display: block; } .gift-room-chat__att-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--color-ink-soft); font-size: 0; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .gift-room-chat__att-x::before { content: ""; width: 14px; height: 14px; display: block; background: url("/assets/gift-room-icons/shared/x.svg") center / contain no-repeat; } .gift-room-chat__att-x:hover, .gift-room-chat__att-x:focus-visible { background: color-mix(in srgb, var(--color-alert-red) 10%, transparent); outline: 0; } .gift-room-chat__msg { align-items: flex-start; } .gift-room-chat__msg .gift-room-task__text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .gift-room-chat__picker { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 230px; overflow-y: auto; padding: 2px; background: transparent; border: 0; border-radius: 18px; } .gift-room-chat__picker[hidden], .gift-room-chat__pending[hidden] { display: none !important; } .gift-room-chat__picker-item { width: 100%; cursor: pointer; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .gift-room-chat__picker-item:hover, .gift-room-chat__picker-item:focus-visible { border-color: var(--color-forest); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-ink) 8%, transparent); outline: 0; transform: translateY(-1px); } .gift-room-chat__picker-empty { color: var(--color-ink-soft); font-size: .9rem; padding: 6px 4px; } .gift-room-chatdock__audio-block { display: block; min-width: min(240px, 100%); } .gift-room-chatdock .workspace-bubble-audio__transcript-toggle { position: absolute; left: -36px; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--workspace-bubble-transcript-bg, var(--color-ink)); color: var(--intent-surface-page, var(--color-cream)); font-size: 0; line-height: 1; cursor: pointer; box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 14%, transparent); } .gift-room-chatdock .workspace-msg--them .workspace-bubble[data-audio-bubble="true"] { margin-left: 42px; } .gift-room-chatdock .workspace-bubble-audio__transcript-toggle img { display: block; width: 16px; height: 16px; object-fit: contain; } .gift-room-chatdock .workspace-bubble-audio__transcript-toggle:hover, .gift-room-chatdock .workspace-bubble-audio__transcript-toggle:focus-visible, .gift-room-chatdock .workspace-bubble-audio__transcript-toggle[aria-expanded="true"] { background: var(--workspace-bubble-transcript-hover-bg, color-mix(in srgb, var(--color-ink) 88%, var(--intent-surface-page))); outline: 0; } .gift-room-chatdock .workspace-bubble-audio__transcript { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gift-room-chatdock .workspace-bubble-audio__transcript[hidden] { display: none; } .gift-room-chatdock .workspace-bubble-audio__transcript.is-empty { opacity: 0; } .gift-room-cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-family: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; overflow: visible; transition: filter .18s ease, background-color .18s ease, border-color .18s ease; } .gift-room-cta:hover { filter: brightness(0.94); } .gift-room-cta--dark { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); } .gift-room-cta--dark .gift-room-cta__plus { color: var(--color-cream); } .gift-room-cta--forest { background: transparent; color: var(--color-cream); border-color: transparent; font-weight: 650; } .gift-room-cta--forest::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--color-forest); transform: scale(1); transform-origin: center; transition: transform .18s ease; pointer-events: none; } .gift-room-cta--forest:hover, .gift-room-cta--forest:focus-visible { background: transparent; border-color: transparent; color: var(--color-cream); transform: none; } .gift-room-cta--forest:hover::before, .gift-room-cta--forest:focus-visible::before { background: var(--color-forest); transform: scale(1.04); } .gift-room-cta--forest .gift-room-cta__plus { color: var(--color-cream); } .gift-room-cta--cream { background: var(--color-cream); color: var(--color-ink); border-color: var(--color-line); } .gr-lobby-head__row .gift-room-cta.gr-lobby-head-calendar:hover, .gr-lobby-head__row .gift-room-cta.gr-lobby-head-calendar:focus-visible { background: transparent; border-color: transparent; color: var(--color-ink); box-shadow: none; transform: none; } .gift-room-cta--alert { background: transparent; color: var(--color-alert-red); border-color: var(--color-alert-soft); } .gift-room-cta--alert:hover { background: var(--color-alert-soft); } .gift-room-cta--block { width: 100%; justify-content: center; } .gift-room-cta--compact { min-height: 44px; height: 42px; padding: 0 16px; gap: 6px; font-size: 0.82rem; } .gift-room-cta__plus { position: relative; z-index: 1; flex-shrink: 0; transform: none; } .gift-room-cta__asset { position: relative; z-index: 1; flex: 0 0 auto; } .gift-room-cta__label { position: relative; z-index: 1; transform: none; } .gift-room-cta__arrow { position: relative; z-index: 1; flex-shrink: 0; width: 18px; height: auto; display: block; } .gift-room-fab { position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 6px; padding: 7px; background: color-mix(in srgb, var(--color-ink) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 12px 36px color-mix(in srgb, var(--color-ink) 32%, transparent); z-index: 50; max-width: calc(100vw - 24px); } .gift-room-shell.is-room-view .gift-room-fab { display: inline-flex; } .gift-room-fab__btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: transparent; border: 0; border-radius: 999px; color: var(--color-cream); font-size: 0.82rem; font-family: inherit; font-weight: 500; cursor: pointer; min-height: 44px; } .gift-room-fab__btn svg { width: 18px; height: 18px; flex-shrink: 0; } .gift-room-fab__btn:hover { background: rgba(255, 249, 241, 0.08); } .gift-room-fab__btn--primary { background: var(--color-cream); color: var(--color-ink); } .gift-room-fab__btn--primary:hover { background: var(--color-cream, #FFF9F1); } .gift-room-modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--popup-overlay); backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 0; pointer-events: none; z-index: 30000; padding: 16px; transition: opacity 0.26s ease; } html.is-gift-room-overlay-open, body.is-gift-room-overlay-open { overflow: hidden; } body.is-gift-room-overlay-open .jp-cookie-banner, body.is-gift-room-overlay-open .fixed-header .header-mobile-bottom-bar { opacity: 0 !important; pointer-events: none !important; } .gift-room-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .gift-room-modal-overlay.is-closing { opacity: 0; pointer-events: none; } .gift-room-modal-overlay.is-sheet-closing { pointer-events: none; } .gift-room-modal-overlay[aria-hidden="true"], .gift-room-modal-overlay[aria-hidden="true"] * { pointer-events: none !important; } .gift-room-modal { position: relative; width: 100%; max-width: 540px; max-height: calc(100vh - 32px); background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 24px; display: flex; flex-direction: column; box-shadow: var(--popup-shadow); overflow: visible; transform: translateY(20px); transition: transform .35s var(--ease-out-expo, cubic-bezier(.19,1,.22,1)); } .gift-room-modal-overlay.is-open .gift-room-modal { transform: translateY(0); } .gift-room-modal-overlay.is-closing .gift-room-modal { transform: translateY(8px) scale(0.985); } .gift-room-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 14px; } .gift-room-modal__title { font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); margin: 0; font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); color: var(--color-ink); letter-spacing: var(--popup-title-letter-spacing, 0); } .gift-room-modal__subtitle { margin: 4px 0 0; font-size: 0.88rem; color: var(--color-ink-soft); } .gift-room-modal__close { position: absolute; top: 0; left: calc(100% + var(--popup-close-offset, 10px)); right: auto; width: var(--popup-close-width, 78px); height: var(--popup-close-height, 55px); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--popup-bg); border: 0; border-radius: 999px; color: var(--color-ink); cursor: pointer; padding: 0; box-shadow: var(--popup-shadow-soft); transition: background-color 0.24s ease, filter 0.24s ease; will-change: transform; } .gift-room-modal__close:hover, .gift-room-modal__close:focus-visible { background: var(--popup-close-hover-bg, var(--sort-control-bg)); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: var(--popup-close-hover-filter); } .gift-room-modal__close:active { transform: none; } .gift-room-modal__close:focus-visible { outline: 2px solid var(--popup-focus, var(--color-forest)); outline-offset: 2px; } .gift-room-modal__close svg, .gift-room-modal__close-icon { width: var(--popup-close-icon-size, 17px); height: var(--popup-close-icon-size, 17px); display: block; } .gift-room-modal__body { padding: 6px 22px 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; min-height: 0; } .gift-room-planner-sheet { --header-auth-label-bg: var(--popup-bg); --header-auth-field-bg: var(--popup-bg); width: min(720px, calc(100vw - 120px)); max-width: min(720px, calc(100vw - 120px)); max-height: min(calc(100vh - 32px), calc(100dvh - 32px)); border: 1px solid var(--popup-border); border-radius: 30px; background: var(--popup-bg); box-shadow: var(--popup-shadow); overflow: visible; } .gift-room-planner-sheet .gift-room-modal__sheet-grip { display: none; } .gift-room-planner-sheet__head { padding: 30px 32px 14px; } .gift-room-planner-sheet__body { padding: 10px 32px 32px; gap: 18px; overflow-y: auto; overscroll-behavior: contain; } .gift-room-planner-sheet__scroll { display: contents; } .gift-room-planner-sheet__close { position: absolute; top: 0; left: calc(100% + var(--popup-close-offset, 10px)); width: var(--popup-close-width, 78px); height: var(--popup-close-height, 55px); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--popup-bg); color: var(--color-ink); box-shadow: var(--popup-shadow-soft); cursor: pointer; } .gift-room-planner-sheet__close:hover, .gift-room-planner-sheet__close:focus-visible { background: var(--popup-close-hover-bg, var(--sort-control-bg)); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: var(--popup-close-hover-filter); outline: 0; } .gift-room-planner-sheet--vendor-versions { width: min(900px, calc(100vw - 120px)); max-width: min(900px, calc(100vw - 120px)); display: flex; flex-direction: column; } .gift-room-planner-sheet--vendor-versions .gift-room-planner-sheet__scroll { display: flex; flex-direction: column; max-height: min(calc(100vh - 32px), calc(100dvh - 32px)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .gift-room-planner-sheet--vendor-versions .gift-room-planner-sheet__scroll::-webkit-scrollbar { display: none; } .gift-room-planner-sheet--vendor-versions .gift-room-planner-sheet__head, .gift-room-planner-sheet--vendor-versions .gift-room-planner-sheet__body { flex: 0 0 auto; } .gift-room-planner-sheet--vendor-versions .gift-room-planner-sheet__body { max-height: none; overflow: visible; padding-right: 32px; } .gift-room-planner-sheet:has([data-table-confirm-delete]) { width: min(320px, calc(100vw - 120px)); max-width: min(320px, calc(100vw - 120px)); border-radius: 16px; } .gift-room-planner-sheet:has([data-table-confirm-delete]) .gift-room-planner-sheet__head { padding: 22px 18px 6px; } .gift-room-planner-sheet:has([data-table-confirm-delete]) .gift-room-planner-sheet__body { padding: 6px 18px 18px; gap: 16px; } .gift-room-planner-sheet:has([data-table-confirm-delete]) .gift-room-modal__title { font-size: 1.35rem; line-height: 1.14; } .gift-room-planner-sheet:has([data-table-confirm-delete]) .gift-room-modal__subtitle { font-size: 1rem; line-height: 1.24; } .gift-room-planner-sheet:has([data-table-confirm-delete]) .gift-room-sheet-copy { font-size: 1rem; line-height: 1.28; } .gift-room-planner-sheet:has([data-table-confirm-delete]) .gift-room-sheet-actions--confirm { justify-content: space-between; } .gift-room-planner-sheet:has([data-table-confirm-delete]) .gift-room-sheet-action { min-height: 40px; min-width: 104px; padding-inline: 16px; font-family: var(--font-body); font-size: 0.88rem; font-weight: 800; } .gift-room-rating-overlay { z-index: 30100; } #gift-room-rating-overlay.is-open { opacity: 1 !important; pointer-events: auto !important; } .gift-room-story-prompt-overlay { z-index: 30110; } .gift-room-rating-modal { max-width: 760px; } .gift-room-rating-modal__body { align-items: stretch; gap: 20px; padding-bottom: 24px; } .gift-room-review-summary { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(142px, 0.6fr)); gap: 14px; align-items: center; } .gift-room-review-summary__main, .gift-room-review-summary__metric { min-height: 96px; border: 1px solid var(--popup-border); border-radius: 24px; background: color-mix(in srgb, var(--color-cream) 70%, var(--popup-bg)); color: var(--color-ink); } .gift-room-review-summary__main { display: flex; align-items: center; gap: 14px; padding: 18px 20px; } .gift-room-review-summary__score { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; line-height: 0.9; letter-spacing: 0; } .gift-room-review-summary__star, .gift-room-review-summary__review-star { display: inline-block; background: var(--color-jedi-picks-yellow); -webkit-mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; } .gift-room-review-summary__star { width: clamp(34px, 5vw, 48px); height: clamp(32px, 5vw, 46px); } .gift-room-review-summary__copy, .gift-room-review-summary__metric-label { display: grid; gap: 4px; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 0.94rem; font-weight: 650; line-height: 1.24; letter-spacing: 0; } .gift-room-review-summary__copy strong, .gift-room-review-summary__metric-label span:first-child { color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; font-weight: 900; } .gift-room-review-summary__metric { display: flex; align-items: center; gap: 12px; padding: 16px; } .gift-room-review-summary__ring { width: 60px; height: 60px; flex: 0 0 auto; display: inline-grid; place-items: center; border: 4px solid var(--color-jedi-picks-yellow); border-radius: 50%; color: var(--color-ink); font-family: var(--font-heading); font-size: 1.12rem; font-weight: 900; line-height: 1; } .gift-room-rating-modal__your { display: grid; gap: 12px; } .gift-room-rating-modal__your-head, .gift-room-review-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gift-room-rating-modal__your-label, .gift-room-rating-modal__status { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.92rem; font-weight: 900; letter-spacing: 0; } .gift-room-rating-modal__status { color: var(--color-ink-soft); font-size: 0.82rem; } .gift-room-rating-modal__options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .gift-room-rating-modal__option { min-width: 0; min-height: 56px; border: 1px solid var(--popup-border); border-radius: 18px; background: color-mix(in srgb, var(--popup-bg) 78%, var(--color-cream)); color: var(--color-ink-soft); cursor: pointer; display: grid; place-items: center; line-height: 1; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .gift-room-rating-modal__star { width: clamp(25px, 4vw, 34px); height: clamp(24px, 4vw, 32px); display: block; background: currentColor; -webkit-mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; } .gift-room-rating-modal__option:hover, .gift-room-rating-modal__option:focus-visible { border-color: color-mix(in srgb, var(--color-jedi-picks-yellow) 78%, var(--popup-border)); background: color-mix(in srgb, var(--popup-bg) 86%, var(--color-cream)); color: var(--color-ink); outline: 0; transform: scale(1.025); } .gift-room-rating-modal__option.is-selected { border-color: color-mix(in srgb, var(--color-jedi-picks-yellow) 78%, var(--popup-border)); background: color-mix(in srgb, var(--popup-bg) 78%, var(--color-cream)); color: var(--color-jedi-picks-yellow); outline: 0; transform: scale(1.025); } .gift-room-rating-modal__option.is-selected:hover, .gift-room-rating-modal__option.is-selected:focus-visible { color: var(--color-jedi-picks-yellow); } .gift-room-review-form { display: grid; gap: 10px; } .gift-room-review-form__field { position: relative; display: grid; gap: 8px; } .gift-room-review-form__field .gift-room-field__label { position: absolute; top: 10px; left: 16px; z-index: 1; padding: 0 7px; border-radius: 999px; background: var(--popup-bg); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 850; line-height: 1; letter-spacing: 0; } .gift-room-review-form__textarea { width: 100%; min-height: 106px; resize: vertical; border: 1px solid var(--popup-border); border-radius: 18px; background: color-mix(in srgb, var(--popup-bg) 74%, var(--color-cream)); color: var(--color-ink); font-family: var(--font-body); font-size: 0.94rem; font-weight: 600; line-height: 1.42; padding: 32px 18px 16px; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-review-form__textarea::placeholder { color: color-mix(in srgb, var(--color-ink-soft) 64%, transparent); } .gift-room-review-form__textarea:focus, .gift-room-review-form__textarea:focus-visible { border-color: var(--color-forest); background: var(--popup-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-forest) 16%, transparent); outline: 0; } .gift-room-review-form__hint { margin: 0; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; line-height: 1.32; } .gift-room-review-form__submit, .gift-room-review-card__action { position: relative; isolation: isolate; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; font-family: var(--font-heading); font-weight: 900; letter-spacing: 0; transition: color 0.18s ease, transform 0.18s ease; } .gift-room-review-form__submit { min-height: 46px; min-width: 148px; padding: 0 22px; color: var(--color-cream); } .gift-room-review-form__submit::before, .gift-room-review-card__action::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-forest); transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .gift-room-review-form__submit:hover, .gift-room-review-form__submit:focus-visible, .gift-room-review-card__action:hover, .gift-room-review-card__action:focus-visible { transform: scale(1.035); outline: 0; } .gift-room-review-form__submit:hover::before, .gift-room-review-form__submit:focus-visible::before, .gift-room-review-card__action:hover::before, .gift-room-review-card__action:focus-visible::before { background: var(--color-ink); } .gift-room-review-list { display: grid; gap: 0; border-top: 1px solid var(--popup-border); } .gift-room-review-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px 8px; border-bottom: 1px solid var(--popup-border); color: var(--color-ink); transition: background-color 0.18s ease, transform 0.18s ease; } .gift-room-review-card:hover, .gift-room-review-card:focus-within { border-radius: 18px; background: color-mix(in srgb, var(--color-cream) 78%, var(--popup-bg)); transform: scale(1.01); } .gift-room-review-card__avatar { width: 48px; height: 48px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--popup-bg-soft); color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; font-weight: 900; overflow: hidden; } .gift-room-review-card__avatar.jp-profile-avatar-art { background: transparent; } .gift-room-review-card__body { min-width: 0; display: grid; gap: 8px; } .gift-room-review-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .gift-room-review-card__name { color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; font-weight: 900; line-height: 1.1; } .gift-room-review-card__date { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; white-space: nowrap; } .gift-room-review-card__stars { display: inline-flex; gap: 3px; align-items: center; } .gift-room-review-summary__review-star { width: 16px; height: 15px; } .gift-room-review-summary__review-star.is-empty { background: color-mix(in srgb, var(--color-ink-soft) 34%, transparent); } .gift-room-review-card__text { margin: 0; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 0.96rem; font-weight: 600; line-height: 1.38; } .gift-room-review-card__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gift-room-review-card__badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--popup-bg-soft); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 900; } .gift-room-review-card__action { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px; color: var(--color-ink); font-size: 0.76rem; } .gift-room-review-card__action-icon { width: 13px; height: 12px; flex: 0 0 13px; display: inline-block; background: currentColor; -webkit-mask: url("/assets/header-icons/card-reaction-heart.svg") center / contain no-repeat; mask: url("/assets/header-icons/card-reaction-heart.svg") center / contain no-repeat; } .gift-room-review-card__action::before { background: var(--popup-bg-soft); } .gift-room-review-card__action.is-liked { color: var(--color-cream); } .gift-room-review-card__action.is-liked::before { background: var(--color-ink); } .gift-room-review-empty { margin: 0; padding: 34px 18px; border-radius: 22px; background: color-mix(in srgb, var(--color-cream) 78%, var(--popup-bg)); color: var(--color-ink-soft); text-align: center; font-family: var(--font-body); font-size: 0.98rem; font-weight: 650; } .gift-room-story-prompt-modal { max-width: 440px; border-radius: 24px; overflow: hidden; } .gift-room-story-prompt-modal .gift-room-modal__head { align-items: flex-start; } .gift-room-story-prompt-modal__eyebrow { display: inline-flex; align-items: center; width: max-content; min-height: 24px; margin: 0 0 8px; padding: 0 10px; border: 1px solid var(--popup-border); border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 74%, var(--popup-bg)); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 800; line-height: 1; text-transform: uppercase; } .gift-room-story-prompt-modal__title-row { display: flex; align-items: center; gap: 10px; min-width: 0; } .gift-room-story-prompt-modal__title-row .gift-room-modal__title { margin: 0; } .gift-room-story-prompt-modal__title-icon { flex: 0 0 auto; width: 24px; height: 24px; background: var(--color-ink); -webkit-mask: url("/assets/event-type-icons/other.svg") center / contain no-repeat; mask: url("/assets/event-type-icons/other.svg") center / contain no-repeat; } #gift-room-story-prompt-overlay[data-gift-room-story-scenario="wedding"] .gift-room-story-prompt-modal__title-icon { -webkit-mask-image: url("/assets/event-type-icons/wedding.svg"); mask-image: url("/assets/event-type-icons/wedding.svg"); } #gift-room-story-prompt-overlay[data-gift-room-story-scenario="baby"] .gift-room-story-prompt-modal__title-icon { -webkit-mask-image: url("/assets/event-type-icons/baby.svg"); mask-image: url("/assets/event-type-icons/baby.svg"); } #gift-room-story-prompt-overlay[data-gift-room-story-scenario="birthday"] .gift-room-story-prompt-modal__title-icon { -webkit-mask-image: url("/assets/event-type-icons/birthday.svg"); mask-image: url("/assets/event-type-icons/birthday.svg"); } #gift-room-story-prompt-overlay[data-gift-room-story-scenario="anniversary"] .gift-room-story-prompt-modal__title-icon { -webkit-mask-image: url("/assets/event-type-icons/anniversary.svg"); mask-image: url("/assets/event-type-icons/anniversary.svg"); } #gift-room-story-prompt-overlay[data-gift-room-story-scenario="holiday"] .gift-room-story-prompt-modal__title-icon { -webkit-mask-image: url("/assets/event-type-icons/holiday.svg"); mask-image: url("/assets/event-type-icons/holiday.svg"); } .gift-room-story-prompt-modal__eyebrow::before { content: ""; display: none; } .gift-room-story-prompt-modal__copy { margin: 0; max-width: 36rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 0.94rem; font-weight: 500; line-height: 1.42; } .gift-room-story-prompt-modal__foot { border-radius: 0 0 24px 24px; } @media (max-width: 720px) { #gift-room-rating-overlay { --gift-room-rating-mobile-offset: calc(env(safe-area-inset-top, 0px) + clamp(92px, 14dvh, 136px)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-rating-mobile-offset) 0 0; overflow: hidden; } #gift-room-rating-overlay .gift-room-rating-modal { width: 100%; max-width: 100%; height: calc(100vh - var(--gift-room-rating-mobile-offset)); height: calc(100dvh - var(--gift-room-rating-mobile-offset)); max-height: calc(100vh - var(--gift-room-rating-mobile-offset)); max-height: calc(100dvh - var(--gift-room-rating-mobile-offset)); min-height: min(520px, calc(100dvh - var(--gift-room-rating-mobile-offset))); border-radius: 22px 22px 0 0; border-width: 1px 0 0; background: var(--popup-bg); overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } #gift-room-rating-overlay.is-open .gift-room-rating-modal { transform: translateY(var(--gift-room-rating-sheet-drag-y, 0px)); } #gift-room-rating-overlay.is-closing .gift-room-rating-modal { transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); } #gift-room-rating-overlay.is-sheet-dragging .gift-room-rating-modal { transform: translateY(var(--gift-room-rating-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-rating-overlay.is-sheet-settling .gift-room-rating-modal, #gift-room-rating-overlay.is-sheet-closing .gift-room-rating-modal { transform: translateY(var(--gift-room-rating-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-rating-overlay .gift-room-modal__sheet-grip { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--popup-sheet-grip-height, 44px); min-height: var(--popup-sheet-grip-height, 44px); background: var(--popup-bg); cursor: grab; touch-action: none; user-select: none; } #gift-room-rating-overlay.is-sheet-dragging .gift-room-modal__sheet-grip { cursor: grabbing; } #gift-room-rating-overlay .gift-room-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } #gift-room-rating-overlay .gift-room-modal__close { display: none !important; } #gift-room-rating-overlay .gift-room-modal__head { flex: 0 0 auto; padding: 0 18px 8px; } #gift-room-rating-overlay .gift-room-modal__title { font-size: 1.34rem; } #gift-room-rating-overlay .gift-room-modal__subtitle { max-width: 34ch; font-size: 0.82rem; line-height: 1.35; } #gift-room-rating-overlay .gift-room-rating-modal__body { flex: 1 1 auto; gap: 10px; padding: 6px 18px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; } #gift-room-rating-overlay .gift-room-review-summary { grid-template-columns: 1fr; gap: 8px; padding: 2px 0 4px; } #gift-room-rating-overlay .gift-room-review-summary__main, #gift-room-rating-overlay .gift-room-review-summary__metric { min-height: 0; border: 0; border-radius: 0; background: transparent; padding: 0; } #gift-room-rating-overlay .gift-room-review-summary__score { font-size: 2rem; } #gift-room-rating-overlay .gift-room-review-summary__star { width: 32px; height: 30px; flex: 0 0 32px; } #gift-room-rating-overlay .gift-room-review-summary__metric { gap: 10px; } #gift-room-rating-overlay .gift-room-review-summary__ring { width: auto; height: auto; min-width: 40px; border: 0; border-radius: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 650; } #gift-room-rating-overlay .gift-room-review-summary__copy, #gift-room-rating-overlay .gift-room-review-summary__metric-label { gap: 1px; font-size: 0.82rem; line-height: 1.16; } #gift-room-rating-overlay .gift-room-review-summary__copy strong, #gift-room-rating-overlay .gift-room-review-summary__metric-label span:first-child { font-size: 0.9rem; } #gift-room-rating-overlay .gift-room-rating-modal__options { display: flex; justify-content: space-between; gap: 4px; } #gift-room-rating-overlay .gift-room-rating-modal__option { width: 44px; min-height: 38px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; } #gift-room-rating-overlay .gift-room-rating-modal__option:hover, #gift-room-rating-overlay .gift-room-rating-modal__option:focus-visible { border-color: transparent; background: transparent; box-shadow: none; transform: scale(1.08); } #gift-room-rating-overlay .gift-room-rating-modal__option.is-selected { border-color: transparent; background: transparent; box-shadow: none; color: var(--color-jedi-picks-yellow); transform: scale(1.08); } #gift-room-rating-overlay .gift-room-rating-modal__star { width: 24px; height: 23px; } #gift-room-rating-overlay .gift-room-review-form__footer { align-items: stretch; flex-direction: column; } #gift-room-rating-overlay .gift-room-review-form__submit { width: 100%; } #gift-room-rating-overlay .gift-room-review-card { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 16px 0; } #gift-room-rating-overlay .gift-room-review-card__avatar { width: 40px; height: 40px; font-size: 0.86rem; } #gift-room-rating-overlay .gift-room-review-card__head { flex-direction: column; gap: 4px; } #gift-room-rating-overlay .gift-room-review-card__date { white-space: normal; } #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__copy { font-size: 0.87rem; line-height: 1.32; } } .gift-room-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 22px; border-top: 1px solid var(--color-line); background: var(--color-cream); } .gift-room-modal__divider { height: 1px; background: var(--color-line); margin: 6px 0; } .gift-room-modal__danger { display: flex; gap: 8px; flex-wrap: wrap; } .gift-room-settings-overlay { z-index: 12500; background: color-mix(in srgb, var(--color-ink) 70%, transparent); padding: 24px; } .gift-room-settings-overlay.is-child-overlay-active { background: transparent; pointer-events: none; } .gift-room-settings-shell { position: relative; width: 640px; max-width: calc(100vw - 40px); margin: auto 0; } .gift-room-settings-overlay.is-child-overlay-active .gift-room-settings-shell { display: none; opacity: 0; pointer-events: none; transform: scale(0.985); } .gift-room-settings-modal { width: 100%; max-width: none; background: var(--popup-bg); border: 0; outline: 0; border-radius: 30px; box-shadow: var(--popup-shadow); color: var(--color-ink); display: flex; flex-direction: column; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: hidden; padding: 22px 20px 0; font-family: var(--font-body, system-ui), system-ui, sans-serif; } .gift-room-settings-modal__sheet-grip.collection-modal__sheet-grip { appearance: none; -webkit-appearance: none; width: 100%; border: 0; background: transparent; padding: 0; margin: 0; color: inherit; } .gift-room-modal__sheet-grip.collection-modal__sheet-grip { appearance: none; -webkit-appearance: none; width: 100%; border: 0; background: transparent; padding: 0; margin: 0; color: inherit; } .gift-room-settings-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .gift-room-settings-modal__header { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; padding: 0 2px 14px; } .gift-room-settings-modal__header .collection-modal__title { padding: 0 56px 0 0; text-align: left; } .gift-room-settings-modal__header .collection-modal__subtitle { margin: 0; } .gift-room-settings-modal__body.collection-modal__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; margin: 0 -2px; padding: 0 2px 10px; scrollbar-gutter: auto; scrollbar-width: none; -ms-overflow-style: none; } .gift-room-settings-modal__body.collection-modal__body::-webkit-scrollbar { display: none; } .gift-room-cover-editor { position: relative; padding-top: 0; } .gift-room-cover-editor > .collection-modal__label { position: static; display: inline-flex; margin: 0 0 8px; padding: 0; background: transparent; border-radius: 0; pointer-events: auto; } .gift-room-settings-modal .collection-modal__field { position: relative; padding-top: 8px; } .gift-room-settings-modal .collection-modal__field-head { position: absolute; top: 2px; left: 22px; right: 22px; z-index: 3; margin: 0; pointer-events: none; } .gift-room-settings-modal .collection-modal__field > .collection-modal__label, .gift-room-settings-modal .collection-modal__field-head .collection-modal__label { border-radius: 999px; background: var(--collection-modal-label-bg, var(--collection-modal-field-bg, var(--popup-bg))); padding: 0 6px; pointer-events: none; } .gift-room-settings-modal .collection-modal__field > .collection-modal__label { position: absolute; top: 2px; left: 22px; z-index: 3; display: inline-flex; align-items: center; margin: 0; } .gift-room-settings-modal .collection-modal__field-head .collection-modal__label { position: static; margin: 0; } .gift-room-settings-modal .collection-modal__field--budget > .collection-modal__label { left: 78px; } .gift-room-settings-modal .gift-room-cover-editor { padding-top: 0; } .gift-room-settings-modal .gift-room-cover-editor > .collection-modal__label { position: static; display: inline-flex; margin: 0 0 8px; padding: 0; background: transparent; border-radius: 0; pointer-events: auto; } .gift-room-cover-editor__choices { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; } .gift-room-cover-editor__trigger, .gift-room-cover-editor__auto { position: relative; width: 112px; max-width: 100%; aspect-ratio: 1; border: 2px solid var(--color-ink); border-radius: 18px; background: var(--popup-bg); padding: 0; overflow: hidden; cursor: pointer; display: block; box-shadow: none; isolation: isolate; } .gift-room-cover-editor__trigger:not(.is-selected) { border: 0; } .gift-room-cover-editor__trigger:focus-visible, .gift-room-cover-editor__auto:focus-visible { outline: 0; box-shadow: none; } .gift-room-cover-editor__trigger:not(.is-selected)::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: linear-gradient(90deg, var(--color-ink) 50%, transparent 0) left top / 13px 2px repeat-x, linear-gradient(90deg, var(--color-ink) 50%, transparent 0) left bottom / 13px 2px repeat-x, linear-gradient(0deg, var(--color-ink) 50%, transparent 0) left top / 2px 13px repeat-y, linear-gradient(0deg, var(--color-ink) 50%, transparent 0) right top / 2px 13px repeat-y; pointer-events: none; } .gift-room-cover-editor__trigger:not(.is-selected):hover::after, .gift-room-cover-editor__trigger:not(.is-selected):focus-visible::after { animation: gift-room-cover-dashes 0.58s linear infinite; } .gift-room-cover-editor__preview { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--popup-bg); } .gift-room-cover-editor__preview.has-media-cover { background: var(--popup-bg); } .gift-room-cover-editor__preview .gift-room-card__media-grid { z-index: 1; grid-template-columns: minmax(0, 2fr) minmax(42px, 1fr); gap: 1px; } .gift-room-cover-editor__preview .gift-room-card__media-grid[data-media-count="1"] { grid-template-columns: minmax(0, 1fr); } .gift-room-cover-editor__preview .gift-room-card__media-grid[data-media-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gift-room-cover-editor__preview .gift-room-card__media-mark { width: 34px; } .gift-room-cover-editor__add { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); box-shadow: none; transition: transform .2s ease, opacity .2s ease; } .gift-room-cover-editor__add img { width: 31px; height: 31px; display: block; } .gift-room-cover-editor__trigger:hover .gift-room-cover-editor__add, .gift-room-cover-editor__trigger:focus-visible .gift-room-cover-editor__add { transform: translate(-50%, -50%) scale(1.08); } .gift-room-cover-editor__preview.has-media-cover + .gift-room-cover-editor__add { display: none; } .gift-room-cover-editor__state { position: absolute; right: 8px; bottom: 8px; z-index: 4; width: 24px; height: 24px; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); display: none; align-items: center; justify-content: center; } .gift-room-cover-editor__state::after { content: ""; width: 15px; height: 13px; background: currentColor; -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; } .gift-room-cover-editor__trigger.is-selected .gift-room-cover-editor__state, .gift-room-cover-editor__auto.is-selected .gift-room-cover-editor__state { display: inline-flex; } .gift-room-settings-modal__textarea-shell.collection-modal__input-shell { min-height: 90px; height: auto; align-items: stretch; border-radius: 28px; } .gift-room-settings-modal__textarea.collection-modal__input { min-height: 88px; padding-top: 22px; padding-bottom: 14px; resize: none; line-height: 1.35; } .gift-room-settings-modal__row.collection-modal__row { grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.25fr); gap: 14px; align-items: end; } .gift-room-settings-date-shell.collection-modal__date-shell { height: 52px; } .gift-room-settings-date-shell.collection-modal__date-shell:not(.has-date) .jp-date-field__button { right: -13px; } .gift-room-settings-date-shell.collection-modal__date-shell:focus-within { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); outline: 0; } .gift-room-settings-date-shell .collection-modal__date-input, .gift-room-settings-date-shell .collection-modal__date-input:focus, .gift-room-settings-date-shell .collection-modal__date-input:focus-visible { min-height: 44px; outline: 0 !important; box-shadow: none !important; } .gift-room-settings-budget.collection-modal__budget { gap: 8px; min-width: 0; } .gift-room-settings-budget .collection-modal__budget-step { width: 48px; height: 48px; flex: 0 0 48px; border: 2px solid var(--control-border-resting, var(--popup-control-border)); border-radius: 999px; background: var(--popup-bg); padding: 0; } .gift-room-settings-budget .collection-modal__budget-step:hover, .gift-room-settings-budget .collection-modal__budget-step:focus-visible { border-color: var(--popup-focus); background: var(--popup-bg-soft); outline: 0; box-shadow: none; } .gift-room-settings-budget .collection-modal__budget-shell { height: 48px; min-width: 144px; border-radius: 999px; } .gift-room-settings-budget .collection-modal__budget-shell:focus-within { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); outline: 0; } .gift-room-settings-budget .collection-modal__budget-input, .gift-room-settings-budget .collection-modal__budget-input:focus, .gift-room-settings-budget .collection-modal__budget-input:focus-visible { min-width: 0; outline: 0 !important; box-shadow: none !important; } .gift-room-settings-coauthors { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0 8px; } .gift-room-settings-coauthors__meta { display: flex; flex-direction: column; gap: 11px; min-width: 0; flex: 1 1 auto; } .gift-room-settings-coauthors__label { color: var(--color-ink); font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.2; } .gift-room-settings-coauthors__label a { color: inherit; font-weight: 800; text-decoration: none; } .gift-room-settings-coauthors__label a:hover, .gift-room-settings-coauthors__label a:focus-visible { text-decoration: underline; outline: 0; } .gift-room-settings-coauthors__avatars { display: flex; align-items: center; min-height: 44px; } .gift-room-settings-coauthors__access { width: fit-content; max-width: 100%; min-height: 48px; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); padding: 0; cursor: pointer; } .gift-room-settings-coauthors__access:hover, .gift-room-settings-coauthors__access:focus-visible { outline: 0; } .gift-room-settings-coauthors__arrow { width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: 0; background: transparent; color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; transform: translateZ(0); } .gift-room-settings-coauthors__arrow::before { content: ""; width: 15px; height: 12px; background: currentColor; -webkit-mask: url("/assets/header-icons/pager-arrow-next-active.svg") center / contain no-repeat; mask: url("/assets/header-icons/pager-arrow-next-active.svg") center / contain no-repeat; transition: transform .18s ease; } .gift-room-settings-coauthors__access:hover .gift-room-settings-coauthors__arrow, .gift-room-settings-coauthors__access:focus-visible .gift-room-settings-coauthors__arrow { background: transparent; transform: translateZ(0); } .gift-room-settings-coauthors__access:hover .gift-room-settings-coauthors__arrow::before, .gift-room-settings-coauthors__access:focus-visible .gift-room-settings-coauthors__arrow::before { transform: translateX(2px); } .gift-room-settings-coauthors__avatars .gift-room-avatar { width: 44px; height: 44px; margin: 0; border: 2px solid var(--popup-bg); font-size: 13px; } .gift-room-settings-coauthors__avatars .gift-room-avatar + .gift-room-avatar { margin-left: -9px; } .gift-room-settings-coauthors__add { position: relative; width: 83px; min-width: 83px; height: 54px; flex: 0 0 83px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; outline: 0; isolation: isolate; overflow: visible; } .gift-room-settings-coauthors__add::before { content: ""; position: relative; z-index: 1; width: 31px; height: 31px; display: block; background: center / contain no-repeat url("/assets/header-icons/collection-collaborator-add.svg"); } .gift-room-settings-coauthors__add::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #EEE5DA; transform: scale(1); transition: transform .22s ease-out; } .gift-room-settings-coauthors__add:hover, .gift-room-settings-coauthors__add:focus-visible { transform: none; outline: 0; } .gift-room-settings-coauthors__add:hover::after, .gift-room-settings-coauthors__add:focus-visible::after { transform: scale(1.04); } .gift-room-settings-complete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding-top: 2px; } .gift-room-settings-complete__copy { min-width: 0; } .gift-room-settings-complete__button { position: relative; width: 54px; height: 54px; flex: 0 0 54px; border: 0; border-radius: 18px; background: transparent; color: var(--popup-bg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; outline: 0; isolation: isolate; overflow: visible; } .gift-room-settings-complete__button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-forest); transform: scale(1); transition: transform .22s ease-out; } .gift-room-settings-complete__button .gift-room-icon { position: relative; z-index: 1; width: 27px; height: 27px; } .gift-room-settings-complete__button:hover, .gift-room-settings-complete__button:focus-visible { outline: 0; } .gift-room-settings-complete__button:hover::before, .gift-room-settings-complete__button:focus-visible::before { transform: scale(1.04); } .gift-room-settings-danger { display: flex; flex-direction: column; gap: 8px; padding: 12px 15px; border: 1px solid var(--popup-border); border-radius: 18px; background: var(--popup-control-bg); } .gift-room-settings-danger > .collection-modal__label { position: static; display: inline-flex; width: max-content; margin: 0; padding: 0; border-radius: 0; background: transparent; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 12px; font-weight: 800; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: auto; } .gift-room-settings-delete { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; color: var(--color-ink); } .gift-room-settings-delete__copy strong, .gift-room-settings-delete__copy span { display: block; } .gift-room-settings-delete__copy strong { font-family: var(--font-body); font-size: 15px; font-weight: 800; line-height: 1.18; } .gift-room-settings-delete__copy span { max-width: 360px; margin-top: 4px; color: #68625c; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; line-height: 1.26; } .gift-room-settings-delete__button { min-height: 42px; border: 0; border-radius: 999px; background: var(--popup-bg); color: #B91515; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; font-family: var(--font-body); font-size: 13px; font-weight: 800; cursor: pointer; transition: background-color .18s ease, color .18s ease, transform .18s ease; } .gift-room-settings-delete__button .gift-room-icon { width: 16px; height: 16px; } .gift-room-settings-delete__button:hover, .gift-room-settings-delete__button:focus-visible { background: #F7E1E4; outline: 0; transform: none; } .gift-room-settings-modal__footer.collection-modal__footer { flex: 0 0 auto; position: relative; bottom: auto; z-index: 1; margin: 0 -20px; padding: 12px 20px 16px; border-top: 1px solid var(--popup-border); background: var(--popup-bg); box-shadow: none; } .gift-room-settings-modal__footer .collection-modal__cancel, .gift-room-settings-modal__footer .collection-modal__create { margin-top: 0; min-height: 50px; box-shadow: none; transform: none; } .gift-room-settings-modal__footer .collection-modal__cancel { background: transparent; } .gift-room-settings-modal__footer .collection-modal__cancel:hover, .gift-room-settings-modal__footer .collection-modal__cancel:focus-visible { background: transparent; box-shadow: 0 0 4px color-mix(in srgb, var(--color-ink) 42%, transparent); outline: 0; } .gift-room-settings-modal__footer .collection-modal__create:hover, .gift-room-settings-modal__footer .collection-modal__create:focus-visible { box-shadow: none; outline: 0; } .gift-room-settings-suboverlay { z-index: 12540; background: color-mix(in srgb, var(--color-ink) 70%, transparent); padding: 24px; } .gift-room-cover-modal-overlay { z-index: 12560; } .gift-room-coauthors-overlay { z-index: 12580; } .gift-room-access-overlay { z-index: 12590; } .gift-room-permissions-overlay { z-index: 12600; } .gift-room-coauthors-shell > .gift-room-settings-modal__close, .gift-room-permissions-shell > .gift-room-settings-modal__close { display: none; } .gift-room-access-shell > .gift-room-settings-modal__close { display: inline-flex; } .gift-room-cover-modal-shell, .gift-room-coauthors-shell, .gift-room-access-shell, .gift-room-permissions-shell { width: 578px; max-width: calc(100vw - 40px); } .gift-room-coauthors-modal, .gift-room-access-modal, .gift-room-permissions-modal { gap: 0; min-height: 0; max-height: calc(100vh - 48px); box-shadow: var(--popup-shadow); } .gift-room-coauthors-modal, .gift-room-access-modal { height: auto; border: 0; } .gift-room-permissions-modal { height: min(710px, calc(100vh - 48px)); } .gift-room-cover-modal { gap: 0; height: auto; min-height: 0; max-height: calc(100vh - 48px); padding: 20px; box-shadow: var(--popup-shadow); } .gift-room-coauthors-modal, .gift-room-access-modal, .gift-room-permissions-modal { padding: 20px 20px 24px; } .gift-room-permissions-modal { padding-bottom: 20px; } .gift-room-submodal__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .gift-room-submodal__body::-webkit-scrollbar { display: none; } .gift-room-cover-modal__body { gap: 12px; overflow: visible; } .gift-room-submodal__header { position: relative; flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 2px 54px 0; text-align: center; } .gift-room-submodal__header--with-back { padding-left: 54px; } .gift-room-submodal__title.collection-modal__title { text-align: center; font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .gift-room-submodal__back { position: absolute; left: 0; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); border: 0; border-radius: 14px; background: transparent; color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .18s ease; } .gift-room-submodal__back:hover { background: transparent; } .gift-room-submodal__back:focus-visible { background: transparent; outline: 0; } .gift-room-submodal__back img { width: 22px; height: 14px; display: block; transition: transform .18s ease; } .gift-room-submodal__back:hover img, .gift-room-submodal__back:focus-visible img { transform: translateX(-4px); } .gift-room-submodal__eyebrow { display: block; color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.2; } .gift-room-cover-modal__empty { margin: 0 auto; max-width: 340px; color: #68625c; font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.35; text-align: center; } .gift-room-cover-modal__upload-slot { flex: 0 0 auto; } .gift-room-cover-modal__grid { flex: 0 1 auto; min-height: 0; max-height: min(440px, calc(100vh - 230px)); display: flex; flex-direction: column; gap: 14px; overflow-x: hidden; overflow-y: auto; padding: 2px 4px 6px; scrollbar-gutter: stable; } .gift-room-cover-modal__section { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .gift-room-cover-modal__section-title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 15px; font-weight: 800; line-height: 1.2; } .gift-room-cover-modal__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-width: 0; } .gift-room-cover-tile { position: relative; width: 100%; margin: 0; padding: 0; border: 2px solid transparent; border-radius: 14px; background: transparent; cursor: pointer; display: block; overflow: hidden; } .gift-room-cover-tile:focus-visible { outline: 0; border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } .gift-room-cover-tile.is-selected { border-color: var(--color-ink); } .gift-room-cover-tile__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: var(--cover-tile-ratio, 1 / 1); min-height: 0; border-radius: 12px; overflow: hidden; background: var(--cover-tile-bg, #E2E2DC); color: var(--color-ink); } .gift-room-cover-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .gift-room-cover-upload { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 86px; padding: 8px 10px; border: 0; border-radius: 16px; background: var(--popup-bg); transition: border-color 0.18s ease, background-color 0.18s ease; } .gift-room-cover-upload::after, .gift-room-cover-upload__media::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(90deg, var(--color-ink) 50%, transparent 0) left top / 13px 1.5px repeat-x, linear-gradient(90deg, var(--color-ink) 50%, transparent 0) left bottom / 13px 1.5px repeat-x, linear-gradient(0deg, var(--color-ink) 50%, transparent 0) left top / 1.5px 13px repeat-y, linear-gradient(0deg, var(--color-ink) 50%, transparent 0) right top / 1.5px 13px repeat-y; pointer-events: none; } .gift-room-cover-upload:hover, .gift-room-cover-upload:focus-within, .gift-room-cover-upload.is-drag-over { background: var(--popup-bg); } .gift-room-cover-upload.is-selected { border: 0; } .gift-room-cover-upload:hover::after, .gift-room-cover-upload:focus-within::after, .gift-room-cover-upload.is-drag-over::after, .gift-room-cover-upload__media:hover::after, .gift-room-cover-upload__media:focus-visible::after { animation: gift-room-cover-dashes 0.58s linear infinite; } .gift-room-cover-upload__media { position: relative; width: 72px; height: 72px; min-width: 0; padding: 0; border: 0; border-radius: 12px; background: var(--popup-bg); color: var(--color-ink); overflow: hidden; cursor: pointer; box-shadow: none; transition: border-color 0.18s ease, background-color 0.18s ease; } .gift-room-cover-upload__media:hover, .gift-room-cover-upload__media:focus-visible { outline: 0; background: var(--popup-bg); } .gift-room-cover-upload__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .gift-room-cover-upload__placeholder { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--color-ink); text-align: center; } .gift-room-cover-upload__plus { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--color-ink); font-family: var(--font-body); font-size: 42px; font-weight: 400; line-height: 0.86; transform: translateY(-1px); } @keyframes gift-room-cover-dashes { to { background-position: 13px 0, -13px 100%, 0 -13px, 100% 13px; } } .gift-room-cover-upload__copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .gift-room-cover-upload__copy strong { font-family: var(--font-heading); font-size: 15px; font-weight: 800; line-height: 1.1; } .gift-room-cover-upload__copy small { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1.35; } .gift-room-cover-upload__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; } .gift-room-cover-upload__button, .gift-room-cover-upload__remove { position: relative; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; overflow: visible; box-shadow: none; transition: color 0.18s ease; } .gift-room-cover-upload__button::before, .gift-room-cover-upload__remove::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--popup-bg); transform: scale(1); transform-origin: center; transition: background-color 0.18s ease, transform 0.18s ease; pointer-events: none; } .gift-room-cover-upload__button { gap: 7px; min-height: 38px; padding: 0 14px; color: var(--color-cream); font-family: var(--font-heading); font-size: 12px; font-weight: 850; } .gift-room-cover-upload__button::before { background: var(--color-ink); } .gift-room-cover-upload__remove { gap: 7px; min-width: 0; height: 38px; padding: 0 12px; font-family: var(--font-heading); font-size: 12px; font-weight: 850; } .gift-room-cover-upload__button img, .gift-room-cover-upload__remove img { position: relative; z-index: 1; width: 16px; height: 16px; display: block; filter: brightness(0); transition: filter 0.18s ease; } .gift-room-cover-upload__button span, .gift-room-cover-upload__remove span { position: relative; z-index: 1; line-height: 1; } .gift-room-cover-upload__button:hover, .gift-room-cover-upload__button:focus-visible { outline: 0; color: var(--color-cream); } .gift-room-cover-upload__remove:hover, .gift-room-cover-upload__remove:focus-visible { outline: 0; color: var(--color-cream); } .gift-room-cover-upload__button:hover::before, .gift-room-cover-upload__button:focus-visible::before, .gift-room-cover-upload__remove:hover::before, .gift-room-cover-upload__remove:focus-visible::before { background: var(--color-ink); transform: scale(1.04); } .gift-room-cover-upload__button img { filter: brightness(0) invert(1); } .gift-room-cover-upload__button:hover img, .gift-room-cover-upload__button:focus-visible img, .gift-room-cover-upload__remove:hover img, .gift-room-cover-upload__remove:focus-visible img { filter: brightness(0) invert(1); } .gift-room-cover-tile__icon { width: clamp(34px, 28%, 62px); aspect-ratio: 1; opacity: 0.72; } .gift-room-cover-tile__icon svg { width: 100%; height: 100%; display: block; } .gift-room-cover-tile__check { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 84%, transparent); color: var(--color-cream); display: none; align-items: center; justify-content: center; } .gift-room-cover-tile__check::after { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; } .gift-room-cover-tile.is-selected .gift-room-cover-tile__check { display: inline-flex; } .gift-room-cover-upload.is-selected .gift-room-cover-tile__check { display: inline-flex; } .gift-room-coauthors-modal__body, .gift-room-access-modal__body, .gift-room-permissions-modal__body { padding: 0 2px; } .gift-room-coauthors-modal__body, .gift-room-access-modal__body { gap: 14px; overflow-x: hidden; } .gift-room-coauthors-permission, .gift-room-coauthors-access, .gift-room-coauthors-share, .gift-room-coauthors-search-block, .gift-room-permissions-group { display: flex; flex-direction: column; gap: 10px; max-width: 100%; min-width: 0; box-sizing: border-box; } .gift-room-coauthors-share { position: relative; padding-top: 8px; } .gift-room-coauthors-share > .gift-room-submodal__eyebrow { position: absolute; top: 0; left: 22px; z-index: 2; display: inline-flex; align-items: center; width: auto; max-width: calc(100% - 44px); border-radius: 999px; background: var(--popup-bg); padding: 0 8px; line-height: 1.2; pointer-events: none; } .gift-room-coauthors-permission { gap: 7px; padding: 0; border: 0; border-radius: 0; background: transparent; } .gift-room-coauthors-access__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gift-room-coauthors-access__head .gift-room-submodal__eyebrow { margin: 0; } .gift-room-coauthors-permission__button { width: 100%; min-width: 0; min-height: 70px; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 12px; border: 0; border-radius: 10px; background: transparent; color: var(--color-ink); padding: 7px 10px 9px 0; text-align: left; cursor: pointer; } .gift-room-coauthors-permission__button:hover, .gift-room-coauthors-permission__button:focus-visible { background: color-mix(in srgb, var(--color-sand) 36%, transparent); outline: 0; } .gift-room-coauthors-permission__button > span { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .gift-room-coauthors-permission__button strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 1.12rem; font-weight: 820; line-height: 1.12; } .gift-room-coauthors-permission__button span span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.98rem; font-weight: 620; line-height: 1.28; } .gift-room-coauthors-permission__arrow { width: 24px; height: 18px; display: block; justify-self: end; transition: transform .18s ease; } .gift-room-coauthors-permission__button:hover .gift-room-coauthors-permission__arrow, .gift-room-coauthors-permission__button:focus-visible .gift-room-coauthors-permission__arrow { transform: translateX(2px); } .gift-room-coauthors-access__list { display: grid; gap: 8px; } .gift-room-access-person.gr-share-person { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 66px; padding: 8px 12px; border: 1px solid transparent; } .gift-room-access-person .gr-share-person__avatar { width: 54px; height: 54px; margin: 0; border: 2px solid var(--popup-bg); background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-grid; place-items: center; overflow: hidden; } .gift-room-access-person .gr-share-person__avatar.has-image { background-position: center; background-repeat: no-repeat; background-size: cover; color: transparent; text-indent: -9999px; } .gift-room-access-person .gr-share-person__avatar.jp-profile-avatar-art { display: inline-grid; place-items: center; overflow: visible; } .gift-room-access-person .gr-share-person__avatar.jp-profile-avatar-art > img[data-jp-profile-avatar-img] { width: 100%; height: 100%; object-fit: contain; } .gift-room-access-person:hover, .gift-room-access-person:focus-within { border-color: var(--popup-border); background: color-mix(in srgb, var(--color-sand) 58%, var(--popup-bg)); } .gift-room-access-role { display: inline-flex; align-items: center; gap: 4px; min-height: 42px; padding: 4px; border: 1px solid color-mix(in srgb, var(--color-ink-soft) 18%, var(--popup-border)); border-radius: 999px; background: var(--popup-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--popup-border) 72%, transparent); } .gift-room-access-role button { min-width: 64px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 820; padding: 0 15px; cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease, color .18s ease; } .gift-room-access-role button[aria-pressed="true"] { background: var(--color-forest); color: var(--popup-bg); box-shadow: 0 5px 14px color-mix(in srgb, var(--color-forest) 20%, transparent); } .gift-room-access-role button:hover, .gift-room-access-role button:focus-visible { color: var(--color-ink); background: color-mix(in srgb, var(--color-sand) 72%, var(--popup-bg)); } .gift-room-access-role button[aria-pressed="true"]:hover, .gift-room-access-role button[aria-pressed="true"]:focus-visible { background: var(--color-forest); color: var(--popup-bg); } .gift-room-access-role button:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 18%, transparent); } .gift-room-access-person__locked { min-width: 76px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-forest) 18%, var(--popup-border)); background: color-mix(in srgb, var(--color-forest) 8%, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 820; } .gift-room-access-requests { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--popup-border); } .gift-room-access-requests[hidden] { display: none; } .gift-room-access-request { border-color: color-mix(in srgb, var(--color-forest) 18%, var(--popup-border)) !important; background: color-mix(in srgb, var(--color-forest) 6%, var(--popup-bg)); } .gift-room-access-request__actions { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .gift-room-access-request__actions button { min-height: 34px; border: 1px solid color-mix(in srgb, var(--color-ink-soft) 16%, var(--popup-border)); border-radius: 999px; background: var(--popup-bg); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 820; padding: 0 12px; cursor: pointer; } .gift-room-access-request__actions button:hover, .gift-room-access-request__actions button:focus-visible { outline: 0; background: var(--color-ink); color: var(--popup-bg); border-color: var(--color-ink); } .gift-room-coauthors-share__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; margin: -4px; padding: 4px; overflow: visible; } .gift-room-coauthors-share__row input { min-width: 0; width: 100%; box-sizing: border-box; height: 50px; border: 1.5px solid var(--control-border-resting, var(--popup-control-border)); border-radius: 999px; background: var(--popup-control-bg); color: var(--color-ink); font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 0 16px; outline: 0; box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color .18s ease, box-shadow .18s ease; } .gift-room-coauthors-share__row input:focus, .gift-room-coauthors-share__row input:focus-visible { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); outline: 0; } .gift-room-coauthors-share__row button { min-height: 50px; border: 0; border-radius: 999px; background: var(--color-forest); color: var(--color-cream); font-family: var(--font-heading); font-size: 15px; font-weight: 800; padding: 0 18px; cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease; } .gift-room-coauthors-share__row button:hover, .gift-room-coauthors-share__row button:focus-visible { background: var(--color-forest-dark, var(--color-forest)); color: var(--popup-bg); box-shadow: none; outline: 0; } #gift-room-coauthors-overlay [data-action="settings-copy-invite"]:hover, #gift-room-coauthors-overlay [data-action="settings-copy-invite"]:focus-visible { background: var(--color-forest-dark, var(--color-forest)) !important; color: var(--popup-bg) !important; box-shadow: none; outline: 0; } .gift-room-coauthors-actions.gr-share-actions { flex: 0 0 auto; gap: 14px; border-bottom: 0; width: 100%; max-width: 100%; box-sizing: border-box; margin: -8px 0 0; min-height: 116px; padding: 11px 0 10px; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 0; } .gift-room-coauthors-actions .gr-share-action { flex-basis: 78px; width: 78px; min-height: 102px; gap: 8px; font-size: 0.92rem; } .gift-room-coauthors-actions .gr-share-action__icon { width: 68px; height: 68px; border-radius: 50%; } .gift-room-coauthors-actions .gr-share-action__icon img { width: 58px; height: 58px; } .gift-room-coauthors-people.gr-share-people { gap: 0; } .gift-room-coauthors-people .gr-share-person { grid-template-columns: 50px minmax(0, 1fr) auto; min-height: 60px; gap: 10px; padding: 5px; } .gift-room-coauthors-people .gr-share-person__avatar { width: 50px; height: 50px; } .gift-room-coauthors-people .gr-share-person__body strong { font-size: 0.86rem; } .gift-room-coauthors-people .gr-share-person__body span { font-size: 0.78rem; } .gift-room-coauthors-people .gr-share-person__send { min-width: 120px; height: 38px; font-size: 0.82rem; font-weight: 800; } .gift-room-permission-option, .gift-room-permission-check { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; cursor: pointer; color: var(--color-ink); } .gift-room-permission-option input, .gift-room-permission-check input { position: absolute; opacity: 0; pointer-events: none; } .gift-room-permission-option__mark, .gift-room-permission-check__box { position: relative; width: 28px; height: 28px; margin-top: 2px; border: 2px solid var(--popup-control-border); background: var(--popup-bg); } .gift-room-permission-option__mark { border-radius: 999px; } .gift-room-permission-check__box { border-radius: 9px; } .gift-room-permission-option input:checked + .gift-room-permission-option__mark { border: 9px solid var(--color-forest); } .gift-room-permission-check input:checked + .gift-room-permission-check__box { border-color: var(--color-forest); background: var(--color-forest); box-shadow: inset 0 0 0 2px var(--color-forest); } .gift-room-permission-check__box::after { content: ""; position: absolute; inset: 6px 5px; background: var(--popup-bg); -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; opacity: 0; transform: scale(0.82); transform-origin: center; transition: opacity .16s ease, transform .16s ease; } .gift-room-permission-check input:checked + .gift-room-permission-check__box::after { opacity: 1; transform: scale(1); } .gift-room-permission-option strong, .gift-room-permission-check strong { display: block; color: var(--color-ink); font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.25; } .gift-room-permission-option__copy span, .gift-room-permission-check span span { display: block; margin-top: 7px; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.35; } .gift-room-permissions-modal__footer { display: flex; justify-content: flex-end; margin-top: auto; margin-right: 0; padding: 14px 4px 3px 18px; overflow: visible; } .gift-room-permissions-modal__footer .collection-modal__create { min-width: 132px; transform: none; color: var(--popup-bg); overflow: visible; } .gift-room-permissions-modal__footer .collection-modal__create-label { position: relative; z-index: 1; display: inline-block; transform: none; transition: color .18s ease; } .gift-room-permissions-modal__footer .collection-modal__create::before { inset: 0; background: var(--color-forest); transform: scale(1); transform-origin: center; will-change: transform; } .gift-room-permissions-modal__footer .collection-modal__create:hover:not(:disabled):not([aria-disabled="true"])::before, .gift-room-permissions-modal__footer .collection-modal__create:focus-visible::before { background: var(--color-forest); transform: scale(1.04); } .gift-room-permissions-modal__footer .collection-modal__create:hover:not(:disabled):not([aria-disabled="true"]), .gift-room-permissions-modal__footer .collection-modal__create:focus-visible { transform: none; } .gift-room-permissions-modal__footer .collection-modal__create:hover:not(:disabled):not([aria-disabled="true"]) .collection-modal__create-label, .gift-room-permissions-modal__footer .collection-modal__create:focus-visible .collection-modal__create-label { transform: none; } .gift-room-field { display: flex; flex-direction: column; gap: 7px; } .gift-room-field:has(.gift-room-field__input), .gift-room-field:has(.gift-room-field__textarea) { position: relative; gap: 0; padding-top: 9px; } .gift-room-field__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft); } .gift-room-field:has(.gift-room-field__input) .gift-room-field__label, .gift-room-field:has(.gift-room-field__textarea) .gift-room-field__label { position: absolute; top: 2px; left: 22px; z-index: 3; border-radius: 999px; background: var(--popup-bg, var(--color-cream)); padding: 0 6px; pointer-events: none; } .gift-room-field__input { min-height: 52px; padding: 0 16px; background: var(--popup-bg, var(--color-cream)); border: 1.5px solid var(--control-border-resting, var(--popup-control-border, var(--color-line))); border-radius: 999px; font-family: inherit; font-size: 0.94rem; color: var(--color-ink); transition: background .2s, border-color .2s; width: 100%; appearance: none; -webkit-appearance: none; } .gift-room-field__input:focus { outline: none; background: var(--popup-bg, var(--color-cream)); border-color: var(--popup-focus, var(--color-forest)); } .gift-room-field__textarea { padding: 22px 16px 16px; background: var(--popup-bg, var(--color-cream)); border: 1.5px solid var(--control-border-resting, var(--popup-control-border, var(--color-line))); border-radius: 28px; font-family: inherit; font-size: 0.94rem; color: var(--color-ink); resize: vertical; min-height: 70px; transition: background .2s, border-color .2s; } .gift-room-field__textarea:focus { outline: none; background: var(--popup-bg, var(--color-cream)); border-color: var(--popup-focus, var(--color-forest)); } .gift-room-field__hint { font-size: 0.78rem; color: var(--color-ink-soft); margin: 7px 0 0; } .gift-room-field__row { display: grid; grid-template-columns: 1fr; gap: 14px; } .gift-room-typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gift-room-typegrid__chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 14px; cursor: pointer; color: var(--color-ink-soft); font-family: inherit; font-size: 0.78rem; transition: background .2s, border-color .2s, color .2s, transform .2s; } .gift-room-typegrid__chip:hover { border-color: var(--color-ink); color: var(--color-ink); } .gift-room-typegrid__chip.is-selected { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-cream); } .gift-room-typegrid__chip-icon { width: 22px; height: 22px; } .gift-room-typegrid__chip-label { font-weight: 500; } .gift-room-typegrid__chip-emoji { font-size: 1.2rem; line-height: 1; } #gift-room-additem-overlay .gift-room-modal__body { gap: 14px; } #gift-room-additem-overlay .collection-modal__field--type { padding-top: 0; } #gift-room-additem-overlay .collection-modal__typegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; gap: 8px; margin-top: 0; overflow: visible; scroll-snap-type: none; } #gift-room-additem-overlay .collection-modal__type-chip { flex: 1 1 auto; height: 82px; min-height: 82px; padding: 10px 8px; background: transparent; border: 0; border-radius: 14px; color: var(--color-ink-soft); scroll-snap-align: none; box-shadow: none; } #gift-room-additem-overlay .collection-modal__type-chip:hover, #gift-room-additem-overlay .collection-modal__type-chip:focus-visible { background: var(--sort-option-hover-bg, var(--color-line)); color: var(--color-forest); box-shadow: none; } #gift-room-additem-overlay .collection-modal__type-chip.is-selected { background: transparent; color: var(--color-forest); } #gift-room-additem-overlay .collection-modal__type-chip.is-selected:hover, #gift-room-additem-overlay .collection-modal__type-chip.is-selected:focus-visible { background: var(--sort-option-hover-bg, var(--color-line)); color: var(--color-forest); } #gift-room-additem-overlay .collection-modal__type-chip-icon { width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--gift-room-additem-icon) center / contain no-repeat; mask: var(--gift-room-additem-icon) center / contain no-repeat; } #gift-room-additem-overlay .collection-modal__type-chip-label { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; line-height: 1.1; color: currentColor; } .gift-room-additem__icon--gift { --gift-room-additem-icon: url("/assets/gift-room-icons/add-item-gift.svg"); } .gift-room-additem__icon--book { --gift-room-additem-icon: url("/assets/gift-room-icons/add-item-book.svg"); } .gift-room-additem__icon--art { --gift-room-additem-icon: url("/assets/gift-room-icons/add-item-art.svg"); } .gift-room-additem__icon--plant { --gift-room-additem-icon: url("/assets/gift-room-icons/add-item-plant.svg"); } .gift-room-additem__icon--coffee { --gift-room-additem-icon: url("/assets/gift-room-icons/add-item-coffee.svg"); } .gift-room-additem__icon--candle { --gift-room-additem-icon: url("/assets/gift-room-icons/add-item-candle.svg"); } #gift-room-additem-overlay .collection-modal__input-shell, #gift-room-additem-overlay .collection-modal__budget-shell { background: var(--popup-bg); } #gift-room-additem-overlay .gift-room-modal { overflow: visible; } #gift-room-additem-overlay .collection-modal__footer { flex: 0 0 auto; justify-content: space-between; gap: 12px; width: auto; margin: 10px 0 0; padding: 16px 22px 22px; border-top: 1px solid var(--popup-border); border-radius: 0 0 24px 24px; background: var(--popup-bg); box-shadow: none; } #gift-room-additem-overlay .collection-modal__cancel, #gift-room-additem-overlay .collection-modal__create { min-height: 54px; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transform: none; } #gift-room-additem-overlay .collection-modal__cancel { border: 0; background: var(--popup-bg); color: var(--color-ink); box-shadow: none; } #gift-room-additem-overlay .collection-modal__cancel:hover, #gift-room-additem-overlay .collection-modal__cancel:focus-visible { background: var(--popup-bg); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } #gift-room-additem-overlay .gift-room-additem__submit .gift-room-icon { width: 16px; height: 16px; } .gift-room-stepper { display: flex; align-items: center; gap: 10px; } .gift-room-stepper__btn { flex: 0 0 54px; width: 54px; min-width: 54px; max-width: 54px; height: 54px; min-height: 54px; max-height: 54px; aspect-ratio: 1 / 1; display: inline-grid; place-items: center; padding: 0; background: var(--popup-bg, var(--color-cream)); border: 1.5px solid var(--control-border-resting, var(--popup-control-border, var(--color-line))); border-radius: 50%; font-family: inherit; font-size: 1.1rem; color: var(--color-ink); cursor: pointer; line-height: 1; transition: background .2s, border-color .2s; } .gift-room-stepper__btn:hover { background: var(--popup-bg, var(--color-cream)); border-color: var(--popup-focus, var(--color-forest)); } .gift-room-stepper__input { height: 52px; text-align: center; } #gift-room-additem-overlay .gift-room-additem__budget { align-items: center; gap: 12px; } #gift-room-additem-overlay .gift-room-additem__budget .collection-modal__budget-shell { min-width: 0; flex: 1 1 auto; } .gift-room-share { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .gift-room-profile-share-overlay { align-items: center; justify-content: center; padding: 18px; background: var(--popup-overlay); backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 12620; } .gift-room-share-modal { position: relative; width: min(580px, calc(100vw - 56px)); max-width: 580px; max-height: min(740px, calc(100vh - 56px)); background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 21px; box-shadow: var(--popup-shadow); overflow: visible; } @media (min-width: 980px) { .gift-room-share-modal { width: min(580px, calc(100vw - 176px)); max-width: 580px; } .gift-room-coauthors-shell { width: min(578px, calc(100vw - 176px)); max-width: 578px; } } .gift-room-share-modal__close.collection-modal__close { display: inline-flex; align-items: center; justify-content: center; top: 0; left: calc(100% + 10px); right: auto; bottom: auto; } .gift-room-share-modal__sheet-grip { display: none; } .gift-room-share-modal__head { align-items: center; padding: 15px 15px 5px; text-align: center; } .gift-room-share-modal__head > div { flex: 1; } .gift-room-share-modal .gift-room-modal__title { font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .gift-room-confirm { position: fixed; inset: 0; z-index: 12900; display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--popup-overlay); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .gift-room-confirm.is-open { opacity: 1; pointer-events: auto; } .gift-room-confirm__panel { width: min(292px, calc(100vw - 36px)); padding: 18px; border: 0; border-radius: 16px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); color: var(--color-ink); transform: translateY(8px) scale(0.98); transition: transform 0.2s var(--ease-out-expo, cubic-bezier(.19,1,.22,1)); } .gift-room-confirm.is-open .gift-room-confirm__panel { transform: translateY(0) scale(1); } .gift-room-confirm__panel:focus { outline: none; } .gift-room-confirm__title { display: block; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .gift-room-confirm__text { max-width: 220px; margin: 10px 0 16px; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.28; } .gift-room-confirm__text[hidden] { display: none; } .gift-room-confirm__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gift-room-confirm__primary, .gift-room-confirm__secondary { min-width: 104px; height: 40px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 999px; font-family: var(--font-body); font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; overflow: visible; white-space: nowrap; } .gift-room-confirm__primary { order: 2; background: transparent; color: var(--color-cream); transition: none; } .gift-room-confirm__primary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-confirm__primary--alert { background: transparent; color: var(--color-cream); } .gift-room-confirm__primary .gift-room-icon { width: 15px; height: 15px; } .gift-room-confirm__secondary { order: 1; background: var(--popup-bg); color: var(--color-ink); box-shadow: none; transition: box-shadow .2s ease; } .gift-room-confirm__primary:hover, .gift-room-confirm__primary:focus-visible { background: transparent; color: var(--color-cream); box-shadow: none; outline: 0; transform: none; } .gift-room-confirm__primary:hover::before, .gift-room-confirm__primary:focus-visible::before { transform: scale(1.055); } .gift-room-confirm__secondary:hover, .gift-room-confirm__secondary:focus-visible { background: var(--popup-bg); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-share-modal .gift-room-modal__subtitle { margin-top: 3px; font-size: 0.75rem; line-height: 1.35; } .gift-room-share-modal__body { gap: 12px; padding-left: 15px; padding-right: 15px; padding-top: 3px; scroll-padding-bottom: 20px; scrollbar-width: none; -ms-overflow-style: none; } .gift-room-share-modal__body::-webkit-scrollbar { display: none; } .gift-room-room-share-modal__body { gap: 14px; } .gift-room-room-share-link { margin-bottom: 2px; } .gift-room-room-share-link__row { grid-template-columns: minmax(0, 1fr) auto; } .gift-room-room-share-actions.gr-share-actions { margin-top: 0; } @media (max-width: 720px) { .gift-room-room-share-actions.gr-share-actions { display: flex; gap: 12px; min-height: 96px; margin: 0 -14px; padding: 8px 14px 10px; overflow-x: auto; overflow-y: visible; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gift-room-room-share-actions .gr-share-action { flex: 0 0 74px; width: 74px; min-height: 84px; scroll-snap-align: start; } .gift-room-room-share-actions .gr-share-action__icon { width: 50px; height: 50px; } .gift-room-room-share-actions .gr-share-action__icon img { width: 44px; height: 44px; } .gift-room-room-share-actions .gr-share-action__icon--copy img { width: 24px; height: 24px; } } .gr-share-actions { flex: 0 0 auto; display: flex; gap: 14px; min-height: 116px; margin: -8px -10px 0; padding: 11px 10px 10px; border-bottom: 1px solid var(--color-line); overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gr-share-actions::-webkit-scrollbar { display: none; } .gr-share-action { flex: 0 0 78px; width: 78px; min-height: 102px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 0; background: transparent; border: 0; color: var(--color-ink); font-family: inherit; font-size: 0.92rem; line-height: 1.12; text-align: center; cursor: pointer; scroll-snap-align: start; overflow: visible; } .gr-share-action > span:not(.gr-share-action__icon) { display: block; width: 100%; min-height: 1.2em; font-size: 0.68rem; line-height: 1.05; font-weight: 520; } .gr-share-action__icon { width: 68px; height: 68px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; color: var(--color-ink); background: transparent; font-family: var(--font-heading); transition: box-shadow .18s ease, transform .18s ease; } .gr-share-action:hover .gr-share-action__icon, .gr-share-action:focus-visible .gr-share-action__icon { transform: scale(1.08); } .gr-share-action[data-action="profile-copy"]:hover .gr-share-action__icon, .gr-share-action[data-action="profile-copy"]:focus-visible .gr-share-action__icon { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gr-share-action__icon img { width: 58px; height: 58px; display: block; transition: transform .18s ease; } .gr-share-action__icon--copy img { width: 29px; height: 29px; } .gr-share-search, .gift-room-dashboard-search, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; min-height: 46px; height: 46px; box-sizing: border-box; padding: 0; border: 1.5px solid color-mix(in srgb, var(--color-ink) 16%, transparent); border-radius: 999px; background: var(--color-cream); color: var(--color-ink); outline: none; overflow: visible; isolation: isolate; box-shadow: none; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .gr-share-search:focus-within, .gift-room-dashboard-search:focus-within, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search:focus-within { border-color: var(--popup-focus, var(--color-forest)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus, var(--color-forest)) 14%, transparent); } .gr-share-search__icon, .gift-room-dashboard-search__icon, .gift-room-seat-search__button { position: absolute; top: 4px; left: 4px; bottom: 4px; z-index: 1; width: 38px; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--color-forest); color: var(--color-cream); pointer-events: none; } .gr-share-search .gift-room-dashboard-search__icon, .gr-share-search__icon { top: 50%; bottom: auto; left: 17px; width: 19px; min-width: 19px; height: 19px; background: transparent; color: var(--color-ink); transform: translateY(-50%); } .gr-share-search__icon img, .gift-room-dashboard-search__icon img, .gift-room-seat-search__button-icon { width: 17px; height: 17px; display: block; object-fit: contain; } .gr-share-search .gift-room-dashboard-search__icon img, .gr-share-search__icon img { width: 19px; height: 19px; filter: brightness(0); } .gr-share-search input, .gift-room-dashboard-search input, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search input { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; padding: 0 42px 0 58px; border: 0; border-radius: 0; background: transparent; color: var(--color-ink); font: 700 14px/1.2 var(--font-heading); outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; position: relative; z-index: 1; } .gr-share-search { min-height: 52px; height: 52px; } .gr-share-search input { padding-left: 49px; } .gr-share-search input::placeholder, .gift-room-dashboard-search input::placeholder, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search input::placeholder { color: var(--color-ink-muted); opacity: 1; } .gr-share-search input:focus, .gr-share-search input:focus-visible, .gift-room-dashboard-search input:focus, .gift-room-dashboard-search input:focus-visible, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search input:focus, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search input:focus-visible { outline: none; border: 0; box-shadow: none; } .gr-share-search input::-webkit-search-decoration, .gr-share-search input::-webkit-search-cancel-button, .gr-share-search input::-webkit-search-results-button, .gr-share-search input::-webkit-search-results-decoration, .gift-room-dashboard-search input::-webkit-search-decoration, .gift-room-dashboard-search input::-webkit-search-cancel-button, .gift-room-dashboard-search input::-webkit-search-results-button, .gift-room-dashboard-search input::-webkit-search-results-decoration, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search input::-webkit-search-decoration, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search input::-webkit-search-cancel-button, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search input::-webkit-search-results-button, body.page--gift-room .workspace-thread__search.gift-room-dashboard-search input::-webkit-search-results-decoration { display: none; -webkit-appearance: none; } body.page--gift-room .gift-room-dashboard-search .workspace-thread__search-clear { right: 10px; color: var(--color-ink-soft); } body.page--gift-room .gift-room-dashboard-search .workspace-thread__search-clear:hover, body.page--gift-room .gift-room-dashboard-search .workspace-thread__search-clear:focus-visible { color: var(--color-ink); background: color-mix(in srgb, var(--color-ink) 8%, transparent); } .gr-share-people { display: flex; flex-direction: column; gap: 0; } .gr-share-person { position: relative; min-height: 60px; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px; border-radius: 14px; transition: background-color 0.18s ease; } .gr-share-person:hover, .gr-share-person:focus-within { background: var(--control-disabled-bg); } .gr-share-person[hidden] { display: none; } .gr-share-person__avatar { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-ink); font-family: var(--font-display); font-size: 0.86rem; font-weight: 650; background: var(--color-sand); overflow: hidden; } .gr-share-person__avatar.jp-profile-avatar-art { background: transparent !important; border: 0; box-shadow: none; color: var(--color-cream); overflow: visible; padding: 0; } .gr-share-person__avatar.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 0.92em; } .gr-share-person:nth-child(4n + 1) .gr-share-person__avatar, .gr-share-person__avatar--initial { background: color-mix(in srgb, var(--color-sand-dark) 70%, var(--popup-bg)); color: var(--color-ink); } .gr-share-person:nth-child(4n + 2) .gr-share-person__avatar, .gr-share-person__avatar--photo { background: linear-gradient(135deg, color-mix(in srgb, var(--color-forest) 28%, var(--popup-bg)), var(--color-forest)); color: var(--color-cream); } .gr-share-person:nth-child(4n + 3) .gr-share-person__avatar, .gr-share-person__avatar--studio { background: color-mix(in srgb, var(--color-sand-dark) 42%, var(--popup-bg)); color: var(--color-forest-dark); } .gr-share-person:nth-child(4n) .gr-share-person__avatar, .gr-share-person__avatar--roman { background: color-mix(in srgb, var(--color-ink-soft) 28%, var(--popup-bg)); color: var(--color-cream); } .gr-share-person__body { display: flex; flex-direction: column; min-width: 0; } .gr-share-person__body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink); font-size: 0.86rem; line-height: 1.1; } .gr-share-person__body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-soft); font-size: 0.78rem; } .gr-share-person__send { position: relative; height: 38px; min-width: 120px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-heading); font-size: 0.82rem; font-weight: 800; cursor: pointer; isolation: isolate; overflow: visible; transition: color .18s ease; } .gr-share-person__send::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-forest); transition: background-color .18s ease, transform .18s ease; } .gr-share-person__send:hover, .gr-share-person__send:focus-visible { color: var(--popup-bg); outline: 0; } .gr-share-person__send:hover::before, .gr-share-person__send:focus-visible::before { background: var(--color-forest-dark, var(--color-forest)); transform: scale(1.018); } .gr-share-person__send:disabled { color: var(--color-cream); cursor: default; transform: none; } .gr-share-person__send:disabled::before { background: var(--color-ink); transform: none; } .gift-room-profile-bio-overlay { align-items: center; justify-content: center; padding: 18px; background: var(--popup-overlay); backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 12630; } .gift-room-profile-bio-modal { --gift-room-profile-bio-radius: 21px; position: relative; width: min(500px, calc(100vw - 56px)); max-width: 500px; max-height: min(600px, calc(100vh - 56px)); background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: var(--gift-room-profile-bio-radius); box-shadow: var(--popup-shadow); overflow: visible; } .gift-room-profile-bio-modal__close.header-auth-close { position: absolute; top: 0; left: calc(100% + 10px); right: auto; z-index: 5; 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); } .gift-room-profile-bio-modal__close.header-auth-close:hover, .gift-room-profile-bio-modal__close.header-auth-close:focus-visible { background: var(--popup-close-hover-bg, var(--sort-control-bg)); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: var(--popup-close-hover-filter); } .gift-room-profile-bio-modal__sheet-grip { display: none; } .gift-room-profile-bio-modal__form { min-height: 0; display: flex; flex-direction: column; border-radius: inherit; background: var(--popup-bg); overflow: hidden; } .gift-room-profile-bio-modal__head { align-items: center; padding: 22px 72px 8px 22px; text-align: left; } .gift-room-profile-bio-modal__head > div { flex: 1; } .gift-room-profile-bio-modal .gift-room-modal__title { font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .gift-room-profile-bio-modal .gift-room-modal__subtitle { max-width: 26rem; margin-top: 4px; color: var(--color-ink-soft); font-size: 0.78rem; line-height: 1.35; } .gift-room-profile-bio-modal__body { gap: 8px; padding: 10px 22px 0; } .gift-room-profile-bio-modal__field { position: relative; display: block; } .gift-room-profile-bio-modal__label { position: absolute; z-index: 2; top: -7px; left: 17px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; background: var(--popup-bg); color: var(--color-ink); font-size: 0.72rem; font-weight: 800; line-height: 1.1; pointer-events: none; } .gift-room-profile-bio-modal__textarea { width: 100%; min-height: 128px; resize: vertical; padding: 31px 17px 16px; border: 1.5px solid var(--control-border-resting, var(--popup-control-border)); border-radius: 22px; background: var(--popup-control-bg); color: var(--color-ink); font-family: var(--font-body); font-size: 0.96rem; font-weight: 560; line-height: 1.35; outline: 0; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-ink) 5%, transparent); transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; -webkit-appearance: none; appearance: none; } .gift-room-profile-bio-modal__textarea::placeholder { color: var(--color-ink-soft); opacity: 0.72; } .gift-room-profile-bio-modal__textarea:focus, .gift-room-profile-bio-modal__textarea:focus-visible { border-color: var(--popup-focus); background: var(--popup-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } .gift-room-profile-bio-modal__count { align-self: flex-end; color: var(--color-ink-soft); font-size: 0.78rem; font-weight: 650; line-height: 1; } .gift-room-profile-bio-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; padding: 16px 22px 22px; border-top: 0; background: var(--popup-bg); border-radius: 0 0 var(--gift-room-profile-bio-radius) var(--gift-room-profile-bio-radius); } .gift-room-profile-bio-modal__footer .collection-modal__cancel, .gift-room-profile-bio-modal__footer .collection-modal__create { min-height: 46px; min-width: 112px; margin: 0; padding: 0 22px; font-size: 15px; line-height: 1; } .gift-room-profile-bio-modal__footer .collection-modal__cancel { background: transparent; box-shadow: none; } .gift-room-profile-bio-modal__footer .collection-modal__cancel:hover, .gift-room-profile-bio-modal__footer .collection-modal__cancel:focus-visible { background: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } .gift-room-profile-bio-modal__footer .collection-modal__create:hover, .gift-room-profile-bio-modal__footer .collection-modal__create:focus-visible { box-shadow: none; outline: 0; } .gift-room-social-overlay { z-index: 12630; transition: none; } .gift-room-social-modal { position: relative; width: min(620px, calc(100vw - 56px)); max-width: 620px; max-height: min(760px, calc(100vh - 56px)); background: var(--color-cream); border: 1px solid var(--popup-border); border-radius: 22px; box-shadow: var(--popup-shadow); overflow: visible; } .gift-room-social-modal__head { align-items: center; justify-content: center; padding: 24px 24px 12px; text-align: center; } .gift-room-social-modal__head > div { flex: 1; } .gift-room-social-modal__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 24px 14px; padding: 5px; border: 1px solid var(--popup-border); border-radius: 999px; background: var(--popup-bg); } .gift-room-social-modal__tabs button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: 0.9rem; font-weight: 850; cursor: pointer; isolation: isolate; overflow: visible; transition: color 0.18s ease; } .gift-room-social-modal__tabs button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: transparent; transition: background-color 0.18s ease, transform 0.18s ease; } .gift-room-social-modal__tab-icon { width: 16px; height: 16px; display: inline-block; flex: 0 0 16px; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .gift-room-social-modal__tab-icon--people { mask-image: url("/assets/admin-icons/users-round.svg"); -webkit-mask-image: url("/assets/admin-icons/users-round.svg"); } .gift-room-social-modal__tab-icon--rooms { mask-image: url("/assets/gift-room-icons/lobby-rooms.svg"); -webkit-mask-image: url("/assets/gift-room-icons/lobby-rooms.svg"); } .gift-room-social-modal__tabs button.is-active { color: var(--popup-bg); } .gift-room-social-modal__tabs button.is-active::before { background: var(--color-ink); } .gift-room-social-modal__tabs button:hover, .gift-room-social-modal__tabs button:focus-visible { color: var(--color-ink); } .gift-room-social-modal__tabs button:hover::before, .gift-room-social-modal__tabs button:focus-visible::before { background: var(--color-sand); transform: scale(1.012); } .gift-room-social-modal__tabs button.is-active:hover, .gift-room-social-modal__tabs button.is-active:focus-visible { color: var(--popup-bg); } .gift-room-social-modal__tabs button.is-active:hover::before, .gift-room-social-modal__tabs button.is-active:focus-visible::before { background: var(--color-ink); } .gift-room-social-modal__tabs button:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .gift-room-social-modal__body { gap: 4px; min-height: 250px; padding: 8px 24px 24px; } .gift-room-social-row { min-height: 68px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; color: var(--color-ink); text-decoration: none; transition: background-color 0.18s ease; } .gift-room-social-row:hover, .gift-room-social-row:focus-within { background: var(--control-disabled-bg); } .gift-room-social-row__avatar { width: 52px; height: 52px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-sand); color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; line-height: 1; } .gift-room-social-row__avatar.jp-profile-avatar-art { background: transparent !important; box-shadow: none; padding: 0; } .gift-room-social-row__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; } .gift-room-social-row__name, .gift-room-social-row__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-social-row__name { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.94rem; font-weight: 850; } .gift-room-social-row__meta { color: var(--color-ink-soft); font-size: 0.78rem; font-weight: 650; } .gift-room-social-row__button { position: relative; min-height: 38px; min-width: 120px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-heading); font-size: 0.82rem; font-weight: 800; cursor: pointer; isolation: isolate; overflow: visible; transition: color 0.18s ease; } .gift-room-social-row__button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-forest); border: 1px solid transparent; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .gift-room-social-row__button:hover, .gift-room-social-row__button:focus-visible { color: var(--color-cream); outline: 0; } .gift-room-social-row__button:hover::before, .gift-room-social-row__button:focus-visible::before { background: var(--color-forest-dark, var(--color-forest)); border-color: transparent; transform: scale(1.018); } .gift-room-social-row__button.is-following, .gift-room-social-row__button.is-saved { color: var(--color-cream); } .gift-room-social-row__button.is-following::before, .gift-room-social-row__button.is-saved::before { background: var(--color-ink); border-color: transparent; } .gift-room-social-row__button.is-following:hover, .gift-room-social-row__button.is-following:focus-visible, .gift-room-social-row__button.is-saved:hover, .gift-room-social-row__button.is-saved:focus-visible { color: var(--color-cream); } .gift-room-social-row__button.is-following:hover::before, .gift-room-social-row__button.is-following:focus-visible::before, .gift-room-social-row__button.is-saved:hover::before, .gift-room-social-row__button.is-saved:focus-visible::before { background: color-mix(in srgb, var(--color-ink) 92%, var(--color-cream) 8%); border-color: transparent; } .gift-room-social-row__button.is-self, .gift-room-social-row__button:disabled { color: var(--color-ink-soft); cursor: default; transform: none; } .gift-room-social-row__button.is-self::before, .gift-room-social-row__button:disabled::before { background: var(--control-disabled-bg); border-color: var(--control-disabled-bg); transform: none; } .gift-room-social-row__button.is-self:hover, .gift-room-social-row__button.is-self:focus-visible, .gift-room-social-row__button:disabled:hover, .gift-room-social-row__button:disabled:focus-visible { color: var(--color-ink-soft); outline: 0; transform: none; } .gift-room-social-row__button.is-self:hover::before, .gift-room-social-row__button.is-self:focus-visible::before, .gift-room-social-row__button:disabled:hover::before, .gift-room-social-row__button:disabled:focus-visible::before { background: var(--control-disabled-bg); transform: none; } .gift-room-social-empty { min-height: 230px; display: grid; place-items: center; padding: 26px; border-radius: 18px; background: transparent; color: var(--color-ink-soft); text-align: center; } .gift-room-social-empty strong { display: block; margin-bottom: 6px; color: var(--color-ink); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .gift-room-social-empty span { display: block; max-width: 22rem; font-size: 0.9rem; line-height: 1.35; } .gift-room-coauthors-search-block { position: relative; padding-top: 8px; } .gift-room-coauthors-search-block > .gift-room-submodal__eyebrow { position: absolute; top: 0; left: 22px; z-index: 2; display: inline-flex; align-items: center; width: auto; max-width: calc(100% - 44px); border-radius: 999px; background: var(--popup-bg); padding: 0 8px; line-height: 1.2; pointer-events: none; } .gift-room-invite-modal { position: relative; max-width: 578px; overflow: visible; } .gift-room-invite-modal__body { gap: 12px; padding-bottom: 22px; } .gift-room-invite-modal__close.header-auth-close { display: block; } .gift-room-invite-share { margin-top: 2px; } .gift-room-invite-share__row { grid-template-columns: minmax(0, 1fr) 88px; align-items: center; } .gift-room-invite-copy { min-width: 88px; } .gift-room-invite-copy:hover, .gift-room-invite-copy:focus-visible { background: var(--popup-bg); color: var(--color-ink); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } .gift-room-invite-search-block { margin-top: 2px; } .gift-room-invite-people.gr-share-people { gap: 0; } .gift-room-invite-people .gr-share-person__send:disabled { opacity: 1; } .gift-room-rsvp-overlay { --gift-room-rsvp-accent: var(--color-ink); --gift-room-rsvp-tint: var(--color-sand); } .gift-room-rsvp-shell { position: relative; width: min(100%, 578px); max-width: calc(100vw - 40px); } .gift-room-rsvp-modal { width: 100%; max-width: none; overflow: hidden; background: var(--popup-bg); box-shadow: var(--popup-shadow); } .gift-room-rsvp-modal__head { position: relative; display: grid; gap: 4px; padding: 20px 20px 13px; border-bottom: 0; background: var(--popup-bg); } .gift-room-rsvp-modal__head > div { min-width: 0; } .gift-room-rsvp-modal__url { display: block; margin: 0 0 2px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .gift-room-rsvp-modal__title { color: var(--color-ink); font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .gift-room-rsvp-modal__subtitle { margin-top: 3px; color: var(--color-ink-soft); font-size: 0.88rem; line-height: 1.32; } .gift-room-rsvp-modal__close.header-auth-close { display: inline-flex; background: var(--popup-bg); } .gift-room-rsvp-modal__body { display: grid; gap: 16px; padding: 0 20px 20px; overflow: auto; } .gift-room-rsvp-progress { position: relative; z-index: 2; height: 10px; margin: -4px 0 13px; overflow: hidden; border-radius: 999px; background: var(--color-line); } .gift-room-rsvp-progress span { display: block; width: 34%; height: 100%; border-radius: inherit; background-color: var(--color-ink); background-image: linear-gradient(90deg, var(--color-ink) 0%, var(--color-ink) 50%, var(--intent-brand-primary, var(--color-forest)) 82%, var(--intent-brand-primary, var(--color-forest)) 100%); transition: width .24s ease; } .gift-room-rsvp-step, .gift-room-rsvp-form { min-width: 0; display: grid; gap: 12px; } .gift-room-rsvp-modal__sheet-grip { display: none; } .gift-room-rsvp-label { display: block; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.88rem; font-weight: 760; line-height: 1.2; } .gift-room-rsvp-field { --header-auth-label-bg: var(--popup-bg); --header-auth-field-bg: var(--popup-bg); } .gift-room-rsvp-modal .header-auth-label { color: var(--color-ink); } .gift-room-rsvp-modal .header-auth-input-wrap { height: 52px; } .gift-room-rsvp-modal .header-auth-input { min-height: 50px; padding: 0 20px; font-size: 14px; line-height: 50px; } .gift-room-rsvp-modal .header-auth-input::placeholder { color: color-mix(in srgb, var(--color-ink-soft) 64%, var(--popup-bg)); } .gift-room-rsvp-field--small .header-auth-input-wrap { height: 46px; } .gift-room-rsvp-field--small .header-auth-input { min-height: 44px; padding: 0 15px; font-size: 13px; line-height: 44px; } .gift-room-rsvp-message { min-height: 18px; margin: 0; color: var(--color-ink-soft); font-size: 0.78rem; line-height: 1.35; } .gift-room-rsvp-message.is-error { color: var(--color-alert-red); } .gift-room-rsvp-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 3px; } .gift-room-rsvp-actions--split { justify-content: space-between; } .gift-room-rsvp-primary, .gift-room-rsvp-secondary { justify-content: center; min-width: 176px; } .gift-room-rsvp-modal .gift-room-cta { background: transparent; border-color: transparent; transform: none; transition: none; will-change: auto; } .gift-room-rsvp-modal .gift-room-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; border: 1px solid var(--color-ink); border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; pointer-events: none; } .gift-room-rsvp-modal .gift-room-cta--cream { color: var(--color-ink); } .gift-room-rsvp-modal .gift-room-cta--cream::before { border-color: var(--color-line); background: var(--color-cream); } .gift-room-rsvp-modal .gift-room-rsvp-secondary::before { border-color: transparent; background: var(--popup-bg); box-shadow: none; transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease; } .gift-room-rsvp-modal .gift-room-cta:hover, .gift-room-rsvp-modal .gift-room-cta:focus-visible, .gift-room-rsvp-modal .gift-room-cta:active { background: transparent; border-color: transparent; transform: none; } .gift-room-rsvp-modal .gift-room-cta:hover::before, .gift-room-rsvp-modal .gift-room-cta:focus-visible::before { transform: scale(1.025); } .gift-room-rsvp-modal .gift-room-rsvp-secondary:hover::before, .gift-room-rsvp-modal .gift-room-rsvp-secondary:focus-visible::before { transform: none; box-shadow: none; } .gift-room-rsvp-modal .gift-room-rsvp-secondary:hover, .gift-room-rsvp-modal .gift-room-rsvp-secondary:focus-visible { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-rsvp-modal .gift-room-cta__label, .gift-room-rsvp-modal .gift-room-cta__asset, .gift-room-rsvp-modal .gift-room-cta__plus { position: relative; z-index: 1; transform: none; transition: none; } .gift-room-rsvp-modal .gift-room-cta:hover .gift-room-cta__label, .gift-room-rsvp-modal .gift-room-cta:focus-visible .gift-room-cta__label, .gift-room-rsvp-modal .gift-room-cta:active .gift-room-cta__label, .gift-room-rsvp-modal .gift-room-cta:hover .gift-room-cta__asset, .gift-room-rsvp-modal .gift-room-cta:focus-visible .gift-room-cta__asset, .gift-room-rsvp-modal .gift-room-cta:active .gift-room-cta__asset, .gift-room-rsvp-modal .gift-room-cta:hover .gift-room-cta__plus, .gift-room-rsvp-modal .gift-room-cta:focus-visible .gift-room-cta__plus, .gift-room-rsvp-modal .gift-room-cta:active .gift-room-cta__plus { transform: none; } .gift-room-rsvp-found { display: grid; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; } .gift-room-rsvp-found strong { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; } .gift-room-rsvp-found span { color: var(--color-ink-soft); font-size: 0.82rem; line-height: 1.35; } .gift-room-rsvp-party { display: grid; gap: 16px; } .gift-room-rsvp-person { display: grid; gap: 14px; padding: 0; border: 0; border-radius: 0; background: transparent; transition: opacity .16s ease; } .gift-room-rsvp-person.is-going { background: transparent; } .gift-room-rsvp-person.is-declined { opacity: .72; } .gift-room-rsvp-person__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; } .gift-room-rsvp-person__top strong { min-width: 0; overflow: hidden; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .gift-room-rsvp-person__avatar { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-sand); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; overflow: hidden; } .gift-room-rsvp-person__avatar.jp-profile-avatar-art { background: transparent !important; color: var(--color-cream); overflow: visible; padding: 0; } .gift-room-rsvp-status { display: inline-flex; gap: 6px; padding: 0; border-radius: 999px; background: transparent; } .gift-room-rsvp-status__btn { min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 780; cursor: pointer; white-space: nowrap; } .gift-room-rsvp-status__btn:hover, .gift-room-rsvp-status__btn:focus-visible { color: var(--color-ink); outline: 0; } .gift-room-rsvp-status__btn.is-active { background: var(--color-ink); color: var(--color-cream); } .gift-room-rsvp-person__details { width: 100%; min-width: 0; display: grid; gap: 7px; padding-left: 0; } .gift-room-rsvp-success { display: grid; justify-items: center; gap: 10px; padding: 20px 8px 8px; text-align: center; } .gift-room-rsvp-success__icon { width: 62px; height: 62px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-ink); color: var(--color-cream); font-size: 1.9rem; } .gift-room-rsvp-success h3 { margin: 0; font-family: var(--font-display); font-size: 1.42rem; font-weight: 720; } .gift-room-rsvp-success p { max-width: 28rem; margin: 0; color: var(--color-ink-soft); font-size: 0.9rem; line-height: 1.4; } @media (max-width: 720px) { .gift-room-rsvp-overlay { --gift-room-rsvp-mobile-top: clamp(76px, 12dvh, 116px); --gift-room-rsvp-mobile-offset: calc(env(safe-area-inset-top, 0px) + var(--gift-room-rsvp-mobile-top)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-rsvp-mobile-offset) 0 0; overflow: hidden; } .gift-room-rsvp-shell { position: relative; width: 100%; max-width: 100%; height: calc(100vh - var(--gift-room-rsvp-mobile-offset)); height: calc(100dvh - var(--gift-room-rsvp-mobile-offset)); } .gift-room-rsvp-modal { width: 100%; max-width: 100%; height: 100%; max-height: none; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 24px 24px 0 0; transform: translateY(100%); } .gift-room-rsvp-overlay.is-open .gift-room-rsvp-modal { transform: translateY(var(--gift-room-rsvp-sheet-drag-y, 0px)); } .gift-room-rsvp-overlay.is-sheet-dragging .gift-room-rsvp-modal { transform: translateY(var(--gift-room-rsvp-sheet-drag-y, 0px)); transition: none; will-change: transform; } .gift-room-rsvp-overlay.is-sheet-settling .gift-room-rsvp-modal, .gift-room-rsvp-overlay.is-sheet-closing .gift-room-rsvp-modal { transform: translateY(var(--gift-room-rsvp-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .gift-room-rsvp-modal__sheet-grip { display: inline-flex; cursor: grab; touch-action: none; user-select: none; } .gift-room-rsvp-overlay.is-sheet-dragging .gift-room-rsvp-modal__sheet-grip { cursor: grabbing; } .gift-room-rsvp-modal__head { padding: 24px 18px 18px; } .gift-room-rsvp-modal__url { font-size: 0.72rem; overflow-wrap: anywhere; } .gift-room-rsvp-modal__title { font-size: var(--popup-title-size, 25px); } .gift-room-rsvp-modal__subtitle { font-size: 0.86rem; } .gift-room-rsvp-modal__close.header-auth-close { top: 8px; right: 14px; left: auto; width: 44px; height: 44px; display: none !important; background: transparent; box-shadow: none; pointer-events: none; z-index: 4; } .gift-room-rsvp-modal__body { gap: 18px; padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0px)); } .gift-room-rsvp-progress { margin: 0 0 18px; } .gift-room-rsvp-modal .header-auth-input-wrap { height: 50px; } .gift-room-rsvp-modal .header-auth-input { min-height: 48px; padding: 0 17px; line-height: 48px; } .gift-room-rsvp-actions, .gift-room-rsvp-actions--split { justify-content: stretch; } .gift-room-rsvp-primary, .gift-room-rsvp-secondary { flex: 1 1 100%; width: 100%; min-width: 0; } .gift-room-rsvp-actions--split .gift-room-rsvp-primary { order: 1; } .gift-room-rsvp-actions--split .gift-room-rsvp-secondary { order: 2; } .gift-room-rsvp-person__top { grid-template-columns: auto minmax(0, 1fr); } .gift-room-rsvp-status { grid-column: 1 / -1; width: 100%; } .gift-room-rsvp-status__btn { flex: 1 1 0; padding: 0 8px; text-align: center; } .gift-room-rsvp-person__details { padding-left: 0; } } @media (max-width: 720px) { .gift-room-profile-share-overlay { --gift-room-share-modal-mobile-top: clamp(84px, 13dvh, 128px); --gift-room-share-modal-mobile-offset: calc(env(safe-area-inset-top, 0px) + var(--gift-room-share-modal-mobile-top)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-share-modal-mobile-offset) 0 0; overflow: hidden; } .gift-room-share-modal { width: 100%; max-width: 100%; height: calc(100vh - var(--gift-room-share-modal-mobile-offset)); height: calc(100dvh - var(--gift-room-share-modal-mobile-offset)); max-height: none; min-height: 0; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; border-width: 1px 0 0; box-shadow: var(--popup-shadow-soft); overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .gift-room-share-modal__close.collection-modal__close { display: none; top: 10px; left: auto; right: 12px; bottom: auto; width: 44px; height: 44px; } .gift-room-profile-share-overlay.is-open .gift-room-share-modal { transform: translateY(0); } #gift-room-profile-share-overlay.is-open:not(.is-sheet-dragging):not(.is-sheet-settling):not(.is-sheet-closing) .gift-room-share-modal { transform: translateY(0) !important; } .gift-room-profile-share-overlay.is-sheet-dragging .gift-room-share-modal { transform: translateY(var(--gift-room-share-sheet-drag-y, 0px)); transition: none; will-change: transform; } .gift-room-profile-share-overlay.is-sheet-settling .gift-room-share-modal { transform: translateY(var(--gift-room-share-sheet-drag-y, 0px)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .gift-room-profile-share-overlay.is-sheet-closing .gift-room-share-modal { transform: translateY(var(--gift-room-share-sheet-drag-y, 0px)); transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .gift-room-share-modal__sheet-grip { display: flex; flex: 0 0 var(--popup-sheet-grip-height, 44px); min-height: var(--popup-sheet-grip-height, 44px); align-items: center; justify-content: center; width: 100%; border: 0; background: var(--popup-bg); cursor: grab; touch-action: none; user-select: none; } .gift-room-share-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .gift-room-profile-share-overlay.is-sheet-dragging .gift-room-share-modal__sheet-grip { cursor: grabbing; } .gift-room-share-modal__head { flex: 0 0 auto; padding: 4px 16px 12px; border-bottom: 1px solid var(--popup-border); } .gift-room-share-modal__body { flex: 1 1 auto; min-height: 0; padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scroll-padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); scrollbar-width: none; -ms-overflow-style: none; } .gift-room-share-modal__body::-webkit-scrollbar { display: none; } .gr-share-actions { flex: 0 0 auto; padding-bottom: 10px; } .gr-share-search input { height: 48px; font-size: 16px; } .gr-share-person { grid-template-columns: 38px minmax(0, 1fr) auto; } .gr-share-person__avatar { width: 38px; height: 38px; } .gr-share-person__send { width: auto; min-width: 86px; } .gift-room-profile-bio-overlay { --gift-room-profile-bio-modal-mobile-top: clamp(86px, 14dvh, 132px); --gift-room-profile-bio-modal-mobile-offset: calc(env(safe-area-inset-top, 0px) + var(--gift-room-profile-bio-modal-mobile-top)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-profile-bio-modal-mobile-offset) 0 0; overflow: hidden; } .gift-room-profile-bio-modal { width: 100%; max-width: 100%; max-height: calc(100vh - var(--gift-room-profile-bio-modal-mobile-offset)); max-height: calc(100dvh - var(--gift-room-profile-bio-modal-mobile-offset)); min-height: 0; border-radius: 22px 22px 0 0; border-width: 1px 0 0; box-shadow: var(--popup-shadow-soft); overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .gift-room-profile-bio-overlay.is-open .gift-room-profile-bio-modal { transform: translateY(var(--gift-room-profile-bio-sheet-drag-y, 0px)); } .gift-room-profile-bio-overlay.is-closing .gift-room-profile-bio-modal { transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); } .gift-room-profile-bio-overlay.is-sheet-dragging .gift-room-profile-bio-modal { transform: translateY(var(--gift-room-profile-bio-sheet-drag-y, 0px)); transition: none; will-change: transform; } .gift-room-profile-bio-overlay.is-sheet-settling .gift-room-profile-bio-modal, .gift-room-profile-bio-overlay.is-sheet-closing .gift-room-profile-bio-modal { transform: translateY(var(--gift-room-profile-bio-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .gift-room-profile-bio-modal__sheet-grip { display: flex; flex: 0 0 var(--popup-sheet-grip-height, 44px); min-height: var(--popup-sheet-grip-height, 44px); align-items: center; justify-content: center; width: 100%; border: 0; background: var(--popup-bg); cursor: grab; touch-action: none; user-select: none; } .gift-room-profile-bio-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .gift-room-profile-bio-modal__close { display: none; } .gift-room-profile-bio-modal__form { height: 100%; max-height: inherit; } .gift-room-profile-bio-modal__head { flex: 0 0 auto; padding: 4px 16px 12px; border-bottom: 0; } .gift-room-profile-bio-modal__body { flex: 1 1 auto; min-height: 0; padding: 16px 16px 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); scrollbar-width: none; -ms-overflow-style: none; } .gift-room-profile-bio-modal__body::-webkit-scrollbar { display: none; } .gift-room-profile-bio-modal__field { position: relative; display: block; } .gift-room-profile-bio-modal__label { position: absolute; z-index: 2; top: -7px; left: 17px; padding: 0 7px; line-height: 1.1; } .gift-room-profile-bio-modal__textarea { min-height: clamp(168px, 29dvh, 220px); max-height: min(40dvh, 280px); resize: none; overflow-y: auto; padding: 24px 17px 16px; font-size: 16px; scrollbar-width: none; -ms-overflow-style: none; } .gift-room-profile-bio-modal__textarea::-webkit-scrollbar { display: none; } .gift-room-profile-bio-modal__footer { flex: 0 0 auto; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); } #gift-room-social-overlay { --gift-room-social-modal-mobile-top: clamp(84px, 13dvh, 128px); --gift-room-social-modal-mobile-offset: calc(env(safe-area-inset-top, 0px) + var(--gift-room-social-modal-mobile-top)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-social-modal-mobile-offset) 0 0; overflow: hidden; } #gift-room-social-overlay .gift-room-social-modal { width: 100%; max-width: 100%; height: calc(100vh - var(--gift-room-social-modal-mobile-offset)); height: calc(100dvh - var(--gift-room-social-modal-mobile-offset)); max-height: none; min-height: 0; display: flex; flex-direction: column; border-width: 1px 0 0; border-radius: var(--popup-sheet-radius, 22px 22px 0 0); box-shadow: var(--popup-shadow-soft); overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } #gift-room-social-overlay.is-open .gift-room-social-modal { transform: translateY(var(--gift-room-social-sheet-drag-y, 0px)); } #gift-room-social-overlay.is-closing .gift-room-social-modal { transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); } #gift-room-social-overlay.is-sheet-dragging .gift-room-social-modal { transform: translateY(var(--gift-room-social-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-social-overlay.is-sheet-settling .gift-room-social-modal, #gift-room-social-overlay.is-sheet-closing .gift-room-social-modal { transform: translateY(var(--gift-room-social-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-social-overlay .gift-room-social-modal__close { display: none !important; } #gift-room-social-overlay .gift-room-social-modal__sheet-grip { flex: 0 0 var(--popup-sheet-grip-height, 44px); min-height: var(--popup-sheet-grip-height, 44px); } #gift-room-social-overlay.is-sheet-dragging .gift-room-social-modal__sheet-grip { cursor: grabbing; } #gift-room-social-overlay .gift-room-social-modal__head { flex: 0 0 auto; padding: 8px 16px 10px; } #gift-room-social-overlay .gift-room-social-modal__tabs { flex: 0 0 auto; margin: 0 16px 12px; } #gift-room-social-overlay .gift-room-social-modal__body { flex: 1 1 auto; min-height: 0; padding: 4px 16px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; } #gift-room-social-overlay .gift-room-social-modal__body::-webkit-scrollbar { display: none; } #gift-room-social-overlay .gift-room-social-row { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "avatar copy action"; align-items: center; column-gap: 12px; min-height: 78px; padding: 10px 0; border-radius: 0; } #gift-room-social-overlay .gift-room-social-row__avatar { grid-area: avatar; align-self: start; } #gift-room-social-overlay .gift-room-social-row__copy { grid-area: copy; } #gift-room-social-overlay .gift-room-social-row__button { grid-area: action; justify-self: end; min-width: 92px; min-height: 38px; padding-inline: 15px; } #gift-room-social-overlay .gift-room-social-empty { min-height: 100%; } } #gift-room-social-overlay .gift-room-social-row__button.is-self, #gift-room-social-overlay .gift-room-social-row__button:disabled { color: var(--color-ink-soft); } #gift-room-social-overlay .gift-room-social-row__button.is-self::before, #gift-room-social-overlay .gift-room-social-row__button:disabled::before { background: var(--popup-bg-soft); border-color: var(--popup-border); } .gift-room-card-menu { position: fixed; z-index: var(--z-modal-front, 13000); background: var(--popup-bg); border: 1px solid var(--color-line); border-radius: 14px; box-shadow: 0 16px 40px color-mix(in srgb, var(--color-ink) 18%, transparent); padding: 6px; min-width: 180px; opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .18s; pointer-events: none; } .gift-room-card-menu__sheet-grip { display: none; } .gift-room-card-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .gift-room-card-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: transparent; border: 0; border-radius: 9px; font-family: inherit; font-size: 0.88rem; color: var(--color-ink); cursor: pointer; text-align: left; transition: background .15s; } .gift-room-card-menu__item:hover, .gift-room-card-menu__item:focus-visible { background: var(--popup-hover, #DCDDD4); } .gift-room-card-menu__item .gift-room-icon { width: 14px; height: 14px; } .gift-room-card-menu__item--alert { color: var(--color-alert-red); } .gift-room-card-menu__item--alert:hover, .gift-room-card-menu__item--alert:focus-visible { background: var(--color-alert-soft); } .gift-room-card-menu__divider { height: 1px; background: var(--color-line); margin: 4px 6px; } .gift-room-card-menu-overlay { position: fixed; inset: 0; z-index: var(--z-modal-front, 13000); display: flex; align-items: flex-end; justify-content: center; background: rgba(35, 32, 48, 0.64); opacity: 0; pointer-events: none; transition: opacity 0.26s ease; } .gift-room-card-menu-overlay.is-open { opacity: 1; pointer-events: auto; } .gift-room-card-menu-overlay.is-closing, .gift-room-card-menu-overlay.is-sheet-closing { opacity: 0; pointer-events: none; } @media (max-width: 720px) { .gift-room-card-menu-overlay { --gift-room-card-menu-mobile-top: clamp(84px, 13dvh, 128px); --gift-room-card-menu-mobile-offset: calc(env(safe-area-inset-top, 0px) + var(--gift-room-card-menu-mobile-top)); height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-card-menu-mobile-offset) 0 0; overflow: hidden; } .gift-room-card-menu-overlay .gift-room-card-menu { --gift-room-card-menu-drag-y: 0px; position: relative; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; min-width: 0; height: calc(100vh - var(--gift-room-card-menu-mobile-offset)); height: calc(100dvh - var(--gift-room-card-menu-mobile-offset)); max-height: none; display: flex; flex-direction: column; padding: 0 14px calc(16px + env(safe-area-inset-bottom, 0px)); border-inline: 0; border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: var(--popup-shadow); opacity: 1; pointer-events: auto; overflow-x: hidden; overflow-y: auto; transform: translateY(100%); overscroll-behavior: contain; user-select: none; -webkit-overflow-scrolling: touch; transition: transform .24s cubic-bezier(0.22, 1, 0.36, 1); } .gift-room-card-menu-overlay.is-open .gift-room-card-menu { transform: translateY(var(--gift-room-card-menu-drag-y, 0px)); } .gift-room-card-menu-overlay.is-closing .gift-room-card-menu { transform: translateY(18px); will-change: transform; } .gift-room-card-menu-overlay .gift-room-card-menu.is-sheet-dragging { transform: translateY(var(--gift-room-card-menu-drag-y, 0px)); transition: none; will-change: transform; } .gift-room-card-menu-overlay .gift-room-card-menu.is-sheet-settling { transform: translateY(var(--gift-room-card-menu-drag-y, 0px)); transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .gift-room-card-menu-overlay .gift-room-card-menu.is-sheet-closing { transform: translateY(var(--gift-room-card-menu-drag-y, 100%)); transition: transform .18s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .gift-room-card-menu__sheet-grip { display: flex; flex: 0 0 var(--popup-sheet-grip-height, 44px); min-height: var(--popup-sheet-grip-height, 44px); align-items: center; justify-content: center; margin: 0 -14px 4px; border: 0; background: var(--popup-bg); cursor: grab; touch-action: none; user-select: none; } .gift-room-card-menu.is-sheet-dragging .gift-room-card-menu__sheet-grip { cursor: grabbing; } .gift-room-card-menu__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .gift-room-card-menu__item { min-height: 48px; border-radius: 14px; font-size: 0.95rem; } } .gift-room-toast.favorite-toast { bottom: 24px; width: min(453px, calc(100vw - 40px)); min-height: 58px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 8px 16px 8px 10px; background: var(--color-forest); color: var(--color-cream); border: 0; outline: 1px solid var(--color-forest-dark); outline-offset: -1px; border-radius: 24px; box-shadow: 0 24px 56px color-mix(in srgb, var(--color-forest-dark) 52%, transparent), 0 4px 16px color-mix(in srgb, var(--color-ink) 18%, transparent); pointer-events: none; } .gift-room-toast.favorite-toast .favorite-toast__icon { width: 48px; height: 48px; flex-basis: 48px; } .gift-room-toast.favorite-toast .favorite-toast__media-frame { border-radius: 14px; background: color-mix(in srgb, var(--color-cream) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-cream) 40%, transparent); } .gift-room-toast.favorite-toast .favorite-toast__content { gap: 1px; padding-top: 1px; } .gift-room-toast.favorite-toast .favorite-toast__title { color: var(--color-cream); font-size: 15px; font-weight: 700; } .gift-room-toast.favorite-toast .favorite-toast__meta-icon { display: inline-flex; color: var(--color-cream); } .gift-room-toast.favorite-toast .favorite-toast__subtitle { color: var(--color-cream); font-size: 13px; line-height: 1.2; } .gift-room-toast.favorite-toast.gift-room-toast--has-action { grid-template-columns: 48px minmax(0, 1fr) auto; } .gift-room-toast.favorite-toast .gift-room-toast__undo { grid-column: 3; align-self: center; justify-self: end; pointer-events: auto; border: 1px solid color-mix(in srgb, var(--color-cream) 55%, transparent); background: color-mix(in srgb, var(--color-cream) 12%, transparent); color: var(--color-cream); border-radius: 999px; padding: 8px 16px; min-height: 38px; font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 0.16s ease, transform 0.16s ease; } .gift-room-toast.favorite-toast .gift-room-toast__undo:hover { background: color-mix(in srgb, var(--color-cream) 22%, transparent); transform: translateY(-1px); } .gift-room-toast.favorite-toast .gift-room-toast__undo:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 2px; } .gift-room-rail, .gift-room-rail__card, .gift-room-rail__list, .gift-room-rail__link { display: none !important; } .gr-lobby-tabs-shell { position: relative; grid-column: 1 / -1; min-height: 90px; margin: -6px 0 8px; } .gr-lobby-tabs-shell.is-tools-hidden { min-height: 48px; margin-bottom: 0; } .gr-lobby-sticky-frame { --gift-room-tabs-bleed: calc((100vw - 100%) / 2); position: relative; top: auto; z-index: 130; isolation: isolate; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; box-sizing: border-box; overflow: visible; background: var(--color-page-bg); opacity: 1; visibility: visible; transition: none; } .gr-lobby-tabs-shell .gr-lobby-head__row { margin: 0; } .gr-lobby-tabs { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 10px; min-height: 42px; margin: 0; padding: 0; border-bottom: 0; box-sizing: border-box; overflow: visible; background: transparent; transform: translateY(-5px); } .gr-lobby-tabs[hidden] { display: none !important; } .gr-lobby-sticky-frame::before, .gr-lobby-sticky-frame::after { content: ""; position: absolute; left: calc(-1 * var(--gift-room-tabs-bleed)); width: 100vw; pointer-events: none; } .gr-lobby-sticky-frame::before { top: 0; bottom: 0; background: var(--color-page-bg, #f8f1eb); z-index: -1; } .gr-lobby-sticky-frame::after { bottom: 0; height: 1px; background: #d9d5d0; box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent), 0 6px 16px color-mix(in srgb, var(--color-ink) 7%, transparent); opacity: 0; transition: opacity .18s ease; z-index: 1; } body.is-gift-room-tabs-docked .gr-lobby-sticky-frame::after { opacity: 1; } body.page--gift-room.is-gift-room-tabs-docked .fixed-header { box-shadow: none; } body.page--gift-room:not(.is-gift-room-tabs-release) .gr-lobby-sticky-frame { opacity: 1 !important; visibility: visible; } body.page--gift-room.is-gift-room-tabs-release .gr-lobby-sticky-frame { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: none !important; } body.page--gift-room.is-gift-room-tabs-release .gr-lobby-sticky-frame::after { opacity: 0; } .gr-lobby-tabs__list { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; overflow-x: auto; overflow-y: visible; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gr-lobby-tabs__list::-webkit-scrollbar { display: none; } .gr-lobby-tabs__actions { position: relative; z-index: 2; flex: 0 0 auto; align-self: flex-start; display: flex; align-items: center; justify-content: flex-end; padding-bottom: 0; } .gr-lobby-filter-menu { position: absolute; top: calc(100% + 8px); left: var(--gr-lobby-filter-menu-left, 0px); z-index: 30; width: var(--gr-lobby-filter-menu-width, min(320px, calc(100vw - 32px))); max-width: calc(100vw - 32px); max-height: 420px; overflow: auto; padding: 5px; border: 1px solid var(--popup-border); border-radius: 24px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); color: var(--color-ink); box-sizing: border-box; } .gr-lobby-filter-menu[hidden] { display: none !important; } .gr-lobby-filter-menu__sheet-grip { display: none; } .gr-lobby-filter-menu__section + .gr-lobby-filter-menu__section { margin-top: 6px; padding-top: 0; } .gr-lobby-filter-menu__eyebrow { margin: 0; padding: 10px 10px 6px; color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 700; line-height: 1.2; } .gr-lobby-filter-menu__option { appearance: none; width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 15px; border: 0; border-radius: 18px; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color 0.18s ease; } .gr-lobby-filter-menu__option.is-selected { background: var(--sort-option-selected-bg); } .gr-lobby-filter-menu__option + .gr-lobby-filter-menu__option { margin-top: 2px; } .gr-lobby-filter-menu__option:hover, .gr-lobby-filter-menu__option:focus-visible { background: var(--sort-option-hover); outline: 0; } .gr-lobby-filter-menu__label { min-width: 0; } .gr-lobby-filter-menu__mark { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--popup-border-strong); background: var(--popup-bg); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; position: relative; } .gr-lobby-filter-menu__option.is-selected .gr-lobby-filter-menu__mark { border-color: var(--color-forest); background: var(--color-forest); } .gr-lobby-filter-menu__mark::after { content: ""; position: absolute; inset: 4px; border-radius: 999px; background: transparent; opacity: 0; } .gr-lobby-filter-menu__option.is-selected .gr-lobby-filter-menu__mark::after { background: var(--popup-bg); opacity: 1; } .gr-lobby-secondary { min-height: 44px; } .gr-lobby-secondary__group { display: none; align-items: center; gap: 9px; min-width: 0; overflow-x: auto; overflow-y: visible; scrollbar-width: none; } .gr-lobby-secondary__group::-webkit-scrollbar { display: none; } .gr-lobby-secondary__group.is-active { display: flex; } .gr-lobby-secondary__group[hidden] { display: none !important; } .gr-lobby-secondary__icon, .gr-lobby-secondary__chip { --gr-lobby-secondary-bg: transparent; --gr-lobby-secondary-y: 5px; appearance: none; position: relative; isolation: isolate; height: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: inherit; font-size: 0.82rem; font-weight: 650; line-height: 1; white-space: nowrap; cursor: pointer; overflow: visible; transition: color .18s ease; } .gr-lobby-secondary__icon::before, .gr-lobby-secondary__chip::before { content: ""; position: absolute; inset: var(--gr-lobby-secondary-y) 2px; z-index: 0; border-radius: inherit; background: var(--gr-lobby-secondary-bg); transform: scale(1); transform-origin: center; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; will-change: transform; } .gr-lobby-secondary__icon { width: 44px; padding: 0; } .gr-lobby-secondary__icon svg, .gr-lobby-secondary__icon-glyph { position: relative; z-index: 1; width: 19px; height: 19px; display: block; } .gr-lobby-secondary__icon-glyph { flex: 0 0 19px; background: currentColor; -webkit-mask: url("/assets/gift-room-icons/lobby-filters.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/lobby-filters.svg") center / contain no-repeat; } .gr-lobby-secondary__icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gr-lobby-secondary__chip { --gr-lobby-secondary-bg: rgb(238 229 218); --gr-lobby-secondary-y: 5px; padding: 0 16px; } .gr-lobby-secondary__label { position: relative; z-index: 1; } .gr-lobby-secondary__icon:hover, .gr-lobby-secondary__icon:focus-visible, .gr-lobby-secondary__chip:hover, .gr-lobby-secondary__chip:focus-visible { --gr-lobby-secondary-bg: rgb(238 229 218); --gr-lobby-secondary-y: 5px; color: var(--color-ink); outline: 0; } .gr-lobby-secondary__icon:hover::before, .gr-lobby-secondary__icon:focus-visible::before, .gr-lobby-secondary__chip:hover::before, .gr-lobby-secondary__chip:focus-visible::before { transform: scale(1.04); } .gr-lobby-secondary__chip:hover, .gr-lobby-secondary__chip:focus-visible { --gr-lobby-secondary-bg: rgb(238 229 218); } .gr-lobby-secondary__icon.is-active, .gr-lobby-secondary__icon[aria-pressed="true"], .gr-lobby-secondary__chip.is-active, .gr-lobby-secondary__chip[aria-pressed="true"] { --gr-lobby-secondary-bg: var(--color-ink); --gr-lobby-secondary-y: 5px; color: var(--color-cream); } .gr-lobby-secondary__icon.is-active:hover, .gr-lobby-secondary__icon.is-active:focus-visible, .gr-lobby-secondary__icon[aria-pressed="true"]:hover, .gr-lobby-secondary__icon[aria-pressed="true"]:focus-visible, .gr-lobby-secondary__chip.is-active:hover, .gr-lobby-secondary__chip.is-active:focus-visible, .gr-lobby-secondary__chip[aria-pressed="true"]:hover, .gr-lobby-secondary__chip[aria-pressed="true"]:focus-visible { --gr-lobby-secondary-bg: var(--color-ink); --gr-lobby-secondary-y: 5px; color: var(--color-cream); } .gr-lobby-tab { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 11px 14px 13px; box-sizing: border-box; margin-bottom: 0; background: transparent; border: 0; border-radius: 0; font-family: inherit; font-size: 0.94rem; font-weight: 650; color: var(--color-ink-soft); cursor: pointer; scroll-snap-align: start; transition: color .2s; } .gr-lobby-tab[data-lobby-tab="rooms"] { min-width: 140px; } .gr-lobby-tab[data-lobby-tab="ideas"] { min-width: 128px; } .gr-lobby-tab[data-lobby-tab="archive"] { min-width: 132px; } .gr-lobby-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 999px 999px 0 0; background: transparent; transition: background .2s; } .gr-lobby-tab:hover { color: var(--color-ink); } .gr-lobby-tab.is-active { color: var(--color-ink); } .gr-lobby-tab.is-active::after { background: var(--color-ink); } .gr-lobby-tab__icon { width: 17px; height: 17px; } .gr-lobby-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 17px; padding: 2px 6px; box-sizing: border-box; background: var(--color-page-bg); color: var(--color-ink-soft); border-radius: 999px; font-size: 0.66rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; } .gr-lobby-tab.is-active .gr-lobby-tab__count { background: var(--color-ink); color: var(--color-cream); } @media (max-width: 720px) { .gr-lobby-tabs-shell { min-height: 90px; } .gr-lobby-sticky-frame { gap: 10px; } .gr-lobby-tabs { gap: 8px; min-height: 44px; } .gr-lobby-tabs__list { gap: 8px; } .gr-lobby-secondary__icon, .gr-lobby-secondary__chip { height: 44px; min-height: 44px; font-size: 0.76rem; } .gr-lobby-secondary__icon { width: 44px; } .gr-lobby-secondary__chip { padding: 0 13px; } .gr-lobby-tab { padding: 10px 12px 12px; font-size: 0.86rem; } .gr-lobby-tab__icon { width: 16px; height: 16px; } .gr-lobby-tabs__actions .gift-room-cta { height: 44px; min-height: 44px; padding: 0 13px; font-size: 0.76rem; } } @media (min-width: 981px) { .gr-lobby-tabs-shell { min-height: 108px; position: sticky; top: var(--gift-room-tabs-sticky-top, 73px); z-index: 130; } .gr-lobby-sticky-frame { --gift-room-tabs-bleed: calc((100vw - min(var(--jp-page-shell-max, 1372px), calc(100vw - 68px))) / 2); min-height: 108px; margin-inline: calc(-1 * var(--homepage-shell-inset, var(--jp-page-shell-inset, 6px))); padding: 5px var(--homepage-shell-inset, var(--jp-page-shell-inset, 6px)) 7px; transition: top 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease; } body.page--gift-room.is-gift-room-tabs-docked .gr-lobby-sticky-frame { position: fixed; top: var(--gift-room-tabs-sticky-top, 73px); left: var(--gift-room-tabs-fixed-left, 0px); width: var(--gift-room-tabs-fixed-width, min(var(--jp-page-shell-max, 1372px), calc(100vw - 68px))); margin-inline: 0; } .gr-lobby-tabs { min-height: 48px; } body.page--gift-room.is-gift-room-lobby-ideas .gr-lobby-tabs-shell { position: relative; top: auto; z-index: 20; } body.page--gift-room.is-gift-room-lobby-ideas .gr-lobby-sticky-frame { position: relative; top: auto; left: auto; width: auto; margin-inline: calc(-1 * var(--homepage-shell-inset, var(--jp-page-shell-inset, 6px))); } body.page--gift-room.is-gift-room-lobby-ideas .gr-my-ideas-section--saved > .gr-my-ideas-section__head { position: sticky; top: var(--gift-room-tabs-sticky-top, 73px); z-index: 125; isolation: isolate; margin: 0 0 15px; padding: 8px 0 0; } body.page--gift-room.is-gift-room-lobby-ideas .gr-my-ideas-section--saved > .gr-my-ideas-section__head::before { content: ""; position: absolute; inset-block: 0; left: calc((100% - 100vw) / 2); right: calc((100% - 100vw) / 2); z-index: -1; background: var(--color-page-bg); border-bottom: 1px solid transparent; box-shadow: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } body.page--gift-room.is-gift-room-myideas-head-stuck .gr-my-ideas-section--saved > .gr-my-ideas-section__head::before { bottom: -8px; border-bottom-color: var(--color-line); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-ink) 8%, transparent); } body.page--gift-room.is-gift-room-myideas-head-stuck .fixed-header { box-shadow: none; } } .gr-lobby-pane { display: none; } .gr-lobby-pane.is-active { display: block; } .gr-picks { display: grid; gap: clamp(20px, 2vw, 30px); padding: 0 0 52px; overflow: visible; } .gr-picks__controls { position: relative; z-index: 6; display: flex; align-items: center; gap: 16px; min-width: 0; overflow: visible; } .gr-picks__sort-wrap { position: relative; flex: 0 0 auto; } .gr-picks__sort-trigger { appearance: none; display: inline-grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; } .gr-picks__sort-trigger:hover, .gr-picks__sort-trigger:focus-visible, .gr-picks__sort-trigger.is-open { background: var(--color-ink); color: var(--gr-bg-soft); outline: 0; box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 10%, transparent); } .gr-picks__filter-icon { display: block; width: 30px; height: 30px; background: currentColor; -webkit-mask: url("/assets/gift-room-icons/lobby-filters.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/lobby-filters.svg") center / contain no-repeat; } .gr-picks__chips { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; } .gr-picks__chip { appearance: none; min-height: 44px; border: 0; border-radius: 999px; padding: 0 24px; background: var(--gr-accent-soft); color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; font-weight: 750; line-height: 1; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } .gr-picks__chip:hover, .gr-picks__chip:focus-visible { outline: 0; box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 10%, transparent); transform: translateY(-1px); } .gr-picks__chip.is-active { background: var(--color-ink); color: var(--gr-bg-soft); box-shadow: none; transform: none; } .gr-picks__sort-menu { top: calc(100% + 12px); left: 0; --gr-lobby-filter-menu-width: min(336px, calc(100vw - 32px)); } .gr-picks__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 22px; overflow: visible; padding: 2px 0 10px; } .gr-picks__grid > .gr-pick-card { width: 100%; max-width: none; min-width: 0; } .gr-pick-card { min-width: 0; overflow: visible; } .gr-pick-card .gift-room-card__title a, .gr-pick-card__author, .gr-pick-card__avatar { color: inherit; text-decoration: none; } .gr-pick-card .gift-room-card__title a:hover, .gr-pick-card .gift-room-card__title a:focus-visible, .gr-pick-card__author:hover, .gr-pick-card__author:focus-visible { color: var(--color-forest); outline: 0; } .gr-pick-card__cover { position: relative; display: block; overflow: hidden; border-top-left-radius: inherit; border-top-right-radius: inherit; text-decoration: none; color: inherit; } .gr-pick-card__cover-link { position: absolute; inset: 0; z-index: 2; display: block; color: inherit; text-decoration: none; } .gr-pick-card .gift-room-card__body { padding-top: 9px; gap: 6px; } .gr-pick-card .gift-room-card__title { font-size: clamp(1rem, 0.92vw, 1.16rem); line-height: 1.18; } .gr-pick-card .gift-room-card__date { font-size: 0.82rem; line-height: 1.25; } .gr-pick-card__cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 8%, transparent), transparent 42%); pointer-events: none; } .gr-pick-card__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-top-left-radius: inherit; border-top-right-radius: inherit; object-fit: cover; } .gr-pick-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; border-top-left-radius: inherit; border-top-right-radius: inherit; color: color-mix(in srgb, var(--color-forest) 52%, transparent); font-family: var(--font-heading); font-size: clamp(4rem, 8vw, 8rem); font-weight: 750; line-height: 1; } .gr-pick-card__privacy.gift-room-card__privacy-status { position: absolute; top: 10px; right: var(--gr-card-action-edge, 10px); z-index: 4; opacity: 1; pointer-events: none; transform: translateX(0) scale(1); background: var(--gr-bg-soft); color: var(--color-ink); cursor: default; } .gr-pick-card[data-room-private="false"] .gr-pick-card__privacy { color: var(--color-forest); } .gr-pick-card:hover .gr-pick-card__privacy, .gr-pick-card:focus-within .gr-pick-card__privacy, .gr-pick-card:has(.gift-room-card__menu-btn.is-open) .gr-pick-card__privacy { right: var(--gr-card-action-edge, 10px); } .gr-pick-card__save { position: absolute; right: 10px; bottom: 10px; z-index: 5; min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--popup-bg); color: var(--color-forest); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 850; line-height: 1; box-shadow: var(--shadow-card-soft); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .gr-pick-card__save:hover, .gr-pick-card__save:focus-visible { background: var(--color-forest); color: var(--popup-bg); outline: 0; transform: translateY(-1px); } .gr-pick-card__save.is-saved { background: var(--color-forest); color: var(--popup-bg); } .gr-pick-card__remove.gift-room-card__privacy-status { pointer-events: auto; cursor: pointer; color: var(--color-ink); } .gr-pick-card__remove.gift-room-card__privacy-status:hover, .gr-pick-card__remove.gift-room-card__privacy-status:focus-visible { background: var(--color-alert-soft); color: var(--color-alert-red); outline: 0; transform: translateY(-1px) scale(1); } .gr-pick-card__remove .gift-room-icon { width: 15px; height: 15px; } .gr-pick-card__author { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; width: 100%; max-width: 100%; margin-top: 2px; padding-top: 0; color: var(--color-ink); font-family: var(--font-body); line-height: 1.15; } .gr-pick-card__avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; font-size: 0.72rem; } .gr-pick-card__author-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gr-pick-card__author-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; font-weight: 800; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color 0.18s ease, text-decoration-color 0.18s ease; } .gr-pick-card__author:hover .gr-pick-card__author-name, .gr-pick-card__author:focus-visible .gr-pick-card__author-name, .gr-pick-card__author:focus-within .gr-pick-card__author-name, .gr-pick-card__author-name:hover { color: var(--color-forest); text-decoration-color: var(--color-forest); } .gr-pick-card__author-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-soft); font-size: 0.72rem; font-weight: 650; } .gr-pick-card__stats { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin-top: 4px; padding-top: 0; } .gr-pick-card__stat { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 5px 6px; border-radius: 999px; background: var(--popup-bg); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 800; line-height: 1; } .gr-pick-card__stat--button { border: 0; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .gr-pick-card__stat--button:hover, .gr-pick-card__stat--button:focus-visible, .gr-pick-card__stat--button.is-rated { background: var(--color-forest); color: var(--popup-bg); outline: 0; } .gr-pick-card__stat--button:hover, .gr-pick-card__stat--button:focus-visible { transform: translateY(-1px); } .gr-pick-card__stat-icon { width: 13px; height: 13px; flex: 0 0 13px; display: block; object-fit: contain; } .gr-pick-card__stat-value { min-width: 0; white-space: nowrap; } .gr-pick-card__rating-panel { display: flex; align-items: center; gap: 7px; width: max-content; max-width: 100%; min-height: 28px; margin-top: 5px; padding: 4px 7px; border-radius: 999px; background: var(--popup-bg); color: var(--color-ink); box-shadow: var(--shadow-card-soft); } .gr-pick-card__rating-panel[hidden] { display: none; } .gr-pick-card__rating-label { color: var(--color-ink-soft); font-family: var(--font-body); font-size: 0.66rem; font-weight: 800; white-space: nowrap; } .gr-pick-card__rating-options { display: inline-flex; gap: 1px; } .gr-pick-card__rating-option { width: 22px; height: 22px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink-soft); cursor: pointer; font-size: 0.82rem; line-height: 1; } .gr-pick-card__rating-star { width: 13px; height: 12px; display: block; background: currentColor; -webkit-mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; mask: url("/assets/header-icons/rating-star-dark.svg") center / contain no-repeat; } .gr-pick-card__rating-option:hover, .gr-pick-card__rating-option:focus-visible, .gr-pick-card__rating-option.is-selected { background: var(--color-jedi-picks-yellow); color: var(--color-ink); outline: 0; } @media (max-width: 1120px) { .gr-picks__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 860px) { .gr-picks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .gr-picks { padding-bottom: 38px; } .gr-picks__controls { align-items: flex-start; gap: 12px; } .gr-picks__sort-trigger { width: 52px; height: 52px; } .gr-picks__chips { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .gr-picks__chips::-webkit-scrollbar { display: none; } .gr-picks__chip { min-height: 42px; padding: 0 20px; white-space: nowrap; } .gr-picks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; } } @media (max-width: 380px) { .gr-picks__grid { grid-template-columns: 1fr; } } .gr-templates { margin: 42px 0 0; padding: 22px 0 0; border-top: 1px solid var(--color-line); overflow: visible; } .gr-templates__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 8px; } .gr-templates__copy { min-width: 0; } .gr-templates__head h2 { font-family: var(--font-heading); font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.28rem); font-weight: 750; letter-spacing: 0; color: var(--color-ink); line-height: 1.1; margin: 0 0 4px; } .gr-templates__head p { font-size: 0.84rem; line-height: 1.35; color: var(--color-ink-soft); margin: 0; } .gr-templates__pager { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .gr-templates__arrow { width: 56px; height: 46px; padding: 0; margin: 0; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: visible; background: transparent; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: opacity 0.18s ease; backface-visibility: hidden; z-index: 2; flex: 0 0 auto; } .gr-templates__arrow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: var(--color-ink); pointer-events: none; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: transform 0.18s ease, background-color 0.18s ease; will-change: transform; backface-visibility: hidden; } .gr-templates__arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; transform: translate(-50%, -50%); transform-origin: 50% 50%; backface-visibility: hidden; } .gr-templates__arrow--prev::after { background-image: url("/assets/header-icons/pager-pill-prev.svg"); } .gr-templates__arrow--next::after { background-image: url("/assets/header-icons/pager-pill-next.svg"); } .gr-templates__arrow:hover:not(.is-hidden)::before, .gr-templates__arrow:focus-visible:not(.is-hidden)::before { transform: translate3d(0, 0, 0) scale(1.04); } .gr-templates__arrow:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 18%, transparent); outline-offset: 3px; } .gr-templates__arrow.is-hidden { pointer-events: none; cursor: default; opacity: 0.35; } .gr-templates:not(.has-template-overflow) .gr-templates__arrow { display: none; } .gr-templates__grid { display: flex; gap: 14px; margin: 0 -8px; padding: 6px 8px 22px; overflow-x: auto; overflow-y: visible; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .gr-templates__grid::-webkit-scrollbar { display: none; } .gr-template { position: relative; display: grid; grid-template-columns: minmax(136px, 34%) minmax(0, 1fr); align-items: stretch; text-align: left; gap: 0; flex: 0 0 min(430px, 86vw); min-width: 0; padding: 0; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 18px; font-family: inherit; cursor: pointer; overflow: visible; scroll-snap-align: start; min-height: 154px; color: var(--color-ink); transition: border-color .2s, box-shadow .22s; } .gr-template:hover { border-color: var(--color-line); box-shadow: var(--shadow-card-hover); } .gr-template:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 4px; } @media (max-width: 720px) { .gr-templates { margin-inline: calc(50% - 50vw); padding: 24px max(16px, var(--homepage-shell-inset, 0px)) 0; } .gr-templates__pager { display: none; } .gr-templates__head h2 { font-size: clamp(1rem, 4.2vw, 1.14rem); font-weight: 750; line-height: 1.12; } .gr-templates__head p { font-size: clamp(0.86rem, 3.6vw, 0.96rem); line-height: 1.35; } .gr-templates__grid { margin-inline: calc(-1 * max(16px, var(--homepage-shell-inset, 0px))); padding: 8px max(16px, var(--homepage-shell-inset, 0px)) 24px; gap: 12px; scroll-padding-inline: max(16px, var(--homepage-shell-inset, 0px)); } .gr-template { flex-basis: min(86vw, 360px); min-height: 148px; } } .gr-template__media { position: relative; display: grid; place-items: center; min-height: 154px; overflow: hidden; border-radius: 17px 0 0 17px; background: var(--popup-bg-muted); } .gr-template__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, transparent 72%, var(--color-cream) 100%); opacity: .92; pointer-events: none; } .gr-template__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gr-template__media-grid { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; } .gr-template__media-grid span { min-width: 0; min-height: 0; background: var(--gr-template-tile, var(--filter-pill-bg)); } .gr-template__media-grid--birthday span:nth-child(1), .gr-template__media-grid--birthday span:nth-child(4), .gr-template__media-grid--anniversary span:nth-child(2), .gr-template__media-grid--anniversary span:nth-child(3) { background: var(--popup-bg-muted); } .gr-template__media-grid--baby span:nth-child(1), .gr-template__media-grid--baby span:nth-child(4), .gr-template__media-grid--holiday span:nth-child(2), .gr-template__media-grid--holiday span:nth-child(3) { background: color-mix(in srgb, var(--color-forest) 18%, var(--popup-bg-muted)); } .gr-template__media-grid--birthday span:nth-child(2), .gr-template__media-grid--holiday span:nth-child(1), .gr-template__media-grid--custom span:nth-child(4) { background: var(--popup-bg-soft); } .gr-template__media-grid--baby span:nth-child(2), .gr-template__media-grid--anniversary span:nth-child(1), .gr-template__media-grid--custom span:nth-child(2) { background: color-mix(in srgb, var(--color-forest) 10%, var(--popup-bg)); } .gr-template__media-grid--custom span:nth-child(1), .gr-template__media-grid--custom span:nth-child(3) { background: var(--popup-bg-muted); } .gr-template__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 22px clamp(18px, 2.4vw, 34px); border-radius: 0 17px 17px 0; background: var(--color-cream); } .gr-template__word { display: block; font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: clamp(1.6rem, 2vw, 2.35rem); line-height: 1.08; letter-spacing: 0; color: var(--color-ink); } .gr-template__copy { display: block; margin-top: 12px; font-size: 0.84rem; font-weight: 600; color: var(--color-ink-soft); line-height: 1.35; } .gr-template__cta { display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-top: 18px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--color-ink); letter-spacing: 0; } .gr-template__cta::after { content: ""; display: block; width: 20px; height: 12px; background: currentColor; -webkit-mask: url("/assets/header-icons/pager-arrow-next-active.svg") center / contain no-repeat; mask: url("/assets/header-icons/pager-arrow-next-active.svg") center / contain no-repeat; } .gr-lobby-empty { min-height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 18px 24px 22px; text-align: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .gr-lobby-empty[hidden] { display: none !important; } .gr-lobby-empty__art { display: block; width: min(340px, 42vw); height: auto; margin: 0 auto 12px; } .gr-lobby-empty.is-archive-empty .gr-lobby-empty__art { display: block; } @media (max-width: 700px) { .gr-lobby-empty__art { width: min(250px, 72vw); } } .gr-lobby-empty h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.005em; color: var(--color-ink); margin: 0 0 4px; } .gr-lobby-empty p { font-size: 0.78rem; color: var(--color-ink-soft); margin: 0; } .gr-lobby-empty__action { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-width: 172px; min-height: 56px; margin-top: 20px; padding: 0 34px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-display) !important; font-size: 1.02rem; font-weight: 750; line-height: 1.1; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none; transform: none; transition: color 0.18s ease; } .gr-lobby-empty__action::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: background-color 0.18s ease, transform 0.18s ease; will-change: transform; pointer-events: none; } .gr-lobby-empty__action::after { content: none; } .gr-lobby-empty__action:hover, .gr-lobby-empty__action:focus-visible { background: transparent; color: var(--color-cream); text-decoration: none; box-shadow: none; transform: none; } .gr-lobby-empty__action:hover::before, .gr-lobby-empty__action:focus-visible::before { background: var(--color-forest); transform: scale(1.055); } .gr-lobby-empty__action:focus-visible { outline: 0; } .gift-room-access-state { width: min(100% - 32px, 760px); min-height: min(72vh, 720px); margin: 0 auto; padding: clamp(34px, 6vw, 72px) 0 clamp(44px, 7vw, 86px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .gift-room-access-state__art { display: block; width: min(440px, 58vw); height: auto; margin: 0 auto clamp(18px, 3vw, 30px); } .gift-room-access-state__eyebrow { max-width: 34rem; margin: 14px 0 4px; color: var(--color-forest); font-family: var(--font-heading) !important; font-size: 0.72rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } .gift-room-access-state__meta { display: inline-flex; align-items: center; gap: 10px; max-width: min(100%, 30rem); margin: 0 auto; padding: 7px 12px 7px 8px; border-radius: 999px; background: var(--color-chip-bg); color: var(--color-ink); } .gift-room-access-state__avatar { width: 42px; height: 42px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-forest); color: var(--color-cream); font-family: var(--font-display); font-size: 1.05rem; font-weight: 750; line-height: 1; overflow: hidden; } .gift-room-access-state__avatar.jp-profile-avatar-art { background: transparent !important; border: 0; box-shadow: none; padding: 0; } .gift-room-access-state__avatar.jp-profile-avatar-art .jp-profile-avatar-letter { font-size: 1em; } .gift-room-access-state__owner-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.05; } .gift-room-access-state__owner-label { color: var(--color-ink-soft); font-family: var(--font-heading) !important; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .gift-room-access-state__owner-copy strong { max-width: 18rem; overflow: hidden; color: var(--color-ink); font-family: var(--font-heading) !important; font-size: 0.98rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .gift-room-access-state__room-name { max-width: 34rem; margin: 0 auto 10px; color: var(--color-forest); font-family: var(--font-heading) !important; font-size: 0.9rem; font-weight: 850; line-height: 1.2; } .gift-room-access-state__title { max-width: 42rem; margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight: 500; line-height: 1.02; letter-spacing: 0; } .gift-room-access-state__copy { max-width: 36rem; margin: 14px auto 0; color: var(--color-ink-soft); font-family: var(--font-body) !important; font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.42; } .gift-room-access-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(20px, 3vw, 30px); } .gift-room-access-state__primary, .gift-room-access-state__secondary { appearance: none; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 24px; font-family: var(--font-heading) !important; font-size: 0.94rem; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; } .gift-room-access-state__primary { border: 0; background: var(--color-forest); color: var(--color-cream); } .gift-room-access-state__primary:disabled { cursor: default; opacity: 0.72; } .gift-room-access-state__secondary { border: 0; background: var(--color-chip-bg); color: var(--color-ink); } .gift-room-access-state__primary:hover, .gift-room-access-state__primary:focus-visible, .gift-room-access-state__secondary:hover, .gift-room-access-state__secondary:focus-visible { outline: 0; box-shadow: none; } .gift-room-access-related { width: min(100% - 64px, 1440px); margin: clamp(10px, 1.8vw, 22px) auto clamp(48px, 6vw, 78px); padding-top: clamp(18px, 2.4vw, 28px); border-top: 1px solid var(--color-line); } .gift-room-access-related__header { display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(260px, 0.42fr); gap: clamp(16px, 3vw, 38px); align-items: end; margin-bottom: clamp(12px, 1.7vw, 20px); } .gift-room-access-related__eyebrow { grid-column: 1; margin: 0 0 6px; color: var(--color-forest); font-family: var(--font-heading) !important; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .gift-room-access-related__title { grid-column: 1; margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.32rem, 2vw, 1.72rem); font-weight: 500; line-height: 1.08; letter-spacing: 0; } .gift-room-access-related__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } .gift-room-access-related-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 0; border-radius: 18px; background: transparent; color: var(--color-ink); text-decoration: none; overflow: visible; isolation: isolate; box-shadow: none; } .gift-room-access-related-card__link { min-width: 0; display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; } .gift-room-access-related-card__cover { position: relative; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; height: clamp(176px, 14vw, 202px); border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--color-cream) 84%, var(--color-line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-line) 72%, transparent); } .gift-room-access-related-card__tile { position: relative; min-width: 0; min-height: 0; display: block; border-radius: 0; overflow: hidden; box-shadow: none; } .gift-room-access-related-card__tile--primary { grid-row: 1 / 3; background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--color-cream) 78%, transparent) 0%, transparent 30%), linear-gradient(145deg, color-mix(in srgb, var(--color-info-soft) 78%, var(--popup-bg)) 0%, color-mix(in srgb, var(--color-forest) 18%, var(--popup-bg)) 100%); } .gift-room-access-related-card__tile--secondary { background: radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--color-cream) 72%, transparent) 0%, transparent 36%), color-mix(in srgb, var(--color-highlight-soft) 78%, var(--popup-bg)); } .gift-room-access-related-card__tile--tertiary { background: color-mix(in srgb, var(--color-forest) 18%, var(--popup-bg)); } .gift-room-access-related-card__body { display: flex; flex-direction: column; gap: 6px; padding: 0 1px; } .gift-room-access-related-card__owner { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--color-ink-soft); font-family: var(--font-body) !important; font-size: 0.68rem; font-weight: 750; } .gift-room-access-related-card__avatar { width: 22px; height: 22px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-forest); color: var(--color-cream); font-family: var(--font-display); font-size: 0.66rem; line-height: 1; } .gift-room-access-related-card__avatar.jp-profile-avatar-art { background: transparent !important; box-shadow: none; padding: 0; } .gift-room-access-related-card__owner-name, .gift-room-access-related-card__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .gift-room-access-related-card__owner-name { white-space: nowrap; } .gift-room-access-related-card__title { display: -webkit-box; min-height: 32px; color: var(--color-ink); font-family: var(--font-heading) !important; font-size: 0.86rem; font-weight: 850; line-height: 1.12; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .gift-room-access-related-card__metrics { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--color-ink-soft); font-family: var(--font-body) !important; font-size: 0.72rem; font-weight: 780; line-height: 1; white-space: nowrap; } .gift-room-access-related-card__metric { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .gift-room-access-related-card__metric-icon { position: relative; width: 14px; height: 14px; flex: 0 0 14px; display: inline-block; color: currentColor; } .gift-room-access-related-card__metric--score .gift-room-access-related-card__metric-icon { color: var(--color-forest); } .gift-room-access-related-card__metric--score .gift-room-access-related-card__metric-icon::before { content: ""; position: absolute; inset: 3px; background: currentColor; transform: rotate(45deg); } .gift-room-access-related-card__metric--views .gift-room-access-related-card__metric-icon::before { content: ""; position: absolute; inset: 3px 1px; border: 2px solid currentColor; border-radius: 999px; transform: rotate(-7deg); } .gift-room-access-related-card__metric--views .gift-room-access-related-card__metric-icon::after { content: ""; position: absolute; left: 5px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .gift-room-access-related-card__metric--requests .gift-room-access-related-card__metric-icon::before { content: ""; position: absolute; left: 1px; top: 2px; width: 11px; height: 8px; border: 2px solid currentColor; border-radius: 5px; } .gift-room-access-related-card__metric--requests .gift-room-access-related-card__metric-icon::after { content: ""; position: absolute; left: 4px; top: 9px; width: 5px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: skew(-18deg); } .gift-room-public-preview { width: min(100% - 96px, 1120px); min-height: min(64vh, 560px); margin: 0 auto; padding: clamp(44px, 5vw, 76px) 0 clamp(34px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1fr); gap: clamp(42px, 6vw, 86px); align-items: center; } .gift-room-public-preview__copy { min-width: 0; } .gift-room-public-preview__owner { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 7px 12px 7px 8px; border-radius: 999px; background: var(--color-chip-bg); } .gift-room-public-preview__avatar { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-forest); color: var(--color-cream); font-family: var(--font-display); font-size: 1.05rem; line-height: 1; } .gift-room-public-preview__avatar.jp-profile-avatar-art { background: transparent !important; box-shadow: none; padding: 0; } .gift-room-public-preview__owner span span { display: block; } .gift-room-public-preview__owner-label, .gift-room-public-preview__eyebrow { color: var(--color-forest); font-family: var(--font-heading) !important; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; } .gift-room-public-preview__owner strong { display: block; color: var(--color-ink); font-family: var(--font-heading) !important; font-size: 0.98rem; line-height: 1.1; } .gift-room-public-preview__eyebrow { margin: 0 0 8px; } .gift-room-public-preview__title { max-width: 36rem; margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 500; line-height: 1.04; } .gift-room-public-preview__text { max-width: 39rem; margin: 14px 0 0; color: var(--color-ink-soft); font-family: var(--font-body) !important; font-size: 1rem; line-height: 1.42; } .gift-room-public-preview__metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .gift-room-public-preview__metrics span { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--color-chip-bg); color: var(--color-ink); font-family: var(--font-body) !important; font-size: 0.8rem; font-weight: 800; line-height: 1; } .gift-room-public-preview__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .gift-room-public-preview__cover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; aspect-ratio: 1 / 0.82; padding: 14px; border-radius: 34px; background: color-mix(in srgb, var(--color-chip-bg) 74%, var(--popup-bg)); } .gift-room-public-preview__cover--privacy { align-content: stretch; background: linear-gradient(135deg, color-mix(in srgb, var(--color-ink) 10%, var(--popup-bg)), color-mix(in srgb, var(--color-forest) 15%, var(--popup-bg))); } .gift-room-public-preview__private-panel { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: clamp(16px, 3vw, 24px); border: 1px solid color-mix(in srgb, var(--color-cream) 44%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--popup-bg) 66%, transparent); color: var(--color-ink); overflow: hidden; isolation: isolate; } .gift-room-public-preview__private-panel::before { content: ""; height: 46%; border-radius: 999px; background: currentColor; opacity: 0.1; filter: blur(5px); } .gift-room-public-preview__private-panel strong, .gift-room-public-preview__private-panel em { font-family: var(--font-heading); font-style: normal; line-height: 1; } .gift-room-public-preview__private-panel strong { font-size: 1rem; font-weight: 850; } .gift-room-public-preview__private-panel em { color: var(--color-forest); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .gift-room-public-preview__tile { display: grid; place-items: center; border-radius: 24px; background: var(--popup-bg); color: var(--color-forest); } .gift-room-public-preview__tile .gift-room-item__icon { width: 46%; height: 46%; opacity: 0.78; } .gift-room-public-profile { width: min(100% - 64px, 1580px); min-height: min(62vh, 560px); margin: 0 auto; padding: clamp(34px, 5vw, 64px) 0 clamp(48px, 7vw, 82px); display: flex; flex-direction: column; justify-content: center; gap: clamp(26px, 4vw, 44px); } .gift-room-public-profile__header { display: flex; align-items: center; gap: 16px; max-width: 52rem; } .gift-room-public-profile__avatar { width: 62px; height: 62px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-forest); color: var(--color-cream); font-family: var(--font-display); font-size: 1.4rem; line-height: 1; } .gift-room-public-profile__avatar--action { padding: 0; border: 0; appearance: none; -webkit-appearance: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; } .gift-room-public-profile__avatar--action:hover, .gift-room-public-profile__avatar--action:focus-visible { outline: 0; transform: translateY(-1px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-forest) 24%, transparent); } .gift-room-public-profile__avatar.jp-profile-avatar-art { background: transparent !important; box-shadow: none; padding: 0; } .gift-room-public-profile__avatar.is-image { background: var(--color-chip-bg); color: transparent; } .gift-room-public-profile__avatar-image { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; object-position: center center; } .gift-room-public-profile__title { margin: 0; max-width: 100%; color: var(--color-ink); font-family: var(--font-heading); font-size: clamp(1.24rem, 1.55vw, 1.58rem); font-weight: 900; line-height: 0.98; overflow-wrap: anywhere; word-break: break-word; } .gift-room-public-profile__copy { min-width: 0; max-width: min(100%, 30rem); margin: 5px 0 0; color: var(--color-ink-soft); font-family: var(--font-body) !important; font-size: 0.86rem; line-height: 1.28; } .gift-room-public-profile--full { width: 100%; max-width: none; justify-content: flex-start; gap: clamp(12px, 1.8vw, 22px); padding-top: 50px; } .gift-room-public-profile__hero { min-width: 0; width: 100%; max-width: var(--jp-page-shell-max); margin: 0 auto; padding-left: min(100px, 8vw); display: grid; grid-template-columns: minmax(0, 30rem); gap: 0; align-items: start; justify-content: start; box-sizing: border-box; } .gift-room-public-profile--full .gift-room-public-profile__copy { width: min(100%, 30rem); margin-top: 0; } .gift-room-public-profile__identity { min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; } .gift-room-public-profile__identity > * { min-width: 0; } .gift-room-public-profile--full .gift-room-public-profile__avatar { width: 76px; height: 76px; overflow: hidden; border-radius: 50%; background: var(--color-chip-bg); font-size: 1.52rem; } .gift-room-public-profile__avatar.jp-profile-avatar-art { overflow: visible; border-radius: 0; background: transparent !important; } .gift-room-public-profile__avatar.jp-profile-avatar-art > img[data-jp-profile-avatar-img] { object-fit: contain; border-radius: 0; } .gift-room-public-profile__handle, .gift-room-public-profile__stats, .gift-room-public-profile__bio, .gift-room-public-profile__site { font-family: var(--font-body) !important; } .gift-room-public-profile__handle { max-width: 100%; margin: 3px 0 0; color: var(--color-ink-soft); font-size: clamp(0.78rem, 0.9vw, 0.88rem); font-weight: 560; line-height: 1.08; overflow-wrap: anywhere; word-break: break-word; } .gift-room-public-profile__stats { min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 0; color: var(--color-ink); font-size: clamp(0.78rem, 0.9vw, 0.88rem); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; word-break: break-word; } .gift-room-public-profile__stats > span:nth-of-type(2), .gift-room-public-profile__stats > span:last-child { display: none; } .gift-room-public-profile__stats button { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-ink); font: inherit; font-weight: 900; cursor: pointer; text-decoration: none; } .gift-room-public-profile__stats button:hover, .gift-room-public-profile__stats button:focus-visible { color: var(--color-forest); text-decoration-color: currentColor; outline: 0; } .gift-room-public-profile__bio { min-width: 0; max-width: 25rem; margin: 0; color: var(--color-ink-soft); font-size: clamp(0.8rem, 0.92vw, 0.9rem); font-weight: 520; line-height: 1.26; overflow-wrap: anywhere; word-break: break-word; } .gift-room-public-profile__bio-row { min-width: 0; width: fit-content; max-width: 100%; display: inline-grid; grid-template-columns: minmax(0, auto) 32px; gap: 10px; align-items: center; margin-top: 8px; } .gift-room-public-profile__bio-edit { --gift-room-public-profile-button-hover-scale: 1.04; position: relative; z-index: 0; width: 32px; height: 32px; padding: 0; border: 0; display: grid; place-items: center; border-radius: 50%; background: transparent; color: var(--intent-text-primary, var(--color-ink)); cursor: pointer; font: inherit; text-decoration: none; -webkit-appearance: none; appearance: none; transition: color var(--duration-fast) var(--ease-standard); } .gift-room-public-profile__bio-edit::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: transparent; box-shadow: none; transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .gift-room-public-profile__bio-edit .gift-room-icon { width: 13px; height: 13px; background: currentColor; position: relative; z-index: 1; } .gift-room-public-profile__bio-edit:hover, .gift-room-public-profile__bio-edit:focus-visible { color: var(--intent-text-primary, var(--color-ink)); outline: 0; } .gift-room-public-profile__bio-edit:hover::before, .gift-room-public-profile__bio-edit:focus-visible::before { background: var(--filter-pill-bg); box-shadow: none; transform: scale(var(--gift-room-public-profile-button-hover-scale)); } .gift-room-public-profile__site { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--color-ink); font-size: clamp(0.8rem, 0.92vw, 0.9rem); font-weight: 900; text-decoration: none; white-space: normal; } .gift-room-public-profile__site > span:last-child { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .gift-room-public-profile__site.is-empty { color: color-mix(in srgb, var(--color-ink-soft) 78%, var(--popup-bg)); font-size: clamp(0.76rem, 0.86vw, 0.84rem); font-weight: 760; } .gift-room-public-profile__site.is-empty .gift-room-public-profile__site-icon { opacity: 0.72; } .gift-room-public-profile__site.is-empty > span:last-child { border-bottom: 1px dashed color-mix(in srgb, currentColor 46%, transparent); line-height: 1.08; } .gift-room-public-profile__site-icon-wrap { position: relative; width: 18px; height: 18px; flex: 0 0 18px; display: inline-grid; place-items: center; overflow: visible; } .gift-room-public-profile__site-icon { width: 15px; height: 15px; display: block; object-fit: contain; } .gift-room-public-profile__site-icon-wrap.is-verified::after { content: attr(aria-label); position: absolute; left: 50%; bottom: calc(100% + 13px); z-index: 4; width: max-content; min-width: 166px; max-width: min(260px, calc(100vw - 32px)); min-height: 0; display: inline-flex; align-items: center; padding: 12px 14px; border: 0; border-radius: 8px; background: var(--popup-bg); color: var(--color-ink); box-shadow: 0 12px 32px color-mix(in srgb, var(--color-ink) 22%, transparent); font-family: var(--font-body); font-size: 13.5px; font-weight: 800; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -4px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease; } .gift-room-public-profile__site-icon-wrap.is-verified::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 5; width: 12px; height: 12px; border-radius: 2px; background: var(--popup-bg); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -4px) rotate(45deg); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease; } .gift-room-public-profile__site-icon-wrap.is-verified:hover::after, .gift-room-public-profile__site-icon-wrap.is-verified:hover::before { opacity: 1; visibility: visible; } .gift-room-public-profile__site-icon-wrap.is-verified:hover::after { transform: translate(-50%, 0); } .gift-room-public-profile__site-icon-wrap.is-verified:hover::before { transform: translate(-50%, 0) rotate(45deg); } .gift-room-public-profile__site:hover, .gift-room-public-profile__site:focus-visible { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; } .gift-room-public-profile__site.is-empty:hover, .gift-room-public-profile__site.is-empty:focus-visible { color: var(--color-forest); text-decoration: none; } .gift-room-public-profile__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .gift-room-public-profile__follow { position: relative; isolation: isolate; overflow: visible; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 19px; border: 0; border-radius: 999px; background: transparent; color: var(--popup-bg); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 850; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color 0.18s ease, transform 0.18s ease; } .gift-room-public-profile__share, .gift-room-public-profile__edit { --gift-room-public-profile-action-bg: var(--filter-pill-bg); --gift-room-public-profile-button-hover-scale: 1.04; position: relative; z-index: 0; isolation: isolate; overflow: visible; min-width: 120px; min-height: 44px; height: 44px; gap: 8px; padding: 0 16px; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: 0.82rem; font-weight: 650; line-height: 1; } .gift-room-public-profile__share { min-width: 136px; } .gift-room-public-profile__action-icon { width: 12px; height: 12px; flex: 0 0 auto; background: currentColor; } .gift-room-public-profile__follow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-forest); transition: background-color 0.18s ease, transform 0.18s ease; } .gift-room-public-profile__share::before, .gift-room-public-profile__edit::before { content: ""; position: absolute; display: block; inset: 5px 2px; z-index: -1; border-radius: inherit; background: var(--gift-room-public-profile-action-bg); box-shadow: none; transform: scale(1); transform-origin: center; transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .gift-room-public-profile__share > *, .gift-room-public-profile__edit > * { position: relative; z-index: 1; } .gift-room-public-profile__follow.is-following::before { background: var(--color-ink); } .gift-room-public-profile__edit { position: relative; z-index: 0; isolation: isolate; overflow: visible; min-width: 120px; min-height: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: 0.82rem; font-weight: 650; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color 0.18s ease, transform 0.18s ease; } .gift-room-public-profile__follow:hover, .gift-room-public-profile__follow:focus-visible { background: transparent; color: var(--popup-bg); outline: 0; transform: none; } .gift-room-public-profile__follow:hover::before, .gift-room-public-profile__follow:focus-visible::before { background: var(--color-forest-dark, var(--color-forest)); transform: scale(1.018); } .gift-room-public-profile__follow.is-following:hover::before, .gift-room-public-profile__follow.is-following:focus-visible::before { background: color-mix(in srgb, var(--color-ink) 92%, var(--color-cream) 8%); } .gift-room-public-profile__blog { gap: 8px; color: var(--color-ink); } .gift-room-public-profile__blog::before { background: var(--filter-pill-bg); } .gift-room-public-profile__blog:hover, .gift-room-public-profile__blog:focus-visible { background: transparent; color: var(--color-ink); } .gift-room-public-profile__blog:hover::before, .gift-room-public-profile__blog:focus-visible::before { background: var(--filter-pill-bg); } .gift-room-public-profile__share:hover, .gift-room-public-profile__share:focus-visible { background: transparent; color: var(--color-ink); outline: 0; } .gift-room-public-profile__share:hover::before, .gift-room-public-profile__share:focus-visible::before { background: var(--gift-room-public-profile-action-bg); box-shadow: none; transform: scale(var(--gift-room-public-profile-button-hover-scale)); } .gift-room-public-profile__edit:hover, .gift-room-public-profile__edit:focus-visible { background: transparent; color: var(--color-ink); outline: 0; transform: none; } .gift-room-public-profile__edit:hover::before, .gift-room-public-profile__edit:focus-visible::before { background: var(--gift-room-public-profile-action-bg); box-shadow: none; transform: scale(var(--gift-room-public-profile-button-hover-scale)); } .gift-room-public-profile__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 8; width: 210px; padding: 8px; border-radius: 16px; background: var(--popup-bg); box-shadow: var(--popup-shadow); } .gift-room-public-profile__menu[hidden] { display: none; } .gift-room-public-profile__menu button { width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 850; text-align: left; cursor: pointer; } .gift-room-public-profile__menu button:hover, .gift-room-public-profile__menu button:focus-visible { background: var(--color-sand); outline: 0; } .gift-room-public-profile__cover { position: relative; justify-self: end; width: min(100%, 640px); aspect-ratio: 16 / 8.1; min-height: 0; margin: 0; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--popup-bg) 80%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--color-forest) 16%, var(--popup-bg)), color-mix(in srgb, var(--color-sand) 86%, var(--popup-bg))); box-shadow: inset 0 0 0 1px var(--color-line); } .gift-room-public-profile--full .gift-room-public-profile__cover { display: block; } @media (min-width: 960px) { .gift-room-public-profile__hero { padding-inline: clamp(82px, 9vw, 130px); grid-template-columns: minmax(280px, 30rem) minmax(360px, 640px); column-gap: clamp(44px, 6vw, 110px); align-items: start; justify-content: space-between; } .gift-room-public-profile__cover { width: 100%; } } .gift-room-public-profile__cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gift-room-public-profile__cover::after { content: none; } .gift-room-public-profile__cover-media-zone { position: absolute; inset: 0; background: radial-gradient(circle at 22% 22%, color-mix(in srgb, var(--popup-bg) 82%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--color-forest) 16%, var(--popup-bg)), color-mix(in srgb, var(--color-sand) 88%, var(--popup-bg))); } .gift-room-public-profile__cover.has-image .gift-room-public-profile__cover-media-zone { display: none; } .gift-room-public-profile__cover-actions { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; } .gift-room-public-profile__cover-action { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--popup-bg) 86%, transparent); color: var(--color-ink); box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 10%, transparent); cursor: pointer; transition: background-color 0.16s ease, box-shadow 0.16s ease; } .gift-room-public-profile__cover-action img { width: 17px; height: 17px; display: block; object-fit: contain; } .gift-room-public-profile__cover-action:hover, .gift-room-public-profile__cover-action:focus-visible { background: var(--popup-bg); outline: 0; box-shadow: 0 10px 22px color-mix(in srgb, var(--color-ink) 14%, transparent); } .gift-room-public-profile.is-guest-profile .gift-room-public-profile__cover-action, .gift-room-public-profile.is-guest-profile .gift-room-public-profile__cover-action:hover, .gift-room-public-profile.is-guest-profile .gift-room-public-profile__cover-action:focus-visible { box-shadow: none; } .gift-room-public-profile__tabs { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 2px; } .gift-room-public-profile__tab { position: relative; display: inline-flex; align-items: center; height: 44px; min-height: 44px; padding: 11px 14px 13px; border: 0; border-radius: 0; background: transparent; color: var(--color-ink-soft); font-family: inherit; font-size: 0.94rem; font-weight: 650; line-height: 1; cursor: pointer; transition: color .2s; } .gift-room-public-profile__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 999px 999px 0 0; background: transparent; transition: background .2s; } .gift-room-public-profile__tab.is-active { color: var(--color-ink); } .gift-room-public-profile__tab.is-active::after { background: var(--color-ink); } .gift-room-public-profile__tab:hover, .gift-room-public-profile__tab:focus-visible { color: var(--color-ink); outline: 0; } .gift-room-public-profile__panel { width: min(var(--jp-page-shell-max), calc(100vw - 68px)); max-width: var(--jp-page-shell-max); margin: 0 auto; } .gift-room-public-profile__panel[hidden] { display: none; } .gift-room-public-profile__panel--my-ideas { padding-top: 2px; } .gift-room-public-profile__panel--my-ideas .gr-my-ideas-section__head { margin-bottom: 16px; } .gift-room-public-profile__panel--my-ideas .gr-my-ideas-masonry { width: 100%; } .gift-room-public-profile__rooms-grid { width: 100%; } .gift-room-public-profile__rooms-grid--created { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 22px; align-items: stretch; padding: 2px 0 10px; } .gr-profile-room-card { width: 100%; max-width: none; min-width: 0; } .gr-profile-room-card .gift-room-card__title a { color: inherit; text-decoration: none; } .gr-profile-room-card .gift-room-card__title a:hover, .gr-profile-room-card .gift-room-card__title a:focus-visible { color: var(--color-forest); outline: 0; } .gr-profile-room-card__cover-link { position: absolute; inset: 0; z-index: 2; display: block; } .gr-profile-room-card__privacy.gift-room-card__privacy-status { right: var(--gr-card-action-edge); pointer-events: none; cursor: default; } .gr-profile-room-card:hover .gr-profile-room-card__privacy, .gr-profile-room-card:focus-within .gr-profile-room-card__privacy { right: var(--gr-card-action-edge); } .gr-profile-room-card .gift-room-card__countdown, .gr-profile-room-card .gift-room-card__privacy-status { z-index: 4; } .gr-profile-room-card .gift-room-card__body { min-height: 0; } .gift-room-public-profile__rooms-grid--saved { padding-top: 2px; } @media (max-width: 1120px) { .gift-room-public-profile__rooms-grid--created { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 860px) { .gift-room-public-profile__rooms-grid--created { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .gift-room-public-profile__panel { width: min(100% - 24px, 760px); } .gift-room-public-profile__tabs { gap: 4px; } .gift-room-public-profile__tab { min-width: 0; padding-inline: 12px; } .gift-room-public-profile__rooms-grid--created { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; } .gift-room-public-profile__rooms-grid--saved .gr-pick-card__stats { flex-wrap: wrap; gap: 4px; } .gift-room-public-profile__rooms-grid--saved .gr-pick-card__stat { min-height: 22px; padding: 4px 5px; font-size: 0.66rem; } .gift-room-public-profile__rooms-grid--saved .gr-pick-card__stat-icon { width: 12px; height: 12px; flex-basis: 12px; } } @media (max-width: 380px) { .gift-room-public-profile__rooms-grid--created { grid-template-columns: 1fr; } } .gift-room-public-profile__empty { min-height: 180px; display: grid; place-items: center; border-radius: 18px; background: var(--color-sand); color: var(--color-ink-soft); text-align: center; font-size: 0.95rem; font-weight: 650; } .gift-room-access-related-card__save { position: absolute; right: 8px; top: 8px; z-index: 3; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--popup-bg); color: var(--color-forest); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 850; cursor: pointer; box-shadow: var(--shadow-card-soft); } .gift-room-access-related-card__save.is-saved { background: var(--color-forest); color: var(--popup-bg); } .gift-room-access-related-card__lock { position: absolute; right: 8px; top: 8px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--popup-bg); color: var(--color-ink); box-shadow: var(--shadow-card-soft); } .gift-room-access-related-card__lock::before { content: ""; width: 14px; height: 14px; display: block; background: var(--color-ink); mask: url("/assets/header-icons/collection-visibility-lock.svg") center / contain no-repeat; } @media (min-width: 900px) { .gift-room-access-state { width: min(100% - 96px, 1120px); min-height: min(68vh, 620px); padding: clamp(42px, 5vw, 72px) 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr); grid-auto-rows: min-content; column-gap: clamp(46px, 6vw, 92px); align-content: center; align-items: center; justify-content: center; text-align: left; } .gift-room-access-state__art { grid-column: 2; grid-row: 1 / 8; width: min(100%, 480px); margin: 0; justify-self: center; } .gift-room-access-state__meta, .gift-room-access-state__eyebrow, .gift-room-access-state__room-name, .gift-room-access-state__title, .gift-room-access-state__copy, .gift-room-access-state__actions { grid-column: 1; } .gift-room-access-state__meta { margin: 0 0 18px; justify-self: start; } .gift-room-access-state__eyebrow { margin-top: 0; } .gift-room-access-state__room-name { margin-right: 0; margin-left: 0; } .gift-room-access-state__title { max-width: 34rem; } .gift-room-access-state__copy { margin-right: 0; margin-left: 0; } .gift-room-access-state__actions { justify-content: flex-start; } } @media (max-width: 700px) { .gift-room-access-state { width: min(100% - 24px, 760px); min-height: 0; padding-block: 28px 40px; } .gift-room-access-state__art { width: min(100%, 300px); } .gift-room-access-state__meta { max-width: 100%; } .gift-room-access-state__owner-copy strong { max-width: 14rem; } .gift-room-access-state__title { font-size: clamp(1.85rem, 8vw, 2.45rem); } .gift-room-access-state__actions, .gift-room-access-state__primary, .gift-room-access-state__secondary { width: 100%; } .gift-room-access-related, .gift-room-public-preview, .gift-room-public-profile { width: min(100% - 24px, 760px); } .gift-room-access-related { margin-bottom: 54px; } .gift-room-access-related__header, .gift-room-public-preview { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .gift-room-access-related__grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .gift-room-access-related-card { flex: 0 0 min(72vw, 260px); scroll-snap-align: start; } .gift-room-public-preview { min-height: 0; padding-block: 28px 34px; } .gift-room-public-preview__cover { order: -1; } .gift-room-access-request { grid-template-columns: auto minmax(0, 1fr); } .gift-room-access-request__actions { grid-column: 1 / -1; width: 100%; } .gift-room-access-request__actions button { flex: 1 1 0; } .gift-room-public-profile { min-height: 0; padding-block: 32px 56px; } .gift-room-public-profile__header { align-items: flex-start; } .gift-room-public-profile__avatar { width: 50px; height: 50px; } .gift-room-public-profile__hero, .gift-room-public-profile__identity { display: flex; flex-direction: column; align-items: stretch; } .gift-room-public-profile__hero { padding-left: 0; } .gift-room-public-profile--full .gift-room-public-profile__avatar { width: 72px; height: 72px; } .gift-room-public-profile__cover { order: -1; width: 100%; aspect-ratio: 16 / 8.4; } .gift-room-public-profile__actions, .gift-room-public-profile__follow, .gift-room-public-profile__edit { width: 100%; } .gift-room-public-profile__follow, .gift-room-public-profile__edit { flex: 1 1 100%; } .gift-room-public-profile.is-guest-profile .gift-room-public-profile__actions { flex-wrap: nowrap; gap: 8px; } .gift-room-public-profile.is-guest-profile .gift-room-public-profile__follow { width: auto; min-width: 0; flex: 1 1 0; } .gift-room-public-profile__menu { right: 0; left: auto; width: min(220px, 100%); } .gift-room-social-modal { width: 100%; max-height: none; height: calc(100vh - var(--gift-room-social-modal-mobile-offset, calc(env(safe-area-inset-top, 0px) + clamp(84px, 13dvh, 128px)))); height: calc(100dvh - var(--gift-room-social-modal-mobile-offset, calc(env(safe-area-inset-top, 0px) + clamp(84px, 13dvh, 128px)))); max-width: 100%; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .gift-room-social-modal__close { display: none; } .gift-room-social-modal__sheet-grip { display: flex; flex: 0 0 var(--popup-sheet-grip-height, 44px); min-height: var(--popup-sheet-grip-height, 44px); align-items: center; justify-content: center; width: 100%; background: var(--popup-bg); cursor: grab; touch-action: none; user-select: none; } .gift-room-social-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .gift-room-social-overlay.is-open .gift-room-social-modal { transform: translateY(0); } .gift-room-social-overlay.is-closing .gift-room-social-modal { transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); } .gift-room-social-overlay.is-sheet-dragging .gift-room-social-modal { transform: translateY(var(--gift-room-social-sheet-drag-y, 0px)); transition: none; will-change: transform; } .gift-room-social-overlay.is-sheet-settling .gift-room-social-modal, .gift-room-social-overlay.is-sheet-closing .gift-room-social-modal { transform: translateY(var(--gift-room-social-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .gift-room-social-row { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "avatar copy action"; align-items: center; column-gap: 12px; min-height: 78px; padding: 10px 0; border-radius: 0; } .gift-room-social-row__avatar { grid-area: avatar; width: 52px; height: 52px; align-self: start; } .gift-room-social-row__copy { grid-area: copy; } .gift-room-social-row__button { grid-area: action; justify-self: end; min-width: 92px; min-height: 38px; padding-inline: 15px; } } .gr-ideas-grid { --search-card-scale: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: start; justify-items: stretch; gap: 16px; } .page--gift-room .gr-ideas-grid .cat-card { --cat-card-scale: var(--search-card-scale, 1); cursor: pointer; } .page--gift-room .gr-ideas-grid .gr-idea-product-card { background: #f8f1eb; } .gr-ideas-grid .gr-lobby-empty { grid-column: 1 / -1; } .gr-ideas-grid .gr-lobby-empty.is-ideas-empty { min-height: 150px; } .gr-ideas-section-title { grid-column: 1 / -1; margin: 4px 0 -4px; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.18rem, 1rem + 0.45vw, 1.55rem); font-weight: 650; line-height: 1.1; } .gr-my-ideas-section { grid-column: 1 / -1; display: block; min-width: 0; margin: 0; } .gr-my-ideas-section + .gr-my-ideas-section, .gr-my-ideas-section + .gr-board-suggestions, .gr-ideas-pager + .gr-my-ideas-section { margin-top: 34px; } .gr-board-suggestions + .gr-my-ideas-section { margin-top: 12px; } .gr-my-ideas-section__head { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding-right: 0; box-sizing: border-box; max-width: 100%; overflow: visible; } .gr-my-ideas-section__head .gr-my-ideas-section__title { margin: 0; } .gr-my-ideas-sort { position: relative; flex: 0 0 auto; margin: -4px; padding: 4px; } .gr-my-ideas-sort__button { --gr-my-ideas-sort-bg: var(--sort-control-bg, var(--filter-pill-bg)); appearance: none; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; min-width: 0; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: color 0.18s ease; } .gr-my-ideas-sort__button::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--gr-my-ideas-sort-bg); transform: translateZ(0) scale(1); transform-origin: center; will-change: transform; transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } .gr-my-ideas-sort:hover .gr-my-ideas-sort__button::before, .gr-my-ideas-sort:focus-within .gr-my-ideas-sort__button::before, .gr-my-ideas-sort__button:hover::before, .gr-my-ideas-sort__button:focus-visible::before, .gr-my-ideas-sort__button[aria-expanded="true"]::before { transform: translateZ(0) scale(var(--hover-grow-scale, 1.035)); } .gr-my-ideas-sort__button:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 24%, transparent); outline-offset: 2px; } .gr-my-ideas-sort__icon { width: 18px; height: 18px; display: block; flex: 0 0 18px; background: currentColor; -webkit-mask: url("/assets/gift-room-icons/lobby-filters.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/lobby-filters.svg") center / contain no-repeat; } .gr-my-ideas-sort__button-label { display: block; min-width: 0; } .gr-my-ideas-sort__menu.gr-lobby-filter-menu { top: calc(100% + 8px); right: 0; left: auto; --gr-lobby-filter-menu-width: min(292px, calc(100vw - 32px)); } .gr-my-ideas-masonry { min-width: 0; } .gr-my-ideas-set + .gr-my-ideas-set { margin-top: 0; } .gr-my-idea-card { cursor: pointer; } .gr-my-ideas-masonry > .gr-my-idea-card { min-width: 0; } .gr-my-idea-card .favorites-discovery-card__actions { justify-content: flex-end; z-index: 8; } .gr-my-idea-card .gr-my-idea-card__save { min-width: 112px; height: 40px; min-height: 40px; padding: 0 18px; align-items: center; justify-content: center; font-size: 13px; line-height: 1; } .gr-my-idea-card .gr-my-idea-card__save .favorites-discovery-card__button-label, .gr-my-idea-card .gr-my-idea-card__save .cat-card__hover-save-label { line-height: 1; } .gr-my-ideas-collections-grid, .gr-my-ideas-searches-track { min-width: 0; } .gr-my-ideas-search-chip .favorites-search-chip__label { display: -webkit-box; max-width: 132px; min-height: 34px; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; word-break: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .gr-board-suggestions { grid-column: 1 / -1; display: block; margin: 0 0 8px; } .gr-board-suggestions__title { margin: 0 0 14px; color: var(--color-ink); font-family: var(--font-heading); font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.28rem); font-weight: 750; line-height: 1.1; } .gr-my-ideas-section__title { margin: 0 0 14px; color: var(--color-ink); font-family: var(--font-heading); font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.28rem); font-weight: 750; line-height: 1.1; } .gr-board-suggestions__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .gr-board-suggestion { position: relative; min-width: 0; } .gr-board-suggestion__cover { position: relative; min-width: 0; } .gr-board-suggestion__media { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); grid-template-rows: repeat(2, minmax(0, 1fr)); width: 100%; aspect-ratio: 1.6 / 1; border-radius: 10px; background: transparent; color: var(--color-ink); box-shadow: none; overflow: hidden; } .gr-board-suggestion__media::after { content: none; } .gr-board-suggestion__media-slot { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; } .gr-board-suggestion__media-slot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .gr-board-suggestion__media-slot--0 { grid-row: 1 / 3; } .gr-board-suggestion__media-slot--1, .gr-board-suggestion__media-slot--2 { border-left: 1px solid color-mix(in srgb, var(--color-cream) 74%, transparent); } .gr-board-suggestion__media-slot--2 { border-top: 1px solid color-mix(in srgb, var(--color-cream) 74%, transparent); } .gr-board-suggestion__media-art { width: 100%; height: 100%; display: block; object-fit: cover; } .gr-board-draft-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; } .gr-board-suggestion__fallback, .gr-board-draft-card__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--color-ink) 34%, transparent); } .gr-board-suggestion__fallback .gift-room-item__icon { width: 48px; height: 48px; } .gr-board-suggestion__create { position: absolute; z-index: 3; left: 50%; top: 50%; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.92rem; font-weight: 750; line-height: 1; transform: translate(-50%, -50%); isolation: isolate; box-shadow: none; cursor: pointer; transition: color 0.18s ease; } .gr-board-suggestion__create::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--popup-bg); box-shadow: var(--shadow-soft); transform: translateZ(0) scale(1); transform-origin: center; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gr-board-suggestion__create:hover, .gr-board-suggestion__create:focus-visible { outline: 0; } .gr-board-suggestion__create:hover::before, .gr-board-suggestion__create:focus-visible::before { transform: translateZ(0) scale(1.04); box-shadow: var(--shadow-card-hover); } .gr-board-suggestion__title { margin: 10px 0 2px; color: var(--color-ink); font-family: var(--font-heading); font-size: clamp(0.92rem, 0.86rem + 0.18vw, 1.08rem); font-weight: 750; line-height: 1.22; padding-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gr-board-suggestion__count { margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; line-height: 1.2; } .gr-rooms-discovery { grid-column: 1 / -1; display: block; min-width: 0; margin: 0 0 28px; } .gr-rooms-discovery[hidden] { display: none !important; } .gr-rooms-discovery .gr-board-suggestions { margin-bottom: 30px; } .gr-rooms-unsorted { margin-top: 0; } .gr-rooms-unsorted__head { align-items: center; } .gr-rooms-unsorted__grid { min-width: 0; } .gr-rooms-unsorted__empty { display: grid; place-items: center; min-height: 180px; padding: 28px; border-radius: 24px; background: var(--popup-bg); color: var(--color-ink); text-align: center; } .gr-rooms-unsorted__empty h3, .gr-rooms-unsorted__empty p { margin: 0; } .gr-rooms-unsorted__empty h3 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 750; } .gr-rooms-unsorted__empty p { margin-top: 6px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.92rem; font-weight: 500; } .gr-organize-modal { position: fixed; inset: 0; z-index: 12640; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 4vw, 48px); background: color-mix(in srgb, var(--color-ink) 34%, transparent); box-sizing: border-box; } .gr-organize-modal__dialog { position: relative; width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 700px); display: flex; flex-direction: column; overflow: visible; border-radius: 32px; background: var(--popup-bg); color: var(--color-ink); box-shadow: var(--popup-shadow); } .gr-organize-modal__sheet-grip { display: none; } .gr-organize-modal__head { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; align-items: center; gap: 12px; padding: 22px 26px 12px; border-radius: 32px 32px 0 0; background: var(--popup-bg); } .gr-organize-modal__head h2 { margin: 0; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); text-align: center; } .gr-organize-modal__back, .gr-organize-modal__back-spacer { width: 48px; height: 48px; } .gr-organize-modal__back { appearance: none; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; } .gr-organize-modal__back img { width: 22px; height: 22px; display: block; transition: transform 0.18s ease; } .gr-organize-modal__back:hover img, .gr-organize-modal__back:focus-visible img { transform: translateX(-3px); } .gr-organize-modal__back:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 24%, transparent); outline-offset: 2px; } .gr-organize-modal__close.header-auth-close { position: absolute; top: 0; left: calc(100% + 10px); right: auto; width: 78px; height: 55px; min-width: 78px; min-height: 55px; margin: 0; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); } .gr-organize-modal__close .header-auth-close-icon { position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; display: block; transform: translate(-50%, -50%); pointer-events: none; } .gr-organize-modal__close.header-auth-close:hover, .gr-organize-modal__close.header-auth-close:focus-visible { background: var(--sort-control-bg); filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--color-ink) 12%, transparent)); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; } .gr-organize-modal__body { min-height: 0; overflow: auto; padding: 12px 28px 0; overscroll-behavior: contain; } .gr-organize-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 20px 18px; padding: 8px 6px 24px; } .gr-organize-card { appearance: none; display: block; min-width: 0; padding: 0; border: 0; border-radius: 18px; background: transparent; cursor: pointer; text-align: left; } .gr-organize-card__media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 18px; background: var(--popup-bg-muted); box-shadow: none; } .gr-organize-card__media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-ink) 0%, transparent); transition: background-color 0.18s ease; } .gr-organize-card:hover .gr-organize-card__media::after, .gr-organize-card:focus-visible .gr-organize-card__media::after { background: color-mix(in srgb, var(--color-ink) 10%, transparent); } .gr-organize-card:focus-visible { outline: 0; } .gr-organize-card.is-selected .gr-organize-card__media { outline: 3px solid var(--color-ink); outline-offset: 3px; } .gr-organize-card.is-selected .gr-organize-card__media::after { background: color-mix(in srgb, var(--color-ink) 20%, transparent); } .gr-organize-card__check { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--color-ink); color: var(--popup-bg); opacity: 0; transform: scale(0.9); transition: opacity 0.16s ease, transform 0.16s ease; } .gr-organize-card__check::after { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; } .gr-organize-card.is-selected .gr-organize-card__check { opacity: 1; transform: scale(1); } .gr-organize-modal__footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 86px; padding: 18px 28px 22px; border-top: 1px solid var(--color-line); border-radius: 0 0 32px 32px; background: var(--popup-bg); overflow: hidden; } .gr-organize-modal__cancel { appearance: none; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 1.02rem; font-weight: 750; line-height: 1; cursor: pointer; min-width: 142px; min-height: 56px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; transition: box-shadow .18s ease, background-color .18s ease; } .gr-organize-modal__cancel:hover, .gr-organize-modal__cancel:focus-visible { outline: 0; background: var(--popup-bg); box-shadow: var(--shadow-card-hover); } .gr-organize-modal__next { min-width: 142px; min-height: 56px; font-size: 1.02rem; font-weight: 750; justify-content: center; } .gr-organize-modal__next[disabled] { background: var(--control-disabled-bg); color: var(--control-disabled-text); pointer-events: none; opacity: 1; } .gr-organize-modal__next[disabled]::before { background: var(--control-disabled-bg); transform: none; } .gr-organize-modal__next[disabled] .gift-room-cta__arrow { display: none; } .gr-organize-room-list { display: flex; flex-direction: column; gap: 4px; padding: 0 0 18px; } .gr-organize-modal__section-label { margin: 10px 0 5px; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; line-height: 1.2; } .gr-organize-room { appearance: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 5px 8px; border: 0; border-radius: 16px; background: transparent; color: var(--color-ink); cursor: pointer; text-align: left; transition: background-color 0.18s ease; } .gr-organize-room:hover, .gr-organize-room:focus-visible, .gr-organize-room.is-selected { background: var(--sort-option-hover); outline: 0; } .gr-organize-room.is-selected .gr-organize-room__thumb { outline: 2px solid var(--color-forest); outline-offset: 2px; } .gr-organize-room__thumb { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: var(--popup-bg-muted); color: var(--color-forest); font-family: var(--font-heading); font-size: 1rem; font-weight: 750; } .gr-organize-room__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; } .gr-organize-room__body { display: grid; gap: 3px; min-width: 0; } .gr-organize-room__name { min-width: 0; overflow: hidden; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.92rem; font-weight: 750; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .gr-organize-room__hint { color: var(--color-forest); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 650; line-height: 1.1; } .gr-organize-room__lock { justify-self: center; } .gr-organize-modal__empty { display: grid; place-items: center; min-height: 220px; padding: 30px; text-align: center; } .gr-organize-modal__empty h3, .gr-organize-modal__empty p { margin: 0; } .gr-organize-modal__empty h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 750; } .gr-organize-modal__empty p { margin-top: 8px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 500; } body.is-gift-room-organize-open { overflow: hidden; } @media (max-width: 760px) { .gr-rooms-discovery { margin-bottom: 22px; } .gr-rooms-discovery .gr-board-suggestions { margin-bottom: 24px; } .gr-organize-modal { align-items: flex-end; padding: 0; background: color-mix(in srgb, var(--color-ink) 40%, transparent); } .gr-organize-modal__dialog { width: 100%; max-width: none; max-height: 88vh; max-height: 88dvh; overflow: hidden; border-radius: var(--popup-sheet-radius, 22px 22px 0 0); transform: translate3d(0, var(--gr-organize-drag-y, 0px), 0); touch-action: pan-y; } .gr-organize-modal__dialog.is-sheet-dragging { transition: none; } .gr-organize-modal__dialog.is-sheet-settling { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .gr-organize-modal__sheet-grip { appearance: none; width: 100%; min-height: var(--popup-sheet-grip-height, 44px); flex: 0 0 var(--popup-sheet-grip-height, 44px); display: flex; align-items: center; justify-content: center; border: 0; background: var(--popup-bg); color: var(--color-ink-soft); cursor: grab; touch-action: none; } .gr-organize-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .gr-organize-modal__head { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; padding: 0 16px 12px; border-radius: var(--popup-sheet-radius, 22px 22px 0 0); } .gr-organize-modal__head h2 { font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); } .gr-organize-modal__back, .gr-organize-modal__back-spacer, .gr-organize-modal__close.header-auth-close { position: relative; inset: auto; width: 48px; height: 48px; min-width: 48px; min-height: 48px; box-shadow: none; } .gr-organize-modal__body { padding: 10px 16px 0; } .gr-organize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; padding: 8px 2px 24px; } .gr-organize-modal__footer { justify-content: space-between; gap: 12px; min-height: 78px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 0; } .gr-organize-modal__cancel { min-width: 128px; min-height: 52px; font-size: 0.96rem; } .gr-organize-modal__next { width: auto; min-width: 128px; min-height: 52px; flex: 0 0 auto; font-size: 0.96rem; } .gr-organize-room { min-height: 54px; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 10px; padding: 5px 8px; } .gr-organize-room__thumb { width: 44px; height: 44px; } } body.page--gift-room.is-gift-room-board-draft .gr-lobby-head { display: none; } body.page--gift-room.is-gift-room-board-draft .gift-room-shell { padding-top: 0; } .gr-board-draft { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 18px; min-height: calc(100vh - 128px); padding-top: 28px; } .gr-board-draft__top { display: grid; grid-template-columns: minmax(132px, 1fr) minmax(0, auto) minmax(220px, 1fr); gap: 18px; align-items: center; } .gr-board-draft__back, .gr-board-draft__clear, .gr-board-draft__create { border: 0; border-radius: 999px; font-family: var(--font-heading); font-weight: 750; cursor: pointer; } .gr-board-draft__back { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--color-ink); transition: color 0.18s ease; } .gr-board-draft__back:hover, .gr-board-draft__back:focus-visible { background: transparent; } .gr-board-draft__back img { width: 22px; height: 14px; display: block; transition: transform 0.18s ease; } .gr-board-draft__back:hover img, .gr-board-draft__back:focus-visible img { transform: translateX(-4px); } .gr-board-draft__heading { text-align: center; } .gr-board-draft__heading h1 { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 32px; font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .gr-board-draft__heading p { max-width: 420px; margin: 6px auto 0; color: var(--color-ink-soft); font-family: var(--font-body); font-size: clamp(0.9rem, 0.82rem + 0.2vw, 1.02rem); line-height: 1.25; } .gr-board-draft__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .gr-board-draft__edit { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-inline: -4px; border: 0; border-radius: 999px; background: var(--color-page-bg); color: var(--color-ink); cursor: pointer; box-shadow: none; transition: background-color 0.18s ease; } .gr-board-draft__edit:hover, .gr-board-draft__edit:focus-visible { background: var(--filter-pill-bg); box-shadow: none; } .gr-board-draft__edit img { width: 16px; height: 16px; display: block; } .gr-board-draft__clear, .gr-board-draft__create { position: relative; min-height: 44px; padding: 0 20px; font-size: 0.92rem; line-height: 1; } .gr-board-draft__clear { background: var(--color-page-bg); color: var(--color-ink); box-shadow: none; transition: box-shadow 0.18s ease; } .gr-board-draft__clear:hover, .gr-board-draft__clear:focus-visible { background: var(--color-page-bg); box-shadow: var(--shadow-card-hover); } .gr-board-draft__create { isolation: isolate; background: transparent; color: var(--color-cream); overflow: visible; } .gr-board-draft__create::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-forest); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease; z-index: -1; } .gr-board-draft__create:not(:disabled):hover, .gr-board-draft__create:not(:disabled):focus-visible { transform: none; } .gr-board-draft__create:not(:disabled):hover::before, .gr-board-draft__create:not(:disabled):focus-visible::before { transform: scale(1.04); } .gr-board-draft__create:disabled { background: var(--control-disabled-bg); color: var(--control-disabled-text); cursor: not-allowed; opacity: 1; transform: none; } .gr-board-draft__create:disabled::before, .gr-board-draft__create[disabled]::before { background: var(--control-disabled-bg); content: none; transform: none; } .gr-board-draft__meta { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.86rem; font-weight: 700; } .gr-board-draft__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .gr-board-draft-card { position: relative; display: grid; gap: 8px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-ink); font-family: var(--font-heading); text-align: left; cursor: pointer; } .gr-board-draft-card__media { position: relative; display: block; aspect-ratio: 1 / 1; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--popup-bg-muted); transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .gr-board-draft-card:hover .gr-board-draft-card__media, .gr-board-draft-card:focus-visible .gr-board-draft-card__media { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .gr-board-draft-card:focus-visible { outline: 0; } .gr-board-draft-card.is-selected .gr-board-draft-card__media { border-color: var(--color-ink); } .gr-board-draft-card__check { position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 54%, transparent); opacity: 0; } .gr-board-draft-card__check::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; background: var(--color-cream); transform: translate(-50%, -50%); -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; } .gr-board-draft-card.is-selected .gr-board-draft-card__check { opacity: 1; } .gr-board-draft-card__title { display: block; color: var(--color-ink); font-size: clamp(0.82rem, 0.76rem + 0.15vw, 0.96rem); font-weight: 750; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gr-board-name-modal[hidden] { display: none; } .gr-board-name-modal { position: fixed; inset: 0; z-index: var(--z-modal-front, 13000); display: grid; place-items: center; padding: 22px; } .gr-board-name-modal__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-ink) 42%, transparent); } .gr-board-name-modal__dialog { position: relative; z-index: 1; width: min(640px, calc(100vw - 44px)); padding: 28px; border-radius: 24px; background: var(--popup-bg, var(--color-cream)); color: var(--color-ink); box-shadow: var(--shadow-card-hover); } .gr-board-name-modal__sheet-grip { display: none; } .gr-board-name-modal__dialog h2 { margin: 0; color: var(--color-ink); font-family: var(--popup-title-font, var(--font-display)) !important; font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); } .gr-board-name-modal__dialog p { margin: 8px 0 22px; color: var(--color-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.32; } .gr-board-name-modal__field { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 18px; border: 1.5px solid var(--control-border-resting, var(--popup-control-border)); border-radius: 999px; background: var(--popup-bg, var(--color-cream)); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-ink) 5%, transparent); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .gr-board-name-modal__field:focus-within { border-color: var(--popup-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent); } .gr-board-name-modal__field span { position: absolute; top: -8px; left: 22px; z-index: 2; border-radius: 999px; background: var(--popup-bg, var(--color-cream)); padding: 0 6px; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 760; } .gr-board-name-modal__field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: 1.08rem; font-weight: 650; line-height: 1.28; } .gr-board-name-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .gr-board-name-modal__cancel, .gr-board-name-modal__save { position: relative; isolation: isolate; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 780; line-height: 1; cursor: pointer; transform: none; transition: box-shadow 0.18s ease, background-color 0.18s ease; } .gr-board-name-modal__cancel { background: var(--popup-bg, var(--color-cream)); color: var(--color-ink); box-shadow: none; } .gr-board-name-modal__save { background: transparent; color: var(--color-cream); overflow: visible; } .gr-board-name-modal__save::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-forest); z-index: -1; transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease; pointer-events: none; } .gr-board-name-modal__cancel:hover, .gr-board-name-modal__cancel:focus-visible { background: var(--popup-bg, var(--color-cream)); box-shadow: var(--shadow-card-hover); outline: 0; } .gr-board-name-modal__save:hover, .gr-board-name-modal__save:focus-visible { transform: none; outline: 0; } .gr-board-name-modal__save:hover::before, .gr-board-name-modal__save:focus-visible::before { transform: scale(1.04); } @media (max-width: 720px) { .gr-my-ideas-section__head { align-items: center; gap: 10px; min-height: 42px; padding-right: 0; } .gr-my-ideas-section__title { display: flex; align-items: center; min-height: 42px; font-size: clamp(1.72rem, 7.4vw, 2.12rem); font-weight: 780; line-height: 1; } .gr-board-suggestions__title { margin-bottom: 10px; font-size: clamp(1rem, 4.2vw, 1.14rem); line-height: 1.12; } .gr-my-ideas-sort__button { height: 38px; padding: 0 12px; font-size: 12px; } .gr-my-ideas-sort__icon { width: 16px; height: 16px; flex-basis: 16px; } .gr-board-draft { min-height: auto; gap: 14px; padding-top: 18px; } .gr-board-draft__top { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: start; } .gr-board-draft__heading h1 { font-size: 26px; line-height: 1.2; } .gr-board-draft__heading p { font-size: 0.88rem; } .gr-board-draft__actions { grid-column: 1 / -1; justify-content: flex-end; } .gr-board-draft__clear, .gr-board-draft__create { min-height: 40px; padding: 0 16px; font-size: 0.82rem; } .gr-board-draft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .gr-board-name-modal { align-items: end; padding: 0; } .gr-board-name-modal__dialog { width: 100%; max-height: calc(100vh - max(16px, env(safe-area-inset-top, 0px))); max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px))); display: flex; flex-direction: column; overflow: auto; padding: 0 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; transform: translateY(var(--gr-board-name-sheet-drag-y, 0px)); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .gr-board-name-modal.is-sheet-dragging .gr-board-name-modal__dialog { transition: none; will-change: transform; } .gr-board-name-modal.is-sheet-settling .gr-board-name-modal__dialog, .gr-board-name-modal.is-sheet-closing .gr-board-name-modal__dialog { transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .gr-board-name-modal__sheet-grip.gift-room-modal__sheet-grip { appearance: none; -webkit-appearance: none; width: calc(100% + 44px); min-height: var(--popup-sheet-grip-height, 44px); flex: 0 0 var(--popup-sheet-grip-height, 44px); display: flex; align-items: center; justify-content: center; margin: 0 -22px; border: 0; background: var(--popup-bg, var(--color-cream)); color: inherit; cursor: grab; touch-action: none; user-select: none; } .gr-board-name-modal.is-sheet-dragging .gr-board-name-modal__sheet-grip.gift-room-modal__sheet-grip { cursor: grabbing; } .gr-board-name-modal__sheet-grip.gift-room-modal__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; } .gr-board-name-modal__dialog h2 { margin-top: 2px; } } .gr-idea-product-card__media-mark { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: color-mix(in srgb, var(--color-ink) 26%, transparent); pointer-events: none; } .gr-idea-product-card__media-mark .gift-room-item__icon { width: calc(74px * var(--cat-card-scale, 1)); height: calc(74px * var(--cat-card-scale, 1)); } .gr-idea-product-card__image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; } .gr-idea-product-card .cat-card__media::after { content: ""; position: absolute; inset: auto calc(14px * var(--cat-card-scale, 1)) calc(58px * var(--cat-card-scale, 1)); height: 1px; background: color-mix(in srgb, var(--color-ink) 8%, transparent); z-index: 2; pointer-events: none; } .gr-idea-product-card .cat-card__rating-star { width: calc(17 * var(--cat-card-unit-x)); height: calc(16 * var(--cat-card-unit-y)); display: block; flex: 0 0 calc(17 * var(--cat-card-unit-x)); object-fit: contain; } .gr-idea-product-card .cat-card__title { font-size: clamp(12px, calc(17px * var(--cat-card-scale, 1)), 17px); line-height: 1.12; } .gr-idea-product-card .cat-card__price { top: calc((352 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } .gr-idea-product-card .cat-card__similar span { max-width: calc(118px * var(--cat-card-scale, 1)); overflow: hidden; text-overflow: ellipsis; } .gr-idea-product-card .cat-card__store-row { cursor: default; } .gr-idea-product-card .cat-card__store-icon { width: calc(25 * var(--cat-card-unit-x)); height: calc(25 * var(--cat-card-unit-y)); display: block; flex: 0 0 calc(25 * var(--cat-card-unit-x)); object-fit: contain; } .gr-idea-product-card .cat-card__store { text-decoration: none; } .gr-idea-product-card .cat-card__price .cat-card__currency, .gr-idea-product-card .cat-card__price .cat-card__value-new { color: var(--color-ink); font-size: clamp(16px, calc(23px * var(--cat-card-scale, 1)), 23px); line-height: 1; } .gr-idea-product-card .cat-card__price.is-discounted .cat-card__currency, .gr-idea-product-card .cat-card__price.is-discounted .cat-card__value-new { color: var(--color-forest); } .gr-idea-product-card .cat-card__price .cat-card__value-old { font-size: clamp(11px, calc(15px * var(--cat-card-scale, 1)), 15px); } .gr-idea-product-card .cat-card__price .cat-card__value-old:empty { display: none; } .gr-idea-product-card .cat-card__price.is-price-missing { width: auto; } .gr-idea-product-card .cat-card__price-missing { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: clamp(12px, calc(15px * var(--cat-card-scale, 1)), 15px); font-weight: 650; line-height: 1; } .gr-idea-product-card__meta { top: calc((408 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); max-width: calc(285 * var(--cat-card-unit-x)); } .gr-idea-product-card__insight { max-width: calc(285 * var(--cat-card-unit-x)); height: auto; min-height: calc(18 * var(--cat-card-unit-y)); padding: 0; border-radius: 0; background: transparent; color: var(--color-alert-red, #b91515); font-family: var(--font-heading); font-size: clamp(12px, calc(15px * var(--cat-card-scale, 1)), 15px); font-weight: 700; line-height: 1.05; display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: none; } .gr-idea-product-card__similar-main { text-decoration: none; min-width: calc(142 * var(--cat-card-unit-x)); max-width: calc(178 * var(--cat-card-unit-x)); min-height: calc(48 * var(--cat-card-unit-y)); bottom: calc(12 * var(--cat-card-unit-y)); padding: calc(13 * var(--cat-card-unit-y)) calc(17 * var(--cat-card-unit-x)); font-size: clamp(13px, calc(16 * var(--cat-card-unit-x)), 16px); gap: calc(11 * var(--cat-card-unit-x)); outline: 0; transform: none; transition: background-color 0.18s ease; } .gr-idea-product-card__similar-main:hover, .gr-idea-product-card__similar-main:focus-visible { background: #eee5da; outline: 0; transform: none; } .gr-idea-product-card__similar-main .cat-card__similar-icon { width: calc(23 * var(--cat-card-unit-x)); height: calc(14 * var(--cat-card-unit-y)); flex: 0 0 calc(23 * var(--cat-card-unit-x)); transition: transform 0.18s ease; } .gr-idea-product-card__similar-main:hover .cat-card__similar-icon, .gr-idea-product-card__similar-main:focus-visible .cat-card__similar-icon { transform: translateX(calc(4 * var(--cat-card-unit-x))); } .gr-idea-product-card__primary-action { min-width: calc(142 * var(--cat-card-unit-x)); min-height: calc(48 * var(--cat-card-unit-y)); bottom: calc(12 * var(--cat-card-unit-y)); padding: calc(10 * var(--cat-card-unit-y)) calc(22 * var(--cat-card-unit-x)); font-size: clamp(13px, calc(16 * var(--cat-card-unit-x)), 16px); gap: calc(9 * var(--cat-card-unit-x)); } .gr-idea-product-card__primary-action .gr-idea-product-card__action-icon { width: calc(22 * var(--cat-card-unit-x)); height: calc(22 * var(--cat-card-unit-y)); display: block; flex: 0 0 calc(22 * var(--cat-card-unit-x)); object-fit: contain; transition: none; } .gr-idea-product-card__primary-action .gr-idea-product-card__action-icon--add, .gr-idea-product-card__primary-action .gr-idea-product-card__action-icon--save { width: calc(20 * var(--cat-card-unit-x)); height: calc(20 * var(--cat-card-unit-y)); flex-basis: calc(20 * var(--cat-card-unit-x)); } .gr-ideas-pager { grid-column: 1 / -1; margin-top: 20px; } .gr-ideas-pager .pager__title { color: var(--color-ink); } .gr-lobby-empty.is-ideas-empty .gr-lobby-empty__art { display: block; } @media (max-width: 1199px) { .gr-ideas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gr-board-suggestions__grid, .gr-board-draft__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 960px) { .gr-ideas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gr-board-suggestions__grid, .gr-board-draft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gr-board-draft__top { grid-template-columns: 1fr; } .gr-board-draft__heading { text-align: left; } .gr-board-draft__heading p { margin-left: 0; margin-right: 0; } .gr-board-draft__actions { justify-content: flex-start; flex-wrap: wrap; } } @media (max-width: 760px) { .gr-ideas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .gr-my-ideas-masonry { grid-template-columns: minmax(0, 1fr); gap: 14px; } .gr-my-ideas-masonry .favorites-discovery-set { --favorites-discovery-gap: 12px; grid-template-columns: minmax(0, 1fr); gap: 14px; } .gr-my-ideas-masonry .favorites-discovery-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .gr-my-ideas-masonry .favorites-discovery-row .favorites-discovery-card--wide, .gr-my-ideas-masonry .favorites-discovery-row .favorites-discovery-card--square { height: auto; aspect-ratio: 1 / 1.08; } .gr-board-suggestions__grid { display: flex; grid-template-columns: none; gap: 10px; margin-inline: 0; padding: 8px 0 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; } .gr-board-suggestions__grid::-webkit-scrollbar { display: none; } .gr-board-suggestion { flex: 0 0 clamp(124px, 35vw, 148px); scroll-snap-align: start; } .gr-board-suggestion__media { border-radius: 8px; } .gr-board-suggestion__create { min-height: 34px; height: 34px; padding: 0 15px; font-size: 0.76rem; } .gr-board-suggestion__title { margin-top: 8px; font-size: 0.76rem; line-height: 1.16; } .gr-board-suggestion__count { font-size: 0.66rem; } .gr-board-draft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (max-width: 520px) { .gr-ideas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gr-board-draft__grid { grid-template-columns: 1fr; } .gr-board-suggestion { flex-basis: clamp(124px, 35vw, 148px); } .gr-board-draft__actions { display: grid; grid-template-columns: 1fr; } .gr-board-draft__clear, .gr-board-draft__create { width: 100%; } } @media (min-width: 600px) { .gr-template { flex-basis: clamp(380px, 45vw, 560px); } } @media (min-width: 1024px) { .gr-template { flex-basis: clamp(360px, 31vw, 430px); } } .gr-lobby-pane[data-lobby-pane="rooms"] > .gift-room-section-head { display: none; } @media (min-width: 981px) { body.page--gift-room[data-gift-room-lobby-tab="rooms"] .gr-lobby-sticky-frame { padding-bottom: 2px; } body.page--gift-room[data-gift-room-lobby-tab="rooms"] .gr-lobby-pane[data-lobby-pane="rooms"] > .gift-room-rooms { margin-top: -10px; } } .gr-pin-btn { position: absolute; top: 10px; right: calc(var(--gr-card-action-edge) + var(--gr-card-action-size) + var(--gr-card-action-gap)); width: var(--gr-card-action-size); height: var(--gr-card-action-size); display: inline-flex; align-items: center; justify-content: center; background-color: rgba(255, 249, 241, 0.85); border: 0; border-radius: 50%; cursor: pointer; color: var(--color-ink); z-index: 2; padding: 0; opacity: 0; pointer-events: none; transform: translateX(8px) scale(0.96); transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.18s ease, right 0.22s ease; will-change: opacity, transform; outline: 0; } .gift-room-card:hover .gr-pin-btn, .gift-room-card.is-pinned .gr-pin-btn, .gift-room-card:focus-within .gr-pin-btn, .gift-room-card:has(.gift-room-card__menu-btn.is-open) .gr-pin-btn, .gr-pin-btn:focus-visible { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); } .gr-pin-btn:hover { background-color: var(--color-cream); } .gr-pin-btn .gift-room-icon { width: 17px; height: 17px; } .gr-pin-btn.is-pinned { color: var(--color-forest); background-color: var(--color-cream); } .gift-room-card.is-pinned:not(:hover):not(:focus-within):not(:has(.gift-room-card__menu-btn.is-open)) .gr-pin-btn { right: var(--gr-card-action-edge); } @media (hover: none) and (pointer: coarse) { .gift-room-card__menu-btn, .gr-pin-btn, .gift-room-card__privacy-status { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); } } @media (max-width: 720px) { .gift-room-card__menu-btn, .gr-pin-btn, .gift-room-card__privacy-status { top: 8px; width: 44px; height: 44px; opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); } .gift-room-card__menu-btn { right: 8px; } .gr-pin-btn { right: 60px; } .gift-room-card.is-pinned:not(:hover):not(:focus-within):not(:has(.gift-room-card__menu-btn.is-open)) .gr-pin-btn { right: 60px; } .gift-room-card__privacy-status { pointer-events: auto; } .gift-room-card__menu-btn .gift-room-icon, .gr-pin-btn .gift-room-icon, .gift-room-card__privacy-status .gift-room-icon { width: 19px; height: 19px; } .gift-room-card__privacy-status { right: 112px; } } @media (max-width: 720px) { body.page--gift-room .fixed-header .header-floating-layer { left: 0 !important; right: auto !important; width: 100vw !important; max-width: 100vw !important; overflow-x: clip !important; } body.page--gift-room .gift-room-modal-overlay[aria-hidden="true"] { left: 0 !important; right: auto !important; width: 100vw !important; max-width: 100vw !important; overflow: clip !important; visibility: hidden !important; } #gift-room-settings-overlay.gift-room-settings-overlay { --collection-modal-mobile-top: clamp(84px, 13dvh, 128px); --gift-room-settings-mobile-offset: calc(env(safe-area-inset-top, 0px) + var(--collection-modal-mobile-top)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-settings-mobile-offset) 0 0; overflow: hidden; } #gift-room-settings-overlay .gift-room-settings-shell { width: 100%; max-width: 100%; height: calc(100vh - var(--gift-room-settings-mobile-offset)); height: calc(100dvh - var(--gift-room-settings-mobile-offset)); min-height: 0; margin: 0; display: flex; flex-direction: column; } #gift-room-settings-overlay .gift-room-settings-modal { width: 100%; max-width: 100%; height: auto; flex: 1 1 auto; max-height: none; min-height: 0; padding: 0; gap: 0; overflow: hidden; border-radius: 22px 22px 0 0; border-width: 0; transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } #gift-room-settings-overlay .gift-room-settings-form { height: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; } #gift-room-settings-overlay .gift-room-settings-form::-webkit-scrollbar { display: none; } #gift-room-settings-overlay .gift-room-settings-modal__header { padding: 16px 16px 10px; } #gift-room-settings-overlay .gift-room-settings-modal__header .collection-modal__title { padding-right: 44px; } #gift-room-settings-overlay.is-open .gift-room-settings-modal { transform: translateY(0); } #gift-room-settings-overlay.is-closing .gift-room-settings-modal { transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); } #gift-room-settings-overlay.is-sheet-dragging .gift-room-settings-modal { transform: translateY(var(--gift-room-settings-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-settings-overlay.is-sheet-settling .gift-room-settings-modal, #gift-room-settings-overlay.is-sheet-closing .gift-room-settings-modal { transform: translateY(var(--gift-room-settings-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-settings-overlay .gift-room-settings-modal__body.collection-modal__body { margin: 0; padding: 0 16px 12px; display: flex; flex: 0 0 auto; flex-direction: column; gap: 12px; min-height: auto; max-height: none; overflow: visible; overscroll-behavior: auto; -webkit-overflow-scrolling: auto; touch-action: auto; scrollbar-width: none; -ms-overflow-style: none; } #gift-room-settings-overlay .gift-room-settings-modal__body.collection-modal__body::-webkit-scrollbar { display: none; } .gift-room-settings-modal__row.collection-modal__row { grid-template-columns: 1fr; } .gift-room-settings-coauthors__label a { display: inline-flex; align-items: center; min-height: 44px; } .gift-room-cover-editor__trigger, .gift-room-cover-editor__auto { width: 112px; } .gift-room-settings-delete { grid-template-columns: 1fr; gap: 12px; } .gift-room-settings-delete__button { justify-self: start; } .gift-room-settings-suboverlay { --gift-room-submodal-mobile-offset: calc(env(safe-area-inset-top, 0px) + clamp(84px, 13dvh, 128px)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-submodal-mobile-offset) 0 0; overflow: hidden; } .gift-room-cover-modal-shell, .gift-room-coauthors-shell, .gift-room-access-shell, .gift-room-permissions-shell { width: 100%; max-width: 100%; height: calc(100vh - var(--gift-room-submodal-mobile-offset)); height: calc(100dvh - var(--gift-room-submodal-mobile-offset)); min-height: 0; margin: 0; display: flex; flex-direction: column; } .gift-room-cover-modal, .gift-room-coauthors-modal, .gift-room-access-modal, .gift-room-permissions-modal { width: 100%; height: auto; flex: 1 1 auto; max-width: 100%; max-height: none; min-height: 0; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; border-width: 1px 0 0; padding: 0; overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .gift-room-settings-suboverlay.is-open .gift-room-cover-modal, .gift-room-settings-suboverlay.is-open .gift-room-coauthors-modal, .gift-room-settings-suboverlay.is-open .gift-room-access-modal, .gift-room-settings-suboverlay.is-open .gift-room-permissions-modal { transform: translateY(0); } #gift-room-cover-overlay.is-sheet-dragging .gift-room-cover-modal { transform: translateY(var(--gift-room-cover-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-cover-overlay.is-sheet-settling .gift-room-cover-modal, #gift-room-cover-overlay.is-sheet-closing .gift-room-cover-modal { transform: translateY(var(--gift-room-cover-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-coauthors-overlay.is-sheet-dragging .gift-room-coauthors-modal { transform: translateY(var(--gift-room-coauthors-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-coauthors-overlay.is-sheet-settling .gift-room-coauthors-modal, #gift-room-coauthors-overlay.is-sheet-closing .gift-room-coauthors-modal { transform: translateY(var(--gift-room-coauthors-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-access-overlay.is-sheet-dragging .gift-room-access-modal { transform: translateY(var(--gift-room-access-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-access-overlay.is-sheet-settling .gift-room-access-modal, #gift-room-access-overlay.is-sheet-closing .gift-room-access-modal { transform: translateY(var(--gift-room-access-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-permissions-overlay.is-sheet-dragging .gift-room-permissions-modal { transform: translateY(var(--gift-room-permissions-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-permissions-overlay.is-sheet-settling .gift-room-permissions-modal, #gift-room-permissions-overlay.is-sheet-closing .gift-room-permissions-modal { transform: translateY(var(--gift-room-permissions-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .gift-room-cover-modal__body, .gift-room-coauthors-modal__body, .gift-room-access-modal__body, .gift-room-permissions-modal__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 4px 16px calc(18px + env(safe-area-inset-bottom, 0px)); scrollbar-width: none; -ms-overflow-style: none; } .gift-room-cover-modal__body::-webkit-scrollbar, .gift-room-coauthors-modal__body::-webkit-scrollbar, .gift-room-access-modal__body::-webkit-scrollbar, .gift-room-permissions-modal__body::-webkit-scrollbar { display: none; } #gift-room-access-overlay .gift-room-access-shell > .gift-room-settings-modal__close.collection-modal__close { display: none !important; top: 8px; right: 14px; left: auto; width: 44px; height: 44px; border-radius: 999px; background: transparent; box-shadow: none; filter: none; z-index: 6; } #gift-room-access-overlay .gift-room-access-shell > .gift-room-settings-modal__close.collection-modal__close:hover, #gift-room-access-overlay .gift-room-access-shell > .gift-room-settings-modal__close.collection-modal__close:focus-visible { background: var(--popup-hover); filter: none; } #gift-room-access-overlay .gift-room-access-modal__body { flex: 1 1 0; max-height: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } #gift-room-access-overlay .gift-room-access-modal .gift-room-settings-modal__sheet-grip { position: relative; z-index: 5; } .gift-room-submodal__header { min-height: 56px; padding-top: 0; } .gift-room-submodal__title.collection-modal__title { font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .gift-room-cover-modal__grid { display: flex; flex-direction: column; gap: 16px; max-height: none; overflow: visible; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .gift-room-cover-modal__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .gift-room-cover-modal__section-title { font-size: 14px; } .gift-room-cover-upload { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; min-height: 0; padding: 10px; border-radius: 16px; } .gift-room-cover-upload__media { width: 78px; height: 78px; border-radius: 12px; } .gift-room-cover-upload__copy strong { font-size: 14px; } .gift-room-cover-upload__copy small { font-size: 11px; } .gift-room-cover-upload__actions { grid-column: 1 / -1; justify-content: stretch; } .gift-room-cover-upload__button, .gift-room-cover-upload__remove { flex: 1 1 auto; } .gift-room-cover-tile { margin-bottom: 0; border-radius: 16px; } .gift-room-coauthors-share__row { grid-template-columns: 1fr; } .gift-room-coauthors-people .gr-share-person { grid-template-columns: 46px minmax(0, 1fr) auto; } .gift-room-coauthors-people .gr-share-person__avatar { width: 46px; height: 46px; } .gift-room-coauthors-people .gr-share-person__send { min-width: 104px; height: 38px; font-size: 0.76rem; } .gift-room-settings-modal__footer.collection-modal__footer { flex-direction: row; gap: 10px; flex: 0 0 auto; position: sticky; bottom: 0; z-index: 20; margin: 0; padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--popup-bg); box-shadow: 0 -10px 22px color-mix(in srgb, var(--color-ink) 8%, transparent); } #gift-room-invite-overlay, #gift-room-additem-overlay, #gift-room-plan-step-overlay, #gift-room-story-prompt-overlay { --gift-room-basic-modal-mobile-offset: calc(env(safe-area-inset-top, 0px) + clamp(72px, 11dvh, 118px)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-basic-modal-mobile-offset) 0 0; overflow: hidden; } #gift-room-invite-overlay .gift-room-modal, #gift-room-additem-overlay .gift-room-modal, #gift-room-plan-step-overlay .gift-room-plan-step-modal, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal { width: 100%; max-width: 100%; height: calc(100vh - var(--gift-room-basic-modal-mobile-offset)); height: calc(100dvh - var(--gift-room-basic-modal-mobile-offset)); max-height: none; min-height: 0; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; border-width: 1px 0 0; overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } #gift-room-plan-step-overlay .gift-room-plan-step-shell { width: 100%; max-width: 100%; height: calc(100vh - var(--gift-room-basic-modal-mobile-offset)); height: calc(100dvh - var(--gift-room-basic-modal-mobile-offset)); max-height: none; } #gift-room-invite-overlay.is-open .gift-room-modal, #gift-room-additem-overlay.is-open .gift-room-modal, #gift-room-plan-step-overlay.is-open .gift-room-plan-step-modal, #gift-room-story-prompt-overlay.is-open .gift-room-story-prompt-modal { transform: translateY(0); } #gift-room-invite-overlay.is-closing .gift-room-modal, #gift-room-additem-overlay.is-closing .gift-room-modal, #gift-room-plan-step-overlay.is-closing .gift-room-plan-step-modal, #gift-room-story-prompt-overlay.is-closing .gift-room-story-prompt-modal { transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); } #gift-room-invite-overlay.is-sheet-dragging .gift-room-modal { transform: translateY(var(--gift-room-invite-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-invite-overlay.is-sheet-settling .gift-room-modal, #gift-room-invite-overlay.is-sheet-closing .gift-room-modal { transform: translateY(var(--gift-room-invite-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-additem-overlay.is-sheet-dragging .gift-room-modal { transform: translateY(var(--gift-room-additem-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-additem-overlay.is-sheet-settling .gift-room-modal, #gift-room-additem-overlay.is-sheet-closing .gift-room-modal { transform: translateY(var(--gift-room-additem-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-story-prompt-overlay.is-sheet-settling .gift-room-story-prompt-modal, #gift-room-story-prompt-overlay.is-sheet-closing .gift-room-story-prompt-modal { transform: translateY(var(--gift-room-story-prompt-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-plan-step-overlay.is-sheet-dragging .gift-room-plan-step-modal { transform: translateY(var(--gift-room-plan-step-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-story-prompt-overlay.is-sheet-dragging .gift-room-story-prompt-modal { transform: translateY(var(--gift-room-story-prompt-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gift-room-plan-step-overlay.is-sheet-settling .gift-room-plan-step-modal, #gift-room-plan-step-overlay.is-sheet-closing .gift-room-plan-step-modal { transform: translateY(var(--gift-room-plan-step-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } #gift-room-settings-overlay .gift-room-settings-modal__sheet-grip, .gift-room-settings-suboverlay .gift-room-settings-modal__sheet-grip, #gift-room-invite-overlay .gift-room-modal__sheet-grip, #gift-room-additem-overlay .gift-room-modal__sheet-grip, #gift-room-plan-step-overlay .gift-room-plan-step-modal__sheet-grip, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__sheet-grip, #gift-room-story-prompt-overlay .gift-room-modal__sheet-grip { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; min-height: 44px; background: var(--popup-bg); cursor: grab; touch-action: none; user-select: none; } #gift-room-plan-step-overlay .gift-room-plan-step-modal__sheet-grip span, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__sheet-grip span, #gift-room-story-prompt-overlay .gift-room-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } #gift-room-settings-overlay.is-sheet-dragging .gift-room-settings-modal__sheet-grip, .gift-room-settings-suboverlay.is-sheet-dragging .gift-room-settings-modal__sheet-grip, #gift-room-invite-overlay.is-sheet-dragging .gift-room-modal__sheet-grip, #gift-room-additem-overlay.is-sheet-dragging .gift-room-modal__sheet-grip, #gift-room-plan-step-overlay.is-sheet-dragging .gift-room-plan-step-modal__sheet-grip, #gift-room-story-prompt-overlay.is-sheet-dragging .gift-room-story-prompt-modal__sheet-grip, #gift-room-story-prompt-overlay.is-sheet-dragging .gift-room-modal__sheet-grip { cursor: grabbing; } .gift-room-plan-step-modal__close.header-auth-close, .gift-room-profile-bio-modal__close.header-auth-close { display: none; } #gift-room-invite-overlay .gift-room-invite-modal__close.header-auth-close, #gift-room-additem-overlay .gift-room-modal__close, #gift-room-story-prompt-overlay .gift-room-modal__close { display: none !important; } #gift-room-invite-overlay .gift-room-modal__head, #gift-room-additem-overlay .gift-room-modal__head, #gift-room-plan-step-overlay .gift-room-plan-step-modal__head, #gift-room-story-prompt-overlay .gift-room-modal__head { flex: 0 0 auto; padding: 18px 16px 12px; } #gift-room-invite-overlay .gift-room-modal__body, #gift-room-additem-overlay .gift-room-modal__body, #gift-room-plan-step-overlay .gift-room-plan-step-modal__body, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__body, #gift-room-story-prompt-overlay .gift-room-modal__body { flex: 1 1 auto; min-height: 0; padding: 6px 16px 16px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; } #gift-room-invite-overlay .gift-room-modal__body::-webkit-scrollbar, #gift-room-additem-overlay .gift-room-modal__body::-webkit-scrollbar, #gift-room-plan-step-overlay .gift-room-plan-step-modal__body::-webkit-scrollbar, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__body::-webkit-scrollbar, #gift-room-story-prompt-overlay .gift-room-modal__body::-webkit-scrollbar { display: none; } #gift-room-invite-overlay .gift-room-modal__foot, #gift-room-additem-overlay .gift-room-modal__foot, #gift-room-story-prompt-overlay .gift-room-modal__foot { flex: 0 0 auto; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 0; background: var(--popup-bg); box-shadow: 0 -10px 22px color-mix(in srgb, var(--color-ink) 8%, transparent); } } @keyframes header-auth-close-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } .gr-cal-modal { max-width: 520px; max-height: min(640px, calc(100vh - 48px)); position: relative; overflow: visible; border-radius: 30px; box-shadow: var(--popup-shadow); } #gr-calendar-overlay.gift-room-modal-overlay { background: color-mix(in srgb, var(--color-ink) 64%, transparent); } .gr-cal-modal .gift-room-modal__head { padding: 22px 26px 14px; border-bottom: 1px solid var(--popup-border); } .gr-cal-modal .gift-room-modal__body { padding: 14px 18px 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: auto; } .gr-cal-modal__sheet-grip { display: none; } .gr-cal-modal__close.header-auth-close { position: absolute; top: 0; left: calc(100% + 10px); right: auto; width: 78px; height: 55px; border: 0; border-radius: 999px; background: var(--popup-bg, var(--color-cream)); box-shadow: var(--popup-shadow-soft, 0 14px 34px color-mix(in srgb, var(--color-ink) 16%, transparent)); cursor: pointer; z-index: 2; transition: background-color 0.24s ease, filter 0.24s ease; will-change: transform; } .gr-cal-modal__close .header-auth-close-icon { position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; display: block; transform: translate(-50%, -50%); pointer-events: none; } .gr-cal-modal__close.header-auth-close:hover, .gr-cal-modal__close.header-auth-close:focus-visible { background: var(--sort-control-bg); animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--color-ink) 12%, transparent)); } .gr-cal-modal__close.header-auth-close:active { transform: none; } .gr-cal-modal__close.header-auth-close:focus-visible { outline: 2px solid var(--popup-focus, var(--color-forest)); outline-offset: 2px; } .gr-cal-list { display: flex; flex-direction: column; gap: 16px; } .gr-cal-planner { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 15px; border: 0; border-radius: 22px; background: var(--popup-bg-soft); box-shadow: none; } .gr-cal-planner__top { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 10px; } .gr-cal-planner__nav { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--popup-bg); color: var(--color-ink); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .gr-cal-planner__nav:hover, .gr-cal-planner__nav:focus-visible { background: var(--popup-hover); color: var(--color-ink); outline: 0; } .gr-cal-planner__nav img { width: 16px; height: 16px; display: block; object-fit: contain; } .gr-cal-planner__current { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 2px; color: var(--color-ink); } .gr-cal-planner__icon { grid-row: 1 / span 2; width: 25px; height: 25px; color: var(--color-forest); } .gr-cal-planner__eyebrow { font-size: 0.66rem; font-weight: 700; line-height: 1; color: var(--color-ink-soft); text-transform: uppercase; } .gr-cal-planner__current strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading); font-size: 1.04rem; line-height: 1.12; color: var(--color-ink); } .gr-cal-planner__weekdays, .gr-cal-planner__month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .gr-cal-planner__weekdays { gap: 4px; padding: 0 2px; } .gr-cal-planner__weekday-head { min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; color: var(--color-ink-soft); font-size: 0.58rem; font-weight: 700; line-height: 1; text-transform: uppercase; } .gr-cal-planner__month-grid { gap: 4px; } .gr-cal-planner__day { min-width: 0; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 0; border: 0; border-radius: 12px; background: transparent; color: var(--color-ink); font-family: inherit; cursor: pointer; position: relative; transition: background-color 0.18s ease, color 0.18s ease; } .gr-cal-planner__day--empty { cursor: default; pointer-events: none; } .gr-cal-planner__day:hover, .gr-cal-planner__day:focus-visible { background: var(--popup-hover); outline: 0; } .gr-cal-planner__day.is-selected { background: var(--color-ink); color: var(--color-cream); } .gr-cal-planner__day.is-selected:hover, .gr-cal-planner__day.is-selected:focus-visible { background: var(--color-ink); } .gr-cal-planner__number { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; line-height: 1; color: currentColor; } .gr-cal-planner__day.is-today:not(.is-selected) .gr-cal-planner__number { color: var(--color-forest); } .gr-cal-planner__event-dot { position: absolute; right: 7px; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-forest); } .gr-cal-planner__day.is-selected .gr-cal-planner__event-dot { background: var(--color-cream); } .gr-cal-planner__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; } .gr-cal-planner__footer p { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; } .gr-cal-planner__footer strong { font-family: var(--font-heading); font-size: 0.88rem; line-height: 1; color: var(--color-ink); } .gr-cal-planner__footer p span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; line-height: 1.2; color: var(--color-ink-soft); } .gr-cal-planner__create { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--color-forest); color: var(--color-cream); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color 0.18s ease; } .gr-cal-planner__create:hover, .gr-cal-planner__create:focus-visible { background: var(--color-forest-dark); outline: 0; } .gr-cal-planner__create span { color: inherit; font-size: inherit; line-height: 1; } .gr-cal-planner__create img { width: 13px; height: 13px; display: block; filter: brightness(0) invert(1); } .gr-cal-section { display: flex; flex-direction: column; gap: 8px; } .gr-cal-section--upcoming { gap: 0; } .gr-cal-section__title { margin: 0; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--color-ink); } .gr-cal-section--upcoming .gr-cal-section__title { margin-bottom: 8px; } .gr-cal-section__note { margin: -2px 0 2px; font-size: 0.72rem; color: var(--color-ink-soft); } .gr-cal-section--upcoming .gr-cal-section__note { margin: 0 0 8px; } .gr-cal-section__empty { margin: 0; padding: 0; border-radius: 0; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: 0.86rem; font-weight: 760; line-height: 1.32; text-align: center; } .gr-cal-section__empty span { display: block; } .gr-cal-archive { background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 18px; overflow: hidden; } .gr-cal-archive__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 62px; padding: 12px 14px; color: var(--color-ink); cursor: pointer; list-style: none; transition: background-color 0.18s ease; } .gr-cal-archive__summary::-webkit-details-marker { display: none; } .gr-cal-archive__summary:hover, .gr-cal-archive__summary:focus-visible { background: var(--popup-hover); } .gr-cal-archive__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .gr-cal-archive__copy strong { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; } .gr-cal-archive__copy span { color: var(--color-ink-soft); font-size: 0.72rem; line-height: 1.3; } .gr-cal-archive__meta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; } .gr-cal-archive__count { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--popup-disabled); color: var(--color-forest); font-size: 0.7rem; font-weight: 700; white-space: nowrap; } .gr-cal-archive__chevron { display: block; width: 14px; height: 14px; object-fit: contain; transform: rotate(0deg); transition: transform 0.18s ease; } .gr-cal-archive[open] .gr-cal-archive__chevron { transform: rotate(180deg); } .gr-cal-archive__body { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; } .gr-cal-archive:not([open]) .gr-cal-archive__body { display: none; } .gr-cal-archive__body .gr-cal-row { background: var(--popup-bg); } .gr-cal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 64px; padding: 11px 14px; background: var(--popup-bg-soft); border: 0; border-radius: 16px; font-family: inherit; text-align: left; cursor: pointer; width: 100%; transition: background-color .2s; } .gr-cal-row:hover, .gr-cal-row:focus-visible { background: var(--popup-hover); outline: 0; } .gr-cal-section--upcoming .gr-cal-row { border-radius: 0; border-bottom: 1px solid var(--popup-border); } .gr-cal-section--upcoming .gr-cal-row:first-of-type { border-radius: 16px 16px 0 0; } .gr-cal-section--upcoming .gr-cal-row:last-of-type { border-bottom: 0; border-radius: 0 0 16px 16px; } .gr-cal-section--upcoming .gr-cal-row:only-of-type { border-radius: 16px; } .gr-cal-section--upcoming .gr-cal-row:hover, .gr-cal-section--upcoming .gr-cal-row:focus-visible { background: var(--popup-hover); } .gr-cal-row[data-event-phase="past"] { background: var(--popup-bg); } .gr-cal-row[data-event-phase="past"] .gr-cal-row__count { background: var(--popup-disabled); color: var(--color-forest); } .gr-cal-row[data-event-phase="today"] .gr-cal-row__count { background: var(--color-forest); color: var(--color-cream); } .gr-cal-row__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .gr-cal-row__body strong { font-family: var(--font-display); font-size: 0.98rem; font-weight: 500; letter-spacing: -0.003em; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-cal-row__body span { font-size: 0.7rem; color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-cal-row__meta { display: inline-flex; align-items: center; gap: 8px; justify-self: end; flex-shrink: 0; } .gr-cal-row__count { min-width: 66px; padding: 5px 10px; background: var(--popup-disabled); border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--color-ink); white-space: nowrap; text-align: center; } .gr-cal-row__action { color: var(--color-forest); font-size: 0.68rem; font-weight: 700; line-height: 1; white-space: nowrap; } @media (max-width: 720px) { #gr-calendar-overlay { --gift-room-calendar-mobile-offset: calc(env(safe-area-inset-top, 0px) + clamp(84px, 13dvh, 128px)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-calendar-mobile-offset) 0 0; overflow: hidden; } .gr-cal-modal { width: 100%; max-width: 100%; height: calc(100vh - var(--gift-room-calendar-mobile-offset)); height: calc(100dvh - var(--gift-room-calendar-mobile-offset)); max-height: none; min-height: 0; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; border-width: 1px 0 0; box-shadow: var(--popup-shadow-soft); overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } #gr-calendar-overlay.is-open .gr-cal-modal { transform: translateY(0); } #gr-calendar-overlay.is-closing .gr-cal-modal { transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); } #gr-calendar-overlay.is-sheet-dragging .gr-cal-modal { transform: translateY(var(--gift-room-calendar-sheet-drag-y, 0px)); transition: none; will-change: transform; } #gr-calendar-overlay.is-sheet-settling .gr-cal-modal, #gr-calendar-overlay.is-sheet-closing .gr-cal-modal { transform: translateY(var(--gift-room-calendar-sheet-drag-y, 0px)); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); will-change: transform; } .gr-cal-modal__sheet-grip { display: flex; flex: 0 0 44px; min-height: 44px; align-items: center; justify-content: center; width: 100%; border: 0; background: var(--popup-bg); cursor: grab; touch-action: none; user-select: none; } #gr-calendar-overlay.is-sheet-dragging .gr-cal-modal__sheet-grip { cursor: grabbing; } .gr-cal-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .gr-cal-modal__close.header-auth-close { display: none; } .gr-cal-modal .gift-room-modal__head { flex: 0 0 auto; padding: 4px 16px 12px; } .gr-cal-modal .gift-room-modal__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); scrollbar-gutter: auto; scrollbar-width: none; -ms-overflow-style: none; } .gr-cal-modal .gift-room-modal__body::-webkit-scrollbar { display: none; } .gr-cal-planner { padding: 13px 14px 14px; border-radius: 20px; } .gr-cal-planner__top { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 8px; } .gr-cal-planner__nav { width: 34px; height: 34px; } .gr-cal-planner__weekdays, .gr-cal-planner__month-grid { gap: 3px; } .gr-cal-planner__day { min-height: 38px; border-radius: 11px; } .gr-cal-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; min-height: 60px; padding: 10px 12px; border-radius: 15px; } .gr-cal-archive__summary { align-items: start; } .gr-cal-archive__meta { padding-top: 2px; } .gr-cal-row__meta { flex-direction: row; align-items: center; gap: 7px; } .gr-cal-row__count { min-width: 56px; padding: 5px 9px; font-size: 0.68rem; } .gr-cal-row__action { font-size: 0.66rem; } } @media (max-width: 380px) { .gr-cal-planner { padding: 12px; } .gr-cal-planner__current strong { font-size: 0.96rem; } .gr-cal-planner__footer { grid-template-columns: 1fr; gap: 9px; } .gr-cal-planner__day { min-height: 35px; border-radius: 10px; } .gr-cal-planner__number { font-size: 0.82rem; } .gr-cal-planner__create { width: 100%; } .gr-cal-row { column-gap: 8px; padding: 10px; } .gr-cal-row__count { min-width: 52px; padding: 4px 8px; } .gr-cal-row__action { font-size: 0.64rem; } } .gift-room-planner { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--color-line); border-radius: 20px; background: color-mix(in srgb, var(--popup-bg) 96%, transparent); box-shadow: none; } .gift-room-tab__asset-icon { display: inline-block; flex: 0 0 auto; color: currentColor; } .gift-room-planner__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .gift-room-planner__metric { min-width: 0; display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--color-sand-dark); } .gift-room-planner__metric small { overflow: hidden; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.64rem; font-weight: 740; line-height: 1.1; letter-spacing: 0.08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .gift-room-planner__metric strong { color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.62rem); font-weight: 720; line-height: 1; } .gift-room-planner__metric.is-good strong { color: var(--color-forest); } .gift-room-planner__metric.is-warn strong { color: var(--gr-accent, var(--color-forest)); } .gift-room-planner__headcount, .gift-room-booking-progress, .gift-room-looks-task-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-cream); } .gift-room-planner__headcount strong, .gift-room-booking-progress__top strong, .gift-room-looks-task-card__head strong { color: var(--color-ink); font-family: var(--font-display); font-size: 0.98rem; font-weight: 720; line-height: 1.1; } .gift-room-planner__headcount span, .gift-room-booking-progress__top span, .gift-room-look-card small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 620; line-height: 1.2; } .gift-room-planner__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .gift-room-planner__search { flex: 1 1 220px; min-width: min(100%, 220px); gap: 0; padding: 0; } .gift-room-planner__search input { min-width: 0; width: 100%; } .gift-room-planner__filters { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .gift-room-planner__filter { min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: 0.88rem; font-weight: 760; line-height: 1; cursor: pointer; } .gift-room-planner__filter:hover, .gift-room-planner__filter:focus-visible { background: var(--sort-option-hover); color: var(--color-ink); outline: 0; } .gift-room-planner__filter.is-active { border-color: transparent; background: var(--color-ink); color: var(--color-cream); } .gift-room-proto-list { display: grid; gap: 9px; } .gift-room-proto-row { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-cream); transition: border-color .18s ease, box-shadow .18s ease; } .gift-room-proto-row:hover { border-color: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 32%, var(--color-line)); box-shadow: var(--shadow-card-hover); } .gift-room-proto-row__avatar, .gift-room-proto-row__icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gr-accent, var(--color-forest)); color: var(--color-cream); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; line-height: 1; } .gift-room-proto-row__icon { border-radius: 14px; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 14%, var(--color-cream)); color: var(--gr-accent, var(--color-forest)); font-size: 1.12rem; } .gift-room-proto-row__body { min-width: 0; display: grid; gap: 7px; } .gift-room-proto-row__body > div { min-width: 0; display: grid; gap: 3px; } .gift-room-proto-row__body > .gift-room-guest-tags { display: flex; flex-wrap: wrap; gap: 6px; } .gift-room-proto-row__body > div > strong { min-width: 0; color: var(--color-ink); font-family: var(--font-display); font-size: 0.9rem; line-height: 1.16; } .gift-room-proto-row__body > div > span { min-width: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.76rem; line-height: 1.25; } .gift-room-proto-row > div { min-width: 0; display: grid; gap: 3px; } .gift-room-proto-row > div > strong { min-width: 0; color: var(--color-ink); font-family: var(--font-display); font-size: 0.9rem; line-height: 1.16; } .gift-room-proto-row > div > span { min-width: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.76rem; line-height: 1.25; } .gift-room-proto-row__main, .gift-room-proto-row__meta { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gift-room-proto-row__main { flex-wrap: nowrap; } .gift-room-planner__inline--title { font-family: var(--font-display); font-size: 0.96rem; font-weight: 700; } .gift-room-proto-field { min-width: 88px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: var(--color-sand); } .gift-room-proto-field--wide { min-width: min(100%, 220px); } .gift-room-proto-field span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.62rem; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .gift-room-proto-row__action { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-display); font-size: 0.72rem; font-weight: 720; cursor: pointer; white-space: nowrap; } .gift-room-proto-row__action:hover, .gift-room-proto-row__action:focus-visible { background: var(--color-ink); color: var(--color-cream); outline: 0; } .gift-room-proto-row__delete { opacity: 1; } .gift-room-status-pill { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 0; border-radius: 999px; appearance: none; -webkit-appearance: none; box-shadow: none; background: color-mix(in srgb, var(--color-ink) 8%, transparent); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.66rem; font-weight: 780; line-height: 1; white-space: nowrap; } .gift-room-status-pill:is(button) { cursor: pointer; } .gift-room-status-pill:is(button):hover, .gift-room-status-pill:is(button):focus-visible { outline: 0; box-shadow: none; filter: brightness(0.98); } .gift-room-status-pill--accepted, .gift-room-status-pill--booked, .gift-room-status-pill--claim, .gift-room-status-pill--done, .gift-room-status-pill--given, .gift-room-status-pill--sent, .gift-room-status-pill--wrapped, .gift-room-status-pill--yes { background: color-mix(in srgb, var(--color-forest) 14%, var(--color-cream)); color: var(--color-forest); } .gift-room-status-pill--active, .gift-room-status-pill--bought, .gift-room-status-pill--contacted, .gift-room-status-pill--decided, .gift-room-status-pill--group { background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 12%, var(--color-cream)); color: var(--color-ink); } .gift-room-status-pill--declined, .gift-room-status-pill--no { background: color-mix(in srgb, var(--color-ink) 5%, var(--color-cream)); color: color-mix(in srgb, var(--color-ink-soft) 82%, var(--color-ink)); } .gift-room-status-pill--idea, .gift-room-status-pill--open, .gift-room-status-pill--ordered, .gift-room-status-pill--pending, .gift-room-status-pill--thinking, .gift-room-status-pill--wait { background: color-mix(in srgb, var(--color-ink) 8%, var(--color-cream)); color: var(--color-ink-soft); } .gift-room-booking-progress__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gift-room-booking-progress__track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--color-sand); } .gift-room-booking-progress__track span { display: block; height: 100%; border-radius: inherit; background: var(--color-forest); } .gift-room-look-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .gift-room-look-card { min-width: 0; display: grid; gap: 6px; justify-items: start; padding: 15px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-cream); color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; } .gift-room-look-card:hover, .gift-room-look-card:focus-visible { border-color: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 34%, var(--color-line)); background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 7%, var(--color-cream)); outline: 0; } .gift-room-look-card strong { font-family: var(--font-display); font-size: 0.98rem; font-weight: 720; line-height: 1.1; } .gift-room-look-card__link { margin-top: 4px; color: var(--color-forest); font-family: var(--font-display); font-size: 0.72rem; font-weight: 720; } .gift-room-looks-task-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .gift-room-day-list { position: relative; display: grid; gap: 12px; margin: 0; padding: 0 0 0 36px; list-style: none; } .gift-room-day-list::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 24px; width: 3px; border-radius: 999px; background: var(--color-line); } .gift-room-day-row { position: relative; min-width: 0; display: grid; grid-template-columns: 46px 118px minmax(180px, 1fr) auto; align-items: center; gap: 12px; padding: 12px 8px 12px 14px; border: 1px solid var(--gift-room-popup-field-border, var(--popup-control-border)); border-radius: 28px; background: var(--gift-room-popup-field-bg, var(--popup-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-day-row::before { content: ""; position: absolute; left: -35px; top: 50%; width: 20px; height: 20px; border: 4px solid var(--color-cream); border-radius: 50%; background: var(--gr-accent, var(--color-forest)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 8%, transparent); transform: translateY(-50%); } .gift-room-day-row:hover, .gift-room-day-row:focus-within { border-color: transparent; background-color: var(--gift-room-popup-field-bg, var(--popup-bg)); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-day-row.is-done::before { background: var(--color-forest); } .gift-room-day-row.is-done { border-color: var(--color-forest); background: color-mix(in srgb, var(--color-forest) 5%, var(--gift-room-popup-field-bg, var(--popup-bg))); } .gift-room-day-row.is-done .gift-room-planner__inline--title { color: var(--color-ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-task__check { width: 44px; height: 44px; border-radius: 14px; border-color: var(--gift-room-popup-field-border, var(--popup-control-border)); background: var(--gift-room-popup-field-bg, var(--popup-bg)); color: var(--color-cream); cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-task__check::after { width: 17px; height: 14px; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-task__check:hover, .gift-room-wedding-dayof .gift-room-day-row .gift-room-task__check:focus-visible { border-color: var(--color-forest); box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 14%, transparent); outline: 0; transform: translateY(-1px); } .gift-room-wedding-dayof .gift-room-day-row .gift-room-task__check.is-done { border-color: var(--color-forest); background: var(--color-forest); } .gift-room-day-row__time { min-width: 0; display: grid; gap: 2px; align-items: center; } .gift-room-day-row__time span { display: block; width: 108px; color: var(--gr-accent, var(--color-forest)); font-family: var(--font-display); font-size: 0.74rem; font-weight: 820; } .gift-room-planner__inline--time { width: 108px; max-width: 108px; inline-size: 108px; justify-self: start; font-weight: 760; color: var(--color-ink); min-height: 34px; padding: 0 28px 0 8px; line-height: 1; box-sizing: border-box; background-image: url("/assets/gift-room-icons/shared/clock.svg"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px 16px; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline--time { width: 108px; max-width: 108px; inline-size: 108px; flex: 0 0 108px; text-align: left; background-image: url("/assets/gift-room-icons/shared/clock.svg"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px 16px; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline--time:hover, .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline--time:focus, .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline--time:focus-visible { background-color: var(--popup-hover); background-image: url("/assets/gift-room-icons/shared/clock.svg"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px 16px; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline:hover, .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline:focus, .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline:focus-visible { background-color: var(--popup-hover); outline: 0; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline--title:hover, .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline--title:focus, .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline--title:focus-visible { box-shadow: none; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-planner__inline--time::-webkit-calendar-picker-indicator { width: 18px; height: 18px; margin: 0 -23px 0 5px; opacity: 0; transform: none; } .gift-room-day-row__date-actions { min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; justify-self: end; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-day-date-shell { flex: 0 0 auto; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-proto-row__delete { position: static; width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-proto-row__delete img { width: 14px; height: 14px; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-proto-row__delete:hover, .gift-room-wedding-dayof .gift-room-day-row .gift-room-proto-row__delete:focus-visible { background-color: var(--popup-hover); box-shadow: none; outline: 0; color: var(--color-ink); } .gift-room-wedding-dayof .gift-room-day-row:hover .gift-room-planner__del, .gift-room-wedding-dayof .gift-room-day-row:focus-within .gift-room-planner__del { opacity: 1; } @media (hover: none), (max-width: 560px) { .gift-room-wedding-dayof .gift-room-day-row .gift-room-proto-row__delete { opacity: 1; } } .gift-room-day-date-shell.collection-modal__date-shell { width: 168px; height: 48px; flex: 0 0 168px; padding-inline: 16px; background: var(--gift-room-popup-field-bg, var(--popup-bg)); border-color: var(--gift-room-popup-field-border, var(--popup-control-border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); } .gift-room-day-date-shell.collection-modal__date-shell:hover { background-color: var(--gift-room-popup-field-bg, var(--popup-bg)); } .gift-room-day-date-shell.collection-modal__date-shell.has-date { border-color: var(--gift-room-popup-field-focus, var(--popup-focus)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); } .gift-room-day-date-shell.collection-modal__date-shell:focus-within { border-color: var(--gift-room-popup-field-focus, var(--popup-focus)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gift-room-popup-field-focus, var(--popup-focus)) 14%, transparent); } .gift-room-day-date-shell .collection-modal__date-input, .gift-room-day-date-shell .collection-modal__date-input:focus, .gift-room-day-date-shell .collection-modal__date-input:focus-visible { min-height: 40px; padding: 0; font-family: var(--font-body); font-size: 0.86rem; font-weight: 650; outline: 0 !important; box-shadow: none !important; } .gift-room-day-date-shell .jp-date-field__button { color: var(--color-ink-soft); inline-size: 40px; block-size: 40px; } .gift-room-wedding-dayof .gift-room-day-date-shell .jp-date-field .jp-date-field__button:hover, .gift-room-wedding-dayof .gift-room-day-date-shell .jp-date-field .jp-date-field__button:focus-visible { background-color: var(--popup-hover); } .gift-room-wedding-dayof .gift-room-day-date-shell .jp-date-field .jp-date-field__button { right: -12px; inline-size: 40px; block-size: 40px; } .gift-room-day-date-shell .jp-date-field__icon { inline-size: 20px; block-size: 20px; } .gift-room-wedding-dayof .gift-room-day-date-shell .jp-date-field .jp-date-field__icon { inline-size: 20px; block-size: 20px; } .gift-room-day-date-shell:not(.has-date) .jp-date-field__button { right: -8px; } .gift-room-day-date-shell.collection-modal__date-shell.has-date .jp-date-field__button { right: -12px; } .gift-room-day-date-shell.collection-modal__date-shell.has-date .jp-date-field__input[data-jp-date-display="1"] { padding-right: 38px !important; } .gift-room-day-date-shell--add.collection-modal__date-shell { width: auto; min-width: 0; flex: 0 0 226px; height: 52px; min-height: 52px; box-sizing: border-box; padding-inline: 18px; } .gift-room-wedding-dayof .gift-room-planner__add .gift-room-day-date-shell--add .jp-date-field { flex: 1 1 auto; inline-size: 100%; } .gift-room-day-date-shell--add .collection-modal__date-input, .gift-room-day-date-shell--add .collection-modal__date-input:focus, .gift-room-day-date-shell--add .collection-modal__date-input:focus-visible { min-height: 48px; height: 100%; font-size: 0.9rem; font-weight: 550; } .gift-room-wedding-dayof .gift-room-day-date-shell--add .jp-date-field .jp-date-field__button { inline-size: 44px; block-size: 44px; } .gift-room-wedding-dayof .gift-room-day-date-shell--add .jp-date-field .jp-date-field__icon { inline-size: 22px; block-size: 22px; } .gift-room-day-date-shell--add.collection-modal__date-shell.has-date .jp-date-field__button { right: -12px; } .gift-room-day-date-shell--add.collection-modal__date-shell.has-date .jp-date-field__input[data-jp-date-display="1"] { padding-right: 38px !important; } .gift-room-day-add-button.gift-room-cta { position: relative; min-width: 148px; justify-content: center; gap: 10px; background: transparent; border-color: transparent; color: var(--color-cream); transform: none; transition: none; } .gift-room-day-add-button.gift-room-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: transform 0.18s ease; pointer-events: none; } .gift-room-day-add-button.gift-room-cta:hover, .gift-room-day-add-button.gift-room-cta:focus-visible { transform: none; outline: 0; } .gift-room-day-add-button.gift-room-cta:hover::before, .gift-room-day-add-button.gift-room-cta:focus-visible::before { transform: scale(var(--hover-grow-scale, 1.04)); } .gift-room-day-add-button .gift-room-cta__asset, .gift-room-day-add-button .gift-room-cta__label { position: relative; z-index: 1; transform: none; } .gift-room-day-add-button .gift-room-cta__asset { flex: 0 0 auto; font-size: 1rem; line-height: 1; } .gift-room-wedding-dayof input[type="time"]::-webkit-calendar-picker-indicator { width: 18px; height: 18px; padding: 0; margin: 0; background: url("/assets/gift-room-icons/shared/clock.svg") center / 18px 18px no-repeat; opacity: 1; cursor: pointer; } .gift-room-wedding-dayof .gift-room-planner__add input[type="time"], .gift-room-wedding-dayof .gift-room-planner__add input[type="text"] { min-height: 48px; padding: 0 18px; border: 1.5px solid var(--gift-room-popup-field-border, var(--popup-control-border)); background: var(--gift-room-popup-field-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 0.9rem; font-weight: 550; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .gift-room-wedding-dayof .gift-room-planner__add .gift-room-day-add-time { flex: 0 0 148px; padding-right: 44px; background-image: url("/assets/gift-room-icons/shared/clock.svg"); background-repeat: no-repeat; background-position: right 18px center; background-size: 18px 18px; } .gift-room-wedding-dayof .gift-room-planner__add .gift-room-day-add-time:focus, .gift-room-wedding-dayof .gift-room-planner__add .gift-room-day-add-time:focus-visible { background-image: url("/assets/gift-room-icons/shared/clock.svg"); background-repeat: no-repeat; background-position: right 18px center; background-size: 18px 18px; } .gift-room-wedding-dayof .gift-room-planner__add input[type="time"]:focus, .gift-room-wedding-dayof .gift-room-planner__add input[type="time"]:focus-visible, .gift-room-wedding-dayof .gift-room-planner__add input[type="text"]:focus, .gift-room-wedding-dayof .gift-room-planner__add input[type="text"]:focus-visible { border-color: var(--gift-room-popup-field-focus, var(--popup-focus)); background: var(--gift-room-popup-field-bg, var(--popup-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gift-room-popup-field-focus, var(--popup-focus)) 14%, transparent); outline: 0; } .gift-room-wedding-dayof .gift-room-planner__add .gift-room-day-add-time:focus, .gift-room-wedding-dayof .gift-room-planner__add .gift-room-day-add-time:focus-visible { background-color: var(--gift-room-popup-field-bg, var(--popup-bg)); background-image: url("/assets/gift-room-icons/shared/clock.svg"); background-repeat: no-repeat; background-position: right 18px center; background-size: 18px 18px; } .gift-room-wedding-dayof .gift-room-planner__add input[type="text"]::placeholder { color: var(--color-ink-muted); opacity: 0.64; } .gift-room-day-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 18px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-cream); text-align: center; } .gift-room-day-empty > span { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 12%, var(--color-cream)); color: var(--gr-accent, var(--color-forest)); font-size: 1.4rem; } .gift-room-day-empty strong { font-family: var(--font-display); font-size: 1rem; font-weight: 720; } .gift-room-day-empty p { max-width: 32rem; margin: 0; color: var(--color-ink-soft); font-size: 0.78rem; line-height: 1.35; } .gift-room-day-empty div { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .gift-room-planner__head { display: flex; flex-direction: column; gap: 0; } .gift-room-planner__head h3 { font-family: var(--font-display); font-size: 0.96rem; font-weight: 500; letter-spacing: -0.005em; color: var(--color-ink); margin: 0; } .gift-room-planner__head p { font-size: 0.7rem; color: var(--color-ink-soft); margin: 0; } .gift-room-planner__stats { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .gift-room-planner__stats > span { display: inline-flex; align-items: baseline; gap: 5px; font-size: 0.66rem; color: var(--color-ink-soft); letter-spacing: 0.04em; text-transform: uppercase; } .gift-room-planner__stats strong { font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; color: var(--color-ink); letter-spacing: -0.005em; } .gift-room-planner__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-line); border-radius: 10px; } .gift-room-planner__table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .gift-room-planner__table thead th { text-align: left; padding: 10px 12px; background: var(--color-sand); border-bottom: 1px solid var(--color-line); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft); white-space: nowrap; } .gift-room-planner__table tbody td { padding: 9px 10px; border-top: 1px solid var(--color-line); vertical-align: middle; color: var(--color-ink); } .gift-room-planner__table tbody tr:first-child td { border-top: 0; } .gift-room-planner__inline { width: 100%; background: transparent; border: 0; border-radius: 6px; padding: 7px 8px; font-family: inherit; font-size: 0.86rem; color: var(--color-ink); appearance: none; -webkit-appearance: none; transition: background .15s, box-shadow .15s; } .gift-room-planner__inline:hover { background: var(--color-sand); } .gift-room-planner__inline:focus { outline: none; background: var(--color-cream); box-shadow: inset 0 0 0 1.5px var(--color-forest); } .gift-room-planner__inline--num { text-align: right; width: 70px; } .gift-room-planner__inline--date { width: 130px; } select.gift-room-planner__inline { padding-right: 22px; background-image: url("/assets/header-icons/filter-chevron.svg"); background-repeat: no-repeat; background-size: 10px 10px; background-position: right 7px center; cursor: pointer; } .gift-room-planner__guest { display: flex; align-items: center; gap: 10px; min-width: 0; } .gift-room-planner__guest .gift-room-planner__inline { flex: 1 1 auto; min-width: 0; } .gift-room-planner__av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-forest); color: var(--color-cream); font-family: var(--font-heading); font-size: 11px; font-weight: 700; } .gift-room-planner__rsvp { font-weight: 600; border-radius: 999px; } .gift-room-planner__rsvp--accepted { background-color: color-mix(in srgb, var(--color-forest) 15%, var(--color-cream)); color: var(--color-forest); } .gift-room-planner__rsvp--pending { background-color: color-mix(in srgb, #C98A1A 17%, var(--color-cream)); color: #8a5e10; } .gift-room-planner__rsvp--declined { background-color: color-mix(in srgb, var(--color-ink) 9%, var(--color-cream)); color: var(--color-ink-soft); } .gift-room-planner__chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; } .gift-room-planner__chk input { margin: 0; accent-color: var(--color-forest); } .gift-room-planner__chk span { font-size: 0.72rem; color: var(--color-ink-soft); } .gift-room-planner__del { width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 0; font-size: 0; line-height: 1; color: var(--color-ink-soft); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; font-family: inherit; } .gift-room-planner__del img { width: 11px; height: 11px; display: block; max-width: none; } .gift-room-planner__table tr:hover .gift-room-planner__del, .gift-room-timeline__row:hover .gift-room-planner__del { opacity: 1; } .gift-room-planner__del:hover { background: rgba(200, 20, 28, 0.12); color: var(--color-alert-red); } .gift-room-planner__vote { white-space: nowrap; text-align: center; } .gift-room-planner__vote strong { display: inline-block; min-width: 22px; margin: 0 6px; font-family: var(--font-display); font-size: 0.94rem; font-weight: 500; } .gift-room-planner__voteBtn { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--color-line); background: var(--color-cream); font-family: inherit; font-size: 14px; line-height: 1; color: var(--color-ink); cursor: pointer; transition: background .15s, border-color .15s; } .gift-room-planner__voteBtn:hover { background: var(--color-sand); border-color: var(--color-ink); } .gift-room-planner__empty { padding: 18px 12px; text-align: center; font-size: 0.74rem; color: var(--color-ink-soft); } .gift-room-planner__empty--illustrated { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 26px 16px 30px; text-align: center; } .gift-room-planner__empty-art { width: min(180px, 56%); max-width: 100%; height: auto; margin-bottom: 4px; } .gift-room-planner__empty--illustrated strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.02rem; font-weight: 650; } .gift-room-planner__empty--illustrated span { max-width: 26rem; color: var(--color-ink-soft); font-size: 0.82rem; line-height: 1.35; } .gift-room-planner__empty--saved-ideas { grid-column: 1 / -1; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 28px 18px 34px; } .gift-room-planner__empty--saved-ideas .gift-room-planner__empty-art { width: min(220px, 64%); max-width: 100%; height: auto; display: block; margin: 0 auto 4px; } .gift-room-planner__empty--saved-ideas strong { max-width: 32rem; display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 1.18rem; font-weight: 780; line-height: 1.08; } .gift-room-planner__empty--saved-ideas p { max-width: 28rem; margin: 0; color: var(--color-ink-soft); font-size: 0.84rem; font-weight: 560; line-height: 1.4; } .gift-room-planner__add { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; } .gift-room-planner__add input, .gift-room-planner__add select { flex: 1 1 160px; min-width: 0; padding: 7px 11px; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 999px; font-family: inherit; font-size: 0.76rem; color: var(--color-ink); appearance: none; -webkit-appearance: none; transition: border-color .15s, background .15s; } .gift-room-planner__add input[type="number"] { flex: 0 0 100px; } .gift-room-planner__add input[type="date"] { flex: 0 0 140px; } .gift-room-planner__add select { flex: 0 0 130px; } .gift-room-planner__add input:focus, .gift-room-planner__add input:focus-visible, .gift-room-planner__add select:focus, .gift-room-planner__add select:focus-visible { outline: none; border-color: var(--popup-focus, var(--color-forest)); background: var(--color-cream); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus, var(--color-forest)) 14%, transparent); } @media (max-width: 640px) { .gift-room-planner__tablewrap { border: 0; overflow: visible; } .gift-room-planner__table thead { display: none; } .gift-room-planner__table, .gift-room-planner__table tbody, .gift-room-planner__table tr, .gift-room-planner__table td { display: block; width: 100%; } .gift-room-planner__table tr { position: relative; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-cream); padding: 4px 12px 8px; margin-bottom: 10px; } .gift-room-planner__table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--color-line); } .gift-room-planner__table tbody tr:first-child td { border-top: 1px solid var(--color-line); } .gift-room-planner__table tbody tr td:first-child { border-top: 0; padding-right: 42px; } .gift-room-planner__table td::before { content: attr(data-label); flex: 0 0 auto; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft); } .gift-room-planner__inline { width: auto; flex: 1 1 auto; max-width: 64%; text-align: right; } .gift-room-planner__chk { margin-left: auto; } .gift-room-planner__chk span { display: none; } .gift-room-planner__chk input { width: 22px; height: 22px; } .gift-room-planner__inline { min-height: 38px; } .gift-room-planner__delcell { position: absolute; top: 4px; right: 6px; width: auto; padding: 0; border-top: 0; } .gift-room-planner__delcell::before { content: none; } .gift-room-planner__delcell .gift-room-planner__del { opacity: 1; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; } .gift-room-planner__table td[colspan] { justify-content: center; } .gift-room-planner__table td[colspan]::before { content: none; } } .gift-room-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--color-line); border-radius: 10px; overflow: hidden; } .gift-room-timeline__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--color-cream); border-top: 1px solid var(--color-line); transition: background .15s; } .gift-room-timeline__row:first-child { border-top: 0; } .gift-room-timeline__row:hover { background: var(--color-sand); } .gift-room-timeline__row.is-done .gift-room-planner__inline { color: var(--color-ink-soft); text-decoration: line-through; } .gift-room-timeline__when { font-size: 0.66rem; color: var(--color-ink-soft); letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; } @media (min-width: 600px) { .gift-room-stats { grid-template-columns: repeat(4, 1fr); } .gift-room-items-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .gift-room-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .gift-room-typegrid { grid-template-columns: repeat(6, 1fr); } .gift-room-field__row { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { body.page--gift-room > main.container { padding-bottom: 100px; } .gift-room-assistant { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; } .gift-room-hero { padding: 24px 26px; border-radius: 14px; } .gift-room-hero.gift-room-hero--bleed { border-radius: 24px; } .gift-room-hero__inner { gap: 16px; } .gift-room-hero__meta { gap: 6px 22px; } .gift-room-hero__actions { flex-direction: row; align-items: center; flex-shrink: 0; } .gift-room-items-toolbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .gift-room-pills { flex: 1 1 auto; min-width: 0; min-height: 52px; align-items: center; gap: 6px; padding: 5px; background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 999px; scroll-padding-inline: 5px; } .gift-room-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 118px; height: 42px; padding: 0 16px; border: 0; } .gift-room-pill:hover { background: var(--sort-option-hover); color: var(--color-ink); } .gift-room-pill.is-active, .gift-room-pill.is-active:hover, .gift-room-pill.is-active:focus-visible { background: var(--color-ink); color: var(--color-cream); } .gift-room-items-toolbar > .gift-room-cta { flex: 0 0 auto; justify-content: center; min-width: 154px; height: 52px; background: transparent; border-color: transparent; color: var(--color-cream); transform: none; transition: none; } .gift-room-items-toolbar > .gift-room-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: transform .18s ease; pointer-events: none; } .gift-room-items-toolbar > .gift-room-cta:hover, .gift-room-items-toolbar > .gift-room-cta:focus-visible { background: transparent; border-color: transparent; color: var(--color-cream); transform: none; } .gift-room-items-toolbar > .gift-room-cta:hover::before, .gift-room-items-toolbar > .gift-room-cta:focus-visible::before { transform: scale(1.04); } .gift-room-tab-panels { padding: 16px 18px 20px; } .gift-room-shell.is-room-view .gift-room-fab, .gift-room-fab { display: none !important; } } @media (min-width: 1080px) { .gift-room-room-summary { grid-template-columns: minmax(0, 1fr) minmax(430px, 480px); grid-auto-rows: 220px; } .gift-room-hero--bleed { display: flex; height: 220px; min-height: 220px; max-height: 220px; padding: 20px 24px; } .gift-room-hero--bleed .gift-room-hero__inner { flex: 1 1 auto; height: 100%; min-height: 0; display: block; padding-right: min(340px, 42%); } .gift-room-hero__actions { position: absolute; left: 0; right: auto; bottom: 0; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; margin-top: 0; transform: none; } .gift-room-hero__meta > div { transform: none; } .gift-room-budget { height: 220px; min-height: 220px; max-height: 220px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 190px); grid-template-rows: auto minmax(0, 1fr); align-items: center; column-gap: 18px; padding: 22px 26px; overflow: hidden; } .gift-room-budget__copy { grid-column: 1; grid-row: 1; align-self: start; } .gift-room-budget__chart { grid-column: 2; grid-row: 1 / 3; margin: 0; } .gift-room-budget__gauge { max-width: 182px; } .gift-room-budget__legend { grid-column: 1; grid-row: 2; align-self: end; margin: 12px 0 0; } .gift-room-budget__head { margin-bottom: 0; } } @media (min-width: 860px) { .gift-room-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .gift-room-rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1280px) { .gift-room-rooms { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 921px) { .gift-room-room-shell { display: block; } .gift-room-tabs { flex-direction: row; align-items: center; gap: 4px; padding: 5px; margin: 0; overflow-x: auto; overflow-y: visible; scroll-snap-type: none; position: relative; top: auto; border-radius: 999px; } .gift-room-tab { flex: 0 0 auto; width: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 999px; font-size: 0.84rem; color: var(--color-ink-soft); scroll-snap-align: none; text-align: center; } .gift-room-tab__icon { width: 15px; height: 15px; } .gift-room-tab__count { min-width: 0; height: auto; padding: 0; } .gift-room-tab:hover { background: var(--sort-option-hover); } .gift-room-tab.is-active { background: var(--color-ink); color: var(--color-cream); font-weight: 760; box-shadow: none; } .gift-room-tab-panels { padding: 18px 20px 22px; min-width: 0; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: 20px; } .gift-room-items-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 720px) { body.page--gift-room > main.container { padding-top: 0; } .gift-room-shell.is-room-view #view-room { padding-top: 13px; } .gr-lobby-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 10px; row-gap: 8px; margin-bottom: 12px; padding: 14px 0 2px; text-align: left; } .gr-lobby-head__main { display: contents; } .gr-lobby-head__copy { max-width: 100%; } .gr-lobby-head__title { grid-column: 1; grid-row: 1; margin-bottom: 0; font-size: clamp(1.65rem, 7vw, 2.05rem); line-height: 1.16; font-weight: 620; } .gr-lobby-head__lead { grid-column: 1 / -1; grid-row: 2; font-size: clamp(0.9rem, 3.6vw, 1rem); line-height: 1.25; } .gr-lobby-head__row { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gr-lobby-head__row::-webkit-scrollbar { display: none; } .gr-lobby-head-tabs { flex: 0 0 auto; flex-wrap: nowrap; } .gr-lobby-head-tab { height: 36px; min-height: 36px; padding: 0 11px; font-size: 0.76rem; } .gr-lobby-head-tab__icon { width: 14px; height: 14px; } .gr-profile-card { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: auto; padding: 5px; background: var(--gr-profile-surface); border-radius: 999px; touch-action: manipulation; } .gr-profile-card__media { gap: 0; } .gr-profile-card__avatar { width: 54px; height: 54px; font-size: 1.12rem; } .gr-profile-card__body { display: none; } @media (min-width: 360px) { .gr-profile-card { grid-row: 1 / span 2; } .gr-lobby-head__lead { grid-column: 1 / 2; } } .gr-profile-card__name { font-size: 0.98rem; } .gr-profile-card__meta { overflow: hidden; font-size: 0.66rem; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; } .gift-room-cta.gr-profile-card__share { position: relative; width: 54px; height: 54px; min-height: 54px; min-width: 54px; max-width: none; flex: 0 0 54px; padding: 0; background: transparent; line-height: 1; touch-action: manipulation; } .gift-room-cta.gr-profile-card__share .gift-room-cta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } .gift-room-cta.gr-profile-card__share .gr-profile-card__share-icon { display: inline-block; width: 22px; height: 22px; } .gift-room-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; } @media (max-width: 640px) { .gift-room-rooms { grid-template-columns: minmax(0, 1fr); } } .gift-room-card { height: 100%; } .gift-room-create-card { display: grid; place-items: stretch; align-self: start; height: auto; min-height: 0; aspect-ratio: 1 / 1; } .gift-room-card__cover { --gr-card-action-edge: 8px; --gr-card-action-gap: 7px; --gr-card-action-size: 44px; aspect-ratio: 4 / 3; padding: 9px; } .gift-room-create-card__cover { aspect-ratio: 1 / 1; min-height: 0; } .gift-room-create-card__button { min-height: 0; padding: 0; font-size: inherit; } .gift-room-create-card__copy { max-width: 20ch; } .gift-room-card__media-grid { grid-template-columns: minmax(0, 2fr) minmax(42px, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1px; } .gift-room-card__media-grid[data-media-count="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .gift-room-card__media-grid[data-media-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); } .gift-room-card__media-tile { display: none; } .gift-room-card__media-tile--primary { grid-row: 1 / span 2; } .gift-room-card__media-grid[data-media-count="1"] .gift-room-card__media-tile, .gift-room-card__media-grid[data-media-count="2"] .gift-room-card__media-tile { grid-row: 1; } .gift-room-card__countdown { top: 10px; left: 9px; max-width: calc(100% - 58px); padding: 3px 7px; font-size: 0.58rem; } .gr-pin-btn { top: var(--gr-card-action-edge); right: calc(var(--gr-card-action-edge) + var(--gr-card-action-size) + var(--gr-card-action-gap)); width: var(--gr-card-action-size); height: var(--gr-card-action-size); opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); } .gift-room-card__menu-btn { top: var(--gr-card-action-edge); right: var(--gr-card-action-edge); width: var(--gr-card-action-size); height: var(--gr-card-action-size); display: inline-flex; opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); } .gift-room-card__privacy-status, .gift-room-card.is-pinned:not(:hover):not(:focus-within):not(:has(.gift-room-card__menu-btn.is-open)) .gift-room-card__privacy-status, .gift-room-card:hover .gift-room-card__privacy-status, .gift-room-card:focus-within .gift-room-card__privacy-status, .gift-room-card:has(.gift-room-card__menu-btn.is-open) .gift-room-card__privacy-status { top: var(--gr-card-action-edge); right: calc(var(--gr-card-action-edge) + ((var(--gr-card-action-size) + var(--gr-card-action-gap)) * 2)); width: var(--gr-card-action-size); height: var(--gr-card-action-size); display: inline-flex; opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); } .gift-room-card.is-pinned:not(:hover):not(:focus-within):not(:has(.gift-room-card__menu-btn.is-open)) .gr-pin-btn, .gift-room-card:hover .gr-pin-btn, .gift-room-card:focus-within .gr-pin-btn, .gift-room-card:has(.gift-room-card__menu-btn.is-open) .gr-pin-btn, .gr-pin-btn:focus-visible { right: calc(var(--gr-card-action-edge) + var(--gr-card-action-size) + var(--gr-card-action-gap)); transform: translateX(0) scale(1); } .gift-room-card:hover .gift-room-card__menu-btn, .gift-room-card:focus-within .gift-room-card__menu-btn, .gift-room-card__menu-btn.is-open, .gift-room-card__menu-btn:focus-visible { transform: translateX(0) scale(1); } .gift-room-card__menu-btn .gift-room-icon, .gr-pin-btn .gift-room-icon, .gift-room-card__privacy-status .gift-room-icon { width: 20px; height: 20px; } .gift-room-card__body { padding: 8px 9px 9px; gap: 4px; flex: 1 1 auto; } .gift-room-card__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.78rem; line-height: 1.1; } .gift-room-card__date { overflow: hidden; text-overflow: ellipsis; font-size: 0.58rem; white-space: nowrap; } .budget-bar { gap: 3px; } .budget-bar__meta { gap: 6px; font-size: 0.55rem; } .budget-bar__meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crew-row { min-height: 22px; } .gift-room-avatar { width: 20px; height: 20px; font-size: 0.54rem; border-width: 1.5px; } .crew-row__progress { display: none; } .gift-room-breadcrumb { min-height: 34px; margin: 0 0 12px; padding: 0 6px; gap: 5px; border-radius: 999px; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 650; line-height: 1; } .gift-room-breadcrumb svg { flex-basis: 15px; width: 15px; height: 15px; } .gift-room-hero--bleed { margin: 0; padding: 12px; border-radius: 20px; } .gift-room-hero__inner { gap: 10px; } .gift-room-hero__label { max-width: calc(100% - 116px); margin-bottom: 6px; font-size: 0.58rem; line-height: 1.15; } .gift-room-hero__title { margin-bottom: 8px; font-size: clamp(1.28rem, 6.5vw, 1.55rem); line-height: 1.06; } .gift-room-hero__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding-top: 9px; } .gift-room-hero__meta > div { min-width: 0; gap: 3px; } .gift-room-hero__meta strong { font-size: 0.52rem; line-height: 1; } .gift-room-hero__meta span { overflow: hidden; font-size: 0.82rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .gift-room-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 0; } .gift-room-hero__actions .gift-room-cta { width: 100%; height: 42px; min-height: 42px; justify-content: center; padding: 0 12px; font-size: 0.76rem; } .gift-room-budget { display: grid; grid-template-columns: minmax(0, 1fr) minmax(126px, 36%); grid-template-areas: "copy chart" "legend chart"; align-items: center; column-gap: 12px; row-gap: 8px; min-height: 154px; height: auto; margin: 0; padding: 16px 16px; border-radius: 20px; overflow: hidden; } .gift-room-budget__copy { grid-area: copy; } .gift-room-budget__head { margin-bottom: 0; } .gift-room-budget__head h4 { font-size: 1.18rem; line-height: 1.05; } .gift-room-budget__head .summary { overflow: visible; font-size: 0.78rem; line-height: 1.26; text-overflow: clip; white-space: normal; } .gift-room-budget__chart { grid-area: chart; justify-content: flex-end; margin: 0; } .gift-room-budget__gauge { width: min(100%, 146px); max-width: 146px; } .gift-room-budget__legend { grid-area: legend; gap: 5px; overflow: hidden; margin: 0; font-size: 0.7rem; } .gift-room-budget__legend > span:nth-child(n+4) { display: none; } .gift-room-budget__legend > span { flex: 0 1 auto; } .gift-room-room-shell { margin-bottom: 18px; } .gift-room-tabs { padding: 5px; } .gift-room-tab { min-height: 36px; padding: 7px 11px; font-size: 0.76rem; } .gift-room-tab-panels { padding: 12px; } .gift-room-items-toolbar { gap: 10px; margin-bottom: 12px; } .gift-room-items-toolbar > .gift-room-cta { width: max-content; height: 38px; align-self: flex-start; padding: 0 16px; background: var(--color-forest); border-color: transparent; color: var(--color-cream); font-size: 0.78rem; transform: none; } .gift-room-items-toolbar > .gift-room-cta:hover, .gift-room-items-toolbar > .gift-room-cta:focus-visible { background: var(--color-forest); color: var(--color-cream); transform: none; } .gift-room-items-toolbar > .gift-room-cta .gift-room-cta__plus { color: var(--color-cream); } .gift-room-shell.is-room-view .gift-room-fab, .gift-room-fab { display: none !important; } .gift-room-profile-share-overlay { --gift-room-share-modal-mobile-top: clamp(108px, 17dvh, 164px); } #gift-room-invite-overlay, #gift-room-additem-overlay, #gift-room-story-prompt-overlay { --gift-room-basic-modal-mobile-offset: calc(env(safe-area-inset-top, 0px) + clamp(96px, 15dvh, 144px)); } .gift-room-share-modal, #gift-room-invite-overlay .gift-room-modal, #gift-room-additem-overlay .gift-room-modal, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal { height: auto; min-height: 0; overflow: hidden; } .gift-room-share-modal { max-height: calc(100vh - var(--gift-room-share-modal-mobile-offset)); max-height: calc(100dvh - var(--gift-room-share-modal-mobile-offset)); } #gift-room-invite-overlay .gift-room-modal, #gift-room-additem-overlay .gift-room-modal, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal, #gift-room-plan-step-overlay .gift-room-plan-step-modal { max-height: calc(100vh - var(--gift-room-basic-modal-mobile-offset)); max-height: calc(100dvh - var(--gift-room-basic-modal-mobile-offset)); } .gift-room-share-modal__sheet-grip, #gift-room-invite-overlay .gift-room-modal__sheet-grip, #gift-room-additem-overlay .gift-room-modal__sheet-grip, #gift-room-story-prompt-overlay .gift-room-modal__sheet-grip, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__sheet-grip, #gift-room-plan-step-overlay .gift-room-plan-step-modal__sheet-grip { flex-basis: 44px; min-height: 44px; background: var(--popup-bg); } .gift-room-share-modal__sheet-grip span, #gift-room-invite-overlay .gift-room-modal__sheet-grip span, #gift-room-additem-overlay .gift-room-modal__sheet-grip span, #gift-room-story-prompt-overlay .gift-room-modal__sheet-grip span, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__sheet-grip span, #gift-room-plan-step-overlay .gift-room-plan-step-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); } .gift-room-share-modal__head, #gift-room-plan-step-overlay .gift-room-plan-step-modal__head, #gift-room-story-prompt-overlay .gift-room-modal__head { padding: 4px 14px 10px; } .gift-room-share-modal .gift-room-modal__title, #gift-room-plan-step-overlay .gift-room-modal__title, #gift-room-story-prompt-overlay .gift-room-modal__title { font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); } .gift-room-share-modal .gift-room-modal__subtitle, #gift-room-plan-step-overlay .gift-room-modal__subtitle, #gift-room-story-prompt-overlay .gift-room-modal__subtitle { margin-top: 4px; font-size: 0.76rem; line-height: 1.32; } .gift-room-share-modal__body, #gift-room-plan-step-overlay .gift-room-plan-step-modal__body, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__body, #gift-room-story-prompt-overlay .gift-room-modal__body { flex: 0 1 auto; min-height: 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .gift-room-share-modal__body { max-height: calc(100vh - var(--gift-room-share-modal-mobile-offset) - 80px); max-height: calc(100dvh - var(--gift-room-share-modal-mobile-offset) - 80px); gap: 10px; } #gift-room-invite-overlay .gift-room-modal__head, #gift-room-additem-overlay .gift-room-modal__head, #gift-room-story-prompt-overlay .gift-room-modal__head { padding: 12px 14px 9px; } #gift-room-invite-overlay .gift-room-modal__body, #gift-room-additem-overlay .gift-room-modal__body, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__body, #gift-room-story-prompt-overlay .gift-room-modal__body { flex: 0 1 auto; max-height: calc(100vh - var(--gift-room-basic-modal-mobile-offset) - 132px); max-height: calc(100dvh - var(--gift-room-basic-modal-mobile-offset) - 132px); padding: 4px 14px 12px; } #gift-room-invite-overlay .gift-room-modal__foot, #gift-room-additem-overlay .gift-room-modal__foot, #gift-room-story-prompt-overlay .gift-room-modal__foot { padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)); } .gr-share-actions { gap: 12px; margin: -8px -9px 0; padding: 9px 9px 8px; scroll-padding-inline: 9px; } .gr-share-action { flex-basis: 82px; width: 82px; min-height: 96px; gap: 7px; font-size: 0.72rem; line-height: 1.08; } .gr-share-action > span:not(.gr-share-action__icon) { display: block; width: 100%; font-size: 0.58rem; line-height: 1.04; } .gr-share-action__icon { width: 64px; height: 64px; } .gr-share-action__icon img { width: 52px; height: 52px; } .gr-share-action__icon--copy img { width: 26px; height: 26px; } .gr-share-search { min-height: 52px; border-radius: 999px; } .gr-share-search input { height: 52px; font-size: 16px; } .gr-share-person { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 9px; } .gr-share-person__avatar { width: 46px; height: 46px; font-size: 0.78rem; } .gr-share-person__name { font-size: 0.82rem; } .gr-share-person__handle { font-size: 0.7rem; } .gr-share-person__send { min-width: 104px; height: 38px; font-size: 0.76rem; } #gift-room-invite-overlay, #gift-room-additem-overlay, #gift-room-story-prompt-overlay { --gift-room-basic-modal-mobile-offset: calc(env(safe-area-inset-top, 0px) + clamp(84px, 13dvh, 128px)); } #gift-room-invite-overlay .gift-room-modal, #gift-room-additem-overlay .gift-room-modal, #gift-room-plan-step-overlay .gift-room-plan-step-modal { height: calc(100vh - var(--gift-room-basic-modal-mobile-offset)); height: calc(100dvh - var(--gift-room-basic-modal-mobile-offset)); max-height: none; } #gift-room-story-prompt-overlay .gift-room-story-prompt-modal { height: calc(100vh - var(--gift-room-basic-modal-mobile-offset)); height: calc(100dvh - var(--gift-room-basic-modal-mobile-offset)); max-height: none; } #gift-room-invite-overlay .gift-room-modal__body, #gift-room-additem-overlay .gift-room-modal__body, #gift-room-story-prompt-overlay .gift-room-story-prompt-modal__body, #gift-room-story-prompt-overlay .gift-room-modal__body { flex: 1 1 auto; max-height: none; } } @media (max-width: 420px) { .gr-lobby-head__title { font-size: 1.65rem; } .gr-lobby-head__lead { font-size: 0.86rem; } .gift-room-hero--bleed { padding: 13px; } .gift-room-hero__label { max-width: calc(100% - 96px); } .gift-room-hero__title { font-size: 1.34rem; } .gift-room-hero__actions .gift-room-cta { height: 42px; min-height: 42px; font-size: 0.76rem; } .gift-room-budget { grid-template-columns: minmax(0, 1fr) minmax(112px, 124px); column-gap: 8px; min-height: 146px; padding: 13px; } .gift-room-budget__gauge { width: min(100%, 124px); max-width: 124px; } .gr-profile-card { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 6px; padding: 5px; } .gr-profile-card__avatar { width: 54px; height: 54px; font-size: 1.08rem; } .gift-room-cta.gr-profile-card__share { width: 54px; height: 54px; min-width: 54px; min-height: 54px; max-width: none; flex-basis: 54px; padding: 0; font-size: 0; } .gr-share-action { flex-basis: 89px; width: 89px; } .gr-lobby-tabs { gap: 8px; } .gr-lobby-tabs__list { padding-right: 8px; } .gr-lobby-tab { padding-inline: 9px; font-size: 0.8rem; } .gr-lobby-tab[data-lobby-tab="rooms"] { min-width: 114px; } .gr-lobby-tab[data-lobby-tab="ideas"] { min-width: 104px; } .gr-lobby-tab[data-lobby-tab="archive"] { min-width: 112px; } .gr-lobby-tabs__actions .gift-room-cta { width: 44px; height: 44px; min-width: 44px; min-height: 44px; justify-content: center; padding: 0; } .gr-lobby-tabs__actions .gift-room-cta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .gr-lobby-tabs__actions .gift-room-cta__plus { width: 16px; height: 16px; } } @media (max-width: 720px) { .gr-lobby-head__row { gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 0 2px 4px; scroll-padding-inline: 2px; } .gr-lobby-tabs-shell { margin: 2px 0 10px; } .gr-lobby-tabs-shell .gr-lobby-head__row { margin-top: 2px; } .gr-lobby-head-tabs { display: contents; flex: 0 0 auto; flex-wrap: nowrap; gap: 14px; } .gr-lobby-head-tab, .gr-lobby-head__row [data-upcoming="calendar-overview"] { flex: 0 0 auto; height: 44px; min-height: 44px; min-width: max-content; padding: 0 13px; font-size: 0.88rem; gap: 8px; } .gr-lobby-head-tab__icon { width: 17px; height: 17px; flex-basis: 17px; } .gr-lobby-head__row [data-upcoming="calendar-overview"] .gift-room-icon { width: 17px; height: 17px; flex-basis: 17px; } .gr-lobby-tabs-shell { min-height: 112px; position: sticky; top: var(--gift-room-mobile-header-clearance, 68px); z-index: 140; background: var(--color-page-bg); isolation: isolate; } body.is-gift-room-lobby-ideas .gr-lobby-tabs-shell { min-height: 104px; } .gr-lobby-sticky-frame { gap: 6px; z-index: 130; } .gr-lobby-tabs { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "secondary actions"; align-items: center; gap: 0 10px; min-height: 56px; transform: none; } body.is-gift-room-lobby-ideas .gr-lobby-tabs { gap: 0; min-height: 72px; } body.is-gift-room-lobby-ideas .gr-lobby-secondary { display: none; min-height: 0; } body.is-gift-room-lobby-ideas .gr-lobby-tabs__actions { display: none; } .gr-lobby-tabs__list { grid-area: primary; flex: 0 0 auto; width: 100%; padding-right: 0; scroll-padding-inline: 0; } .gr-lobby-secondary { grid-area: secondary; width: 100%; min-height: 56px; min-width: 0; } .gr-lobby-secondary__group { width: 100%; gap: 10px; padding: 0 1px 1px; } .gr-lobby-secondary__icon, .gr-lobby-secondary__chip { --gr-lobby-secondary-y: 0px; height: 56px; min-height: 56px; font-size: 0.9rem; } .gr-lobby-secondary__icon { width: 56px; min-width: 56px; } .gr-lobby-secondary__icon-glyph { width: 22px; height: 22px; flex-basis: 22px; } .gr-lobby-secondary__chip { padding: 0 18px; } .gr-lobby-tabs__actions { grid-area: actions; align-self: center; width: auto; justify-content: flex-end; } .gr-lobby-tabs__actions .gift-room-cta { width: 56px; min-width: 56px; height: 56px; min-height: 56px; justify-content: center; padding: 0; font-size: 0.86rem; } .gr-lobby-tabs__actions .gift-room-cta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .gr-lobby-tabs__actions .gift-room-cta__plus { width: 17px; height: 17px; } .gr-my-ideas-sort__button { height: 56px; padding: 0 18px; font-size: 0.9rem; } .gr-my-ideas-sort__icon { width: 22px; height: 22px; flex-basis: 22px; } .gr-lobby-filter-menu, .gr-my-ideas-sort__menu.gr-lobby-filter-menu { position: fixed; inset: auto 0 calc(max(var(--mobile-bottom-nav-height, 72px), 72px) + env(safe-area-inset-bottom)) 0; z-index: 12160; width: auto; max-width: none; max-height: min(50vh, 420px); padding: 7px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-radius: var(--popup-sheet-radius, 22px 22px 0 0); overflow: auto; transform: translate3d(0, var(--gr-lobby-filter-menu-drag-y, 0px), 0); touch-action: pan-y; animation: gr-lobby-filter-sheet-in 0.2s cubic-bezier(0.22, 1, 0.36, 1); overscroll-behavior: contain; } .gr-lobby-filter-menu.is-sheet-dragging, .gr-lobby-filter-menu.is-sheet-settling, .gr-lobby-filter-menu.is-sheet-closing { animation: none; } .gr-lobby-filter-menu.is-sheet-settling, .gr-lobby-filter-menu.is-sheet-closing { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .gr-lobby-filter-menu.is-sheet-closing { pointer-events: none; } .gr-lobby-filter-menu__sheet-grip { appearance: none; width: 100%; min-height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: var(--popup-bg); color: var(--color-ink-soft); cursor: grab; touch-action: none; } .gr-lobby-filter-menu__sheet-grip:active { cursor: grabbing; } .gr-lobby-filter-menu__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .gr-lobby-filter-menu__eyebrow { padding-top: 6px; } .gr-lobby-filter-menu__option { min-height: 50px; border-radius: 20px; font-size: 14px; } .gr-lobby-secondary__icon, .gr-lobby-secondary__chip { transform: none; transition: color .18s ease, background-color .18s ease, box-shadow .18s ease; } .gr-lobby-secondary__icon::before, .gr-lobby-secondary__chip::before { inset: 0; transform: none; transition: background-color .18s ease, box-shadow .18s ease; } .gr-lobby-secondary__icon:hover, .gr-lobby-secondary__icon:focus-visible, .gr-lobby-secondary__chip:hover, .gr-lobby-secondary__chip:focus-visible, .gr-lobby-secondary__icon.is-active:hover, .gr-lobby-secondary__icon.is-active:focus-visible, .gr-lobby-secondary__icon[aria-pressed="true"]:hover, .gr-lobby-secondary__icon[aria-pressed="true"]:focus-visible, .gr-lobby-secondary__chip.is-active:hover, .gr-lobby-secondary__chip.is-active:focus-visible, .gr-lobby-secondary__chip[aria-pressed="true"]:hover, .gr-lobby-secondary__chip[aria-pressed="true"]:focus-visible { transform: none; } .gr-lobby-secondary__icon:hover::before, .gr-lobby-secondary__icon:focus-visible::before, .gr-lobby-secondary__icon:active::before, .gr-lobby-secondary__chip:hover::before, .gr-lobby-secondary__chip:focus-visible::before, .gr-lobby-secondary__chip:active::before { transform: none; } .gr-lobby-tabs__actions .gift-room-cta, .gr-lobby-tabs__actions .gift-room-cta:hover, .gr-lobby-tabs__actions .gift-room-cta:focus-visible, .gr-lobby-tabs__actions .gift-room-cta:active { transform: none; transition: color .18s ease, background-color .18s ease, box-shadow .18s ease; will-change: auto; } .gr-lobby-tabs__actions .gift-room-cta::before, .gr-lobby-tabs__actions .gift-room-cta:hover::before, .gr-lobby-tabs__actions .gift-room-cta:focus-visible::before, .gr-lobby-tabs__actions .gift-room-cta:active::before { transform: none; transition: background-color .18s ease, box-shadow .18s ease; will-change: auto; } .gr-lobby-tabs__actions .gift-room-cta__plus, .gr-lobby-tabs__actions .gift-room-cta__label, .gr-lobby-tabs__actions .gift-room-cta:hover .gift-room-cta__plus, .gr-lobby-tabs__actions .gift-room-cta:focus-visible .gift-room-cta__plus, .gr-lobby-tabs__actions .gift-room-cta:active .gift-room-cta__plus, .gr-lobby-tabs__actions .gift-room-cta:hover .gift-room-cta__label, .gr-lobby-tabs__actions .gift-room-cta:focus-visible .gift-room-cta__label, .gr-lobby-tabs__actions .gift-room-cta:active .gift-room-cta__label { transform: none; } } @media (max-width: 360px) { .gr-lobby-tabs-shell { min-height: 100px; } .gr-lobby-tabs { min-height: 46px; gap: 0 8px; } .gr-lobby-head__row { gap: 8px; padding-bottom: 4px; } .gr-lobby-head-tab, .gr-lobby-head__row [data-upcoming="calendar-overview"] { height: 40px; min-height: 40px; padding: 0 10px; gap: 6px; font-size: 0.8rem; } .gr-lobby-head-tab__icon { width: 15px; height: 15px; flex-basis: 15px; } .gr-lobby-head__row [data-upcoming="calendar-overview"] .gift-room-icon { width: 15px; height: 15px; flex-basis: 15px; } .gr-lobby-secondary { min-height: 46px; } .gr-lobby-secondary__group { gap: 7px; padding-right: 2px; } .gr-lobby-secondary__icon, .gr-lobby-secondary__chip { height: 46px; min-height: 46px; font-size: 0.82rem; } .gr-lobby-secondary__icon { width: 46px; min-width: 46px; } .gr-lobby-secondary__icon-glyph { width: 19px; height: 19px; flex-basis: 19px; } .gr-lobby-secondary__chip { padding: 0 13px; } .gr-lobby-tabs__actions .gift-room-cta { width: 46px; min-width: 46px; height: 46px; min-height: 46px; } } @keyframes gr-lobby-filter-sheet-in { from { transform: translate3d(0, calc(100% + 24px), 0); } to { transform: translate3d(0, var(--gr-lobby-filter-menu-drag-y, 0px), 0); } } @media (prefers-reduced-motion: reduce) { .gift-room-view.is-active, .gift-room-tab-content.is-active, .gift-room-card, .gift-room-item, .gift-room-cta, .gift-room-pill, .gr-lobby-tabs, .gr-lobby-head__pulse, .gift-room-stat__pulse { animation: none !important; transition: none !important; } } @media (max-width: 640px) { .gift-room-hero__label { font-size: 0.7rem; } .gift-room-hero__meta strong { font-size: 0.72rem; } .gift-room-hero__meta span { font-size: 1rem; } .gift-room-budget__head .summary { overflow: visible; text-overflow: clip; white-space: normal; font-size: 0.72rem; line-height: 1.28; } .gift-room-budget__legend { font-size: 0.68rem; gap: 4px; } .gift-room-budget__legend .dot { width: 9px; height: 9px; flex-basis: 9px; } .gift-room-budget__gauge-value { font-size: 28px; } .gift-room-budget__gauge-label { font-size: 10px; } .gift-room-tab > span:not(.gift-room-tab__count) { font-size: 0.84rem; } .gift-room-tab__count { min-width: 22px; height: 22px; padding: 0 7px; font-size: 0.68rem; line-height: 1; } .gift-room-tab__icon { width: 16px; height: 16px; } .gift-room-pill { font-size: 0.8rem; padding: 7px 13px; } .gift-room-item__title { font-size: 0.95rem; } .gift-room-item__price { font-size: 1.02rem; } .gift-room-item__status { font-size: 0.64rem; } .gift-room-item__claim { font-size: 0.76rem; } .gift-room-item__claim .gift-room-avatar { width: 20px; height: 20px; font-size: 0.58rem; } .gift-room-item__action { font-size: 0.82rem; } .gift-room-task__text { font-size: 0.95rem; } .gift-room-task__owner { font-size: 0.74rem; } .gift-room-planner__head h3 { font-size: 1.05rem; } .gift-room-planner__stats > span { font-size: 0.72rem; } .gift-room-planner__stats strong { font-size: 1rem; } .gift-room-planner__table td::before { font-size: 0.7rem; } .gift-room-planner__inline { font-size: 0.95rem; } } #gift-room-invite-overlay .gift-room-invite-modal { overflow: visible; } @media (max-width: 720px) { #gift-room-invite-overlay .gift-room-invite-modal__close.header-auth-close { top: auto; left: auto; right: 0; bottom: calc(100% + 10px); } #gift-room-invite-overlay .gift-room-invite-modal .gift-room-modal__body { max-height: calc(100vh - var(--gift-room-basic-modal-mobile-offset) - 88px); max-height: calc(100dvh - var(--gift-room-basic-modal-mobile-offset) - 88px); padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 720px) { .collection-modal__title, .gift-room-modal__title, .gift-room-share-modal .gift-room-modal__title, .gift-room-settings-modal__header .collection-modal__title, .gift-room-submodal__title.collection-modal__title, #gift-room-plan-step-overlay .gift-room-modal__title { font-size: var(--popup-title-size, 25px) !important; line-height: var(--popup-title-line-height, 1.16) !important; } } .gift-room-workspace-frame { gap: 14px; } .gift-room-plan-rail { display: none; } .gift-room-workspace-summary { display: none; } body.page--gift-room.is-gift-room-room-view { padding-top: 0 !important; } .gift-room-tabs[data-room-type="wedding"] { scroll-padding-inline: 5px; overflow-y: visible; padding-block: 5px; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="tasks"], .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="crew"] { display: none; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab__secondary { display: none; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab { min-height: 48px; padding-block: 5px; line-height: 1.16; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab > span:not(.gift-room-tab__count) { display: inline-flex; align-items: center; line-height: 1.16; padding-block: 0.14em 0.2em; overflow: visible; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab__count { display: inline-flex; align-items: center; line-height: 1.14; } .gift-room-tabbar .gift-room-tab--chat, .gift-room-tabbar .gift-room-tab--chat:hover, .gift-room-tabbar .gift-room-tab--chat:focus-visible, .gift-room-tabbar .gift-room-tab--chat.is-active { background: transparent; color: var(--color-cream); border-color: transparent; box-shadow: none; transform: none; } .gift-room-tabbar .gift-room-tab--chat .gift-room-tab__icon, .gift-room-tabbar .gift-room-tab--chat.is-active .gift-room-tab__icon { color: var(--color-cream); } .gift-room-tabbar .gift-room-tab--chat .gift-room-tab__count { display: none; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="seating"] { order: 1; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="guests"] { order: 2; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="invitations"] { order: 3; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="vendors"] { order: 4; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="looks"] { order: 5; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="saved"] { order: 6; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="items"] { order: 7; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="timeline"] { order: 8; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="chat"] { order: 9; } .gift-room-tabs[data-room-type="wedding"] .gift-room-tab[data-tab="overview"] { order: 10; } @media (max-width: 720px) { .gift-room-tabbar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; } .gift-room-tabbar .gift-room-tabs { width: 100%; gap: 8px; padding: 0 30px 2px 0; border: 0; border-radius: 0; background: transparent; scroll-padding-inline: 0 30px; mask-image: linear-gradient(to right, black calc(100% - 34px), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 34px), transparent); } .gift-room-tabbar .gift-room-tabs .gift-room-tab { flex: 0 0 auto; border: 1px solid var(--color-line); background: var(--popup-bg); box-shadow: none; } .gift-room-tabbar .gift-room-tabs .gift-room-tab:not(.is-active):hover, .gift-room-tabbar .gift-room-tabs .gift-room-tab:not(.is-active):focus-visible { background: var(--popup-hover); color: var(--color-ink); } .gift-room-tabbar .gift-room-tabs .gift-room-tab.is-active { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-cream); } .gift-room-tabbar .gift-room-tab--chat { width: 100%; min-height: 48px; justify-self: stretch; align-self: stretch; justify-content: center; padding-inline: 18px; } } .gift-room-tab-panels { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .gift-room-items-toolbar { padding: 16px; border: 1px solid var(--color-line); border-radius: 20px; background: color-mix(in srgb, var(--popup-bg) 96%, transparent); box-shadow: none; } .gift-room-gifts-workspace { gap: 14px; border-radius: 24px; } .gift-room-gifts-stage { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; padding: 16px; border: 1px solid var(--color-line); border-radius: 20px; background: linear-gradient(120deg, color-mix(in srgb, var(--color-cream) 92%, transparent), color-mix(in srgb, var(--color-sand) 88%, transparent)), var(--color-cream); } .gift-room-gifts-stage__copy { min-width: 0; display: grid; align-content: center; gap: 4px; } .gift-room-gifts-stage__copy span { color: var(--color-forest); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 780; letter-spacing: 0.1em; text-transform: uppercase; } .gift-room-gifts-stage__copy h3 { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.05rem); font-weight: 720; line-height: 1; } .gift-room-gifts-stage__copy p { max-width: 38rem; margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 620; line-height: 1.35; } .gift-room-gifts-stage__score { min-width: 116px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 18px; background: var(--color-ink); color: var(--color-cream); text-align: center; } .gift-room-gifts-stage__score strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 720; line-height: 1; } .gift-room-gifts-stage__score span { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 760; letter-spacing: 0.04em; text-transform: uppercase; } .gift-room-gifts-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gift-room-gifts-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .gift-room-gifts-toolbar__label { min-width: 112px; display: grid; gap: 1px; } .gift-room-gifts-toolbar__label strong { color: var(--color-ink); font-family: var(--font-display); font-size: 0.98rem; font-weight: 720; line-height: 1.05; } .gift-room-gifts-toolbar__label span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 680; } .gift-room-gifts-toolbar .gift-room-pills { min-width: 0; justify-content: center; } .gift-room-gifts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .gift-room-gift-card { min-width: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-cream); } .gift-room-gift-card:hover { border-color: color-mix(in srgb, var(--color-forest) 28%, var(--color-line)); background: var(--color-cream); } .gift-room-gift-card__visual { aspect-ratio: auto; height: clamp(136px, 14vw, 190px); min-height: 132px; display: flex; align-items: center; justify-content: center; border-radius: 0; background: var(--filter-pill-bg, var(--color-sand-dark)); } .gift-room-gift-card__icon { width: 68px; height: 68px; display: inline-flex; align-items: center; justify-content: center; border-radius: 22px; background: var(--color-cream); color: var(--color-ink); } .gift-room-gift-card__icon .gift-room-item__icon { width: 40px; height: 40px; } .gift-room-gift-card__body { display: flex; flex-direction: column; gap: 9px; padding: 14px; } .gift-room-gift-card .gift-room-item__title { font-size: 1rem; line-height: 1.1; } .gift-room-gift-card .gift-room-item__price { color: var(--color-forest); } .gift-room-gift-card .gift-room-item__claim { min-height: 32px; } .gift-room-gift-card .gift-room-item__action { width: 100%; justify-content: center; } @media (max-width: 1180px) { .gift-room-gifts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 880px) { .gift-room-gifts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gift-room-gifts-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 34px 16px; border: 1px dashed var(--color-line); border-radius: 18px; background: var(--color-cream); text-align: center; } .gift-room-gifts-empty__icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--color-sand); color: var(--color-forest); } .gift-room-gifts-empty strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; } .gift-room-gifts-empty p { max-width: 25rem; margin: 0; color: var(--color-ink-soft); font-size: 0.78rem; line-height: 1.35; } .gift-room-crew-workspace { gap: 14px; } .gift-room-crew-toolbar { padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-cream); } .gift-room-crew-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gift-room-crew-card { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-cream); } .gift-room-crew-card__body { min-width: 0; display: grid; gap: 2px; } .gift-room-crew-card__body strong { overflow: hidden; color: var(--color-ink); font-family: var(--font-display); font-size: 0.98rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; } .gift-room-crew-card__body span { overflow: hidden; color: var(--color-ink-soft); font-size: 0.72rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; } .gift-room-crew-card__remove { position: static; } .gift-room-seating-grid, .gift-room-saved-ideas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .gift-room-seating-card, .gift-room-saved-idea-card, .gift-room-overview-card { min-width: 0; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-cream); } .gift-room-seating-card { display: grid; gap: 10px; padding: 15px; } .gift-room-seating-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .gift-room-seating-card__head strong, .gift-room-saved-idea-card strong, .gift-room-overview-step strong { color: var(--color-ink); font-family: var(--font-display); font-size: 0.98rem; font-weight: 720; line-height: 1.1; } .gift-room-seating-card__head span, .gift-room-seating-card p, .gift-room-saved-idea-card span, .gift-room-saved-idea-card em { margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 650; line-height: 1.3; } .gift-room-seating-card__avatars { display: flex; align-items: center; gap: 0; min-height: 34px; } .gift-room-seating-card__avatars .gift-room-avatar { width: 32px; height: 32px; margin-left: -7px; border: 2px solid var(--color-cream); font-size: 0.62rem; } .gift-room-seating-card__avatars .gift-room-avatar:first-child { margin-left: 0; } .gift-room-seating-card__empty { color: var(--color-ink-soft); font-size: 0.72rem; } .gift-room-saved-idea-card { display: grid; gap: 7px; justify-items: start; padding: 15px; } .gift-room-saved-idea-card__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--color-sand); color: var(--color-forest); } .gift-room-saved-idea-card__icon .gift-room-item__icon { width: 26px; height: 26px; } .gift-room-saved-idea-card em { padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 7%, transparent); font-style: normal; text-transform: capitalize; } @property --overview-progress { syntax: ""; inherits: true; initial-value: 0; } .gift-room-overview-card { --overview-progress: 0; display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 14px; padding: 16px; position: relative; overflow: hidden; border: 1px solid var(--color-line); border-radius: 22px; background: color-mix(in srgb, var(--popup-bg) 96%, transparent); } .gift-room-tab-content > .gift-room-planner[data-planner].gift-room-overview-pane { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; } .gift-room-tab-content > .gift-room-planner[data-planner].gift-room-overview-pane:focus, .gift-room-tab-content > .gift-room-planner[data-planner].gift-room-overview-pane:focus-visible { outline: none; } .gift-room-overview-card::before { content: none; } .gift-room-overview-card__head { position: relative; z-index: 1; min-width: 0; display: grid; gap: 4px; } .gift-room-overview-card__head h3 { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 2.2rem); font-weight: 760; line-height: 1.08; letter-spacing: 0; } .gift-room-overview-card__head p { max-width: 58rem; margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; line-height: 1.35; } .gift-room-overview-card__score { --overview-edge-width: 148px; position: relative; isolation: isolate; width: 100%; min-height: 70px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "percent spacer next" "label spacer next"; align-items: center; gap: 2px 18px; padding: 10px 16px 10px 20px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--color-line) 82%, var(--color-cream)); background: color-mix(in srgb, var(--popup-bg) 96%, transparent); color: var(--color-cream); overflow: hidden; text-align: left; box-shadow: none; animation: giftRoomOverviewScoreIn 0.44s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .gift-room-overview-card__score::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 0; width: min(100%, calc((var(--overview-progress) * 1%) + var(--overview-edge-width))); min-width: 0; border-radius: 22px 0 0 22px; background: linear-gradient(90deg, var(--color-ink) 0%, color-mix(in srgb, var(--color-ink) 76%, var(--color-forest)) 42%, color-mix(in srgb, var(--color-forest) 78%, var(--color-ink)) 68%, var(--color-forest) 100%); mask-image: linear-gradient( to right, black 0%, black 76%, rgba(0, 0, 0, 0.72) 86%, rgba(0, 0, 0, 0.22) 94%, transparent 100% ); -webkit-mask-image: linear-gradient( to right, black 0%, black 76%, rgba(0, 0, 0, 0.72) 86%, rgba(0, 0, 0, 0.22) 94%, transparent 100% ); animation: giftRoomOverviewFillIn 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .gift-room-overview-card__score::after { content: none; } .gift-room-overview-card__score strong { position: relative; z-index: 1; grid-area: percent; font-family: var(--font-display); font-size: clamp(1.72rem, 2.35vw, 2.42rem); font-weight: 780; line-height: 0.9; letter-spacing: 0; } .gift-room-overview-card__score span { position: relative; z-index: 1; grid-area: label; font-family: var(--font-heading); font-size: 0.64rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .gift-room-overview-card__score b { display: none; } .gift-room-overview-card__score b i { width: calc(var(--overview-progress) * 1%); height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--color-ink), color-mix(in srgb, var(--color-alert) 46%, var(--color-warn))); animation: giftRoomOverviewBarIn 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .gift-room-overview-card__score em { position: relative; z-index: 1; grid-area: next; max-width: 9.8rem; justify-self: end; padding: 7px 12px; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-heading); font-size: 0.66rem; font-style: normal; font-weight: 760; line-height: 1.25; text-align: center; transition: background-color 0.16s ease, color 0.16s ease; } .gift-room-overview-card__score:hover em { background: var(--color-ink); color: var(--color-cream); } .gift-room-overview-card__list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gift-room-overview-step { --overview-step-progress: 0; position: relative; min-width: 0; min-height: 58px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-cream); color: var(--color-ink); overflow: hidden; text-align: left; cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .gift-room-overview-step::after { content: none; } .gift-room-overview-step__icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--color-sand); color: var(--color-ink-soft); } .gift-room-overview-step__icon-glyph { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; } .gift-room-overview-step:hover, .gift-room-overview-step:focus-visible { border-color: transparent; background: var(--color-cream); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: none; transform: none; } .gift-room-overview-step em { min-width: 48px; padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.74rem; font-style: normal; font-weight: 760; text-align: center; } @keyframes giftRoomOverviewScoreIn { 0% { opacity: 0; transform: translateY(10px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes giftRoomOverviewBarIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes giftRoomOverviewFillIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes giftRoomOverviewEdgeIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 0.96; transform: translateX(0); } } .gift-room-chat__members { display: flex; align-items: center; gap: 0; padding: 2px 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--color-line); overflow-x: auto; scrollbar-width: none; } .gift-room-chat__members::-webkit-scrollbar { display: none; } .gift-room-chat__members > span:first-child { flex: 0 0 auto; margin-right: 12px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; } .gift-room-chat__member-avatar { flex: 0 0 auto; width: 34px; height: 34px; border: 2px solid var(--color-cream); font-size: 0.64rem; } .gift-room-chat__member-add { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; border: 1px dashed var(--gr-accent, var(--color-forest)); border-radius: 50%; background: var(--color-cream); color: var(--gr-accent, var(--color-forest)); cursor: pointer; } .gift-room-chat__list--bubbles { max-height: 460px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 4px; overflow: auto; } .gift-room-chat__bubble-row { display: flex; align-items: flex-end; gap: 9px; max-width: 82%; } .gift-room-chat__bubble-row.is-me { align-self: flex-end; flex-direction: row-reverse; } .gift-room-chat__bubble-row.is-them { align-self: flex-start; } .gift-room-chat__bubble-avatar { flex: 0 0 auto; width: 34px; height: 34px; font-size: 0.68rem; } .gift-room-chat__bubble-stack { min-width: 0; display: grid; gap: 3px; } .gift-room-chat__bubble { max-width: 100%; padding: 10px 14px; border-radius: 16px; background: var(--color-sand); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 600; line-height: 1.38; } .gift-room-chat__bubble-row.is-them .gift-room-chat__bubble { border-bottom-left-radius: 6px; } .gift-room-chat__bubble-row.is-me .gift-room-chat__bubble { border-bottom-right-radius: 6px; background: var(--color-ink); color: var(--color-cream); } .gift-room-chat__bubble .gift-room-chat__att { margin-top: 8px; } .gift-room-chat__meta { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.66rem; font-weight: 650; } .gift-room-chat__bubble-row.is-me .gift-room-chat__meta { text-align: right; } .gift-room-chatdock__hero { margin-bottom: 10px; } .gift-room-chatdock__hero-copy { display: grid; gap: 10px; max-width: 62rem; } .gift-room-chatdock__hero-meta { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; } .gift-room-chatdock__hero-stat { display: inline-flex; align-items: center; justify-content: flex-start; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 800; line-height: 1; padding: 0; min-height: 0; background: transparent; color: var(--color-ink-soft); } .gift-room-chatdock__hero-link { min-height: 34px; border-radius: 999px; padding: 0 16px; display: inline-grid; place-items: center; border: 0; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; line-height: 1; text-align: center; cursor: pointer; } .gift-room-chatdock { grid-template-columns: 188px minmax(0, 1fr) 268px; min-height: clamp(560px, 68vh, 820px); border-top: 1px solid var(--intent-surface-line); } .gift-room-chatdock .workspace-folder-panel, .gift-room-chatdock .workspace-message-context { padding-top: 12px; } .gift-room-chatdock__nav { display: flex; flex-direction: column; gap: 6px; } .gift-room-chatdock__nav-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; } .gift-room-chatdock__nav-add { width: 32px; height: 32px; border: 1px dashed var(--color-ink); border-radius: 50%; background: var(--popup-bg); color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .gift-room-chatdock__nav-add i, .gift-room-chatdock__nav-add i::before, .gift-room-chatdock__nav-add svg, .gift-room-chatdock__nav-add::before, .gift-room-chatdock__nav-add * { color: var(--color-ink) !important; } .gift-room-chatdock__nav-add i { font-size: 18px; line-height: 1; } .gift-room-chatdock__nav .workspace-folder { min-height: 48px; height: auto; padding: 9px 11px; border-radius: 16px; } .gift-room-chatdock__participant-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .gift-room-chatdock__participant-copy { min-width: 0; display: grid; gap: 2px; text-align: left; } .gift-room-chatdock__participant-copy strong, .gift-room-chatdock__participant-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-chatdock__participant-copy small { color: var(--color-ink-soft); font-size: 0.68rem; font-weight: 700; } .gift-room-chatdock__mini-avatar, .gift-room-chatdock__context-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--color-cream); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; flex: 0 0 auto; } .gift-room-chatdock__thread { min-width: 0; } .gift-room-chatdock__thread-head { padding-inline: 8px 10px; } .gift-room-chatdock__back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding-inline: 12px 14px; border-radius: 999px; } .gift-room-chatdock__back[hidden] { display: none !important; } .gift-room-chatdock__back-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; } .gift-room-chatdock__back-icon svg { width: 100%; height: 100%; } .gift-room-chatdock__back-label { white-space: nowrap; } .gift-room-chatdock__thread-actions .workspace-button { min-width: 82px; } .gift-room-chatdock__thread-avatar { color: var(--color-cream); } .gift-room-chatdock__body { background: radial-gradient(circle at top left, color-mix(in srgb, var(--popup-bg) 82%, transparent), transparent 38%), transparent; } .gift-room-chatdock__msg { max-width: min(720px, 90%); } .gift-room-chatdock__avatar { color: var(--color-cream); } .gift-room-chatdock__empty { min-height: 220px; } .gift-room-chatdock__composer { padding-bottom: 10px; } .gift-room-chatdock__textarea { min-height: 78px; } .gift-room-chatdock__picker { margin: 0 2px 4px; } .gift-room-chatdock__picker-title { margin: 0 0 10px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; } .gift-room-chatdock__context { display: grid; align-content: start; gap: 10px; } .gift-room-chatdock__context .workspace-status-pill { font-size: 0.72rem; } .gift-room-chatdock__context-actions { display: grid; gap: 8px; } .gift-room-chatdock__context-actions .workspace-button { width: 100%; justify-content: center; min-height: 42px; padding-inline: 14px; } .gift-room-chatdock__mobile-actions { display: none; } @media (max-width: 1180px) { .gift-room-chatdock { grid-template-columns: 176px minmax(0, 1fr); } .gift-room-chatdock__context { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--intent-surface-line); padding-left: 0; padding-top: 14px; } } @media (max-width: 880px), (pointer: coarse) { .gift-room-chatdock__hero { margin-bottom: 10px; } .gift-room-chatdock__hero-copy { gap: 8px; } .gift-room-chatdock__hero-meta { justify-content: flex-start; } .gift-room-chatdock { grid-template-columns: 1fr; min-height: 0; } .gift-room-chatdock__nav { display: flex !important; position: static; width: 100%; flex-direction: row; align-items: stretch; gap: 8px; padding: 0 0 10px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--intent-surface-line); scrollbar-width: none; } .gift-room-chatdock__nav::-webkit-scrollbar { display: none; } .gift-room-chatdock__nav-head { flex: 0 0 auto; margin: 0; padding-right: 2px; } .gift-room-chatdock__nav .workspace-folder { flex: 0 0 auto; width: auto; min-width: 156px; } .gift-room-chatdock__thread { border-right: 0; } .gift-room-chatdock__thread-head { gap: 10px; padding: 10px 0 8px; } .gift-room-chatdock__back { order: -1; min-width: 0; padding-inline: 10px 12px; } .gift-room-chatdock__thread-actions { grid-template-columns: minmax(0, 1fr) auto; width: 100%; } .gift-room-chatdock__thread-actions .workspace-button { min-width: 0; padding-inline: 12px; } .gift-room-chatdock__mobile-actions { display: flex !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .gift-room-chatdock__mobile-actions::-webkit-scrollbar { display: none; } .gift-room-chatdock__mobile-actions .workspace-button { flex: 0 0 auto; min-height: 38px; padding-inline: 12px; white-space: nowrap; } .gift-room-chatdock__context { display: none; } .gift-room-chatdock__body { min-height: 360px; padding-inline: 0; } } body.page--gift-room .gift-room-tab-content[data-tab-pane="chat"].is-active { min-height: 0; } @media (min-width: 981px) { body.page--gift-room .gift-room-tab-content[data-tab-pane="chat"].is-active { box-sizing: border-box; padding-top: 2px; } body.page--gift-room .gift-room-tab-content[data-tab-pane="chat"].is-active .gift-room-chatdock { height: 100%; min-height: 0; max-height: none; } } body.page--gift-room .gift-room-chatdock { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(188px, 216px) minmax(0, 1fr) minmax(288px, 328px); height: clamp(590px, calc(100dvh - var(--gift-room-room-chrome-height, 63px) - 294px), 770px); min-height: 590px; max-height: 770px; overflow: hidden; border: 1px solid var(--intent-surface-line); border-radius: 24px; background: var(--popup-bg); box-shadow: none; } @supports (height: 100svh) { body.page--gift-room .gift-room-chatdock { height: clamp(590px, calc(100svh - var(--gift-room-room-chrome-height, 63px) - 294px), 770px); } } body.page--gift-room .gift-room-chatdock__nav, body.page--gift-room .gift-room-chatdock__context { position: static; width: auto; height: 100%; min-height: 0; padding-top: 12px; padding-bottom: 12px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.page--gift-room .gift-room-chatdock__nav { padding-left: 14px; padding-right: 12px; border-right: 1px solid var(--intent-surface-line); } body.page--gift-room .gift-room-chatdock__context { padding-left: 12px; padding-right: 14px; border-left: 1px solid var(--intent-surface-line); } body.page--gift-room .gift-room-chatdock.gift-room-chatdock--list { grid-template-columns: minmax(172px, 188px) minmax(0, 1fr); } body.page--gift-room .gift-room-chatdock.gift-room-chatdock--external { grid-template-columns: minmax(0, 1fr); } body.page--gift-room .gift-room-chatdock--list .workspace-folder-panel { position: static; width: auto; height: 100%; min-height: 0; padding: 12px 12px 12px 14px; overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--intent-surface-line); border-radius: 0; } body.page--gift-room .gift-room-chatdock--list .workspace-list-panel { height: 100%; min-height: 0; overflow: hidden; background: transparent; } body.page--gift-room .gift-room-chatdock--list .workspace-toolbar { min-height: 70px; padding: 8px 14px; } body.page--gift-room .gift-room-chatdock__sort-wrap { position: relative; flex: 0 0 auto; margin-left: auto; } body.page--gift-room .gift-room-chatdock__sort-button.cat-filters__sort { min-width: 0; max-width: 100%; gap: 8px; } body.page--gift-room .gift-room-chatdock__sort-label { min-width: 0; } body.page--gift-room .gift-room-chatdock__sort-popover { z-index: 5400; } body.page--gift-room .gift-room-chatdock__sort-backdrop { z-index: 5390; } body.page--gift-room .gift-room-chatdock--list .workspace-message-list { min-height: 0; } body.page--gift-room .gift-room-chatdock--list .workspace-message-row { min-height: 58px; padding: 9px 14px; } body.page--gift-room .gift-room-chatdock--list .workspace-message-row__avatar.gift-room-avatar { width: 34px; height: 34px; flex-basis: 34px; } body.page--gift-room .gift-room-chatdock__empty-state { width: min(760px, calc(100% - 48px)); min-height: 100%; margin: 0 auto; padding: 46px 32px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--intent-text-secondary); text-align: center; } body.page--gift-room .gift-room-chatdock__empty-icon { width: 58px; height: 58px; border-radius: var(--radius-pill); background: var(--workspace-soft-surface); color: var(--intent-brand-primary); display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1px var(--intent-surface-line); } body.page--gift-room .gift-room-chatdock__empty-icon::before { content: ""; width: 30px; height: 30px; display: block; background: var(--intent-brand-primary); -webkit-mask-image: url("/assets/gift-room-icons/shared/message-heart.svg"); mask-image: url("/assets/gift-room-icons/shared/message-heart.svg"); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } body.page--gift-room .gift-room-chatdock__empty-state h2 { margin: 4px 0 0; color: var(--intent-text-primary); font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); font-weight: 800; line-height: 1.05; } body.page--gift-room .gift-room-chatdock__empty-state p { max-width: 38ch; margin: 0; color: var(--intent-text-secondary); font-size: 14px; font-weight: 700; line-height: 1.45; } body.page--gift-room .gift-room-chatdock__thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; overflow: hidden; background: transparent; } body.page--gift-room .gift-room-chatdock .workspace-button { --workspace-button-hover-scale: 1.026; position: relative; z-index: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--intent-text-primary); min-height: 46px; height: 46px; max-width: 100%; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; } body.page--gift-room .gift-room-chatdock .workspace-button--dark { color: var(--intent-text-on-brand); } body.page--gift-room .gift-room-chatdock .gift-room-avatar { border: 0; letter-spacing: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } body.page--gift-room .gift-room-chatdock .gift-room-avatar.has-image { color: transparent; font-size: 0; } body.page--gift-room .gift-room-chatdock .workspace-msg__avatar.jp-profile-avatar-art, body.page--gift-room .gift-room-chatdock .gift-room-avatar.jp-profile-avatar-art { border-radius: 0; overflow: visible; background: transparent; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px; margin-bottom: 8px; padding: 7px; border-radius: 14px; background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply--compact { grid-template-columns: minmax(0, 1fr); padding: 0; background: transparent; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply--compact .workspace-bubble__reply-author { display: none; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-avatar.gift-room-avatar { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-copy { min-width: 0; display: grid; gap: 2px; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-author, body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-author { font-family: var(--font-heading); font-size: 11px; font-weight: 800; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-text { font-size: 12px; font-weight: 700; opacity: .78; } body.page--gift-room .gift-room-chatdock .workspace-bubble__time { flex-wrap: wrap; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-button { appearance: none; min-height: 24px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; font-family: var(--font-body); font-size: 11px; font-weight: 900; line-height: 1; cursor: pointer; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-button:hover, body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-button:focus-visible { background: color-mix(in srgb, currentColor 18%, transparent); outline: none; } body.page--gift-room .gift-room-chatdock .workspace-bubble__reply-icon { display: block; width: 13px; height: 13px; flex: 0 0 13px; background: currentColor; -webkit-mask: url("/assets/gift-room-icons/shared/arrow-back-up.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/shared/arrow-back-up.svg") center / contain no-repeat; } body.page--gift-room .gift-room-chatdock .workspace-composer__reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--intent-surface-line); border-radius: 16px; background: var(--popup-bg); } body.page--gift-room .gift-room-chatdock .workspace-composer__reply[hidden] { display: none !important; } body.page--gift-room .gift-room-chatdock .workspace-composer__reply-copy { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; } body.page--gift-room .gift-room-chatdock .workspace-composer__reply .workspace-bubble__reply { margin: 0; padding: 0; border-radius: 0; background: transparent; } body.page--gift-room .gift-room-chatdock .gift-room-chatdock__reply-avatar.gift-room-avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 11px; } body.page--gift-room .gift-room-chatdock .workspace-composer__reply-clear { appearance: none; width: 28px; height: 28px; border: 0; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--intent-text-primary) 8%, transparent); color: var(--intent-text-primary); line-height: 1; cursor: pointer; } body.page--gift-room .gift-room-chatdock .workspace-composer__reply-clear span { display: block; width: 13px; height: 13px; background: url("/assets/gift-room-icons/shared/x.svg") center / contain no-repeat; } body.page--gift-room .gift-room-chatdock .workspace-composer__reply-clear:hover, body.page--gift-room .gift-room-chatdock .workspace-composer__reply-clear:focus-visible { background: color-mix(in srgb, var(--intent-text-primary) 13%, transparent); outline: none; } body.page--gift-room .gift-room-chatdock__back-icon { background: currentColor; -webkit-mask: url("/assets/gift-room-icons/shared/arrow-left.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/shared/arrow-left.svg") center / contain no-repeat; } body.page--gift-room .gift-room-chatdock .gift-room-chatdock__thread-avatar { display: inline-flex; width: 46px; height: 46px; flex: 0 0 46px; align-self: center; overflow: hidden; border: 0; border-radius: 50%; color: var(--color-cream); } body.page--gift-room .gift-room-chatdock .gift-room-chatdock__thread-avatar.has-image { color: transparent; } body.page--gift-room .gift-room-chatdock__thread-head .workspace-thread__title { min-height: 46px; align-items: center; gap: 12px; transform: none; } body.page--gift-room .gift-room-chatdock__thread-head .workspace-thread__title-copy { display: grid; align-content: center; min-height: 46px; gap: 3px; padding-top: 0; } body.page--gift-room .gift-room-chatdock__thread-head h2 { line-height: 1.08; } body.page--gift-room .gift-room-chatdock__mini-avatar.gift-room-avatar, body.page--gift-room .gift-room-chatdock__context-avatar.gift-room-avatar { width: 32px; height: 32px; flex-basis: 32px; } body.page--gift-room .gift-room-chatdock__context-avatar.workspace-avatar { width: 36px; height: 36px; flex-basis: 36px; } body.page--gift-room .gift-room-chatdock__avatar.gift-room-avatar { width: 28px; height: 28px; flex-basis: 28px; } body.page--gift-room .gift-room-chatdock__msg.workspace-msg--them { align-items: center; } body.page--gift-room .gift-room-chatdock__thread-head { min-height: 58px; padding: 10px 16px; background: transparent; } body.page--gift-room .gift-room-chatdock__thread-actions { grid-template-columns: minmax(160px, 1fr) auto; max-width: min(100%, 360px); } body.page--gift-room .gift-room-chatdock__body { min-height: 0; background: transparent; } body.page--gift-room .gift-room-chatdock__empty { min-height: 0; align-self: center; justify-self: center; } body.page--gift-room .gift-room-chatdock__composer { gap: 6px; padding: 10px 16px 12px; background: var(--intent-surface-page); } body.page--gift-room .gift-room-chatdock__composer .workspace-attach { display: flex; gap: 8px; } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn { width: auto; min-height: var(--workspace-composer-action-height); height: var(--workspace-composer-action-height); gap: 8px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--intent-text-primary); font-family: var(--font-body); font-size: 13px; font-weight: 800; line-height: 1; box-shadow: none; } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn img, body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn svg { display: none; } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn::after { content: ""; order: -1; width: 20px; height: 20px; flex: 0 0 20px; display: block; background-position: center; background-repeat: no-repeat; background-size: contain; } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn[data-chat-attach="item"]::after, body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn[data-external-chat-attach="product"]::after { background-image: url("/assets/gift-room-icons/shared/heart.svg"); } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn[data-chat-attach="photo"]::after, body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn[data-external-chat-attach="photo"]::after { background-image: url("/assets/gift-room-icons/shared/photo.svg"); } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn[data-chat-attach="gift"]::after { background-image: url("/assets/gift-room-icons/shared/gift.svg"); } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn[data-chat-voice]::after, body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn[data-external-chat-attach="voice"]::after { background-image: url("/assets/gift-room-icons/shared/microphone.svg"); } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn { box-sizing: border-box; flex: 0 0 var(--workspace-composer-action-height); width: var(--workspace-composer-action-height); min-width: var(--workspace-composer-action-height); max-width: var(--workspace-composer-action-height); min-height: var(--workspace-composer-action-height); max-height: var(--workspace-composer-action-height); height: var(--workspace-composer-action-height); aspect-ratio: 1 / 1; padding: 0; gap: 0; border-radius: 50%; } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn span { display: none; } body.page--gift-room .gift-room-chatdock__textarea.gift-room-chat__input { height: auto; min-height: 56px; max-height: 118px; } body.page--gift-room .gift-room-chatdock__composer .gift-room-chat__btn, body.page--gift-room .gift-room-chatdock__composer .gift-room-chatdock__send { box-sizing: border-box; flex: 0 0 var(--workspace-composer-action-height); width: var(--workspace-composer-action-height); min-width: var(--workspace-composer-action-height); max-width: var(--workspace-composer-action-height); min-height: var(--workspace-composer-action-height); max-height: var(--workspace-composer-action-height); height: var(--workspace-composer-action-height); aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--intent-text-on-brand); font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1; box-shadow: none; transform: none; transition: color var(--duration-fast) var(--ease-standard); } body.page--gift-room .gift-room-chatdock__composer .gift-room-chat__btn:hover, body.page--gift-room .gift-room-chatdock__composer .gift-room-chat__btn:focus-visible, body.page--gift-room .gift-room-chatdock__composer .gift-room-chatdock__send:hover, body.page--gift-room .gift-room-chatdock__composer .gift-room-chatdock__send:focus-visible { background: transparent; transform: none; } body.page--gift-room .gift-room-chatdock .workspace-recording__send { box-sizing: border-box; width: 38px; min-width: 38px; max-width: 38px; min-height: 38px; max-height: 38px; height: 38px; aspect-ratio: 1 / 1; padding: 0; border-radius: 50%; gap: 0; background: var(--color-cream); color: var(--color-ink); } body.page--gift-room .gift-room-chatdock .workspace-recording__send:hover, body.page--gift-room .gift-room-chatdock .workspace-recording__send:focus-visible { background: var(--color-cream); color: var(--color-ink); box-shadow: 0 8px 20px color-mix(in srgb, var(--color-cream) 18%, transparent); } body.page--gift-room .gift-room-chatdock .workspace-recording__send::after { filter: none; background: currentColor; -webkit-mask: url("/assets/gift-room-icons/shared/send.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/shared/send.svg") center / contain no-repeat; } body.page--gift-room .gift-room-chatdock__context .workspace-context-block p, body.page--gift-room .gift-room-chatdock__context .workspace-pill { overflow-wrap: anywhere; } @media (max-width: 1180px) { body.page--gift-room .gift-room-chatdock { grid-template-columns: minmax(160px, 184px) minmax(0, 1fr); } body.page--gift-room .gift-room-chatdock__context { display: none; } } @media (max-width: 880px), (pointer: coarse) { body.page--gift-room .gift-room-chatdock { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; border-radius: 20px; overflow: hidden; } body.page--gift-room .gift-room-chatdock.gift-room-chatdock--list { grid-template-columns: 1fr; } body.page--gift-room .gift-room-chatdock--list .workspace-folder-panel { display: flex; width: 100%; height: auto; gap: 8px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--intent-surface-line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } body.page--gift-room .gift-room-chatdock--list .workspace-folder-panel::-webkit-scrollbar { display: none; } body.page--gift-room .gift-room-chatdock--list .workspace-folder { flex: 0 0 auto; width: auto; min-width: 112px; } body.page--gift-room .gift-room-chatdock__sort-wrap { flex: 0 0 auto; } body.page--gift-room .gift-room-chatdock__sort-button.cat-filters__sort { padding-inline: 12px; } body.page--gift-room .gift-room-chatdock--list .workspace-list-panel { min-height: 520px; } body.page--gift-room .gift-room-chatdock--list .workspace-message-row { grid-template-columns: 30px 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; min-height: 64px; padding: 8px 12px; align-items: center; } body.page--gift-room .gift-room-chatdock--list .workspace-message-row__check { grid-column: 1; grid-row: 1 / span 2; width: 30px; min-height: 44px; } body.page--gift-room .gift-room-chatdock--list .workspace-message-row__star { display: none; } body.page--gift-room .gift-room-chatdock--list .workspace-message-row__avatar.gift-room-avatar { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; flex-basis: 44px; align-self: center; justify-self: center; } body.page--gift-room .gift-room-chatdock--list .workspace-message-row__name { grid-column: 3; grid-row: 1; align-self: end; min-width: 0; font-size: 14.5px; line-height: 1.08; } body.page--gift-room .gift-room-chatdock--list .workspace-message-row__subject { display: block; grid-column: 3; grid-row: 2; align-self: start; min-width: 0; margin-top: 2px; font-size: 11.5px; line-height: 1.25; } body.page--gift-room .gift-room-chatdock--list .workspace-message-row__date { grid-column: 4; grid-row: 1 / span 2; align-self: center; } body.page--gift-room .gift-room-chatdock__empty-state { width: calc(100% - 24px); min-height: 280px; margin: 0 auto; padding: 36px 20px; } body.page--gift-room .gift-room-chatdock__empty-state h2 { font-size: 24px; } body.page--gift-room .gift-room-chatdock__nav { display: flex !important; width: 100%; height: auto; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--intent-surface-line); overflow-x: auto; overflow-y: hidden; } body.page--gift-room .gift-room-chatdock__nav .workspace-folder { min-width: 148px; } body.page--gift-room .gift-room-chatdock:not(.gift-room-chatdock--list) .gift-room-chatdock__nav { display: none !important; } body.page--gift-room:has(.gift-room-chatdock:not(.gift-room-chatdock--list)) .fixed-header .header-mobile-bottom-bar { display: none !important; } body.page--gift-room .gift-room-chatdock__thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(680px, calc(100dvh - var(--gift-room-room-chrome-height, 63px) - 178px)); min-height: 430px; border-radius: 0; overflow: hidden; } @supports (height: 100svh) { body.page--gift-room .gift-room-chatdock__thread { height: min(680px, calc(100svh - var(--gift-room-room-chrome-height, 63px) - 178px)); } } body.page--gift-room .gift-room-chatdock__thread-head { display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "title back" "tools tools" "actions actions"; align-items: center; gap: 8px; padding: 9px 8px 8px; } body.page--gift-room .gift-room-chatdock__thread-head .workspace-thread__title { grid-area: title; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 48px; min-width: 0; gap: 12px; } body.page--gift-room .gift-room-chatdock .gift-room-chatdock__thread-avatar { width: 44px; height: 44px; flex-basis: 44px; } body.page--gift-room .gift-room-chatdock__thread-head .workspace-thread__title-copy { display: grid; align-content: center; gap: 4px; min-height: 44px; min-width: 0; } body.page--gift-room .gift-room-chatdock__thread-head h2 { font-size: 16px; line-height: 1.08; } body.page--gift-room .gift-room-chatdock__thread-head .workspace-thread__meta { margin-top: 0; font-size: 11.5px; line-height: 1.25; } body.page--gift-room .gift-room-chatdock__back { grid-area: back; justify-self: end; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; background: transparent; } body.page--gift-room .gift-room-chatdock__back-label { display: none; } body.page--gift-room .gift-room-chatdock__thread-actions { grid-area: tools; width: 100%; max-width: none; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; } body.page--gift-room .gift-room-chatdock__thread-actions .gift-room-dashboard-search { min-height: 40px; height: 40px; } body.page--gift-room .gift-room-chatdock__thread-actions .gift-room-dashboard-search__icon { top: 4px; left: 4px; bottom: 4px; width: 32px; min-width: 32px; } body.page--gift-room .gift-room-chatdock__thread-actions .gift-room-dashboard-search__icon img { width: 15px; height: 15px; } body.page--gift-room .gift-room-chatdock__thread-actions .gift-room-dashboard-search input { padding: 0 38px 0 48px; font-size: 12px; } body.page--gift-room .gift-room-chatdock__thread-actions .workspace-button { min-width: 74px; min-height: 40px; height: 40px; padding-inline: 12px; font-size: 12px; } body.page--gift-room .gift-room-chatdock__mobile-actions { grid-area: actions; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: 100%; min-width: 0; overflow: visible; } body.page--gift-room .gift-room-chatdock__mobile-actions .workspace-button { min-width: 0; min-height: 40px; height: 40px; padding-inline: 8px; justify-content: center; font-size: 12px; white-space: nowrap; } body.page--gift-room .gift-room-chatdock__body { margin-top: 0; padding-top: 16px; } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn { flex: 0 0 44px; width: 44px; min-width: 44px; max-width: 44px; min-height: 44px; max-height: 44px; height: 44px; aspect-ratio: 1 / 1; padding: 0; } body.page--gift-room .gift-room-chatdock__composer .gift-room-chat__btn, body.page--gift-room .gift-room-chatdock__composer .gift-room-chatdock__send { flex: 0 0 44px; width: 44px; min-width: 44px; max-width: 44px; min-height: 44px; max-height: 44px; height: 44px; aspect-ratio: 1 / 1; } body.page--gift-room .gift-room-chatdock__composer .workspace-attach .workspace-attach__btn span { display: none; } } .gift-room-wedding-pane { gap: 16px; } .gift-room-wedding-seating { --gift-room-seat-board-bg: color-mix(in srgb, var(--color-cream) 88%, var(--color-sand)); --gift-room-seat-board-image: none; --gift-room-seat-board-pattern: none; --gift-room-seat-board-border: color-mix(in srgb, var(--color-line) 76%, transparent); --gift-room-seat-pill-hover-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); padding: 0; border: 0; border-radius: 0; background: transparent; } .gift-room-proto-panel-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .gift-room-proto-panel-head > div { min-width: 0; display: grid; gap: 0; } .gift-room-proto-panel-head h3 { font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.08; } .gift-room-wedding-pane > .gift-room-proto-panel-head h3, .gift-room-scenario-pane > .gift-room-proto-panel-head h3, .gift-room-tab-content > .gift-room-planner[data-planner] > .gift-room-planner > .gift-room-proto-panel-head h3, .gift-room-tab-content > .gift-room-planner[data-planner] > .gift-room-wedding-pane > .gift-room-proto-panel-head h3, .gift-room-tab-content > .gift-room-planner[data-planner] > .gift-room-scenario-pane > .gift-room-proto-panel-head h3 { font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.08; } .gift-room-proto-panel-head p { max-width: 48rem; font-size: 0.92rem; line-height: 1.42; } .gift-room-seat-titleline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .gift-room-tab-content .gift-room-planner__head > p, .gift-room-tab-content .gift-room-proto-panel-head > div > p, .gift-room-tab-content .gift-room-suite-steps__hint { display: none; } .gift-room-proto-actions, .gift-room-seat-controls, .gift-room-seat-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .gift-room-seat-controls { row-gap: 7px; } .gift-room-seat-modebar, .gift-room-seat-actionbar { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gift-room-seat-headside { min-width: 0; display: grid; justify-items: end; gap: 10px; } .gift-room-seat-venuebar { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); align-items: center; gap: 12px; } .gift-room-seat-halls { display: flex; align-items: stretch; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .gift-room-proto-row__action.gift-room-seat-hall-undo { width: auto; min-height: 48px; padding-inline: 20px; } .gift-room-seat-hall-summary { min-height: 48px; display: grid; place-items: center; gap: 3px; padding: 8px 18px; border: 1px solid var(--color-ink); border-radius: 999px; background: transparent; color: var(--color-ink); text-align: center; } .gift-room-seat-hall-summary strong, .gift-room-seat-seg--hall button span { font-family: var(--font-display); font-size: 0.82rem; font-weight: 720; line-height: 1.05; } .gift-room-seat-hall-summary small, .gift-room-seat-seg--hall button small { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 680; line-height: 1.1; } .gift-room-seat-seg.gift-room-seat-seg--hall { min-height: 48px; align-items: center; padding: 5px; gap: 5px; border-color: var(--color-ink); overflow: visible; } .gift-room-seat-seg.gift-room-seat-seg--hall button { min-width: 116px; min-height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 20px; border: 0; border-radius: 999px; text-align: center; background: transparent; color: var(--color-ink); font-family: inherit; overflow: visible; } .gift-room-seat-seg--hall button span, .gift-room-seat-seg--hall button small { max-width: none; overflow: visible; text-align: center; text-overflow: clip; white-space: nowrap; } .gift-room-seat-seg--hall button:not(.is-active):hover, .gift-room-seat-seg--hall button:not(.is-active):focus-visible { background: color-mix(in srgb, var(--color-forest) 14%, var(--color-cream)); color: var(--color-ink); box-shadow: none; outline: 0; } .gift-room-seat-seg--hall button:not(.is-active):hover small, .gift-room-seat-seg--hall button:not(.is-active):focus-visible small { color: var(--color-ink-soft); } .gift-room-seat-seg--hall button.is-active { background: var(--color-ink); color: var(--color-cream); } .gift-room-seat-seg--hall button.is-active small { color: color-mix(in srgb, var(--color-cream) 82%, transparent); } .gift-room-proto-row__action.gift-room-seat-hall-add { position: relative; isolation: isolate; min-height: 46px; padding: 0 22px; gap: 8px; border: 0; background: transparent; color: var(--color-cream); box-shadow: none; overflow: visible; } .gift-room-proto-row__action.gift-room-seat-hall-add::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transition: box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-proto-row__action.gift-room-seat-hall-add:hover, .gift-room-proto-row__action.gift-room-seat-hall-add:focus-visible { background: transparent; color: var(--color-cream); box-shadow: none; outline: 0; transform: none; } .gift-room-proto-row__action.gift-room-seat-hall-add:hover::before, .gift-room-proto-row__action.gift-room-seat-hall-add:focus-visible::before { transform: scale(1.055); box-shadow: none; } .gift-room-seat-iconbtn { width: 46px; height: 46px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: var(--color-cream); color: var(--color-ink); cursor: pointer; box-shadow: none; transition: box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-seat-iconbtn:hover, .gift-room-seat-iconbtn:focus-visible { background: var(--color-cream); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; transform: translateY(-1px); } .gift-room-seat-iconbtn:disabled { cursor: default; opacity: 0.42; } .gift-room-seat-iconbtn:disabled:hover, .gift-room-seat-iconbtn:disabled:focus-visible { box-shadow: none; transform: none; } .gift-room-seat-toolbar-label { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 650; } .gift-room-seat-highlight { min-width: 0; display: grid; gap: 5px; } .gift-room-seat-highlight__control { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gift-room-seat-seg { display: inline-flex; align-items: center; gap: 5px; min-height: 48px; padding: 5px; border: 1px solid var(--color-ink); border-radius: 999px; background: transparent; } .gift-room-seat-seg button { min-height: 36px; border: 0; border-radius: 999px; padding: 0 17px; background: transparent; color: var(--color-ink-soft); font-family: var(--font-display); font-size: 0.78rem; font-weight: 650; cursor: pointer; } .gift-room-seat-seg button:hover, .gift-room-seat-seg button:focus-visible { background: var(--popup-hover); color: var(--color-ink); outline: 0; } .gift-room-seat-seg button.is-active { background: var(--color-ink); color: var(--color-cream); } .gift-room-proto-action--ghost { border: 1px solid var(--color-line); background: transparent; color: var(--color-ink); } .gift-room-proto-action--ghost:hover, .gift-room-proto-action--ghost:focus-visible { background: var(--popup-hover); color: var(--color-ink); } .gift-room-planner-sheet .gift-room-proto-row__action { min-height: 54px; padding-inline: 24px; font-size: 0.98rem; } .gift-room-planner-sheet .gift-room-proto-row__action:disabled, .gift-room-planner-sheet .gift-room-proto-row__action:disabled:hover, .gift-room-planner-sheet .gift-room-proto-row__action:disabled:focus-visible { background: var(--control-disabled-bg); color: var(--auth-disabled-text); cursor: not-allowed !important; opacity: 1; transform: none; box-shadow: none; filter: none; outline: 0; } .gift-room-planner-sheet .gift-room-proto-row__action:disabled::before { background: var(--control-disabled-bg); transform: none; box-shadow: none; transition: none; } .gift-room-planner-sheet .gift-room-proto-row__action:disabled > * { pointer-events: none; } .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger) { border: 0; background: transparent; color: var(--color-ink); box-shadow: none; } .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger)::before { border: 0; background: transparent; } .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger) i, .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger) .gift-room-icon { color: var(--color-ink); } .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):hover, .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):focus-visible { background: transparent; color: var(--color-alert-red); box-shadow: none; outline: 0; } .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):hover::before, .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):focus-visible::before { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):hover i, .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):focus-visible i, .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):hover .gift-room-icon, .gift-room-planner-sheet .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):focus-visible .gift-room-icon { color: var(--color-alert-red); } .gift-room-proto-action--green { background: var(--color-forest); } .gift-room-seat-toolbar-button { position: relative; isolation: isolate; min-height: 46px; padding: 0 22px; gap: 8px; border-radius: 999px; font-size: 0.88rem; line-height: 1; box-shadow: none; overflow: visible; } .gift-room-seat-toolbar-button::before { content: ""; position: absolute; inset: 0; z-index: -1; border: inherit; border-radius: inherit; background: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; } .gift-room-seat-toolbar-button.gift-room-proto-action--ghost { border: 0; background: var(--color-cream); color: var(--color-ink); } .gift-room-seat-toolbar-button.gift-room-proto-action--ghost:hover, .gift-room-seat-toolbar-button.gift-room-proto-action--ghost:focus-visible { background: var(--color-cream); color: var(--color-ink); } .gift-room-seat-toolbar-button:disabled { cursor: default; opacity: 0.42; } .gift-room-seat-toolbar-button:disabled::before { transform: none; box-shadow: none; } .gift-room-proto-row__action.gift-room-seat-button--shadow:hover, .gift-room-proto-row__action.gift-room-seat-button--shadow:focus-visible { background: transparent; color: var(--color-ink); box-shadow: none; } .gift-room-seat-iconbtn.gift-room-seat-button--shadow:hover, .gift-room-seat-iconbtn.gift-room-seat-button--shadow:focus-visible { background: var(--color-cream); } .gift-room-seat-toolbar-button.gift-room-seat-button--shadow:hover, .gift-room-seat-toolbar-button.gift-room-seat-button--shadow:focus-visible { background: inherit; color: inherit; box-shadow: none; } .gift-room-seat-toolbar-button.gift-room-seat-button--shadow:not(:disabled):hover::before, .gift-room-seat-toolbar-button.gift-room-seat-button--shadow:not(:disabled):focus-visible::before { box-shadow: var(--gift-room-seat-pill-hover-shadow); } .gift-room-seat-toolbar-button.gift-room-seat-button--grow { --seat-grow-fill: var(--color-ink); background: transparent; color: var(--color-cream); transition: none; } .gift-room-seat-toolbar-button.gift-room-seat-button--grow.gift-room-proto-action--green { --seat-grow-fill: var(--color-forest); } .gift-room-seat-toolbar-button.gift-room-seat-button--grow::before { background: var(--seat-grow-fill); } .gift-room-seat-toolbar-button.gift-room-seat-button--grow:hover, .gift-room-seat-toolbar-button.gift-room-seat-button--grow:focus-visible { background: transparent; color: var(--color-cream); box-shadow: none; transform: none; } .gift-room-seat-toolbar-button.gift-room-seat-button--grow:hover::before, .gift-room-seat-toolbar-button.gift-room-seat-button--grow:focus-visible::before { transform: scale(1.055); box-shadow: none; } .gift-room-shell.is-room-view .gift-room-tab-panels, .gift-room-tab-content > .gift-room-planner[data-planner] { border-radius: 24px; } .gift-room-tab-content > .gift-room-planner[data-planner] { padding: 24px; } .gift-room-tab-content > .gift-room-planner[data-planner] > .gift-room-planner, .gift-room-tab-content > .gift-room-planner[data-planner] > .gift-room-wedding-pane, .gift-room-tab-content > .gift-room-planner[data-planner] > .gift-room-scenario-pane { gap: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .gift-room-proto-panel-head .gift-room-proto-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } @media (min-width: 821px) { .gift-room-proto-panel-head .gift-room-proto-actions { flex: 0 0 auto; min-width: max-content; flex-wrap: nowrap; } } .gift-room-proto-actions .gift-room-proto-row__action { position: relative; isolation: isolate; min-height: 46px; padding-inline: 22px; gap: 8px; font-size: 0.88rem; font-weight: 760; line-height: 1; overflow: visible; transition: none; } .gift-room-proto-row__action[hidden] { display: none; } .gift-room-proto-actions .gift-room-proto-row__action:disabled, .gift-room-proto-actions .gift-room-proto-row__action[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; } .gift-room-proto-actions .gift-room-proto-row__action > i { flex: 0 0 17px; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; } .gift-room-proto-actions .gift-room-proto-row__action::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-proto-actions .gift-room-proto-row__action:hover, .gift-room-proto-actions .gift-room-proto-row__action:focus-visible { background: transparent; color: var(--color-cream); box-shadow: none; outline: 0; transform: none; } .gift-room-proto-actions .gift-room-proto-row__action:hover::before, .gift-room-proto-actions .gift-room-proto-row__action:focus-visible::before { transform: scale(1.055); } .gift-room-proto-actions .gift-room-proto-action--ghost { border: 0; background: transparent; color: var(--color-ink); } .gift-room-proto-actions .gift-room-proto-action--ghost::before { background: var(--color-cream); } .gift-room-proto-actions .gift-room-proto-action--ghost:hover, .gift-room-proto-actions .gift-room-proto-action--ghost:focus-visible { background: transparent; color: var(--color-ink); } .gift-room-proto-actions .gift-room-proto-action--ghost:hover::before, .gift-room-proto-actions .gift-room-proto-action--ghost:focus-visible::before { transform: none; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-proto-row__action[data-action^="print"] { position: relative; isolation: isolate; min-height: 46px; padding-inline: 22px; gap: 8px; border: 0; background: transparent; color: var(--color-ink); font-size: 0.88rem; font-weight: 760; line-height: 1; overflow: visible; box-shadow: none; transform: none; transition: none; } .gift-room-proto-row__action[data-action^="print"]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-cream); transition: transform 0.18s ease, box-shadow 0.18s ease; } .gift-room-proto-row__action[data-action^="print"]:hover, .gift-room-proto-row__action[data-action^="print"]:focus-visible { background: transparent; color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-proto-row__action[data-action^="print"]:hover::before, .gift-room-proto-row__action[data-action^="print"]:focus-visible::before { transform: none; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-planner__filter, .gift-room-pill { position: relative; isolation: isolate; overflow: visible; background: transparent; transition: none; } .gift-room-planner__filter::before, .gift-room-pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: transparent; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-planner__filter:hover, .gift-room-planner__filter:focus-visible, .gift-room-pill:hover, .gift-room-pill:focus-visible { background: transparent; color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-planner__filter:hover::before, .gift-room-planner__filter:focus-visible::before, .gift-room-pill:hover::before, .gift-room-pill:focus-visible::before { background: var(--color-cream); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-planner__filter.is-active, .gift-room-pill.is-active, .gift-room-pill.is-active:hover, .gift-room-pill.is-active:focus-visible { background: transparent; color: var(--color-cream); } .gift-room-planner__filter.is-active::before, .gift-room-pill.is-active::before { background: var(--color-ink); } .gift-room-planner__filter.is-active:hover, .gift-room-planner__filter.is-active:focus-visible, .gift-room-pill.is-active:hover, .gift-room-pill.is-active:focus-visible { color: var(--color-cream); } .gift-room-planner__filter.is-active:hover::before, .gift-room-planner__filter.is-active:focus-visible::before, .gift-room-pill.is-active:hover::before, .gift-room-pill.is-active:focus-visible::before { transform: scale(1.055); box-shadow: none; } .gift-room-planner__filter { min-height: 46px; padding-inline: 22px; border: 0; color: var(--color-ink); font-family: var(--font-display); font-size: 0.88rem; font-weight: 760; line-height: 1; } .gift-room-planner__filter::before { background: var(--color-cream); box-shadow: none; } .gift-room-planner__filter:hover::before, .gift-room-planner__filter:focus-visible::before { background: var(--color-cream); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-planner__filter.is-active::before { background: var(--color-ink); box-shadow: none; } .gift-room-planner__filter.is-active:hover::before, .gift-room-planner__filter.is-active:focus-visible::before { transform: none; box-shadow: none; } .gift-room-planner__filters--detail { width: 100%; gap: 8px; } .gift-room-planner__filter--tone { --gift-room-filter-bg: var(--color-cream); --gift-room-filter-active-bg: color-mix(in srgb, var(--color-ink) 4%, var(--color-cream)); --gift-room-filter-ink: var(--color-ink); --gift-room-filter-line: color-mix(in srgb, var(--color-ink) 14%, transparent); min-height: 50px; padding-inline: 14px 16px; display: inline-flex; align-items: center; gap: 10px; color: var(--gift-room-filter-ink); } .gift-room-planner__filter--tone::before { background: var(--gift-room-filter-bg); box-shadow: inset 0 0 0 1px var(--gift-room-filter-line); } .gift-room-planner__filter--tone:hover::before, .gift-room-planner__filter--tone:focus-visible::before { background: var(--gift-room-filter-bg); box-shadow: inset 0 0 0 1px var(--gift-room-filter-line), var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-planner__filter--tone.is-active, .gift-room-planner__filter--tone.is-active:hover, .gift-room-planner__filter--tone.is-active:focus-visible { color: var(--gift-room-filter-ink); } .gift-room-planner__filter--tone.is-active::before, .gift-room-planner__filter--tone.is-active:hover::before, .gift-room-planner__filter--tone.is-active:focus-visible::before { background: var(--gift-room-filter-active-bg); box-shadow: inset 0 0 0 1px var(--gift-room-filter-line); } .gift-room-planner__filter--tone .gift-room-meal-icon { width: 18px; height: 18px; color: currentColor; } .gift-room-planner__filter--tone .gift-room-meal-icon::before { width: 15px; height: 15px; } .gift-room-planner__filter-copy { min-width: 0; display: inline-flex; align-items: center; gap: 8px; text-align: left; } .gift-room-planner__filter-copy em { color: currentColor; font-style: normal; font-size: 0.82rem; font-weight: 760; line-height: 1.05; } .gift-room-planner__filter-copy small { min-width: 28px; padding: 4px 7px; border-radius: 999px; justify-self: start; background: color-mix(in srgb, currentColor 12%, transparent); color: currentColor; font-size: 0.72rem; font-weight: 800; line-height: 1; text-align: center; } .gift-room-planner__filter--tone.meal-veg { --gift-room-filter-bg: color-mix(in srgb, var(--color-forest) 10%, var(--color-cream)); --gift-room-filter-active-bg: color-mix(in srgb, var(--color-forest) 18%, var(--color-cream)); --gift-room-filter-ink: color-mix(in srgb, var(--color-forest) 84%, var(--color-ink)); --gift-room-filter-line: color-mix(in srgb, var(--color-forest) 26%, transparent); } .gift-room-planner__filter--tone.meal-gluten-free { --gift-room-filter-bg: color-mix(in srgb, var(--color-warn) 10%, var(--color-cream)); --gift-room-filter-active-bg: color-mix(in srgb, var(--color-warn) 16%, var(--color-cream)); --gift-room-filter-ink: color-mix(in srgb, var(--color-warn) 88%, var(--color-ink)); --gift-room-filter-line: color-mix(in srgb, var(--color-warn) 28%, transparent); } .gift-room-planner__filter--tone.meal-kids { --gift-room-filter-bg: color-mix(in srgb, var(--color-ink) 6%, var(--color-sand)); --gift-room-filter-active-bg: color-mix(in srgb, var(--color-ink) 12%, var(--color-sand)); --gift-room-filter-ink: color-mix(in srgb, var(--color-ink) 76%, var(--color-cream)); --gift-room-filter-line: color-mix(in srgb, var(--color-ink) 18%, transparent); } .gift-room-planner__filter--tone.meal-chicken { --gift-room-filter-bg: color-mix(in srgb, var(--color-sand) 78%, var(--color-cream)); --gift-room-filter-active-bg: color-mix(in srgb, var(--color-sand) 92%, var(--color-cream)); --gift-room-filter-ink: color-mix(in srgb, var(--color-ink) 78%, var(--color-cream)); --gift-room-filter-line: color-mix(in srgb, var(--color-sand) 30%, transparent); } .gift-room-planner__filter--tone.meal-fish { --gift-room-filter-bg: color-mix(in srgb, var(--color-ink-soft) 8%, var(--color-cream)); --gift-room-filter-active-bg: color-mix(in srgb, var(--color-ink-soft) 16%, var(--color-cream)); --gift-room-filter-ink: color-mix(in srgb, var(--color-ink-soft) 88%, var(--color-cream)); --gift-room-filter-line: color-mix(in srgb, var(--color-ink-soft) 20%, transparent); } .gift-room-reg-filters { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; padding: 5px; border: 1px solid var(--popup-border); border-radius: 999px; background: var(--popup-bg); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 5px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gift-room-reg-filters::-webkit-scrollbar { display: none; } .gift-room-reg-filters .gift-room-planner__filter { flex: 0 0 auto; min-width: 92px; min-height: 42px; padding: 0 18px; border: 0; background: transparent; color: var(--color-ink); scroll-snap-align: start; box-shadow: none; } .gift-room-reg-filters .gift-room-planner__filter::before { background: transparent; box-shadow: none; } .gift-room-reg-filters .gift-room-planner__filter:hover, .gift-room-reg-filters .gift-room-planner__filter:focus-visible { background: transparent; color: var(--color-ink); box-shadow: none; } .gift-room-reg-filters .gift-room-planner__filter:hover::before, .gift-room-reg-filters .gift-room-planner__filter:focus-visible::before { background: var(--sort-option-hover); box-shadow: none; transform: none; } .gift-room-reg-filters .gift-room-planner__filter.is-active, .gift-room-reg-filters .gift-room-planner__filter.is-active:hover, .gift-room-reg-filters .gift-room-planner__filter.is-active:focus-visible { color: var(--color-cream); } .gift-room-reg-filters .gift-room-planner__filter.is-active::before, .gift-room-reg-filters .gift-room-planner__filter.is-active:hover::before, .gift-room-reg-filters .gift-room-planner__filter.is-active:focus-visible::before { background: var(--color-ink); box-shadow: none; transform: none; } @media (max-width: 720px) { .gift-room-reg-filters.gift-room-planner__filters { width: 100%; display: flex; gap: 8px; padding: 0 36px 2px 0; border: 0; border-radius: 0; background: transparent; overflow-x: auto; overflow-y: visible; scroll-padding-inline: 0 36px; mask-image: linear-gradient(to right, black calc(100% - 34px), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 34px), transparent); } .gift-room-reg-filters .gift-room-planner__filter { width: auto; min-width: 0; flex: 0 0 min(44%, 168px); border: 1px solid var(--color-line); background: var(--popup-bg); } } .gift-room-gifts-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; } .gift-room-gifts-toolbar__label { display: flex; align-items: baseline; gap: 8px; min-width: max-content; white-space: nowrap; } .gift-room-gifts-toolbar__label strong { font-size: clamp(1.55rem, 1.8vw, 2rem); line-height: 1; } .gift-room-gifts-toolbar__label span { font-size: 0.82rem; line-height: 1; } .gift-room-gifts-toolbar .gift-room-pills { justify-self: end; flex: 0 0 auto; width: auto; min-width: 0; min-height: 52px; gap: 6px; padding: 5px; scroll-padding-inline: 5px; } .gift-room-gifts-toolbar .gift-room-pill { min-width: 92px; height: 42px; padding: 0 16px; font-size: 0.78rem; } .gift-room-gifts-toolbar .gift-room-pill:hover, .gift-room-gifts-toolbar .gift-room-pill:focus-visible { color: var(--color-ink); background: var(--popup-hover); } .gift-room-gifts-toolbar .gift-room-pill:hover::before, .gift-room-gifts-toolbar .gift-room-pill:focus-visible::before { background: transparent; box-shadow: none; transform: none; } .gift-room-gifts-toolbar .gift-room-pill.is-active:hover, .gift-room-gifts-toolbar .gift-room-pill.is-active:focus-visible { color: var(--color-cream); background: transparent; } .gift-room-gifts-toolbar .gift-room-pill.is-active:hover::before, .gift-room-gifts-toolbar .gift-room-pill.is-active:focus-visible::before { background: var(--color-ink); } .gift-room-scenario-banner { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px 15px; border: 1px solid color-mix(in srgb, var(--color-forest) 20%, var(--color-line)); border-radius: 16px; background: color-mix(in srgb, var(--color-forest) 8%, var(--color-cream)); color: var(--color-forest); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 700; } .gift-room-scenario-banner.is-active { background: color-mix(in srgb, var(--color-forest) 12%, var(--color-cream)); border-color: color-mix(in srgb, var(--color-forest) 32%, var(--color-line)); } .gift-room-scenario-banner span { flex: 1; min-width: 0; } .gift-room-scenario-banner__action { margin-left: auto; flex: 0 0 auto; } .gift-room-scenario-banner__action.gift-room-cta { min-height: 42px; height: 42px; padding-inline: 18px; font-size: 0.82rem; } .gift-room-chat-scenario-head { margin-bottom: 16px; } .gift-room-nowplaying { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--color-line); border-radius: 18px; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 8%, var(--color-cream)); } .gift-room-nowplaying > span { width: 48px; height: 48px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-ink); color: var(--color-cream); font-size: 1.2rem; } .gift-room-nowplaying div { min-width: 0; display: grid; gap: 3px; } .gift-room-nowplaying small, .gift-room-nowplaying em { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-style: normal; } .gift-room-nowplaying strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.12; } .gift-room-nowplaying__actions { min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .gift-room-nowplaying button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-cream); color: var(--color-ink); font-family: var(--font-display); font-size: 0.72rem; font-weight: 720; cursor: pointer; } .gift-room-nowplaying button:hover, .gift-room-nowplaying button:focus-visible { background: var(--popup-hover); outline: 0; } .gift-room-playlist-hint { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; line-height: 1.3; } .gift-room-playlist-row__state { color: var(--gr-accent, var(--color-forest)) !important; font-family: var(--font-heading); font-size: 0.71rem !important; font-weight: 760; } .gift-room-proto-row > .gift-room-playlist-row__actions { min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; } .gift-room-proto-row audio[data-song-audio] { display: none; } .gift-room-kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .gift-room-kanban > section { min-width: 0; display: grid; align-content: start; gap: 10px; padding: 12px; border: 1px solid var(--color-line); border-radius: 18px; background: color-mix(in srgb, var(--color-sand) 38%, var(--color-cream)); } .gift-room-kanban h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: 0.92rem; } .gift-room-kanban h4 span { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--color-cream); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.68rem; } .gift-room-kanban-card { min-width: 0; display: grid; gap: 9px; padding: 11px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-cream); cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-kanban-card:hover, .gift-room-kanban-card:focus-visible, .gift-room-kanban-card:focus-within { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } .gift-room-kanban-card:active { transform: translateY(1px); } .gift-room-kanban-card strong { color: var(--color-ink); font-family: var(--font-display); font-size: 0.88rem; line-height: 1.14; } .gift-room-kanban-card span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.74rem; line-height: 1.25; } .gift-room-kanban-card__head { display: flex; align-items: center; gap: 10px; min-width: 0; } .gift-room-kanban-card__headtext { min-width: 0; display: grid; gap: 1px; } .gift-room-kanban-card__headtext strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-kanban-card__media { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 16%, var(--color-sand)); color: var(--gr-accent, var(--color-forest)); font-size: 18px; } .gift-room-kanban-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; } .gift-room-kanban-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gift-room-kanban-card__price { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 720; } .gift-room-kanban-card__ship { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; } .gift-room-kanban-card__actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .gift-room-kanban-card__advance { flex: 1 1 auto; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid var(--color-ink); border-radius: 999px; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-display); font-size: 0.72rem; font-weight: 720; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .gift-room-kanban-card__advance .ti { font-size: 14px; } .gift-room-kanban-card__advance:hover, .gift-room-kanban-card__advance:focus-visible { background: color-mix(in srgb, var(--color-ink) 84%, var(--color-forest)); border-color: color-mix(in srgb, var(--color-ink) 84%, var(--color-forest)); outline: 0; } .gift-room-kanban-card__advance:active { transform: translateY(1px); } .gift-room-kanban-card__edit { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-cream); color: var(--color-ink-soft); cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .gift-room-kanban-card__edit:hover, .gift-room-kanban-card__edit:focus-visible { background: var(--popup-hover); color: var(--color-ink); border-color: transparent; outline: 0; } .gift-room-kanban-card .gift-room-status-pill--given { display: inline-flex; align-items: center; gap: 5px; } .gift-room-gift-detail-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 12%, var(--color-sand)); } .gift-room-gift-detail-hero__media { flex: none; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 16px; background: var(--color-cream); color: var(--gr-accent, var(--color-forest)); font-size: 26px; } .gift-room-gift-detail-hero__media img { width: 100%; height: 100%; display: block; object-fit: cover; } .gift-room-gift-detail-hero__copy { min-width: 0; display: grid; gap: 3px; } .gift-room-gift-detail-hero__copy strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.15rem; font-weight: 760; line-height: 1; } .gift-room-gift-detail-hero__copy span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; } .gift-room-gift-detail-product { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-cream); } .gift-room-gift-detail-product__media { flex: none; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; background: var(--color-sand); color: var(--gr-accent, var(--color-forest)); font-size: 20px; } .gift-room-gift-detail-product__media img { width: 100%; height: 100%; display: block; object-fit: cover; } .gift-room-gift-detail-product__copy { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; } .gift-room-gift-detail-product__copy strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 760; } .gift-room-gift-detail-product__copy small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 650; } .gift-room-gift-detail-product__change { flex: none; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-cream); color: var(--color-ink); font-family: var(--font-display); font-size: 0.72rem; font-weight: 720; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease; } .gift-room-gift-detail-product__change .ti { font-size: 14px; } .gift-room-gift-detail-product__change:hover, .gift-room-gift-detail-product__change:focus-visible { background: var(--popup-hover); border-color: transparent; outline: 0; } .gift-room-gift-detail-attach { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--color-ink) 22%, var(--color-line)); border-radius: 16px; background: transparent; text-align: left; cursor: pointer; transition: border-color 0.16s ease, background-color 0.16s ease; } .gift-room-gift-detail-attach:hover, .gift-room-gift-detail-attach:focus-visible { border-color: var(--gr-accent, var(--color-forest)); background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 8%, transparent); outline: 0; } .gift-room-gift-detail-attach__icon { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--color-sand); color: var(--gr-accent, var(--color-forest)); font-size: 18px; } .gift-room-gift-detail-attach__copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; } .gift-room-gift-detail-attach__copy strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 760; } .gift-room-gift-detail-attach__copy small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 650; } .gift-room-gift-detail-attach__add { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); transition: transform 0.16s ease; } .gift-room-gift-detail-attach:hover .gift-room-gift-detail-attach__add, .gift-room-gift-detail-attach:focus-visible .gift-room-gift-detail-attach__add { transform: scale(1.06); } .gift-room-sheet-check:not(.gift-room-delight-sheet__check) { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 4px 0 14px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 760; line-height: 1.2; cursor: pointer; box-shadow: none; transition: color 0.18s ease; } .gift-room-sheet-check:not(.gift-room-delight-sheet__check):hover, .gift-room-sheet-check:not(.gift-room-delight-sheet__check):focus-within { color: var(--color-forest); box-shadow: none; } .gift-room-sheet-check:not(.gift-room-delight-sheet__check):has(input[type="checkbox"]:checked) { color: var(--color-forest); background: transparent; box-shadow: none; } .gift-room-sheet-check:not(.gift-room-delight-sheet__check) input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 34px; margin: 0; border: 2px solid var(--popup-control-border); border-radius: 12px; background: var(--popup-bg); color: var(--popup-bg); cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-sheet-check:not(.gift-room-delight-sheet__check) input[type="checkbox"]::after { content: ""; width: 17px; height: 14px; background: currentColor; opacity: 0; transform: scale(0.82); -webkit-mask: url("/assets/gift-room-icons/shared/check.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/shared/check.svg") center / contain no-repeat; transition: opacity 0.14s ease, transform 0.14s ease; } .gift-room-sheet-check:not(.gift-room-delight-sheet__check) input[type="checkbox"]:checked { border-color: var(--color-forest); background: var(--color-forest); color: var(--popup-bg); box-shadow: none; } .gift-room-sheet-check:not(.gift-room-delight-sheet__check) input[type="checkbox"]:checked::after { opacity: 1; transform: scale(1); } .gift-room-sheet-check:not(.gift-room-delight-sheet__check) input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-forest) 16%, transparent); } .gift-room-sheet-check:not(.gift-room-delight-sheet__check):active input[type="checkbox"] { transform: scale(0.96); } .gift-room-sheet-check__label { min-width: 0; } .gift-room-seat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gift-room-seat-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gift-room-seat-stats span { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--popup-hover); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; } .gift-room-seat-stats strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.02rem; font-weight: 720; } .gift-room-seat-warning { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; color: var(--color-forest); background: color-mix(in srgb, var(--color-forest) 10%, var(--color-cream)); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 680; line-height: 1; white-space: nowrap; } .gift-room-seat-warning--inline { width: auto; min-height: 36px; } .gift-room-seat-warning.is-warn { color: var(--gr-accent, var(--color-forest)); background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 13%, var(--color-cream)); } .gift-room-seat-auto, .gift-room-seat-shapes { display: none; margin: 0; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-sand); } .gift-room-seat-auto.is-open, .gift-room-seat-shapes.is-open { display: flex; } .gift-room-seat-shapes strong { color: var(--color-ink); font-family: var(--font-display); font-size: 0.9rem; } .gift-room-seat-auto p { margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; line-height: 1.4; } .gift-room-planner-sheet--seat-checks { width: min(560px, calc(100vw - 48px)); max-width: min(560px, calc(100vw - 48px)); border-radius: 24px; } .gift-room-planner-sheet--seat-checks .gift-room-modal__title { font-size: 1.45rem; line-height: 1.12; } .gift-room-planner-sheet--seat-checks .gift-room-modal__subtitle { max-width: 34rem; font-size: 0.82rem; } .gift-room-planner-sheet--seat-checks .gift-room-planner-sheet__head { padding: 24px 24px 10px; } .gift-room-planner-sheet--seat-checks .gift-room-planner-sheet__body { padding: 8px 24px 24px; gap: 14px; } .gift-room-seat-checks { display: grid; gap: 12px; } .gift-room-seat-checks__hero, .gift-room-seat-checks__row { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--color-line); background: var(--popup-bg); } .gift-room-seat-checks__hero { grid-template-columns: auto minmax(0, 1fr); padding: 13px 14px; border-radius: 18px; } .gift-room-seat-checks__hero.is-warn { background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 8%, var(--popup-bg)); } .gift-room-seat-checks__hero.is-ok { background: color-mix(in srgb, var(--color-forest) 8%, var(--popup-bg)); } .gift-room-seat-checks__hero-icon, .gift-room-seat-checks__row-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--color-forest); background: var(--popup-hover); } .gift-room-seat-checks__hero.is-warn .gift-room-seat-checks__hero-icon, .gift-room-seat-checks__row.is-warn .gift-room-seat-checks__row-icon { color: var(--gr-accent, var(--color-forest)); } .gift-room-seat-checks__hero div, .gift-room-seat-checks__row div { min-width: 0; display: grid; gap: 2px; } .gift-room-seat-checks__hero strong, .gift-room-seat-checks__row strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 760; line-height: 1.2; } .gift-room-seat-checks__hero strong { font-family: var(--font-display); font-size: 1.04rem; } .gift-room-seat-checks__hero p, .gift-room-seat-checks__row p { margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.74rem; line-height: 1.35; } .gift-room-seat-checks__list { display: grid; gap: 8px; } .gift-room-seat-checks__row { min-height: 62px; padding: 9px 11px; border-radius: 16px; } .gift-room-seat-checks__row-value { justify-self: end; min-height: 28px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: var(--popup-hover); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 760; white-space: nowrap; } .gift-room-seat-checks__row.is-warn .gift-room-seat-checks__row-value { color: var(--gr-accent, var(--color-forest)); background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 12%, var(--popup-bg)); } .gift-room-seat-checks__row.is-ok .gift-room-seat-checks__row-value { color: var(--color-forest); background: color-mix(in srgb, var(--color-forest) 12%, var(--popup-bg)); } .gift-room-seat-checks__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .gift-room-seat-checks__action { min-width: 0; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--popup-bg); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 760; cursor: pointer; white-space: nowrap; transition: border-color 0.18s ease, background-color 0.18s ease; } .gift-room-seat-checks__action.is-primary { border-color: transparent; background: var(--color-ink); color: var(--color-cream); } .gift-room-seat-checks__action:hover, .gift-room-seat-checks__action:focus-visible { border-color: color-mix(in srgb, var(--color-forest) 38%, var(--color-line)); background: color-mix(in srgb, var(--color-forest) 8%, var(--popup-bg)); outline: 0; } .gift-room-seat-checks__action.is-primary:hover, .gift-room-seat-checks__action.is-primary:focus-visible { background: var(--color-ink); color: var(--color-cream); } @media (max-width: 640px) { .gift-room-planner-sheet--seat-checks { width: min(100%, calc(100vw - 28px)); max-width: min(100%, calc(100vw - 28px)); } .gift-room-seat-checks__row { grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; } .gift-room-seat-checks__row-value { grid-column: 2; justify-self: start; } .gift-room-seat-checks__actions { grid-template-columns: 1fr; } } .gift-room-seat-auto { flex-direction: column; gap: 14px; padding: 16px; border-radius: 24px; background: var(--color-cream); } .gift-room-seat-auto__head, .gift-room-seat-auto footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gift-room-seat-auto__head > div:first-child { min-width: 0; display: grid; gap: 3px; } .gift-room-seat-auto__head strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; font-weight: 780; line-height: 1.1; } .gift-room-seat-auto__head-actions { display: inline-flex; align-items: center; gap: 8px; } .gift-room-seat-auto__count { min-height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-forest); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 720; white-space: nowrap; } .gift-room-seat-auto__close { -webkit-appearance: none; appearance: none; width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; transition: box-shadow 0.16s ease; } .gift-room-seat-auto__close:hover, .gift-room-seat-auto__close:focus-visible { background: transparent; color: var(--color-ink); box-shadow: var(--gift-room-seat-pill-hover-shadow); outline: 0; } .gift-room-seat-auto__close-icon { width: 16px; height: 16px; display: block; background: currentColor; -webkit-mask: url("/assets/gift-room-icons/shared/x.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/shared/x.svg") center / contain no-repeat; } .gift-room-seat-auto__strategies { width: min(100%, 560px); display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--color-line); border-radius: 999px; } .gift-room-seat-option { -webkit-appearance: none; appearance: none; flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; text-align: center; transition: background-color 0.16s ease, color 0.16s ease; } .gift-room-seat-option strong { font-family: var(--font-display); font-size: 0.86rem; font-weight: 760; line-height: 1.12; } .gift-room-seat-option small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 650; line-height: 1.18; } .gift-room-seat-option:hover, .gift-room-seat-option:focus-visible { background: color-mix(in srgb, var(--color-forest) 14%, var(--color-cream)); outline: 0; } .gift-room-seat-option.is-active { background: var(--color-ink); color: var(--color-cream); } .gift-room-seat-option.is-active small { color: color-mix(in srgb, var(--color-cream) 72%, transparent); } .gift-room-seat-auto__preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .gift-room-seat-auto__preview > span { min-width: 0; display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--color-line); border-radius: 18px; } .gift-room-seat-auto__preview strong { overflow: hidden; color: var(--color-ink); font-family: var(--font-display); font-size: 0.86rem; line-height: 1.14; text-overflow: ellipsis; white-space: nowrap; } .gift-room-seat-auto__preview small { overflow: hidden; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .gift-room-seat-auto__empty { padding: 0; } .gift-room-seat-auto footer { justify-content: flex-start; } .gift-room-seat-auto__action { position: relative; isolation: isolate; overflow: visible; min-height: 40px; padding: 0 16px; border: 0; background: transparent; box-shadow: none; transition: box-shadow 0.16s ease; } .gift-room-seat-auto__action--ghost { color: var(--color-ink); } .gift-room-seat-auto__action--ghost:hover, .gift-room-seat-auto__action--ghost:focus-visible { background: transparent; color: var(--color-ink); box-shadow: var(--gift-room-seat-pill-hover-shadow); outline: 0; } .gift-room-seat-auto__action--primary { color: var(--color-cream); } .gift-room-seat-auto__action--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transition: transform 0.18s ease; } .gift-room-seat-auto__action--primary:hover, .gift-room-seat-auto__action--primary:focus-visible { background: transparent; color: var(--color-cream); box-shadow: none; outline: 0; } .gift-room-seat-auto__action--primary:hover::before, .gift-room-seat-auto__action--primary:focus-visible::before { transform: scale(1.055); } .gift-room-seat-auto footer .gift-room-seat-auto__action:disabled, .gift-room-seat-auto footer .gift-room-seat-auto__action:disabled:hover, .gift-room-seat-auto footer .gift-room-seat-auto__action:disabled:focus-visible { opacity: 0.46; cursor: not-allowed; box-shadow: none; } .gift-room-planner-sheet .gift-room-seat-auto--sheet { display: flex; margin: 0; padding: 0 0 4px; border: 0; border-radius: 0; background: transparent; } .gift-room-planner-sheet .gift-room-seat-auto--sheet .gift-room-seat-auto__strategies { width: 100%; } .gift-room-planner-sheet .gift-room-seat-auto--sheet .gift-room-seat-auto__action { width: auto; } .gift-room-seat-shapes { grid-template-columns: minmax(0, 1fr); justify-content: center; align-items: stretch; gap: 8px; padding: 8px 0 2px; border: 0; background: transparent; } .gift-room-seat-shapes.is-open { display: grid; } .gift-room-seat-shapes > strong { justify-self: center; margin: 0 0 2px; text-align: center; font-size: 1.05rem; font-weight: 760; line-height: 1.1; } .gift-room-seat-shape-bar, .gift-room-seat-table-shape-options { width: min(100%, 680px); min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--color-line); border-radius: 999px; background: transparent; overflow-x: auto; scrollbar-width: none; } .gift-room-seat-shape-bar { justify-self: center; } .gift-room-seat-shape-bar::-webkit-scrollbar, .gift-room-seat-table-shape-options::-webkit-scrollbar { display: none; } .gift-room-seat-shape-bar button, .gift-room-seat-table-shape-option { -webkit-appearance: none; appearance: none; flex: 1 0 150px; min-width: 0; min-height: 46px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; background-image: none; color: var(--color-ink); font-family: var(--font-display); text-align: left; box-shadow: none; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .gift-room-seat-shape-bar button:not(:hover):not(:focus-visible), .gift-room-seat-table-shape-option:not(.is-selected):not(:hover):not(:focus-visible) { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } .gift-room-seat-shape-bar button:hover, .gift-room-seat-shape-bar button:focus-visible, .gift-room-seat-table-shape-option:hover, .gift-room-seat-table-shape-option:focus-visible { background: color-mix(in srgb, var(--color-forest) 14%, var(--color-cream)); color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-table-shape-icon { --gift-room-table-shape-icon-url: url("/assets/gift-room-icons/shared/circle.svg"); flex: 0 0 auto; width: 23px; height: 23px; display: block; background: currentColor; -webkit-mask: var(--gift-room-table-shape-icon-url) center / contain no-repeat; mask: var(--gift-room-table-shape-icon-url) center / contain no-repeat; } .gift-room-table-shape-icon--round { --gift-room-table-shape-icon-url: url("/assets/gift-room-icons/shared/circle.svg"); } .gift-room-table-shape-icon--oval { --gift-room-table-shape-icon-url: url("/assets/gift-room-icons/shared/oval-vertical.svg"); width: 27px; } .gift-room-table-shape-icon--banquet { --gift-room-table-shape-icon-url: url("/assets/gift-room-icons/shared/rectangle.svg"); width: 24px; } .gift-room-table-shape-icon--head { --gift-room-table-shape-icon-url: url("/assets/gift-room-icons/shared/head-table.svg"); width: 25px; } .gift-room-seat-shape-card__copy { min-width: 0; display: grid; gap: 2px; align-content: center; } .gift-room-seat-shape-card__name { color: currentColor; font-size: 0.88rem; font-weight: 760; line-height: 1.16; } .gift-room-seat-shape-card__meta { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 650; line-height: 1.22; } .gift-room-seat-search { width: 100%; max-width: none; min-width: 0; flex: 1 1 auto; align-self: auto; } .gift-room-wedding-seating .gift-room-seat-search { min-height: 52px; height: 52px; max-height: 52px; } .gift-room-seat-search__button { pointer-events: none; } .gift-room-seat-search__button-icon { width: 17px; height: 17px; display: block; object-fit: contain; } .gift-room-seat-search input, .gift-room-seat-search__input { line-height: 1.2; } .gift-room-seat-search__input::-webkit-search-cancel-button, .gift-room-seat-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .gift-room-seat-search__input::placeholder { color: var(--color-ink-muted); opacity: 1; } .gift-room-seat-search__input:focus, .gift-room-seat-search__input:focus-visible { outline: none !important; box-shadow: none; } .gift-room-planner-sheet .gift-room-sheet-search { flex: 0 0 auto; min-height: 54px; height: 54px; max-height: 54px; margin: 0; border-color: color-mix(in srgb, var(--color-ink) 18%, transparent); background: var(--popup-bg); } .gift-room-planner-sheet .gift-room-sheet-search .gift-room-dashboard-search__icon { top: 50%; bottom: auto; left: 7px; width: 40px; min-width: 40px; height: 40px; transform: translateY(-50%); } .gift-room-planner-sheet .gift-room-sheet-search input { height: 100%; margin: 0; padding-left: 60px; font-size: 0.96rem; } .gift-room-seat-search-result { min-height: 20px; color: var(--color-forest); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; } .gift-room-seat-search-result:empty { display: none; } .gift-room-seat-workbar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; } .gift-room-seat-workbar .gift-room-seat-footer { justify-content: flex-end; flex-wrap: nowrap; } .gift-room-seat-board { position: relative; min-width: 0; scroll-margin-top: calc(var(--gift-room-room-chrome-height, 74px) + 12px); --seat-stage-user-height: 0px; --seat-canvas-scale: 1; --seat-canvas-x: 0px; --seat-canvas-y: 0px; --seat-canvas-w: 1760px; --seat-canvas-h: max(980px, var(--seat-stage-user-height, 0px)); --gift-room-seat-board-photo: none; --gift-room-seat-board-pattern: none; } .gift-room-seat-stage__empty { width: 100%; min-height: 240px; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; } .gift-room-seat-stage__empty strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.1rem; } .gift-room-seat-stage__empty span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.82rem; line-height: 1.35; } .gift-room-seat-stage { width: 100%; min-width: 0; position: relative; height: clamp(560px, var(--seat-stage-user-height, 640px), 2200px); min-height: 560px; display: block; margin-top: -2px; border: 1px solid var(--gift-room-seat-board-border); border-radius: 26px; background-color: var(--gift-room-seat-board-bg); background-image: linear-gradient(to right, color-mix(in srgb, var(--color-ink) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--color-ink) 6%, transparent) 1px, transparent 1px), var(--gift-room-seat-board-pattern), var(--gift-room-seat-board-photo); background-position: 0 0, 0 0, 0 0, center; background-size: 42px 42px, 42px 42px, 84px 84px, cover; background-repeat: repeat, repeat, repeat, no-repeat; box-shadow: none; contain: layout paint; cursor: grab; isolation: isolate; overflow: hidden; touch-action: none; } .gift-room-seat-board[data-seat-bg-mode="image"] .gift-room-seat-stage { background-image: var(--gift-room-seat-board-photo); background-position: center; background-size: cover; background-repeat: no-repeat; } .gift-room-seat-board.is-resizing, .gift-room-seat-board.is-resizing .gift-room-seat-stage { cursor: ns-resize; user-select: none; } .gift-room-seat-stage-resize { position: absolute; left: 50%; bottom: 8px; z-index: 10; width: 116px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink-soft); cursor: ns-resize; opacity: 0.56; transform: translateX(-50%); transition: opacity 0.16s ease; } .gift-room-seat-stage-resize span { width: 82px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 28%, transparent); } .gift-room-seat-stage-resize:hover, .gift-room-seat-stage-resize:focus-visible, .gift-room-seat-board.is-resizing .gift-room-seat-stage-resize { opacity: 1; outline: 0; } .gift-room-seat-stage.is-panning { cursor: grabbing; } .gift-room-seat-canvas { position: absolute; inset: 0 auto auto 0; width: var(--seat-canvas-w); min-height: var(--seat-canvas-h); display: flex; flex-wrap: wrap; justify-content: center; align-items: start; align-content: flex-start; gap: clamp(18px, 3vw, 36px); padding: clamp(32px, 4vw, 54px); transform: translate3d(var(--seat-canvas-x), var(--seat-canvas-y), 0) scale(var(--seat-canvas-scale)); transform-origin: 0 0; contain: layout paint; will-change: transform; } .gift-room-seat-canvas.has-fixed-layout { display: block; padding: 0; } .gift-room-seat-canvas.has-fixed-layout .gift-room-seat-table[data-seat-fixed="1"] { position: absolute; left: var(--seat-table-x, 0px); top: var(--seat-table-y, 0px); } .gift-room-seat-canvas-tools { position: absolute; top: 18px; right: 18px; z-index: 8; display: flex; align-items: center; justify-content: flex-end; gap: 8px; max-width: calc(100% - 36px); flex-wrap: wrap; pointer-events: auto; } .gift-room-seat-canvas-tools--left { right: auto; left: 18px; justify-content: flex-start; } .gift-room-seat-canvas-control { --seat-canvas-control-fill: color-mix(in srgb, var(--color-cream) 50%, transparent); --seat-canvas-control-border: color-mix(in srgb, var(--color-line) 72%, transparent); --seat-canvas-control-ink: var(--color-ink); position: relative; isolation: isolate; width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--seat-canvas-control-ink); opacity: 0.7; box-shadow: none; cursor: pointer; backdrop-filter: blur(10px); overflow: visible; transition: opacity 0.18s ease; } .gift-room-seat-canvas-control::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--seat-canvas-control-border); border-radius: inherit; background: var(--seat-canvas-control-fill); transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .gift-room-seat-canvas-control--pill { width: auto; min-width: 0; padding: 0 16px; gap: 7px; font-family: var(--font-display); font-size: 0.82rem; font-weight: 720; letter-spacing: 0; white-space: nowrap; } .gift-room-seat-canvas-control:hover, .gift-room-seat-canvas-control:focus-visible { opacity: 1; outline: 0; } .gift-room-seat-canvas-control.is-active { opacity: 1; } .gift-room-seat-canvas-control:disabled { cursor: default; opacity: 0.34; } .gift-room-seat-canvas-control:disabled::before, .gift-room-seat-canvas-control:disabled:hover::before, .gift-room-seat-canvas-control:disabled:focus-visible::before { box-shadow: none; } .gift-room-seat-canvas-control--primary { --seat-canvas-control-border: transparent; --seat-canvas-control-fill: var(--color-ink); --seat-canvas-control-ink: var(--color-cream); } .gift-room-seat-canvas-control--auto { --seat-canvas-control-border: transparent; --seat-canvas-control-fill: var(--color-forest); --seat-canvas-control-ink: var(--color-cream); } .gift-room-seat-canvas-control--undo { --seat-canvas-control-fill: var(--color-cream); --seat-canvas-control-ink: var(--color-ink); } .gift-room-seat-canvas-control--shadow:hover::before, .gift-room-seat-canvas-control--shadow:focus-visible::before { border-color: transparent; box-shadow: var(--gift-room-seat-pill-hover-shadow); } .gift-room-seat-canvas-control--primary::before, .gift-room-seat-canvas-control--auto::before { transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } .gift-room-seat-canvas-control--primary:hover::before, .gift-room-seat-canvas-control--primary:focus-visible::before, .gift-room-seat-canvas-control--auto:hover::before, .gift-room-seat-canvas-control--auto:focus-visible::before { transform: scale(1.055); box-shadow: none; } .gift-room-seat-canvas-control i { display: block; font-size: 18px; line-height: 1; } .gift-room-seat-canvas-control > i, .gift-room-seat-canvas-control__label, .gift-room-seat-canvas-minus { position: relative; z-index: 1; } .gift-room-seat-canvas-minus { width: 18px; height: 18px; display: inline-grid; place-items: center; } .gift-room-seat-canvas-minus::before { content: ""; width: 16px; height: 3px; border-radius: 999px; background: currentColor; } .gift-room-seat-bg-panel { display: grid; gap: 14px; } .gift-room-seat-bg-popover { position: fixed; z-index: 12140; width: min(372px, calc(100vw - 28px)); max-height: min(620px, calc(100vh - 28px)); padding: 14px; border: 1px solid var(--popup-border); border-radius: 24px; background: var(--popup-bg); color: var(--color-ink); box-shadow: var(--popup-shadow); overflow: auto; } .gift-room-seat-bg-popover__title { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 0 2px 2px; } .gift-room-seat-bg-popover__title strong { font-family: var(--font-heading); font-size: 1.08rem; font-weight: 780; line-height: 1; } .gift-room-seat-bg-grid { display: flex; align-items: stretch; gap: 0; padding: 5px; border: 2px solid color-mix(in srgb, var(--color-ink) 92%, var(--color-line)); border-radius: 999px; background: var(--popup-bg); } .gift-room-seat-bg-popover .gift-room-seat-bg-grid { display: flex; } .gift-room-seat-bg-popover .gift-room-seat-bg-choice { gap: 6px; padding-inline: 8px; font-size: 0.78rem; } .gift-room-seat-bg-popover .gift-room-seat-bg-choice__label { overflow: visible; text-overflow: clip; white-space: normal; } .gift-room-seat-bg-choice { min-width: 0; min-height: 46px; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: 0.92rem; font-weight: 740; line-height: 1; text-align: center; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .gift-room-seat-bg-choice:hover, .gift-room-seat-bg-choice:focus-visible { background: color-mix(in srgb, var(--color-forest) 10%, transparent); box-shadow: none; outline: 0; } .gift-room-seat-bg-choice.is-active { background: var(--color-ink); color: var(--color-cream); box-shadow: 0 8px 16px color-mix(in srgb, var(--color-ink) 18%, transparent); } .gift-room-seat-bg-choice i { flex: 0 0 auto; font-size: 17px; line-height: 1; } .gift-room-seat-bg-choice__palette-icon { width: 19px; height: 19px; flex-basis: 19px; font-size: 19px; } .gift-room-seat-bg-choice__swatch { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid color-mix(in srgb, var(--color-ink) 14%, var(--color-line)); border-radius: 999px; background: var(--seat-bg-color, var(--color-cream)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-cream) 72%, transparent); } .gift-room-seat-bg-choice__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-seat-bg-color-panel { display: none; } .gift-room-seat-bg-image-panel, .gift-room-seat-bg-panel[data-seat-bg-mode="color"] .gift-room-seat-bg-color-panel { display: grid; gap: 10px; } .gift-room-seat-bg-color { min-width: 0; width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 16px; border: 1px solid var(--color-line); border-radius: 20px; background: var(--popup-bg); color: var(--color-ink); font-family: var(--font-heading); text-align: left; cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .gift-room-seat-bg-color:hover, .gift-room-seat-bg-color:focus-visible { border-color: color-mix(in srgb, var(--color-ink) 18%, var(--color-line)); box-shadow: var(--gift-room-seat-pill-hover-shadow); outline: 0; transform: translateY(-1px); } .gift-room-seat-bg-color > span:first-child { min-width: 0; display: grid; gap: 4px; } .gift-room-seat-bg-color strong { font-family: var(--font-heading); font-size: 0.84rem; font-weight: 780; line-height: 1; } .gift-room-seat-bg-color small { color: var(--color-ink-soft); font-size: 0.72rem; font-weight: 700; line-height: 1; } .gift-room-seat-bg-color__swatch { width: 46px; height: 38px; flex: 0 0 46px; border: 1px solid color-mix(in srgb, var(--color-ink) 8%, var(--color-line)); border-radius: 12px; background: var(--seat-bg-color, var(--color-cream)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--color-cream) 72%, transparent); } .gift-room-seat-bg-palette { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--color-line) 78%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--color-cream) 72%, var(--popup-bg)); } .gift-room-seat-bg-palette[hidden] { display: none; } .gift-room-seat-bg-swatch { aspect-ratio: 1; min-height: 34px; display: inline-grid; place-items: center; padding: 4px; border: 1px solid color-mix(in srgb, var(--color-ink) 10%, var(--color-line)); border-radius: 14px; background: var(--popup-bg); cursor: pointer; transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .gift-room-seat-bg-swatch span { width: 100%; height: 100%; display: block; border-radius: 10px; background: var(--seat-bg-color, var(--color-cream)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-cream) 64%, transparent); } .gift-room-seat-bg-swatch:hover, .gift-room-seat-bg-swatch:focus-visible, .gift-room-seat-bg-swatch.is-active { border-color: var(--color-ink); box-shadow: var(--gift-room-seat-pill-hover-shadow); outline: 0; transform: translateY(-1px); } .gift-room-seat-bg-upload { position: relative; min-width: 0; min-height: 68px; display: flex; align-items: center; gap: 12px; isolation: isolate; padding: 12px 14px; border: 0; border-radius: 22px; background: color-mix(in srgb, var(--color-cream) 76%, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-heading); cursor: pointer; overflow: hidden; transition: background-color 0.16s ease, transform 0.16s ease; } .gift-room-seat-bg-upload::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--color-line) 86%, transparent) 50%, transparent 0) repeat-x, linear-gradient(90deg, color-mix(in srgb, var(--color-line) 86%, transparent) 50%, transparent 0) repeat-x, linear-gradient(0deg, color-mix(in srgb, var(--color-line) 86%, transparent) 50%, transparent 0) repeat-y, linear-gradient(0deg, color-mix(in srgb, var(--color-line) 86%, transparent) 50%, transparent 0) repeat-y; background-position: 0 0, 0 100%, 0 0, 100% 0; background-size: 16px 2px, 16px 2px, 2px 16px, 2px 16px; pointer-events: none; transition: opacity 0.16s ease; } .gift-room-seat-bg-upload:hover, .gift-room-seat-bg-upload:focus-within, .gift-room-seat-bg-upload.is-dragover, .gift-room-seat-bg-upload.is-active { background: var(--popup-bg); transform: translateY(-1px); } .gift-room-seat-bg-upload:hover::before, .gift-room-seat-bg-upload:focus-within::before, .gift-room-seat-bg-upload.is-dragover::before, .gift-room-seat-bg-upload.is-active::before { background: linear-gradient(90deg, var(--color-ink) 50%, transparent 0) repeat-x, linear-gradient(90deg, var(--color-ink) 50%, transparent 0) repeat-x, linear-gradient(0deg, var(--color-ink) 50%, transparent 0) repeat-y, linear-gradient(0deg, var(--color-ink) 50%, transparent 0) repeat-y; background-position: 0 0, 0 100%, 0 0, 100% 0; background-size: 16px 2px, 16px 2px, 2px 16px, 2px 16px; animation: gift-room-seat-bg-dash 0.62s linear infinite; } .gift-room-seat-bg-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .gift-room-seat-bg-upload__icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--color-forest) 12%, var(--color-cream)); color: var(--color-forest); font-size: 18px; } .gift-room-seat-bg-upload__copy { min-width: 0; display: grid; gap: 4px; flex: 1 1 auto; } .gift-room-seat-bg-upload__copy strong { font-size: 0.86rem; font-weight: 780; line-height: 1; } .gift-room-seat-bg-upload__copy small { max-width: 100%; color: var(--color-ink-soft); font-size: 0.74rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-seat-bg-upload__button { flex: 0 0 auto; padding: 9px 13px; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); font-size: 0.74rem; font-weight: 780; line-height: 1; } .gift-room-seat-bg-preview { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid color-mix(in srgb, var(--color-line) 82%, transparent); border-radius: 20px; background: var(--popup-bg); } .gift-room-seat-bg-preview[hidden] { display: none; } .gift-room-seat-bg-preview__thumb { width: 58px; height: 44px; flex: 0 0 58px; border-radius: 14px; background-color: color-mix(in srgb, var(--color-sand) 64%, var(--color-cream)); background-position: center; background-size: cover; } .gift-room-seat-bg-preview__meta { min-width: 0; display: grid; gap: 4px; flex: 1 1 auto; } .gift-room-seat-bg-preview__meta strong, .gift-room-seat-bg-preview__meta small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-seat-bg-preview__meta strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.82rem; font-weight: 780; } .gift-room-seat-bg-preview__meta small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; } .gift-room-seat-bg-preview__actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; } .gift-room-seat-bg-preview__actions button { min-height: 34px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--color-ink) 10%, var(--color-line)); border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 780; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .gift-room-seat-bg-preview__actions button:hover, .gift-room-seat-bg-preview__actions button:focus-visible { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-cream); outline: 0; } .gift-room-seat-bg-panel.is-loading .gift-room-seat-bg-upload__button { background: color-mix(in srgb, var(--color-ink) 72%, var(--color-cream)); } @keyframes gift-room-seat-bg-dash { to { background-position: 16px 0, -16px 100%, 0 -16px, 100% 16px; } } .gift-room-seat-bg-actions { margin-top: 2px; } .gift-room-seat-bg-popover .gift-room-seat-bg-actions { justify-content: space-between; } .gift-room-seat-bg-popover .gift-room-seat-bg-actions .gift-room-sheet-action { min-height: 44px; padding-inline: 18px; } .gift-room-seat-stage.is-3d .gift-room-seat-table__surface { transform: perspective(900px) rotateX(24deg) scale(0.98); transform-origin: center 76%; } .gift-room-seat-table { width: max-content; min-width: min(100%, var(--seat-table-w, 230px)); max-width: 100%; display: grid; align-content: start; justify-items: center; gap: 10px; transform: translate3d(var(--seat-table-shift-x, 0px), var(--seat-table-shift-y, 0px), 0); transition: none; will-change: transform; contain: layout; backface-visibility: hidden; } .gift-room-seat-table--sweet { flex: 0 0 100%; } .gift-room-seat-table.is-dragging { z-index: 3; cursor: grabbing; box-shadow: none; transition: none; } .gift-room-seat-table.is-dragging .gift-room-seat-table__head, .gift-room-seat-table.is-dragging .gift-room-seat-table__surface, .gift-room-seat-table.is-dragging .gift-room-seat-table__top { cursor: grabbing; } body.is-seat-table-dragging, body.is-seat-table-dragging * { user-select: none; } .gift-room-seat-table__head { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; font-weight: 720; cursor: grab; } .gift-room-seat-table__head strong { line-height: 1.08; } .gift-room-seat-table__head > span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.8rem; } .gift-room-seat-table__name-edit { width: 24px; height: 24px; display: inline-grid; place-items: center; flex: 0 0 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease; } .gift-room-seat-table__name-edit:hover, .gift-room-seat-table__name-edit:focus-visible { background: color-mix(in srgb, var(--color-ink) 7%, var(--color-cream)); color: var(--color-ink); outline: 0; } .gift-room-seat-table__name-edit .gift-room-seat-table__control-icon { width: 14px; height: 14px; } .gift-room-seat-table__surface { position: relative; width: var(--seat-table-w, 230px); height: var(--seat-table-h, 190px); max-width: none; min-height: var(--seat-table-h, 190px); display: grid; place-items: center; cursor: grab; } .gift-room-seat-table--sweet .gift-room-seat-table__surface { max-width: none; } .gift-room-seat-table__top { position: absolute; left: var(--seat-top-left, 63px); top: var(--seat-top-top, 43px); width: var(--seat-top-w, 104px); height: var(--seat-top-h, 104px); display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--gr-accent, var(--color-forest)) 76%, var(--color-line)); border-radius: var(--seat-top-radius, 50%); background: var(--color-cream); color: var(--color-ink-soft); transform: none; z-index: 1; cursor: grab; } .gift-room-seat-table__top span { font-family: var(--font-display); font-size: 0.9rem; } .gift-room-seat-table__seats { position: relative; width: var(--seat-table-w, 190px); height: var(--seat-table-h, 170px); z-index: 2; } .gift-room-seat-table--sweet .gift-room-seat-table__seats { width: var(--seat-table-w, 210px); height: var(--seat-table-h, 116px); } .gift-room-seat { position: absolute; width: var(--seat-size, 40px); height: var(--seat-size, 40px); display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gr-accent, var(--color-forest)) 34%, var(--color-line)); background: var(--color-cream); color: transparent; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .gift-room-seat.is-filled { border-style: solid; background: var(--gr-accent, var(--color-forest)); color: var(--color-cream); cursor: grab; } .gift-room-seat.is-preview { border: 1.5px dashed var(--color-forest); background: color-mix(in srgb, var(--color-forest) 14%, var(--color-cream)); color: var(--color-forest); cursor: default; } .gift-room-seat.is-preview .gift-room-seat-meal-icon { color: currentColor; } .gift-room-seat-stage[data-color-by="meal"] .gift-room-seat.is-filled.meal-chicken { background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 74%, var(--color-sand)); } .gift-room-seat-stage[data-color-by="meal"] .gift-room-seat.is-filled.meal-beef { background: color-mix(in srgb, var(--color-ink) 74%, var(--color-cream)); } .gift-room-seat-stage[data-color-by="meal"] .gift-room-seat.is-filled.meal-fish { background: color-mix(in srgb, var(--color-forest) 45%, var(--color-cream)); color: var(--color-ink); } .gift-room-seat-stage[data-color-by="meal"] .gift-room-seat.is-filled.meal-veg { background: var(--color-forest); } .gift-room-seat-stage[data-color-by="meal"] .gift-room-seat.is-filled.meal-vegan { background: color-mix(in srgb, var(--color-forest) 72%, var(--color-sand)); } .gift-room-seat-stage[data-color-by="meal"] .gift-room-seat.is-filled.meal-gluten-free { background: color-mix(in srgb, var(--color-warn) 42%, var(--color-cream)); color: var(--color-ink); } .gift-room-seat-stage[data-color-by="meal"] .gift-room-seat.is-filled.meal-kids { background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 58%, var(--color-cream)); color: var(--color-ink); } .gift-room-seat-stage[data-color-by="side"] .gift-room-seat.is-filled.side-bride { background: var(--color-forest); } .gift-room-seat-stage[data-color-by="side"] .gift-room-seat.is-filled.side-groom { background: var(--gr-accent, var(--color-forest)); } .gift-room-seat-stage[data-color-by="side"] .gift-room-seat.is-filled.side-both { background: var(--color-ink); } .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-diaz, .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-koch, .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-hahn, .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-frank { background: var(--color-forest); } .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-lang, .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-lutz, .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-bauer, .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-wolf { background: var(--gr-accent, var(--color-forest)); } .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-voss, .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-stein, .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-weiss, .gift-room-seat-stage[data-color-by="grp"] .gift-room-seat.is-filled.group-marx { background: color-mix(in srgb, var(--color-ink) 72%, var(--color-cream)); } .gift-room-seat.is-drag-source { border-style: dashed; background: var(--color-cream); color: transparent; box-shadow: none; opacity: 1; } .gift-room-seat.is-drag-source > span, .gift-room-seat.is-drag-source .gift-room-seat-meal-icon { opacity: 0; } body.is-seat-guest-dragging, body.is-seat-guest-dragging * { cursor: grabbing !important; } .gift-room-seat.gift-room-seat-drag-ghost { position: fixed; z-index: 14000; pointer-events: none; transform: translate3d(-50%, -50%, 0); transition: none; box-shadow: none; } .gift-room-seat.is-hot, .gift-room-seat.is-match, .gift-room-seat:focus-visible { outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-ink) 22%, transparent), 0 12px 22px color-mix(in srgb, var(--color-ink) 13%, transparent); transform: scale(1.12); } .gift-room-seat .gift-room-seat-meal-icon { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; color: var(--color-ink); background: transparent; } .gift-room-seat .gift-room-seat-meal-icon::before { width: 16px; height: 16px; } .gift-room-seat-table__legend { min-height: 20px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; } .gift-room-seat-table__legend .gift-room-seat-legend__icon { width: 14px; height: 14px; margin-right: 2px; color: var(--color-ink); vertical-align: -0.14em; } .gift-room-seat-table__legend .gift-room-seat-legend__icon::before { width: 14px; height: 14px; } .gift-room-seat-table__legend-empty { color: color-mix(in srgb, var(--color-ink-soft) 72%, transparent); } .gift-room-seat-table__note { max-width: 210px; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 5%, var(--color-cream)); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 650; } .gift-room-seat-table__controls { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 6px; border: 0; border-radius: 999px; background: var(--color-ink); box-shadow: none; } .gift-room-seat-table__controls--sweet { min-width: 0; } .gift-room-seat-table__controls button { min-width: 34px; width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; padding: 0; background: color-mix(in srgb, var(--color-cream) 94%, var(--popup-hover)); color: var(--color-ink); font-family: var(--font-display); font-size: 0.88rem; font-weight: 650; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease; } .gift-room-seat-table__controls button:hover, .gift-room-seat-table__controls button:focus-visible { background: var(--color-cream); color: var(--color-forest); outline: 0; box-shadow: none; transform: none; } .gift-room-seat-table__controls button[data-action="table-delete"]:hover, .gift-room-seat-table__controls button[data-action="table-delete"]:focus-visible { background: var(--color-cream); color: var(--color-alert-red); } .gift-room-seat-table__control-icon { --seat-control-icon-url: none; width: 17px; height: 17px; display: block; pointer-events: none; background: currentColor; -webkit-mask: var(--seat-control-icon-url) center / contain no-repeat; mask: var(--seat-control-icon-url) center / contain no-repeat; } .gift-room-seat-table__control-icon--minus { --seat-control-icon-url: url("/assets/header-icons/collection-budget-minus.svg"); width: 18px; height: 6px; } .gift-room-seat-table__control-icon--plus { --seat-control-icon-url: url("/assets/header-icons/collection-budget-plus.svg"); width: 17px; height: 17px; } .gift-room-seat-table__control-icon--shape { --seat-control-icon-url: none; position: relative; width: 21px; height: 21px; background: transparent; -webkit-mask: none; mask: none; } .gift-room-seat-table__control-icon--shape::before, .gift-room-seat-table__control-icon--shape::after { content: ""; position: absolute; background: currentColor; } .gift-room-seat-table__control-icon--shape::before { left: 1px; top: 4px; width: 17px; height: 13px; -webkit-mask: url("/assets/gift-room-icons/shared/rectangle.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/shared/rectangle.svg") center / contain no-repeat; } .gift-room-seat-table__control-icon--shape::after { right: -1px; top: -1px; width: 10px; height: 10px; -webkit-mask: url("/assets/gift-room-icons/shared/arrows-sort.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/shared/arrows-sort.svg") center / contain no-repeat; } .gift-room-seat-table__control-icon--edit { --seat-control-icon-url: url("/assets/gift-room-icons/edit.svg"); } .gift-room-seat-table__control-icon--trash { --seat-control-icon-url: url("/assets/gift-room-icons/trash.svg"); width: 18px; height: 18px; } .gift-room-seat-table__controls-meta { min-width: 42px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 92%, var(--popup-hover)); text-align: center; color: var(--color-ink); font-family: var(--font-display); font-size: 0.88rem; font-weight: 720; } .meal-dot { width: 8px; height: 8px; display: inline-block; margin-right: 4px; border-radius: 50%; vertical-align: middle; } .meal-chicken { background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 72%, var(--color-sand)); } .meal-beef { background: color-mix(in srgb, var(--color-ink) 64%, var(--color-cream)); } .meal-fish { background: color-mix(in srgb, var(--color-forest) 48%, var(--color-cream)); } .meal-veg { background: var(--color-forest); } .meal-vegan { background: color-mix(in srgb, var(--color-forest) 72%, var(--color-sand)); } .meal-gluten-free { background: color-mix(in srgb, var(--color-warn) 48%, var(--color-cream)); } .meal-kids { background: color-mix(in srgb, var(--color-ink) 35%, var(--color-sand)); } .gift-room-seat-pool { display: grid; gap: 12px; padding: 16px; border: 1px dashed var(--color-line); border-radius: 18px; background: var(--color-cream); } .gift-room-seat-pool--placement { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-style: solid; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 92%, var(--color-sand)); } .gift-room-seat-pool__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gift-room-seat-pool--placement .gift-room-seat-pool__head { flex: 0 0 auto; gap: 6px; } .gift-room-seat-pool__head strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.05rem; } .gift-room-seat-pool__head span, .gift-room-seat-pool__empty { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 640; } .gift-room-seat-pool__cta.gift-room-cta { margin-left: auto; } .gift-room-seat-pool__chips { display: flex; gap: 8px; flex-wrap: wrap; } .gift-room-seat-pool--placement .gift-room-seat-pool__chips { min-width: 0; flex: 1 1 220px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 0 38px 1px 0; scroll-padding-inline: 0 38px; scrollbar-width: none; mask-image: linear-gradient(to right, black calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent); } .gift-room-seat-pool--placement .gift-room-seat-pool__chips::-webkit-scrollbar { display: none; } .gift-room-seat-chip { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 5px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-cream); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 650; cursor: grab; } .gift-room-seat-pool--placement .gift-room-seat-chip { flex: 0 0 auto; } .gift-room-seat-chip span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--gr-accent, var(--color-forest)); color: var(--color-cream); font-size: 0.68rem; } .gift-room-seat-chip.is-selected { border-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 15%, transparent); } .gift-room-headcount-card__top, .gift-room-headcount-card__legend, .gift-room-saved-folderbar, .gift-room-invite-offers__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gift-room-mealbar { box-sizing: border-box; height: 18px; display: flex; align-items: stretch; overflow: hidden; padding: 2px; border: 1px solid color-mix(in srgb, var(--color-ink) 8%, var(--color-line)); border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 86%, var(--color-sand)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-cream) 84%, transparent), 0 8px 18px color-mix(in srgb, var(--color-ink) 7%, transparent); } .gift-room-mealbar i { min-width: 0; height: 100%; display: block; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-cream) 24%, transparent); } .gift-room-mealbar i.is-empty { display: none; } .gift-room-mealbar i.is-first-filled { border-radius: 999px 0 0 999px; } .gift-room-mealbar i.is-last-filled { border-radius: 0 999px 999px 0; } .gift-room-mealbar i.is-first-filled.is-last-filled { border-radius: 999px; } .gift-room-headcount-card__legend { align-items: center; gap: 10px 16px; justify-content: flex-start; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; line-height: 1.1; } .gift-room-headcount-card__legend-item { min-height: 22px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .gift-room-headcount-card__meal-icon.gift-room-meal-icon { width: 17px; height: 17px; flex: 0 0 auto; background: transparent; } .gift-room-headcount-card__meal-icon.gift-room-meal-icon::before { width: 15px; height: 15px; } .gift-room-headcount-card__meal-icon.meal-chicken { color: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 72%, var(--color-sand)); } .gift-room-headcount-card__meal-icon.meal-beef { color: color-mix(in srgb, var(--color-ink) 64%, var(--color-cream)); } .gift-room-headcount-card__meal-icon.meal-fish { color: color-mix(in srgb, var(--color-forest) 48%, var(--color-cream)); } .gift-room-headcount-card__meal-icon.meal-veg { color: var(--color-forest); } .gift-room-headcount-card__meal-icon.meal-vegan { color: color-mix(in srgb, var(--color-forest) 72%, var(--color-sand)); } .gift-room-headcount-card__meal-icon.meal-gluten-free { color: color-mix(in srgb, var(--color-warn) 48%, var(--color-cream)); } .gift-room-headcount-card__meal-icon.meal-kids { color: color-mix(in srgb, var(--color-ink) 35%, var(--color-sand)); } .gift-room-headcount-card__legend button, .gift-room-invite-offers__head button { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; border: 1px solid var(--color-line); border-radius: 999px; background: transparent; color: var(--color-ink); font: inherit; font-weight: 700; padding: 7px 13px; cursor: pointer; } .gift-room-headcount-card__legend button[data-action="copy-headcount"] { position: relative; isolation: isolate; overflow: visible; border-color: transparent; background: transparent; box-shadow: none; transition: border-color 0.16s ease, color 0.16s ease; } .gift-room-headcount-card__legend button[data-action="copy-headcount"]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: transparent; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-headcount-card__legend button[data-action="copy-headcount"]:hover, .gift-room-headcount-card__legend button[data-action="copy-headcount"]:focus-visible { outline: none; border-color: transparent; background: transparent; box-shadow: none; } .gift-room-headcount-card__legend button[data-action="copy-headcount"]:hover::before, .gift-room-headcount-card__legend button[data-action="copy-headcount"]:focus-visible::before { background: var(--color-cream); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-headcount-card__legend button[data-action="copy-headcount"]:active { transform: none; } .gift-room-households { display: grid; gap: 12px; } .gift-room-mealtrain-list { margin-top: 12px; } .gift-room-mealtrain-row .gift-room-status-pill { justify-self: end; } .gift-room-mealtrain-row__action.gift-room-cta { min-height: 40px; height: 40px; padding-inline: 16px; } .gift-room-household { display: grid; border-top: 1px solid var(--color-line); } .gift-room-household__head { min-height: 42px; display: flex; align-items: center; gap: 10px; color: var(--gr-accent, var(--color-forest)); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .gift-room-household__head span { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--color-sand); color: var(--color-ink-soft); letter-spacing: 0; text-transform: none; } .gift-room-guest-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 8px; border-top: 1px solid var(--color-line); } .gift-room-guest-row__body { min-width: 0; display: grid; gap: 5px; } .gift-room-guest-row__body strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; } .gift-room-guest-tags { display: flex; gap: 6px; flex-wrap: wrap; } .gift-room-guest-tag { min-height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border-radius: 999px; background: var(--color-sand); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; } .gift-room-guest-tag--meal, .gift-room-guest-tag--diet, .gift-room-guest-tag--kids { --gift-room-guest-tag-bg: color-mix(in srgb, var(--color-cream) 76%, var(--color-sand)); --gift-room-guest-tag-ink: var(--color-ink-soft); --gift-room-guest-tag-line: color-mix(in srgb, var(--color-ink-soft) 12%, transparent); background: var(--gift-room-guest-tag-bg); color: var(--gift-room-guest-tag-ink); box-shadow: inset 0 0 0 1px var(--gift-room-guest-tag-line); } .gift-room-guest-tag--meal.meal-chicken, .gift-room-guest-tag--diet.meal-chicken { --gift-room-guest-tag-bg: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 22%, var(--color-cream)); --gift-room-guest-tag-ink: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 86%, var(--color-ink)); --gift-room-guest-tag-line: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 38%, transparent); } .gift-room-guest-tag--meal.meal-beef, .gift-room-guest-tag--diet.meal-beef { --gift-room-guest-tag-bg: color-mix(in srgb, var(--color-ink) 16%, var(--color-cream)); --gift-room-guest-tag-ink: color-mix(in srgb, var(--color-ink) 88%, var(--color-cream)); --gift-room-guest-tag-line: color-mix(in srgb, var(--color-ink) 26%, transparent); } .gift-room-guest-tag--meal.meal-fish, .gift-room-guest-tag--diet.meal-fish { --gift-room-guest-tag-bg: color-mix(in srgb, var(--color-ink-soft) 14%, var(--color-cream)); --gift-room-guest-tag-ink: color-mix(in srgb, var(--color-ink-soft) 90%, var(--color-cream)); --gift-room-guest-tag-line: color-mix(in srgb, var(--color-ink-soft) 24%, transparent); } .gift-room-guest-tag--meal.meal-veg, .gift-room-guest-tag--diet.meal-veg { --gift-room-guest-tag-bg: color-mix(in srgb, var(--color-forest) 22%, var(--color-cream)); --gift-room-guest-tag-ink: color-mix(in srgb, var(--color-forest) 84%, var(--color-ink)); --gift-room-guest-tag-line: color-mix(in srgb, var(--color-forest) 36%, transparent); } .gift-room-guest-tag--meal.meal-vegan, .gift-room-guest-tag--diet.meal-vegan { --gift-room-guest-tag-bg: color-mix(in srgb, var(--color-forest) 16%, var(--color-cream)); --gift-room-guest-tag-ink: color-mix(in srgb, var(--color-forest) 74%, var(--color-ink)); --gift-room-guest-tag-line: color-mix(in srgb, var(--color-forest) 28%, transparent); } .gift-room-guest-tag--meal.meal-gluten-free, .gift-room-guest-tag--diet.meal-gluten-free { --gift-room-guest-tag-bg: color-mix(in srgb, var(--color-warn) 16%, var(--color-cream)); --gift-room-guest-tag-ink: color-mix(in srgb, var(--color-warn) 88%, var(--color-ink)); --gift-room-guest-tag-line: color-mix(in srgb, var(--color-warn) 34%, transparent); } .gift-room-guest-tag--diet.diet-allergy { --gift-room-guest-tag-bg: color-mix(in srgb, var(--color-alert-red) 12%, var(--color-cream)); --gift-room-guest-tag-ink: color-mix(in srgb, var(--color-alert-red) 86%, var(--color-ink)); --gift-room-guest-tag-line: color-mix(in srgb, var(--color-alert-red) 28%, transparent); } .gift-room-guest-tag--diet.diet-note { --gift-room-guest-tag-bg: color-mix(in srgb, var(--color-sand) 44%, var(--color-cream)); --gift-room-guest-tag-ink: color-mix(in srgb, var(--color-ink) 78%, var(--color-cream)); --gift-room-guest-tag-line: color-mix(in srgb, var(--color-ink) 16%, transparent); } .gift-room-guest-tag--kids.meal-kids, .gift-room-guest-tag--meal.meal-kids, .gift-room-guest-tag--diet.meal-kids { --gift-room-guest-tag-bg: color-mix(in srgb, var(--color-ink) 10%, var(--color-sand)); --gift-room-guest-tag-ink: color-mix(in srgb, var(--color-ink) 72%, var(--color-cream)); --gift-room-guest-tag-line: color-mix(in srgb, var(--color-ink) 18%, transparent); } .gift-room-guest-tag .gift-room-meal-icon { width: 16px; height: 16px; flex: 0 0 auto; color: currentColor; } .gift-room-guest-tag .gift-room-meal-icon::before { width: 14px; height: 14px; } .gift-room-guest-tag span:not(.gift-room-meal-icon) { min-width: 0; } .gift-room-guest-row__actions { display: inline-flex; align-items: center; gap: 6px; } .gift-room-wish-row { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; } .gift-room-wish-row__body { gap: 8px; } .gift-room-wish-row__message { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.84rem; line-height: 1.55; } .gift-room-wish-tag { background: color-mix(in srgb, var(--color-cream) 78%, var(--color-sand)); color: var(--color-ink-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-line) 86%, transparent); } .gift-room-wish-tag--guess { background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 15%, var(--color-cream)); color: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 88%, var(--color-ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr-accent, var(--color-forest)) 24%, transparent); } .gift-room-wish-tag--note { background: color-mix(in srgb, var(--color-warn) 12%, var(--color-cream)); color: color-mix(in srgb, var(--color-warn) 78%, var(--color-ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warn) 24%, transparent); } .gift-room-guest-icon-button { position: relative; isolation: isolate; overflow: visible; width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--color-line); border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; box-shadow: none; transition: border-color 0.16s ease, color 0.16s ease; } .gift-room-guest-icon-button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--color-cream) 86%, var(--color-sand)); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-guest-icon-button i { pointer-events: none; } .gift-room-guest-icon-button:hover, .gift-room-guest-icon-button:focus-visible { border-color: transparent; background: transparent; color: var(--color-ink); outline: 0; box-shadow: none; transform: none; } .gift-room-guest-icon-button:hover::before, .gift-room-guest-icon-button:focus-visible::before { background: var(--color-cream); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-guest-icon-button--danger:hover, .gift-room-guest-icon-button--danger:focus-visible { border-color: transparent; background: transparent; color: var(--color-alert-red); } .gift-room-wedding-invites, .gift-room-invite-gallery, .gift-room-suite-preview { --invite-suite-accent: color-mix(in srgb, var(--color-top-badge-coral) 88%, var(--color-ink) 12%); --invite-suite-accent-strong: color-mix(in srgb, var(--color-top-badge-coral) 34%, var(--color-ink) 66%); --invite-suite-accent-soft: color-mix(in srgb, var(--color-top-badge-coral) 92%, var(--color-cream)); --invite-suite-accent-surface: color-mix(in srgb, var(--color-top-badge-coral) 82%, var(--color-sand)); } .gift-room-wedding-invites[data-suite-tone="forest"], .gift-room-invite-gallery[data-suite-tone="forest"], .gift-room-suite-preview[data-suite-tone="forest"] { --invite-suite-accent: var(--color-forest); --invite-suite-accent-strong: color-mix(in srgb, var(--color-forest) 82%, var(--color-ink) 18%); --invite-suite-accent-soft: color-mix(in srgb, var(--color-top-badge-green) 92%, var(--color-cream)); --invite-suite-accent-surface: color-mix(in srgb, var(--color-top-badge-green) 80%, var(--color-sand)); } .gift-room-wedding-invites[data-suite-tone="blue"], .gift-room-invite-gallery[data-suite-tone="blue"], .gift-room-suite-preview[data-suite-tone="blue"] { --invite-suite-accent: color-mix(in srgb, var(--color-top-badge-blue) 92%, var(--color-ink-soft) 8%); --invite-suite-accent-strong: color-mix(in srgb, var(--color-top-badge-blue) 28%, var(--color-ink) 72%); --invite-suite-accent-soft: color-mix(in srgb, var(--color-top-badge-blue) 94%, var(--color-cream)); --invite-suite-accent-surface: color-mix(in srgb, var(--color-top-badge-blue) 82%, var(--color-sand)); } .gift-room-wedding-invites[data-suite-tone="berry"], .gift-room-invite-gallery[data-suite-tone="berry"], .gift-room-suite-preview[data-suite-tone="berry"] { --invite-suite-accent: color-mix(in srgb, var(--color-top-badge-purple) 84%, var(--color-ink-soft) 16%); --invite-suite-accent-strong: color-mix(in srgb, var(--color-top-badge-purple) 26%, var(--color-ink) 74%); --invite-suite-accent-soft: color-mix(in srgb, var(--color-top-badge-purple) 92%, var(--color-cream)); --invite-suite-accent-surface: color-mix(in srgb, var(--color-top-badge-purple) 80%, var(--color-sand)); } .gift-room-wedding-invites[data-suite-tone="gold"], .gift-room-invite-gallery[data-suite-tone="gold"], .gift-room-suite-preview[data-suite-tone="gold"] { --invite-suite-accent: color-mix(in srgb, var(--color-jedi-picks-yellow) 62%, var(--color-cream)); --invite-suite-accent-strong: color-mix(in srgb, var(--color-jedi-picks-yellow) 26%, var(--color-ink) 74%); --invite-suite-accent-soft: color-mix(in srgb, var(--color-jedi-picks-yellow) 34%, var(--color-cream)); --invite-suite-accent-surface: color-mix(in srgb, var(--color-jedi-picks-yellow) 26%, var(--color-sand)); } .gift-room-suite-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gift-room-suite-steps { padding: 4px; margin: -4px; } .gift-room-wedding-invites { position: relative; overflow: visible; border-color: color-mix(in srgb, var(--invite-suite-accent) 24%, var(--color-line)); background: radial-gradient(circle at top left, color-mix(in srgb, var(--invite-suite-accent) 18%, transparent) 0%, transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent-soft) 56%, var(--color-cream)) 0%, var(--color-cream) 26%, var(--color-cream) 100%); } .gift-room-suite-preview { display: grid; gap: 14px; } .gift-room-suite-preview__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 0.62fr); gap: 16px; align-items: stretch; padding: 18px; border: 1px solid color-mix(in srgb, var(--invite-suite-accent) 26%, var(--color-line)); border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--invite-suite-accent-soft) 92%, var(--color-cream)) 0%, var(--color-cream) 56%, var(--invite-suite-accent-surface) 100%); } .gift-room-suite-preview__copy { display: grid; align-content: start; gap: 8px; } .gift-room-suite-preview__copy small { color: var(--invite-suite-accent-strong); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .gift-room-suite-preview__copy strong { color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.7vw, 2rem); line-height: 1.02; } .gift-room-suite-preview__copy span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 650; } .gift-room-suite-preview__copy .gift-room-suite-status { margin-top: 4px; } .gift-room-suite-preview__art { min-height: 180px; display: grid; place-items: center; overflow: hidden; border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent) 18%, var(--color-sand)) 0%, color-mix(in srgb, var(--invite-suite-accent-soft) 68%, var(--color-cream)) 100%); } .gift-room-suite-preview__image { width: 100%; height: 100%; display: block; object-fit: cover; } .gift-room-suite-preview__image.is-file, .gift-room-suite-preview__icon { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--invite-suite-accent) 14%, var(--color-cream)); color: var(--invite-suite-accent-strong); font-size: 2rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-cream) 76%, transparent); } .gift-room-suite-preview__image.is-file { width: 96px; height: 96px; font-size: 2.5rem; } .gift-room-suite-preview p { margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.9rem; line-height: 1.4; } .gift-room-suite-preview__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .gift-room-suite-preview__detail { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--invite-suite-accent) 18%, var(--color-line)); border-radius: 18px; background: color-mix(in srgb, var(--invite-suite-accent-soft) 52%, var(--color-cream)); } .gift-room-suite-preview__detail strong, .gift-room-suite-preview__statuses > strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; line-height: 1.1; } .gift-room-suite-preview__detail span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 650; line-height: 1.45; } .gift-room-suite-preview__statuses { display: grid; gap: 10px; } .gift-room-suite-preview__statusbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gift-room-suite-preview__status { min-height: 42px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--invite-suite-accent-strong) 24%, var(--color-line)); border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.86rem; font-weight: 760; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .gift-room-suite-preview__status.is-active { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-cream); } .gift-room-suite-preview__status:hover, .gift-room-suite-preview__status:focus-visible { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; transform: translateY(-1px); } .gift-room-suite-preview__actions { padding-top: 2px; } .gift-room-suite-step { flex: 1 1 150px; min-height: 108px; display: grid; align-content: center; gap: 8px; padding: 16px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-cream); color: var(--color-ink); text-align: left; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-wedding-invites .gift-room-suite-step { border-color: color-mix(in srgb, var(--invite-suite-accent) 18%, var(--color-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent-soft) 70%, var(--color-cream)) 0%, var(--color-cream) 54%); } .gift-room-saved-card:hover { border-color: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 35%, var(--color-line)); } .gift-room-wedding-invites .gift-room-suite-step:hover, .gift-room-wedding-invites .gift-room-suite-step:focus-visible, .gift-room-wedding-invites .gift-room-product-card:hover, .gift-room-wedding-invites .gift-room-product-card:focus-visible, .gift-room-wedding-invites .gift-room-invite-upload:hover, .gift-room-wedding-invites .gift-room-invite-upload.is-dragover { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: translateY(-1px); } .gift-room-wedding-invites .gift-room-suite-step__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--invite-suite-accent) 12%, var(--color-cream)); color: var(--invite-suite-accent-strong); font-size: 1.15rem; } .gift-room-suite-step strong, .gift-room-product-card strong, .gift-room-saved-card strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; font-weight: 760; } .gift-room-suite-status { width: fit-content; min-height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--invite-suite-accent-soft); color: var(--invite-suite-accent-strong); font-style: normal; font-weight: 760; } .gift-room-suite-status--sent, .gift-room-suite-status--live { background: color-mix(in srgb, var(--invite-suite-accent) 16%, var(--color-cream)); color: var(--invite-suite-accent-strong); } .gift-room-suite-status--design { background: color-mix(in srgb, var(--invite-suite-accent) 12%, var(--color-sand)); color: var(--color-ink); } .gift-room-suite-steps__hint { margin: -4px 0 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 650; line-height: 1.4; } .gift-room-invite-grid { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); align-items: start; gap: 18px; } .gift-room-invite-upload { min-height: 252px; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 28px 20px; border: 1.5px dashed color-mix(in srgb, var(--invite-suite-accent) 72%, var(--color-line)); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent-soft) 74%, var(--color-cream)) 0%, var(--color-cream) 100%); text-align: center; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-invite-upload.is-filled { align-content: start; justify-items: stretch; gap: 14px; min-height: 0; padding: 18px; } .gift-room-invite-upload > span:first-child { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--invite-suite-accent) 10%, var(--color-cream)); color: var(--invite-suite-accent-strong); font-size: 1.55rem; } .gift-room-invite-upload p { max-width: 18rem; margin: 0; color: var(--color-ink-soft); font-size: 0.86rem; line-height: 1.35; } .gift-room-invite-upload strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.08rem; } .gift-room-invite-upload__hint { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; line-height: 1.35; } .gift-room-invite-upload__stage { display: grid; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--color-ink); text-align: left; cursor: pointer; } .gift-room-invite-upload__stage-visual { min-height: 176px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent) 16%, var(--color-sand)) 0%, color-mix(in srgb, var(--invite-suite-accent-soft) 56%, var(--color-cream)) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--invite-suite-accent) 14%, var(--color-line)); transition: box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-invite-upload__stage:hover .gift-room-invite-upload__stage-visual, .gift-room-invite-upload__stage:focus-visible .gift-room-invite-upload__stage-visual { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: translateY(-1px); } .gift-room-invite-upload__stage-art, .gift-room-invite-upload__thumb-art, .gift-room-invite-gallery__stage-art, .gift-room-invite-gallery__thumb-art { width: 100%; height: 100%; display: block; object-fit: cover; } .gift-room-invite-upload__stage-art.is-file, .gift-room-invite-upload__thumb-art.is-file, .gift-room-invite-gallery__stage-art.is-file, .gift-room-invite-gallery__thumb-art.is-file { display: grid; place-items: center; color: var(--invite-suite-accent-strong); } .gift-room-invite-upload__stage-art.is-file { font-size: 2rem; } .gift-room-invite-upload__thumb-art.is-file, .gift-room-invite-gallery__thumb-art.is-file { font-size: 1.25rem; } .gift-room-invite-gallery__stage-art.is-file { font-size: 2.5rem; } .gift-room-invite-upload__stage-copy, .gift-room-invite-upload__meta, .gift-room-invite-gallery__caption { display: grid; gap: 4px; } .gift-room-invite-gallery__caption-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gift-room-invite-gallery__caption-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gift-room-invite-gallery__remove { flex: 0 0 auto; } .gift-room-invite-gallery__add:disabled, .gift-room-invite-gallery__add[aria-disabled="true"] { color: var(--auth-disabled-text); cursor: not-allowed; } .gift-room-invite-gallery__add:disabled::before, .gift-room-invite-gallery__add[aria-disabled="true"]::before, .gift-room-invite-gallery__add:disabled:hover::before, .gift-room-invite-gallery__add[aria-disabled="true"]:hover::before, .gift-room-invite-gallery__add:disabled:focus-visible::before, .gift-room-invite-gallery__add[aria-disabled="true"]:focus-visible::before { background: var(--control-disabled-bg); box-shadow: none; transform: none; } .gift-room-invite-gallery__move-controls { display: inline-flex; align-items: center; gap: 6px; } .gift-room-invite-gallery__move { width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-ink) 5%, var(--color-cream)); color: var(--color-ink); cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease; } .gift-room-invite-gallery__move:hover, .gift-room-invite-gallery__move:focus-visible { color: var(--invite-suite-accent-strong); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: translateY(-1px); outline: 0; } .gift-room-invite-gallery__move:disabled { color: var(--auth-disabled-text); background: var(--control-disabled-bg); cursor: not-allowed; box-shadow: none; transform: none; } .gift-room-invite-upload__meta p { max-width: none; } .gift-room-invite-upload__stage-copy strong, .gift-room-invite-upload__meta strong, .gift-room-invite-gallery__caption strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.98rem; font-weight: 760; } .gift-room-invite-upload__stage-copy small, .gift-room-invite-gallery__caption span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 650; line-height: 1.35; } .gift-room-invite-upload__thumbs, .gift-room-invite-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 10px; } .gift-room-invite-upload__thumb, .gift-room-invite-gallery__thumb { aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--color-line); border-radius: 16px; overflow: hidden; background: var(--color-cream); cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-invite-upload__thumb.is-active, .gift-room-invite-gallery__thumb.is-active { border-color: var(--invite-suite-accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--invite-suite-accent) 18%, transparent); } .gift-room-invite-upload__thumb:hover, .gift-room-invite-upload__thumb:focus-visible, .gift-room-invite-gallery__thumb:hover, .gift-room-invite-gallery__thumb:focus-visible { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: translateY(-1px); outline: 0; } .gift-room-invite-upload__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gift-room-invite-offers { display: grid; align-content: start; gap: 16px; min-width: 0; } .gift-room-invite-offers__head { align-items: flex-start; row-gap: 14px; padding-bottom: 10px; } .gift-room-invite-offers__copy { min-width: 0; display: grid; gap: 6px; } .gift-room-invite-offers__summary { max-width: 48rem; color: var(--color-ink); font-family: var(--font-heading); font-size: clamp(1rem, 0.92rem + 0.28vw, 1.15rem); font-weight: 650; line-height: 1.3; } .gift-room-invite-offers__hint { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.82rem; font-weight: 650; line-height: 1.4; } .gift-room-invite-offers__head .gift-room-invite-offers__cta { min-height: auto; display: inline-flex; align-items: center; gap: 9px; margin-left: auto; padding: 8px 0 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: 0.96rem; font-weight: 760; cursor: pointer; box-shadow: none; transition: color 0.18s ease; } .gift-room-invite-offers__head .gift-room-invite-offers__cta:hover, .gift-room-invite-offers__head .gift-room-invite-offers__cta:focus-visible { box-shadow: none; outline: 0; } .gift-room-invite-offers__cta-arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.18s ease; } .gift-room-invite-offers__cta:hover .gift-room-invite-offers__cta-arrow, .gift-room-invite-offers__cta:focus-visible .gift-room-invite-offers__cta-arrow { transform: translateX(4px); } .gift-room-product-grid, .gift-room-saved-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .gift-room-wedding-invites .gift-room-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px; margin: -6px; } .gift-room-product-card, .gift-room-saved-card { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-cream); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-wedding-invites .gift-room-product-card[role="button"] { cursor: pointer; } .gift-room-saved-card__media { min-height: 112px; display: grid; place-items: center; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 18%, var(--color-sand)); color: var(--color-cream); font-size: 2rem; } .gift-room-wedding-invites .gift-room-product-card__media { min-height: 170px; display: grid; place-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent) 16%, var(--color-sand)) 0%, color-mix(in srgb, var(--invite-suite-accent-soft) 58%, var(--color-cream)) 100%); color: var(--invite-suite-accent-strong); font-size: 2rem; } .gift-room-product-card__body, .gift-room-saved-card__body { display: grid; gap: 8px; padding: 14px; } .gift-room-product-card__body span, .gift-room-saved-card__body span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.82rem; line-height: 1.3; } .gift-room-product-card__body div, .gift-room-saved-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .gift-room-product-card__body .gift-room-product-card__hint { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; line-height: 1.35; } .gift-room-product-card__actions { width: 100%; margin-top: 2px; } .gift-room-product-card__body .gift-room-product-card__price { color: var(--color-ink); font-family: var(--font-price, var(--font-heading)); font-size: 1.18rem; font-weight: 760; line-height: 1.1; } .gift-room-product-card__body button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-display); cursor: pointer; } .gift-room-invite-cta, .gift-room-product-card__save { position: relative; isolation: isolate; min-height: 44px; padding-inline: 18px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-display); font-size: 0.88rem; font-weight: 760; line-height: 1; overflow: visible; transition: none; } .gift-room-invite-cta::before, .gift-room-product-card__save::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-invite-cta:hover, .gift-room-invite-cta:focus-visible, .gift-room-product-card__save:hover, .gift-room-product-card__save:focus-visible { background: transparent; color: var(--color-cream); box-shadow: none; outline: 0; transform: none; } .gift-room-invite-cta:hover::before, .gift-room-invite-cta:focus-visible::before, .gift-room-product-card__save:hover::before, .gift-room-product-card__save:focus-visible::before { transform: scale(1.055); } .gift-room-invite-cta:disabled, .gift-room-invite-cta[aria-disabled="true"] { color: var(--auth-disabled-text); cursor: not-allowed; } .gift-room-invite-cta:disabled::before, .gift-room-invite-cta[aria-disabled="true"]::before, .gift-room-invite-cta:disabled:hover::before, .gift-room-invite-cta[aria-disabled="true"]:hover::before, .gift-room-invite-cta:disabled:focus-visible::before, .gift-room-invite-cta[aria-disabled="true"]:focus-visible::before { background: var(--control-disabled-bg); box-shadow: none; transform: none; } .gift-room-invite-gallery { display: grid; gap: 16px; border-radius: 24px; transition: background 0.18s ease, box-shadow 0.18s ease; } .gift-room-invite-gallery.is-dragover { background: color-mix(in srgb, var(--invite-suite-accent) 7%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--invite-suite-accent) 18%, transparent); } .gift-room-invite-gallery.is-drop-disabled { background: color-mix(in srgb, var(--color-ink) 3%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ink) 10%, transparent); } .gift-room-invite-gallery__stage { display: grid; gap: 12px; } .gift-room-invite-gallery__stage-visual { min-height: min(58vh, 520px); display: grid; place-items: center; overflow: hidden; padding: 18px; border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent) 18%, var(--color-sand)) 0%, color-mix(in srgb, var(--invite-suite-accent-soft) 68%, var(--color-cream)) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--invite-suite-accent) 14%, var(--color-line)); } .gift-room-suite-steps--tabs { gap: 12px; margin-top: 4px; } .gift-room-suite-steps--tabs .gift-room-suite-step { position: relative; flex: 1 1 180px; min-height: 88px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 24px; } .gift-room-suite-step__copy { min-width: 0; display: grid; gap: 6px; } .gift-room-suite-step__copy strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-suite-step__ready { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--invite-suite-accent) 16%, var(--color-cream)); color: var(--invite-suite-accent-strong); font-size: 0.95rem; } .gift-room-suite-steps--tabs .gift-room-suite-step.is-active { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: translateY(-1px); } .gift-room-suite-steps--tabs .gift-room-suite-step.is-active .gift-room-suite-step__icon, .gift-room-suite-steps--tabs .gift-room-suite-step.is-ready .gift-room-suite-step__icon { background: color-mix(in srgb, var(--invite-suite-accent) 18%, var(--color-cream)); } .gift-room-invite-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 6px 0 2px; } .gift-room-invite-stage-head__copy { min-width: 0; display: grid; gap: 6px; } .gift-room-invite-stage-head__copy small { color: var(--invite-suite-accent-strong); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .gift-room-invite-stage-head__copy h4 { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.3rem, 1.12rem + 0.52vw, 1.9rem); line-height: 1; } .gift-room-invite-stage-head__copy p { max-width: 52rem; margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 650; line-height: 1.45; } .gift-room-invite-stage-head__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .gift-room-invite-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .gift-room-invite-toolbar__search { flex: 1 1 320px; } .gift-room-invite-toolbar__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; } .gift-room-invite-sort { position: relative; } .gift-room-invite-sort__button { min-height: 46px; display: inline-flex; align-items: center; gap: 9px; padding-inline: 15px; } .gift-room-invite-sort__button strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.86rem; font-weight: 760; } .gift-room-invite-sort__chevron { display: inline-flex; align-items: center; color: var(--color-ink-soft); } .gift-room-invite-sort__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 12; min-width: 180px; display: grid; gap: 6px; padding: 10px; border: 1px solid color-mix(in srgb, var(--color-ink) 14%, var(--color-line)); border-radius: 20px; background: var(--color-cream); box-shadow: var(--popup-shadow, 0 18px 46px color-mix(in srgb, var(--color-ink) 14%, transparent)); } .gift-room-invite-sort__option { min-height: 42px; display: inline-flex; align-items: center; justify-content: flex-start; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 760; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .gift-room-invite-sort__option.is-active { background: var(--color-ink); color: var(--color-cream); } .gift-room-invite-sort__option:hover, .gift-room-invite-sort__option:focus-visible { background: color-mix(in srgb, var(--invite-suite-accent-soft) 72%, var(--color-cream)); outline: 0; } .gift-room-invite-sort__option.is-active:hover, .gift-room-invite-sort__option.is-active:focus-visible { background: var(--color-ink); color: var(--color-cream); } .gift-room-invite-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: start; gap: 18px; } .gift-room-invite-main { min-width: 0; display: grid; align-content: start; gap: 16px; } .gift-room-invite-main__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 650; } .gift-room-invite-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .gift-room-invite-card { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--invite-suite-accent) 18%, var(--color-line)); border-radius: 26px; background: var(--color-cream); cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-invite-card:hover, .gift-room-invite-card:focus-visible, .gift-room-invite-card.is-selected { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; transform: translateY(-1px); } .gift-room-invite-card__media { position: relative; min-height: 220px; display: grid; place-items: center; overflow: hidden; padding: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent) 14%, var(--color-sand)) 0%, color-mix(in srgb, var(--invite-suite-accent-soft) 62%, var(--color-cream)) 100%); } .gift-room-invite-card__media[data-card-tone="forest"] { background: linear-gradient(180deg, color-mix(in srgb, var(--color-forest) 14%, var(--color-sand)) 0%, color-mix(in srgb, var(--color-top-badge-green) 34%, var(--color-cream)) 100%); } .gift-room-invite-card__media[data-card-tone="blue"] { background: linear-gradient(180deg, color-mix(in srgb, var(--color-top-badge-blue) 16%, var(--color-sand)) 0%, color-mix(in srgb, var(--color-top-badge-blue) 28%, var(--color-cream)) 100%); } .gift-room-invite-card__media[data-card-tone="berry"] { background: linear-gradient(180deg, color-mix(in srgb, var(--color-top-badge-purple) 16%, var(--color-sand)) 0%, color-mix(in srgb, var(--color-top-badge-purple) 28%, var(--color-cream)) 100%); } .gift-room-invite-card__media[data-card-tone="gold"] { background: linear-gradient(180deg, color-mix(in srgb, var(--color-jedi-picks-yellow) 18%, var(--color-sand)) 0%, color-mix(in srgb, var(--color-jedi-picks-yellow) 22%, var(--color-cream)) 100%); } .gift-room-invite-card__stats { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .gift-room-invite-card__rating, .gift-room-invite-card__badge { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 92%, white); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 760; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, var(--color-line)); } .gift-room-invite-card__rating i { color: var(--color-jedi-picks-yellow); } .gift-room-invite-card__badge { margin-left: auto; background: color-mix(in srgb, var(--invite-suite-accent-soft) 84%, var(--color-cream)); color: var(--invite-suite-accent-strong); } .gift-room-invite-card__art { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 92%, white); color: var(--invite-suite-accent-strong); font-size: 2rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, var(--color-line)); } .gift-room-invite-card__select { position: absolute; right: 14px; bottom: 14px; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 760; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; } .gift-room-invite-card__select:hover, .gift-room-invite-card__select:focus-visible { transform: scale(1.03); box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 18%, transparent); outline: 0; } .gift-room-invite-card__select.is-selected { background: var(--color-forest); } .gift-room-invite-card__body { display: grid; gap: 8px; padding: 18px; } .gift-room-invite-card__body strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.08rem; line-height: 1.08; } .gift-room-invite-card__maker, .gift-room-invite-card__body small { color: var(--color-ink-soft); font-family: var(--font-heading); line-height: 1.35; } .gift-room-invite-card__maker { font-size: 0.84rem; font-weight: 760; } .gift-room-invite-card__body small { font-size: 0.8rem; font-weight: 650; } .gift-room-invite-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 4px; } .gift-room-invite-card__price { color: var(--color-ink); font-family: var(--font-display); font-size: 1.02rem; font-weight: 760; } .gift-room-invite-card__open { min-height: 40px; padding: 0 15px; border: 1px solid color-mix(in srgb, var(--color-ink) 18%, var(--color-line)); border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 760; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-invite-card__open:hover, .gift-room-invite-card__open:focus-visible { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; transform: translateY(-1px); } .gift-room-invite-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .gift-room-invite-pagination span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 650; } .gift-room-invite-rail { min-width: 0; align-self: stretch; min-height: 100%; } .gift-room-invite-reference, .gift-room-invite-rail-note { display: grid; gap: 12px; padding: 18px; border: 1px solid color-mix(in srgb, var(--invite-suite-accent) 18%, var(--color-line)); border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent-soft) 70%, var(--color-cream)) 0%, var(--color-cream) 100%); } .gift-room-invite-reference { align-content: start; border-style: dashed; } .gift-room-invite-reference.is-filled { border-style: solid; } .gift-room-invite-reference__eyebrow { color: var(--invite-suite-accent-strong); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .gift-room-invite-reference__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--invite-suite-accent) 12%, var(--color-cream)); color: var(--invite-suite-accent-strong); font-size: 1.45rem; } .gift-room-invite-reference__preview { padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } .gift-room-invite-reference__preview .gift-room-invite-upload__stage-visual { min-height: 180px; } .gift-room-invite-reference__copy { display: grid; gap: 6px; } .gift-room-invite-reference__copy strong, .gift-room-invite-rail-note strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.02rem; line-height: 1.08; } .gift-room-invite-reference__copy p, .gift-room-invite-rail-note p { margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 650; line-height: 1.42; } .gift-room-invite-reference__actions { display: grid; gap: 10px; } .gift-room-invite-reference__actions .gift-room-proto-row__action { width: 100%; justify-content: center; } .gift-room-invite-bulkbar { position: sticky; bottom: 12px; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--color-ink) 14%, var(--color-line)); border-radius: 28px; background: color-mix(in srgb, var(--color-cream) 96%, white); box-shadow: 0 18px 40px color-mix(in srgb, var(--color-ink) 12%, transparent); } .gift-room-invite-bulkbar__copy { display: grid; gap: 4px; } .gift-room-invite-bulkbar__copy strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; } .gift-room-invite-bulkbar__copy span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.82rem; font-weight: 650; } .gift-room-invite-bulkbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; } .gift-room-suite-steps--tabs { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; } .gift-room-suite-steps--tabs .gift-room-suite-step { --gift-room-suite-step-edge: 8px; --gift-room-suite-step-icon-size: 40px; position: relative; flex: 0 1 auto; min-height: 58px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 16px 0 var(--gift-room-suite-step-edge); border-radius: 999px; background: var(--color-cream); } .gift-room-suite-steps--tabs .gift-room-suite-step__icon { flex: 0 0 var(--gift-room-suite-step-icon-size); } .gift-room-suite-step__meta { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-style: normal; font-weight: 700; line-height: 1.2; } .gift-room-suite-step__ready { width: 30px; height: 30px; font-size: 0.85rem; } .gift-room-suite-status--button { position: relative; isolation: isolate; min-height: 42px; gap: 8px; padding: 0 14px 0 10px; border: 2px solid transparent; background: transparent; font-family: var(--font-heading); font-size: 0.84rem; cursor: pointer; transition: background-color 0.18s ease; } .gift-room-suite-status--button::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--color-ink); border-radius: inherit; pointer-events: none; transition: inset 0.18s ease, border-color 0.18s ease; } .gift-room-suite-status--button:hover, .gift-room-suite-status--button:focus-visible { outline: 0; transform: none; } .gift-room-suite-status--button:hover::before, .gift-room-suite-status--button:focus-visible::before { inset: -5px; } .gift-room-suite-status__icon { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--color-cream); color: var(--color-ink); font-size: 0.8rem; } .gift-room-suite-status__label { color: var(--color-ink-soft); font-size: 0.76rem; font-weight: 700; } .gift-room-suite-status--button strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 760; } .gift-room-planner-sheet--suite-step { width: min(580px, calc(100vw - 96px)); max-width: min(580px, calc(100vw - 96px)); } .gift-room-planner-sheet--suite-step .gift-room-planner-sheet__head, .gift-room-planner-sheet--suite-step .gift-room-planner-sheet__body { padding-inline: 26px; } .gift-room-planner-sheet--suite-step .gift-room-planner-sheet__head { padding-top: 24px; } .gift-room-planner-sheet--suite-step .gift-room-planner-sheet__body { padding-bottom: 20px; gap: 12px; } .gift-room-planner-sheet--move-saved { width: min(620px, calc(100vw - 120px)); max-width: min(620px, calc(100vw - 120px)); } .gift-room-planner-sheet--suite-step .gift-room-planner-sheet__head { padding-bottom: 8px; } .gift-room-suite-preview { --invite-suite-accent: var(--color-forest); --invite-suite-accent-strong: color-mix(in srgb, var(--color-forest) 82%, var(--color-ink) 18%); --invite-suite-accent-soft: color-mix(in srgb, var(--color-forest) 10%, var(--color-cream)); --invite-suite-accent-surface: color-mix(in srgb, var(--color-sand) 72%, var(--color-cream)); gap: 12px; } .gift-room-suite-preview__editorial { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .gift-room-suite-preview__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 7; border: 1px solid color-mix(in srgb, var(--color-ink) 10%, var(--color-line)); border-radius: 16px; background: color-mix(in srgb, var(--color-sand) 74%, var(--color-cream)); box-shadow: 0 12px 28px color-mix(in srgb, var(--color-ink) 8%, transparent); } .gift-room-suite-preview__media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 38%; } .gift-room-suite-preview__story { min-width: 0; display: grid; align-content: start; gap: 9px; padding: 0; } .gift-room-suite-preview__story > small { color: var(--color-forest); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 820; letter-spacing: 0; line-height: 1; text-transform: uppercase; } .gift-room-suite-preview__story h3 { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.34rem, 1.22rem + 0.4vw, 1.62rem); line-height: 1.06; } .gift-room-suite-preview__story p { max-width: 34rem; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.88rem; font-weight: 650; line-height: 1.38; } .gift-room-suite-preview__reason-list { display: grid; gap: 8px; } .gift-room-suite-preview__reason { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; } .gift-room-suite-preview__reason-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-forest) 10%, var(--color-cream)); color: var(--color-forest); font-size: 1rem; } .gift-room-suite-preview__reason > span:not(.gift-room-suite-preview__reason-icon) { min-width: 0; display: grid; gap: 1px; } .gift-room-suite-preview__reason strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.86rem; font-weight: 820; line-height: 1.12; } .gift-room-suite-preview__reason em { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.79rem; font-style: normal; font-weight: 650; line-height: 1.3; } .gift-room-suite-preview__statuses { gap: 8px; } .gift-room-suite-preview__statusbar { width: fit-content; max-width: 100%; display: inline-flex; gap: 0; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--color-sand) 52%, var(--color-cream)); } .gift-room-suite-preview__status { min-height: 40px; padding: 0 17px; border: 0; background: transparent; color: var(--color-ink); } .gift-room-suite-preview__status.is-active { border-color: transparent; background: var(--color-forest); color: var(--color-cream); } .gift-room-suite-preview__status:hover, .gift-room-suite-preview__status:focus-visible { border-color: transparent; background: color-mix(in srgb, var(--color-cream) 74%, var(--color-sand)); box-shadow: none; outline: 0; transform: none; } .gift-room-suite-preview__status.is-active:hover, .gift-room-suite-preview__status.is-active:focus-visible { background: var(--color-forest); color: var(--color-cream); } .gift-room-suite-steps--tabs .gift-room-suite-step.is-active, .gift-room-suite-steps--tabs .gift-room-suite-step.is-active:hover, .gift-room-suite-steps--tabs .gift-room-suite-step.is-active:focus-visible { border-color: transparent; background: var(--color-ink); box-shadow: none; color: var(--color-cream); transform: none; } .gift-room-suite-steps--tabs .gift-room-suite-step.is-active strong, .gift-room-suite-steps--tabs .gift-room-suite-step.is-active .gift-room-suite-step__meta { color: var(--color-cream); } .gift-room-suite-steps--tabs .gift-room-suite-step.is-active .gift-room-suite-step__icon { background: color-mix(in srgb, white 16%, var(--color-ink)); color: var(--color-cream); } .gift-room-invite-stage-head { padding: 6px 0 0; } .gift-room-invite-stage-head__copy { gap: 4px; } .gift-room-invite-stage-head__copy h4 { margin: 0; } .gift-room-invite-stage-head__copy p { margin: 0; max-width: 46rem; } .gift-room-invite-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .gift-room-invite-toolbar__search { flex: 1 1 340px; } .gift-room-invite-toolbar__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; } .gift-room-invite-sort-wrap { position: relative; flex: 0 0 auto; } .gift-room-invite-sort-trigger.cat-filters__sort { min-width: 0; max-width: 100%; gap: 8px; } .gift-room-invite-sort-prefix, .gift-room-invite-sort-label { position: relative; z-index: 1; } .gift-room-invite-sort-label { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 760; } .gift-room-invite-sort-popover { z-index: 5400; } .gift-room-invite-sort-backdrop { z-index: 5390; } body.page--gift-room.is-gift-room-invite-sort-open .gift-room-invite-sort-wrap { z-index: 14000; } .gift-room-invite-toolbar__select { position: relative; isolation: isolate; min-height: 42px; padding-inline: 15px; gap: 8px; border: 0; background: transparent; color: var(--color-ink); font-size: 0.84rem; font-weight: 760; line-height: 1; overflow: visible; box-shadow: none; transform: none; transition: none; } .gift-room-invite-toolbar__select::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--color-sand) 44%, var(--color-cream)); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-invite-toolbar__select:hover, .gift-room-invite-toolbar__select:focus-visible { background: transparent; color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-invite-toolbar__select:hover::before, .gift-room-invite-toolbar__select:focus-visible::before { transform: none; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-invite-toolbar__select.is-active::before, .gift-room-invite-toolbar__select[aria-pressed="true"]::before { background: var(--popup-bg, var(--color-cream)); } @media (max-width: 760px) { body.page--gift-room.is-gift-room-invite-sort-open .gift-room-invite-sort-trigger { opacity: 0; pointer-events: none; } body.page--gift-room.is-gift-room-invite-sort-open .gift-room-invite-sort-popover { pointer-events: auto; } body.page--gift-room .gift-room-invite-sort-popover::before { content: ""; position: absolute; left: 50%; top: calc((var(--popup-sheet-grip-height, 44px) - var(--popup-sheet-grip-thickness, 5px)) / 2); width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); min-height: 0; border-radius: var(--radius-pill, 999px); background: var(--popup-sheet-grip-color); transform: translateX(-50%); cursor: grab; touch-action: none; user-select: none; } } .gift-room-invite-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gift-room-invite-products-grid > * { min-width: 0; } .gift-room-invite-empty { grid-column: 1 / -1; } .gift-room-invite-reference-card { min-width: 0; display: grid; grid-template-rows: auto auto minmax(92px, 1fr) auto auto; align-content: start; gap: 14px; align-self: start; padding: 20px; border: 0; border-radius: 30px; background: linear-gradient(180deg, color-mix(in srgb, var(--invite-suite-accent-soft) 76%, var(--color-cream)) 0%, var(--color-cream) 100%); color: var(--color-ink); cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease; overflow: hidden; position: sticky; top: calc(var(--gift-room-room-chrome-height, 74px) + 8px); min-height: clamp(280px, calc(100dvh - var(--gift-room-room-chrome-height, 74px) - 104px), 540px); z-index: 1; } .gift-room-invite-reference-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: linear-gradient(90deg, var(--invite-suite-accent-strong) 50%, transparent 0) left top / 13px 1.5px repeat-x, linear-gradient(90deg, var(--invite-suite-accent-strong) 50%, transparent 0) left bottom / 13px 1.5px repeat-x, linear-gradient(0deg, var(--invite-suite-accent-strong) 50%, transparent 0) left top / 1.5px 13px repeat-y, linear-gradient(0deg, var(--invite-suite-accent-strong) 50%, transparent 0) right top / 1.5px 13px repeat-y; opacity: 0.48; pointer-events: none; } .gift-room-invite-reference-card.is-filled { grid-template-rows: auto auto auto auto auto; } .gift-room-invite-reference-card:hover, .gift-room-invite-reference-card:focus-within, .gift-room-invite-reference-card.is-dragover { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: translateY(-1px); } .gift-room-invite-reference-card:hover::after, .gift-room-invite-reference-card:focus-within::after, .gift-room-invite-reference-card.is-dragover::after { opacity: 0.74; animation: gift-room-cover-dashes 0.58s linear infinite; } .gift-room-invite-reference-card.is-drop-disabled::after { opacity: 0.38; animation: none; } .gift-room-invite-reference-card__eyebrow { position: relative; z-index: 3; color: var(--invite-suite-accent-strong); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .gift-room-invite-reference-card__empty { position: relative; z-index: 3; width: 82px; height: 82px; display: grid; place-items: center; justify-self: center; margin: 4px auto 8px; border-radius: 999px; background: color-mix(in srgb, var(--invite-suite-accent) 10%, var(--color-cream)); color: var(--invite-suite-accent-strong); font-size: 1.9rem; } .gift-room-invite-reference-card__preview { position: relative; z-index: 3; width: 100%; display: grid; gap: 12px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } .gift-room-invite-reference-card__preview .gift-room-invite-upload__stage-visual { min-height: 156px; } .gift-room-invite-reference-card__copy { position: relative; z-index: 3; display: grid; gap: 6px; } .gift-room-invite-reference-card:not(.is-filled) .gift-room-invite-reference-card__copy { min-height: 100%; align-content: center; justify-items: center; text-align: center; } .gift-room-invite-reference-card__copy strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.1rem; line-height: 1.05; } .gift-room-invite-reference-card__copy p { margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 650; line-height: 1.45; } .gift-room-invite-reference-card__actions { position: relative; z-index: 3; display: grid; gap: 10px; margin-top: auto; } .gift-room-invite-reference-card__actions .gift-room-proto-row__action { width: 100%; justify-content: center; } .gift-room-invite-reference-card__thumbs { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gift-room-invite-reference-card__thumb-wrap { position: relative; min-width: 0; display: block; aspect-ratio: 1; cursor: grab; outline: 0; } .gift-room-invite-reference-card__thumb-wrap.is-dragging { opacity: 0.58; cursor: grabbing; } .gift-room-invite-reference-card__thumb-wrap.is-reorder-target::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -5px; z-index: 4; width: 4px; border-radius: 999px; background: var(--invite-suite-accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--invite-suite-accent) 18%, transparent); } .gift-room-invite-reference-card__thumb-wrap.is-reorder-target.is-reorder-after::before { right: -5px; left: auto; } .gift-room-invite-reference-card__thumb { position: relative; width: 100%; height: 100%; min-width: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--invite-suite-accent) 20%, var(--color-line)); border-radius: 14px; background: var(--popup-bg); color: var(--invite-suite-accent-strong); overflow: hidden; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-invite-reference-card__thumb:hover, .gift-room-invite-reference-card__thumb:focus-visible, .gift-room-invite-reference-card__thumb.is-active { border-color: var(--invite-suite-accent-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--invite-suite-accent) 16%, transparent); outline: 0; } .gift-room-invite-reference-card__thumb:active { transform: scale(0.98); } .gift-room-invite-reference-card__thumb-art { width: 100%; height: 100%; object-fit: cover; } .gift-room-invite-reference-card__thumb-art.is-file { display: grid; place-items: center; font-size: 1.25rem; } .gift-room-invite-reference-card__thumb-remove { position: absolute; top: 6px; right: 6px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 92%, transparent); color: var(--color-ink); cursor: pointer; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, transparent); opacity: 1; transform: scale(1); transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .gift-room-invite-reference-card__thumb-wrap:hover .gift-room-invite-reference-card__thumb-remove, .gift-room-invite-reference-card__thumb-remove:focus-visible { opacity: 1; transform: scale(1.04); } .gift-room-invite-reference-card__thumb-remove:hover, .gift-room-invite-reference-card__thumb-remove:focus-visible { color: var(--color-alert-red); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } @media (max-width: 720px) { .gift-room-invite-reference-card__thumb-remove { width: 44px; height: 44px; } } .gift-room-invite-product-card { position: relative; overflow: visible; isolation: isolate; background: var(--color-cream); } .gift-room-invite-product-card::after { content: ""; position: absolute; inset: -7px; border: 2px solid transparent; border-radius: 30px; pointer-events: none; transition: border-color 0.18s ease; } .gift-room-invite-product-card.is-selected::after { border-color: var(--color-ink); } .gift-room-invite-product-card__check { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 92%, white); color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, var(--color-line)); opacity: 0; transform: scale(0.94); transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .gift-room-invite-product-card__check.is-visible { opacity: 1; transform: scale(1); } .gift-room-invite-product-card__check.is-selected { background: var(--color-ink); color: var(--color-cream); box-shadow: none; } .gift-room-wedding-invites.is-selection-mode .gift-room-invite-product-card .cat-card__media-stats, .gift-room-wedding-invites.is-selection-mode .gift-room-invite-product-card .cat-card__hover-actions, .gift-room-wedding-invites.is-selection-mode .gift-room-invite-product-card .gr-idea-product-card__similar-main, .gift-room-wedding-invites.is-selection-mode .gift-room-invite-product-card .gr-idea-product-card__primary-action { display: none; } .gift-room-invite-selection-count { flex: 0 0 auto; } @media (max-width: 1180px) { .gift-room-wedding-invites .gift-room-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gift-room-invite-layout { grid-template-columns: 1fr; } .gift-room-invite-rail { display: block; } .gift-room-invite-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gift-room-invite-empty { grid-column: 1 / -1; } .gift-room-invite-reference-card { position: static; min-height: 0; } } @media (max-width: 720px) { .gift-room-planner-sheet--suite-step { width: min(580px, calc(100vw - 32px)); max-width: min(580px, calc(100vw - 32px)); } .gift-room-suite-preview__editorial { gap: 14px; } .gift-room-suite-preview__media { aspect-ratio: 16 / 9; } .gift-room-suite-preview__top, .gift-room-suite-preview__summary .gift-room-suite-preview__detail { grid-template-columns: 1fr; } .gift-room-suite-preview__examples { grid-template-columns: 1fr; } .gift-room-suite-preview__example.is-wide { grid-column: auto; } .gift-room-suite-preview__details { grid-template-columns: 1fr; } .gift-room-suite-preview__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gift-room-suite-preview__statusbar { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; } .gift-room-suite-preview__status { flex: 1 1 calc(33.333% - 4px); min-width: 0; min-height: 38px; padding-inline: 10px; font-size: 0.8rem; } .gift-room-suite-preview__actions .gift-room-sheet-action--primary { grid-column: 1 / -1; } .gift-room-suite-preview__actions .gift-room-sheet-action { width: 100%; justify-content: center; min-width: 0; padding-inline: 12px; } .gift-room-suite-preview__story { gap: 10px; padding: 0; } .gift-room-suite-preview__story h3 { font-size: clamp(1.36rem, 1.1rem + 0.9vw, 1.72rem); } .gift-room-suite-preview__story p { font-size: 0.88rem; line-height: 1.38; } .gift-room-suite-preview__reason-list { gap: 8px; } .gift-room-suite-preview__reason { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; } .gift-room-suite-preview__reason-icon { width: 32px; height: 32px; font-size: 1rem; } .gift-room-suite-preview__reason strong { font-size: 0.82rem; } .gift-room-suite-preview__reason em { font-size: 0.74rem; line-height: 1.28; } .gift-room-invite-stage-head, .gift-room-invite-toolbar, .gift-room-invite-main__meta, .gift-room-invite-bulkbar { grid-template-columns: 1fr; display: grid; } .gift-room-invite-toolbar__actions, .gift-room-invite-stage-head__status, .gift-room-invite-bulkbar__actions { margin-left: 0; justify-content: stretch; } .gift-room-invite-sort, .gift-room-invite-sort-wrap, .gift-room-invite-sort-trigger, .gift-room-invite-toolbar__actions .gift-room-proto-row__action, .gift-room-invite-bulkbar__actions .gift-room-proto-row__action { width: 100%; } .gift-room-suite-steps--tabs .gift-room-suite-step { flex: 1 1 100%; } .gift-room-invite-products-grid { grid-template-columns: 1fr; } .gift-room-invite-reference-card { position: static; } } @media (max-width: 560px) { .gift-room-planner-sheet--suite-step .gift-room-planner-sheet__head { padding: 0 16px 10px; } .gift-room-planner-sheet--suite-step .gift-room-planner-sheet__body { padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px)); } .gift-room-suite-preview__media { aspect-ratio: 3 / 2; } .gift-room-suite-preview__story > small { font-size: 0.68rem; } .gift-room-suite-preview__story h3 { font-size: 1.28rem; line-height: 1.05; } .gift-room-suite-preview__story p { font-size: 0.84rem; } .gift-room-suite-preview__statusbar { gap: 3px; } .gift-room-suite-preview__status { min-height: 36px; padding-inline: 8px; font-size: 0.76rem; } .gift-room-invite-products-grid { grid-template-columns: 1fr; } .gift-room-planner-sheet--suite-step, .gift-room-planner-sheet--move-saved { width: 100%; max-width: none; } } .gift-room-vendor-trust { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--color-forest) 20%, var(--color-line)); border-radius: 16px; background: color-mix(in srgb, var(--color-forest) 8%, var(--color-cream)); color: var(--color-forest); font-family: var(--font-heading); font-weight: 700; } .gift-room-vendor-trust button { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; } .gift-room-vendor-list { display: grid; gap: 10px; } .gift-room-vendor-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-cream); cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-vendor-row:hover, .gift-room-vendor-row:focus-visible { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; transform: translateY(-1px); } .gift-room-vendor-row.is-optional { opacity: 0.76; } .gift-room-vendor-row__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 10%, var(--color-cream)); color: var(--gr-accent, var(--color-forest)); font-size: 1.35rem; } .gift-room-vendor-row__body { min-width: 0; display: grid; gap: 3px; } .gift-room-vendor-row__body strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.08rem; } .gift-room-vendor-row__body span, .gift-room-vendor-row__price { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 650; } .gift-room-vendor-row__price b { color: var(--color-ink); font-family: var(--font-display); } .gift-room-vendor-row .gift-room-proto-row__action { position: relative; isolation: isolate; border: 0; background: transparent; color: var(--color-ink); box-shadow: none; overflow: visible; transition: color 0.16s ease, background-color 0.16s ease; } .gift-room-vendor-row .gift-room-proto-row__action::before { content: ""; position: absolute; inset: -1px; z-index: -1; border: 2px solid var(--color-ink); border-radius: inherit; background: transparent; transition: transform 0.16s ease, box-shadow 0.16s ease; } .gift-room-vendor-row .gift-room-proto-row__action:hover, .gift-room-vendor-row .gift-room-proto-row__action:focus-visible { background: transparent; color: var(--color-ink); outline: 0; transform: none; } .gift-room-vendor-row .gift-room-proto-row__action:hover::before, .gift-room-vendor-row .gift-room-proto-row__action:focus-visible::before { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: scale(1.055); } .gift-room-vendor-row__remove { width: 38px; height: 38px; position: relative; isolation: isolate; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink-soft); box-shadow: none; cursor: pointer; transition: color 0.16s ease; } .gift-room-vendor-row__remove::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: transparent; transition: transform 0.16s ease, box-shadow 0.16s ease; } .gift-room-vendor-row__remove i { font-size: 1.05rem; } .gift-room-vendor-row__remove:hover, .gift-room-vendor-row__remove:focus-visible { color: var(--color-alert-red); outline: 0; } .gift-room-vendor-row__remove:hover::before, .gift-room-vendor-row__remove:focus-visible::before { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: scale(1.055); } .gift-room-vendor-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 12px; } .gift-room-vendor-edit-form .gift-room-seat-edit-field--wide { grid-column: 1 / -1; } .gift-room-looks-workspace { gap: 22px; padding: clamp(22px, 2.4vw, 32px); border-radius: 28px; background: var(--popup-bg); } .gift-room-looks-workspace .gift-room-proto-panel-head { align-items: center; gap: 18px; margin: 0; } .gift-room-looks-workspace .gift-room-proto-panel-head h3 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.08; } .gift-room-look-new-board.gift-room-proto-row__action { position: relative; isolation: isolate; min-height: 46px; gap: 8px; padding: 0 22px; border-radius: 999px; background: transparent; color: var(--color-cream); font-size: 0.88rem; box-shadow: none; overflow: visible; transition: color 0.18s ease, transform 0.18s ease; } .gift-room-look-new-board.gift-room-proto-row__action::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--color-ink); border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; pointer-events: none; } .gift-room-look-new-board.gift-room-proto-row__action > * { position: relative; z-index: 1; } .gift-room-look-new-board__icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-size: 18px; line-height: 1; } .gift-room-look-new-board.gift-room-proto-row__action:hover, .gift-room-look-new-board.gift-room-proto-row__action:focus-visible { background: transparent; color: var(--color-cream); outline: 0; transform: none; } .gift-room-look-new-board.gift-room-proto-row__action:hover::before, .gift-room-look-new-board.gift-room-proto-row__action:focus-visible::before { transform: scale(1.055); } .gift-room-looks-layout { display: grid; grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1.42fr); gap: 18px; align-items: start; } .gift-room-look-board-panel { min-width: 0; display: grid; gap: 12px; } .gift-room-look-grid--boards { grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 14px; align-items: stretch; } .gift-room-look-grid--boards .gift-room-look-board-card { position: relative; min-height: 136px; display: block; overflow: hidden; padding: 0; border: 1px solid var(--color-line); border-radius: 20px; background: var(--popup-bg); color: var(--color-ink); box-shadow: none; text-align: left; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .gift-room-look-grid--boards .gift-room-look-board-card:hover, .gift-room-look-grid--boards .gift-room-look-board-card:focus-within { border-color: transparent; background: var(--popup-bg); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; transform: none; } .gift-room-look-card__open { width: 100%; min-height: 136px; display: grid; align-content: start; gap: 7px; padding: 14px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .gift-room-look-board-card.has-preview, .gift-room-look-board-card.has-preview .gift-room-look-card__open { min-height: 184px; } .gift-room-look-card__open:focus-visible { outline: 0; } .gift-room-look-card__edit { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-ink-soft); cursor: pointer; font: inherit; opacity: 0.72; transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .gift-room-look-card__edit i { font-size: 16px; line-height: 1; } .gift-room-look-board-card:hover .gift-room-look-card__edit, .gift-room-look-board-card:focus-within .gift-room-look-card__edit { opacity: 1; } .gift-room-look-card__edit:hover, .gift-room-look-card__edit:focus-visible { background: var(--popup-hover); color: var(--color-ink); outline: 0; } .gift-room-look-card__top { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gift-room-look-card__saved { flex: 0 0 auto; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border-radius: 999px; background: var(--color-sand); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .gift-room-look-board-card .gift-room-look-card__top .gift-room-look-card__saved { margin-right: 42px; } .gift-room-look-card__eyebrow { min-width: 0; overflow: hidden; color: var(--color-forest); font-family: var(--font-heading); font-size: 0.66rem; font-weight: 820; letter-spacing: 0.08em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .gift-room-look-grid--boards .gift-room-look-board-card strong { min-width: 0; overflow: hidden; font-size: 1.16rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .gift-room-look-grid--boards .gift-room-look-board-card small { min-width: 0; overflow: hidden; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 680; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .gift-room-look-card__preview { width: 100%; height: 54px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 1px 0 2px; } .gift-room-look-card__thumb { min-width: 0; border-radius: 14px; background-color: color-mix(in srgb, var(--color-sand) 64%, var(--color-cream)); background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 9%, transparent); overflow: hidden; } .gift-room-look-card__thumb.is-empty { display: grid; place-items: center; color: var(--color-forest); } .gift-room-look-card__thumb.is-empty svg { width: 19px; height: 19px; } .gift-room-looks-task-card { gap: 13px; padding: 16px 18px 18px; border-radius: 22px; background: var(--popup-bg); align-self: stretch; } .gift-room-looks-task-card__head { justify-content: flex-start; gap: 18px; margin-bottom: 1px; } .gift-room-looks-task-card__head strong { font-size: 1.12rem; line-height: 1; } .gift-room-looks-task-card__head span { color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; font-weight: 560; line-height: 1; } .gift-room-looks-task-card .gift-room-tasks { display: grid; gap: 10px; } .gift-room-looks-task-card .gift-room-task { min-width: 0; min-height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 9px 8px 11px; border: 1px solid var(--gift-room-popup-field-border, var(--popup-control-border)); border-radius: 22px; background: var(--gift-room-popup-field-bg, var(--popup-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); cursor: default; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-looks-task-card .gift-room-task:hover, .gift-room-looks-task-card .gift-room-task:focus-within { border-color: transparent; background: var(--gift-room-popup-field-bg, var(--popup-bg)); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-looks-task-card .gift-room-task.is-done { border-color: var(--color-forest); background: color-mix(in srgb, var(--color-forest) 5%, var(--gift-room-popup-field-bg, var(--popup-bg))); } .gift-room-looks-task-card .gift-room-task__check { width: 34px; height: 34px; border-radius: 11px; border-color: var(--gift-room-popup-field-border, var(--popup-control-border)); background: var(--gift-room-popup-field-bg, var(--popup-bg)); color: var(--color-cream); cursor: pointer; } .gift-room-looks-task-card .gift-room-task__check::after { width: 15px; height: 12px; } .gift-room-looks-task-card .gift-room-task__check:hover, .gift-room-looks-task-card .gift-room-task__check:focus-visible { border-color: var(--color-forest); box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 14%, transparent); outline: 0; } .gift-room-looks-task-card .gift-room-task__check.is-done { border-color: var(--color-forest); background: var(--color-forest); } .gift-room-looks-task-card .gift-room-task__check.is-done::after { opacity: 1; } .gift-room-looks-task-card .gift-room-task__body { min-width: 0; display: grid; gap: 4px; } .gift-room-looks-task-card .gift-room-task__text { min-width: 0; display: -webkit-box; overflow: hidden; font-size: 0.84rem; font-weight: 650; line-height: 1.18; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .gift-room-looks-task-card .gift-room-task__meta { min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .gift-room-looks-task-card .gift-room-task__meta > span, .gift-room-looks-task-card .gift-room-task__owner { min-width: 0; display: inline-flex; align-items: center; max-width: 100%; padding: 3px 7px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-sand); color: var(--color-ink-soft); font-size: 0.64rem; font-weight: 650; line-height: 1.1; } .gift-room-looks-task-card .gift-room-task__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; opacity: 0.72; transition: opacity 0.15s ease; } .gift-room-looks-task-card .gift-room-task:hover .gift-room-task__actions, .gift-room-looks-task-card .gift-room-task:focus-within .gift-room-task__actions { opacity: 1; } .gift-room-looks-task-card .gift-room-task__icon-button { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-ink-soft); cursor: pointer; font-family: inherit; font-size: 0; line-height: 1; } .gift-room-looks-task-card .gift-room-task__icon-button i { color: currentColor; font-size: 14px; line-height: 1; } .gift-room-looks-task-card .gift-room-task__icon-button:hover, .gift-room-looks-task-card .gift-room-task__icon-button:focus-visible { background-color: var(--popup-hover); box-shadow: none; color: var(--color-ink); outline: 0; } .gift-room-task-add--looks { display: grid; grid-template-columns: 1fr; gap: 9px; align-items: stretch; margin-top: 8px; } .gift-room-task-add--looks .gift-room-task-add__input { min-height: 48px; padding: 0 18px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--popup-bg); font-family: var(--font-heading); font-weight: 650; } .gift-room-task-add--looks .gift-room-task-add__input:focus, .gift-room-task-add--looks .gift-room-task-add__input:focus-visible { border-color: var(--color-forest); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-forest) 12%, transparent); } .gift-room-task-add--looks .gift-room-task-add__button { width: 100%; min-width: 0; } .gift-room-look-board-detail { gap: 18px; } .gift-room-look-board-detail__head { align-items: center; } .gift-room-look-board-detail__title { min-width: 0; display: grid; gap: 0; } .gift-room-look-board-detail__title-row { min-width: 0; display: flex; align-items: center; gap: 14px; } .gift-room-look-board-detail__copy { min-width: 0; display: block; } .gift-room-look-board-detail__title h3 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.08; } .gift-room-look-board-detail__brief { min-width: 0; max-width: 54rem; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: clamp(0.9rem, 1.35vw, 1.06rem); font-weight: 560; line-height: 1.2; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .gift-room-look-board-detail__back { width: fit-content; position: relative; isolation: isolate; min-height: 46px; justify-self: start; padding: 0 22px; gap: 8px; border: 0; background: transparent; color: var(--color-ink); font-size: 0.88rem; font-weight: 760; line-height: 1; overflow: visible; transition: none; } .gift-room-look-board-detail__back > i { flex: 0 0 17px; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; } .gift-room-look-board-detail__back::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-cream); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-look-board-detail__back:hover, .gift-room-look-board-detail__back:focus-visible { background: transparent; color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-look-board-detail__back:hover::before, .gift-room-look-board-detail__back:focus-visible::before { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-look-board-products { min-width: 0; } .gift-room-look-board-products.gift-room-saved-grid--products, .gift-room-look-board-products.gift-room-saved-grid--products.gr-ideas-grid { grid-template-columns: repeat(auto-fill, minmax(218px, 260px)); justify-content: start; gap: 16px; padding: 6px; margin: -6px; } body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card] { border-radius: 24px; background: var(--color-cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, var(--color-line)); transition: box-shadow 0.18s ease; } body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card]:hover, body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card]:focus-visible { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card] .cat-card__inner { overflow: visible; padding-bottom: 13px; } body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card] .cat-card__media { aspect-ratio: 1 / 0.92; border-radius: 22px 22px 15px 15px; } body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card] .cat-card__title { min-height: 2.18em; margin-top: 12px; font-size: clamp(13px, calc(15px * var(--cat-card-scale, 1)), 15px); } body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card] .cat-card__price { margin-top: 5px; } body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card] .cat-card__price .cat-card__currency, body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card] .cat-card__price .cat-card__value-new, body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card.cat-card[data-product-card] .cat-card__price-missing { font-size: clamp(16px, calc(19px * var(--cat-card-scale, 1)), 19px); } body.page--gift-room .gr-ideas-grid.gift-room-look-board-products .gift-room-look-board-product-card .gift-room-saved-product-card__details { gap: 6px; margin-top: 9px; } .gift-room-look-board-product-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) 38px; gap: 7px; margin: 12px 14px 0; } .gift-room-look-board-product-action { min-width: 0; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--popup-bg); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 760; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, var(--color-line)); transition: box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-look-board-product-action:hover, .gift-room-look-board-product-action:focus-visible { background: var(--popup-bg); box-shadow: var(--shadow-card-hover); outline: 0; } .gift-room-look-board-product-action--remove:hover, .gift-room-look-board-product-action--remove:focus-visible { color: var(--color-alert-red); } .gift-room-look-board-product-action--remove { width: 38px; height: 38px; min-height: 38px; border-radius: 50%; padding: 0; justify-self: end; } .gift-room-look-board-product-action--remove > i { width: 16px; height: 16px; flex-basis: 16px; font-size: 16px; } .gift-room-look-board-product-action > i { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 15px; font-size: 15px; } .gift-room-look-board-empty { grid-column: 1 / -1; min-height: 180px; } .gift-room-look-board-picker { display: grid; gap: 10px; margin-bottom: 14px; } .gift-room-look-board-picker__controls { display: grid; gap: 9px; margin: 4px 0 14px; } .gift-room-look-board-picker__filters { min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; } .gift-room-look-board-picker__filters::-webkit-scrollbar { display: none; } .gift-room-look-board-picker__filter { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; padding: 0 14px; border: 0; border-radius: 999px; background: var(--popup-bg-muted); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 740; line-height: 1; cursor: pointer; transition: box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .gift-room-look-board-picker__filter.is-active { background: var(--color-ink); color: var(--color-cream); } .gift-room-look-board-picker__filter:not(.is-active):hover, .gift-room-look-board-picker__filter:not(.is-active):focus-visible { background: var(--popup-bg); box-shadow: var(--shadow-card-hover); outline: 0; } .gift-room-look-board-picker__filter > i { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 15px; font-size: 15px; } .gift-room-look-board-picker__item { min-width: 0; display: grid; grid-template-columns: auto 54px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--gift-room-popup-field-border, var(--popup-control-border)); border-radius: 20px; background: var(--gift-room-popup-field-bg, var(--popup-bg)); cursor: pointer; } .gift-room-look-board-picker__item:hover, .gift-room-look-board-picker__item:focus-within { border-color: var(--gift-room-popup-field-focus, var(--popup-focus)); background: var(--popup-hover); } .gift-room-look-board-picker__item[hidden] { display: none; } .gift-room-look-board-picker__item input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; display: inline-grid; place-items: center; margin: 0; border: 1.5px solid var(--popup-control-border); border-radius: 8px; background: var(--popup-bg); color: var(--popup-bg); cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .gift-room-look-board-picker__item input::after { content: ""; width: 17px; height: 14px; background: currentColor; opacity: 0; transform: scale(0.82); -webkit-mask: url("/assets/gift-room-icons/shared/check.svg") center / contain no-repeat; mask: url("/assets/gift-room-icons/shared/check.svg") center / contain no-repeat; transition: opacity 0.14s ease, transform 0.14s ease; } .gift-room-look-board-picker__item input:checked { border-color: var(--color-forest); background: var(--color-forest); color: var(--popup-bg); } .gift-room-look-board-picker__item input:checked::after { opacity: 1; transform: scale(1); } .gift-room-look-board-picker__item input:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .gift-room-look-board-picker__media { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border-radius: 15px; background-color: var(--color-sand); background-position: center; background-size: cover; color: var(--color-ink); } .gift-room-look-board-picker__body { min-width: 0; display: grid; gap: 3px; } .gift-room-look-board-picker__body strong, .gift-room-look-board-picker__body small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-look-board-picker__body strong { color: var(--color-ink); font-family: var(--font-display); font-size: 0.92rem; font-weight: 760; } .gift-room-look-board-picker__body small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 650; } .gift-room-look-board-picker__empty { min-height: 92px; display: grid; place-items: center; margin: 4px 0 14px; border-radius: 20px; background: var(--popup-bg-muted); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; } .gift-room-look-board-picker__empty[hidden] { display: none; } .gift-room-planner-sheet .gift-room-look-task-editor__text, .gift-room-planner-sheet .gift-room-look-board-editor__brief { min-height: 132px; max-height: 340px; resize: vertical; } @media (hover: none), (max-width: 560px) { .gift-room-look-card__edit, .gift-room-looks-task-card .gift-room-task__actions { opacity: 1; } } .gift-room-saved-card__media { position: relative; } .gift-room-saved-card__media .gift-room-status-pill { position: absolute; top: 12px; right: 12px; text-transform: capitalize; } .gift-room-saved-note { width: fit-content; border: 0; background: transparent; color: var(--gr-accent, var(--color-forest)); font: inherit; font-size: 0.84rem; text-align: left; cursor: pointer; } .gift-room-saved-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .gift-room-saved-viewbar__tabs { flex: 1 1 auto; } .gift-room-saved-selection-count { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--color-forest) 12%, var(--color-cream)); color: var(--color-forest); font-family: var(--font-display); font-size: 0.86rem; font-weight: 760; white-space: nowrap; } .gift-room-saved-selection-count.is-idle { display: none; } .gift-room-saved-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 8px; margin: -8px; } .gift-room-saved-grid--products.gr-ideas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .gift-room-saved-product-card { position: relative; min-width: 0; display: grid; overflow: visible; border: 0; border-radius: 22px; background: var(--color-cream); color: var(--color-ink); box-shadow: none; cursor: pointer; outline: 0; transition: box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-saved-product-card.cat-card { display: block; isolation: isolate; border-radius: 0; background: var(--color-cream); box-shadow: none; transition: none; } .gift-room-saved-product-card::after { content: ""; position: absolute; inset: -7px; border: 2px solid transparent; border-radius: 29px; pointer-events: none; transition: border-color 0.18s ease; } .gift-room-saved-product-card:hover, .gift-room-saved-product-card:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--color-ink) 10%, transparent); } .gift-room-saved-product-card.cat-card:hover, .gift-room-saved-product-card.cat-card:focus-visible { box-shadow: none; outline: 0; transform: none; } .gift-room-saved-product-card.is-selected::after { border-color: var(--color-ink); } .gift-room-saved-product-card__check { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 94%, white); color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 12%, var(--color-line)); opacity: 0; transform: scale(0.94); transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .gift-room-saved-product-card__remove { position: absolute; top: 14px; left: 14px; z-index: 3; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 94%, white); color: var(--color-ink-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 12%, var(--color-line)); cursor: pointer; transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .gift-room-saved-product-card__remove > i { font-size: 15px; line-height: 1; } .gift-room-saved-product-card__remove:hover, .gift-room-saved-product-card__remove:focus-visible { background: color-mix(in srgb, var(--color-alert-red) 12%, var(--color-cream)); color: var(--color-alert-red); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-alert-red) 22%, transparent); outline: 0; transform: scale(1.04); } .gift-room-saved-product-card:hover .gift-room-saved-product-card__check, .gift-room-saved-product-card:focus-visible .gift-room-saved-product-card__check, .gift-room-saved-product-card.is-selected .gift-room-saved-product-card__check { opacity: 1; transform: scale(1); } .gift-room-saved-product-card.is-selected .gift-room-saved-product-card__check { background: var(--color-ink); color: var(--color-cream); } .gift-room-saved-product-card .gift-room-saved-product-card__matches { right: calc(10 * var(--cat-card-unit-x)); max-width: none; justify-content: center; padding-inline: calc(12 * var(--cat-card-unit-x)); font-size: clamp(12px, calc(14 * var(--cat-card-unit-x)), 14px); } .gift-room-saved-product-card .gift-room-saved-product-card__matches span { max-width: none; } .gift-room-saved-product-card__media { position: relative; min-height: 220px; display: grid; place-items: center; overflow: hidden; border-radius: 22px 22px 0 0; background: color-mix(in srgb, var(--color-sand) 76%, var(--color-cream)); color: var(--color-forest); } .gift-room-saved-product-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; } .gift-room-saved-product-card__placeholder { width: 100%; height: 100%; display: block; background: linear-gradient(135deg, color-mix(in srgb, var(--color-sand) 82%, var(--color-cream)) 0%, color-mix(in srgb, var(--color-cream) 88%, var(--color-sand)) 100%); } .gift-room-saved-product-card__body { display: grid; gap: 8px; padding: 18px 18px 16px; } .gift-room-saved-product-card__body strong { min-width: 0; overflow: hidden; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.88rem; font-weight: 760; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; } .gift-room-saved-product-card__body > span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 650; line-height: 1.35; } .gift-room-saved-product-card__meta { display: flex; align-items: center; gap: 8px 0; flex-wrap: wrap; padding-top: 4px; } .gift-room-saved-product-card__service { height: 22px; display: inline-flex; align-items: center; flex: 0 1 100%; min-width: 0; overflow: visible; } .gift-room-saved-service-badge { width: auto; height: 100%; max-width: 124px; display: block; object-fit: contain; } .gift-room-saved-service-badge--digital, .gift-room-saved-service-badge--free-download { width: 116px; } .gift-room-saved-service-badge--shipping { width: 110px; } .gift-room-saved-product-card__store-row { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 0; color: var(--color-ink); } .gift-room-saved-product-card__store-icon { width: 24px; height: 24px; display: block; flex: 0 0 24px; object-fit: contain; } .gift-room-saved-product-card__store-notch { width: 8px; height: 12px; display: block; flex: 0 0 8px; margin-inline: -1px -2px; border-radius: 999px; background: var(--color-sand); } .gift-room-saved-product-card__store { min-width: 0; max-width: 132px; height: 28px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 13px; border-radius: 999px; background: var(--color-sand); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.82rem; font-weight: 760; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .gift-room-saved-product-card__meta .gift-room-saved-note { border: 0; cursor: pointer; } @media (max-width: 1100px) { .gift-room-saved-grid--products, .gift-room-saved-grid--products.gr-ideas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .gift-room-saved-folders-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .gift-room-saved-folder-card { position: relative; min-height: 220px; display: block; overflow: visible; padding: 0; border: 0; border-radius: 22px; background: var(--color-cream); color: var(--color-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 12%, var(--color-line)); transition: box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-saved-folder-card:hover, .gift-room-saved-folder-card:focus-within { transform: none; outline: 0; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-saved-folder-card__open { width: 100%; min-height: 220px; display: grid; align-content: start; gap: 8px; padding: 18px; border: 0; border-radius: inherit; background: transparent; color: inherit; text-align: left; cursor: pointer; } .gift-room-saved-folder-card__open:focus-visible { outline: 0; } .gift-room-saved-folder-card__head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; } .gift-room-saved-folder-card__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: color-mix(in srgb, var(--color-forest) 10%, var(--color-cream)); color: var(--color-forest); font-size: 1.35rem; } .gift-room-saved-folder-card__edit { position: absolute; top: 16px; right: 16px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 82%, var(--color-sand)); color: var(--color-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 12%, var(--color-line)); cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease; } .gift-room-saved-folder-card__edit:hover, .gift-room-saved-folder-card__edit:focus-visible { background: var(--color-cream); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; transform: none; } .gift-room-saved-folder-card__edit svg { width: 17px; height: 17px; } .gift-room-saved-folder-card__preview { width: 100%; height: 68px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; } .gift-room-saved-folder-card__thumb { min-width: 0; border-radius: 14px; background-color: color-mix(in srgb, var(--color-sand) 64%, var(--color-cream)); background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 9%, transparent); overflow: hidden; } .gift-room-saved-folder-card__thumb.is-empty { display: grid; place-items: center; color: var(--color-forest); } .gift-room-saved-folder-card__thumb.is-empty svg { width: 20px; height: 20px; } .gift-room-saved-folder-card strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.08rem; line-height: 1.1; } .gift-room-saved-folder-card em, .gift-room-saved-folder-card small { color: var(--color-ink-soft); font-family: var(--font-heading); font-style: normal; font-weight: 650; line-height: 1.32; } .gift-room-saved-folder-card em { font-size: 0.84rem; } .gift-room-saved-folder-card small { display: -webkit-box; font-size: 0.78rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } textarea.gift-room-sheet-input.gift-room-saved-folder-editor__description { height: 96px; min-height: 96px; padding: 16px 18px; border-radius: 18px; line-height: 1.35; resize: none; overflow: auto; } .gift-room-saved-folder-editor__hint { display: flex; justify-content: space-between; gap: 12px; margin-top: -2px; margin-bottom: 14px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 650; line-height: 1.35; } .gift-room-saved-folder-editor__hint [data-folder-edit-count] { flex: 0 0 auto; color: var(--color-ink); font-variant-numeric: tabular-nums; } .gift-room-overview-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: 16px; } .gift-room-overview-layout .gift-room-overview-card { grid-column: 1 / -1; } .gift-room-reg-filter-count { margin-left: auto; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 680; } .gift-room-wedding-registry .gift-room-planner__toolbar { align-items: center; gap: 12px; flex-wrap: wrap; } .gift-room-reg-sort { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; margin-left: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 720; } .gift-room-reg-sort .gift-room-reg-sort-trigger { height: 42px; min-width: 164px; justify-content: space-between; } .gift-room-reg-sort-popover { z-index: 5400; } .gift-room-reg-sort-backdrop { z-index: 5390; } .gift-room-wedding-registry [data-reg-import-saved]:disabled { cursor: default; opacity: 0.48; } .gift-room-reg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .gift-room-reg-card { position: relative; min-width: 0; overflow: visible; border: 1px solid var(--color-line); border-radius: 22px; background: var(--color-cream); color: var(--color-ink); box-shadow: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-reg-card[data-reg-open] { cursor: pointer; } .gift-room-reg-card:hover, .gift-room-reg-card:focus-within { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: none; } .gift-room-reg-card[data-reg-open]:focus-visible { outline: 0; border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-reg-media { position: relative; min-height: 176px; display: grid; place-items: center; overflow: hidden; border-radius: 22px 22px 0 0; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 20%, var(--color-sand)); color: var(--color-cream); font-size: 2.1rem; } .gift-room-reg-media img { width: 100%; height: 100%; display: block; object-fit: cover; } .gift-room-reg-media__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--color-cream) 30%, transparent) 0 24%, transparent 46%), linear-gradient(140deg, color-mix(in srgb, var(--gr-accent, var(--color-forest)) 52%, var(--color-sand)) 0%, color-mix(in srgb, var(--gr-accent, var(--color-forest)) 34%, var(--color-sand)) 100%); color: color-mix(in srgb, var(--color-forest) 70%, var(--color-ink)); } .gift-room-reg-media__placeholder > i, .gift-room-reg-media__placeholder > svg, .gift-room-reg-media__placeholder > img { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--color-cream); color: var(--color-forest); font-size: 1.9rem; line-height: 1; box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--color-ink) 34%, transparent); } .gift-room-reg-media__placeholder > svg, .gift-room-reg-media__placeholder > img { padding: 19px; } .gift-room-memory-media__placeholder { font-size: 2rem; } .gift-room-memory-book { display: grid; gap: 16px; } .gift-room-memory-book__hero.gift-room-sheet-result { margin: 0; } .gift-room-memory-book__cover { min-height: 180px; display: grid; align-content: end; gap: 8px; padding: 22px; border-radius: 26px; background: linear-gradient(140deg, color-mix(in srgb, var(--gr-accent, var(--color-forest)) 22%, var(--color-sand)) 0%, color-mix(in srgb, var(--color-cream) 88%, var(--color-sand)) 100%); border: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-cream) 82%, transparent); } .gift-room-memory-book__cover small, .gift-room-memory-book__cover span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 720; letter-spacing: 0.03em; text-transform: uppercase; } .gift-room-memory-book__cover strong { color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 2.1rem); font-weight: 780; line-height: 1.02; } .gift-room-memory-book__pages { display: grid; gap: 14px; } .gift-room-memory-book__page { display: grid; grid-template-columns: minmax(0, 158px) minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--color-line); border-radius: 22px; background: color-mix(in srgb, var(--color-cream) 94%, var(--color-sand)); } .gift-room-memory-book__media { min-height: 144px; overflow: hidden; border-radius: 18px; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 16%, var(--color-sand)); } .gift-room-memory-book__media img, .gift-room-memory-book__media .gift-room-reg-media__placeholder { width: 100%; height: 100%; } .gift-room-memory-book__copy { display: grid; align-content: start; gap: 6px; } .gift-room-memory-book__copy small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.04em; text-transform: uppercase; } .gift-room-memory-book__copy strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 1.02rem; font-weight: 760; } .gift-room-memory-book__copy span, .gift-room-memory-book__copy p { color: var(--color-ink-soft); font-size: 0.9rem; line-height: 1.55; } @media (max-width: 720px) { .gift-room-memory-book__page { grid-template-columns: 1fr; } .gift-room-memory-book__media { min-height: 180px; } } .gift-room-reg-media--1, .gift-room-reg-media--4 { background: color-mix(in srgb, var(--color-forest) 20%, var(--color-sand)); } .gift-room-reg-media--2, .gift-room-reg-media--5 { background: color-mix(in srgb, var(--color-ink) 12%, var(--color-sand)); } .gift-room-reg-status, .gift-room-reg-source { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; background: var(--color-cream); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 760; } .gift-room-reg-status { right: 12px; } .gift-room-reg-status--open { background: color-mix(in srgb, var(--color-top-badge-blue) 88%, var(--color-cream)); color: var(--color-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-top-badge-border) 78%, transparent); } .gift-room-reg-status--claim { color: var(--gr-accent, var(--color-forest)); } .gift-room-reg-status--done { color: var(--color-ink-soft); } .gift-room-reg-source { left: 12px; max-width: calc(100% - 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-reg-body { display: grid; gap: 9px; padding: 16px; } .gift-room-reg-kicker, .gift-room-reg-meta { min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .gift-room-reg-kicker span, .gift-room-reg-store { min-height: 24px; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 0 10px; border-radius: 999px; background: var(--color-sand); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 760; line-height: 1; } .gift-room-reg-kicker span:first-child { color: var(--color-ink); } .gift-room-reg-title { display: inline-flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; border: 0; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; font-weight: 760; line-height: 1.12; text-align: left; cursor: pointer; border-radius: 999px; outline: 0; transition: color 0.18s ease; } .gift-room-reg-title--plain { display: none; width: 100%; margin: 0; padding: 0; border-radius: 0; cursor: default; } .gift-room-reg-title--static { display: block; width: 100%; margin: 0; padding: 0; border-radius: 0; cursor: default; } .gift-room-reg-title__icon-shell { flex: 0 0 auto; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: transparent; color: var(--color-ink-soft); transition: background-color 0.15s ease, color 0.15s ease; } .gift-room-reg-title__icon { width: 0.82rem; height: 0.82rem; font-size: 0.82rem; } .gift-room-reg-title:hover, .gift-room-reg-title:focus-visible { color: var(--color-ink); } .gift-room-reg-title:hover .gift-room-reg-title__icon-shell, .gift-room-reg-title:focus-visible .gift-room-reg-title__icon-shell { background-color: var(--popup-hover); color: var(--color-ink); } .gift-room-reg-edit-mobile { display: none; } .gift-room-reg-price, .gift-room-reg-sub { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.82rem; } .gift-room-reg-price { color: var(--color-ink); font-size: 0.9rem; font-weight: 720; } .gift-room-reg-claim-note { width: fit-content; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 680; } .gift-room-reg-detail-activity { display: grid; gap: 10px; margin-top: 4px; } .gift-room-reg-detail-activity h4 { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.82rem; font-weight: 760; line-height: 1.15; } .gift-room-reg-detail-activity-list { display: grid; gap: 8px; } .gift-room-reg-detail-activity-item { display: grid; gap: 2px; padding: 11px 12px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--filter-pill-bg, var(--color-sand-dark)); color: var(--color-ink); } .gift-room-reg-detail-activity-item strong { color: var(--color-ink); font-family: var(--font-display); font-size: 0.92rem; line-height: 1.1; } .gift-room-reg-detail-activity-item small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 650; line-height: 1.35; } @media (max-width: 720px) { .gift-room-wedding-registry .gift-room-reg-card[data-reg-open] { cursor: pointer; touch-action: manipulation; } .gift-room-wedding-registry .gift-room-reg-body { padding-bottom: 76px; } .gift-room-wedding-registry .gift-room-reg-title--edit { display: none; } .gift-room-wedding-registry .gift-room-reg-title--plain { display: block; } .gift-room-wedding-registry .gift-room-reg-edit-mobile { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: 50%; background: color-mix(in srgb, var(--color-cream) 92%, var(--color-sand)); color: var(--color-ink); box-shadow: var(--shadow-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease; } .gift-room-wedding-registry .gift-room-reg-edit-mobile:hover, .gift-room-wedding-registry .gift-room-reg-edit-mobile:focus-visible { background: var(--popup-hover); color: var(--color-ink); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); transform: translateY(-1px); outline: 0; } .gift-room-wedding-registry .gift-room-reg-edit-mobile__icon { width: 1rem; height: 1rem; font-size: 1rem; } } .gift-room-reg-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--color-sand); } .gift-room-reg-progress i, .gift-room-reg-progress span { display: block; height: 100%; border-radius: inherit; background: var(--color-forest); } .gift-room-reg-action, .gift-room-wedding-chat-gift__body button { width: fit-content; min-height: 32px; padding: 0 13px; border-radius: 999px; font-family: var(--font-display); cursor: pointer; } .gift-room-reg-action { position: relative; z-index: 0; isolation: isolate; padding-inline: 15px; border: 0; background: transparent; color: var(--color-cream); transition: none; } .gift-room-reg-action::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--color-ink); border-radius: inherit; background: var(--color-ink); pointer-events: none; transition: inset .18s ease, background-color .18s ease, border-color .18s ease; } .gift-room-reg-action:hover { background: transparent; color: var(--color-cream); box-shadow: none; } .gift-room-reg-action:hover::before { inset: -3px; } .gift-room-reg-action:focus-visible { outline: 0; box-shadow: none; } .gift-room-reg-action:focus-visible::before { inset: -3px; } .gift-room-reg-action.is-done { background: transparent; color: var(--color-ink-soft); } .gift-room-reg-action:disabled, .gift-room-reg-action:disabled:hover, .gift-room-reg-action:disabled:focus-visible { cursor: default; color: var(--color-ink-soft); } .gift-room-reg-action.is-done::before, .gift-room-reg-action:disabled::before { background: transparent; border-color: color-mix(in srgb, var(--color-ink) 18%, var(--color-cream)); } .gift-room-reg-action.is-done:hover { box-shadow: none; } .gift-room-reg-action:disabled:hover::before, .gift-room-reg-action:disabled:focus-visible::before, .gift-room-reg-action.is-done:hover::before { inset: 0; } .gift-room-reg-import-list { display: grid; gap: 10px; } .gift-room-reg-import-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--color-line); border-radius: 16px; background: color-mix(in srgb, var(--color-sand) 42%, var(--color-cream)); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 680; } .gift-room-reg-import-note strong { color: var(--color-ink); } .gift-room-reg-import-note span { text-align: right; } .gift-room-reg-import-empty { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 28px 18px 18px; color: var(--color-ink-soft); text-align: center; } .gift-room-reg-import-empty__icon { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-forest) 12%, var(--color-cream)); color: var(--color-forest); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-forest) 16%, transparent); } .gift-room-reg-import-empty__icon svg { width: 28px; height: 28px; } .gift-room-reg-import-empty strong { max-width: 26rem; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.28rem, 2.2vw, 1.72rem); line-height: 1.08; } .gift-room-reg-import-empty p { max-width: 34rem; margin: 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.92rem; font-weight: 620; line-height: 1.42; } .gift-room-reg-import-empty .gift-room-proto-row__action { margin-top: 4px; } .gift-room-reg-import-empty__action { min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; background: var(--color-ink) !important; color: var(--color-cream) !important; box-shadow: none; } .gift-room-reg-import-empty__action:hover, .gift-room-reg-import-empty__action:focus-visible { border-color: transparent; background: var(--color-ink) !important; color: var(--color-cream) !important; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } .gift-room-reg-import-empty__action::before { background: transparent !important; content: none !important; } .gift-room-reg-import-option { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 74px; padding: 8px 12px 8px 8px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-cream); color: var(--color-ink); text-align: left; cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .gift-room-reg-import-option:hover, .gift-room-reg-import-option:focus-visible { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; } .gift-room-reg-import-option__media { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--color-sand); color: var(--color-forest); } .gift-room-reg-import-option__media img { width: 100%; height: 100%; display: block; object-fit: cover; } .gift-room-reg-import-option__copy { min-width: 0; display: grid; gap: 4px; } .gift-room-reg-import-option__copy strong, .gift-room-reg-import-option__copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-reg-import-option__copy strong { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 760; } .gift-room-reg-import-option__copy small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; } .gift-room-reg-import-option__add { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); transition: transform 0.18s ease, box-shadow 0.18s ease; } .gift-room-reg-import-option:hover .gift-room-reg-import-option__add, .gift-room-reg-import-option:focus-visible .gift-room-reg-import-option__add { transform: scale(1.055); } .gift-room-wedding-chat-gift__body button { border: 0; background: var(--color-ink); color: var(--color-cream); } .gift-room-sheet-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gift-room-planner-sheet .gift-room-sheet-actions .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger) { order: 1; } .gift-room-planner-sheet .gift-room-sheet-actions .gift-room-sheet-action--primary { order: 2; } .gift-room-planner-sheet .gift-room-sheet-actions:has(.gift-room-sheet-action--cancel, .gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger)) .gift-room-sheet-action--primary { margin-left: auto; } .gift-room-sheet-actions--confirm { padding-top: 2px; } .gift-room-sheet-action { position: relative; isolation: isolate; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 24px; border: 0; border-radius: 999px; font-family: var(--font-display); font-size: 0.98rem; font-weight: 720; overflow: visible; transition: none; } .gift-room-sheet-action::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-sheet-action--cancel { background: transparent; color: var(--color-ink); } .gift-room-sheet-action--cancel::before { border: 0; background: var(--popup-bg, var(--color-cream)); } .gift-room-sheet-action--cancel:hover, .gift-room-sheet-action--cancel:focus-visible { background: transparent; color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-sheet-action--cancel:hover::before, .gift-room-sheet-action--cancel:focus-visible::before { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-sheet-action--primary, .gift-room-sheet-action--danger { background: transparent; color: var(--color-cream); } .gift-room-sheet-action--primary:hover, .gift-room-sheet-action--primary:focus-visible, .gift-room-sheet-action--danger:hover, .gift-room-sheet-action--danger:focus-visible { background: transparent; color: var(--color-cream); box-shadow: none; outline: 0; transform: none; } .gift-room-sheet-action--primary:hover::before, .gift-room-sheet-action--primary:focus-visible::before, .gift-room-sheet-action--danger:hover::before, .gift-room-sheet-action--danger:focus-visible::before { transform: scale(1.055); box-shadow: none; } .gift-room-planner-sheet .gift-room-sheet-action--danger:hover, .gift-room-planner-sheet .gift-room-sheet-action--danger:focus-visible, .gift-room-planner-sheet .gift-room-sheet-action--danger:hover i, .gift-room-planner-sheet .gift-room-sheet-action--danger:focus-visible i, .gift-room-planner-sheet .gift-room-sheet-action--danger:hover .gift-room-icon, .gift-room-planner-sheet .gift-room-sheet-action--danger:focus-visible .gift-room-icon { color: var(--color-cream); transform: none; } .gift-room-planner-sheet .gift-room-sheet-action--danger:hover::before, .gift-room-planner-sheet .gift-room-sheet-action--danger:focus-visible::before { border: 0; background: var(--color-ink); } .gift-room-wedding-chat { max-width: 820px; } .gift-room-wedding-chat-members { display: flex; align-items: center; gap: 0; padding-bottom: 14px; border-bottom: 1px solid var(--color-line); overflow-x: auto; } .gift-room-wedding-chat-members > span:first-child { flex: 0 0 auto; margin-right: 12px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; } .gift-room-wedding-chat-avatar { flex: 0 0 34px; width: 34px; height: 34px; border: 2px solid var(--color-cream); } .gift-room-wedding-chat-add, .gift-room-wedding-chat-attach { flex: 0 0 auto; display: inline-grid; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-cream); color: var(--color-ink); cursor: pointer; } .gift-room-wedding-chat-add { width: 34px; height: 34px; margin-left: 8px; border-style: dashed; color: var(--gr-accent, var(--color-forest)); } .gift-room-wedding-chat-list { max-height: 460px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px; } .gift-room-wedding-chat-msg { max-width: 78%; display: flex; flex-direction: column; } .gift-room-wedding-chat-msg.is-me { align-self: flex-end; align-items: flex-end; } .gift-room-wedding-chat-msg.is-them { align-self: flex-start; } .gift-room-wedding-chat-bubble { padding: 10px 14px; border-radius: 16px; background: var(--color-sand); color: var(--color-ink); font-family: var(--font-heading); font-size: 0.86rem; line-height: 1.4; } .gift-room-wedding-chat-msg.is-me .gift-room-wedding-chat-bubble { border-bottom-right-radius: 5px; background: var(--color-ink); color: var(--color-cream); } .gift-room-wedding-chat-msg.is-them .gift-room-wedding-chat-bubble { border-bottom-left-radius: 5px; } .gift-room-wedding-chat-meta { margin: 3px 4px 0; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 650; } .gift-room-wedding-chat-composer { display: flex; align-items: center; gap: 8px; } .gift-room-wedding-chat-composer input { min-width: 0; flex: 1; height: 46px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-cream); padding: 0 18px; color: var(--color-ink); font-family: inherit; } .gift-room-wedding-chat-attach { width: 46px; height: 46px; color: var(--gr-accent, var(--color-forest)); } .gift-room-wedding-chat-gift { width: 230px; max-width: 100%; overflow: hidden; margin-top: 8px; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-cream); color: var(--color-ink); } .gift-room-wedding-chat-gift__media { min-height: 64px; display: grid; place-items: center; color: var(--color-cream); font-size: 1.35rem; } .gift-room-wedding-chat-gift__body { display: grid; gap: 6px; padding: 8px 11px; } .gift-room-wedding-chat-gift__body strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 0.8rem; } .gift-room-wedding-chat-gift__body span { color: var(--color-ink-soft); font-size: 0.72rem; } .gift-room-wedding-chat-gift__body button { min-height: 28px; font-size: 0.72rem; } .gift-room-sheet-picker-list { display: grid; gap: 8px; } .gift-room-sheet-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; min-height: 60px; padding: 10px 14px; border: 1px solid var(--color-line); border-radius: 22px; background: var(--color-cream); color: var(--color-ink); text-align: left; cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .gift-room-sheet-picker span { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--gr-accent, var(--color-forest)); color: var(--color-cream); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; } .gift-room-sheet-picker strong, .gift-room-sheet-picker small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-sheet-picker small { color: var(--color-ink-soft); } .gift-room-sheet-picker:hover, .gift-room-sheet-picker:focus-visible { border-color: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: 0; transform: translateY(-1px); } .gift-room-seat-assign-empty { min-height: 72px; display: grid; gap: 4px; align-content: center; padding: 16px 18px; border: 1px dashed var(--color-line); border-radius: 22px; background: color-mix(in srgb, var(--color-cream) 92%, var(--color-sand)); color: var(--color-ink); } .gift-room-seat-assign-empty strong { font-family: var(--font-display); font-size: 0.98rem; } .gift-room-seat-assign-empty span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.8rem; } .gift-room-seat-quick-add { display: grid; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--color-line); } .gift-room-seat-quick-add__toggle { position: relative; isolation: isolate; justify-self: start; border: 0; background: transparent; color: var(--color-ink); box-shadow: none; overflow: visible; transition: none; } .gift-room-seat-quick-add__toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-cream); transition: box-shadow 0.18s ease, transform 0.18s ease; } .gift-room-seat-quick-add__toggle:hover, .gift-room-seat-quick-add__toggle:focus-visible { border-color: transparent; background: transparent; color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-seat-quick-add__toggle:hover::before, .gift-room-seat-quick-add__toggle:focus-visible::before { box-shadow: none; transform: none; } .gift-room-seat-quick-add__toggle .gift-room-icon, .gift-room-seat-quick-add__toggle i { color: var(--color-ink); } .gift-room-seat-quick-add__form { display: grid; gap: 12px; } .gift-room-seat-quick-add__form[hidden] { display: none; } .gift-room-seat-quick-add__actions { padding-top: 2px; } .gift-room-seat-edit-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 0 2px; border: 0; border-radius: 0; background: transparent; } .gift-room-seat-edit-card > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--gr-accent, var(--color-forest)); color: var(--color-cream); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; } .gift-room-seat-edit-card div { min-width: 0; display: grid; gap: 3px; } .gift-room-seat-edit-card strong, .gift-room-seat-edit-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-seat-edit-card strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; line-height: 1.1; } .gift-room-seat-edit-card small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; } .gift-room-seat-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 12px; } .gift-room-seat-edit-field { position: relative; min-width: 0; display: grid; gap: 0; margin: 0; padding-top: 8px; } .gift-room-seat-edit-field--wide { grid-column: 1 / -1; } .gift-room-seat-edit-field > span { position: absolute; top: 2px; left: 22px; z-index: 3; display: inline-flex; align-items: center; max-width: calc(100% - 36px); padding: 0 6px; border-radius: 999px; background: var(--header-auth-label-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 14px; overflow: hidden; pointer-events: none; text-overflow: ellipsis; text-transform: none; white-space: nowrap; } .gift-room-sheet-input.gift-room-seat-edit-input { width: 100%; height: 46px; min-height: 46px; margin: 0; padding: 0 20px; border: 1.5px solid var(--popup-control-border); border-radius: 999px; background: var(--header-auth-field-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 46px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .gift-room-sheet-input.gift-room-seat-edit-input:focus, .gift-room-sheet-input.gift-room-seat-edit-input:focus-visible { border-color: color-mix(in srgb, var(--color-ink) 24%, var(--color-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 7%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); outline: 0; } .gift-room-sheet-input.gift-room-seat-edit-input:focus, .gift-room-sheet-input.gift-room-seat-edit-input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 9%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); } .gift-room-sheet-input.gift-room-seat-edit-textarea { height: auto; min-height: 118px; padding: 16px 20px; border-radius: 24px; line-height: 1.36; resize: vertical; } .gift-room-seat-table-shape-picker { grid-column: 1 / -1; display: grid; gap: 8px; } .gift-room-seat-table-shape-picker > span { color: var(--color-ink); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 14px; } .gift-room-seat-table-shape-options { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--color-line); border-radius: 999px; background: transparent; overflow-x: auto; scrollbar-width: none; } .gift-room-seat-table-shape-options::-webkit-scrollbar { display: none; } .gift-room-seat-table-shape-option { flex: 1 0 150px; min-width: 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-display); text-align: left; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .gift-room-seat-table-shape-option__copy { min-width: 0; display: grid; gap: 2px; align-content: center; } .gift-room-seat-table-shape-option strong, .gift-room-seat-table-shape-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-seat-table-shape-option strong { font-family: var(--font-display); font-size: 0.88rem; line-height: 1.16; } .gift-room-seat-table-shape-option small { color: var(--color-ink-soft); font-size: 0.72rem; font-weight: 650; line-height: 1.22; } .gift-room-seat-table-shape-option:hover, .gift-room-seat-table-shape-option:focus-visible { background: color-mix(in srgb, var(--color-forest) 14%, var(--color-cream)); color: var(--color-ink); box-shadow: none; outline: 0; } .gift-room-seat-table-shape-option.is-selected { background: var(--color-ink); color: var(--color-cream); } .gift-room-seat-table-shape-option.is-selected .gift-room-table-shape-icon { color: var(--color-cream); } .gift-room-seat-table-shape-option.is-selected small { color: color-mix(in srgb, var(--color-cream) 72%, transparent); } .gift-room-seat-edit-field--select { position: relative; z-index: 1; } .gift-room-seat-edit-field--select.is-open { z-index: 8; } .gift-room-seat-edit-select { width: 100%; height: 46px; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 18px 0 20px; border: 1.5px solid var(--popup-control-border); border-radius: 999px; background: var(--header-auth-field-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 46px; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .gift-room-seat-edit-select span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-seat-edit-select i { flex: 0 0 auto; font-size: 1rem; transition: transform 0.18s ease; } .gift-room-seat-edit-select:hover, .gift-room-seat-edit-select:focus-visible, .gift-room-seat-edit-field--select.is-open .gift-room-seat-edit-select { border-color: color-mix(in srgb, var(--color-ink) 24%, var(--color-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 7%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); outline: 0; } .gift-room-seat-edit-select:hover, .gift-room-seat-edit-select:focus-visible, .gift-room-seat-edit-field--select.is-open .gift-room-seat-edit-select { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 9%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); } .gift-room-seat-edit-field--select.is-open .gift-room-seat-edit-select i { transform: rotate(180deg); } .gift-room-seat-edit-menu { position: fixed; z-index: 12180; top: var(--seat-edit-menu-top, 0); left: var(--seat-edit-menu-left, 0); width: var(--seat-edit-menu-width, 100%); display: grid; gap: 4px; max-height: var(--seat-edit-menu-max, 320px); padding: 7px; border: 1px solid var(--popup-border-strong); border-radius: 22px; background: var(--popup-bg); box-shadow: var(--popup-shadow-soft); overflow-y: auto; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(-4px) scale(0.99); transform-origin: top center; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease; } .gift-room-seat-edit-field--select.is-open .gift-room-seat-edit-menu { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0) scale(1); } .gift-room-seat-edit-field--select.is-above .gift-room-seat-edit-menu { transform-origin: bottom center; } .gift-room-seat-edit-field--select.is-below .gift-room-seat-edit-menu { transform-origin: top center; } .gift-room-seat-edit-option { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 680; text-align: left; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease; } .gift-room-seat-edit-option__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-seat-edit-option__check { flex: 0 0 17px; width: 17px; height: 14px; display: block; opacity: 0; transition: opacity 0.16s ease; } .gift-room-seat-edit-option:hover, .gift-room-seat-edit-option:focus-visible, .gift-room-seat-edit-option.is-selected { background: var(--sort-option-hover, color-mix(in srgb, var(--color-forest) 12%, var(--color-cream))); color: var(--color-ink); outline: 0; } .gift-room-seat-edit-option.is-selected .gift-room-seat-edit-option__check { opacity: 1; } .gift-room-seat-edit-actions { padding-top: 2px; width: 100%; justify-content: space-between; } .gift-room-seat-edit-actions .gift-room-sheet-action--primary { margin-left: auto; } .gift-room-seat-edit-actions .gift-room-sheet-action--plain::before { border: 0; background: transparent; box-shadow: none; } .gift-room-seat-edit-actions .gift-room-sheet-action--plain:hover::before, .gift-room-seat-edit-actions .gift-room-sheet-action--plain:focus-visible::before { background: transparent; box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove { background: transparent; color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove:hover, .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove:focus-visible { background: transparent; color: var(--color-alert-red); box-shadow: none; outline: 0; transform: none; } .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove::before, .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove:hover::before, .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove:focus-visible::before { border: 0; background: transparent; transform: none; } .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove:hover::before, .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove:focus-visible::before { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove i { color: currentColor; } .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger) { background: transparent; color: var(--color-ink); box-shadow: none; outline: 0; transform: none; } .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):hover, .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):focus-visible { background: transparent; color: var(--color-alert-red); box-shadow: none; outline: 0; transform: none; } .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger)::before, .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):hover::before, .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):focus-visible::before { border: 0; background: transparent; transform: none; } .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):hover::before, .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):focus-visible::before { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger) i, .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):hover i, .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--neutral-remove.gift-room-sheet-action--remove:not(.gift-room-sheet-action--danger):focus-visible i { color: currentColor; } .gift-room-overview-checklist, .gift-room-overview-delight { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-cream); } .gift-room-overview-checklist h4, .gift-room-overview-delight h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--color-ink); font-family: var(--font-display); font-size: 1.05rem; } .gift-room-overview-section-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 4px; } .gift-room-overview-section-head h4 { margin: 0; } .gift-room-overview-section-head [data-checklist-add], .gift-room-overview-section-head [data-delight-copy-kit] { position: relative; isolation: isolate; min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-family: var(--font-display); font-size: 0.78rem; font-weight: 760; cursor: pointer; overflow: visible; white-space: nowrap; transition: none; } .gift-room-overview-section-head [data-checklist-add] { color: var(--color-cream); } .gift-room-overview-section-head [data-checklist-add]::before, .gift-room-overview-section-head [data-delight-copy-kit]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .gift-room-overview-section-head [data-checklist-add]::before { background: var(--color-ink); } .gift-room-overview-section-head [data-delight-copy-kit] { color: var(--color-forest); } .gift-room-overview-section-head [data-delight-copy-kit]::before { background: color-mix(in srgb, var(--color-forest) 10%, var(--popup-bg)); } .gift-room-overview-section-head [data-checklist-add]:hover, .gift-room-overview-section-head [data-checklist-add]:focus-visible { background: transparent; color: var(--color-cream); box-shadow: none; outline: 0; transform: none; } .gift-room-overview-section-head [data-checklist-add]:hover::before, .gift-room-overview-section-head [data-checklist-add]:focus-visible::before { transform: scale(1.055); } .gift-room-overview-section-head [data-delight-copy-kit]:hover, .gift-room-overview-section-head [data-delight-copy-kit]:focus-visible, .gift-room-overview-section-head [data-delight-copy-kit].is-copied { background: transparent; color: var(--color-cream); box-shadow: none; outline: 0; } .gift-room-overview-section-head [data-delight-copy-kit]:hover::before, .gift-room-overview-section-head [data-delight-copy-kit]:focus-visible::before, .gift-room-overview-section-head [data-delight-copy-kit].is-copied::before { background: var(--color-forest); box-shadow: var(--shadow-soft); } .gift-room-overview-task, .gift-room-overview-delight [data-delight], .gift-room-overview-delight [data-overview-tool], .gift-room-overview-delight [data-overview-action] { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--color-line); background: transparent; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; padding: 12px 0 0; } .gift-room-overview-task span { position: relative; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid color-mix(in srgb, var(--color-forest) 32%, var(--popup-control-border)); border-radius: 50%; background: var(--popup-bg); flex: 0 0 auto; transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .gift-room-overview-task span::after { content: ""; width: 16px; height: 16px; border-radius: 999px; background: var(--popup-bg); opacity: 0; transform: scale(0.85); transition: opacity 0.15s ease, transform 0.15s ease; } .gift-room-overview-task.is-done span { border-color: var(--color-forest); background: var(--color-forest); } .gift-room-overview-task.is-done span::after { opacity: 1; transform: scale(1); } .gift-room-overview-task:hover span, .gift-room-overview-task:focus-visible span { border-color: var(--color-forest); transform: scale(1.04); } .gift-room-overview-task strong, .gift-room-overview-delight strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-overview-task em, .gift-room-overview-delight em { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.74rem; font-style: normal; font-weight: 650; } .gift-room-overview-delight [data-delight], .gift-room-overview-delight [data-overview-tool], .gift-room-overview-delight [data-overview-action] { grid-template-columns: auto minmax(0, 1fr); } .gift-room-overview-delight [data-delight] > span, .gift-room-overview-delight [data-overview-tool] > span, .gift-room-overview-delight [data-overview-action] > span { width: 44px; height: 44px; display: grid; place-items: center; grid-row: span 2; border-radius: 14px; background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 10%, var(--color-cream)); color: var(--gr-accent, var(--color-forest)); font-size: 1.25rem; } .gift-room-photo-upload { position: relative; margin-bottom: 12px; } .gift-room-photo-upload__tile { position: relative; display: block; width: 100%; min-height: 156px; border-radius: 18px; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--color-cream) 82%, var(--color-sand)); border: 1.5px dashed color-mix(in srgb, var(--color-forest) 34%, var(--color-line)); transition: border-color .18s ease, background-color .18s ease; } .gift-room-photo-upload__tile:hover { border-color: color-mix(in srgb, var(--color-forest) 58%, var(--color-line)); background: color-mix(in srgb, var(--color-cream) 92%, var(--color-sand)); } .gift-room-photo-upload[data-has-photo="1"] .gift-room-photo-upload__tile { border-style: solid; border-color: var(--color-line); background: var(--color-cream); } .gift-room-photo-upload__media { position: absolute; inset: 0; display: grid; place-items: center; } .gift-room-photo-upload__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .gift-room-photo-upload__empty { display: grid; justify-items: center; gap: 6px; padding: 18px; text-align: center; } .gift-room-photo-upload__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--color-cream); color: var(--color-forest); font-size: 1.5rem; box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--color-ink) 42%, transparent); } .gift-room-photo-upload__empty strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; font-weight: 650; } .gift-room-photo-upload__empty small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.02em; } .gift-room-photo-upload__hint { position: absolute; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; gap: 6px; padding: 10px; background: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 72%, transparent), transparent); color: var(--color-cream); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 700; pointer-events: none; } .gift-room-photo-upload[data-has-photo="1"] .gift-room-photo-upload__hint { display: flex; } .gift-room-photo-upload__remove { position: absolute; top: 10px; right: 10px; z-index: 2; display: none; width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-cream) 92%, transparent); color: var(--color-ink); cursor: pointer; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-ink) 55%, transparent); transition: filter .18s ease; } .gift-room-photo-upload[data-has-photo="1"] .gift-room-photo-upload__remove { display: inline-flex; } .gift-room-photo-upload__remove:hover { filter: brightness(0.94); } .gift-room-sheet-list { display: grid; gap: 10px; } .gift-room-sheet-list span { display: block; padding: 10px 0; border-top: 1px solid var(--color-line); border-radius: 0; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.9rem; line-height: 1.4; } .gift-room-sheet-list span:first-child { border-top: 0; padding-top: 0; } .gift-room-sheet-copy, .gift-room-sheet-result { display: grid; gap: 4px; padding: 0; border-radius: 0; background: transparent; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.98rem; font-weight: 650; line-height: 1.45; } .gift-room-sheet-copy--plain { padding: 0; border-radius: 0; background: transparent; color: var(--color-ink-soft); font-size: 0.98rem; } .gift-room-vendor-versions { display: grid; gap: 14px; } .gift-room-vendor-versions__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .gift-room-vendor-versions__summary span { min-width: 0; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--filter-pill-bg, var(--color-sand-dark)); color: var(--color-ink); } .gift-room-vendor-versions__summary strong { font-family: var(--font-display); font-size: 1.15rem; line-height: 1; } .gift-room-vendor-versions__summary small, .gift-room-vendor-version-card__meta { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 680; line-height: 1.2; } .gift-room-vendor-version-card__meta { display: grid; gap: 5px; } .gift-room-vendor-version-card__meta small { display: block; min-width: 0; overflow: hidden; color: var(--color-ink-muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; } .gift-room-vendor-versions__list { display: grid; gap: 12px; } .gift-room-vendor-version-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--popup-bg); color: var(--color-ink); box-shadow: none; } .gift-room-vendor-version-card.is-sent { border-color: color-mix(in srgb, var(--color-forest) 42%, var(--color-line)); background: color-mix(in srgb, var(--color-forest) 5%, var(--popup-bg)); } .gift-room-vendor-version-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; } .gift-room-vendor-version-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .gift-room-vendor-version-card__actions .gift-room-proto-row__action { min-height: 40px; } .gift-room-vendor-version-card__head strong, .gift-room-vendor-version-moment small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-vendor-version-card__head strong { font-family: var(--font-display); font-size: 1rem; line-height: 1.1; } .gift-room-vendor-version-card__head span:not(.gift-room-vendor-version-card__icon) { display: block; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; } .gift-room-vendor-version-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--filter-pill-bg, var(--color-sand-dark)); color: var(--color-ink); font-size: 1.1rem; } .gift-room-vendor-version-card__moments { display: grid; gap: 7px; } .gift-room-vendor-version-moment { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 48px; padding: 8px 11px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--filter-pill-bg, var(--color-sand-dark)); color: var(--color-ink); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } .gift-room-vendor-version-moment:hover, .gift-room-vendor-version-moment:focus-within { background: var(--popup-hover); border-color: var(--popup-border-strong); } .gift-room-vendor-version-moment input { appearance: none; position: relative; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--popup-control-border); border-radius: 5px; background: var(--popup-bg); color: var(--color-cream); cursor: pointer; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .gift-room-vendor-version-moment input::after { content: ""; position: absolute; inset: 3px; background: currentColor; opacity: 0; transform: scale(0.78); transition: opacity .14s ease, transform .14s ease; -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; } .gift-room-vendor-version-moment input:checked { border-color: var(--color-forest); background: var(--color-forest); } .gift-room-vendor-version-moment input:checked::after { opacity: 1; transform: scale(1); } .gift-room-vendor-version-moment input:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--workspace-focus-ring); } .gift-room-vendor-version-moment:hover input, .gift-room-vendor-version-moment:focus-within input { border-color: var(--color-forest); transform: scale(1.04); } .gift-room-vendor-version-moment strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 0.82rem; line-height: 1; } .gift-room-vendor-version-moment small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 650; line-height: 1.25; } .gift-room-vendor-version-empty { padding: 14px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--filter-pill-bg, var(--color-sand-dark)); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 650; } .gift-room-vendor-versions__actions { padding-top: 2px; } .gift-room-vendor-outbox { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--filter-pill-bg, var(--color-sand-dark)); } .gift-room-vendor-outbox h4 { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 760; letter-spacing: 0; } .gift-room-vendor-outbox div { display: grid; gap: 8px; } .gift-room-vendor-outbox span { display: grid; gap: 2px; min-width: 0; } .gift-room-vendor-outbox strong { min-width: 0; overflow: hidden; color: var(--color-ink); font-family: var(--font-display); font-size: 0.92rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .gift-room-vendor-outbox small { min-width: 0; overflow: hidden; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .gift-room-vendor-send-form { display: grid; gap: 14px; } .gift-room-vendor-send-preview { margin-top: 0; } .gift-room-vendor-send-actions { padding-top: 0; } .gift-room-sheet-result { min-height: 22px; margin-top: 14px; } .gift-room-sheet-result:empty { display: none; } .gift-room-sheet-result strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; line-height: 1.1; } .gift-room-sheet-result span { color: var(--color-ink-soft); font-weight: 650; } .gift-room-delight-sheet { display: grid; gap: 12px; } .gift-room-delight-sheet__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-top: 2px; } .gift-room-delight-sheet__actions .gift-room-sheet-action { min-width: 0; width: 100%; min-height: 50px; padding-inline: 16px; font-size: 0.88rem; white-space: nowrap; } .gift-room-delight-sheet__actions .gift-room-sheet-action .gift-room-icon { flex: 0 0 auto; } .gift-room-planner-sheet .gift-room-delight-sheet__actions .gift-room-sheet-action { order: 0; } .gift-room-planner-sheet .gift-room-delight-sheet__actions .gift-room-sheet-action--primary { margin-left: 0; } .gift-room-delight-sheet__actions .gift-room-sheet-action--plain::before { border: 1px solid var(--color-line); background: var(--popup-bg); box-shadow: none; } .gift-room-delight-sheet__actions .gift-room-sheet-action--plain:hover, .gift-room-delight-sheet__actions .gift-room-sheet-action--plain:focus-visible { color: var(--color-ink); } .gift-room-delight-sheet__actions .gift-room-sheet-action--plain:hover::before, .gift-room-delight-sheet__actions .gift-room-sheet-action--plain:focus-visible::before { border-color: color-mix(in srgb, var(--color-forest) 26%, var(--color-line)); background: color-mix(in srgb, var(--color-forest) 5%, var(--popup-bg)); box-shadow: none; transform: none; } .gift-room-delight-sheet__feedback { min-height: 38px; display: flex; align-items: center; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--color-forest) 16%, var(--color-line)); border-radius: 14px; background: color-mix(in srgb, var(--color-forest) 7%, var(--popup-bg)); color: var(--color-forest); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 720; } .gift-room-delight-sheet__feedback[hidden] { display: none; } @media (max-width: 720px) { .gift-room-delight-sheet__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .gift-room-delight-sheet__actions { grid-template-columns: 1fr; } } .gift-room-delight-sheet__hero.gift-room-sheet-result, .gift-room-delight-sheet__preview.gift-room-sheet-result { margin-top: 0; padding: 13px 15px; border: 1px solid var(--color-line); border-radius: 18px; background: color-mix(in srgb, var(--color-forest) 8%, var(--popup-bg)); } .gift-room-delight-sheet__hero span { overflow-wrap: anywhere; } .gift-room-delight-sheet__checkline { margin: 2px 0 6px; font-size: 0.96rem; font-weight: 760; } .gift-room-delight-sheet__checkline input[type="checkbox"] { border-color: color-mix(in srgb, var(--color-forest) 34%, var(--popup-control-border)); } .gift-room-delight-sheet__audiences { width: 100%; margin-bottom: 2px; } .gift-room-delight-sheet__audiences .gift-room-planner__filter { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; } .gift-room-delight-sheet__audiences .gift-room-planner__filter span { color: inherit; font-family: var(--font-heading); font-size: 0.76rem; font-weight: 800; opacity: 0.72; } .gift-room-delight-sheet__list { display: grid; gap: 8px; margin-top: 2px; } .gift-room-delight-sheet__row { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 8px 10px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--filter-pill-bg, var(--color-sand-dark)); color: var(--color-ink); cursor: pointer; text-align: left; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .gift-room-delight-sheet__row:hover, .gift-room-delight-sheet__row:focus-visible { border-color: var(--popup-border-strong); background: var(--popup-hover); box-shadow: var(--shadow-soft); outline: 0; } .gift-room-delight-sheet__row.is-readonly { cursor: default; } .gift-room-delight-sheet__row.is-readonly:hover, .gift-room-delight-sheet__row.is-readonly:focus-visible { border-color: var(--color-line); background: var(--filter-pill-bg, var(--color-sand-dark)); box-shadow: none; } .gift-room-delight-sheet__row > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--color-forest) 12%, var(--popup-bg)); color: var(--color-forest); } .gift-room-delight-sheet__row > .gift-room-delight-sheet__thumb { background-color: color-mix(in srgb, var(--color-forest) 12%, var(--popup-bg)); background-position: center; background-size: cover; color: var(--color-forest); } .gift-room-delight-sheet__row > .gift-room-delight-sheet__thumb.is-empty { background-image: none; } .gift-room-delight-sheet__row strong, .gift-room-delight-sheet__row em, .gift-room-delight-sheet__saved strong, .gift-room-delight-sheet__saved span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-delight-sheet__row strong, .gift-room-delight-sheet__saved strong { color: var(--color-ink); font-family: var(--font-display); font-size: 0.92rem; line-height: 1; } .gift-room-delight-sheet__row em, .gift-room-delight-sheet__saved span, .gift-room-delight-sheet__empty { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-style: normal; font-weight: 650; } .gift-room-delight-sheet__saved, .gift-room-delight-sheet__empty { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--filter-pill-bg, var(--color-sand-dark)); } .gift-room-sheet-input, .gift-room-sheet-textarea { width: 100%; min-height: 46px; margin: 0 0 14px; padding: 0 20px; border: 1.5px solid var(--popup-control-border); border-radius: 999px; background: var(--header-auth-field-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 46px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); outline: 0; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .gift-room-sheet-input { height: 46px; } .gift-room-sheet-field { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 0; margin: 0 0 14px; padding-top: 8px; } .gift-room-sheet-field-label { position: absolute; top: 2px; left: 22px; z-index: 3; display: inline-flex; align-items: center; max-width: calc(100% - 36px); padding: 0 6px; border-radius: 999px; background: var(--header-auth-label-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 14px; overflow: hidden; pointer-events: none; text-overflow: ellipsis; text-transform: none; white-space: nowrap; } .gift-room-sheet-field > .gift-room-sheet-input, .gift-room-sheet-field > .gift-room-sheet-textarea { margin: 0; } .gift-room-planner-sheet .gift-room-sheet-field--date .jp-date-field { width: 100%; max-width: none; display: flex; } .gift-room-planner-sheet .gift-room-sheet-field--date .jp-date-field__input.gift-room-sheet-input { width: 100%; height: 46px; margin: 0; padding-right: 54px !important; } .gift-room-planner-sheet .gift-room-sheet-field--date .jp-date-field__button { right: 6px; top: 50%; width: 34px; height: 34px; background: transparent; color: var(--color-forest); } .gift-room-planner-sheet .gift-room-sheet-field--date .jp-date-field__button:hover, .gift-room-planner-sheet .gift-room-sheet-field--date .jp-date-field__button:focus-visible { background: color-mix(in srgb, var(--color-forest) 10%, transparent); color: var(--color-forest); } .gift-room-planner-sheet .gift-room-sheet-field--date .jp-date-field__icon { width: 17px; height: 17px; } .gift-room-planner-sheet .sect-label { position: relative; z-index: 3; width: max-content; max-width: calc(100% - 36px); display: inline-flex; align-items: center; margin: 0 0 -6px 22px; padding: 0 6px; border-radius: 999px; background: var(--header-auth-label-bg, var(--popup-bg)); color: var(--color-ink); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 14px; overflow: hidden; pointer-events: none; text-overflow: ellipsis; text-transform: none; white-space: nowrap; } .gift-room-sheet-input:focus, .gift-room-sheet-input:focus-visible, .gift-room-sheet-input.is-filled, .gift-room-sheet-textarea:focus, .gift-room-sheet-textarea:focus-visible, .gift-room-sheet-textarea.is-filled { border-color: var(--popup-focus, var(--color-forest)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus, var(--color-forest)) 10%, transparent); outline: 0; } .gift-room-sheet-input:focus, .gift-room-sheet-input:focus-visible, .gift-room-sheet-textarea:focus, .gift-room-sheet-textarea:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus, var(--color-forest)) 14%, transparent); } .gift-room-sheet-input::placeholder, .gift-room-sheet-textarea::placeholder { color: var(--color-ink-muted); opacity: 0.64; } select.gift-room-sheet-input { padding-right: 46px; appearance: none; background-image: url("/assets/gift-room-icons/shared/chevron-down.svg"); background-repeat: no-repeat; background-position: right 18px center; background-size: 15px 15px; } input.gift-room-sheet-input[type="number"] { appearance: textfield; } input.gift-room-sheet-input[type="number"]::-webkit-inner-spin-button, input.gift-room-sheet-input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; } .gift-room-sheet-textarea { min-height: 150px; padding: 14px 18px; border-radius: 22px; line-height: 1.35; resize: vertical; } .gift-room-planner-sheet .gift-room-seat-edit-input.is-filled:not(:focus):not(:focus-visible), .gift-room-planner-sheet .gift-room-seat-edit-textarea.is-filled:not(:focus):not(:focus-visible) { border-color: var(--popup-control-border); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); } .gift-room-modal-overlay, .gift-room-modal-overlay .gift-room-modal { --gift-room-popup-field-bg: var(--header-auth-field-bg, var(--popup-control-bg, var(--popup-bg))); --gift-room-popup-label-bg: var(--header-auth-label-bg, var(--gift-room-popup-field-bg)); --gift-room-popup-field-border: var(--control-border-resting, var(--popup-control-border)); --gift-room-popup-field-focus: var(--popup-focus, var(--color-forest)); } .gift-room-modal-overlay .collection-modal__field:not(.gift-room-cover-editor), .gift-room-modal-overlay .gift-room-field:has(.gift-room-field__input), .gift-room-modal-overlay .gift-room-field:has(.gift-room-field__textarea), .gift-room-planner-sheet .gift-room-seat-edit-field, .gift-room-planner-sheet .gift-room-sheet-field { position: relative; gap: 0; padding-top: 8px; } .gift-room-modal-overlay .collection-modal__field:not(.gift-room-cover-editor) > .collection-modal__label, .gift-room-modal-overlay .collection-modal__field-head .collection-modal__label, .gift-room-modal-overlay .gift-room-field:has(.gift-room-field__input) .gift-room-field__label, .gift-room-modal-overlay .gift-room-field:has(.gift-room-field__textarea) .gift-room-field__label, .gift-room-planner-sheet .gift-room-seat-edit-field > span, .gift-room-planner-sheet .gift-room-sheet-field-label { position: absolute; top: 2px; left: 22px; z-index: 3; display: inline-flex; align-items: center; width: max-content; max-width: calc(100% - 36px); min-height: 14px; margin: 0; padding: 0 6px; border-radius: 999px; background: var(--gift-room-popup-label-bg); color: var(--color-ink); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 14px; overflow: hidden; pointer-events: none; text-overflow: ellipsis; text-transform: none; white-space: nowrap; } .gift-room-modal-overlay .collection-modal__field-head { position: absolute; top: 2px; left: 22px; right: 22px; z-index: 3; margin: 0; pointer-events: none; } .gift-room-modal-overlay .collection-modal__field-head .collection-modal__label { position: static; left: auto; } .gift-room-modal-overlay .collection-modal__field--budget:not(.gift-room-cover-editor) > .collection-modal__label { left: 78px; } .gift-room-modal-overlay .collection-modal__input-shell, .gift-room-modal-overlay .collection-modal__budget-shell, .gift-room-modal-overlay .collection-modal__date-shell, .gift-room-modal-overlay .gift-room-field__input, .gift-room-modal-overlay .gift-room-field__textarea, .gift-room-planner-sheet .gift-room-sheet-input, .gift-room-planner-sheet .gift-room-sheet-textarea, .gift-room-planner-sheet .gift-room-seat-edit-select { border: 1.5px solid var(--gift-room-popup-field-border); background-color: var(--gift-room-popup-field-bg); color: var(--color-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); outline: 2px solid transparent; outline-offset: 0; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .gift-room-modal-overlay .collection-modal__input-shell:focus-within, .gift-room-modal-overlay .collection-modal__input-shell.is-filled, .gift-room-modal-overlay .collection-modal__budget-shell:focus-within, .gift-room-modal-overlay .collection-modal__budget-shell.is-filled, .gift-room-modal-overlay .collection-modal__date-shell:focus-within, .gift-room-modal-overlay .collection-modal__date-shell.is-filled, .gift-room-modal-overlay .collection-modal__date-shell.has-date, .gift-room-modal-overlay .gift-room-field__input:focus, .gift-room-modal-overlay .gift-room-field__input:focus-visible, .gift-room-modal-overlay .gift-room-field__input.is-filled, .gift-room-modal-overlay .gift-room-field__textarea:focus, .gift-room-modal-overlay .gift-room-field__textarea:focus-visible, .gift-room-modal-overlay .gift-room-field__textarea.is-filled, .gift-room-planner-sheet .gift-room-sheet-input:focus, .gift-room-planner-sheet .gift-room-sheet-input:focus-visible, .gift-room-planner-sheet .gift-room-sheet-input.is-filled, .gift-room-planner-sheet .gift-room-sheet-textarea:focus, .gift-room-planner-sheet .gift-room-sheet-textarea:focus-visible, .gift-room-planner-sheet .gift-room-sheet-textarea.is-filled, .gift-room-planner-sheet .gift-room-seat-edit-select:hover, .gift-room-planner-sheet .gift-room-seat-edit-select:focus-visible, .gift-room-planner-sheet .gift-room-seat-edit-field--select.is-open .gift-room-seat-edit-select { border-color: var(--gift-room-popup-field-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gift-room-popup-field-focus) 14%, transparent); outline: none; } .gift-room-planner-sheet .gift-room-sheet-input.gift-room-seat-edit-input.is-filled:not(:focus):not(:focus-visible), .gift-room-planner-sheet .gift-room-sheet-input.gift-room-seat-edit-textarea.is-filled:not(:focus):not(:focus-visible) { border-color: var(--gift-room-popup-field-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gift-room-popup-field-focus) 14%, transparent); outline: none; } .gift-room-modal-overlay .collection-modal__field.is-error .collection-modal__input-shell, .gift-room-modal-overlay .collection-modal__field.is-error .collection-modal__input-shell:focus-within, .gift-room-modal-overlay .collection-modal__field.is-error .collection-modal__input-shell.is-filled { border-color: var(--color-alert-red); background-color: var(--gift-room-popup-field-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-alert-red) 11%, transparent); outline-color: transparent; } .gift-room-caterer-summary { display: grid; gap: 16px; } .gift-room-caterer-summary__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .gift-room-caterer-summary__head strong { color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1; } .gift-room-caterer-summary__head span { color: var(--color-ink-soft); font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 760; line-height: 1; } .gift-room-caterer-meals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .gift-room-caterer-meal { min-width: 0; min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border: 0; border-top: 1px solid var(--color-line); border-radius: 0; background: transparent; color: var(--color-ink); font-family: var(--font-heading); text-align: left; cursor: pointer; transition: color 0.16s ease, border-color 0.16s ease; } .gift-room-caterer-meal:hover, .gift-room-caterer-meal:focus-visible { border-color: color-mix(in srgb, var(--color-ink) 28%, var(--color-line)); color: var(--color-ink); outline: 0; } .gift-room-caterer-meal.is-active { border-color: var(--color-ink); } .gift-room-meal-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease; } .gift-room-meal-icon::before { content: ""; width: 18px; height: 18px; display: block; background: currentColor; -webkit-mask: var(--gift-room-meal-icon-url) center / contain no-repeat; mask: var(--gift-room-meal-icon-url) center / contain no-repeat; } .gift-room-caterer-meal.is-active .gift-room-meal-icon { background: var(--color-ink); color: var(--popup-bg); } .gift-room-caterer-meal:hover .gift-room-meal-icon, .gift-room-caterer-meal:focus-visible .gift-room-meal-icon { transform: scale(1.04); } .gift-room-caterer-meal span:not(.gift-room-meal-icon) { min-width: 0; display: grid; gap: 2px; } .gift-room-caterer-meal strong { min-width: 0; overflow: hidden; color: var(--color-ink); font-family: var(--font-display); font-size: 0.98rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .gift-room-caterer-meal small { color: var(--color-ink-soft); font-size: 0.74rem; font-weight: 680; line-height: 1.1; } .gift-room-caterer-meal b { color: var(--color-ink); font-family: var(--font-display); font-size: 1.05rem; line-height: 1; } .gift-room-caterer-detail { display: grid; gap: 10px; padding-top: 4px; } .gift-room-caterer-detail > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 4px; } .gift-room-caterer-detail > header strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.05rem; line-height: 1; } .gift-room-caterer-detail > header span, .gift-room-caterer-empty { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.82rem; font-weight: 650; line-height: 1.3; } .gift-room-caterer-guests { display: grid; gap: 8px; } .gift-room-caterer-guest { min-width: 0; display: grid; grid-template-columns: auto minmax(170px, 1fr) minmax(138px, 0.7fr) minmax(176px, 0.9fr) minmax(82px, 0.35fr) minmax(96px, auto); align-items: end; gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-line); } .gift-room-caterer-guest__avatar { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; align-self: center; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-display); font-size: 0.76rem; line-height: 1; } .gift-room-caterer-guest__field { min-width: 0; display: grid; gap: 0; } .gift-room-caterer-guest__field .gift-room-sheet-field-label { color: var(--color-ink); } .gift-room-caterer-guest__field .gift-room-sheet-input { height: 46px; min-height: 46px; margin: 0; padding-inline: 18px; border-color: var(--gift-room-popup-field-border); background-color: var(--gift-room-popup-field-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); line-height: 1.2; } .gift-room-caterer-guest__field .gift-room-sheet-input.is-filled:not(:focus):not(:focus-visible) { border-color: var(--gift-room-popup-field-border); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent); } .gift-room-caterer-guest__field .gift-room-sheet-input:focus, .gift-room-caterer-guest__field .gift-room-sheet-input:focus-visible { border-color: var(--gift-room-popup-field-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gift-room-popup-field-focus) 14%, transparent); outline: none; } .gift-room-caterer-guest__field select.gift-room-sheet-input { padding-right: 30px; appearance: none; background-image: url("/assets/admin-icons/select-chevron.svg"); background-position: right 12px center; background-repeat: no-repeat; background-size: 14px; } .gift-room-caterer-guest__save { min-height: 46px; height: 46px; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; align-self: start; margin-top: 8px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-display); font-size: 0.9rem; font-weight: 760; line-height: 1; cursor: pointer; position: relative; isolation: isolate; overflow: visible; transform: none; transition: none; } .gift-room-caterer-guest__save::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .gift-room-caterer-guest__save:hover, .gift-room-caterer-guest__save:focus-visible { background: transparent; box-shadow: none; outline: 0; transform: none; } .gift-room-caterer-guest__save:hover::before, .gift-room-caterer-guest__save:focus-visible::before { transform: scale(1.055); } .gift-room-caterer-guest__save:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 26%, transparent); outline-offset: 2px; } .gift-room-planner-sheet:has([data-find-seat-panel]) { width: min(640px, calc(100vw - 120px)); max-width: min(640px, calc(100vw - 120px)); } .gift-room-find-seat-panel { display: grid; gap: 16px; } .gift-room-planner-sheet .gift-room-find-seat-search { min-height: 52px; height: 52px; max-height: 52px; border-color: color-mix(in srgb, var(--color-ink) 16%, transparent); background: var(--popup-bg); box-shadow: none; } .gift-room-planner-sheet .gift-room-find-seat-search:focus-within { border-color: var(--color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 14%, transparent); } .gift-room-planner-sheet .gift-room-find-seat-search .gift-room-dashboard-search__icon { top: 4px; bottom: 4px; left: 4px; width: 38px; min-width: 38px; height: auto; transform: none; } .gift-room-planner-sheet .gift-room-find-seat-search input { padding-left: 58px; font-size: 14px; } .gift-room-find-seat-results { display: grid; gap: 8px; } .gift-room-find-seat-results > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 3px; } .gift-room-find-seat-results > header strong { color: var(--color-ink); font-family: var(--font-display); font-size: 1.08rem; line-height: 1; } .gift-room-find-seat-results > header span { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 720; line-height: 1.2; } .gift-room-find-seat-list { display: grid; gap: 0; } .gift-room-find-seat-row { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-line); } .gift-room-find-seat-row__avatar { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); background: color-mix(in srgb, var(--color-ink) 8%, var(--popup-bg)); color: var(--color-ink-soft); font-family: var(--font-display); font-size: 0.8rem; line-height: 1; } .gift-room-find-seat-row__avatar.is-seated { border-color: color-mix(in srgb, var(--color-forest) 34%, var(--color-line)); background: var(--color-forest); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-meal.meal-chicken { background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 74%, var(--color-sand)); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-meal.meal-beef { background: color-mix(in srgb, var(--color-ink) 74%, var(--color-cream)); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-meal.meal-fish { background: color-mix(in srgb, var(--color-forest) 45%, var(--color-cream)); color: var(--color-ink); } .gift-room-find-seat-row__avatar.mode-meal.meal-veg { background: var(--color-forest); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-meal.meal-vegan { background: color-mix(in srgb, var(--color-forest) 72%, var(--color-sand)); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-meal.meal-gluten-free { background: color-mix(in srgb, var(--color-warn) 42%, var(--color-cream)); color: var(--color-ink); } .gift-room-find-seat-row__avatar.mode-meal.meal-kids { background: color-mix(in srgb, var(--gr-accent, var(--color-forest)) 58%, var(--color-cream)); color: var(--color-ink); } .gift-room-find-seat-row__avatar.mode-side.side-bride { background: var(--color-forest); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-side.side-groom { background: var(--gr-accent, var(--color-forest)); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-side.side-both { background: var(--color-ink); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-grp.group-diaz, .gift-room-find-seat-row__avatar.mode-grp.group-koch, .gift-room-find-seat-row__avatar.mode-grp.group-hahn, .gift-room-find-seat-row__avatar.mode-grp.group-frank { background: var(--color-forest); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-grp.group-lang, .gift-room-find-seat-row__avatar.mode-grp.group-lutz, .gift-room-find-seat-row__avatar.mode-grp.group-bauer, .gift-room-find-seat-row__avatar.mode-grp.group-wolf { background: var(--gr-accent, var(--color-forest)); color: var(--color-cream); } .gift-room-find-seat-row__avatar.mode-grp.group-voss, .gift-room-find-seat-row__avatar.mode-grp.group-stein, .gift-room-find-seat-row__avatar.mode-grp.group-weiss, .gift-room-find-seat-row__avatar.mode-grp.group-marx { background: color-mix(in srgb, var(--color-ink) 72%, var(--color-cream)); color: var(--color-cream); } .gift-room-find-seat-row__avatar.is-waiting { border-style: dashed; background: var(--popup-bg); color: var(--color-ink-soft); } .gift-room-find-seat-row__avatar > span:first-child { position: relative; z-index: 1; } .gift-room-find-seat-row__meal-icon { position: absolute; right: -4px; bottom: -4px; z-index: 2; width: 16px; height: 16px; color: var(--color-ink); } .gift-room-find-seat-row__meal-icon::before { width: 12px; height: 12px; } .gift-room-find-seat-row > div { min-width: 0; display: grid; gap: 3px; } .gift-room-find-seat-row > div strong, .gift-room-find-seat-row > div span, .gift-room-find-seat-row > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-room-find-seat-row > div strong { color: var(--color-ink); font-family: var(--font-display); font-size: 0.98rem; line-height: 1.05; } .gift-room-find-seat-row > div span, .gift-room-find-seat-row > small { color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 680; line-height: 1.15; } .gift-room-find-seat-row button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; position: relative; isolation: isolate; overflow: visible; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-display); font-size: 0.82rem; font-weight: 760; line-height: 1; cursor: pointer; transition: none; white-space: nowrap; } .gift-room-find-seat-row button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-ink); transform: scale(1); transform-origin: center; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } .gift-room-find-seat-row button:hover, .gift-room-find-seat-row button:focus-visible { background: transparent; box-shadow: none; outline: 0; transform: none; } .gift-room-find-seat-row button:hover::before, .gift-room-find-seat-row button:focus-visible::before { transform: scale(1.055); } .gift-room-find-seat-row button:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 26%, transparent); outline-offset: 2px; } .gift-room-find-seat-empty { margin: 0; padding: 13px 0 0; border-top: 1px solid var(--color-line); color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 0.88rem; font-weight: 650; } @media (max-width: 720px) { .gift-room-planner-sheet-overlay { --gift-room-basic-modal-mobile-offset: calc(env(safe-area-inset-top, 0px) + clamp(72px, 11dvh, 118px)); align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; min-height: 0; padding: var(--gift-room-basic-modal-mobile-offset) 0 0; overflow: hidden; } .gift-room-planner-sheet { width: 100%; max-width: none; height: calc(100vh - var(--gift-room-basic-modal-mobile-offset)); height: calc(100dvh - var(--gift-room-basic-modal-mobile-offset)); max-height: none; min-height: 0; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; border-width: 1px 0 0; overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .gift-room-planner-sheet-overlay.is-open .gift-room-planner-sheet { transform: translateY(var(--gift-room-planner-sheet-drag-y, 0px)); } .gift-room-planner-sheet-overlay.is-closing .gift-room-planner-sheet, .gift-room-planner-sheet-overlay.is-sheet-closing .gift-room-planner-sheet { transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); } .gift-room-planner-sheet-overlay.is-sheet-dragging .gift-room-planner-sheet { transition: none; } .gift-room-planner-sheet:has([data-auto-seat-sheet]) { height: auto; max-height: calc(100vh - var(--gift-room-basic-modal-mobile-offset)); max-height: calc(100dvh - var(--gift-room-basic-modal-mobile-offset)); } .gift-room-planner-sheet:has([data-auto-seat-sheet]) .gift-room-planner-sheet__head { display: none; } .gift-room-planner-sheet .gift-room-modal__sheet-grip { flex: 0 0 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--popup-bg); cursor: grab; touch-action: none; user-select: none; } .gift-room-planner-sheet .gift-room-modal__sheet-grip span { width: var(--popup-sheet-grip-width, 48px); height: var(--popup-sheet-grip-thickness, 5px); border-radius: 999px; background: var(--popup-sheet-grip-color); } .gift-room-planner-sheet__head { flex: 0 0 auto; padding: 0 28px 12px; } .gift-room-planner-sheet__body { flex: 1 1 auto; min-height: 0; padding: 8px 28px 28px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; } .gift-room-planner-sheet:has([data-auto-seat-sheet]) .gift-room-planner-sheet__body { flex: 0 1 auto; padding-top: 4px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .gift-room-planner-sheet .gift-room-seat-auto--sheet { gap: 13px; } .gift-room-planner-sheet .gift-room-seat-auto--sheet .gift-room-seat-auto__close { display: none; } .gift-room-planner-sheet .gift-room-seat-auto--sheet footer { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; } .gift-room-planner-sheet .gift-room-seat-auto--sheet footer:has([data-action="auto-apply"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gift-room-planner-sheet .gift-room-seat-auto--sheet .gift-room-seat-auto__action { width: 100%; min-width: 0; grid-column: auto !important; justify-self: stretch; min-height: 44px; padding-inline: 8px; font-size: 0.78rem; } .gift-room-planner-sheet .gift-room-seat-auto--sheet .gift-room-seat-auto__action--primary { grid-column: 1 / -1 !important; min-height: 56px; margin-top: 4px; font-size: 0.88rem; } .gift-room-planner-sheet__body::-webkit-scrollbar { display: none; } .gift-room-planner-sheet:has([data-caterer-summary]) { width: 100%; max-width: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .gift-room-planner-sheet:has([data-caterer-summary])::-webkit-scrollbar { display: none; } .gift-room-planner-sheet:has([data-caterer-summary]) .gift-room-modal__sheet-grip { position: sticky; top: 0; z-index: 5; } .gift-room-planner-sheet:has([data-caterer-summary]) .gift-room-planner-sheet__head, .gift-room-planner-sheet:has([data-caterer-summary]) .gift-room-planner-sheet__body { flex: 0 0 auto; } .gift-room-planner-sheet:has([data-caterer-summary]) .gift-room-planner-sheet__body { min-height: auto; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); overflow: visible; touch-action: pan-y; } .gift-room-planner-sheet--vendor-versions .gift-room-planner-sheet__scroll { flex: 1 1 auto; max-height: none; min-height: 0; } .gift-room-planner-sheet--vendor-versions .gift-room-planner-sheet__head, .gift-room-planner-sheet--vendor-versions .gift-room-planner-sheet__body { flex: 0 0 auto; } .gift-room-planner-sheet--vendor-versions .gift-room-planner-sheet__body { max-height: none; overflow: visible; padding-right: 28px; } .gift-room-planner-sheet__close { display: none !important; } .gift-room-vendor-versions__summary { grid-template-columns: 1fr; } .gift-room-vendor-version-card__head { grid-template-columns: auto minmax(0, 1fr); } .gift-room-vendor-version-card__actions { grid-column: 1 / -1; justify-content: stretch; } .gift-room-vendor-version-card__actions .gift-room-proto-row__action { flex: 1 1 132px; width: 100%; } .gift-room-vendor-versions__actions .gift-room-proto-row__action { width: 100%; } .gift-room-seat-edit-form { grid-template-columns: 1fr; gap: 11px; } .gift-room-vendor-edit-form { grid-template-columns: 1fr; gap: 11px; } .gift-room-seat-table-shape-options { flex-direction: row; } .gift-room-seat-table-shape-option { flex-basis: 136px; width: auto; } .gift-room-seat-edit-card { padding: 0 0 2px; border-radius: 0; } .gift-room-seat-edit-card > span { width: 42px; height: 42px; } .gift-room-seat-edit-actions { display: grid; grid-template-columns: 1fr; } .gift-room-seat-edit-actions .gift-room-sheet-action { width: 100%; } .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--primary { order: 1; margin-left: 0; } .gift-room-planner-sheet .gift-room-seat-edit-actions .gift-room-sheet-action--cancel { order: 2; } .gift-room-seat-edit-menu { gap: 2px; max-height: var(--seat-edit-menu-max, 240px); padding: 6px; border-radius: 20px; } .gift-room-seat-edit-field--select.is-open .gift-room-seat-edit-menu { max-height: var(--seat-edit-menu-max, 240px); } .gift-room-seat-edit-option { min-height: 36px; padding-inline: 12px; font-size: 0.84rem; } .gift-room-caterer-meals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; } .gift-room-caterer-detail > header { align-items: start; flex-direction: column; } .gift-room-caterer-guest { grid-template-columns: 38px minmax(0, 1fr) minmax(72px, 82px); align-items: end; gap: 8px; padding: 12px 0 14px; } .gift-room-caterer-guest__avatar { grid-column: 1; grid-row: 1; width: 38px; height: 38px; } .gift-room-caterer-guest__field--name { grid-column: 2 / -1; grid-row: 1; } .gift-room-caterer-guest__field:not(.gift-room-caterer-guest__field--name):not(.gift-room-caterer-guest__field--diet):not(.gift-room-caterer-guest__field--kids) { grid-column: 2; grid-row: 2; } .gift-room-caterer-guest__field--kids { grid-column: 3; grid-row: 2; } .gift-room-caterer-guest__field--diet { grid-column: 2 / -1; grid-row: 3; } .gift-room-caterer-guest__field .gift-room-sheet-field-label { left: 16px; } .gift-room-caterer-guest__field .gift-room-sheet-input { height: 44px; min-height: 44px; padding-inline: 14px; font-size: 16px; } .gift-room-caterer-guest__field--kids .gift-room-sheet-input { padding-inline: 10px; text-align: center; } .gift-room-caterer-guest__field select.gift-room-sheet-input { padding-right: 32px; background-position: right 11px center; } .gift-room-caterer-guest__save { grid-column: 2 / -1; grid-row: 4; width: 100%; min-width: 0; height: 42px; min-height: 42px; align-self: center; margin-top: 0; padding: 0 14px; font-size: 0.82rem; } } @media (max-width: 820px) { .gift-room-tab-content > .gift-room-planner[data-planner] { padding: 18px 0; } .gift-room-wedding-seating, .gift-room-scenario-pane { width: 100%; min-width: 0; } .gift-room-proto-panel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; } .gift-room-proto-panel-head h3 { font-size: clamp(1.55rem, 6vw, 2rem); } .gift-room-seat-titleline { gap: 8px; } .gift-room-seat-headside { min-width: 0; justify-items: end; align-self: center; } .gift-room-seat-print-button { min-height: 42px; padding-inline: 15px; gap: 7px; white-space: nowrap; } .gift-room-seat-warning { min-height: 32px; padding-inline: 10px; font-size: 0.72rem; } .gift-room-proto-actions, .gift-room-seat-controls, .gift-room-seat-footer { justify-content: flex-start; } .gift-room-seat-toolbar { width: 100%; align-items: stretch; flex-direction: column; gap: 10px; } .gift-room-seat-stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .gift-room-seat-stats span { min-width: 0; min-height: 38px; justify-content: center; gap: 5px; padding-inline: 8px; font-size: 0.72rem; text-align: center; white-space: nowrap; } .gift-room-seat-stats strong { font-size: 0.96rem; } .gift-room-seat-controls { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .gift-room-seat-modebar { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; } .gift-room-seat-highlight { width: 100%; } .gift-room-seat-highlight__control { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; } .gift-room-seat-highlight .gift-room-seat-seg:not(.gift-room-seat-seg--dim) { width: 100%; } .gift-room-seat-highlight .gift-room-seat-seg:not(.gift-room-seat-seg--dim) button { flex: 1 1 0; min-width: 0; } .gift-room-seat-actionbar { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; gap: 8px; } .gift-room-seat-actionbar .gift-room-seat-toolbar-button { width: 100%; min-width: 0; min-height: 44px; justify-content: center; padding-inline: 10px; font-size: 0.78rem; white-space: nowrap; } .gift-room-seat-venuebar { width: 100%; grid-template-columns: 1fr; gap: 10px; } .gift-room-seat-workbar { width: 100%; grid-template-columns: 1fr; align-items: stretch; gap: 10px; } .gift-room-seat-workbar .gift-room-seat-footer { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 8px; flex-wrap: nowrap; } .gift-room-seat-workbar .gift-room-seat-footer .gift-room-proto-row__action { width: 100%; min-width: 0; min-height: 44px; justify-content: center; padding-inline: 12px; font-size: 0.8rem; white-space: nowrap; } .gift-room-seat-halls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; justify-content: stretch; gap: 8px; } .gift-room-seat-halls .gift-room-seat-seg--hall { order: 1; grid-column: 1 / -1; width: 100%; } .gift-room-seat-hall-undo { order: 2; } .gift-room-seat-hall-add { order: 3; } .gift-room-proto-row__action.gift-room-seat-hall-undo, .gift-room-proto-row__action.gift-room-seat-hall-add { width: 100%; min-height: 44px; justify-content: center; padding-inline: 12px; font-size: 0.8rem; white-space: nowrap; } .gift-room-seat-pool--placement { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; } .gift-room-seat-pool--placement .gift-room-seat-pool__head { flex-wrap: nowrap; white-space: nowrap; } .gift-room-seat-pool--placement .gift-room-seat-pool__head strong { font-size: 0.98rem; } .gift-room-seat-pool--placement .gift-room-seat-pool__head span { font-size: 0.72rem; } .gift-room-seat-pool--placement .gift-room-seat-chip { min-height: 34px; gap: 7px; padding: 3px 12px 3px 4px; font-size: 0.78rem; } .gift-room-seat-pool--placement .gift-room-seat-chip span { width: 26px; height: 26px; font-size: 0.64rem; } .gift-room-seat-shapes.is-open { grid-template-columns: minmax(0, 1fr); } .gift-room-seat-shape-bar { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 22px; overflow: visible; } .gift-room-seat-shape-bar button { width: 100%; flex-basis: auto; min-height: 44px; justify-content: flex-start; padding-inline: 12px; } .gift-room-seat-board { --seat-canvas-w: 1320px; --seat-canvas-h: 900px; } .gift-room-seat-stage { height: clamp(480px, var(--seat-stage-user-height, 560px), 2200px); min-height: 480px; } .gift-room-seat-canvas { padding: 24px; } .gift-room-seat-canvas-tools { top: 14px; right: 14px; gap: 7px; } .gift-room-seat-canvas-control { width: 40px; height: 40px; min-width: 40px; } .gift-room-seat-canvas-control--pill { padding: 0; } .gift-room-seat-canvas-control__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .gift-room-seat-stage-resize { bottom: 6px; } .gift-room-invite-grid, .gift-room-overview-layout { grid-template-columns: 1fr; } .gift-room-suite-preview__card { grid-template-columns: 1fr; } .gift-room-product-grid, .gift-room-saved-folders-grid, .gift-room-reg-grid { grid-template-columns: 1fr; } .gift-room-saved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .gift-room-saved-grid--products.gr-ideas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .gift-room-wedding-saved, .gift-room-scenario-saved { padding: 0; border: 0; border-radius: 0; background: transparent; } .gift-room-saved-viewbar { align-items: stretch; flex-direction: column; } .gift-room-saved-viewbar__tabs, .gift-room-saved-selection-count { width: 100%; } .gift-room-saved-selection-count.is-idle { display: inline-flex; visibility: hidden; pointer-events: none; } .gift-room-saved-product-card__media { min-height: 132px; border-radius: 16px 16px 0 0; } .gift-room-saved-product-card { border-radius: 16px; } .gift-room-saved-product-card::after { inset: -4px; border-width: 2px; border-radius: 20px; } .gift-room-saved-product-card__check { top: 8px; right: 8px; width: 30px; height: 30px; } .gift-room-saved-product-card__remove { top: 8px; left: 8px; width: 30px; height: 30px; } .gift-room-saved-product-card__remove > i { font-size: 13px; } .gift-room-saved-product-card__body { gap: 6px; padding: 12px; } .gift-room-saved-product-card__body strong { font-size: 0.74rem; } .gift-room-saved-product-card__body > span { font-size: 0.72rem; } .gift-room-saved-product-card__meta { gap: 6px 0; } .gift-room-saved-product-card__service { height: 18px; } .gift-room-saved-service-badge { max-width: 110px; } .gift-room-saved-service-badge--digital, .gift-room-saved-service-badge--free-download { width: 102px; } .gift-room-saved-service-badge--shipping { width: 98px; } .gift-room-saved-product-card__store-icon { width: 21px; height: 21px; flex-basis: 21px; } .gift-room-saved-product-card__store-notch { width: 7px; height: 10px; flex-basis: 7px; } .gift-room-saved-product-card__store { max-width: 105px; height: 24px; padding-inline: 9px; font-size: 0.72rem; } .gift-room-wedding-invites .gift-room-product-grid { grid-template-columns: 1fr; } .gift-room-vendor-row { grid-template-columns: auto minmax(0, 1fr) auto; } .gift-room-vendor-row__price, .gift-room-vendor-row .gift-room-status-pill { grid-column: 2 / 4; justify-self: start; } .gift-room-vendor-row .gift-room-proto-row__action { grid-column: 1 / -1; justify-self: start; } .gift-room-vendor-row__remove { grid-column: 3; grid-row: 1; justify-self: end; } .gift-room-planner__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gift-room-proto-row { grid-template-columns: auto minmax(0, 1fr) auto; } .gift-room-proto-row__action { grid-column: 2; justify-self: start; } .gift-room-look-grid { grid-template-columns: 1fr; } .gift-room-looks-workspace { padding: 18px; border-radius: 22px; } .gift-room-looks-workspace .gift-room-proto-panel-head { align-items: stretch; } .gift-room-look-board-detail__head { gap: 12px; } .gift-room-look-board-detail__title-row { align-items: flex-start; flex-wrap: wrap; gap: 9px 12px; } .gift-room-look-board-detail__back { min-height: 42px; padding-inline: 18px; } .gift-room-look-board-products.gift-room-saved-grid--products, .gift-room-look-board-products.gift-room-saved-grid--products.gr-ideas-grid { grid-template-columns: 1fr; gap: 14px; padding: 2px; margin: -2px; } .gift-room-look-board-product-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) 38px; } .gift-room-look-new-board.gift-room-proto-row__action { width: 100%; min-height: 50px; } .gift-room-looks-layout { grid-template-columns: 1fr; } .gift-room-look-grid--boards { grid-template-columns: 1fr; } .gift-room-look-grid--boards .gift-room-look-board-card { min-height: 0; } .gift-room-kanban, .gift-room-nowplaying { grid-template-columns: 1fr; } .gift-room-nowplaying button { justify-self: start; } .gift-room-gifts-toolbar { grid-template-columns: 1fr; } .gift-room-gifts-toolbar .gift-room-pills { justify-content: flex-start; justify-self: stretch; flex: 1 1 auto; width: 100%; max-width: 100%; } .gift-room-gifts-grid, .gift-room-crew-grid, .gift-room-seating-grid, .gift-room-saved-ideas-grid { grid-template-columns: 1fr; } .gift-room-overview-card__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gift-room-overview-card { grid-template-columns: 1fr; gap: 12px; padding: 12px; border-radius: 20px; } .gift-room-overview-card__score { --overview-edge-width: 58px; width: 100%; min-height: 64px; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "percent next" "label next"; gap: 3px 10px; padding: 9px 14px; border-radius: 18px; justify-self: center; } .gift-room-overview-card__score strong { font-size: 1.72rem; } .gift-room-overview-card__score span { font-size: 0.6rem; } .gift-room-overview-card__score b { display: none; } .gift-room-overview-card__score em { max-width: 7.6rem; padding: 5px 8px; font-size: 0.62rem; } .gift-room-overview-step { min-height: 58px; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "icon label" "icon count"; gap: 2px 8px; padding: 8px; border-radius: 16px; } .gift-room-overview-step__icon { grid-area: icon; width: 30px; height: 30px; border-radius: 12px; } .gift-room-overview-step__icon-glyph { width: 16px; height: 16px; font-size: 16px; } .gift-room-overview-step strong { grid-area: label; min-width: 0; overflow: hidden; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; } .gift-room-overview-step em { grid-area: count; min-width: 0; justify-self: start; padding: 4px 8px; font-size: 0.66rem; } .gift-room-day-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; } .gift-room-day-row__time { grid-column: 2; } .gift-room-day-row .gift-room-planner__inline--title { grid-column: 2; } .gift-room-day-row__date-actions { grid-column: 3; grid-row: 1 / span 2; align-self: center; } } @media (max-width: 560px) { .gift-room-tab-content > .gift-room-planner[data-planner] { padding: 14px 0; } .gift-room-saved-grid--products.gr-ideas-grid { grid-template-columns: 1fr; } .gift-room-wedding-pane { gap: 12px; } .gift-room-proto-panel-head { width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .gift-room-proto-panel-head h3 { font-size: clamp(1.42rem, 8vw, 1.82rem); } .gift-room-seat-titleline { align-items: center; } .gift-room-seat-print-button { min-height: 38px; padding-inline: 12px; font-size: 0.76rem; } .gift-room-seat-stats { gap: 6px; } .gift-room-seat-stats span { min-height: 36px; gap: 4px; padding-inline: 6px; font-size: 0.66rem; } .gift-room-seat-stats strong { font-size: 0.9rem; } .gift-room-seat-modebar { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; } .gift-room-seat-toolbar-label { display: none; } .gift-room-seat-highlight__control { grid-template-columns: minmax(0, 1fr); } .gift-room-seat-seg { min-height: 42px; padding: 4px; gap: 4px; } .gift-room-seat-seg button { min-height: 32px; padding-inline: 10px; font-size: 0.72rem; } .gift-room-seat-seg--dim button { min-width: 48px; } .gift-room-seat-actionbar { gap: 7px; } .gift-room-seat-actionbar .gift-room-seat-toolbar-button { min-height: 42px; gap: 6px; padding-inline: 8px; font-size: 0.72rem; } .gift-room-seat-actionbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gift-room-wedding-seating .gift-room-seat-search { min-height: 48px; height: 48px; max-height: 48px; } .gift-room-seat-hall-summary, .gift-room-seat-seg--hall { width: 100%; } .gift-room-seat-seg.gift-room-seat-seg--hall { justify-content: flex-start; min-height: 46px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .gift-room-seat-seg.gift-room-seat-seg--hall::-webkit-scrollbar { display: none; } .gift-room-seat-seg.gift-room-seat-seg--hall button { min-width: 0; flex: 0 0 112px; min-height: 36px; padding-inline: 12px; } .gift-room-seat-seg--hall button span { font-size: 0.76rem; } .gift-room-seat-seg--hall button small { font-size: 0.62rem; } .gift-room-seat-warning--inline { width: auto; } .gift-room-seat-pool--placement { grid-template-columns: max-content minmax(0, 1fr); gap: 7px; } .gift-room-seat-pool--placement .gift-room-seat-pool__chips { flex-basis: 0; } .gift-room-seat-workbar .gift-room-seat-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gift-room-seat-workbar .gift-room-seat-footer .gift-room-proto-row__action { min-height: 42px; gap: 7px; padding-inline: 10px; font-size: 0.72rem; } .gift-room-seat-board { --seat-canvas-w: 1120px; --seat-canvas-h: 760px; } .gift-room-seat-stage { height: auto; min-height: 0; border-radius: 20px; cursor: default; overflow: visible; touch-action: pan-y; } .gift-room-seat-canvas { position: relative; inset: auto; width: var(--seat-canvas-w); min-height: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: flex-start; gap: 18px; padding: 20px 10px 70px; transform: none !important; transform-origin: center top; } .gift-room-seat-canvas.has-fixed-layout { display: grid; padding: 20px 10px 70px; } .gift-room-seat-canvas.has-fixed-layout .gift-room-seat-table[data-seat-fixed="1"] { position: relative; left: auto; top: auto; } .gift-room-seat-canvas-tools { position: sticky; right: auto; bottom: 12px; top: auto; width: max-content; max-width: calc(100% - 20px); justify-content: center; gap: 6px; margin: -64px auto 12px; padding: 6px; border: 1px solid color-mix(in srgb, var(--color-line) 72%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--color-cream) 78%, transparent); backdrop-filter: blur(12px); display: flex; } .gift-room-seat-canvas-control { width: 36px; height: 36px; min-width: 36px; opacity: 1; } .gift-room-seat-canvas-control[data-action^="seat-zoom"] { display: none; } .gift-room-seat-bg-grid { grid-template-columns: 1fr; } .gift-room-seat-bg-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gift-room-seat-bg-upload { align-items: center; } .gift-room-seat-bg-preview { align-items: stretch; flex-wrap: wrap; } .gift-room-seat-bg-preview__actions { width: 100%; justify-content: flex-end; } .gift-room-seat-table { width: 100%; max-width: 300px; justify-self: center; flex: 0 0 auto; gap: 7px; transform: none !important; } .gift-room-seat-table--sweet { max-width: 300px; } .gift-room-seat-table__head { gap: 6px; } .gift-room-seat-table__legend { min-height: 16px; gap: 6px; font-size: 0.68rem; } .gift-room-seat-table__controls { min-height: 40px; gap: 4px; padding: 4px; } .gift-room-seat-table__controls button { min-width: 31px; width: 31px; height: 31px; } .gift-room-seat-table__controls-meta { min-width: 34px; height: 31px; padding-inline: 8px; font-size: 0.8rem; } .gift-room-seat-table__control-icon { width: 15px; height: 15px; } .gift-room-seat-stage-resize { display: none; } .gift-room-seat-table--sweet { flex-basis: 100%; } .gift-room-seat-pool, .gift-room-overview-checklist, .gift-room-overview-delight { padding: 14px; border-radius: 16px; } .gift-room-guest-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .gift-room-guest-row .gift-room-status-pill, .gift-room-guest-row__actions { grid-column: 2; justify-self: start; } .gift-room-suite-step { flex-basis: 100%; } .gift-room-invite-offers__cta { margin-left: 0; } .gift-room-invite-upload { min-height: 220px; } .gift-room-vendor-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px; } .gift-room-vendor-row__price, .gift-room-vendor-row .gift-room-status-pill, .gift-room-vendor-row .gift-room-proto-action { grid-column: 1 / -1; } .gift-room-vendor-row__remove { grid-column: 3; grid-row: 1; justify-self: end; } .gift-room-wedding-chat-composer { grid-template-columns: 1fr; } .gift-room-reg-filter-count { width: 100%; margin-left: 0; } .gift-room-wedding-chat-msg { max-width: 94%; } .gift-room-wedding-chat-composer { display: grid; } .gift-room-wedding-chat-attach, .gift-room-wedding-chat-composer .gift-room-proto-row__action { width: 100%; border-radius: 999px; } .gift-room-caterer-guest { grid-template-columns: 38px minmax(0, 1fr) minmax(64px, 76px); } .gift-room-caterer-guest__save { width: 100%; } .gift-room-planner-sheet:has([data-find-seat-panel]) { width: 100%; max-width: none; } .gift-room-find-seat-results > header { align-items: start; flex-direction: column; gap: 4px; } .gift-room-find-seat-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .gift-room-find-seat-row button, .gift-room-find-seat-row small { grid-column: 1 / -1; justify-self: stretch; text-align: center; } .gift-room-planner, .gift-room-items-toolbar { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .gift-room-gifts-stage { grid-template-columns: 1fr; padding: 13px; } .gift-room-gifts-stage__score { min-width: 0; min-height: 74px; } .gift-room-planner__metrics { gap: 8px; } .gift-room-gifts-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gift-room-planner__metric { padding: 10px 11px; border-radius: 14px; } .gift-room-proto-row { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 11px; } .gift-room-proto-row__body, .gift-room-proto-row__action { grid-column: 1 / -1; } .gift-room-proto-row__delete { position: absolute; top: 8px; right: 8px; } .gift-room-proto-row__main { padding-right: 34px; } .gift-room-proto-row__main, .gift-room-proto-row__meta, .gift-room-planner__toolbar { align-items: stretch; flex-direction: column; } .gift-room-proto-field, .gift-room-proto-field--wide, .gift-room-planner__search, .gift-room-planner__filters, .gift-room-planner__filter, .gift-room-proto-row__action { width: 100%; } .gift-room-planner__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .gift-room-reg-filters.gift-room-planner__filters { width: 100%; display: flex; grid-template-columns: none; gap: 8px; padding: 0 36px 2px 0; border: 0; border-radius: 0; background: transparent; overflow-x: auto; overflow-y: visible; scroll-padding-inline: 0 36px; mask-image: linear-gradient(to right, black calc(100% - 34px), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 34px), transparent); } .gift-room-reg-filters .gift-room-planner__filter { width: auto; min-width: 0; flex: 0 0 min(44%, 168px); border: 1px solid var(--color-line); background: var(--popup-bg); } .gift-room-day-list { padding-left: 32px; } .gift-room-day-row::before { left: -31px; } .gift-room-day-row { grid-template-columns: auto minmax(0, 1fr); gap: 8px; } .gift-room-day-row .gift-room-planner__inline--title, .gift-room-day-row__date-actions, .gift-room-day-row__time { grid-column: 2; } .gift-room-day-row .gift-room-planner__inline--title, .gift-room-day-row__date-actions { grid-column: 1 / -1; } .gift-room-day-row__date-actions { justify-self: center; gap: 6px; } .gift-room-day-row .gift-room-planner__inline--title { display: block; width: 100% !important; min-width: 0; inline-size: 100% !important; max-inline-size: 100%; padding-inline: 0; justify-self: stretch; text-align: center; font-size: 0.88rem; } .gift-room-wedding-dayof .gift-room-day-row .gift-room-day-date-shell.collection-modal__date-shell { width: min(100%, 230px); max-width: 100%; flex-basis: auto; } .gift-room-day-row .gift-room-proto-row__delete { position: static; } .gift-room-chat__bubble-row { max-width: 94%; } .gift-room-crew-card { grid-template-columns: auto minmax(0, 1fr); } .gift-room-crew-card .gift-room-status-pill, .gift-room-crew-card__remove { grid-column: 2; justify-self: start; } } @media (max-width: 360px) { .gift-room-caterer-meals { grid-template-columns: 1fr; } } @media (max-width: 720px) { .gift-room-rsvp-person__avatar.gift-room-avatar { width: 44px; height: 44px; border-width: 0; font-size: 0.72rem; } } @media (max-width: 720px) { .gift-room-tab-panels, .gift-room-tab-content > .gift-room-planner, .gift-room-tab-content > .gift-room-wedding-pane, .gift-room-tab-content > .gift-room-scenario-pane, .gift-room-wedding-invites, .gift-room-wedding-saved, .gift-room-scenario-saved, .gift-room-items-toolbar { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } } @media (max-width: 820px) { .gift-room-wedding-seating .gift-room-seat-actionbar .gift-room-proto-row__action, .gift-room-wedding-seating .gift-room-seat-footer .gift-room-proto-row__action, .gift-room-wedding-seating .gift-room-seat-halls .gift-room-proto-row__action { grid-column: auto; justify-self: stretch; } .gift-room-wedding-pane:not(.gift-room-wedding-seating) > .gift-room-proto-panel-head { grid-template-columns: minmax(0, 1fr); } .gift-room-wedding-pane:not(.gift-room-wedding-seating) > .gift-room-proto-panel-head .gift-room-proto-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); justify-content: stretch; gap: 8px; } .gift-room-wedding-pane:not(.gift-room-wedding-seating) > .gift-room-proto-panel-head .gift-room-proto-row__action { width: 100%; min-width: 0; justify-content: center; grid-column: auto; justify-self: stretch; } } @media (max-width: 560px) { .gift-room-wedding-seating .gift-room-seat-pool--placement { padding: 0; border-radius: 0; } } @media screen { html.is-gift-room-page, body.page--gift-room { overflow-x: hidden !important; overflow-y: auto !important; } body.page--gift-room.is-gift-room-header-locked .fixed-header { position: fixed !important; inset: 0 0 auto 0 !important; width: auto !important; margin: 0 !important; transform: none !important; transition: none !important; will-change: auto !important; z-index: 12000 !important; } body.page--gift-room.is-gift-room-header-locked > main.container { height: auto !important; margin-top: var(--gift-room-room-chrome-height, 74px) !important; overflow: visible !important; overscroll-behavior: auto !important; scrollbar-width: auto !important; } } .gift-room-print-roster { display: none; } @media print { @page { margin: 10mm 12mm 18mm; } .gift-room-print-roster { display: block !important; margin-top: 8mm; } .gift-room-print-roster > h3 { margin: 0 0 5mm; font-size: 15pt; } .gift-room-print-roster__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5mm; } .gift-room-print-roster__table { padding: 4mm 5mm; border: 0.4mm solid var(--color-line, #e7e2d5); border-radius: 4mm; break-inside: avoid; page-break-inside: avoid; } .gift-room-print-roster__table h4 { display: flex; align-items: baseline; gap: 2.5mm; margin: 0 0 1.5mm; font-size: 11.5pt; } .gift-room-print-roster__table h4 span { color: var(--color-ink-soft, #61606b); font-size: 9pt; font-weight: 450; } .gift-room-print-roster__meals { margin: 0 0 2mm; color: var(--color-ink-soft, #61606b); font-size: 9pt; } .gift-room-print-roster__table ul { margin: 0; padding: 0; list-style: none; } .gift-room-print-roster__table li { display: flex; justify-content: space-between; gap: 4mm; padding: 1.4mm 0; border-top: 0.2mm solid var(--color-line, #e7e2d5); font-size: 10pt; } .gift-room-print-roster__table li span { color: var(--color-ink-soft, #61606b); font-size: 9pt; text-align: right; } .gift-room-print-roster__totals, .gift-room-print-roster__unseated { margin: 4mm 0 0; font-size: 10pt; } html.is-gift-room-page, body.page--gift-room { background: #fff !important; overflow: visible !important; } body.page--gift-room { padding-top: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.page--gift-room > main.container::before { content: ""; display: block; width: 34mm; height: 9mm; margin: 0 auto 6mm; background: center / contain no-repeat url("/assets/header-icons/logo-desktop.svg"); } .fixed-header, .mobile-header, .site-footer, .gift-room-page-skeleton, .gift-room-room-topbar, .gift-room-room-signals, .gift-room-hero__signals, .gift-room-hero__actions, .gift-room-tabbar, .gift-room-plan-rail, .gift-room-workspace-summary, .gift-room-fab, .gift-room-modal-overlay, .gift-room-toast-stack, [data-gift-room-mobile-fab] { display: none !important; } body.page--gift-room > main.container { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .gift-room-shell, .gift-room-view, .gift-room-shell.is-room-view #view-room { display: block !important; } #view-dashboard { display: none !important; } .gift-room-shell { padding: 0 !important; } .gift-room-shell.is-room-view #view-room { padding-top: 0 !important; } .gift-room-room-summary { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important; gap: 10mm !important; margin: 0 0 8mm !important; } .gift-room-hero, .gift-room-hero--bleed, .gift-room-budget, .gift-room-plan-focus__card, .gift-room-planner, .gift-room-overview-card, .gift-room-overview-checklist, .gift-room-overview-delight, .gift-room-reg-card, .gift-room-proto-row, .gift-room-kanban-card, .gift-room-day-list > *, .gift-room-reg-grid > * { break-inside: avoid; page-break-inside: avoid; } .gift-room-hero--bleed { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 8mm !important; border-radius: 7mm !important; } .gift-room-hero--bleed .gift-room-hero__inner { display: block !important; height: auto !important; min-height: 0 !important; padding-right: 0 !important; } .gift-room-hero__title { max-width: none !important; font-size: 20pt !important; line-height: 1.08 !important; } .gift-room-hero__meta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm 8mm !important; } .gift-room-budget { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "copy chart" "legend chart" !important; align-items: center !important; column-gap: 10mm !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 8mm !important; border-radius: 7mm !important; row-gap: 4mm !important; overflow: visible !important; } .gift-room-budget__copy { grid-area: copy; } .gift-room-budget__chart { grid-area: chart; align-self: center !important; justify-content: flex-end !important; margin: 0 !important; } .gift-room-budget__gauge { width: min(62mm, 100%) !important; max-width: 62mm !important; } .gift-room-budget__legend { grid-area: legend; margin: 0 !important; } .gift-room-room-shell { margin-bottom: 0 !important; } .gift-room-tab-panels { padding: 0 !important; } .gift-room-tab-content { display: none !important; } .gift-room-tab-content.is-active { display: block !important; } .gift-room-items-toolbar, .gift-room-proto-actions, .gift-room-reg-actions, .gift-room-kanban-card__actions, .gift-room-plan-focus__actions, .gift-room-planner__head > button, .gift-room-seat-headside, .gift-room-seat-controls, .gift-room-seat-venuebar, .gift-room-seat-auto, .gift-room-seat-search, .gift-room-seat-search-result, .gift-room-seat-table__controls, .gift-room-seat-pool, .gift-room-seat-footer { display: none !important; } .gift-room-planner__toolbar, .gift-room-planner__search, .gift-room-planner__filters, .gift-room-planner__filter, .gift-room-planner__add, .gift-room-guest-row__actions, .gift-room-guest-icon-button, .gift-room-reg-edit-mobile, .gift-room-kanban-card__advance, .gift-room-dashboard-search, .gift-room-pills, .gift-room-cta, .gift-room-tab-content form, .gift-room-tab-content input, .gift-room-tab-content select, .gift-room-tab-content textarea { display: none !important; } } @media (max-width: 820px) { .gift-room-seat-canvas-tools--left { right: auto; left: 14px; } } @media (max-width: 560px) { .gift-room-seat-canvas-tools--left { position: absolute; top: 12px; right: auto; bottom: auto; left: 12px; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; justify-content: flex-start; } } .gift-room-register-prompt { position: fixed; inset: 0; z-index: 12680; display: flex; align-items: center; justify-content: center; padding: 16px; } .gift-room-register-prompt__overlay { position: absolute; inset: 0; background: var(--popup-overlay, rgba(35, 32, 48, 0.52)); } .gift-room-register-prompt__panel { position: relative; width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); overflow: visible; padding: 34px 26px 26px; text-align: center; } .gift-room-register-prompt__close { position: absolute; top: 14px; right: 14px; z-index: 2; } .gift-room-register-prompt__badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: rgba(63, 106, 96, 0.12); margin-bottom: 14px; } .gift-room-register-prompt__title { margin: 0 0 8px; } .gift-room-register-prompt__text { margin: 0 0 20px; } .gift-room-register-prompt__actions { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; } .gift-room-register-prompt__secondary.collection-modal__cancel, .gift-room-register-prompt__primary.collection-modal__create { min-width: 0; padding: 14px 26px; min-height: 48px; font-size: 14px; } .gift-room-register-prompt__signin { margin-top: 14px; border: 0; background: transparent; color: var(--color-forest, #3F6A60); font-family: var(--font-heading); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 480px) { .gift-room-register-prompt__panel { border-radius: 22px; padding: 26px 20px 22px; } .gift-room-register-prompt__actions { flex-direction: column-reverse; } .gift-room-register-prompt__secondary, .gift-room-register-prompt__primary { width: 100%; } } /* [bundle] /styles/components/featured-hub.css */ .page--featured-hub { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); --featured-hub-shell: var(--homepage-shell-width); --featured-hub-hero-top-gap: 15px; --featured-hub-hero-title-size: 42px; --featured-hub-hero-title-mobile-size: 26px; --featured-hub-hero-subtitle-size: 14px; --featured-hub-hero-subtitle-mobile-size: 13px; --featured-hub-hero-shape-color: var(--color-forest); --featured-hub-hero-copy-color: var(--color-cream); --featured-hub-hero-badge-bg: rgba(255, 249, 241, 0.16); --featured-hub-tile-size: 174px; --featured-hub-tile-gap: 30px; --featured-hub-tile-row-width: calc((var(--featured-hub-tile-size) * 6) + (var(--featured-hub-tile-gap) * 5)); padding-top: calc(72px * var(--scale, 1)); background: var(--color-page-bg); overflow-x: clip; } .featured-hub-page { padding: 0 0 72px; overflow-x: clip; } .featured-hub-root { width: var(--featured-hub-shell); margin: 0 auto; } .featured-hub-root--home-guide { width: var(--featured-hub-shell); } .featured-hub-root--gift-finder { position: relative; isolation: isolate; } .featured-hub-home { color: var(--color-ink); } .featured-hub-root--gift-finder .featured-hub-home { position: relative; isolation: isolate; } @property --assistant-ring-angle { syntax: ""; inherits: false; initial-value: 0deg; } @property --assistant-ring-gap-start { syntax: ""; inherits: false; initial-value: 292deg; } @property --gift-finder-hero-overlap { syntax: ""; inherits: true; initial-value: -291px; } .featured-hub-search { position: relative; width: min(100%, 920px); margin: 22px auto 0; font-family: var(--font-body); --gift-hub-search-rest-height: 58px; --gift-hub-search-expanded-height: 364px; --gift-hub-search-compact-height: 68px; --gift-hub-search-radius: 30px; --gift-hub-search-reveal-duration: 0.56s; --gift-hub-search-reveal-ease: cubic-bezier(0.2, 0.78, 0.18, 1); } .featured-hub-search.has-attachments { --gift-hub-search-expanded-height: 458px; } .featured-hub-search__bar { box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; height: var(--gift-hub-search-rest-height); min-height: 0; padding: 8px; border-radius: var(--gift-hub-search-radius); background: var(--color-cream); color: var(--color-ink); box-shadow: 0 16px 38px rgb(0 0 0 / 0.16); overflow: hidden; transform: none; transform-origin: top center; transition: height var(--gift-hub-search-reveal-duration) var(--gift-hub-search-reveal-ease), box-shadow 0.28s ease, background-color 0.18s ease, color 0.18s ease; will-change: height; } .featured-hub-search__composer { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; position: absolute; left: 8px; right: 8px; bottom: 8px; width: auto; min-width: 0; } .featured-hub-search.is-expanded .featured-hub-search__composer, .featured-hub-search:focus-within .featured-hub-search__composer { grid-template-areas: "drafts drafts drafts drafts" "input input input input" "add . tools submit"; align-items: end; row-gap: 20px; } .featured-hub-search__add, .featured-hub-search__submit { display: inline-flex; align-items: center; justify-content: center; } .featured-hub-search__add { appearance: none; position: relative; width: 42px; height: 42px; border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-line) 34%, transparent); color: var(--color-ink); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .featured-hub-search__add-icon { width: 19px; height: 19px; background: currentColor; mask: url("/assets/gift-room-icons/shared/plus.svg") center / contain no-repeat; -webkit-mask: url("/assets/gift-room-icons/shared/plus.svg") center / contain no-repeat; transition: transform 0.18s ease; } .featured-hub-search__add:hover, .featured-hub-search__add:focus-visible, .featured-hub-search.is-attach-menu-open .featured-hub-search__add { background: color-mix(in srgb, var(--color-forest) 14%, transparent); color: var(--color-forest); } .featured-hub-search.is-attach-menu-open .featured-hub-search__add-icon { transform: rotate(45deg); } .featured-hub-search__add:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-forest) 48%, transparent); outline-offset: 3px; } .featured-hub-search__submit img { display: block; } .featured-hub-search__assistant-panel { display: flex; align-items: flex-start; gap: 16px; min-width: 0; max-height: 168px; margin: 84px 20px 0; padding: 2px 8px 1px 0; overflow: hidden; animation: giftHubAssistantPanelFade 0.16s ease-out both; } .featured-hub-search__assistant-panel[hidden], .featured-hub-search:not(.is-expanded):not(.is-collapsing):not(.is-processing) .featured-hub-search__assistant-panel, .featured-hub-search.is-voice-mode .featured-hub-search__assistant-panel, .featured-hub-search.is-processing .featured-hub-search__assistant-panel { display: none; } .featured-hub-search__assistant-mark { display: inline-flex; align-items: center; justify-content: center; position: relative; isolation: isolate; flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); --assistant-mark-ring: conic-gradient( from var(--assistant-ring-angle, 0deg), rgb(95 88 184 / 0.72) 0deg, rgb(67 134 220 / 0.78) 58deg, rgb(58 154 137 / 0.7) 122deg, rgb(222 177 74 / 0.62) 190deg, rgb(95 88 184 / 0.72) 252deg, color-mix(in srgb, rgb(67 134 220) 12%, transparent) calc(var(--assistant-ring-gap-start, 292deg) - 8deg), color-mix(in srgb, rgb(67 134 220) 12%, transparent) calc(var(--assistant-ring-gap-start, 292deg) + 14deg), rgb(67 134 220 / 0.78) calc(var(--assistant-ring-gap-start, 292deg) + 32deg), rgb(95 88 184 / 0.72) 360deg ); } .featured-hub-search__assistant-mark::before { content: ""; position: absolute; inset: -4px; z-index: 0; padding: 3px; border-radius: inherit; background: var(--assistant-mark-ring); opacity: 0; mask: linear-gradient(rgb(0 0 0) 0 0) content-box, linear-gradient(rgb(0 0 0) 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(rgb(0 0 0) 0 0) content-box, linear-gradient(rgb(0 0 0) 0 0); -webkit-mask-composite: xor; transition: opacity 0.18s ease; } .featured-hub-search__assistant-panel.is-typing .featured-hub-search__assistant-mark::before, .featured-hub-search__assistant-panel:hover .featured-hub-search__assistant-mark::before { opacity: 0.78; animation: giftHubAssistantRingWander 12.8s cubic-bezier(0.42, 0, 0.18, 1) infinite, giftHubAssistantGapBreath 6.2s ease-in-out infinite alternate; } .featured-hub-search__assistant-mark img { position: relative; z-index: 1; width: 27px; height: 27px; } .featured-hub-search__assistant-panel.is-typing .featured-hub-search__assistant-mark img, .featured-hub-search__assistant-panel:hover .featured-hub-search__assistant-mark img { animation: giftHubAssistantIconTurn 2.2s ease-in-out infinite; } .featured-hub-search__assistant-copy { min-width: 0; color: var(--color-ink); font-family: var(--font-heading); } .featured-hub-search__assistant-copy p { position: relative; display: inline; margin: 1px 0 0; font-size: 16px; font-weight: 850; line-height: 1.48; } .featured-hub-search__assistant-copy p.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; border-radius: var(--radius-pill); background: var(--color-forest); vertical-align: -0.14em; animation: giftHubTypingCaret 0.74s steps(2, end) infinite; } .featured-hub-search__drafts { display: flex; flex-wrap: wrap; gap: 12px; grid-area: drafts; } .featured-hub-search__drafts[hidden] { display: none; } .featured-hub-search__draft { position: relative; isolation: isolate; overflow: hidden; box-shadow: 0 12px 28px rgb(0 0 0 / 0.12); } .featured-hub-search__draft--image { width: 90px; height: 90px; flex: 0 0 90px; border-radius: 24px; background: color-mix(in srgb, var(--color-line) 56%, var(--color-cream)); } .featured-hub-search__draft-thumb { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-line); } .featured-hub-search__draft--file { display: inline-flex; align-items: center; gap: 10px; max-width: min(100%, 320px); min-height: 48px; padding: 0 14px 0 12px; border-radius: 18px; background: color-mix(in srgb, var(--color-line) 56%, var(--color-cream)); color: var(--color-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 8%, transparent), 0 6px 16px rgb(0 0 0 / 0.06); } .featured-hub-search__draft-file-icon { width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; mask: url("/assets/admin-icons/file-text.svg") center / contain no-repeat; -webkit-mask: url("/assets/admin-icons/file-text.svg") center / contain no-repeat; } .featured-hub-search__draft-file-name { min-width: 0; font-size: 13px; font-weight: 760; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .featured-hub-search__draft-remove { appearance: none; display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: var(--radius-pill); background: rgb(255 249 241 / 0.96); color: var(--color-ink); cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); } .featured-hub-search__draft-remove--file { position: static; width: 28px; height: 28px; flex: 0 0 28px; margin-left: auto; background: color-mix(in srgb, var(--color-ink) 8%, transparent); box-shadow: none; } .featured-hub-search__draft-remove span { width: 11px; height: 11px; background: currentColor; mask: url("/assets/header-icons/close.svg") center / contain no-repeat; -webkit-mask: url("/assets/header-icons/close.svg") center / contain no-repeat; } .featured-hub-search__draft-remove:hover, .featured-hub-search__draft-remove:focus-visible { background: color-mix(in srgb, var(--color-ink) 14%, transparent); color: var(--color-ink); outline: none; } .featured-hub-search__input { box-sizing: border-box; width: 100%; min-height: 24px; height: 24px; padding: 0; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent; color: var(--color-ink); caret-color: var(--color-forest); font: inherit; font-size: 15px; font-weight: 650; line-height: 1.4; align-self: center; transform: translateZ(0); backface-visibility: hidden; } .featured-hub-search.is-expanded .featured-hub-search__input, .featured-hub-search:focus-within .featured-hub-search__input { grid-area: input; min-height: 52px; height: auto; margin-top: 25px; padding: 0 0 0 10px; } .featured-hub-search__input::placeholder { color: color-mix(in srgb, var(--color-ink-soft) 72%, transparent); opacity: 1; } .featured-hub-search__tools { display: inline-flex; align-items: center; gap: 4px; } .featured-hub-search.is-expanded .featured-hub-search__add, .featured-hub-search:focus-within .featured-hub-search__add { grid-area: add; } .featured-hub-search.is-expanded .featured-hub-search__tools, .featured-hub-search:focus-within .featured-hub-search__tools { grid-area: tools; justify-self: end; } .featured-hub-search__tool { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .featured-hub-search__tool span { width: 22px; height: 22px; background: currentColor; } .featured-hub-search__tool--voice span { mask: url("/assets/header-icons/voice-message.svg") center / contain no-repeat; -webkit-mask: url("/assets/header-icons/voice-message.svg") center / contain no-repeat; } .featured-hub-search__tool:hover, .featured-hub-search__tool:focus-visible { background: color-mix(in srgb, var(--color-forest) 12%, transparent); color: var(--color-forest); outline: none; } .featured-hub-search__tool:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-forest) 38%, transparent); } .featured-hub-search__submit { appearance: none; position: relative; isolation: isolate; overflow: visible; box-sizing: border-box; border: 3px solid transparent; min-height: 42px; padding: 0 19px; border-radius: var(--radius-pill); gap: 8px; background: transparent; color: var(--color-ink); cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 850; line-height: 1; white-space: nowrap; --assistant-ring-gradient: conic-gradient( from var(--assistant-ring-angle, 0deg), rgb(95 88 184 / 0.66) 0deg, rgb(67 134 220 / 0.78) 54deg, rgb(58 154 137 / 0.72) 122deg, rgb(222 177 74 / 0.68) 190deg, rgb(95 88 184 / 0.72) 250deg, color-mix(in srgb, rgb(67 134 220) 34%, var(--color-cream)) calc(var(--assistant-ring-gap-start, 292deg) - 22deg), color-mix(in srgb, rgb(67 134 220) 8%, var(--color-cream)) calc(var(--assistant-ring-gap-start, 292deg) - 7deg), color-mix(in srgb, rgb(67 134 220) 8%, var(--color-cream)) calc(var(--assistant-ring-gap-start, 292deg) + 12deg), rgb(67 134 220 / 0.78) calc(var(--assistant-ring-gap-start, 292deg) + 30deg), rgb(95 88 184 / 0.66) 360deg ); --assistant-ring-glow: conic-gradient( from var(--assistant-ring-angle, 0deg), rgb(95 88 184 / 0.9) 0deg, rgb(67 134 220 / 0.98) 54deg, rgb(58 154 137 / 0.92) 122deg, rgb(222 177 74 / 0.86) 190deg, rgb(95 88 184 / 0.9) 250deg, color-mix(in srgb, rgb(67 134 220) 46%, var(--color-cream)) calc(var(--assistant-ring-gap-start, 292deg) - 24deg), color-mix(in srgb, rgb(67 134 220) 10%, var(--color-cream)) calc(var(--assistant-ring-gap-start, 292deg) - 7deg), color-mix(in srgb, rgb(67 134 220) 10%, var(--color-cream)) calc(var(--assistant-ring-gap-start, 292deg) + 12deg), rgb(67 134 220 / 0.98) calc(var(--assistant-ring-gap-start, 292deg) + 32deg), rgb(95 88 184 / 0.9) 360deg ); transition: color 0.18s ease; } .featured-hub-search__submit img { position: relative; z-index: 2; width: 20px; height: 20px; } .featured-hub-search__submit span { position: relative; z-index: 2; } .featured-hub-search__submit::before, .featured-hub-search__submit::after { content: ""; position: absolute; inset: -3px; z-index: 1; padding: 5px; border-radius: inherit; background: var(--assistant-ring-glow); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; will-change: filter, opacity; mask: linear-gradient(var(--color-ink) 0 0) content-box, linear-gradient(var(--color-ink) 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(var(--color-ink) 0 0) content-box, linear-gradient(var(--color-ink) 0 0); -webkit-mask-composite: xor; } .featured-hub-search__submit::before { inset: -1px; padding: 4px; filter: blur(1.15px) saturate(1.18); } .featured-hub-search__submit::after { inset: -5px; padding: 7px; filter: blur(7px) saturate(1.16); } .featured-hub-search__submit:hover, .featured-hub-search__submit:focus-visible { background: linear-gradient(var(--color-cream), var(--color-cream)) padding-box, var(--assistant-ring-gradient) border-box; color: var(--color-ink); box-shadow: 0 0 4px rgb(67 134 220 / 0.18), 0 0 10px rgb(58 154 137 / 0.12); animation: giftHubAssistantRingWander 12.8s cubic-bezier(0.42, 0, 0.18, 1) infinite, giftHubAssistantGapBreath 6.2s ease-in-out infinite alternate; } .featured-hub-search__submit:hover::before, .featured-hub-search__submit:focus-visible::before { opacity: 0.62; animation: giftHubAssistantRingWander 12.8s cubic-bezier(0.42, 0, 0.18, 1) infinite, giftHubAssistantGapBreath 6.2s ease-in-out infinite alternate; } .featured-hub-search__submit:hover::after, .featured-hub-search__submit:focus-visible::after { opacity: 0.28; animation: giftHubAssistantRingWander 12.8s cubic-bezier(0.42, 0, 0.18, 1) infinite, giftHubAssistantGapBreath 6.2s ease-in-out infinite alternate; } .featured-hub-search__submit:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-forest) 48%, transparent); outline-offset: 3px; } .featured-hub-search.is-expanded .featured-hub-search__bar, .featured-hub-search:focus-within .featured-hub-search__bar { align-items: stretch; justify-content: flex-start; height: var(--gift-hub-search-expanded-height); min-height: 0; padding: 8px; border-radius: var(--gift-hub-search-radius); box-shadow: var(--shadow-elevated); } .featured-hub-search.is-voice-mode .featured-hub-search__bar, .featured-hub-search.is-processing .featured-hub-search__bar { align-items: stretch; justify-content: center; height: var(--gift-hub-search-compact-height); min-height: 0; padding: 8px 10px; border-radius: var(--gift-hub-search-radius); box-shadow: var(--shadow-elevated); } .featured-hub-search.is-expanded .featured-hub-search__input, .featured-hub-search:focus-within .featured-hub-search__input { min-height: 32px; height: auto; padding-top: 0; padding-bottom: 0; } .featured-hub-search.is-expanded .featured-hub-search__submit, .featured-hub-search:focus-within .featured-hub-search__submit { grid-area: submit; justify-self: end; min-height: 42px; } .featured-hub-search.is-assistant-chatting .featured-hub-search__bar { height: var(--gift-hub-search-expanded-height); min-height: 0; } .featured-hub-search.is-voice-mode .featured-hub-search__bar, .featured-hub-search.is-processing .featured-hub-search__bar { padding: 8px 10px; background: var(--color-ink); color: var(--color-cream); box-shadow: inset 0 0 0 1px rgb(255 249 241 / 0.08), 0 16px 38px rgb(0 0 0 / 0.18); } .featured-hub-search.is-voice-mode .featured-hub-search__composer, .featured-hub-search.is-processing .featured-hub-search__composer { display: none; } .featured-hub-search__voice-panel, .featured-hub-search__processing { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-cream); box-shadow: none; animation: giftHubAssistantPanelDrop 0.16s ease-out both; } .featured-hub-search__voice-panel[hidden], .featured-hub-search__processing[hidden] { display: none; } .featured-hub-search__voice-action { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: var(--radius-pill); background: rgb(255 249 241 / 0.1); color: var(--color-cream); cursor: pointer; } .featured-hub-search__voice-action span { width: 22px; height: 22px; background: currentColor; } .featured-hub-search__voice-action--cancel span { mask: url("/assets/header-icons/close-cream.svg") center / contain no-repeat; -webkit-mask: url("/assets/header-icons/close-cream.svg") center / contain no-repeat; } .featured-hub-search__voice-action--accept { background: var(--color-cream); color: var(--color-ink); } .featured-hub-search__voice-action--accept span { mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; } .featured-hub-search__voice-action:hover, .featured-hub-search__voice-action:focus-visible { transform: scale(var(--hover-grow-scale, 1.035)); outline: none; } .featured-hub-search__voice-main { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-width: 0; } .featured-hub-search__wave { display: inline-flex; align-items: center; gap: 3px; height: 32px; flex: 0 0 auto; color: color-mix(in srgb, var(--color-cream) 58%, transparent); } .featured-hub-search__wave i { width: 3px; height: var(--wave-h, 14px); border-radius: var(--radius-pill); background: currentColor; animation: giftHubVoiceWave 0.84s ease-in-out infinite; } .featured-hub-search__wave i:nth-child(1) { --wave-h: 12px; animation-delay: 0ms; } .featured-hub-search__wave i:nth-child(2) { --wave-h: 20px; animation-delay: 80ms; } .featured-hub-search__wave i:nth-child(3) { --wave-h: 28px; animation-delay: 160ms; } .featured-hub-search__wave i:nth-child(4) { --wave-h: 22px; animation-delay: 240ms; } .featured-hub-search__wave i:nth-child(5) { --wave-h: 16px; animation-delay: 320ms; } .featured-hub-search__wave i:nth-child(6) { --wave-h: 25px; animation-delay: 400ms; } .featured-hub-search__voice-label { min-width: 0; color: color-mix(in srgb, var(--color-cream) 76%, transparent); font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .featured-hub-search__voice-panel[data-voice-state="ready"] .featured-hub-search__wave i { animation-play-state: paused; } .featured-hub-search__processing { position: relative; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; } .featured-hub-search__processing-spinner, .gift-finder-loading__spinner { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; } .featured-hub-search__processing-spinner .jp-canonical-spinner, .gift-finder-loading__spinner .jp-canonical-spinner { flex: 0 0 auto; } .featured-hub-search__processing-copy { color: var(--color-cream); font-size: 15px; font-weight: 820; line-height: 1.25; } .featured-hub-search__processing-spark, .gift-finder-loading__spark { position: absolute; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-jedi-picks-yellow); box-shadow: 0 0 0 3px rgb(255 196 77 / 0.18), 0 0 16px rgb(255 196 77 / 0.38); animation: giftHubSparkFloat 1.8s ease-in-out infinite; } .featured-hub-search__processing-spark--one { right: 18px; top: 14px; } .featured-hub-search__processing-spark--two { right: 54px; bottom: 14px; animation-delay: 0.42s; } .featured-hub-search__attach-menu { position: absolute; z-index: 6; top: auto; bottom: calc(100% + 10px); left: 6px; width: min(212px, calc(100vw - 42px)); padding: 7px; border: 1px solid color-mix(in srgb, var(--color-line) 72%, transparent); border-radius: 18px; background: var(--color-cream); color: var(--color-ink); box-shadow: 0 18px 42px rgb(0 0 0 / 0.18); overflow: hidden; transform-origin: 22px calc(100% + 8px); animation: giftHubAttachMenuIn 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .featured-hub-search__attach-menu[hidden], .featured-hub-search__file { display: none; } .featured-hub-search__attach-option { appearance: none; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--color-ink); cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 720; text-align: left; transition: background-color 0.18s ease, color 0.18s ease; } .featured-hub-search__attach-option:hover, .featured-hub-search__attach-option:focus-visible { background: color-mix(in srgb, var(--color-forest) 14%, transparent); color: var(--color-ink); outline: none; } .featured-hub-search__attach-option img { width: 18px; height: 18px; } @keyframes giftHubAssistantRingWander { 0% { --assistant-ring-angle: -8deg; } 18% { --assistant-ring-angle: 44deg; } 37% { --assistant-ring-angle: 128deg; } 58% { --assistant-ring-angle: 202deg; } 79% { --assistant-ring-angle: 284deg; } 100% { --assistant-ring-angle: 352deg; } } @keyframes giftHubAssistantGapBreath { 0% { --assistant-ring-gap-start: 292deg; } 42% { --assistant-ring-gap-start: 302deg; } 68% { --assistant-ring-gap-start: 296deg; } 100% { --assistant-ring-gap-start: 306deg; } } @keyframes giftHubAttachMenuIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes giftHubAssistantPanelDrop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes giftHubAssistantPanelFade { from { opacity: 0; } to { opacity: 1; } } @keyframes giftHubTypingCaret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } } @keyframes giftHubVoiceWave { 0%, 100% { transform: scaleY(0.52); opacity: 0.45; } 45% { transform: scaleY(1); opacity: 1; } } @keyframes giftHubAssistantIconTurn { 0%, 100% { transform: rotate(-5deg) scale(1); } 48% { transform: rotate(10deg) scale(1.06); } } @keyframes giftHubSparkFloat { 0%, 100% { transform: translateY(0) scale(0.9); opacity: 0.48; } 48% { transform: translateY(-8px) scale(1.08); opacity: 1; } } .featured-hub-home-hero { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 260px; padding: var(--featured-hub-hero-top-gap) 36px 96px; overflow: hidden; text-align: center; background: transparent; color: var(--featured-hub-hero-copy-color, #232030); isolation: isolate; } .featured-hub-home-hero::after { content: none; } .featured-hub-home-hero::before, .featured-hub-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; display: block; background: var(--featured-hub-hero-shape-color, var(--color-forest)); clip-path: polygon( 0 0, 100% 0, 100% 100%, 95.22% 96.95%, 90.61% 94.17%, 86.14% 91.65%, 81.81% 89.40%, 77.59% 87.41%, 73.48% 85.69%, 69.45% 84.23%, 65.50% 83.04%, 61.60% 82.11%, 57.75% 81.45%, 53.93% 81.06%, 50.12% 80.93%, 46.30% 81.06%, 42.48% 81.46%, 38.62% 82.12%, 34.71% 83.05%, 30.74% 84.24%, 26.70% 85.70%, 22.56% 87.42%, 18.32% 89.41%, 13.96% 91.66%, 9.46% 94.18%, 4.81% 96.96%, 0 100% ); pointer-events: none; } .featured-hub-home--navy .featured-hub-home-hero { --featured-hub-hero-shape-color: var(--color-forest-dark); } .featured-hub-home--evergreen .featured-hub-home-hero { --featured-hub-hero-shape-color: var(--color-forest); } .featured-hub-home--violet .featured-hub-home-hero { --featured-hub-hero-shape-color: #7a563d; } .featured-hub-home-hero__copy { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; } .featured-hub-home-hero__badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px; background: var(--featured-hub-hero-badge-bg, rgba(35, 32, 48, 0.08)); color: inherit; font-family: var(--font-body); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .featured-hub-home-hero__title { max-width: 860px; margin: 10px auto 0; color: inherit; font-family: var(--font-heading); font-size: var(--featured-hub-hero-title-size); font-weight: 600; line-height: 1.2; letter-spacing: 0; } .featured-hub-home-hero__subtitle { max-width: 760px; margin: 8px auto 0; color: inherit; font-family: var(--font-heading); font-size: var(--featured-hub-hero-subtitle-size); font-weight: 500; line-height: 1.5; } .featured-hub-home-grid { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--featured-hub-tile-gap); width: min(100%, var(--featured-hub-tile-row-width)); margin: -92px auto 78px; padding: 0; } .featured-hub-home-tile { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; width: var(--featured-hub-tile-size); min-width: var(--featured-hub-tile-size); color: var(--color-ink); text-align: center; text-decoration: none; } .featured-hub-home-tile__media { position: relative; display: grid; place-items: center; width: 100%; height: var(--featured-hub-tile-size); border-radius: 30px; overflow: hidden; contain: paint; isolation: isolate; background: var(--home-tile-bg, var(--color-sand-dark)); box-shadow: none; } .featured-hub-home-tile__image { display: block; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, 0, 0) scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .featured-hub-home-tile__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(251, 247, 240, 0.04), rgba(35, 32, 48, 0.08)); pointer-events: none; } .featured-hub-home-tile__label { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 34px; margin-top: 0; color: var(--color-ink); font-family: Montserrat, var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; text-underline-offset: 3px; word-wrap: break-word; } .featured-hub-home-tile__arrow { display: none; } .featured-hub-home-tile:hover .featured-hub-home-tile__image, .featured-hub-home-tile:focus-visible .featured-hub-home-tile__image { transform: translate3d(0, 0, 0) scale(1.035); } .featured-hub-home-tile:hover .featured-hub-home-tile__label, .featured-hub-home-tile:focus-visible .featured-hub-home-tile__label { text-decoration: underline; } .featured-hub-home-tile--rose { --home-tile-bg: #ead8dc; } .featured-hub-home-tile--sage { --home-tile-bg: #dfe8df; } .featured-hub-home-tile--sky { --home-tile-bg: var(--color-line); } .featured-hub-home-tile--gold { --home-tile-bg: #eee2ba; } .featured-hub-home-tile--peach { --home-tile-bg: #efd9cc; } .featured-hub-home-tile--denim { --home-tile-bg: var(--color-sand-dark); } .featured-hub-home-tile--green, .featured-hub-home-tile--evergreen { --home-tile-bg: #dce8d8; } .featured-hub-home-tile--red { --home-tile-bg: #ead3cc; } .featured-hub-home-tile--brown, .featured-hub-home-tile--wood { --home-tile-bg: #e5d7c8; } .featured-hub-home-tile--slate { --home-tile-bg: var(--color-line-dark); } .featured-hub-home-tile--purple { --home-tile-bg: #e1d1bc; } .featured-hub-home-tile--cream, .featured-hub-home-tile--linen { --home-tile-bg: var(--color-sand); } .featured-hub-sellers { display: flex; flex-direction: column; gap: 25px; margin: 0 0 70px; } .featured-hub-sellers--products-only { gap: 0; } .featured-hub-sellers__head { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; margin: 0; text-align: center; } .featured-hub-sellers__title { margin: 0; color: var(--color-ink); font-family: var(--font-body); font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: 0; } .featured-hub-seller-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto; } .featured-hub-seller-tab { --featured-hub-seller-tab-bg: var(--sort-control-bg); --featured-hub-seller-tab-text: var(--color-ink); --featured-hub-seller-tab-pad-left: 26px; --featured-hub-seller-tab-pad-right: 26px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 150px; min-height: 44px; padding: 0 var(--featured-hub-seller-tab-pad-right) 0 var(--featured-hub-seller-tab-pad-left); border-radius: 999px; background: transparent; color: var(--featured-hub-seller-tab-text); cursor: pointer; text-decoration: none; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1; position: relative; isolation: isolate; overflow: visible; transition: color 0.18s ease; } .featured-hub-seller-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--featured-hub-seller-tab-bg); transform: scale(1); transform-origin: center; transition: transform 0.18s ease; will-change: transform; } .featured-hub-seller-tab.is-active { --featured-hub-seller-tab-bg: var(--color-ink); --featured-hub-seller-tab-text: var(--color-page-bg); --featured-hub-seller-tab-pad-left: 18px; --featured-hub-seller-tab-pad-right: 0px; min-width: 0; gap: 4px; } .featured-hub-seller-tab:hover::before, .featured-hub-seller-tab:focus-visible::before { transform: scale(var(--hover-grow-scale)); } .featured-hub-seller-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 24%, transparent); outline-offset: 2px; } .featured-hub-seller-tab__label, .featured-hub-seller-tab__remove { position: relative; z-index: 1; } .featured-hub-seller-tab__label { white-space: nowrap; } .featured-hub-seller-tab__remove { display: inline-flex; align-items: center; justify-content: center; width: 0; height: 34px; min-width: 0; margin: 4px 0; flex: 0 0 0; border-radius: 999px; background: var(--featured-hub-seller-tab-bg); color: inherit; opacity: 0; position: relative; transform: scale(0.82); overflow: hidden; transition: opacity 0.18s ease, transform 0.18s ease, width 0.18s ease, min-width 0.18s ease, flex-basis 0.18s ease, margin 0.18s ease; } .featured-hub-seller-tab__remove:hover, .featured-hub-seller-tab:focus-visible .featured-hub-seller-tab__remove { background: var(--featured-hub-seller-tab-bg); } .featured-hub-seller-tab.is-active .featured-hub-seller-tab__remove { width: 34px; min-width: 34px; margin: 4px 4px 4px 0; flex-basis: 34px; opacity: 1; transform: scale(1); } .featured-hub-seller-tab__remove-icon { display: block; width: 17px; height: 14px; max-width: none; opacity: 0; pointer-events: none; } .featured-hub-seller-tab__remove::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 17px; height: 14px; background: var(--color-page-bg); transform: translate(-50%, -50%); -webkit-mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; mask: url("/assets/header-icons/check-toggle.svg") center / contain no-repeat; pointer-events: none; } .featured-hub-sellers__shelf { --featured-hub-seller-gap: var(--homepage-rail-card-gap, 17.5px); --featured-hub-seller-card-height: 397px; --featured-hub-seller-gradient-width: var(--homepage-rail-fade-width, 52px); --featured-hub-seller-gradient-overhang: var(--homepage-rail-fade-overhang, 26px); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: visible; } .featured-hub-sellers__row-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .featured-hub-sellers__row-title { margin: 0; color: var(--color-ink); font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: 0; } .featured-hub-sellers__controls { display: flex; align-items: center; gap: 10px; } .featured-hub-sellers__arrow { width: 56px; min-width: 56px; height: 46px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; overflow: visible; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: opacity 0.18s ease; backface-visibility: hidden; z-index: 6; } .featured-hub-sellers__arrow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-ink); pointer-events: none; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 50%; transition: transform 0.18s ease; will-change: transform; backface-visibility: hidden; } .featured-hub-sellers__arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; transform: translate(-50%, -50%); transform-origin: 50% 50%; backface-visibility: hidden; } .featured-hub-sellers__arrow--prev::after { background-image: url("/assets/header-icons/pager-pill-prev.svg"); } .featured-hub-sellers__arrow--next::after { background-image: url("/assets/header-icons/pager-pill-next.svg"); } .featured-hub-sellers__arrow img { display: none; } .featured-hub-sellers__arrow:hover:not(.is-disabled), .featured-hub-sellers__arrow:focus-visible:not(.is-disabled) { transform: translate3d(0, 0, 0) scale(1); } .featured-hub-sellers__arrow:hover:not(.is-disabled)::before, .featured-hub-sellers__arrow:focus-visible:not(.is-disabled)::before { transform: translate3d(0, 0, 0) scale(1.04); } .featured-hub-sellers__arrow:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 18%, transparent); outline-offset: 3px; } .featured-hub-sellers__arrow.is-disabled, .featured-hub-sellers__arrow.is-hidden { display: inline-flex; pointer-events: none; cursor: default; opacity: 0.35; } .featured-hub-sellers__shelf.is-at-start.is-at-end .featured-hub-sellers__arrow { display: none; } .featured-hub-sellers__viewport { position: relative; z-index: 1; width: calc(100% + 24px); margin: -12px; padding: 12px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-padding-inline: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .featured-hub-sellers__viewport::-webkit-scrollbar { display: none; } .featured-hub-sellers__track { width: max-content; display: flex; gap: var(--featured-hub-seller-gap); align-items: flex-start; padding-right: var(--featured-hub-seller-end-pad, 0px); box-sizing: content-box; transform: translate3d(0, 0, 0); } .featured-hub-sellers__gradient { position: absolute; top: 56px; width: var(--featured-hub-seller-gradient-width); height: calc(var(--featured-hub-seller-card-height) + 24px); pointer-events: none; z-index: 3; opacity: 1; transition: opacity 0.62s cubic-bezier(0.25, 0.1, 0.25, 1); } .featured-hub-sellers__gradient--left { left: calc(-1 * var(--featured-hub-seller-gradient-overhang)); background: linear-gradient(90deg, var(--color-page-bg) 0%, transparent 100%); } .featured-hub-sellers__gradient--right { right: calc(-1 * var(--featured-hub-seller-gradient-overhang)); background: linear-gradient(270deg, var(--color-page-bg) 0%, transparent 100%); } .featured-hub-sellers__shelf.is-at-start .featured-hub-sellers__gradient--left, .featured-hub-sellers__shelf.is-at-end .featured-hub-sellers__gradient--right { opacity: 0; } .featured-hub-seller-card { flex: 0 0 325px; width: 325px; height: 397px; padding: 10px; border-radius: 30px; overflow: hidden; background: var(--color-page-bg); box-shadow: none; outline: 1px solid var(--color-line); outline-offset: -1px; scroll-snap-align: start; scroll-snap-stop: always; transition: box-shadow 0.18s ease, outline-color 0.18s ease; } .featured-hub-seller-card:hover, .featured-hub-seller-card:focus-within { box-shadow: var(--shadow-card-hover); outline-color: transparent; } .featured-hub-seller-card__profile { display: flex; align-items: center; gap: 5px; height: 62px; margin-bottom: 10px; } .featured-hub-seller-card__avatar { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%; background: var(--seller-avatar-bg, var(--color-line)); } .featured-hub-seller-card__identity { min-width: 0; width: 151px; display: flex; flex-direction: column; gap: 10px; } .featured-hub-seller-card__name { color: var(--color-ink); font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .featured-hub-seller-card__rating { display: flex; align-items: center; gap: 9px; color: var(--color-ink); font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1; } .featured-hub-seller-card__stars { color: var(--color-warn); font-size: 18px; letter-spacing: 1px; line-height: 1; white-space: nowrap; } .featured-hub-seller-card__count { color: var(--color-ink); white-space: nowrap; } .featured-hub-seller-card__media-grid { display: grid; grid-template-columns: repeat(2, 148px); gap: 9px; } .featured-hub-seller-card__media { width: 148px; height: 148px; border-radius: 27px; background: var(--color-line); } .featured-hub-seller-card--sage { --seller-avatar-bg: #dfe8df; } .featured-hub-seller-card--peach { --seller-avatar-bg: #efd9cc; } .featured-hub-seller-card--sky { --seller-avatar-bg: var(--color-line); } .featured-hub-seller-card--gold { --seller-avatar-bg: #eee2ba; } .featured-hub-seller-card--rose { --seller-avatar-bg: #ead8dc; } .featured-hub-seller-card--wood { --seller-avatar-bg: #e5d7c8; } .featured-hub-seller-card--slate { --seller-avatar-bg: var(--color-line-dark); } .featured-hub-seller-card--linen { --seller-avatar-bg: var(--color-sand); } .featured-hub-seller-card--green, .featured-hub-seller-card--evergreen { --seller-avatar-bg: #dce8d8; } .featured-hub-seller-card--red { --seller-avatar-bg: #ead3cc; } .featured-hub-seller-card--purple { --seller-avatar-bg: #e1d1bc; } .featured-hub-seller-card--denim { --seller-avatar-bg: var(--color-sand-dark); } .featured-hub-seller-card__media--sage { background: #dfe8df; } .featured-hub-seller-card__media--peach { background: #efd9cc; } .featured-hub-seller-card__media--sky { background: var(--color-line); } .featured-hub-seller-card__media--gold { background: #eee2ba; } .featured-hub-seller-card__media--rose { background: #ead8dc; } .featured-hub-seller-card__media--wood { background: #e5d7c8; } .featured-hub-seller-card__media--slate { background: var(--color-line-dark); } .featured-hub-seller-card__media--linen { background: var(--color-sand); } .featured-hub-seller-card__media--cream { background: var(--color-sand); } .featured-hub-seller-card__media--green, .featured-hub-seller-card__media--evergreen { background: #dce8d8; } .featured-hub-seller-card__media--red { background: #ead3cc; } .featured-hub-seller-card__media--purple { background: #e1d1bc; } .featured-hub-seller-card__media--denim { background: var(--color-sand-dark); } @media (max-width: 1024px) { .featured-hub-sellers__controls, .featured-hub-sellers__gradient { display: none; } .featured-hub-sellers__viewport { width: calc(100% + 32px); margin: -12px -16px; padding: 12px 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .featured-hub-sellers__track { width: max-content; gap: var(--homepage-rail-card-gap, 17.5px); transform: translate3d(0, 0, 0) !important; } .featured-hub-seller-card { scroll-snap-align: start; } } @media (max-width: 720px) { .featured-hub-sellers { margin-bottom: 44px; } .featured-hub-sellers__shelf { --featured-hub-seller-gap: 12px; --featured-hub-seller-card-height: 148px; gap: 8px; } .featured-hub-sellers__row-head { gap: 8px; } .featured-hub-sellers__row-title { padding-inline: 10px; font-size: 18px; line-height: 1.2; } .featured-hub-seller-card { flex: 0 0 min(292px, calc(100vw - 40px)); width: min(292px, calc(100vw - 40px)); height: auto; min-height: 148px; padding: 8px; border-radius: 20px; } .featured-hub-seller-card__profile { height: 44px; margin-bottom: 8px; gap: 8px; } .featured-hub-seller-card__avatar { flex-basis: 44px; width: 44px; height: 44px; } .featured-hub-seller-card__identity { flex: 1 1 auto; width: auto; gap: 5px; } .featured-hub-seller-card__name { font-size: 14px; } .featured-hub-seller-card__rating { gap: 5px; font-size: 13px; } .featured-hub-seller-card__stars { font-size: 13px; letter-spacing: 0; } .featured-hub-seller-card__media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .featured-hub-seller-card__media { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 14px; } .featured-hub-sellers__shelf + .featured-hub-curated-products { margin-top: 112px; } } .featured-hub-marketplace__grid { --featured-hub-card-scale: 1; margin-top: 0; } .featured-hub-marketplace__grid .cat-card { --cat-card-scale: var(--featured-hub-card-scale, 1); } .featured-hub-marketplace__grid .cat-card__store-icon { width: calc(25 * var(--cat-card-unit-x)); height: calc(25 * var(--cat-card-unit-y)); object-fit: contain; flex: 0 0 calc(25 * var(--cat-card-unit-x)); } .featured-hub-curated-products { position: relative; margin: 72px 0 80px; } .featured-hub-curated-products--no-seller-shelf { margin-top: 22px; } .featured-hub-curated-products__head { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); align-items: center; gap: 18px; margin-bottom: 34px; } .featured-hub-curated-products__title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: 38px; font-weight: 600; line-height: 1.15; letter-spacing: 0; text-align: center; } .featured-hub-products__filter { justify-self: start; } .featured-hub-show-more-block > .featured-hub-marketplace__grid { width: 100%; } .featured-hub-card--show-more-reveal { animation: featuredHubShowMoreCardIn 0.48s var(--ease-out-expo) both; animation-delay: var(--featured-hub-reveal-delay, 0ms); } @keyframes featuredHubShowMoreCardIn { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .page--featured-hub .cat-filters-drawer { z-index: var(--z-modal-front, 13000); } .featured-hub-filter-note { margin: -2px 13px 8px; color: var(--color-ink-soft); font-family: var(--font-heading); font-size: 12px; font-weight: 500; line-height: 1.3; } .featured-hub-funnel-links { margin: 0 0 80px; } .featured-hub-funnel-links__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 38px 48px; } .featured-hub-funnel-card { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; width: min(100%, 620px); min-height: 162px; overflow: hidden; border-radius: 8px; background: var(--color-cream); color: var(--color-ink); text-decoration: none; box-shadow: none; transition: box-shadow 0.18s ease; } .featured-hub-funnel-card:hover, .featured-hub-funnel-card:focus-visible { box-shadow: var(--shadow-card-hover); } .featured-hub-funnel-card__media { align-self: stretch; background: var(--funnel-card-bg, #dfe8df); } .featured-hub-funnel-card__copy { display: flex; flex-direction: column; gap: 18px; padding: 26px 32px; } .featured-hub-funnel-card__title { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.12; } .featured-hub-funnel-card__cta { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; font-family: var(--font-body); font-size: 16px; font-weight: 800; } .featured-hub-funnel-card__cta img, .featured-hub-product__more img { display: block; width: 17px; height: 10px; flex: 0 0 17px; transform: translate3d(0, 0, 0); transition: transform 0.18s ease; backface-visibility: hidden; will-change: transform; } .featured-hub-funnel-card--sage { --funnel-card-bg: #dfe8df; } .featured-hub-funnel-card--peach { --funnel-card-bg: #efd9cc; } .featured-hub-funnel-card--sky { --funnel-card-bg: var(--color-line); } .featured-hub-funnel-card--gold { --funnel-card-bg: #eee2ba; } .featured-hub-funnel-card--rose { --funnel-card-bg: #ead8dc; } .featured-hub-funnel-card--wood, .featured-hub-funnel-card--brown { --funnel-card-bg: #e5d7c8; } .featured-hub-funnel-card--slate { --funnel-card-bg: var(--color-line-dark); } .featured-hub-funnel-card--linen { --funnel-card-bg: var(--color-sand); } .featured-hub-funnel-card--green, .featured-hub-funnel-card--evergreen { --funnel-card-bg: #dce8d8; } .featured-hub-nav { display: none; justify-content: center; align-items: center; gap: 24px; min-height: 56px; margin: 0 auto 18px; overflow-x: auto; scrollbar-width: none; } .featured-hub-nav::-webkit-scrollbar { display: none; } .featured-hub-nav__link { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--color-ink); text-decoration: none; font-family: var(--font-body); font-size: 16px; font-weight: 800; line-height: 1; padding: 12px 16px; border-radius: 999px; transition: background-color 0.18s ease, transform 0.18s ease; } .featured-hub-nav__link:hover, .featured-hub-nav__link:focus-visible, .featured-hub-nav__link.is-active { background: #dcddd4; } .featured-hub-nav__icon { width: 20px; height: 20px; object-fit: contain; } .featured-hub-hero { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 190px; padding: var(--featured-hub-hero-top-gap) 32px 72px; text-align: center; color: var(--featured-hub-hero-copy-color, #232030); background: transparent; border-radius: 0; isolation: isolate; } .featured-hub-hero > * { position: relative; z-index: 1; } .featured-hub-hero--navy { --featured-hub-hero-shape-color: var(--color-forest-dark); } .featured-hub-hero--cream { --featured-hub-hero-shape-color: #6a6f3f; } .featured-hub-hero--linen { --featured-hub-hero-shape-color: #7a563d; } .featured-hub-hero--violet { --featured-hub-hero-shape-color: #7a563d; } .featured-hub-hero--rose { --featured-hub-hero-shape-color: #923a3c; } .featured-hub-hero--denim { --featured-hub-hero-shape-color: var(--color-forest); } .featured-hub-hero--pumpkin { --featured-hub-hero-shape-color: #7a563d; } .featured-hub-hero--evergreen { --featured-hub-hero-shape-color: #1c665b; } .featured-hub-hero--sage { --featured-hub-hero-shape-color: #3f6f4f; } .featured-hub-hero__badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 15px; border-radius: 999px; background: var(--featured-hub-hero-badge-bg, rgba(35, 32, 48, 0.08)); color: inherit; font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .featured-hub-hero--cream .featured-hub-hero__badge, .featured-hub-hero--linen .featured-hub-hero__badge, .featured-hub-hero--sage .featured-hub-hero__badge { background: var(--featured-hub-hero-badge-bg, rgba(35, 32, 48, 0.08)); } .featured-hub-hero__title { max-width: 860px; margin: 10px auto 0; color: inherit; font-family: var(--font-heading); font-size: var(--featured-hub-hero-title-size); font-weight: 600; line-height: 1.2; letter-spacing: 0; } .featured-hub-hero__subtitle { max-width: 760px; margin: 8px auto 0; color: inherit; font-family: var(--font-heading); font-size: var(--featured-hub-hero-subtitle-size); font-weight: 500; line-height: 1.5; } .featured-hub-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 24px; width: min(100%, 1080px); margin: -24px auto 60px; padding: 0; } .featured-hub-category { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; min-width: 0; color: var(--color-ink); text-align: left; text-decoration: none; } .featured-hub-category__media { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 20px; background: var(--color-sand-dark); display: grid; place-items: center; overflow: hidden; contain: paint; isolation: isolate; box-shadow: 0 0 0 rgba(35, 32, 48, 0); transition: box-shadow 0.2s ease; } .featured-hub-category__image { display: block; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, 0, 0) scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .featured-hub-category__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: transparent; pointer-events: none; } .featured-hub-category__media--rose { background: #ead8dc; } .featured-hub-category__media--sage { background: #dfe8df; } .featured-hub-category__media--sky { background: var(--color-line); } .featured-hub-category__media--gold { background: #eee2ba; } .featured-hub-category__media--peach { background: #efd9cc; } .featured-hub-category__media--denim { background: var(--color-sand-dark); } .featured-hub-category__media--green { background: #dce8d8; } .featured-hub-category__media--red { background: #ead3cc; } .featured-hub-category__media--brown { background: #e5d7c8; } .featured-hub-category__media--slate { background: var(--color-line-dark); } .featured-hub-category__media--purple { background: #e1d1bc; } .featured-hub-category__media--wood { background: #eadcc9; } .featured-hub-category__media--cream { background: var(--color-sand); } .featured-hub-category__media--linen { background: var(--color-sand); } .featured-hub-category__media--evergreen { background: #dce8d8; } .featured-hub-category__label { display: flex; justify-content: center; flex-direction: column; min-height: 26px; color: var(--color-ink); font-family: Montserrat, var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; text-underline-offset: 3px; word-wrap: break-word; } .featured-hub-category__arrow { display: none; } .featured-hub-category:hover .featured-hub-category__media, .featured-hub-category:focus-visible .featured-hub-category__media { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } @media (max-width: 600px) { .featured-hub-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: -16px auto 44px; } .featured-hub-category__label { font-size: 15px; } } .featured-hub-shop-by { width: min(100%, 1080px); margin: 0 auto; padding: 0; } .featured-hub-shop-by:first-of-type { margin-top: -28px; } .featured-hub-shop-by__title { margin: 0 0 18px; font-family: var(--font-heading); font-size: 24px; font-weight: 600; color: var(--color-ink); letter-spacing: 0; } .featured-hub-categories--group { width: 100%; margin: 0 0 46px; } @media (max-width: 600px) { .featured-hub-shop-by:first-of-type { margin-top: -4px; } .featured-hub-shop-by__title { font-size: 20px; margin-bottom: 12px; } .featured-hub-categories--group { width: 100%; margin: 0 0 30px; } } .featured-hub-category:hover .featured-hub-category__image, .featured-hub-category:focus-visible .featured-hub-category__image { transform: translate3d(0, 0, 0) scale(1.035); } .featured-hub-category:hover .featured-hub-category__label, .featured-hub-category:focus-visible .featured-hub-category__label { text-decoration: underline; } .featured-hub-assistant { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto 58px; padding: 26px 32px; border-radius: 24px; background: var(--color-cream); box-shadow: inset 0 0 0 1px var(--color-line); } .featured-hub-assistant__copy { min-width: 0; } .featured-hub-assistant__eyebrow { display: block; margin-bottom: 8px; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .featured-hub-assistant__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: clamp(26px, 2.2vw, 38px); font-weight: 700; line-height: 1.02; letter-spacing: 0; } .featured-hub-assistant__text { max-width: 800px; margin: 10px 0 0; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.5; } .featured-hub-assistant__button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 230px; min-height: 68px; padding: 0 28px; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); text-decoration: none; font-family: var(--font-body); font-size: 19px; font-weight: 800; gap: 10px; } .featured-hub-assistant__button img { width: 22px; height: 14px; flex: 0 0 auto; } .featured-hub-section { margin: 0 0 86px; } .featured-hub-section__head { display: flex; align-items: end; justify-content: center; gap: 18px; margin-bottom: 22px; text-align: center; } .featured-hub-section__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: clamp(34px, 4vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: 0; } .featured-hub-section__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--color-sand-dark); color: var(--color-ink); text-decoration: none; font-family: var(--font-body); font-size: 14px; font-weight: 800; line-height: 1; } .featured-hub-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; } .featured-hub-filter { --featured-hub-filter-bg: var(--color-sand-dark); --featured-hub-filter-text: var(--color-ink); min-height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--featured-hub-filter-text); text-decoration: none; font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1; text-transform: capitalize; position: relative; isolation: isolate; overflow: visible; transition: color 0.18s ease; } .featured-hub-filter::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--featured-hub-filter-bg); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease; will-change: transform; } .featured-hub-filter:hover, .featured-hub-filter:focus-visible { --featured-hub-filter-bg: var(--sort-control-bg); } .featured-hub-filter.is-active { --featured-hub-filter-bg: var(--sort-control-bg); --featured-hub-filter-text: var(--color-ink); font-weight: 600; } .featured-hub-filter:hover::before, .featured-hub-filter:focus-visible::before { transform: scale(var(--hover-grow-scale, 1.035)); } .featured-hub-filter:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 24%, transparent); outline-offset: 2px; } .featured-hub-curated-products__quick { margin-bottom: 12px; } .featured-hub-curated-products__filter-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .featured-hub-filter--drawer { flex: 0 0 auto; } .featured-hub-curated-products__quick .featured-hub-filter { --featured-hub-filter-bg: var(--bg-pill); --featured-hub-filter-text: var(--color-ink); gap: 6px; } .featured-hub-curated-products__quick .featured-hub-filter:hover, .featured-hub-curated-products__quick .featured-hub-filter:focus-visible { --featured-hub-filter-bg: var(--bg-pill); } .featured-hub-curated-products__quick .featured-hub-filter.is-active, .featured-hub-curated-products__quick .featured-hub-filter.is-active:hover, .featured-hub-curated-products__quick .featured-hub-filter.is-active:focus-visible { --featured-hub-filter-bg: var(--color-ink); --featured-hub-filter-text: var(--color-cream); gap: 4px; padding: 0 0 0 14px; font-weight: 600; } .featured-hub-filter__label, .featured-hub-filter__remove { position: relative; z-index: 1; } .featured-hub-filter__label { white-space: nowrap; } .featured-hub-filter__remove { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; margin: 4px 4px 4px 0; border-radius: 999px; background: transparent; transition: background-color 0.18s ease; } .featured-hub-curated-products__quick .featured-hub-filter.is-active .featured-hub-filter__remove { display: inline-flex; } .featured-hub-filter__remove:hover, .featured-hub-filter:focus-visible .featured-hub-filter__remove { background: color-mix(in srgb, var(--color-page-bg) 12%, transparent); } .featured-hub-filter__remove-icon { display: block; width: 13px; height: 13px; max-width: none; object-fit: contain; pointer-events: none; } .featured-hub-filter-empty { width: min(640px, 100%); margin: 24px auto 4px; text-align: center; } .featured-hub-filter-empty__title, .featured-hub-filter-empty__text { margin: 0; font-family: var(--font-display); letter-spacing: 0; } .featured-hub-filter-empty__title { color: var(--color-ink); font-size: 24px; font-weight: 700; line-height: 1.16; } .featured-hub-filter-empty__text { margin-top: 6px; color: var(--color-ink-soft); font-size: 15px; font-weight: 600; line-height: 1.35; } .featured-hub-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .featured-hub-product { min-width: 0; } .featured-hub-product__media { position: relative; min-height: 360px; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 22% 20%, rgba(255, 249, 241, 0.72) 0%, rgba(255, 249, 241, 0) 36%), linear-gradient(135deg, var(--featured-product-tone) 0%, var(--color-sand) 100%); box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.08); } .featured-hub-product__pick { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--color-cream); color: var(--color-ink); font-family: var(--font-body); font-size: 13px; font-weight: 800; opacity: 0.7; } .featured-hub-product__body { padding: 12px 0 0; } .featured-hub-product__title { margin: 0; color: var(--color-ink); font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .featured-hub-product__meta, .featured-hub-product__price { margin: 4px 0 0; color: var(--color-forest); font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.3; } .featured-hub-product__price { color: var(--color-ink); font-size: 19px; font-weight: 800; } .featured-hub-product__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; min-height: 44px; color: var(--color-ink); text-decoration: none; font-family: var(--font-body); font-size: 14px; font-weight: 800; } .featured-hub-product__more:hover img, .featured-hub-product__more:focus-visible img, .featured-hub-funnel-card:hover .featured-hub-funnel-card__cta img, .featured-hub-funnel-card:focus-visible .featured-hub-funnel-card__cta img { transform: translate3d(4px, 0, 0); } .featured-hub-note { max-width: 980px; margin: 0 auto; padding: 28px 32px; border-radius: 24px; background: var(--color-cream); box-shadow: inset 0 0 0 1px var(--color-line); } .featured-hub-note__title { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 30px; line-height: 1.05; } .featured-hub-note__text { margin: 10px 0 0; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.5; } @media (max-width: 1142px) { .page--featured-hub { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } } @media (max-width: 980px) { .page--featured-hub { --featured-hub-shell: var(--homepage-shell-width); } .featured-hub-page { padding-top: 0; } .featured-hub-root--home-guide { width: min(100% - 28px, 760px); } .featured-hub-home-hero { min-height: 238px; padding: var(--featured-hub-hero-top-gap) 22px 86px; } .featured-hub-home-grid { gap: var(--featured-hub-tile-gap); margin-top: -78px; padding: 0; } .featured-hub-nav { justify-content: flex-start; padding-bottom: 4px; } .featured-hub-hero { padding: var(--featured-hub-hero-top-gap) 20px 68px; min-height: 190px; } .featured-hub-categories { gap: var(--featured-hub-tile-gap); margin-top: -58px; padding: 0; } .featured-hub-assistant { align-items: flex-start; flex-direction: column; padding: 28px 24px; } .featured-hub-assistant__button { width: 100%; min-width: 0; } .featured-hub-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .featured-hub-product__media { min-height: 280px; } .featured-hub-curated-products__head { grid-template-columns: 1fr; } .featured-hub-products__filter { justify-self: center; order: 2; } .featured-hub-curated-products__head-spacer { display: none; } } @media (max-width: 760px) { .page--featured-hub { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } } @media (max-width: 880px) { body.page--featured-hub { padding-top: 66px; } } @media (max-width: 980px) { .featured-hub-filters { width: 100vw; max-width: none; min-height: 58px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); gap: 16px; padding: 7px 16px 10px; box-sizing: border-box; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; } .featured-hub-curated-products__quick::after { content: ""; flex: 0 0 48px; width: 48px; height: 1px; } .featured-hub-filters::-webkit-scrollbar { display: none; } .featured-hub-filter { flex: 0 0 auto; min-height: 44px; padding: 0 16px; font-size: 14px; scroll-snap-align: start; } } @media (max-width: 720px) { .featured-hub-product__more { display: none; } .featured-hub-products { width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); margin-right: 0; gap: 10px; } } @media (max-width: 620px) { .page--featured-hub { --featured-hub-tile-size: clamp(128px, calc((100vw - 58px) / 2), 158px); --featured-hub-tile-gap: 14px; --featured-hub-tile-row-width: 100%; } .featured-hub-root--home-guide { width: var(--featured-hub-shell); } .featured-hub-home-hero { min-height: 230px; padding: var(--featured-hub-hero-top-gap) 16px 78px; } .featured-hub-home-hero__title, .featured-hub-hero__title { font-size: var(--featured-hub-hero-title-mobile-size); } .featured-hub-home-hero__subtitle, .featured-hub-hero__subtitle { font-size: var(--featured-hub-hero-subtitle-mobile-size); } .featured-hub-home-tile__label { min-height: 30px; font-size: 13px; } .featured-hub-home-grid, .featured-hub-categories { width: 100%; gap: 14px; margin-bottom: 44px; } .featured-hub-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); } .featured-hub-home-tile__media, .featured-hub-category__media { border-radius: 24px; } .featured-hub-category__label { min-height: 30px; font-size: 13px; } .featured-hub-seller-tabs { width: 100%; max-width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; margin: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-padding-inline: 0; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .featured-hub-seller-tabs::-webkit-scrollbar { display: none; } .featured-hub-seller-tab { flex: 0 0 auto; min-width: max-content; width: auto; font-size: 16px; scroll-snap-align: start; } .featured-hub-sellers__row-head { align-items: flex-start; flex-direction: column; } .featured-hub-sellers__controls { width: 100%; justify-content: space-between; } .featured-hub-curated-products__title { font-size: 30px; } .featured-hub-funnel-card { grid-template-columns: 1fr; } .featured-hub-funnel-card__media { min-height: 150px; } .featured-hub-products { grid-template-columns: 1fr; } .featured-hub-section__head { align-items: center; flex-direction: column; } } .cat-card__jedi-pick { position: absolute; top: var(--cat-card-corner-badge-top, 8px); left: var(--cat-card-corner-badge-left, 8px); z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-height: var(--cat-card-corner-badge-size, 38px); height: var(--cat-card-corner-badge-size, 38px); gap: var(--cat-card-corner-badge-gap, 6px); padding: 0 var(--cat-card-corner-badge-pad-x, 13px); border-radius: 999px; background: var(--jedi-picks-badge-bg, var(--color-jedi-picks-yellow)); color: var(--jedi-picks-badge-ink, var(--color-ink)); font-family: var(--font-body); font-size: var(--cat-card-corner-badge-font-size, 13px); font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: none; opacity: 1; pointer-events: none; white-space: nowrap; transition: opacity 0.16s ease; } .cat-card:hover .cat-card__jedi-pick, .cat-card:has(:focus-visible) .cat-card__jedi-pick, .cat-card.is-actions-open .cat-card__jedi-pick { opacity: 0; } .cat-card__jedi-pick-icon { width: var(--cat-card-corner-badge-icon-size, 14px); height: var(--cat-card-corner-badge-icon-size, 14px); display: block; object-fit: contain; } .cat-card__jedi-pick-label { display: inline-block; } .cat-card__jedi-pick-label::after { content: none; } .featured-hub-room-section { margin: 0 0 80px; } .featured-hub-room-section__head { text-align: center; margin: 0 auto 28px; max-width: 720px; } .featured-hub-room-section__title { margin: 0; color: #232030; font-family: var(--font-body); font-size: 30px; font-weight: 600; line-height: 1.2; } .featured-hub-room-section__subtitle { margin: 8px 0 0; color: #6b6571; font-family: var(--font-body); font-size: 14px; font-weight: 500; } .featured-hub-room-section__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .featured-hub-room-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--color-cream); color: var(--color-ink); text-decoration: none; box-shadow: none; transition: box-shadow 0.18s ease; } .featured-hub-room-card:hover, .featured-hub-room-card:focus-visible { box-shadow: var(--shadow-card-hover); } .featured-hub-room-card__media { display: block; height: 160px; background: var(--room-card-bg, #dfe8df); } .featured-hub-room-card__label { padding: 14px 18px 16px; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.2; } .featured-hub-room-card--sage { --room-card-bg: #cfe1d2; } .featured-hub-room-card--rose { --room-card-bg: #ead8dc; } .featured-hub-room-card--peach { --room-card-bg: #efd9cc; } .featured-hub-room-card--sky { --room-card-bg: var(--color-line); } .featured-hub-room-card--wood, .featured-hub-room-card--brown { --room-card-bg: #e0d2c2; } .featured-hub-room-card--cream, .featured-hub-room-card--linen { --room-card-bg: #ebe2cf; } .featured-hub-room-card--green, .featured-hub-room-card--evergreen { --room-card-bg: #c9dcc9; } .featured-hub-room-card--gold { --room-card-bg: #eee2ba; } .featured-hub-room-card--slate { --room-card-bg: var(--color-line-dark); } .featured-hub-room-card--denim { --room-card-bg: var(--color-sand-dark); } .featured-hub-seo.category-seo-summary { --featured-hub-seo-shell-width: min(var(--jp-page-shell-max), calc(100vw - 68px)); width: var(--featured-hub-seo-shell-width); max-width: none; margin-inline: calc((100% - var(--featured-hub-seo-shell-width)) / 2); } @media (max-width: 1142px) { .featured-hub-seo.category-seo-summary { --featured-hub-seo-shell-width: calc(100vw - 48px); } } @media (max-width: 760px) { .featured-hub-seo.category-seo-summary { --featured-hub-seo-shell-width: calc(100vw - 32px); } } @media (max-width: 980px) { .featured-hub-room-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .featured-hub-room-card__media { height: 120px; } } @media (max-width: 480px) { .featured-hub-room-section__grid { grid-template-columns: 1fr; } .featured-hub-room-card__media { height: 140px; } } .gift-finder { --gift-finder-inline-pad: 40px; position: relative; isolation: isolate; width: 100%; margin: clamp(-82px, -5.5vw, -46px) 0 44px; padding: 18px var(--gift-finder-inline-pad) 0; box-sizing: border-box; overflow: visible; } .gift-finder__torn-band { position: absolute; z-index: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; height: clamp(330px, 23vw, 360px); color: var(--color-forest); pointer-events: none; opacity: 1; overflow: hidden; } .gift-finder__torn-band-svg { display: block; width: 100%; height: 100%; } .gift-finder__steps, .gift-finder__actions, .gift-finder__result { position: relative; z-index: 1; } .gift-finder__refine, .gift-finder__cta { appearance: none; border: 0; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 800; cursor: pointer; } .gift-finder.is-started .gift-finder__steps { position: relative; z-index: 1; } .featured-hub-root--gift-finder .featured-hub-shop-by, .featured-hub-root--gift-finder .featured-hub-categories, .featured-hub-root:has(.gift-finder) .featured-hub-shop-by, .featured-hub-root:has(.gift-finder) .featured-hub-categories { width: 100%; max-width: none; } .featured-hub-root--gift-finder .featured-hub-home-hero, .featured-hub-root--gift-finder .gift-finder { position: relative; z-index: 1; } .featured-hub-root--gift-finder .featured-hub-home-hero, .featured-hub-root--gift-finder .featured-hub-hero, .featured-hub-root:has(.gift-finder) .featured-hub-home-hero, .featured-hub-root:has(.gift-finder) .featured-hub-hero { min-height: clamp(660px, 88vh, 860px); padding: clamp(83px, calc(16vh - 25px), 131px) 36px clamp(126px, 15vh, 172px); color: var(--color-cream); overflow: hidden; background: linear-gradient(180deg, rgb(0 0 0 / 0.44) 0%, rgb(0 0 0 / 0.16) 76%, rgb(0 0 0 / 0.04) 100%), url("/assets/gift-hub/hero/gift-hub-search-hero.webp") center top / cover no-repeat; } .featured-hub-root--gift-finder .featured-hub-home-hero::before, .featured-hub-root--gift-finder .featured-hub-hero::before, .featured-hub-root:has(.gift-finder) .featured-hub-home-hero::before, .featured-hub-root:has(.gift-finder) .featured-hub-hero::before { content: none; } .featured-hub-root--gift-finder .featured-hub-home-hero::after, .featured-hub-root:has(.gift-finder) .featured-hub-home-hero::after { content: ""; position: absolute; inset: auto 0 0; z-index: 0; height: clamp(84px, 10vh, 132px); background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--color-page-bg) 12%, transparent) 22%, color-mix(in srgb, var(--color-page-bg) 55%, transparent) 62%, var(--color-page-bg) 100% ); pointer-events: none; } .featured-hub-root--gift-finder .featured-hub-home-hero__copy, .featured-hub-root:has(.gift-finder) .featured-hub-home-hero__copy { z-index: 1; } .featured-hub-root--gift-finder .featured-hub-home-hero__badge, .featured-hub-root--gift-finder .featured-hub-hero__badge, .featured-hub-root:has(.gift-finder) .featured-hub-home-hero__badge, .featured-hub-root:has(.gift-finder) .featured-hub-hero__badge { display: none; } .featured-hub-root--gift-finder .featured-hub-home-hero__title, .featured-hub-root--gift-finder .featured-hub-hero__title, .featured-hub-root:has(.gift-finder) .featured-hub-home-hero__title, .featured-hub-root:has(.gift-finder) .featured-hub-hero__title { margin-top: 0; max-width: none; position: relative; top: 0; font-size: clamp(58px, 6.8vw, 104px); line-height: 0.9; text-shadow: 0 16px 46px rgb(0 0 0 / 0.34); } .featured-hub-root--gift-finder .featured-hub-home-hero__subtitle, .featured-hub-root--gift-finder .featured-hub-hero__subtitle, .featured-hub-root:has(.gift-finder) .featured-hub-home-hero__subtitle, .featured-hub-root:has(.gift-finder) .featured-hub-hero__subtitle { display: none; } .featured-hub-root--gift-finder .featured-hub-home-grid, .featured-hub-root:has(.gift-finder) .featured-hub-home-grid { margin-top: 28px; } @media (min-width: 721px) { .featured-hub-root--gift-finder { --gift-finder-hero-overlap: clamp(-401px, calc(-26.3vw - 5px), -291px); transition: --gift-finder-hero-overlap var(--gift-hub-search-reveal-duration, 0.56s) var(--gift-hub-search-reveal-ease, cubic-bezier(0.2, 0.78, 0.18, 1)); } .featured-hub-root--gift-finder .gift-finder { margin-top: var(--gift-finder-hero-overlap); will-change: margin-top; } .featured-hub-root--gift-finder.is-gift-assistant-primed { --gift-finder-hero-overlap: clamp(-345px, calc(-26.3vw + 51px), -235px); } .featured-hub-root--gift-finder.is-gift-assistant-collapsing { --gift-finder-hero-overlap: clamp(-401px, calc(-26.3vw - 5px), -291px); } .featured-hub-root--gift-finder:has(.featured-hub-search.is-expanded), .featured-hub-root--gift-finder:has(.featured-hub-search:focus-within) { --gift-finder-hero-overlap: clamp(-175px, calc(-26.3vw + 261px), -65px); } .featured-hub-root--gift-finder:has(.featured-hub-search.is-assistant-chatting) { --gift-finder-hero-overlap: clamp(-155px, calc(-26.3vw + 281px), -45px); } } @media (prefers-reduced-motion: reduce) { .featured-hub-root--gift-finder { transition: none; } } @media (max-width: 720px) { .featured-hub-root--gift-finder .featured-hub-home-hero, .featured-hub-root:has(.gift-finder) .featured-hub-home-hero { min-height: 520px; padding: 86px 18px 138px; background-position: center top; } .featured-hub-root--gift-finder .featured-hub-home-hero__title, .featured-hub-root:has(.gift-finder) .featured-hub-home-hero__title { font-size: clamp(48px, 18vw, 76px); } .featured-hub-search { margin-top: 24px; --gift-hub-search-rest-height: 72px; --gift-hub-search-expanded-height: 340px; --gift-hub-search-compact-height: 68px; --gift-hub-search-radius: 28px; } .featured-hub-search.has-attachments { --gift-hub-search-expanded-height: 438px; } .featured-hub-search__bar { display: flex; flex-direction: column; gap: 8px 10px; height: var(--gift-hub-search-rest-height); min-height: 0; padding: 14px; border-radius: var(--gift-hub-search-radius); } .featured-hub-search.is-expanded .featured-hub-search__bar, .featured-hub-search:focus-within .featured-hub-search__bar { height: var(--gift-hub-search-expanded-height); min-height: 0; padding: 14px; border-radius: var(--gift-hub-search-radius); } .featured-hub-search.is-voice-mode .featured-hub-search__bar, .featured-hub-search.is-processing .featured-hub-search__bar { height: var(--gift-hub-search-compact-height); min-height: 0; padding: 8px 10px; border-radius: var(--gift-hub-search-radius); } .featured-hub-search__composer { position: static; left: auto; right: auto; bottom: auto; width: 100%; grid-template-columns: 36px minmax(0, 1fr); gap: 8px 10px; } .featured-hub-search.is-expanded .featured-hub-search__composer, .featured-hub-search:focus-within .featured-hub-search__composer { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "drafts drafts drafts" "input input input" "add tools submit"; row-gap: 18px; } .featured-hub-search__add { width: 36px; height: 36px; font-size: 28px; } .featured-hub-search__input, .featured-hub-search.is-expanded .featured-hub-search__input, .featured-hub-search:focus-within .featured-hub-search__input { min-height: 44px; max-height: 92px; padding-top: 4px; font-size: 16px; } .featured-hub-search.is-expanded .featured-hub-search__input, .featured-hub-search:focus-within .featured-hub-search__input { min-height: 32px; } .featured-hub-search__assistant-copy p { font-size: 14px; } .featured-hub-search__drafts { gap: 10px; } .featured-hub-search__draft--image { width: 84px; height: 84px; flex-basis: 84px; border-radius: 22px; } .featured-hub-search__tools, .featured-hub-search.is-expanded .featured-hub-search__tools, .featured-hub-search:focus-within .featured-hub-search__tools { justify-self: end; } .featured-hub-search__tool { width: 34px; height: 34px; } .featured-hub-search__submit, .featured-hub-search.is-expanded .featured-hub-search__submit, .featured-hub-search:focus-within .featured-hub-search__submit { justify-self: end; min-height: 46px; padding: 0 16px; font-size: 14px; } .featured-hub-search__assistant-panel { max-height: 176px; margin: 18px 2px 0; padding-right: 2px; } .featured-hub-search__assistant-mark { flex-basis: 36px; width: 36px; height: 36px; } .featured-hub-search__assistant-mark img { width: 24px; height: 24px; } .featured-hub-search__attachments { gap: 7px; } .featured-hub-search__attachment { max-width: min(100%, 320px); } .featured-hub-search__voice-panel, .featured-hub-search__processing { min-height: 52px; border-radius: var(--radius-pill); gap: 8px; } .featured-hub-search__voice-action { width: 52px; height: 52px; } .featured-hub-search__voice-main { justify-content: flex-start; } .featured-hub-search__voice-label, .featured-hub-search__processing-copy { font-size: 13px; } } @media (max-width: 420px) { .featured-hub-search__submit, .featured-hub-search.is-expanded .featured-hub-search__submit, .featured-hub-search:focus-within .featured-hub-search__submit { width: auto; } } @media (max-width: 720px) { .page--featured-hub:has(.featured-hub-root--gift-finder), .page--featured-hub:has(.gift-finder) { padding-top: 66px; } } .gift-finder__bar { display: none; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 22px; } .gift-finder__heading { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--intent-surface-sunken); color: var(--color-forest); font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .gift-finder__subheading { display: block; margin-top: 0; color: var(--color-ink-soft); font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.45; } .gift-finder__steps { display: flex; flex-direction: column; gap: 22px; } .gift-finder__step[hidden], .gift-finder__actions[hidden], .gift-finder__result[hidden] { display: none; } .gift-finder__step.is-active { animation: giftFinderStepIn 0.34s cubic-bezier(0.22, 1, 0.36, 1); } .gift-finder__step.is-revealed .gift-finder-card { animation: giftFinderCardPop 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(min(var(--gift-finder-card-index, 0), 9) * 48ms); } @keyframes giftFinderStepIn { from { transform: translateY(8px); } to { transform: translateY(0); } } @keyframes giftFinderCardPop { from { transform: translateY(14px); } to { transform: translateY(0); } } .gift-finder__q { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(20px, 1.45vw, 26px); font-weight: 700; line-height: 1.15; } .gift-finder__q-num { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; height: 36px; flex: 0 0 auto; padding: 0 22px; border-radius: var(--radius-pill); background: var(--color-forest); color: var(--color-cream); font-family: var(--font-display, var(--font-heading)); font-size: 18px; font-weight: 700; line-height: 1; } .gift-finder__q-text { min-width: 0; } .featured-hub-root--gift-finder .gift-finder__step:first-child .gift-finder__q { color: var(--color-cream); text-shadow: 0 10px 28px rgb(0 0 0 / 0.42); } .featured-hub-root--gift-finder .gift-finder__step:first-child .gift-finder__q-num { background: var(--color-cream); color: var(--color-ink); text-shadow: none; } .gift-finder__q-optional { margin-left: 9px; padding: 3px 9px; border-radius: 999px; background: var(--color-line, #E7E2D5); color: var(--color-ink-soft, #5F596E); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .gift-finder__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr)); gap: 14px; overflow-x: visible; scroll-snap-type: none; padding-bottom: 28px; scrollbar-width: none; } .gift-finder__cards::-webkit-scrollbar { height: 7px; } .gift-finder__cards::-webkit-scrollbar-thumb { background: var(--color-forest); border-radius: 999px; } .gift-finder__cards::-webkit-scrollbar-track { background: transparent; } .gift-finder-card { --gift-finder-card-bg: var(--intent-surface-sunken); --gift-finder-card-ink: var(--color-ink); --gift-finder-card-media-bg: var(--color-line); --gift-finder-card-hover-rotate: -1.4deg; --gift-finder-card-green: rgb(31 62 20); --gift-finder-card-mustard: rgb(232 149 20); --gift-finder-card-orange: rgb(240 86 24); --gift-finder-card-blue: rgb(43 78 193); --gift-finder-card-teal: rgb(30 126 154); --gift-finder-card-ochre: rgb(212 119 28); --gift-finder-card-indigo: rgb(86 63 184); --gift-finder-card-rust: rgb(174 82 39); width: 100%; scroll-snap-align: start; appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; text-align: left; min-width: 0; position: relative; } .gift-finder-card:nth-child(1) { --gift-finder-card-index: 0; --gift-finder-card-hover-rotate: -1.6deg; } .gift-finder-card:nth-child(2) { --gift-finder-card-index: 1; --gift-finder-card-hover-rotate: 1.25deg; } .gift-finder-card:nth-child(3) { --gift-finder-card-index: 2; --gift-finder-card-hover-rotate: -0.9deg; } .gift-finder-card:nth-child(4) { --gift-finder-card-index: 3; --gift-finder-card-hover-rotate: 1.7deg; } .gift-finder-card:nth-child(5) { --gift-finder-card-index: 4; --gift-finder-card-hover-rotate: -1.25deg; } .gift-finder-card:nth-child(6) { --gift-finder-card-index: 5; --gift-finder-card-hover-rotate: 1deg; } .gift-finder-card:nth-child(7) { --gift-finder-card-index: 6; --gift-finder-card-hover-rotate: -1.8deg; } .gift-finder-card:nth-child(8) { --gift-finder-card-index: 7; --gift-finder-card-hover-rotate: 1.45deg; } .gift-finder-card--sage, .gift-finder-card--green, .gift-finder-card--evergreen { --gift-finder-card-bg: var(--gift-finder-card-green); --gift-finder-card-ink: var(--color-cream); } .gift-finder-card--rose { --gift-finder-card-bg: var(--gift-finder-card-orange); --gift-finder-card-ink: var(--color-cream); } .gift-finder-card--peach, .gift-finder-card--cream { --gift-finder-card-bg: var(--gift-finder-card-mustard); --gift-finder-card-ink: var(--color-cream); } .gift-finder-card--gold { --gift-finder-card-bg: var(--gift-finder-card-ochre); --gift-finder-card-ink: var(--color-cream); } .gift-finder-card--sky { --gift-finder-card-bg: var(--gift-finder-card-teal); --gift-finder-card-ink: var(--color-cream); } .gift-finder-card--brown, .gift-finder-card--wood { --gift-finder-card-bg: var(--gift-finder-card-rust); --gift-finder-card-ink: var(--color-cream); } .gift-finder-card--denim, .gift-finder-card--slate { --gift-finder-card-bg: var(--gift-finder-card-blue); --gift-finder-card-ink: var(--color-cream); } .gift-finder-card--violet, .gift-finder-card--plum { --gift-finder-card-bg: var(--gift-finder-card-indigo); --gift-finder-card-ink: var(--color-cream); } .gift-finder-card__media { position: relative; aspect-ratio: 5 / 8; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 14px 4px 4px; box-sizing: border-box; background: var(--gift-finder-card-bg); color: var(--gift-finder-card-ink); opacity: 1; box-shadow: 0 2px 6px rgb(35 32 48 / 0.07), inset 0 0 0 1px rgb(35 32 48 / 0.05); transform-origin: 50% 82%; transition: box-shadow 0.24s ease, filter 0.24s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .gift-finder-card__image-wrap { position: relative; display: block; flex: 1 1 auto; min-height: 0; width: 100%; border-radius: 22px; overflow: hidden; background: var(--gift-finder-card-media-bg); } .gift-finder-card__cell { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-line); opacity: 1; filter: none; } @media (max-width: 980px) { .gift-finder { padding-left: 0; padding-right: 0; overflow-x: clip; } .gift-finder__cards { display: flex; gap: 12px; overflow-x: auto; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 16px; padding-right: 16px; padding-bottom: 30px; scroll-snap-type: x mandatory; scroll-padding-left: 16px; overscroll-behavior-inline: contain; contain: layout paint; -webkit-overflow-scrolling: touch; } .gift-finder-card { flex: 0 0 25vw; scroll-snap-align: start; } } @media (max-width: 560px) { .gift-finder { width: 100%; margin: clamp(-98px, -24vw, -64px) 0 36px; padding: 10px 0 0; } .gift-finder__torn-band { top: 0; height: clamp(320px, 84vw, 360px); left: calc(50% - 50vw); right: calc(50% - 50vw); } .gift-finder-card { flex-basis: 32vw; } .gift-finder-card__media { gap: 7px; padding: 10px 4px 4px; border-radius: 20px; } .gift-finder-card__image-wrap { border-radius: 16px; } .gift-finder-card__label { min-height: 32px; } .gift-finder-card__label-line { font-size: 14px; } .gift-finder-card__label-line--pre { font-size: 11px; } .gift-finder__subheading { font-size: 13px; } } .gift-finder-card:focus-visible .gift-finder-card__media { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } @media (hover: hover) and (pointer: fine) and (min-width: 981px) { .gift-finder__cards.is-hovering .gift-finder-card:not(.is-hovered) .gift-finder-card__media { filter: grayscale(1) saturate(0) brightness(1.04) contrast(0.98); } .gift-finder-card.is-hovered { z-index: 2; } .gift-finder-card.is-hovered .gift-finder-card__media { filter: none; transform: translateY(-7px) scale(1.045) rotate(var(--gift-finder-card-hover-rotate)); box-shadow: 0 18px 34px rgb(35 32 48 / 0.22); } } .gift-finder-card:focus-visible { outline: none; } .gift-finder-card:focus-visible .gift-finder-card__media { outline: 2px solid rgba(63, 106, 96, 0.55); outline-offset: 2px; } .gift-finder-card.is-selected .gift-finder-card__media { outline: 3px solid var(--color-ink); outline-offset: 3px; box-shadow: 0 12px 28px rgb(35 32 48 / 0.18); } .gift-finder-card__label { display: flex; flex-direction: column; justify-content: center; min-height: 44px; color: var(--gift-finder-card-ink); font-family: var(--font-display); font-size: 18px; font-weight: 750; line-height: 1.02; letter-spacing: 0; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: none; } .gift-finder-card__label-line { display: block; } .gift-finder-card__label-line--pre { margin-bottom: 2px; font-family: var(--font-heading); font-size: 13px; font-weight: 800; line-height: 1; } @media (max-width: 560px) { .gift-finder-card__label { min-height: 32px; } .gift-finder-card__label-line--pre { font-size: 11px; } } .gift-finder__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; width: fit-content; max-width: 100%; margin: 12px auto 0; text-align: center; } .gift-finder__refine { min-width: 180px; min-height: 52px; padding: 13px 28px; position: relative; isolation: isolate; background: var(--color-page-bg); color: var(--color-ink); box-shadow: none; font-size: 16px; transition: color 0.18s ease; } .gift-finder__refine::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--color-ink); border-radius: inherit; background: var(--color-page-bg); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, border-color 0.18s ease; } .gift-finder__refine:hover, .gift-finder__refine:focus-visible { box-shadow: none; outline: none; } .gift-finder__refine:hover::before, .gift-finder__refine:focus-visible::before { transform: scale(var(--hover-grow-scale, 1.035)); } .gift-finder__cta { --gift-finder-cta-bg: var(--color-ink, #232030); min-width: 220px; min-height: 52px; padding: 13px 30px; background: transparent; color: var(--color-cream, #FFF9F1); box-shadow: none; font-size: 16px; position: relative; isolation: isolate; transition: color 0.18s ease; } .gift-finder.has-selection .gift-finder__cta, .gift-finder.has-stale-results .gift-finder__cta { --gift-finder-cta-bg: var(--color-forest); } .gift-finder__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gift-finder-cta-bg); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease; } .gift-finder__cta:hover:not(:disabled), .gift-finder__cta:focus-visible:not(:disabled) { transform: none; box-shadow: none; outline: none; } .gift-finder__cta:hover:not(:disabled)::before, .gift-finder__cta:focus-visible:not(:disabled)::before { transform: scale(var(--hover-grow-scale, 1.035)); } .gift-finder .gift-finder__cta:disabled { --gift-finder-cta-bg: var(--control-disabled-bg); color: var(--auth-disabled-text); cursor: not-allowed; opacity: 1; transition: none; } .gift-finder .gift-finder__cta:disabled::before { background: var(--control-disabled-bg); transform: none; transition: none; } .gift-finder__result { position: relative; z-index: 1; margin-top: 30px; } @media (min-width: 981px) { .featured-hub-root--gift-finder .gift-finder__result { width: calc(100% + var(--gift-finder-inline-pad) + var(--gift-finder-inline-pad)); margin-left: calc(0px - var(--gift-finder-inline-pad)); margin-right: calc(0px - var(--gift-finder-inline-pad)); } } .gift-finder__result.is-revealed { animation: giftFinderStepIn 0.34s cubic-bezier(0.22, 1, 0.36, 1); } .gift-finder-loading { padding-top: 4px; } .gift-finder-loading__status { position: relative; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; max-width: min(100%, 560px); min-height: 62px; margin-bottom: 18px; padding: 8px 18px 8px 10px; border-radius: 24px; background: var(--color-cream); color: var(--color-ink); box-shadow: 0 14px 32px rgb(35 32 48 / 0.08), inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 7%, transparent); overflow: hidden; } .gift-finder-loading__copy { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 15px; font-weight: 800; line-height: 1.35; } .gift-finder-loading__spark--one { right: 18px; top: 13px; } .gift-finder-loading__spark--two { right: 42px; bottom: 12px; animation-delay: 0.34s; } .gift-finder-loading__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; } .gift-finder-loading__card { display: block; min-width: 0; } .gift-finder-loading__media, .gift-finder-loading__line { display: block; border-radius: 16px; } .gift-finder-loading__media { aspect-ratio: 1 / 1; } .gift-finder-loading__line { width: 62%; height: 12px; margin-top: 11px; border-radius: var(--radius-pill); } .gift-finder-loading__line--wide { width: 88%; } .gift-finder-result__intro { margin-bottom: 16px; } .gift-finder-result__title { margin: 0; color: var(--color-ink, #232030); font-family: var(--font-display, var(--font-heading)); font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.01em; } .gift-finder-result__summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; } .gift-finder-result__summary span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-forest) 10%, var(--color-cream)); color: var(--color-ink); font-family: var(--font-body); font-size: 12px; font-weight: 820; line-height: 1; } .gift-finder-result__quick { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; } .gift-finder-result__pill { --featured-hub-filter-bg: var(--filter-pill-bg); --featured-hub-filter-text: var(--color-ink); appearance: none; border: 0; cursor: pointer; min-height: 42px; padding: 0 16px; border-radius: 999px; background: transparent; color: var(--featured-hub-filter-text); font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; gap: 0; position: relative; isolation: isolate; overflow: visible; transition: color 0.18s ease; } .gift-finder-result__pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--featured-hub-filter-bg); transform: scale(1); transform-origin: center; transition: transform 0.18s ease, background-color 0.18s ease; will-change: transform; } .gift-finder-result__pill:hover::before, .gift-finder-result__pill:focus-visible::before { transform: scale(var(--hover-grow-scale, 1.035)); } .gift-finder-result__pill.is-active { --featured-hub-filter-bg: var(--color-ink); --featured-hub-filter-text: var(--color-cream); gap: 4px; font-weight: 600; padding: 0 4px 0 14px; } .gift-finder-result__pill-label { display: inline-flex; align-items: center; min-height: 42px; white-space: nowrap; position: relative; z-index: 1; } .gift-finder-result__pill-remove { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; margin: 4px 0; padding: 0; border: 0; border-radius: 999px; background: transparent; font-size: 0; line-height: 1; cursor: pointer; position: relative; z-index: 1; transition: background-color 0.18s ease; } .gift-finder-result__pill.is-active .gift-finder-result__pill-remove { display: inline-flex; } .gift-finder-result__pill-remove:hover, .gift-finder-result__pill-remove:focus-visible { background: rgba(248, 241, 235, 0.12); } .gift-finder-result__pill-remove:focus-visible { outline: 2px solid rgba(248, 241, 235, 0.45); outline-offset: 2px; } .gift-finder-result__pill-remove-icon { display: block; width: 12px; height: 12px; max-width: none; object-fit: contain; pointer-events: none; } .gift-finder-result__pill:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-ink) 24%, transparent); outline-offset: 2px; } .gf-prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 4px; } .gift-finder__result .cat-card[data-product-card].cat-card--title-one-line { --cat-card-title-lift: 0px; } .gf-prod { display: flex; flex-direction: column; min-width: 0; } .gf-prod__media { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(35, 32, 48, 0.05); transition: box-shadow 0.2s ease; } .gf-prod__media:hover { box-shadow: 0 10px 24px rgba(35, 32, 48, 0.13), inset 0 0 0 1px rgba(35, 32, 48, 0.06); } .gf-prod__img { width: 100%; height: 100%; object-fit: cover; display: block; } .gf-prod__pick { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--color-forest, #3F6A60); color: var(--color-cream, #FFF9F1); font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .gf-prod__pick img { width: 13px; height: 13px; } .gf-prod__body { padding-top: 10px; display: flex; flex-direction: column; gap: 4px; } .gf-prod__title { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.3; } .gf-prod__title a { color: var(--color-ink, #232030); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gf-prod__title a:hover { text-decoration: underline; } .gf-prod__rating { display: flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--color-ink, #232030); } .gf-prod__rating img { width: 14px; height: 14px; } .gf-prod__reviews { color: var(--color-ink-soft, #5F596E); font-weight: 600; } .gf-prod__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .gf-prod__price-new { font-family: var(--font-body); font-size: 15px; font-weight: 800; color: var(--color-forest, #3F6A60); } .gf-prod__price-old { font-size: 13px; color: var(--color-ink-soft, #5F596E); text-decoration: line-through; } .gf-prod__discount { font-size: 12px; font-weight: 700; color: var(--color-ink-soft, #5F596E); } .gf-prod__foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; min-width: 0; } .gf-prod__ship { flex: none; font-family: var(--font-body); font-size: 11px; font-weight: 800; color: var(--color-forest, #3F6A60); text-transform: uppercase; letter-spacing: 0.03em; } .gf-prod__store { font-family: var(--font-body); font-size: 12px; color: var(--color-ink-soft, #5F596E); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gf-prod__store:hover { text-decoration: underline; } @media (max-width: 1024px) { .gf-prod-grid, .gift-finder-loading__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 680px) { .gf-prod-grid, .gift-finder-loading__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } } .gift-finder-result__empty { margin: 18px 0 0; text-align: center; color: var(--color-ink-soft, #5F596E); font-family: var(--font-body); font-size: 15px; } .gift-finder-result__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; } .gift-finder-result__see-all { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 30px; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-body); font-size: 15px; font-weight: 800; text-decoration: none; transition: color 0.18s ease; } .gift-finder-result__see-all::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-forest); transform: scale(1); transform-origin: center; transition: transform 0.18s ease; will-change: transform; } .gift-finder-result__see-all:hover::before, .gift-finder-result__see-all:focus-visible::before { transform: scale(var(--hover-grow-scale, 1.035)); } .gift-finder-result__see-all:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-forest) 38%, transparent); outline-offset: 4px; } .gift-finder-result__see-all-label, .gift-finder-result__see-all-arrow { position: relative; z-index: 1; } .gift-finder-result__see-all-arrow { display: block; width: 22px; height: 14px; flex: 0 0 auto; object-fit: contain; pointer-events: none; } .gift-finder-result__restart { appearance: none; cursor: pointer; min-height: 50px; padding: 13px 26px; border-radius: 999px; border: 0; background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: 15px; font-weight: 700; transition: box-shadow 0.18s ease; } .gift-finder-result__restart:hover, .gift-finder-result__restart:focus-visible { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); outline: none; } @media (max-width: 600px) { .gift-finder__cta, .gift-finder__refine { width: 100%; } } @media (max-width: 980px) { .featured-hub-room-section__grid, .featured-hub-products { --featured-hub-mobile-rail-gap: 16px; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; width: calc(100vw - 28px); margin-left: calc(50% - 50vw + 14px); margin-right: 0; gap: var(--featured-hub-mobile-rail-gap); grid-template-columns: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .featured-hub-room-section__grid::-webkit-scrollbar, .featured-hub-products::-webkit-scrollbar { display: none; } .featured-hub-room-section__grid > *, .featured-hub-products > * { flex: 0 0 clamp(190px, 28vw, 260px); min-width: 0; scroll-snap-align: start; } } @media (max-width: 720px) { .featured-hub-room-section__grid, .featured-hub-products { --featured-hub-mobile-rail-gap: 14px; width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); } .featured-hub-room-section__grid > *, .featured-hub-products > * { flex-basis: calc((100% - var(--featured-hub-mobile-rail-gap)) / 2.2); } .featured-hub-product__media { min-height: 0; aspect-ratio: 1 / 1; } } /* [bundle] /styles/components/shell-page.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* [bundle] /styles/animations.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @keyframes jp-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes jp-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes jp-fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes jp-fade-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes jp-pop-in { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes jp-slide-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes jp-slide-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes jp-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes jp-pulse-glow { 0%, 100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes jp-typing-dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } @keyframes jp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes jp-voice-pulse { 0% { box-shadow: 0 0 0 0 var(--color-ai-glow); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes jp-voice-wave { 0%, 100% { height: 4px; } 50% { height: 16px; } } @keyframes jp-ai-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes jp-ai-sparkle { 0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(180deg); } } @keyframes jp-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes jp-bar-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes jp-stroke-draw { from { stroke-dashoffset: var(--stroke-length, 1000); } to { stroke-dashoffset: 0; } } .jp-anim-fade-in { animation: jp-fade-in var(--duration-normal) var(--ease-standard) both; } .jp-anim-fade-up { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-fade-down { animation: jp-fade-down var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-fade-scale { animation: jp-fade-scale var(--duration-normal) var(--ease-spring) both; } .jp-anim-pop-in { animation: jp-pop-in var(--duration-slow) var(--ease-spring) both; } .jp-anim-slide-in-right { animation: jp-slide-in-right var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-slide-in-left { animation: jp-slide-in-left var(--duration-normal) var(--ease-out-expo) both; } .jp-anim-bar-grow { animation: jp-bar-grow var(--duration-slower) var(--ease-out-expo) both; transform-origin: left center; } .jp-anim-pulse-glow { animation: jp-pulse-glow 2s ease-in-out infinite; } .jp-anim-shimmer { background: linear-gradient( 90deg, rgba(35,32,48,0.04) 0%, rgba(35,32,48,0.08) 50%, rgba(35,32,48,0.04) 100% ); background-size: 200% 100%; animation: jp-shimmer 1.4s ease-in-out infinite; } .jp-stagger-1 { animation-delay: 50ms; } .jp-stagger-2 { animation-delay: 100ms; } .jp-stagger-3 { animation-delay: 150ms; } .jp-stagger-4 { animation-delay: 200ms; } .jp-stagger-5 { animation-delay: 250ms; } .jp-stagger-6 { animation-delay: 300ms; } .jp-stagger-7 { animation-delay: 350ms; } .jp-stagger-8 { animation-delay: 400ms; } .jp-auto-stagger > * { animation: jp-fade-up var(--duration-normal) var(--ease-out-expo) both; } .jp-auto-stagger > *:nth-child(1) { animation-delay: 0ms; } .jp-auto-stagger > *:nth-child(2) { animation-delay: 50ms; } .jp-auto-stagger > *:nth-child(3) { animation-delay: 100ms; } .jp-auto-stagger > *:nth-child(4) { animation-delay: 150ms; } .jp-auto-stagger > *:nth-child(5) { animation-delay: 200ms; } .jp-auto-stagger > *:nth-child(6) { animation-delay: 250ms; } .jp-auto-stagger > *:nth-child(7) { animation-delay: 300ms; } .jp-auto-stagger > *:nth-child(8) { animation-delay: 350ms; } .jp-auto-stagger > *:nth-child(9) { animation-delay: 400ms; } .jp-auto-stagger > *:nth-child(10) { animation-delay: 450ms; } .skip-link { position: absolute; left: -9999px; top: -9999px; padding: 12px 16px; background: var(--color-ink); color: var(--color-cream); border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600; z-index: var(--z-toast); } .skip-link:focus { left: 16px; top: 16px; outline: 3px solid var(--shell-page-accent); } body.page--shell { --color-forest: var(--color-ink); --color-forest-dark: var(--color-ink-soft); --color-emerald: var(--color-ink); --shell-page-grid-max: 1120px; --shell-page-grid-gutter: clamp(32px, 4vw, 68px); --shell-page-grid-width: min(var(--shell-page-grid-max), calc(100% - var(--shell-page-grid-gutter))); --shell-page-readable-max: var(--shell-page-grid-max); --shell-page-panel-bg: var(--popup-bg); --shell-page-panel-bg-muted: var(--popup-bg); --shell-page-accent: var(--color-ink); --shell-page-accent-soft: var(--color-ink-soft); --shell-page-cta-bg: var(--color-ink); background: var(--color-page-bg); color: var(--color-ink); font-family: var(--font-body); margin: 0; min-height: 100vh; display: flex; flex-direction: column; } body.page--shell .site-footer { margin-top: auto; } .shell-page { flex: 1 0 auto; padding: 0 0 var(--space-9); animation: jp-fade-in var(--duration-slow) var(--ease-out-expo); } .shell-page__hero { background: var(--color-page-bg); padding: 52px 0 44px; border-bottom: 0; } body.page--shell[data-technical-hero-size="compact"] .shell-page__hero { padding: 42px 0 34px; } body.page--shell[data-technical-hero-size="editorial"] .shell-page__hero { padding: 58px 0 48px; } .shell-page__hero-inner { width: var(--shell-page-grid-width); max-width: var(--shell-page-grid-max); box-sizing: border-box; margin: 0 auto; padding-inline: var(--jp-page-shell-inset); text-align: center; animation: jp-fade-up var(--duration-slow) var(--ease-out-expo); } .shell-page__hero--with-media .shell-page__hero-inner { max-width: var(--shell-page-grid-max); display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.54fr); gap: 58px; align-items: center; text-align: left; } .shell-page__hero-media { grid-column: 2; grid-row: 1 / span 3; margin: 0; min-width: 0; overflow: hidden; border: 0; border-radius: 24px; background: var(--popup-bg); aspect-ratio: 4 / 3; } .shell-page__hero--with-media .shell-page__eyebrow, .shell-page__hero--with-media .shell-page__title, .shell-page__hero--with-media .shell-page__lead { grid-column: 1; } .shell-page__hero-media img, .shell-page__hero-media video, .shell-page__hero-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } .shell-page__eyebrow { display: inline-block; margin: 0 0 13px; padding: 0; font-size: var(--font-size-micro); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shell-page-accent-soft); background: transparent; border: 0; border-radius: 0; } .shell-page__title { font-family: var(--font-display); font-size: clamp(1.9rem, 1vw + 1.45rem, 2.35rem); line-height: var(--line-height-tight); margin: 0 0 13px; color: var(--color-ink); letter-spacing: 0; } body.page--shell[data-technical-hero-size="compact"] .shell-page__title { font-size: clamp(1.72rem, 0.8vw + 1.38rem, 2.1rem); } body.page--shell[data-technical-hero-size="editorial"] .shell-page__title { font-size: clamp(2rem, 1.1vw + 1.5rem, 2.55rem); } .shell-page__lead { font-size: var(--font-size-body-lg); line-height: var(--line-height-normal); color: var(--color-ink-soft); margin: 0 auto; max-width: 60ch; } .shell-page__hero--with-media .shell-page__lead { margin-inline: 0; } .shell-page__body { width: var(--shell-page-grid-width); padding: 42px 0 68px; max-width: var(--shell-page-grid-max); margin: 0 auto; box-sizing: border-box; padding-inline: var(--jp-page-shell-inset); } body.page--shell[data-technical-pages-loading="1"] .shell-page__body > .legal-doc, body.page--shell[data-technical-pages-loading="1"] .shell-page__body > .shell-page__placeholder { visibility: hidden; } .shell-page[data-technical-template="support-hub"] .shell-page__body, .shell-page[data-technical-template="contact-router"] .shell-page__body, .shell-page[data-technical-template="faq-index"] .shell-page__body, .shell-page[data-technical-template="policy-index"] .shell-page__body, .shell-page[data-technical-template="process"] .shell-page__body, .shell-page[data-technical-template="seller-landing"] .shell-page__body, .shell-page[data-technical-template="fees"] .shell-page__body { max-width: var(--shell-page-grid-max); } .shell-page[data-technical-template="support-hub"] .shell-page__hero-inner { max-width: var(--shell-page-grid-max); text-align: center; } .shell-page[data-technical-template="support-hub"] .shell-page__lead { margin-inline: auto; } .shell-page__notice { background: var(--color-page-bg); border-bottom: 0; } .shell-page__notice-inner { width: var(--shell-page-grid-width); max-width: var(--shell-page-grid-max); margin: 0 auto; padding: 18px 0; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; } .shell-page__notice-copy { min-width: 0; padding: 18px 22px; border: 0; border-radius: 22px; background: var(--shell-page-panel-bg); } .shell-page__notice-label { margin: 0 0 6px; color: var(--shell-page-accent-soft); font-size: var(--font-size-micro); font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .shell-page__notice-copy p:not(.shell-page__notice-label) { margin: 0; color: var(--color-ink-soft); font-size: 15px; line-height: 1.58; } .shell-page__notice-copy p:not(.shell-page__notice-label) + p { margin-top: 10px; } .shell-page__notice-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-heading); font-size: 14px; font-weight: 850; text-decoration: none; white-space: nowrap; isolation: isolate; overflow: visible; transition: color var(--duration-fast) var(--ease-standard); } .shell-page__notice-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--shell-page-cta-bg); pointer-events: none; transform: scale(1); transform-origin: center; transition: transform var(--duration-fast) var(--ease-standard); will-change: transform; } .shell-page__notice-cta:hover, .shell-page__notice-cta:focus-visible { color: var(--color-cream); } .shell-page__notice-cta:hover::before, .shell-page__notice-cta:focus-visible::before { transform: scale(var(--hover-grow-scale)); } .shell-page__notice-cta-icon, .shell-page__cta-icon { position: relative; width: 12px; height: 12px; display: inline-block; flex: 0 0 auto; object-fit: contain; z-index: 1; } .shell-page__smart-search { display: grid; gap: 14px; margin: 0 0 28px; padding: 28px; border: 0; border-radius: 24px; background: var(--shell-page-panel-bg); } .shell-page__smart-search--hero { grid-column: 1 / -1; width: min(760px, 100%); margin: 28px auto 0; padding: 0; background: transparent; border-radius: 0; } .shell-page__smart-search-head { display: grid; gap: 5px; } .shell-page__smart-search-kicker { margin: 0; color: var(--shell-page-accent-soft); font-size: var(--font-size-micro); font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .shell-page__smart-search-head h2 { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: 23px; line-height: 1.18; letter-spacing: 0; } .shell-page__smart-search-head p { margin: 0; color: var(--color-ink-soft); font-size: 14px; line-height: 1.55; } .shell-page__smart-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border: 1px solid rgba(214, 207, 184, 0.9); border-radius: 999px; background: rgba(248, 241, 235, 0.74); } .shell-page__smart-search-input { width: 100%; min-width: 0; min-height: 52px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink); font: inherit; font-size: 15px; outline: 0; padding: 0 18px; } .shell-page__smart-search-input::placeholder { color: var(--color-ink-soft); } .shell-page__smart-search-input:focus-visible { outline: 0; } .shell-page__smart-search-submit { position: relative; inline-size: 78px; min-height: 52px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-cream); cursor: pointer; font-family: var(--font-heading); font-size: 14px; font-weight: 850; isolation: isolate; overflow: visible; transition: color var(--duration-fast) var(--ease-standard); } .shell-page__smart-search-submit::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--shell-page-cta-bg); pointer-events: none; transform: scale(1); transform-origin: center; transition: transform var(--duration-fast) var(--ease-standard); will-change: transform; } .shell-page__smart-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 0.42fr); gap: 18px; align-items: start; } .shell-page__smart-search--hero:not(.is-querying) .shell-page__smart-main { display: none; } .shell-page__smart-search-submit:hover, .shell-page__smart-search-submit:focus-visible { color: var(--color-cream); } .shell-page__smart-search-submit:hover::before, .shell-page__smart-search-submit:focus-visible::before { transform: scale(var(--hover-grow-scale)); } .shell-page__smart-search-chips { display: flex; flex-wrap: wrap; gap: 8px; } .shell-page__smart-search--hero .shell-page__smart-search-chips { justify-content: center; } .shell-page__smart-chip { position: relative; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--color-ink-soft); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; padding: 0 16px; isolation: isolate; overflow: visible; transition: color var(--duration-fast) var(--ease-standard); } .shell-page__smart-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(214, 207, 184, 0.75); border-radius: inherit; background: rgba(248, 241, 235, 0.5); pointer-events: none; transform: scale(1); transform-origin: center; transition: transform var(--duration-normal) var(--ease-soft), border-color var(--duration-fast) var(--ease-standard); will-change: transform; } .shell-page__smart-chip:hover, .shell-page__smart-chip:focus-visible { color: var(--color-ink-soft); } .shell-page__smart-chip:hover::before, .shell-page__smart-chip:focus-visible::before { border-color: var(--shell-page-accent); transform: scale(var(--hover-grow-scale)); } .shell-page__smart-results { display: grid; gap: 8px; } .shell-page__smart-result { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 66px; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--shell-page-panel-bg); color: var(--color-ink); text-decoration: none; box-shadow: none; transition: box-shadow var(--duration-fast) var(--ease-standard); } .shell-page__smart-result:hover, .shell-page__smart-result:focus-visible { color: var(--color-ink); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } .shell-page__smart-result--primary { background: var(--shell-page-panel-bg); } .shell-page__smart-result-mark, .shell-page__smart-path-mark { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--shell-page-accent) 8%, transparent); flex: 0 0 auto; } .shell-page__smart-result-mark-icon, .shell-page__smart-path-icon { width: 18px; height: 18px; display: block; object-fit: contain; filter: brightness(0) saturate(100%) invert(13%) sepia(13%) saturate(999%) hue-rotate(211deg) brightness(92%) contrast(91%); } .shell-page__smart-result-copy { display: grid; gap: 4px; min-width: 0; } .shell-page__smart-result-badge { justify-self: start; color: var(--shell-page-accent-soft); font-size: 10px; font-weight: 850; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .shell-page__smart-result-copy strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 15px; line-height: 1.2; } .shell-page__smart-result-copy span { color: var(--color-ink-soft); font-size: 13px; line-height: 1.42; } .shell-page__smart-result-icon { width: 13px; height: 13px; display: block; object-fit: contain; } .shell-page__smart-aside { display: grid; gap: 0; border-top: 0; padding-top: 2px; } .shell-page__smart-aside-title { margin: 0; padding: 0 0 10px; color: var(--shell-page-accent-soft); font-size: var(--font-size-micro); font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .shell-page__smart-path { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(214, 207, 184, 0.48); color: var(--color-ink); text-decoration: none; } .shell-page__smart-path:hover, .shell-page__smart-path:focus-visible { color: var(--color-ink); } .shell-page__smart-path-mark { width: 32px; height: 32px; } .shell-page__smart-path-icon { width: 16px; height: 16px; } .shell-page__smart-path-copy { min-width: 0; display: grid; gap: 3px; } .shell-page__smart-path-kicker { color: var(--shell-page-accent-soft); font-size: 10px; font-weight: 850; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .shell-page__smart-path-copy strong { color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; line-height: 1.18; } .shell-page__smart-path-copy span:not(.shell-page__smart-path-kicker) { color: var(--color-ink-soft); font-size: 12px; line-height: 1.38; } .shell-page__placeholder { border: 1px solid var(--color-line); background: var(--popup-bg); border-radius: 8px; padding: 28px; text-align: left; animation: jp-fade-up var(--duration-slower) var(--ease-out-expo); } .shell-page__placeholder-eyebrow { margin: 0 0 var(--space-2); font-size: var(--font-size-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--shell-page-accent-soft); } .shell-page__placeholder-text { margin: 0; font-size: var(--font-size-body); line-height: var(--line-height-normal); color: var(--color-ink-soft); max-width: 62ch; } .shell-page__placeholder a { display: inline-flex; align-items: center; min-height: 44px; } .shell-page__admin-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin: 0 0 var(--space-6); padding: 24px 0; border: 0; border-radius: 0; background: transparent; } .shell-page__admin-content--left, .shell-page__admin-content--right { grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr); align-items: center; } .shell-page__admin-content--left { grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr); } .shell-page__admin-content--top, .shell-page__admin-content--media-only { grid-template-columns: 1fr; } .shell-page__admin-content--media-only { padding: 0; overflow: hidden; } .shell-page__admin-copy { min-width: 0; } .shell-page__admin-eyebrow { margin: 0 0 var(--space-2); font-size: var(--font-size-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--shell-page-accent-soft); } .shell-page__admin-copy p:not(.shell-page__admin-eyebrow) { margin: 0 0 var(--space-3); font-size: var(--font-size-body); line-height: var(--line-height-normal); color: var(--color-ink-soft); } .shell-page__admin-copy p:last-child { margin-bottom: 0; } .shell-page__admin-media { margin: 0; overflow: hidden; border-radius: 24px; background: var(--popup-bg); aspect-ratio: 16 / 10; border: 0; } .shell-page__admin-content--media-only .shell-page__admin-media { border-radius: 24px; } .shell-page__admin-media img, .shell-page__admin-media video, .shell-page__admin-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } .shell-page__live-stack { display: grid; grid-template-columns: 1fr; align-items: start; gap: 6px; margin: 0 0 34px; border-top: 0; } .shell-page__live-block { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 26px 0 28px; border: 0; border-bottom: 0; border-radius: 0; background: transparent; } .shell-page__live-stack--brand-story, .shell-page__live-stack--guide-index, .shell-page__live-stack--press-kit, .shell-page__live-stack--support, .shell-page__live-stack--cms-standard, .shell-page__live-stack--utility, .shell-page__live-stack--careers { border-top: 0; } .shell-page__live-stack--brand-story .shell-page__live-block, .shell-page__live-stack--guide-index .shell-page__live-block, .shell-page__live-stack--press-kit .shell-page__live-block, .shell-page__live-stack--support .shell-page__live-block, .shell-page__live-stack--cms-standard .shell-page__live-block, .shell-page__live-stack--utility .shell-page__live-block, .shell-page__live-stack--careers .shell-page__live-block { grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr); column-gap: 34px; } .shell-page__live-stack--brand-story .shell-page__live-block-copy, .shell-page__live-stack--guide-index .shell-page__live-block-copy, .shell-page__live-stack--press-kit .shell-page__live-block-copy, .shell-page__live-stack--support .shell-page__live-block-copy, .shell-page__live-stack--cms-standard .shell-page__live-block-copy, .shell-page__live-stack--utility .shell-page__live-block-copy, .shell-page__live-stack--careers .shell-page__live-block-copy { display: grid; grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr); column-gap: 34px; grid-column: 1 / -1; align-items: start; } .shell-page__live-stack--brand-story .shell-page__live-block-type, .shell-page__live-stack--guide-index .shell-page__live-block-type, .shell-page__live-stack--press-kit .shell-page__live-block-type, .shell-page__live-stack--support .shell-page__live-block-type, .shell-page__live-stack--cms-standard .shell-page__live-block-type, .shell-page__live-stack--utility .shell-page__live-block-type, .shell-page__live-stack--careers .shell-page__live-block-type { grid-row: 1 / span 3; margin: 4px 0 0; } .shell-page__live-stack--brand-story .shell-page__live-block-title, .shell-page__live-stack--guide-index .shell-page__live-block-title, .shell-page__live-stack--press-kit .shell-page__live-block-title, .shell-page__live-stack--support .shell-page__live-block-title, .shell-page__live-stack--cms-standard .shell-page__live-block-title, .shell-page__live-stack--utility .shell-page__live-block-title, .shell-page__live-stack--careers .shell-page__live-block-title { grid-column: 2; } .shell-page__live-stack--brand-story .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--guide-index .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--press-kit .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--support .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--cms-standard .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--utility .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--careers .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--brand-story .shell-page__live-list, .shell-page__live-stack--guide-index .shell-page__live-list, .shell-page__live-stack--press-kit .shell-page__live-list, .shell-page__live-stack--support .shell-page__live-list, .shell-page__live-stack--cms-standard .shell-page__live-list, .shell-page__live-stack--utility .shell-page__live-list, .shell-page__live-stack--careers .shell-page__live-list, .shell-page__live-stack--brand-story .shell-page__live-block-cta, .shell-page__live-stack--guide-index .shell-page__live-block-cta, .shell-page__live-stack--press-kit .shell-page__live-block-cta, .shell-page__live-stack--support .shell-page__live-block-cta, .shell-page__live-stack--cms-standard .shell-page__live-block-cta, .shell-page__live-stack--utility .shell-page__live-block-cta, .shell-page__live-stack--careers .shell-page__live-block-cta { grid-column: 2; } .shell-page__live-block--banner, .shell-page__live-block--cta-band, .shell-page__live-block--media-banner { margin: 28px 0; padding: 24px; border: 0; border-radius: 24px; background: var(--shell-page-panel-bg); } .shell-page__live-block .shell-page__admin-media { margin: 0 0 8px; border-radius: 22px; } .shell-page__live-block-copy { min-width: 0; } .shell-page__live-block-type { margin: 0 0 8px; color: var(--shell-page-accent-soft); font-size: var(--font-size-micro); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .shell-page__live-block-title { margin: 0 0 8px; color: var(--color-ink); font-family: var(--font-display); font-size: 24px; line-height: 1.18; letter-spacing: 0; } .shell-page__live-block-copy p:not(.shell-page__live-block-type) { margin: 0 0 12px; color: var(--color-ink-soft); font-size: 16px; line-height: 1.66; } .shell-page__live-block-copy p:last-child { margin-bottom: 0; } .shell-page__live-list { margin: 0; padding: 0 0 0 20px; color: var(--color-ink-soft); font-size: 16px; line-height: 1.66; } .shell-page__live-list li + li { margin-top: 7px; } .shell-page__live-block-cta { position: relative; display: inline-flex; width: fit-content; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: var(--space-2); padding: 0 18px; border-radius: 999px; background: transparent; color: var(--color-cream); font-family: var(--font-heading); font-size: 13px; font-weight: 800; text-decoration: none; isolation: isolate; overflow: visible; transition: color var(--duration-fast) var(--ease-standard); } .shell-page__live-block-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--shell-page-cta-bg); pointer-events: none; transform: scale(1); transform-origin: center; transition: transform var(--duration-fast) var(--ease-standard); will-change: transform; } .shell-page__live-block-cta:hover, .shell-page__live-block-cta:focus-visible { color: var(--color-cream); } .shell-page__live-block-cta:hover::before, .shell-page__live-block-cta:focus-visible::before { transform: scale(var(--hover-grow-scale)); } .shell-page__live-stack--support-hub, .shell-page__live-stack--faq-index, .shell-page__live-stack--contact-router { grid-template-columns: repeat(2, minmax(240px, 1fr)); align-items: stretch; gap: 14px; border-top: 0; } .shell-page__live-stack--process, .shell-page__live-stack--seller-landing, .shell-page__live-stack--fees, .shell-page__live-stack--policy, .shell-page__live-stack--policy-index { grid-template-columns: repeat(2, minmax(220px, 1fr)); align-items: stretch; gap: 14px; border-top: 0; } .shell-page__live-stack--policy-index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .shell-page__live-stack--process { counter-reset: shellProcessStep; } .shell-page__live-stack--support-hub .shell-page__live-block, .shell-page__live-stack--faq-index .shell-page__live-block, .shell-page__live-stack--contact-router .shell-page__live-block, .shell-page__live-stack--process .shell-page__live-block, .shell-page__live-stack--seller-landing .shell-page__live-block, .shell-page__live-stack--fees .shell-page__live-block, .shell-page__live-stack--policy .shell-page__live-block, .shell-page__live-stack--policy-index .shell-page__live-block { box-sizing: border-box; height: 100%; position: relative; z-index: 0; padding: 22px; border: 0; border-radius: 22px; background: var(--popup-bg); box-shadow: none; transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .shell-page__live-stack--policy-index .shell-page__live-block { min-height: 214px; } .shell-page__live-stack--policy-index .shell-page__live-block-copy { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; } .shell-page__live-stack--policy-index .shell-page__live-block-cta { align-self: end; } .shell-page__live-stack--process .shell-page__live-block::before { counter-increment: shellProcessStep; content: counter(shellProcessStep); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px; border-radius: 50%; background: var(--shell-page-accent); color: var(--color-cream); font-family: var(--font-heading); font-size: 13px; font-weight: 850; } .shell-page__live-stack--support-hub .shell-page__live-block:hover, .shell-page__live-stack--faq-index .shell-page__live-block:hover, .shell-page__live-stack--contact-router .shell-page__live-block:hover, .shell-page__live-stack--process .shell-page__live-block:hover, .shell-page__live-stack--seller-landing .shell-page__live-block:hover, .shell-page__live-stack--fees .shell-page__live-block:hover, .shell-page__live-stack--policy .shell-page__live-block:hover, .shell-page__live-stack--policy-index .shell-page__live-block:hover { background: var(--popup-bg); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); z-index: 2; } .shell-page__live-stack--support-hub .shell-page__live-block:focus-within, .shell-page__live-stack--faq-index .shell-page__live-block:focus-within, .shell-page__live-stack--contact-router .shell-page__live-block:focus-within, .shell-page__live-stack--process .shell-page__live-block:focus-within, .shell-page__live-stack--seller-landing .shell-page__live-block:focus-within, .shell-page__live-stack--fees .shell-page__live-block:focus-within, .shell-page__live-stack--policy .shell-page__live-block:focus-within, .shell-page__live-stack--policy-index .shell-page__live-block:focus-within { background: var(--popup-bg); box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); z-index: 2; } .shell-page__live-stack--support-hub .shell-page__live-block-title, .shell-page__live-stack--faq-index .shell-page__live-block-title, .shell-page__live-stack--contact-router .shell-page__live-block-title, .shell-page__live-stack--process .shell-page__live-block-title, .shell-page__live-stack--seller-landing .shell-page__live-block-title, .shell-page__live-stack--fees .shell-page__live-block-title, .shell-page__live-stack--policy .shell-page__live-block-title, .shell-page__live-stack--policy-index .shell-page__live-block-title { font-family: var(--font-heading); font-size: 17px; line-height: 1.25; } .shell-page__live-stack--support-hub .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--faq-index .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--contact-router .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--process .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--seller-landing .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--fees .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--policy .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--policy-index .shell-page__live-block-copy p:not(.shell-page__live-block-type) { font-size: 14px; line-height: 1.55; } .shell-page__live-stack--support-hub { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .shell-page__live-stack--support-hub .shell-page__admin-media { display: none; } .shell-page__live-stack--support-hub .shell-page__live-block { min-height: 0; padding: 18px; border-radius: 24px; background: var(--popup-bg); } .shell-page__live-stack--support-hub .shell-page__live-block-title { font-size: 16px; } .shell-page__live-stack--support-hub .shell-page__live-block-copy p:not(.shell-page__live-block-type) { font-size: 13px; line-height: 1.48; } .shell-page__live-stack--support-hub .shell-page__live-block-cta { min-height: 44px; margin-top: 4px; padding: 0 18px; font-size: 12px; } .shell-page__policy-doc { width: 100%; max-width: var(--shell-page-grid-max); margin: 30px auto 0; padding-top: 10px; color: var(--color-ink); } .shell-page__policy-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 34px; padding: 18px 20px; border: 0; border-radius: 22px; background: var(--shell-page-panel-bg); } .shell-page__policy-meta-item { display: inline-flex; align-items: baseline; gap: 6px; color: var(--color-ink-soft); font-size: 13px; line-height: 1.35; } .shell-page__policy-meta-item strong { color: var(--shell-page-accent); font-weight: 850; } .shell-page__policy-meta-item em { font-style: normal; } .shell-page__policy-content { display: flow-root; max-width: var(--shell-page-readable-max); margin-inline: auto; font-size: 16px; line-height: 1.7; color: var(--color-ink-soft); } .shell-page__policy-content h2 { margin: 38px 0 12px; color: var(--color-ink); font-family: var(--font-display); font-size: 24px; line-height: 1.18; letter-spacing: 0; } .shell-page__policy-content h2:first-child { margin-top: 0; } .shell-page__policy-content h3 { margin: 22px 0 8px; color: var(--color-ink); font-family: var(--font-heading); font-size: 16px; line-height: 1.32; font-weight: 850; } .shell-page__policy-content p { margin: 0 0 14px; } .shell-page__policy-content a { color: var(--shell-page-accent); } body.page--shell .legal-doc { width: 100%; max-width: var(--shell-page-grid-max) !important; box-sizing: border-box; margin-inline: auto !important; color: var(--color-ink); } body.page--shell .legal-doc > h2, body.page--shell .legal-doc > h3, body.page--shell .legal-doc > p, body.page--shell .legal-doc > ul, body.page--shell .legal-doc > ol, body.page--shell .legal-doc > table { max-width: var(--shell-page-readable-max); margin-left: auto; margin-right: auto; } body.page--shell .legal-doc__meta, body.page--shell .legal-doc__contact, body.page--shell .legal-doc__callout, body.page--shell .legal-doc__warn { max-width: none; box-sizing: border-box; background: var(--shell-page-panel-bg) !important; border: 0 !important; border-radius: 22px !important; color: var(--color-ink-soft) !important; } body.page--shell .legal-doc__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 34px !important; padding: 18px 20px !important; font-size: 13px; line-height: 1.35; } body.page--shell .legal-doc__contact, body.page--shell .legal-doc__callout, body.page--shell .legal-doc__warn { margin-top: 32px !important; padding: 18px 20px !important; } body.page--shell .legal-doc__meta strong, body.page--shell .legal-doc__contact strong, body.page--shell .legal-doc__callout strong, body.page--shell .legal-doc__warn strong { color: var(--shell-page-accent) !important; } body.page--shell .legal-doc a { color: var(--shell-page-accent) !important; } @media (max-width: 980px) { .shell-page__live-stack--support-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .shell-page__hero { padding: 30px 0 28px; } .shell-page__hero--with-media .shell-page__hero-inner { grid-template-columns: 1fr; gap: 22px; } .shell-page__hero-media { grid-column: 1; grid-row: auto; width: 100%; border-radius: 20px; } .shell-page__hero-inner, .shell-page__body { padding-left: var(--jp-page-shell-inset); padding-right: var(--jp-page-shell-inset); } .shell-page__body { padding-top: 34px; padding-bottom: 48px; } .shell-page__notice-inner { grid-template-columns: 1fr; padding: 14px var(--jp-page-shell-inset); } .shell-page__notice-copy { padding: 16px; } .shell-page__notice-cta { justify-self: start; } .shell-page__smart-search { padding: 18px; margin-bottom: 22px; } .shell-page__smart-search--hero { padding: 0; } .shell-page__smart-search-head h2 { font-size: 21px; } .shell-page__smart-search-form { grid-template-columns: 1fr; border-radius: 24px; padding: 8px; } .shell-page__smart-search-submit { width: 100%; } .shell-page__smart-main { grid-template-columns: 1fr; gap: 12px; } .shell-page__smart-aside { margin-top: 2px; } .shell-page__smart-result { min-height: 58px; grid-template-columns: 32px minmax(0, 1fr) auto; padding: 12px; } .shell-page__smart-result-mark { width: 32px; height: 32px; } .shell-page__smart-result-mark-icon { width: 16px; height: 16px; } .shell-page__title { font-size: 30px; } body.page--shell[data-technical-hero-size="compact"] .shell-page__title, body.page--shell[data-technical-hero-size="editorial"] .shell-page__title { font-size: 28px; } .shell-page__lead { font-size: 15px; } .shell-page__placeholder { padding: 20px; } .shell-page__admin-content, .shell-page__admin-content--left, .shell-page__admin-content--right { grid-template-columns: 1fr; padding: 22px 0; } .shell-page__live-stack, .shell-page__live-stack--support-hub, .shell-page__live-stack--faq-index, .shell-page__live-stack--contact-router, .shell-page__live-stack--process, .shell-page__live-stack--seller-landing, .shell-page__live-stack--fees, .shell-page__live-stack--policy, .shell-page__live-stack--policy-index { grid-template-columns: 1fr; } .shell-page__live-block { padding: 22px 0 24px; } .shell-page__live-stack--brand-story .shell-page__live-block, .shell-page__live-stack--guide-index .shell-page__live-block, .shell-page__live-stack--press-kit .shell-page__live-block, .shell-page__live-stack--support .shell-page__live-block, .shell-page__live-stack--cms-standard .shell-page__live-block, .shell-page__live-stack--utility .shell-page__live-block, .shell-page__live-stack--careers .shell-page__live-block, .shell-page__live-stack--brand-story .shell-page__live-block-copy, .shell-page__live-stack--guide-index .shell-page__live-block-copy, .shell-page__live-stack--press-kit .shell-page__live-block-copy, .shell-page__live-stack--support .shell-page__live-block-copy, .shell-page__live-stack--cms-standard .shell-page__live-block-copy, .shell-page__live-stack--utility .shell-page__live-block-copy, .shell-page__live-stack--careers .shell-page__live-block-copy { grid-template-columns: 1fr; column-gap: 0; } .shell-page__live-stack--brand-story .shell-page__live-block-type, .shell-page__live-stack--guide-index .shell-page__live-block-type, .shell-page__live-stack--press-kit .shell-page__live-block-type, .shell-page__live-stack--support .shell-page__live-block-type, .shell-page__live-stack--cms-standard .shell-page__live-block-type, .shell-page__live-stack--utility .shell-page__live-block-type, .shell-page__live-stack--careers .shell-page__live-block-type, .shell-page__live-stack--brand-story .shell-page__live-block-title, .shell-page__live-stack--guide-index .shell-page__live-block-title, .shell-page__live-stack--press-kit .shell-page__live-block-title, .shell-page__live-stack--support .shell-page__live-block-title, .shell-page__live-stack--cms-standard .shell-page__live-block-title, .shell-page__live-stack--utility .shell-page__live-block-title, .shell-page__live-stack--careers .shell-page__live-block-title, .shell-page__live-stack--brand-story .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--guide-index .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--press-kit .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--support .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--cms-standard .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--utility .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--careers .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-stack--brand-story .shell-page__live-list, .shell-page__live-stack--guide-index .shell-page__live-list, .shell-page__live-stack--press-kit .shell-page__live-list, .shell-page__live-stack--support .shell-page__live-list, .shell-page__live-stack--cms-standard .shell-page__live-list, .shell-page__live-stack--utility .shell-page__live-list, .shell-page__live-stack--careers .shell-page__live-list, .shell-page__live-stack--brand-story .shell-page__live-block-cta, .shell-page__live-stack--guide-index .shell-page__live-block-cta, .shell-page__live-stack--press-kit .shell-page__live-block-cta, .shell-page__live-stack--support .shell-page__live-block-cta, .shell-page__live-stack--cms-standard .shell-page__live-block-cta, .shell-page__live-stack--utility .shell-page__live-block-cta, .shell-page__live-stack--careers .shell-page__live-block-cta { grid-column: auto; grid-row: auto; } .shell-page__live-block--banner, .shell-page__live-block--cta-band, .shell-page__live-block--media-banner, .shell-page__live-stack--support-hub .shell-page__live-block, .shell-page__live-stack--faq-index .shell-page__live-block, .shell-page__live-stack--contact-router .shell-page__live-block, .shell-page__live-stack--process .shell-page__live-block, .shell-page__live-stack--seller-landing .shell-page__live-block, .shell-page__live-stack--fees .shell-page__live-block, .shell-page__live-stack--policy .shell-page__live-block, .shell-page__live-stack--policy-index .shell-page__live-block { padding: 18px; border-radius: 20px; } .shell-page__live-block-title { font-size: 22px; } .shell-page__live-block-copy p:not(.shell-page__live-block-type), .shell-page__live-list { font-size: 15px; } } /* [bundle] /styles/components/site-chrome-minimal.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .page.page--shell { padding-top: 0; } @media (max-width: 720px) { .page.page--shell { padding-top: 0; } } .site-header.site-header--minimal { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-page-bg); border-bottom: 0; } .site-header__minimal-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) var(--space-5); min-height: 64px; } .site-header__minimal-brand { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; text-decoration: none; line-height: 0; flex: 0 0 auto; } .site-header__minimal-brand:hover, .site-header__minimal-brand:focus-visible { opacity: 1; } .site-header__minimal-logo { display: inline-flex; align-items: center; width: 109px; height: 42px; } .site-header__minimal-logo img { display: block; height: 36px; width: 109px; object-fit: contain; flex: 0 0 auto; } .site-header__minimal-nav { display: inline-flex; align-items: center; gap: var(--space-2); } .site-header__minimal-link { position: relative; isolation: isolate; overflow: visible; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); color: var(--color-ink-soft); text-decoration: none; font-family: var(--font-body); font-size: var(--font-size-caption); font-weight: 500; transition: color var(--duration-fast) var(--ease-standard); } .site-header__minimal-link::before, .site-header__minimal-cta::before, .site-header__minimal-account::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: transparent; pointer-events: none; z-index: -1; transform-origin: center; transition: background-color var(--duration-fast) var(--ease-standard); } .site-header__minimal-link:hover, .site-header__minimal-link:focus-visible { color: var(--color-ink); } .site-header__minimal-link:hover::before, .site-header__minimal-link:focus-visible::before, .site-header__minimal-cta:hover::before, .site-header__minimal-cta:focus-visible::before, .site-header__minimal-account:hover::before, .site-header__minimal-account:focus-visible::before { background: var(--popup-hover); animation: header-pop-bounce-soft var(--header-primary-hover-bounce-duration, 0.44s) var(--header-primary-hover-bounce-easing, cubic-bezier(0.22, 1, 0.28, 1)) both; } .site-header__minimal-cta { position: relative; isolation: isolate; overflow: visible; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); color: var(--color-ink); text-decoration: none; font-family: var(--font-body); font-size: var(--font-size-caption); font-weight: 600; letter-spacing: 0.01em; display: inline-flex; align-items: center; justify-content: center; transition: color var(--duration-fast) var(--ease-standard); } .site-header__minimal-cta:hover, .site-header__minimal-cta:focus-visible { color: var(--color-ink); } .site-header__minimal-account { position: relative; isolation: isolate; overflow: visible; display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px 6px 6px; border-radius: var(--radius-pill); color: var(--color-ink); text-decoration: none; font-family: var(--font-body); transition: color var(--duration-fast) var(--ease-standard); } .site-header__minimal-account[hidden] { display: none !important; } .site-header__minimal-cta[hidden] { display: none !important; } .site-header__minimal-account:hover, .site-header__minimal-account:focus-visible { color: var(--color-ink); } .site-header__minimal-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #3F6A60 0%, #2C4F47 100%); color: var(--color-cream); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; font-family: var(--font-body); flex-shrink: 0; } .site-header__minimal-avatar.has-image { background-position: center; background-repeat: no-repeat; background-size: cover; color: transparent; text-indent: -9999px; overflow: hidden; } .site-header__minimal-account-text { display: inline-flex; flex-direction: column; line-height: 1.1; min-width: 0; } .site-header__minimal-account-name { font-size: var(--font-size-caption); font-weight: 600; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; } .site-header__minimal-account-email { font-size: 11px; color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; } @media (max-width: 640px) { .site-header__minimal-inner { padding: var(--space-3) var(--space-4); gap: var(--space-3); } .site-header__minimal-link { display: none; } .site-header__minimal-account-text { display: none; } .site-header__minimal-account { padding: 4px; } } .site-footer.site-footer--minimal { background: var(--color-page-bg); border-top: 0; color: var(--color-ink-soft); padding: var(--space-6) 0 var(--space-5); } .site-footer__minimal-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .site-footer__minimal-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .site-footer__minimal-row--bottom { padding-top: var(--space-3); border-top: 0; font-size: var(--font-size-caption); } .site-footer__minimal-brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; line-height: 0; } .site-footer__minimal-brand:hover, .site-footer__minimal-brand:focus-visible { opacity: 1; } .site-footer__minimal-logo { display: block; height: 30px; width: auto; object-fit: contain; } .site-footer__minimal-nav { display: inline-flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .site-footer__minimal-nav a { color: var(--color-ink-soft); text-decoration: none; font-family: var(--font-body); font-size: var(--font-size-caption); font-weight: 500; transition: color var(--duration-fast) var(--ease-standard); display: inline-flex; align-items: center; min-height: 44px; padding: 6px 2px; } .site-footer__minimal-nav a:hover, .site-footer__minimal-nav a:focus-visible { color: var(--color-ink); } .site-footer__minimal-meta { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-ink-soft); font-family: var(--font-body); font-size: var(--font-size-caption); } .site-footer__minimal-divider { color: var(--color-slate); } .site-footer__minimal-locale { color: var(--color-ink-soft); } .site-footer__minimal-legal { display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .site-footer__minimal-legal a { color: var(--color-ink-soft); text-decoration: none; font-family: var(--font-body); font-size: var(--font-size-caption); transition: color var(--duration-fast) var(--ease-standard); } .site-footer__minimal-legal a:hover, .site-footer__minimal-legal a:focus-visible { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 640px) { .site-footer__minimal-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .site-footer__minimal-row--bottom { align-items: flex-start; } .site-footer__minimal-nav { gap: var(--space-4); } .site-footer__minimal-nav a, .site-footer__minimal-legal a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; } } /* [bundle] /styles/components/header-search-icons.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .header-desktop-search-shell.has-sparkle-prefix { position: relative; } .header-desktop-search-shell .header-search-sparkle { position: absolute; top: 2px; left: 2px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; z-index: 2; } .header-desktop-search-shell .header-search-sparkle, .header-desktop-search-shell .header-search-sparkle *, .header-desktop-search-shell .header-search-sparkle__svg, .header-desktop-search-shell .header-search-sparkle__svg *, .header-desktop-search-shell .header-search-sparkle__main, .header-desktop-search-shell .header-search-sparkle__small, .header-desktop-search-shell .header-search-sparkle__dot { stroke: none !important; stroke-width: 0 !important; } .header-desktop-search-shell .header-search-sparkle__svg { width: 44px; height: 44px; display: block; animation: lume-sparkle-breathe 3s ease-in-out infinite; transform-origin: 50% 50%; will-change: transform; } @keyframes lume-sparkle-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .header-desktop-search-shell:hover .header-search-sparkle__svg, .header-desktop-search-shell:focus-within .header-search-sparkle__svg { animation-duration: 1.6s; } @media (prefers-reduced-motion: reduce) { .header-desktop-search-shell .header-search-sparkle__svg { animation: none; } } @media (max-width: 720px) { .header-desktop-search-shell .header-search-sparkle { width: 36px; height: 36px; top: 4px; left: 4px; } .header-desktop-search-shell .header-search-sparkle__svg { width: 36px; height: 36px; } } .header-desktop-search-shell.has-sparkle-prefix .header-desktop-search-text { padding-left: 35px !important; } .header-search-hints { padding-left: 33px !important; } .fixed-header .header-search-native-text, .fixed-header .header-search-hints { color: var(--color-forest) !important; border-color: currentColor; outline-color: currentColor; } .fixed-header .header-search-input::placeholder { color: var(--color-forest) !important; } .fixed-header .header-search-active-outline { stroke: var(--color-forest) !important; } .fixed-header .header-mic-bubble.is-hover { fill: rgba(63, 106, 96, 0.08) !important; } .header-desktop-search-shell.has-sparkle-prefix:focus-within, .header-desktop-search-shell.has-sparkle-prefix.is-typing { animation: lume-active-shimmer 4s ease-in-out infinite; transition: border-color 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes lume-active-shimmer { 0%, 100% { border-color: var(--color-forest); box-shadow: color-mix(in srgb, var(--color-forest) 55%, transparent) 0 0 0 2px; } 25% { border-color: var(--color-forest-dark); box-shadow: color-mix(in srgb, var(--color-forest-dark) 52%, transparent) 0 0 0 2px; } 50% { border-color: var(--color-forest); box-shadow: color-mix(in srgb, var(--color-forest) 60%, transparent) 0 0 0 2.5px; } 75% { border-color: var(--color-forest-dark); box-shadow: color-mix(in srgb, var(--color-forest-dark) 54%, transparent) 0 0 0 2px; } } .header-desktop-search-shell.has-sparkle-prefix .header-desktop-search-mic { transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; opacity: 1; visibility: visible; transform: scale(1); } .header-desktop-search-shell.has-sparkle-prefix.is-typing .header-desktop-search-mic { opacity: 0; visibility: hidden; transform: scale(0.85); width: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; flex: 0 0 0 !important; transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1), width 260ms cubic-bezier(0.4, 0, 0.2, 1), margin 260ms cubic-bezier(0.4, 0, 0.2, 1), padding 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 220ms; pointer-events: none; } .header-desktop-search-shell.has-sparkle-prefix .header-desktop-search-mic { transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1), width 260ms cubic-bezier(0.4, 0, 0.2, 1), margin 260ms cubic-bezier(0.4, 0, 0.2, 1), padding 260ms cubic-bezier(0.4, 0, 0.2, 1); } .header-desktop-search-shell.has-sparkle-prefix .header-desktop-search-submit-label { opacity: 1; visibility: visible; transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1) 200ms, visibility 0s linear 200ms; } .header-desktop-search-shell.has-sparkle-prefix.is-typing .header-desktop-search-submit-label { display: none; opacity: 0; visibility: hidden; transition: opacity 0s, visibility 0s; } .fixed-header .header-desktop-search-submit.is-send-state .header-desktop-search-submit-label { display: none; } .header-desktop-search-shell.has-sparkle-prefix.is-typing .header-desktop-search-submit { width: 76px !important; min-width: 76px !important; max-width: 76px !important; height: 44px !important; padding: 0 !important; flex-shrink: 0; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1), min-width 260ms cubic-bezier(0.4, 0, 0.2, 1), max-width 260ms cubic-bezier(0.4, 0, 0.2, 1); } .header-desktop-search-shell.has-sparkle-prefix.is-typing .header-desktop-search-submit::before { animation: lume-submit-shimmer 4s ease-in-out infinite; transition: background-color 240ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes lume-submit-shimmer { 0%, 100% { background-color: var(--color-forest); } 25% { background-color: var(--color-forest-dark); } 50% { background-color: var(--color-forest); } 75% { background-color: var(--color-forest-dark); } } .header-desktop-search-active-outline { border-color: color-mix(in srgb, var(--color-forest) 65%, transparent) !important; } .header-mobile-search-btn { background: var(--color-forest) !important; } .header-mobile-search-page-field { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 16%, transparent) !important; } .header-burger-signin-avatar:not(.has-image) { background: color-mix(in srgb, var(--color-forest) 22%, transparent) !important; border-color: var(--color-forest) !important; color: var(--color-forest) !important; } .header-burger-signin-avatar svg path { stroke: currentColor !important; } .header-cart-card-thumb, .header-cart-card-thumb-blank { border-color: var(--color-forest) !important; color: var(--color-forest) !important; } .header-desktop-search-shell.has-sparkle-prefix.is-typing .header-desktop-search-submit-icon { left: 28px !important; top: 12px !important; transition: left 260ms cubic-bezier(0.4, 0, 0.2, 1), top 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease; } .header-desktop-search-shell.has-sparkle-prefix .header-desktop-search-submit { transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1), min-width 260ms cubic-bezier(0.4, 0, 0.2, 1), max-width 260ms cubic-bezier(0.4, 0, 0.2, 1); } .header-desktop-search-shell .header-desktop-search-submit-icon--send { transform: scale(0); transform-origin: 50% 50%; transition: transform 0s; } .header-desktop-search-shell .header-desktop-search-submit-icon { opacity: 1; transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, left 260ms cubic-bezier(0.4, 0, 0.2, 1), top 260ms cubic-bezier(0.4, 0, 0.2, 1); } .header-desktop-search-shell.has-sparkle-prefix.is-typing .header-desktop-search-submit-icon:not(.header-desktop-search-submit-icon--send) { opacity: 0; transition: opacity 0s; } .header-desktop-search-shell.has-sparkle-prefix.is-typing .header-desktop-search-submit-icon--send { opacity: 1 !important; transform: scale(1); transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms; left: 28px !important; top: 12px !important; } .header-desktop-search-submit-icon { transition: opacity 200ms ease, left 260ms cubic-bezier(0.4, 0, 0.2, 1), top 260ms cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 881px) and (max-width: 959px) { .fixed-header .header-desktop-search-submit { width: 52px !important; min-width: 52px !important; max-width: 52px !important; border-radius: 26px !important; overflow: hidden; } .fixed-header .header-desktop-search-submit-label { display: none !important; } .fixed-header .header-desktop-search-submit-icon { left: 16px !important; top: 12px !important; } .fixed-header .header-desktop-search-shell.has-sparkle-prefix.is-typing .header-desktop-search-submit-icon:not(.header-desktop-search-submit-icon--send) { opacity: 1 !important; left: 16px !important; top: 12px !important; } .fixed-header .header-desktop-search-shell.has-sparkle-prefix.is-typing .header-desktop-search-submit-icon--send { opacity: 0 !important; left: 16px !important; top: 12px !important; transform: scale(0) !important; } } /* [bundle] /styles/components/index-page.css */ .page--home { --home-bg: #f8f1eb; --home-ink: #232030; --home-ink-soft: #5f5b69; --home-hairline: #D9D5D0; --home-accent: #3F6A60; --home-accent-blue: #4A6585; --home-accent-brown: #6B5043; --home-radius-lg: 24px; --home-radius-md: 20px; --home-radius-sm: 16px; --home-radius-pill: 999px; --home-ease: cubic-bezier(0.16, 1, 0.3, 1); --home-ease-spring: cubic-bezier(0.22, 1, 0.36, 1); } .homepage-live-content__image, .media-slot__image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } [data-homepage-media-slot] { overflow: hidden; } [data-homepage-media-slot] > .homepage-live-content__image { border-radius: inherit; } main, .page-main { transition: padding-right 480ms var(--home-ease); } .site-footer { transition: margin-right 480ms var(--home-ease); } @media (min-width: 961px) { body.is-ai-panel-open:not(.page--gift-room) { width: auto; --homepage-shell-width: var(--jp-page-shell-width); --homepage-rail-arrow-overhang: 27px; --homepage-rail-fade-overhang: 26px; --homepage-rail-fade-width: 52px; --homepage-rail-overlay-reserve: 0px; } body.is-ai-panel-open:not(.page--gift-room) .hero-home, body.is-ai-panel-open:not(.page--gift-room) .auth-home-hero, body.is-ai-panel-open:not(.page--gift-room) .auth-event-banner, body.is-ai-panel-open:not(.page--gift-room) [class$="__inner"], body.is-ai-panel-open:not(.page--gift-room) [class$="__frame"], body.is-ai-panel-open:not(.page--gift-room) [class*="__inner "], body.is-ai-panel-open:not(.page--gift-room) [class*="__frame "] { margin-left: auto !important; margin-right: auto !important; } body.is-ai-panel-open:not(.page--gift-room) > main, body.is-ai-panel-open:not(.page--gift-room) .page-main { padding-right: clamp(0px, calc(2122px - 100vw), 326px); } body.is-ai-panel-open:not(.page--gift-room) .site-footer { margin-right: clamp(0px, calc(2122px - 100vw), 326px); } body.is-ai-panel-open:not(.page--gift-room) .hero-home { --hero-side-w: 0px; } body.is-ai-panel-open:not(.page--gift-room) .hero-home__slide { grid-template-columns: 1fr; gap: 0; } body.is-ai-panel-open:not(.page--gift-room) .hero-home__side { display: none; } body.is-ai-panel-open:not(.page--gift-room) .hero-home__main { grid-template-columns: minmax(0, 1fr) clamp(240px, 32%, 320px); } body.page--homepage.is-ai-panel-open:not(.is-homepage-authenticated) .hero-home[data-recently-viewed-guest-only] { --homepage-guest-lume-hero-trim: clamp(0px, calc(1798px - 100vw), 30px); width: calc( var(--homepage-shell-width, min(1372px, calc(100% - 68px))) + (var(--hero-shadow-buffer) * 2) - var(--homepage-guest-lume-hero-trim) ); } } @media (min-width: 961px) and (max-width: 1439px) { body.is-ai-panel-open:not(.page--gift-room) > main, body.is-ai-panel-open:not(.page--gift-room) .page-main { padding-right: 345px; } body.is-ai-panel-open:not(.page--gift-room) .site-footer { margin-right: 345px; } } @media (min-width: 961px) { body.is-ai-panel-open:not(.page--gift-room) .site-footer__meta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; } body.is-ai-panel-open:not(.page--gift-room) .site-footer__copyright { justify-self: auto; } body.is-ai-panel-open:not(.page--gift-room) .site-footer__legal { flex-wrap: wrap; justify-content: flex-start; min-width: 0; } } .home-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; height: 46px; border: 0; border-radius: var(--home-radius-pill); font-family: var(--font-body, 'Inter', sans-serif); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; isolation: isolate; background: transparent; color: inherit; text-decoration: none; transition: color 180ms var(--home-ease); } .home-cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; transform: scale(1); transform-origin: center; transition: transform 180ms var(--home-ease), background-color 180ms var(--home-ease), border-color 180ms var(--home-ease); will-change: transform; } .home-cta:hover::before, .home-cta:focus-visible::before { transform: scale(1.04); } .home-cta:focus-visible { outline: 2px solid rgba(35, 32, 48, 0.18); outline-offset: 3px; } .home-cta__label { position: relative; z-index: 1; flex: 0 0 auto; line-height: 1.15; } .home-cta svg { position: relative; z-index: 1; flex: 0 0 auto; } .home-cta--ink { color: var(--color-cream); } .home-cta--ink::before { background: var(--home-ink); } .home-cta--ghost-on-dark { color: var(--color-cream); } .home-cta--ghost-on-dark::before { background: transparent; border: 1px solid rgba(255, 249, 241, 0.5); } .home-cta--ghost-on-dark:hover::before { background: rgba(255, 249, 241, 0.12); border-color: var(--color-cream); } .hero-home { --hero-radius: var(--home-radius-lg); --hero-pad-y: 36px; --hero-pad-x: 36px; --hero-card-h: 360px; --hero-shadow-buffer: 5px; --hero-slide-duration: 880ms; --hero-slide-ease: cubic-bezier(0.25, 0.74, 0.22, 1); --hero-side-w: var(--hero-card-h); --hero-gap: 16px; position: relative; width: calc(var(--homepage-shell-width, min(1372px, calc(100% - 68px))) + (var(--hero-shadow-buffer) * 2)); max-width: calc(1372px + (var(--hero-shadow-buffer) * 2)); margin-inline: auto; isolation: isolate; container-type: inline-size; box-sizing: border-box; padding-block: 18px 0; padding-inline: 0; } .hero-home__viewport { position: relative; width: 100%; margin-inline: 0; padding: var(--hero-shadow-buffer); box-sizing: border-box; overflow: hidden; border-radius: var(--hero-radius); z-index: 0; box-shadow: none; transition: none; } .hero-home__viewport::before, .hero-home__viewport::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--hero-shadow-buffer) + 1px); background: var(--page-bg, #f8f1eb); opacity: 0; pointer-events: none; z-index: 2; transition: opacity 120ms linear; } .hero-home__viewport::before { left: 0; } .hero-home__viewport::after { right: 0; } .hero-home.is-hero-animating .hero-home__viewport::before, .hero-home.is-hero-animating .hero-home__viewport::after { opacity: 1; } .hero-home__track { position: relative; z-index: 1; display: flex; width: 100%; transition: transform var(--hero-slide-duration) var(--hero-slide-ease); will-change: transform; } .hero-home:not(.is-hero-animating) .hero-home__slide[aria-hidden="true"] { visibility: hidden; } .hero-home__slide { flex: 0 0 100%; width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--hero-side-w); gap: var(--hero-gap); min-height: var(--hero-card-h); box-sizing: border-box; padding: 0; } .hero-home__main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; align-self: stretch; border-radius: var(--hero-radius); overflow: hidden; isolation: isolate; box-sizing: border-box; min-height: var(--hero-card-h); height: var(--hero-card-h); box-shadow: none; transition: box-shadow 180ms ease; } .hero-home__main--green { background: var(--home-accent); color: var(--color-cream); } .hero-home__main--blue { background: var(--home-accent-blue); color: var(--color-cream); } .hero-home__main--brown { background: var(--home-accent-brown); color: var(--color-cream); } .hero-home__lead { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: var(--hero-pad-y) var(--hero-pad-x); } .hero-home__title { margin: 0; font-family: var(--font-headline, 'Fraunces', serif); font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: 0; color: var(--color-cream); } .hero-home__subtitle { margin: 0; font-family: var(--font-body, 'Inter', sans-serif); font-size: 15px; line-height: 1.55; color: rgba(255, 249, 241, 0.92); max-width: 520px; } .hero-home__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .hero-home__slide--auth-match .hero-home__actions { display: none; } .hero-home__media { position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ece8e1 0%, #d8d3ca 100%); min-height: 100%; height: 100%; } .hero-home__media img { transition: none; } .hero-home__side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-self: start; width: 100%; height: var(--hero-side-w); min-height: 0; padding: 22px 24px 26px; border-radius: var(--hero-radius); overflow: hidden; color: var(--color-cream); isolation: isolate; aspect-ratio: 1 / 1; box-sizing: border-box; box-shadow: none; transition: box-shadow 180ms ease; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(180deg, #fbe6cf 0%, #d6c8b6 60%, #2a2e3a 100%); } .hero-home__side::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.56) 100%); } .hero-home__side > .homepage-live-content__image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .hero-home__main--is-link, .hero-home__side--is-link { cursor: pointer; } @media (hover: hover) { .hero-home__main:hover, .hero-home__main:focus-within, .hero-home__side:hover, .hero-home__side:focus-visible, .hero-home__side--is-link:hover, .hero-home__side--is-link:focus-visible { box-shadow: var(--homepage-card-hover-shadow, var(--shadow-card-hover)); } } @container (max-width: 1142px) { .hero-home__slide { grid-template-columns: 1fr; gap: 0; } .hero-home__side { display: none; } .hero-home__main { grid-template-columns: minmax(0, 1fr) clamp(240px, 32%, 320px); } } .hero-home__side--blue { background: linear-gradient(180deg, #5b7a9a 0%, #3a5572 100%); } .hero-home__side--brown { background: linear-gradient(180deg, #8d6b59 0%, #5e4435 100%); } .hero-home__tag { position: absolute; top: 16px; right: 16px; padding: 6px 12px; background: var(--color-cream); color: var(--home-ink); font-family: var(--font-body, 'Inter', sans-serif); font-size: 12px; font-weight: 700; border-radius: var(--home-radius-pill); z-index: 3; } .hero-home__side-copy { position: relative; z-index: 2; } .hero-home__side-title { margin: 0 0 6px; font-family: var(--font-headline, 'Fraunces', serif); font-size: 28px; font-weight: 700; line-height: 1.18; letter-spacing: 0; } .hero-home__side-subtitle { margin: 0; font-family: var(--font-body, 'Inter', sans-serif); font-size: 14px; line-height: 1.45; color: rgba(255, 249, 241, 0.9); } .hero-home__nav { display: flex; align-items: center; justify-content: center; margin-top: 5px; position: relative; top: auto; bottom: auto; left: auto; right: auto; transform: none; } .hero-home__arrow--hidden { display: none !important; } .hero-home__dots { display: inline-flex; align-items: center; gap: 4px; } .hero-home__indicator { position: relative; width: 14px; height: 14px; border: 0; padding: 0; border-radius: 999px; background: var(--home-ink); cursor: pointer; transition: width 0.28s ease; } .hero-home__indicator::before { content: ""; position: absolute; inset: 50% 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: inherit; } .hero-home__indicator:focus-visible { outline: 2px solid var(--popup-focus); outline-offset: 2px; } .hero-home__indicator.is-active { width: 37px; } .hero-home__indicator-inner { position: absolute; left: 4px; top: 50%; width: 29px; height: 6px; border-radius: 999px; background: var(--color-cream); transform: translateY(-50%); opacity: 0; transition: opacity 0.2s ease; } .hero-home__indicator.is-active .hero-home__indicator-inner { opacity: 1; } @media (max-width: 760px) { .hero-home__indicator { width: 14px; height: 14px; background: var(--home-ink); transition: width 0.28s ease; } .hero-home__indicator.is-active { width: 37px; } .hero-home__indicator-inner { left: 4px; transform: translateY(-50%); } } @media (max-width: 1142px) and (min-width: 961px) { .hero-home { --hero-card-h: 320px; --hero-side-w: 0px; } .hero-home__slide { grid-template-columns: 1fr; gap: 0; } .hero-home__side { display: none; } .hero-home__main { grid-template-columns: minmax(0, 1fr) clamp(240px, 32%, 320px); } .hero-home__title { font-size: clamp(26px, 3.5vw, 36px); } } @media (max-width: 960px) and (min-width: 721px) { .hero-home { --hero-side-w: 0px; --hero-card-h: auto; } .hero-home__slide { grid-template-columns: 1fr; gap: 0; } .hero-home__side { display: none; } .hero-home__main { grid-template-columns: minmax(0, 1fr) clamp(266px, 32%, 360px); } .hero-home__lead { padding: 30px 24px 26px; } .hero-home__title { font-size: clamp(28px, 4vw, 36px); } } @media (max-width: 720px) { .hero-home__nav { min-height: 50px; margin-top: 8px; padding: 2px 0 4px; overflow: visible; } .hero-home__dots { min-height: 44px; overflow: visible; } .hero-home__indicator { flex: 0 0 auto; overflow: visible; } .hero-home { --hero-radius: 20px; --hero-card-h: 350px; --hero-shadow-buffer: 0px; width: calc(var(--homepage-shell-width, calc(100% - 32px)) + (var(--hero-shadow-buffer) * 2)); padding-block: 12px 0; padding-inline: 0; } .hero-home__viewport { border-radius: 0; overflow: hidden; } .hero-home__slide { grid-template-columns: 1fr; gap: 0; min-height: var(--hero-card-h); } .hero-home__side { display: none; } .hero-home__main { position: relative; display: block; height: var(--hero-card-h); min-height: var(--hero-card-h); border-radius: var(--hero-radius); background: var(--home-accent); } .hero-home__main::before { display: none; } .hero-home__main--blue { background: var(--home-accent-blue); } .hero-home__main--brown { background: var(--home-accent-brown); } .hero-home__lead { position: absolute; inset: 0; z-index: 3; display: block; padding: 0; text-align: center; } .hero-home__media { position: absolute; left: 0; right: 0; top: 170px; bottom: 0; height: auto; min-height: 0; border-radius: 50% 50% 0 0 / 36% 36% 0 0; overflow: hidden; z-index: 1; } .hero-home__media .media-slot__fallback { display: none; } .hero-home__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .hero-home h1.hero-home__title, .hero-home h2.hero-home__title { position: absolute; left: 50%; top: 18px; width: min(calc(100% - 44px), 320px); margin: 0; font-family: 'Montserrat', 'Inter', 'Arial', sans-serif !important; font-size: 25px; line-height: 1.14; font-weight: 800; letter-spacing: 0; transform: translateX(-50%); } .hero-home__subtitle { position: absolute; left: 50%; top: 106px; width: min(calc(100% - 56px), 300px); margin: 0; font-family: 'Montserrat', 'Inter', 'Arial', sans-serif; font-size: 14px; line-height: 1.28; font-weight: 400; color: rgba(255, 249, 241, 0.96); transform: translateX(-50%); } .hero-home__actions { position: absolute; left: 10px; bottom: 10px; width: auto; margin: 0; display: block; z-index: 4; } .hero-home__actions .home-cta { flex: 0 0 auto; } .hero-home__actions .home-cta--ink { display: none; } .hero-home__actions .home-cta--ghost-on-dark { min-width: 174px; height: 44px; min-height: 44px; padding: 0 18px; color: #232030; font-family: 'Montserrat', 'Inter', 'Arial', sans-serif; font-size: 16px; font-weight: 800; } .hero-home__actions .home-cta--ghost-on-dark::before { background: var(--color-cream); border: 0; } .hero-home.hero-home--compact { --hero-card-h: 350px; width: calc(var(--homepage-shell-width, calc(100% - 32px)) + (var(--hero-shadow-buffer) * 2)); } .hero-home.hero-home--compact h1.hero-home__title, .hero-home.hero-home--compact h2.hero-home__title { top: 18px; width: min(calc(100% - 44px), 320px); font-size: 26px; line-height: 1.16; } .hero-home.hero-home--compact .hero-home__subtitle { top: 98px; width: min(calc(100% - 56px), 292px); font-size: 14px; line-height: 1.25; } .hero-home.hero-home--compact .hero-home__media { top: 150px; } } @media (max-width: 720px) and (hover: hover) { .hero-home { --hero-shadow-buffer: 5px; } } @media (max-width: 380px) { .hero-home h1.hero-home__title, .hero-home h2.hero-home__title { top: 18px; font-size: 23px; } .hero-home__subtitle { top: 100px; width: min(calc(100% - 56px), 280px); font-size: 13px; } .hero-home.hero-home--compact h1.hero-home__title, .hero-home.hero-home--compact h2.hero-home__title { top: 18px; font-size: 24px; line-height: 1.16; } .hero-home.hero-home--compact .hero-home__subtitle { top: 96px; font-size: 13px; } .hero-home.hero-home--compact .hero-home__media { top: 144px; } } /* [bundle] /styles/components/mobile-product-cards.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (max-width: 760px) { .cards-grid, .search-page__group-grid, .search-page__group-loader-grid, .gr-ideas-grid, .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: stretch; align-items: start; gap: 14px 10px; width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); margin-right: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; } .cards-grid > .cat-card[data-product-card], .search-page__group-grid > .cat-card[data-product-card], .gr-ideas-grid > .cat-card[data-product-card], .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid] > .cat-card[data-product-card] { flex: none; width: 100%; min-width: 0; max-width: none; scroll-snap-align: none; } .cat-card[data-product-card].cat-card--media-square { --cat-card-height: 560px; aspect-ratio: 325 / 560; } .cat-card[data-product-card].cat-card--media-tall { --cat-card-height: 630px; aspect-ratio: 325 / 630; } .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 490px; aspect-ratio: 325 / 490; } .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-square, .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-square, .page--search .cards-grid .cat-card[data-product-card].cat-card--media-square { --cat-card-height: 580px; aspect-ratio: 325 / 580; } .cat-card[data-product-card] { --cat-card-title-lift: calc(1.5px * var(--cat-card-mobile-readable, 1)); --cat-card-title-stack-offset: calc(4px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-size: calc(28px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-top: calc(8px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-left: calc(8px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-gap: calc(5px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-pad-x: calc(9px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-font-size: calc(10px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-ad-font-size: calc(12px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-icon-size: calc(11px * var(--cat-card-mobile-readable, 1)); } .cat-card[data-product-card].cat-card--title-one-line { --cat-card-title-lift: calc(14px * var(--cat-card-mobile-readable, 1)); --cat-card-title-stack-offset: 0px; } .featured-hub-root--gift-finder .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid]:not(.gf-prod-grid) .cat-card[data-product-card].cat-card--title-one-line { --cat-card-title-lift: calc(6.5px * var(--cat-card-mobile-readable, 1)); } .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall, .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall, .page--search .cards-grid .cat-card[data-product-card].cat-card--media-tall { --cat-card-height: 630px; aspect-ratio: 325 / 630; } .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide, .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide, .page--search .cards-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 490px; aspect-ratio: 325 / 490; } .cat-card[data-product-card] .cat-card__title { top: calc((327 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); min-height: calc(30px * var(--cat-card-mobile-readable, 1)); font-size: calc(12.4px * var(--cat-card-mobile-readable, 1)); font-weight: 700; line-height: 1.08; } .cat-card[data-product-card].cat-card--title-one-line .cat-card__title { min-height: calc(15px * var(--cat-card-mobile-readable, 1)); -webkit-line-clamp: 1; } .cat-card[data-product-card] .cat-card__price { top: calc( (327 * var(--cat-card-unit-y)) + var(--cat-card-content-shift) + clamp( calc(32px * var(--cat-card-mobile-readable, 1)), calc((81 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))), calc(36px * var(--cat-card-mobile-readable, 1)) ) + calc(0px * var(--cat-card-mobile-readable, 1)) - var(--cat-card-title-lift, 0px) + var(--cat-card-title-stack-offset, 0px) ); gap: calc(3.5px * var(--cat-card-mobile-readable, 1)); } .cat-card[data-product-card] .cat-card__currency, .cat-card[data-product-card] .cat-card__value-new { font-size: calc(16.2px * var(--cat-card-mobile-readable, 1)); line-height: 1; } .cat-card[data-product-card] .cat-card__value-old { font-size: calc(13px * var(--cat-card-mobile-readable, 1)); } .cat-card[data-product-card] .cat-card__service-badge { top: calc( (327 * var(--cat-card-unit-y)) + var(--cat-card-content-shift) + clamp( calc(53px * var(--cat-card-mobile-readable, 1)), calc((115 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))), calc(58px * var(--cat-card-mobile-readable, 1)) ) + calc(0px * var(--cat-card-mobile-readable, 1)) - var(--cat-card-title-lift, 0px) + var(--cat-card-title-stack-offset, 0px) ); height: calc(22px * var(--cat-card-mobile-readable, 1)); max-width: calc(305 * var(--cat-card-unit-x)); } .cat-card[data-product-card] .cat-card__service-badge-img { width: auto; max-width: min(calc(142px * var(--cat-card-mobile-readable, 1)), calc(305 * var(--cat-card-unit-x))); height: 100%; } .cat-card[data-product-card] .cat-card__service-badge--signal { height: calc(22px * var(--cat-card-mobile-readable, 1)); max-width: min(calc(190px * var(--cat-card-mobile-readable, 1)), calc(305 * var(--cat-card-unit-x))); padding: 0; border-radius: 0; background: transparent; color: var(--intent-feedback-alert-strong); font-size: calc(12.4px * var(--cat-card-mobile-readable, 1)); line-height: 1.15; } body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] { height: calc(22px * var(--cat-card-mobile-readable, 1)); max-width: calc(86px * var(--cat-card-mobile-readable, 1)); padding: 0 calc(7px * var(--cat-card-mobile-readable, 1)); border-radius: calc(999 * var(--cat-card-unit-x)); background: var(--color-forest); color: var(--color-cream); font-family: "Inter", Arial, sans-serif; font-size: calc(8.8px * var(--cat-card-mobile-readable, 1)); font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label]::before { content: attr(data-jp-visible-label); } body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] .cat-card__service-badge-img { display: none; } .cat-card[data-product-card] .cat-card__store-row { top: calc( (327 * var(--cat-card-unit-y)) + var(--cat-card-content-shift) + clamp( calc(78px * var(--cat-card-mobile-readable, 1)), calc((161 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))), calc(83px * var(--cat-card-mobile-readable, 1)) ) + calc(-3px * var(--cat-card-mobile-readable, 1)) - var(--cat-card-title-lift, 0px) + var(--cat-card-title-stack-offset, 0px) ); min-width: calc(40px * var(--cat-card-mobile-readable, 1)); min-height: calc(40px * var(--cat-card-mobile-readable, 1)); height: calc(40px * var(--cat-card-mobile-readable, 1)); align-items: flex-start; font-size: calc(9.4px * var(--cat-card-mobile-readable, 1)); max-width: min(calc(148px * var(--cat-card-mobile-readable, 1)), calc(305 * var(--cat-card-unit-x))); } .cat-card[data-product-card].cat-card--no-service .cat-card__store-row { top: calc( (327 * var(--cat-card-unit-y)) + var(--cat-card-content-shift) + clamp( calc(61px * var(--cat-card-mobile-readable, 1)), calc((139 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))), calc(66px * var(--cat-card-mobile-readable, 1)) ) + calc(-9px * var(--cat-card-mobile-readable, 1)) - var(--cat-card-title-lift, 0px) + var(--cat-card-title-stack-offset, 0px) ); } .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--no-service .cat-card__store-row, .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--no-service .cat-card__store-row, .page--search .cards-grid .cat-card[data-product-card].cat-card--no-service .cat-card__store-row { top: calc( (327 * var(--cat-card-unit-y)) + var(--cat-card-content-shift) + clamp( calc(61px * var(--cat-card-mobile-readable, 1)), calc((139 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))), calc(66px * var(--cat-card-mobile-readable, 1)) ) + calc(-9px * var(--cat-card-mobile-readable, 1)) - var(--cat-card-title-lift, 0px) + var(--cat-card-title-stack-offset, 0px) ); } .cat-card[data-product-card] .cat-card__store { min-width: calc(40px * var(--cat-card-mobile-readable, 1)); height: calc(22px * var(--cat-card-mobile-readable, 1)); padding-inline: calc(5.5px * var(--cat-card-mobile-readable, 1)); font-size: calc(9.4px * var(--cat-card-mobile-readable, 1)); justify-content: center; max-width: min(calc(112px * var(--cat-card-mobile-readable, 1)), calc(230 * var(--cat-card-unit-x))); } .cat-card[data-product-card] .cat-card__store-row > svg, .cat-card[data-product-card] .cat-card__store-row > img.cat-card__store-icon { width: calc(22px * var(--cat-card-mobile-readable, 1)); height: calc(22px * var(--cat-card-mobile-readable, 1)); display: block; flex: 0 0 calc(22px * var(--cat-card-mobile-readable, 1)); object-fit: contain; } .cat-card[data-product-card] .cat-card__store-notch { width: calc(8px * var(--cat-card-mobile-readable, 1)); height: calc(13px * var(--cat-card-mobile-readable, 1)); display: block; flex: 0 0 calc(8px * var(--cat-card-mobile-readable, 1)); } body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-wide, body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide, body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide, body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-wide { --cat-card-media-height: 355px; --cat-card-height: 576px; --cat-card-content-shift: 30px; aspect-ratio: 325 / 576; } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__media-stats { right: calc(7px * var(--cat-card-mobile-readable, 1)); bottom: calc(6px * var(--cat-card-mobile-readable, 1)); gap: calc(4px * var(--cat-card-mobile-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-pill { height: calc(24px * var(--cat-card-mobile-readable, 1)); padding-inline: calc(7px * var(--cat-card-mobile-readable, 1)); gap: calc(3px * var(--cat-card-mobile-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-pill svg, body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-star, body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-icon { width: calc(12px * var(--cat-card-mobile-readable, 1)); height: calc(12px * var(--cat-card-mobile-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-pill svg:nth-of-type(2), body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-icon--comment { width: calc(14px * var(--cat-card-mobile-readable, 1)); height: calc(14px * var(--cat-card-mobile-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__rating-value { font-size: calc(12px * var(--cat-card-mobile-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__dot { width: calc(3px * var(--cat-card-mobile-readable, 1)); height: calc(3px * var(--cat-card-mobile-readable, 1)); margin-left: 0; } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__reaction { display: none; } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__cart, body:not(.page--homepage).page--search.has-mobile-quick-nav .search-page__results .cat-card[data-product-source="jedipic"] .cat-card__cart { display: none; } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-notch { width: calc(8px * var(--cat-card-mobile-readable, 1)); height: calc(13px * var(--cat-card-mobile-readable, 1)); flex-basis: calc(8px * var(--cat-card-mobile-readable, 1)); margin-top: calc(4.5px * var(--cat-card-mobile-readable, 1)); margin-left: calc(-2px * var(--cat-card-mobile-readable, 1)); margin-right: calc(-3.5px * var(--cat-card-mobile-readable, 1)); border-radius: 0; clip-path: polygon(0 7.14%, 33.7% 33.95%, 61.8% 36.05%, 100% 0, 86.6% 58.6%, 100% 100%, 62.45% 64%, 31.7% 56.7%, 0 92.86%, 20.45% 44.12%); } } @media (min-width: 421px) and (max-width: 520px) { .page--search .cat-card[data-product-card].cat-card--title-one-line { --cat-card-title-lift: calc(6px * var(--cat-card-mobile-readable, 1)); } } @media (min-width: 761px) and (max-width: 900px) { body:not(.page--homepage) .cat-card[data-product-card] { --cat-card-tablet-readable: var(--cat-card-scale-inverse, 1); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__title { font-size: calc(13px * var(--cat-card-tablet-readable, 1)); line-height: 1.16; } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__currency, body:not(.page--homepage) .cat-card[data-product-card] .cat-card__value-new { font-size: calc(16px * var(--cat-card-tablet-readable, 1)); line-height: 1; } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__value-old, body:not(.page--homepage) .cat-card[data-product-card] .cat-card__discount { font-size: calc(13px * var(--cat-card-tablet-readable, 1)); line-height: 1; } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge { height: calc(18px * var(--cat-card-tablet-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge-img--digital, body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge-img--free-download { width: calc(116px * var(--cat-card-tablet-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge-img--shipping { width: calc(110px * var(--cat-card-tablet-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge--signal { height: calc(18px * var(--cat-card-tablet-readable, 1)); font-size: calc(13px * var(--cat-card-tablet-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-row { min-height: calc(21px * var(--cat-card-tablet-readable, 1)); height: calc(21px * var(--cat-card-tablet-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-row > svg, body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-row > img.cat-card__store-icon { width: calc(21px * var(--cat-card-tablet-readable, 1)); height: calc(21px * var(--cat-card-tablet-readable, 1)); flex-basis: calc(21px * var(--cat-card-tablet-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-notch { width: calc(8px * var(--cat-card-tablet-readable, 1)); height: calc(12px * var(--cat-card-tablet-readable, 1)); flex-basis: calc(8px * var(--cat-card-tablet-readable, 1)); } body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store { height: calc(21px * var(--cat-card-tablet-readable, 1)); padding: calc(3px * var(--cat-card-tablet-readable, 1)) calc(7px * var(--cat-card-tablet-readable, 1)) calc(4px * var(--cat-card-tablet-readable, 1)); font-size: calc(11px * var(--cat-card-tablet-readable, 1)); line-height: 1; } } @media (max-width: 360px) { .cards-grid, .search-page__group-grid, .search-page__group-loader-grid, .gr-ideas-grid, .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid] { gap: 12px 8px; } body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-wide, body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide, body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide, body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-wide, .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-square, .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-square, .page--search .cards-grid .cat-card[data-product-card].cat-card--media-square { --cat-card-height: 610px; aspect-ratio: 325 / 610; } } @media (min-width: 560px) and (max-width: 760px) { body:not(.page--homepage) .cards-grid, body:not(.page--homepage) .search-page__group-grid, body:not(.page--homepage) .search-page__group-loader-grid, body:not(.page--homepage) .gr-ideas-grid, body:not(.page--homepage) .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; } } @media (min-width: 700px) and (max-width: 760px) { body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-wide, body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide, body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide, body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-square, body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-tall, body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-wide, .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-square, .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-square, .page--search .cards-grid .cat-card[data-product-card].cat-card--media-square { --cat-card-height: 530px; aspect-ratio: 325 / 530; } } /* [bundle] /styles/components/mobile-card-polish.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body[data-jp-language="ru"] .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label], body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] { min-width: 0; max-width: none; padding: 0; border-radius: 0; background: transparent; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-transform: none; white-space: normal; overflow: visible; text-overflow: clip; } body[data-jp-language="ru"] .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label]::before, body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label]::before { content: none; } body[data-jp-language="ru"] .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] .cat-card__service-badge-img, body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] .cat-card__service-badge-img { display: block; } @media (max-width: 760px) { .cat-card[data-product-card] { --cat-card-corner-badge-size: calc(22px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-top: calc(7px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-left: calc(7px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-gap: calc(4px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-pad-x: calc(7px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-font-size: calc(8.5px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-ad-font-size: calc(10px * var(--cat-card-mobile-readable, 1)); --cat-card-corner-badge-icon-size: calc(9.5px * var(--cat-card-mobile-readable, 1)); } body.page--gift-room .gr-ideas-grid .cat-card[data-product-card] { --cat-card-scale-inverse: var(--search-card-scale-inverse, 1); } body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] { height: calc(22px * var(--cat-card-mobile-readable, 1)); max-width: calc(86px * var(--cat-card-mobile-readable, 1)); padding: 0 calc(7px * var(--cat-card-mobile-readable, 1)); border-radius: calc(999 * var(--cat-card-unit-x)); background: var(--color-forest); color: var(--color-cream); font-family: "Inter", Arial, sans-serif; font-size: calc(8.8px * var(--cat-card-mobile-readable, 1)); font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label]::before { content: attr(data-jp-visible-label); } body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] .cat-card__service-badge-img { display: none; } body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 690px; aspect-ratio: 325 / 690; } body.page--gift-room .gr-ideas-grid .gr-idea-product-card .gr-idea-product-card__similar-main { display: none; } body.page--gift-room .gr-ideas-grid .gr-idea-product-card .cat-card__store-row { height: calc(22px * var(--cat-card-mobile-readable, 1)); } body.page--gift-room .gr-ideas-grid .gr-idea-product-card .gr-idea-product-card__primary-action { display: inline-flex !important; left: calc(10 * var(--cat-card-unit-x)); right: auto; bottom: calc(10 * var(--cat-card-unit-y)); width: calc(305 * var(--cat-card-unit-x)); min-width: 0; height: calc(38px * var(--cat-card-mobile-readable, 1)); min-height: calc(38px * var(--cat-card-mobile-readable, 1)); padding: 0 calc(14px * var(--cat-card-mobile-readable, 1)); gap: calc(7px * var(--cat-card-mobile-readable, 1)); font-size: calc(12.5px * var(--cat-card-mobile-readable, 1)); } body.page--gift-room .gr-ideas-grid .gr-idea-product-card .gr-idea-product-card__primary-action .cat-card__cart-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; } body.page--gift-room .gr-ideas-grid .gr-idea-product-card .gr-idea-product-card__primary-action .gr-idea-product-card__action-icon { width: calc(17px * var(--cat-card-mobile-readable, 1)); height: calc(17px * var(--cat-card-mobile-readable, 1)); flex-basis: calc(17px * var(--cat-card-mobile-readable, 1)); } } @media (min-width: 390px) and (max-width: 409px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 645px; aspect-ratio: 325 / 645; } } @media (min-width: 410px) and (max-width: 419px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 640px; aspect-ratio: 325 / 640; } } @media (min-width: 420px) and (max-width: 439px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 630px; aspect-ratio: 325 / 630; } } @media (min-width: 440px) and (max-width: 459px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 620px; aspect-ratio: 325 / 620; } } @media (min-width: 460px) and (max-width: 499px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 600px; aspect-ratio: 325 / 600; } } @media (min-width: 500px) and (max-width: 519px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 585px; aspect-ratio: 325 / 585; } } @media (min-width: 520px) and (max-width: 529px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 575px; aspect-ratio: 325 / 575; } } @media (min-width: 530px) and (max-width: 559px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 560px; aspect-ratio: 325 / 560; } } @media (min-width: 560px) and (max-width: 639px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 650px; aspect-ratio: 325 / 650; } } @media (min-width: 640px) and (max-width: 699px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 625px; aspect-ratio: 325 / 625; } } @media (min-width: 700px) and (max-width: 729px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 600px; aspect-ratio: 325 / 600; } } @media (min-width: 730px) and (max-width: 760px) { body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall, body.page--gift-room .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide { --cat-card-height: 585px; aspect-ratio: 325 / 585; } } body[data-jp-language="ru"] .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label], body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] { min-width: 0; max-width: calc(305 * var(--cat-card-unit-x)); padding: 0; border-radius: 0; background: transparent; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-transform: none; white-space: normal; overflow: visible; text-overflow: clip; } body[data-jp-language="ru"] .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label]::before, body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label]::before { content: none; } body[data-jp-language="ru"] .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] .cat-card__service-badge-img, body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] .cat-card__service-badge-img { display: block; } /* [bundle] /styles/components/history.css */ /* [bundle] /styles/tokens.css */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-price: var(--font-display); --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem); --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem); --font-size-h3: 1.75rem; --font-size-h4: 1.375rem; --font-size-body-lg: 1.125rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; --font-size-micro: 0.75rem; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --color-ink: #232030; --color-ink-soft: #4a465d; --color-ink-muted: var(--color-ink-soft); --color-forest: #3F6A60; --color-forest-dark: #2D4F48; --color-footer-green: #1F3E35; --color-olive-pill: #829181; --color-emerald: var(--color-forest); --color-emerald-dark: var(--color-forest-dark); --color-cream: #FFF9F1; --color-sand: #F8F5ED; --color-page-bg: #f8f1eb; --color-alert-red: #b91515; --color-sand-dark: #EFE7D5; --color-mint: var(--color-sand); --color-mint-2: var(--color-line); --color-line: #E7E2D5; --color-line-dark: #D6CFB8; --color-info-soft: var(--color-sand); --color-alert-soft: #FBE8E8; --color-warn: #C98A1A; --color-warn-soft: #FBF1DC; --color-jedi-picks-yellow: #FFC44D; --color-top-badge-blue: rgb(185 212 227 / 0.5); --color-top-badge-green: rgb(202 215 184 / 0.5); --color-top-badge-coral: rgb(228 181 165 / 0.5); --color-top-badge-purple: rgb(213 197 228 / 0.5); --color-top-badge-glass: rgb(255 249 241 / 0.5); --color-top-badge-border: rgb(35 32 48 / 0.12); --color-success: var(--color-forest); --color-success-soft: var(--color-sand); --color-ink-mute: #6b6680; --color-smoke: var(--color-line); --color-slate: var(--color-line-dark); --color-info: var(--color-forest); --color-alert: #E45B5B; --color-white: #FFF9F1; --color-black: #0b0a10; --intent-brand-primary: var(--color-forest); --intent-brand-primary-strong: var(--color-forest-dark); --intent-brand-on: var(--color-cream); --intent-surface-page: var(--color-page-bg); --intent-surface-raised: var(--color-cream); --intent-surface-sunken: var(--color-sand); --intent-surface-line: var(--color-line); --intent-surface-line-strong: var(--color-line-dark); --intent-text-primary: var(--color-ink); --intent-text-secondary: var(--color-ink-soft); --intent-text-on-brand: var(--color-cream); --intent-cta-ink: var(--color-ink); --intent-cta-ink-hover: #3a3650; --intent-feedback-success: var(--color-forest); --intent-feedback-success-soft: var(--color-success-soft); --intent-feedback-warning: var(--color-warn); --intent-feedback-warning-soft: var(--color-warn-soft); --intent-feedback-alert: var(--color-alert); --intent-feedback-alert-strong: var(--color-alert-red); --intent-feedback-alert-soft: var(--color-alert-soft); --intent-status-online: var(--color-forest); --intent-status-recent: var(--color-warn); --intent-status-offline: var(--color-line-dark); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --gap-element: var(--space-2); --gap-component: var(--space-4); --gap-component-lg: var(--space-5); --gap-section: var(--space-6); --gap-component-mobile: var(--space-3); --gap-component-lg-mobile: var(--space-4); --gap-section-mobile: var(--space-5); --radius-pill: 999px; --radius-card: 30px; --radius-panel: 20px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08); --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2); --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12); --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5); --popup-bg: #FFF9F1; --popup-bg-soft: #F8F1EB; --popup-bg-muted: #F8F5ED; --popup-border: #E7E2D5; --popup-border-strong: #D6CFB8; --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%); --popup-control-border: var(--popup-border-strong); --popup-outline: var(--color-ink); --popup-outline-soft: rgba(35, 32, 48, 0.28); --popup-focus: var(--color-forest); --popup-control-bg: var(--popup-bg); --popup-close-bg: var(--popup-hover); --popup-hover: #DCDDD4; --control-disabled-bg: #DCDDD3; --control-disabled-text: var(--color-ink-soft); --auth-disabled-text: var(--color-ink-soft); --filter-pill-bg: #eee5da; --sort-control-bg: #E1D1BC; --sort-control-bg-hover: #CCB89F; --hover-grow-scale: 1.035; --sort-option-hover: #DCDDD4; --sort-option-selected-bg: transparent; --popup-disabled: #EFE7D5; --popup-overlay: rgba(35, 32, 48, 0.52); --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14); --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1); --popup-title-font: var(--font-display); --popup-title-size: 25px; --popup-title-weight: 600; --popup-title-line-height: 1.16; --popup-title-letter-spacing: 0; --popup-close-width: 78px; --popup-close-height: 55px; --popup-close-icon-size: 17px; --popup-close-offset: 10px; --popup-close-hover-bg: var(--sort-control-bg); --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)); --popup-sheet-radius: 22px 22px 0 0; --popup-sheet-grip-height: 44px; --popup-sheet-grip-width: 48px; --popup-sheet-grip-thickness: 5px; --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent); --popup-sheet-grip-line-width: 43px; --popup-sheet-grip-cap-offset: 21.5px; --popup-sheet-grip-cap-radius: 2.5px; --popup-sheet-grip-pseudo-bg: radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat, linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat, var(--popup-bg); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 700ms; --color-ai-accent: var(--color-ink-soft); --color-ai-accent-soft: var(--color-sand); --color-ai-accent-deep: var(--color-ink); --color-ai-glow: rgba(74, 70, 93, 0.2); --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%); --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%); --gradient-ai-shimmer: linear-gradient(135deg, rgba(74,70,93,0.3) 0%, rgba(122,86,61,0.28) 50%, rgba(74,70,93,0.3) 100%); --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12); --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16); --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16); --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08); --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-assistant: 1200; --z-modal: 2000; --z-toast: 3000; --z-modal-front: 13000; --bp-mobile: 640px; --bp-tablet: 1024px; } :root { --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); --container-max: 1360px; --page-bg: var(--color-cream); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .page--history { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); --history-side-sticky-top: 90px; --history-cue-blue: var(--home-accent-blue, rgb(74 101 133)); background: var(--intent-surface-page); overflow-x: clip; padding-top: 63px; } .history-page.section { padding: 0 0 12px; } body.page--history .history-page > .container { width: var(--homepage-shell-width); max-width: var(--jp-page-shell-max, 1372px); margin: 0 auto; padding-inline: var(--homepage-shell-inset); box-sizing: border-box; } @media (max-width: 1142px) { .page--history { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } } @media (max-width: 760px) { .page--history { --homepage-shell-width: var(--jp-page-shell-width); --homepage-shell-inset: var(--jp-page-shell-inset); } } .history-page__intro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0 0 18px; padding: 30px 0 8px; text-align: left; color: var(--intent-text-primary); } .history-page__intro-main { min-width: 0; } .history-page__title { font-family: var(--font-display); font-size: 40px; line-height: 1.05; letter-spacing: 0; color: var(--color-ink); margin: 0 0 8px; font-weight: 650; } .history-page__lead { font-family: var(--font-display); font-size: 1rem; font-weight: 650; line-height: 1.3; color: var(--intent-text-primary); margin: 0; max-width: 660px; } .history-page__layout { display: grid; grid-template-columns: minmax(0, calc(100% - 344px)) minmax(286px, 300px); gap: 44px; align-items: start; } .history-page__main { min-width: 0; } .history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 0 14px; border-bottom: 1px solid var(--intent-surface-line); } .history-toolbar__heading { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: 0; color: var(--intent-text-primary); } .history-toolbar__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 9px; border-radius: var(--radius-pill, 999px); background: var(--intent-surface-sunken); color: var(--intent-text-primary); font-size: 13px; font-weight: 600; } .history-side-panel { position: sticky; top: var(--history-side-sticky-top); align-self: start; display: grid; gap: 22px; width: 100%; padding-top: 0; } .history-search { position: static !important; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 48px; padding: 5px 14px 5px 11px; border: 1px solid var(--popup-control-border); border-radius: var(--radius-pill, 999px); background: var(--intent-surface-page); box-shadow: none; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .history-search:hover { border-color: var(--intent-brand-primary); } .history-search:focus-within { border-color: var(--intent-brand-primary); box-shadow: 0 0 0 3px var(--color-ai-glow), inset 0 0 0 1px var(--intent-brand-primary); } .history-search__icon { width: 28px; height: 28px; display: block; object-fit: contain; flex: 0 0 28px; } .history-search__input { width: 100%; min-width: 0; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--intent-text-primary); font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.2; outline: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-appearance: none; appearance: none; } .history-search__input:focus, .history-search__input:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; } .history-search__input::-webkit-search-decoration, .history-search__input::-webkit-search-cancel-button, .history-search__input::-webkit-search-results-button, .history-search__input::-webkit-search-results-decoration { display: none; -webkit-appearance: none; } .history-search__input::placeholder { color: var(--intent-text-secondary); opacity: 0.78; } .history-actions { position: static !important; display: grid; gap: 8px; } .history-action { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--intent-text-primary); display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 11px; text-align: left; cursor: pointer; font-family: var(--font-heading); font-size: 15px; font-weight: 750; line-height: 1.15; text-decoration: none; border-radius: 18px; transition: background-color 0.18s ease, color 0.18s ease; } .history-action:hover, .history-action:focus-visible { color: var(--intent-text-primary); background: var(--popup-hover); } .history-action:disabled, .history-action[aria-disabled="true"] { cursor: default; opacity: 0.52; } .history-action:disabled:hover, .history-action[aria-disabled="true"]:hover { background: transparent; } .history-action:focus-visible { outline: 2px solid var(--intent-brand-primary); outline-offset: 2px; } .history-action__icon { width: 21px; height: 21px; display: block; background: currentColor; -webkit-mask: var(--history-action-icon) center / contain no-repeat; mask: var(--history-action-icon) center / contain no-repeat; } .history-action__icon--trash { --history-action-icon: url("/assets/gift-room-icons/trash.svg"); } .history-action__icon--pause { --history-action-icon: url("/assets/header-icons/history-pause.svg"); } .history-action__icon--play { --history-action-icon: url("/assets/header-icons/history-play.svg"); } .history-action__icon--settings { --history-action-icon: url("/assets/header-account-menu-icons/settings.svg"); } .history-section--products { padding-top: 28px; } .history-section--products .cards-grid { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: start; } .history-section--products .cards-grid[hidden], .history-empty[hidden], .history-no-results[hidden] { display: none !important; } .history-section--products .cat-card[data-product-card] { --cat-card-height: 482px; width: 100%; max-width: 325px; aspect-ratio: 325 / 482; } .history-section--products .cat-card--history-facts { --cat-card-height: 500px; aspect-ratio: 325 / 500; } .history-section--products .cat-card--history-facts-one:not([data-product-source="jedipic"]) { --cat-card-height: 482px; aspect-ratio: 325 / 482; } .history-section--products .cat-card--history-facts[data-product-source="jedipic"] { --cat-card-height: 522px; aspect-ratio: 325 / 522; } body.page--history.is-native-checkout-closed .history-section--products .cat-card[data-product-source="jedipic"] .cat-card__cart { display: inline-flex !important; } .history-section--products .history-card__commerce-facts { position: absolute; left: calc(9 * var(--cat-card-unit-x)); right: calc(9 * var(--cat-card-unit-x)); top: calc((428 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); z-index: 3; display: grid; justify-items: start; gap: calc(5 * var(--cat-card-unit-y)); color: var(--intent-text-primary); font-family: var(--font-heading); font-size: clamp(11px, calc(13 * var(--cat-card-unit-x)), 13px); font-weight: 800; line-height: 1; letter-spacing: 0; overflow: hidden; } .history-section--products .cat-card--no-service .history-card__commerce-facts { top: calc((402 * var(--cat-card-unit-y)) + var(--cat-card-content-shift)); } .history-section--products .history-card__commerce-fact { min-width: 0; max-width: 100%; min-height: calc(26 * var(--cat-card-unit-y)); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill, 999px); padding: calc(5 * var(--cat-card-unit-y)) calc(9 * var(--cat-card-unit-x)); background: color-mix(in srgb, var(--intent-text-secondary) 18%, var(--intent-surface-raised)); color: var(--intent-text-primary); box-sizing: border-box; white-space: nowrap; } .history-section--products .history-card__commerce-fact--urgency, .history-section--products .history-card__commerce-fact--delivery { background: color-mix(in srgb, var(--intent-feedback-warning) 40%, var(--color-white)); color: var(--intent-text-primary); } .history-section--products .history-card__commerce-fact--activity { background: color-mix(in srgb, var(--history-cue-blue) 62%, var(--color-white)); color: var(--color-white); } .history-section--products .history-card__commerce-fact--shipping, .history-section--products .history-card__commerce-fact--digital { background: color-mix(in srgb, var(--intent-brand-primary) 16%, var(--intent-surface-raised)); color: var(--intent-brand-primary-strong); } .history-section--products .history-card__commerce-fact--popular { background: color-mix(in srgb, var(--intent-brand-primary) 20%, var(--intent-surface-raised)); color: var(--intent-cta-ink); } .history-section--products .history-card__commerce-fact--occasion { background: color-mix(in srgb, var(--intent-feedback-alert-soft) 70%, var(--color-white)); color: var(--intent-text-primary); } .history-section--products .history-card__commerce-fact--baby { background: color-mix(in srgb, var(--intent-feedback-warning-soft) 80%, var(--color-white)); color: var(--intent-text-primary); } .history-section--products .history-card__commerce-fact--personal { background: color-mix(in srgb, var(--intent-brand-primary) 24%, var(--color-white)); color: var(--intent-text-primary); } .history-section--products .history-card__commerce-fact--quick { background: color-mix(in srgb, var(--history-cue-blue) 24%, var(--color-white)); color: var(--intent-text-primary); } .history-section--products .history-card__commerce-fact--home { background: color-mix(in srgb, var(--color-sand-dark) 78%, var(--color-white)); color: var(--intent-text-primary); } .history-section--products .history-card__commerce-fact--returns, .history-section--products .history-card__commerce-fact--options, .history-section--products .history-card__commerce-fact--context, .history-section--products .history-card__commerce-fact--status, .history-section--products .history-card__commerce-fact--neutral { background: color-mix(in srgb, var(--intent-text-secondary) 30%, var(--color-white)); color: var(--intent-text-primary); } .history-section--products .history-card__commerce-fact span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .history-empty { max-width: 640px; gap: 12px; } .history-empty__art { display: block; width: min(420px, 54vw); max-width: 100%; height: auto; margin: 0 auto 8px; } .history-empty .favorites-empty__cta { border-radius: var(--radius-pill, 999px); } @media (max-width: 640px) { .history-empty__art { width: min(280px, 78vw); } } .history-clear-modal-overlay { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--intent-text-primary) 28%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } body.history-clear-modal-open { overflow: hidden; } .history-clear-modal-overlay[hidden] { display: none; } .history-clear-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .history-clear-modal-shell { width: min(390px, 100%); } .history-clear-modal { position: relative; display: grid; gap: 14px; width: 100%; padding: 23px 24px 22px; border: 1px solid var(--intent-surface-line); border-radius: 24px; background: var(--intent-surface-raised); box-shadow: var(--popup-shadow); color: var(--intent-text-primary); transform: translateY(10px) scale(0.98); transition: transform 0.18s ease; } .history-clear-modal-overlay.is-open .history-clear-modal { transform: translateY(0) scale(1); } .history-clear-modal:focus { outline: 0; } .history-clear-modal__head { display: flex; align-items: center; gap: 13px; min-width: 0; } .history-clear-modal__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-pill, 999px); background: transparent; color: var(--intent-text-primary); flex: 0 0 44px; pointer-events: none; } .history-clear-modal__icon .history-action__icon { width: 22px; height: 22px; } .history-clear-modal__title { margin: 0; font-family: var(--popup-title-font, var(--font-display)); font-size: var(--popup-title-size, 25px); font-weight: var(--popup-title-weight, 600); line-height: var(--popup-title-line-height, 1.16); letter-spacing: var(--popup-title-letter-spacing, 0); color: var(--intent-text-primary); min-width: 0; } .history-clear-modal__copy { margin: 0; color: var(--intent-text-secondary); font-size: 15px; font-weight: 600; line-height: 1.35; } .history-clear-modal__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 2px; } .history-clear-modal__button { position: relative; isolation: isolate; min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--radius-pill, 999px); background: transparent; font-family: var(--font-heading); font-size: 15px; font-weight: 800; letter-spacing: 0; cursor: pointer; transform: none; box-shadow: none; } .history-clear-modal__button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--history-clear-modal-button-bg, transparent); transform: scale(1); transform-origin: center; transition: transform 0.18s ease; will-change: transform; } .history-clear-modal__button--secondary { --history-clear-modal-button-bg: var(--intent-surface-raised); min-width: 142px; color: var(--intent-text-primary); } .history-clear-modal__button--primary { --history-clear-modal-button-bg: var(--intent-text-primary); min-width: 172px; color: var(--intent-brand-on); } .history-clear-modal__button--secondary:hover, .history-clear-modal__button--secondary:focus-visible { box-shadow: var(--shadow-card-hover); } .history-clear-modal__button--primary:hover::before, .history-clear-modal__button--primary:focus-visible::before { transform: scale(var(--hover-grow-scale)); } .history-no-results { margin: 34px 0 50px; color: var(--intent-text-secondary); font-family: var(--font-heading); font-size: 16px; font-weight: 700; } @media (max-width: 1180px) { .history-page__layout { grid-template-columns: minmax(0, 1fr); gap: 22px; } .history-side-panel { order: -1; padding-top: 0; } .history-actions { gap: 8px; } } @media (max-width: 951px) { .page--history { --history-side-sticky-top: 106px; padding-top: 89px; } } @media (max-width: 760px) { .history-side-panel { position: static; top: auto; } .history-page__title { font-size: 32px; } .history-toolbar { flex-direction: column; align-items: stretch; } .history-section--products .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .history-section--products .history-card__commerce-facts { top: calc( (466 * var(--cat-card-unit-y)) + var(--cat-card-content-shift) - var(--cat-card-title-lift, 0px) ); gap: calc(4 * var(--cat-card-unit-y)); font-size: calc(12px * var(--cat-card-mobile-readable, 1)); } .history-section--products .cat-card--no-service .history-card__commerce-facts { top: calc( (444 * var(--cat-card-unit-y)) + var(--cat-card-content-shift) - var(--cat-card-title-lift, 0px) ); } .history-section--products .history-card__commerce-fact { min-height: calc(24px * var(--cat-card-mobile-readable, 1)); padding: calc(5px * var(--cat-card-mobile-readable, 1)) calc(8px * var(--cat-card-mobile-readable, 1)); } .history-actions { grid-template-columns: minmax(0, 1fr); } .history-search { min-height: 48px; grid-template-columns: 28px minmax(0, 1fr); } .history-search__input { font-size: 16px; } .history-clear-modal-overlay { align-items: end; padding: 16px 10px calc(16px + env(safe-area-inset-bottom, 0px)); } .history-clear-modal-shell { width: 100%; } .history-clear-modal { gap: 13px; padding: 20px 18px 18px; border-radius: 22px; } .history-clear-modal__title { font-size: var(--popup-title-size, 25px); line-height: var(--popup-title-line-height, 1.16); } .history-clear-modal__copy { font-size: 14px; } .history-clear-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .history-clear-modal__button { min-width: 0; min-height: 44px; padding-inline: 12px; font-size: 14px; } } @media (max-width: 720px) { .page--history { padding-top: 68px; } } @media (max-width: 360px) { .history-section--products .history-card__commerce-facts { left: calc(5 * var(--cat-card-unit-x)); right: calc(5 * var(--cat-card-unit-x)); font-size: calc(11px * var(--cat-card-mobile-readable, 1)); } .history-section--products .history-card__commerce-fact { padding: calc(4px * var(--cat-card-mobile-readable, 1)) calc(6px * var(--cat-card-mobile-readable, 1)); } } body.page--history .history-clear-modal-overlay.is-open { opacity: 1 !important; } .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; --homepage-rail-overlay-reserve: 0px; --page-bg: #f8f1eb; --homepage-hero-gap-desktop: 0px; --homepage-hero-gap-mobile: 0px; --homepage-container-gap-desktop: 60px; --homepage-section-gap-desktop: var(--homepage-container-gap-desktop); --homepage-section-gap-mobile: 33px; --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; } body.is-homepage-authenticated [data-recently-viewed-guest-only] { display: none !important; } 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); } } @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; } } h1, h2, h1[class], h2[class], h1[id], h2[id] { font-family: var(--font-display) !important; } button, [role="button"], .btn, [class*="-btn"], [class*="__btn"], [class*="-button"], [class*="__button"] { font-family: var(--font-display) !important; } button *, [role="button"] *, .btn *, [class*="-btn"] *, [class*="__btn"] *, [class*="-button"] *, [class*="__button"] * { font-family: var(--font-display) !important; } @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; } } .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; } }