/* CastShop home.dart: HomeTabAppBar, HomeFeaturedCards, HomeCategory, HomeProductTagSection and the persistent main tabs. Scoped to the home page. */ .global-storefront body.theme-beclean.app-home-page { --cast-content-width: 1120px; --cast-home-gutter: 24px; --cast-discount: #ff2d55; color: #000; /* Clip horizontal overflow without making body a separate sticky scroll container. */ overflow-x: clip; } .global-storefront .app-home-page main { display: flex; flex-direction: column; } .global-storefront .app-home-page main > .catalog-seo-welcome { order: 2; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar { border: 0; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .topbar-inner { grid-template-rows: 56px !important; gap: 12px; } .global-storefront .app-home-page.cast-app-header .gp-wordmark { height: 24px; } .global-storefront .app-home-page .gp-app-gift { display: grid; } .global-storefront .app-home-page .gp-storefront { padding-top: 8px; } .global-storefront .app-home-page .app-home-quick-menu { display: flex; justify-content: space-around; gap: 8px; padding: 24px 0 14px; margin: 0 0 18px; border: 0; overflow-x: auto; scrollbar-width: none; } .global-storefront .app-home-page .app-home-shortcut { flex: 0 0 70px; flex-direction: column; gap: 8px; width: auto; min-height: 74px; padding: 0; font-size: 12px; color: #4a4e54; } .global-storefront .app-home-page .app-home-shortcut + .app-home-shortcut { border: 0; } .global-storefront .app-home-page .app-home-shortcut-image { width: 48px; height: 48px; border-radius: 4px; background: #f4f5f6; } .global-storefront .app-home-page .app-home-shortcut-image::after { width: 44px; height: 44px; background: #222222; transform: scale(1.15); } .global-storefront .app-home-page .app-home-section { margin: 24px 0 36px; padding: 0; border: 0; } .global-storefront .app-home-page .app-home-section-heading { margin-bottom: 16px; } .global-storefront .app-home-page :is(.app-home-section-heading, .app-home-spotlight) h2, .global-storefront .app-home-page .app-home-all-heading { font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -.4px; color: #000; } .global-storefront .app-home-page .app-home-rail { grid-auto-columns: calc((100% - 64px) / 5); gap: 16px; } .global-storefront .app-home-page .app-home-rail .gp-media, .global-storefront .app-home-page .app-home-rail .gp-skeleton-image { aspect-ratio: 4 / 4.5; border-radius: 4px; } .global-storefront .app-home-page .gp-card-brand-row { margin-top: 7px; } .global-storefront .app-home-page .gp-card-brand { font-size: 13px; font-weight: 600; } .global-storefront .app-home-page .gp-card-title { margin: 3px 0 5px; font-size: 14px; line-height: 1.3; font-weight: 500; min-height: 2.6em; } .global-storefront .app-home-page :is(.gp-current,.gp-discount) { font-size: 15px; line-height: 1.2; } .global-storefront .app-home-page .app-home-spotlight { padding: 0; border: 0; margin: 30px 0 36px; } .global-storefront .app-home-page .app-home-brand-grid { margin-top: 18px; gap: 20px 14px; } .global-storefront .app-home-page .app-home-promo { margin-bottom: 24px; border-radius: 4px; background: #f6f7f9; } .global-storefront .app-home-page #appHomeFeatured #gpBroadcasts { margin: 0; padding: 0; border: 0; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-heading { margin: 0 0 12px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-heading h2 { font-size: 15px; color: #000; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-filters { gap: 16px; padding: 0 0 12px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-filters button { flex-direction: row; min-width: 0; padding: 4px 0; font-size: 12px; font-weight: 500; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-app-icon { display: none; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-filters button[aria-pressed='true'] { font-weight: 700; text-decoration: none; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; padding-bottom: 0; scrollbar-width: none; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card { aspect-ratio: 1; border-radius: 4px; background: #f0f0f0; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption { inset-inline: 18px; bottom: 24px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { font-size: 22px; line-height: 1.3; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-host { font-size: 13px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-badge { border-radius: 4px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-feedback { padding: 16px; margin: 0; } .global-storefront .app-home-featured-skeleton { aspect-ratio: 1; border-radius: 4px; background: #f0f0f0; } .global-storefront .app-home-events { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 24px 0 32px; } .global-storefront .app-home-event { border: 0; background: #f6f7f9; border-radius: 4px; overflow: hidden; padding: 0; cursor: pointer; scroll-snap-align: start; } .global-storefront .app-home-event img { display: block; width: 100%; max-height: 360px; object-fit: contain; } .global-storefront .app-home-event-dialog { width: min(580px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 24px; border: 0; border-radius: 4px; color: #000; font-family: Pretendard,sans-serif; overscroll-behavior: contain; } .global-storefront .app-home-event-dialog::backdrop { background: #0008; } .global-storefront .app-home-event-dialog > img { display: block; width: 100%; } .global-storefront .app-home-event-close { display: block; margin-inline-start: auto; min-height: 40px; background: none; border: 0; cursor: pointer; font: inherit; } .global-storefront .app-home-event-app { display: block; padding: 16px; border-radius: 4px; background: #000; color: #fff; text-align: center; text-decoration: none; } .global-storefront .app-home-guides { margin: 36px auto; border-top: 1px solid #eee; width: min(var(--cast-content-width), calc(100% - var(--cast-home-gutter) * 2)); padding-top: 20px; } .global-storefront .app-home-guides > summary { color: #737373; cursor: pointer; font-size: 13px; } .global-storefront .app-home-guides .catalog-seo-welcome { width: 100%; margin-inline: 0; padding-inline: 0; } .global-storefront .app-home-guides .catalog-store-help { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 12px; } .global-storefront .app-home-guides .catalog-store-help a { display: inline-flex; align-items: center; min-height: 36px; color: #666; text-decoration: none; } .global-storefront .app-home-guides .catalog-store-help a:hover { color: #181d21; text-decoration: underline; text-underline-offset: 4px; } .global-storefront .app-home-guides .catalog-store-help a:focus-visible { outline: 2px solid #181d21; outline-offset: 4px; } .global-storefront .app-home-page .app-home-bottom-nav { display: none; } .global-storefront .app-home-page :is(#appHomeAllProducts,#gpBroadcasts,#app-home-shopping) { scroll-margin-top: 68px; } @media (max-width: 1024px) and (min-width: 761px) { .global-storefront .app-home-page .app-home-rail { grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: 43%; } } @media (max-width: 760px) { .global-storefront body.theme-beclean.app-home-page { --cast-home-gutter: 16px; padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .topbar-inner { grid-template-rows: 45px !important; gap: 4px; } .global-storefront .app-home-page.cast-app-header .gp-wordmark { height: 20px; } .global-storefront .app-home-page.cast-app-header .gp-search.is-search-open { height: 45px; } .global-storefront .app-home-page.cast-app-header .gp-app-leading { gap: 0; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .header-icon-btn { width: 32px; height: 40px; } .global-storefront .app-home-page .gp-storefront { padding-top: 10px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-heading { display: none; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-filters { padding-bottom: 10px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: 87%; gap: 10px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { font-size: 22px; } .global-storefront .app-home-page .app-home-quick-menu { justify-content: space-between; gap: 4px; padding: 22px 0 10px; margin: 0 -8px 10px; } .global-storefront .app-home-page .app-home-shortcut { flex: 1 0 52px; min-height: 66px; gap: 7px; font-size: 10px; } .global-storefront .app-home-page .app-home-shortcut-image { width: 44px; height: 44px; border-radius: 4px; } .global-storefront .app-home-page .app-home-shortcut-image::after { width: 42px; height: 42px; } .global-storefront .app-home-page .app-home-section { margin: 22px 0 30px; } .global-storefront .app-home-page .app-home-rail { grid-auto-columns: 40%; gap: 8px; margin-inline-end: -16px; padding-inline-end: 16px; } .global-storefront .app-home-page .gp-card-title { font-size: 14px; } .global-storefront .app-home-page :is(.gp-current,.gp-discount) { font-size: 15px; } .global-storefront .app-home-page .app-home-bottom-nav { display: flex; position: fixed; z-index: 120; bottom: 0; inset-inline: 0; height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 5px 12px env(safe-area-inset-bottom, 0px); align-items: center; justify-content: space-around; border-top: 1px solid #eee; background: #fff; } .global-storefront .app-home-bottom-nav > :is(a,button) { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; border: 0; padding: 0; background: none; color: #999; font: 500 10px/1.2 Pretendard,sans-serif; text-decoration: none; cursor: pointer; } .global-storefront .app-home-bottom-nav > [aria-current='page'] { color: #000; font-weight: 700; } .global-storefront .app-home-bottom-nav .cast-app-icon { width: 22px; height: 22px; font-size: 22px !important; } } /* Shopping home: public broadcasts first, followed by app categories and products. */ .global-storefront body.theme-beclean.app-home-page { --cast-content-width: 1200px; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar { position: sticky !important; top: 0 !important; border-bottom: 1px solid #eee; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .topbar-inner { grid-template-columns: auto minmax(0,1fr) auto !important; grid-template-rows: 76px !important; gap: 48px; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .header-brand { grid-area: 1 / 1 !important; } .global-storefront .app-home-page.cast-app-header .gp-wordmark { height: 30px; } .global-storefront .app-home-page.cast-app-header .gp-app-leading { grid-area: 1 / 2; justify-content: center; } .global-storefront .app-home-page.cast-app-header .gp-app-leading .gp-app-gift { display: none; } .global-storefront .app-home-page.cast-app-header .gp-search, .global-storefront .app-home-page.cast-app-header .gp-search:focus-within { display: flex; flex: 1; width: 100%; max-width: 480px; height: 42px; padding-inline: 14px 4px; border-radius: 4px; background: #f5f5f5; } .global-storefront .app-home-page.cast-app-header .gp-search input { position: static; width: 100%; opacity: 1; padding: 0; pointer-events: auto; font-size: 14px; } .global-storefront .app-home-page.cast-app-header .gp-search button { width: 36px; height: 42px; flex-basis: 36px; } .global-storefront .app-home-page.cast-app-header .gp-search .cast-search-close { display: none; } .global-storefront .shop-main-nav { display: flex; align-items: stretch; gap: 30px; width: min(var(--cast-content-width), calc(100% - var(--cast-home-gutter) * 2)); margin: auto; min-height: 48px; overflow-x: auto; scrollbar-width: none; } .global-storefront .shop-main-nav > :is(a,button) { display: inline-flex; flex-shrink: 0; align-items: center; padding: 0 0 14px; border: 0; background: none; color: #666; font: 500 14px/1.2 Pretendard,sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; } .global-storefront .shop-main-nav > [aria-current='page'] { color: #111; font-weight: 700; box-shadow: inset 0 -2px #111; } .global-storefront .shop-main-nav > .shop-category-trigger { color: #111; font-weight: 700; margin-inline-end: 14px; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .utility-nav > * { order: 0; flex-shrink: 0; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .header-icon-btn { box-sizing: border-box; } .global-storefront .app-home-page .topbar .gp-announcement { margin: 0; } .global-storefront .app-home-page .app-home-navigation { display: flex; align-items: stretch; gap: 32px; width: min(var(--cast-content-width), calc(100% - var(--cast-home-gutter) * 2)); margin-inline: auto; overflow-x: auto; scrollbar-width: none; } .global-storefront .app-home-page .app-home-navigation .shop-main-nav { width: auto; margin: 0; flex: 1 0 auto; overflow: visible; padding-top: 12px; } .global-storefront .app-home-page .app-home-navigation .cast-primary-nav { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; } .global-storefront .app-home-page .app-home-navigation .cast-primary-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: #666; text-decoration: none; font-size: 12px; } .global-storefront .app-home-page .app-home-navigation .cast-primary-nav a:hover { color: #111; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .language-switcher-panel { inset-inline-start: auto; inset-inline-end: 0; } .global-storefront .app-home-page .gp-storefront { padding-top: 24px; } .global-storefront .shop-home-categories { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 20px; padding: 12px 0 30px; margin-bottom: 8px; } .global-storefront .shop-category-tile { display: flex; flex-direction: column; align-items: center; gap: 11px; color: #222; font-size: 12px; font-weight: 500; text-align: center; text-decoration: none; } .global-storefront .shop-category-picture { display: grid; place-items: center; width: 80px; height: 80px; background: #f7f7f7; border-radius: 4px; overflow: hidden; } .global-storefront .shop-category-picture img { display: block; width: 100%; height: 100%; object-fit: cover; } .global-storefront .shop-category-picture .cast-app-icon { color: #999; } .global-storefront .shop-category-skeleton { min-width: 48px; height: 96px; border-radius: 4px; background: #f5f5f5; } .global-storefront .shop-category-message { font-size: 13px; color: #777; } .global-storefront .app-home-page .app-home-section { margin: 28px 0 40px; } .global-storefront .app-home-page .app-home-rail .gp-media, .global-storefront .app-home-page .app-home-rail .gp-skeleton-image { aspect-ratio: 1; } .global-storefront .app-home-page :is(.gp-current,.gp-discount) { font-size: 16px; } .global-storefront .app-home-page #appHomeFeatured { margin: 0 0 28px; padding: 0; border: 0; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-heading h2 { font-size: 20px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-heading { margin-bottom: 4px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-filters { gap: 22px; padding: 10px 0 16px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-filters button { min-height: 36px; font-size: 13px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-filters button[aria-pressed='true'] { box-shadow: inset 0 -2px #111; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card { aspect-ratio: 1.12; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: calc((100% - 32px) / 3); } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { font-size: 20px; } .global-storefront .app-home-page .app-home-quick-menu { justify-content: start; gap: 22px; padding: 18px 0; margin-bottom: 18px; } .global-storefront .app-home-page .app-home-shortcut { flex: 0 0 auto; flex-direction: row; min-height: 32px; gap: 7px; font-size: 12px; } .global-storefront .app-home-page .app-home-shortcut-image { width: 26px; height: 26px; border-radius: 4px; } .global-storefront .app-home-page .app-home-shortcut-image::after { width: 24px; height: 24px; } .global-storefront .shop-category-panel[hidden] { display: none !important; } .global-storefront .gp-taxonomy-catalog :is(#gpTabs,#gpFilters) { display: none; } .global-storefront .shop-category-breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #888; margin-bottom: 24px; } .global-storefront .shop-category-breadcrumb a { color: #666; text-decoration: none; } .global-storefront .shop-category-parents { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #eee; margin-bottom: 18px; } .global-storefront .shop-category-parents a { flex-shrink: 0; padding: 8px 0 16px; color: #888; font-size: 14px; font-weight: 500; text-decoration: none; } .global-storefront .shop-category-parents [aria-current='page'] { color: #000; font-weight: 700; box-shadow: inset 0 -2px #111; } .global-storefront .shop-category-children { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .global-storefront .shop-category-children a { display: inline-flex; padding: 10px 14px; border: 1px solid #eee; border-radius: 4px; font-size: 13px; text-decoration: none; color: #666; } .global-storefront .shop-category-children [aria-current='page'] { color: #fff; background: #222; border-color: #222; } .global-storefront body.shop-category-open { overflow: hidden; } .global-storefront .shop-category-dialog { width: min(900px,calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 60px); padding: 0; border: 0; border-radius: 4px; color: #111; background: #fff; font-family: Pretendard,sans-serif; overscroll-behavior: contain; } .global-storefront .shop-category-dialog::backdrop { background: #0007; } .global-storefront .shop-category-dialog-header { display: flex; align-items: center; gap: 24px; padding: 22px 28px; border-bottom: 1px solid #eee; } .global-storefront .shop-category-dialog-header h2 { font-size: 20px; margin: 0; } .global-storefront .shop-category-brands { color: #888; font-size: 16px; text-decoration: none; } .global-storefront .shop-category-close { margin-inline-start: auto; border: 0; min-height: 36px; padding: 0 4px; background: none; color: #666; font: 13px Pretendard,sans-serif; cursor: pointer; } .global-storefront .shop-category-dialog-body { display: grid; grid-template-columns: 200px minmax(0,1fr); min-height: 430px; } .global-storefront .shop-category-sidebar { display: flex; flex-direction: column; padding: 14px 0; background: #f8f8f8; } .global-storefront .shop-category-sidebar button { min-height: 48px; border: 0; padding: 12px 24px; background: none; text-align: start; font: 500 14px Pretendard,sans-serif; color: #777; cursor: pointer; } .global-storefront .shop-category-sidebar button[aria-pressed='true'] { color: #000; background: #fff; font-weight: 700; box-shadow: inset 3px 0 #222; } .global-storefront .shop-category-detail { padding: 28px 32px; } .global-storefront .shop-category-detail > .shop-category-picture { width: 100px; height: 100px; margin-bottom: 24px; } .global-storefront .shop-category-parent-link { display: flex; justify-content: space-between; gap: 16px; color: #111; font-size: 18px; font-weight: 700; text-decoration: none; } .global-storefront .shop-category-parent-link span { font-size: 12px; font-weight: 400; color: #888; } .global-storefront .shop-category-detail-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 24px; margin-top: 18px; } .global-storefront .shop-category-detail-links a { display: flex; align-items: center; min-height: 44px; color: #555; font-size: 14px; text-decoration: none; } .global-storefront .shop-category-detail-links a:hover { color: #000; text-decoration: underline; text-underline-offset: 5px; } .global-storefront .app-home-page :is(#appHomeAllProducts,#gpBroadcasts,#app-home-shopping) { scroll-margin-top: 180px; } @media (max-width: 760px) { .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .topbar-inner { grid-template-columns: auto minmax(0,1fr) auto !important; grid-template-rows: 48px !important; gap: 4px; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .header-brand { grid-area: 1 / 2 !important; } .global-storefront .app-home-page.cast-app-header .gp-wordmark { width: 86px; max-width: 100%; height: auto; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .utility-nav { gap: 2px; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .header-icon-btn { width: 32px; min-width: 32px; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar #authTrigger { width: 32px; min-width: 32px; } .global-storefront body.theme-beclean.app-home-page.cast-app-header .topbar .language-switcher-trigger { min-width: 44px; font-size: 12px; gap: 4px; } .global-storefront .app-home-page.cast-app-header .topbar .language-switcher-globe { flex-basis: 16px; width: 16px; height: 16px; } .global-storefront .app-home-page .topbar .gp-announcement { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 8px; } .global-storefront .app-home-page .topbar .gp-announcement strong { margin: 0; } .global-storefront .app-home-page.cast-app-header .gp-app-leading { grid-area: 1 / 1; justify-content: start; } .global-storefront .app-home-page.cast-app-header .gp-app-leading .gp-app-gift { display: grid; } .global-storefront .app-home-page.cast-app-header .gp-search, .global-storefront .app-home-page.cast-app-header .gp-search:focus-within { width: 32px; max-width: 32px; flex: 0 0 32px; padding: 0; background: transparent; } .global-storefront .app-home-page.cast-app-header .gp-search input { position: absolute; width: 0; opacity: 0; pointer-events: none; } .global-storefront .app-home-page.cast-app-header .gp-search.is-search-open { position: absolute; inset-inline: 0; width: 100%; max-width: none; height: 48px; background: #fff; z-index: 150; } .global-storefront .app-home-page.cast-app-header .gp-search.is-search-open input { position: static; width: 100%; opacity: 1; padding-inline: 12px; pointer-events: auto; } .global-storefront .app-home-page.cast-app-header .gp-search.is-search-open .cast-search-close { display: block; } .global-storefront .shop-main-nav { gap: 23px; min-height: 42px; } .global-storefront .shop-main-nav > :is(a,button) { padding-bottom: 11px; font-size: 13px; } .global-storefront .shop-main-nav > .shop-category-trigger { margin-inline-end: 0; } .global-storefront .app-home-page .gp-storefront { padding-top: 14px; } .global-storefront .shop-home-categories { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px 12px; padding: 8px 0 16px; } .global-storefront .shop-category-tile { font-size: 10px; gap: 8px; } .global-storefront .shop-category-picture { width: 60px; height: 60px; border-radius: 4px; } .global-storefront .shop-category-skeleton { height: 76px; } .global-storefront .app-home-page .app-home-section { margin: 22px 0 28px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-heading { display: flex; margin-bottom: 12px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-heading h2 { font-size: 18px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: 57%; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { font-size: 16px; } .global-storefront .app-home-page .app-home-quick-menu { gap: 18px; margin-inline: 0; padding: 18px 0; } .global-storefront .app-home-page .app-home-shortcut { flex: 0 0 auto; min-height: 28px; font-size: 11px; } .global-storefront .app-home-page .app-home-shortcut-image { width: 24px; height: 24px; border-radius: 4px; } .global-storefront .app-home-page .app-home-shortcut-image::after { width: 22px; height: 22px; } .global-storefront .shop-category-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 40px); border-radius: 4px; } .global-storefront .shop-category-dialog-header { gap: 20px; padding: 16px; } .global-storefront .shop-category-dialog-header h2 { font-size: 18px; } .global-storefront .shop-category-brands { font-size: 15px; } .global-storefront .shop-category-dialog-body { grid-template-columns: 100px minmax(0,1fr); min-height: 420px; } .global-storefront .shop-category-sidebar button { padding: 12px 10px; min-height: 48px; font-size: 12px; } .global-storefront .shop-category-detail { padding: 22px 16px; } .global-storefront .shop-category-detail > .shop-category-picture { width: 90px; height: 90px; margin-bottom: 22px; } .global-storefront .shop-category-parent-link { flex-direction: column; gap: 8px; font-size: 17px; } .global-storefront .shop-category-detail-links { grid-template-columns: 1fr; gap: 4px; margin-top: 14px; } .global-storefront .shop-category-detail-links a { font-size: 13px; min-height: 36px; } .global-storefront .shop-category-parents { gap: 20px; } .global-storefront .shop-category-parents a { font-size: 13px; } .global-storefront .shop-category-children { gap: 6px; } .global-storefront .shop-category-children a { padding: 9px 11px; font-size: 12px; } .global-storefront .app-home-page :is(#appHomeAllProducts,#gpBroadcasts,#app-home-shopping) { scroll-margin-top: 154px; } } @media (max-width: 400px) { .global-storefront .app-home-page.cast-app-header .gp-app-leading .gp-app-gift { display: none; } } /* Category and brand browsing mirrors the app's two tabs and numbered list. */ .global-storefront .shop-category-tabs { display: flex; gap: 24px; align-self: stretch; } .global-storefront .shop-category-tabs button { min-height: 44px; border: 0; padding: 8px 0; background: none; color: #888; font: 500 16px/1.3 Pretendard,sans-serif; cursor: pointer; } .global-storefront .shop-category-tabs [aria-selected='true'] { color: #111; box-shadow: inset 0 -2px #111; } .global-storefront .shop-category-dialog-header h2 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .global-storefront .shop-category-dialog-body.is-brands { display: block; min-height: 430px; max-height: min(580px,65dvh); overflow-y: auto; padding: 8px 28px 24px; } .global-storefront .shop-category-brand-list { margin: 0; padding: 0; list-style: none; } .global-storefront .shop-category-brand-list li + li { border-top: 1px solid #eee; } .global-storefront .shop-category-brand-list a { display: flex; align-items: center; gap: 22px; min-height: 64px; color: #111; font-size: 14px; font-weight: 500; text-decoration: none; } .global-storefront .shop-category-brand-number { width: 24px; flex-shrink: 0; font-size: 13px; font-variant-numeric: tabular-nums; } .global-storefront .shop-category-brand-arrow { margin-inline-start: auto; color: #888; } @media (min-width: 761px) and (max-width: 1024px) { .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: 43%; } } @media (max-width: 760px) { .global-storefront .app-home-page #appHomeFeatured { margin: 0 0 22px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-heading { display: flex; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-heading h2 { font-size: 18px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-filters { padding: 4px 0 12px; gap: 20px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: 87%; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card { aspect-ratio: 1; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { font-size: 22px; } .global-storefront .shop-category-tabs { gap: 22px; } .global-storefront .shop-category-tabs button { font-size: 15px; } .global-storefront .shop-category-dialog-body.is-brands { padding-inline: 18px; } } /* App featured cards: media, LIVE only, title and the attached product chip. */ .global-storefront .app-home-page #appHomeFeatured { margin-bottom: 0; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card { aspect-ratio: 1; border-radius: 4px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption { inset-inline: 14px; bottom: 14px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { margin: 0; font-size: 18px; line-height: 1.15; font-weight: 800; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-host { display: block; margin-top: 5px; font-size: 12px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-badge.is-live { border-radius: 4px; font-weight: 800; } .global-storefront .gp-broadcast-product { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 58px; margin-top: 10px; padding: 7px; border: 1px solid #ffffff94; border-radius: 4px; background: #ffffffe0; color: #111; text-shadow: none; backdrop-filter: blur(8px); } .global-storefront .gp-broadcast-product > img { width: 42px; height: 42px; flex-shrink: 0; border-radius: 4px; object-fit: cover; } .global-storefront .gp-broadcast-product-copy { flex: 1; min-width: 0; display: grid; gap: 5px; } .global-storefront .gp-broadcast-product-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.2; font-weight: 600; } .global-storefront .gp-broadcast-product-prices { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-size: 13px; line-height: 1.1; } .global-storefront .gp-broadcast-product-prices s { font-size: 10px; color: #888; } .global-storefront .gp-broadcast-product-prices .gp-broadcast-product-discount { color: #ff2d55; font-size: 14px; } .global-storefront .gp-broadcast-product-more { display: grid; place-items: center; align-self: stretch; min-width: 30px; padding-inline: 4px; border-inline-start: 1px solid #1111; font-size: 11px; font-weight: 600; } .global-storefront .app-home-page .app-home-quick-menu { margin-top: 0; padding-top: 18px; } @media (max-width: 760px) { .global-storefront .app-home-page .gp-storefront { padding-top: 12px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { font-size: 18px; } .global-storefront .gp-broadcast-product { gap: 6px; padding: 6px; min-height: 54px; } .global-storefront .gp-broadcast-product > img { width: 38px; height: 38px; } } /* Shopping navigation uses the live taxonomy, while the home keeps the app's featured-card hierarchy and original shortcut artwork. */ .global-storefront body.theme-beclean.app-home-page { --cast-content-width: 1184px; } .global-storefront .app-home-page .app-home-navigation { gap: 0; } .global-storefront .app-home-page .app-home-navigation .shop-main-nav { min-width: 0; width: 100%; flex: 1 1 auto; gap: 26px; overflow-x: auto; padding-top: 0; } .global-storefront .app-home-page .shop-main-nav > :is(a,button) { min-height: 56px; padding-block: 16px; color: #555b62; font-size: 14px; font-weight: 500; } .global-storefront .app-home-page .shop-main-nav > [aria-current='page'] { color: #111; font-weight: 700; } .global-storefront .app-home-page .shop-main-nav > .shop-category-trigger { gap: 8px; margin-inline-end: 4px; padding-inline-end: 24px; color: #111; font-weight: 700; position: relative; } .global-storefront .shop-category-trigger::after { content: ''; width: 1px; height: 18px; background: #e8eaed; position: absolute; inset-inline-end: 0; } .global-storefront .shop-category-trigger .cast-app-icon { width: 18px; height: 18px; font-size: 18px !important; } .global-storefront .app-home-page .shop-main-nav > .shop-category-brand-tab { margin-inline-start: auto; } .global-storefront .shop-category-nav-skeleton { flex: 0 0 58px; height: 14px; margin-block: 21px; background: #f1f2f4; border-radius: 4px; } .global-storefront .app-home-preferences .cast-primary-nav { display: flex; flex-wrap: wrap; gap: 20px; padding-block: 16px; } .global-storefront .app-home-preferences .cast-primary-nav a { color: #838890; font-size: 12px; text-decoration: none; } .global-storefront .app-home-page .gp-storefront { padding-top: 22px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; padding-block: 4px 14px; align-items: center; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card { border-radius: 4px; transform: translateY(8px) scale(.95); transform-origin: center; transition: transform 240ms ease; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card.is-featured-active { transform: none; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card::after { background: linear-gradient(180deg,#0000006b 0%,#00000014 45%,#000000b3 100%); } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption { inset-inline: 18px; bottom: 18px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { font-size: 20px; line-height: 1.28; letter-spacing: -.35px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product { min-height: 64px; margin-top: 12px; padding: 8px; gap: 9px; border: 1px solid #fff; border-radius: 4px; background: #fff; backdrop-filter: none; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product > img { width: 46px; height: 46px; border-radius: 4px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product-name { font-size: 12px; font-weight: 500; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product-prices { font-size: 14px; gap: 5px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product-discount { font-size: 15px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product-more { min-width: 32px; border: 0; border-radius: 4px; background: #f5f6f8; font-size: 11px; } .global-storefront .app-home-page .app-home-quick-menu { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 12px; margin: 0; padding: 18px 0 28px; overflow: visible; } .global-storefront .app-home-page .app-home-shortcut { flex: none; flex-direction: column; min-height: 84px; gap: 10px; font-size: 13px; font-weight: 500; color: #35393f; } .global-storefront .app-home-page .app-home-shortcut-image { width: 52px; height: 52px; border-radius: 4px; background: #f6f8f9; } .global-storefront .app-home-page .app-home-shortcut-image::after { display: none; } .global-storefront .app-home-shortcut-image img { display: block; width: 86px; height: 86px; max-width: none; object-fit: contain; } .global-storefront .app-home-shortcut-image[data-shortcut='product'] img { width: 40px; height: 40px; } .global-storefront .app-home-page .app-home-promo { min-height: 80px; padding: 10px 22px; margin-bottom: 28px; border-radius: 4px; background: #f5f6f8; gap: 14px; } .global-storefront .app-home-page .app-home-promo > img { width: 64px; height: 56px; margin-inline-start: -8px; } .global-storefront .app-home-page .app-home-promo strong { font-size: 16px; font-weight: 700; letter-spacing: -.25px; } .global-storefront .app-home-page .app-home-promo span span { margin-top: 2px; color: #7c828b; font-size: 12px; line-height: 1.5; } .global-storefront .app-home-page .shop-home-categories { padding-block: 8px 30px; } @media (min-width: 761px) and (max-width: 1024px) { .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: 43%; gap: 14px; } } @media (max-width: 760px) { .global-storefront .app-home-page .app-home-navigation .shop-main-nav { gap: 22px; } .global-storefront .app-home-page .shop-main-nav > :is(a,button) { min-height: 48px; padding-block: 14px; font-size: 12px; } .global-storefront .app-home-page .shop-main-nav > .shop-category-trigger { padding-inline-end: 17px; margin-inline-end: 0; gap: 5px; } .global-storefront .app-home-page .shop-main-nav > .shop-category-brand-tab { margin-inline-start: 0; } .global-storefront .app-home-page .gp-storefront { padding-top: 14px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-rail { grid-auto-columns: 87%; gap: 6px; padding-bottom: 12px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card { border-radius: 4px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption { inset-inline: 14px; bottom: 14px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { font-size: 18px; line-height: 1.23; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product { min-height: 56px; gap: 7px; padding: 7px; margin-top: 10px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product > img { width: 40px; height: 40px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product-prices { font-size: 13px; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-product-discount { font-size: 14px; } .global-storefront .app-home-page .app-home-quick-menu { gap: 2px; padding: 14px 0 20px; } .global-storefront .app-home-page .app-home-shortcut { min-height: 64px; gap: 7px; font-size: 10px; } .global-storefront .app-home-page .app-home-shortcut-image { width: 38px; height: 38px; border-radius: 4px; } .global-storefront .app-home-shortcut-image img { width: 64px; height: 64px; } .global-storefront .app-home-shortcut-image[data-shortcut='product'] img { width: 29px; height: 29px; } .global-storefront .app-home-page .app-home-promo { min-height: 76px; padding: 10px 14px; gap: 8px; margin-bottom: 24px; border-radius: 4px; } .global-storefront .app-home-page .app-home-promo > img { width: 48px; height: 48px; margin-inline-start: -5px; } .global-storefront .app-home-page .app-home-promo strong { font-size: 14px; } .global-storefront .app-home-page .app-home-promo span span { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card { transition: none; } } .global-storefront .app-home-page .app-home-shortcut-image { position: relative; } .global-storefront .app-home-shortcut-image img { position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%,-50%); } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-caption h3 { word-break: keep-all; overflow-wrap: break-word; } .global-storefront .app-home-page .app-home-promo span span { word-break: keep-all; overflow-wrap: break-word; } /* App event artwork fills the banner, matching ShopHeroBannerCard. */ .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card.is-event { background: #f6f7f9; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card.is-event::after { display: none; } .global-storefront .app-home-page #appHomeFeatured .gp-broadcast-card.is-event > img { object-fit: cover; } .global-storefront .gp-broadcast-card.is-event > button { border: 0; padding: 0; background: transparent; cursor: pointer; } /* Product navigation belongs to each image row, with the heading reserved for View all. */ .global-storefront .app-home-page .app-home-rail-wrap { position: relative; min-width: 0; } .global-storefront .app-home-page .app-home-rail-wrap .cast-rail-arrow { position: absolute; z-index: 2; top: var(--rail-arrow-top, 50%); transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 64px; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgb(0 0 0 / 44%); box-shadow: none; cursor: pointer; } .global-storefront .app-home-page .app-home-rail-wrap .cast-rail-arrow[hidden] { display: none; } .global-storefront .app-home-page .app-home-rail-wrap .cast-rail-arrow[data-direction="-1"] { inset-inline-start: -40px; } .global-storefront .app-home-page .app-home-rail-wrap .cast-rail-arrow[data-direction="1"] { inset-inline-end: -40px; } .global-storefront .app-home-page .app-home-rail-wrap .cast-rail-arrow:hover { color: #555; background: transparent; } .global-storefront .app-home-page .app-home-rail-wrap .cast-rail-arrow:focus-visible { outline: 2px solid #222; outline-offset: 3px; } .global-storefront .app-home-page .cast-rail-chevron { width: 16px; height: 32px; border: 0; margin: 0; background: currentColor; opacity: .8; transform: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 12'%3E%3Cpath d='M4.505 6 .582 2.077l.636-.636L5.778 6l-4.56 4.558-.636-.636L4.505 6Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 12'%3E%3Cpath d='M4.505 6 .582 2.077l.636-.636L5.778 6l-4.56 4.558-.636-.636L4.505 6Z'/%3E%3C/svg%3E") center / contain no-repeat; } .global-storefront .app-home-page .cast-rail-arrow[data-direction="-1"] .cast-rail-chevron { transform: scaleX(-1); } .global-storefront[dir="rtl"] .app-home-page .cast-rail-chevron { transform: scaleX(-1); } .global-storefront[dir="rtl"] .app-home-page .cast-rail-arrow[data-direction="-1"] .cast-rail-chevron { transform: none; } @media (min-width: 768px) and (max-width: 1399px) { .global-storefront .app-home-page .app-home-rail-wrap .cast-rail-arrow[data-direction="-1"] { inset-inline-start: -24px; } .global-storefront .app-home-page .app-home-rail-wrap .cast-rail-arrow[data-direction="1"] { inset-inline-end: -24px; } } @media (max-width: 767px) { .global-storefront .app-home-page .app-home-rail-wrap .cast-rail-arrow { display: none; } } /* Keep the introduction and footer free of decorative divider lines. */ .global-storefront .app-home-preferences, .global-storefront .app-home-preferences .app-home-guides, .global-storefront .app-home-preferences .cast-primary-nav, .global-storefront .app-home-guides .catalog-seo-discovery { border: 0; }