.shopping-video__product-card { display: flex; gap: 10px; height: 76em; padding: 10px; background-color: rgb(var(--color-background)); border-radius: var(--product-card-border-radius, 0); } .shopping-video__product-card-image { flex-shrink: 0; height: 100%; aspect-ratio: 1/1; background-color: rgb(var(--color-media-background)); } .shopping-video__product-card-image>img { width: 100%; height: 100%; object-fit: cover; } .shopping-video__product-card-title-wrapper { display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - 122em); overflow: hidden; } .shopping-video__product-card-title { display: -webkit-box; overflow: hidden; line-height: 120%; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .shopping-video__product-card-price { flex-wrap: nowrap; } .shopping-video__product-card-price>div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shopping-video__product-card-price>div:nth-child(2) { flex: 1; } .shopping-video__product-card-price .product-price__sale { color: rgb(var(--color-text)); } .shopping-video__product-card-operate-wrapper { display: flex; flex-shrink: 0; gap: 10px; align-items: flex-end; margin-inline-start: auto; } .shopping-video__product-card-operate-wrapper-icon { width: 30em; height: 30em; color: rgb(var(--color-text)); cursor: pointer; } .shopping-video__product-card-operate-wrapper-icon>svg { width: 100%; height: 100%; } .shopping-video__product-card-operate-wrapper-quick-add { position: relative; display: flex; align-items: center; justify-content: center; color: rgb(var(--color-background)); background-color: rgb(var(--color-text)); border-radius: 50%; } .shopping-video__product-card-operate-wrapper-quick-add>svg { position: relative; inset-inline-start: 1px; width: 18em; height: 18em; } .shopping-video__product-card-operate-wrapper-quick-add .shopping-video__product-card-quick-add-form { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100%; } .shopping-video__product-card-operate-wrapper-quick-add .shopping-video__product-card-quick-add-form>button { width: 100%; height: 100%; opacity: 0; } .shopping-video__product-card-operate-wrapper-toggle { transition: all 0.3s ease-in-out; } .shopping-video__product-card-operate-wrapper-toggle--expand { transform: rotate(180deg); } .shopping-video__product-card-group { position: absolute; inset-block-end: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-height: 76em; overflow: hidden; border-start-start-radius: var(--product-card-border-radius, 0); border-start-end-radius: var(--product-card-border-radius, 0); transition: all 0.3s ease-in-out; } .shopping-video__product-card-group> :nth-child(1) { order: 1; } .shopping-video__product-card-group--under-video { background-color: rgb(255 255 255/100%); } .shopping-video__product-card-group--above-video { background-color: rgb(255 255 255 / 50%); } .shopping-video__product-card-group--expand { max-height: 100%; } .shopping-video__product-video-group { position: relative; width: 100%; overflow: hidden; border-radius: var(--product-card-border-radius, 0); transition: all 0.3s ease-in-out; } .shopping-video__product-video-group--without-transition { transition: none; } .shopping-video__product-video-group-video--padding-block-end { padding-block-end: 76em; } .shopping-video__product-video-group-card-group-wrapper { width: 100%; height: 76em; max-height: 76em; } .shopping-video__product-video-group-card-group-wrapper--above-video { position: absolute; inset-block-end: 0; height: 100%; max-height: 100%; } @media (max-width: 959px) { .shopping-video__video { width: 250em; } .shopping-video__video-wrapper { height: 490em; } } @media (min-width: 960px) { .shopping-video__video { width: 320em; } .shopping-video__video-wrapper { height: 533em; } } .shopping-video__video { position: relative; overflow: hidden; border-radius: var(--product-card-border-radius, 0); } .shopping-video__video-wrapper { position: relative; width: 100%; color: #000; background-color: #f3f3f3; } .shopping-video__video-wrapper-media { height: 100%; } .shopping-video__video-wrapper-media .theme-video-media { width: 100%; height: 100%; } .shopping-video__video-wrapper-autoplay { position: absolute; } .shopping-video__video-wrapper-mute { display: none; } .shopping-video__video-wrapper-mute--active { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 2; display: block; width: 36em; height: 36em; } .shopping-video__video-wrapper-mute--active>svg { width: 100%; height: 100%; } .shopping-video__video-text-group-wrapper { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; } .shopping-video__video-text-group-wrapper--full-height { height: 100% !important; } .shopping-video__video-text-group-wrapper>div { height: 100%; } .shopping-video__video-text-group-wrapper--float { position: absolute; inset-block-end: 0; z-index: 4; } @keyframes shopping-video-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .shopping-video__product-video-list-group { --base-scale-ratio: 1.1; font-size: calc(var(--base-scale-ratio) * 1px); } .shopping-video__product-video-list-group theme-carousel { display: flex; } .shopping-video__product-video-list-group-track-container { position: relative; min-width: 0; max-width: 100%; } @media (min-width: 960px) { .shopping-video__product-video-list-group-track-container--page { padding: 0 44px; } } .shopping-video__product-video-list-group-track-container-wrapper { display: flex; align-items: center; max-width: 100%; } @media (max-width: 959px) { .shopping-video__product-video-list-group-track-container-wrapper { min-width: 250em; padding: 0 12.5px; } } @media (min-width: 960px) { .shopping-video__product-video-list-group-track-container-wrapper { min-width: 320em; padding: 0 16px; } } .shopping-video__product-video-list-group-track-container-wrapper>li { display: flex; flex-shrink: 0; align-items: center; justify-content: center; } @media (max-width: 959px) { .shopping-video__product-video-list-group-track-container-wrapper>li { margin: 0 -12.5px; } } @media (min-width: 960px) { .shopping-video__product-video-list-group-track-container-wrapper>li { margin: 0 -16px; } } .shopping-video__product-video-list-group-track-container-wrapper>li .shopping-video__product-video-group { transform: scale(0.909); } .shopping-video__product-video-list-group-track-container-wrapper>li.is-active .shopping-video__product-video-group, .shopping-video__product-video-list-group-track-container-wrapper>li.zoom .shopping-video__product-video-group { transform: scale(1); } .shopping-video__product-video-list-group-track-container-indicator-pager--pages-arrow>button { position: absolute; inset-block-start: 39%; padding: 0; background: none; border: none; } .shopping-video__product-video-list-group-track-container-indicator-pager--pages-arrow>button[name="previous"] { inset-inline-start: 0; transform: rotate(180deg); } .shopping-video__product-video-list-group-track-container-indicator-pager--pages-arrow>button[name="next"] { inset-inline-end: 0; } .shopping-video__product-video-list-group-track-indicator { display: flex; flex-shrink: 0; align-items: center; } .shopping-video__product-video-list-group-track-indicator-pager--progresses { display: flex; gap: 10px; justify-content: center; width: 100%; } .shopping-video__product-video-list-group-track-indicator-pager--progress { display: block; width: 120px; height: 6px; padding: 0; overflow: hidden; cursor: pointer; background-color: rgb(var(--color-text), 50%); border: 0; } .shopping-video__product-video-list-group-track-indicator-pager--progress.is-active { opacity: 1; } .shopping-video__product-video-list-group-track-indicator-pager--progress.is-active .shopping-video__product-video-list-group-track-indicator-pager--progress-inner { display: block; width: 100%; height: 100%; background-color: rgb(var(--color-text)); animation: shopping-video-progress 0s linear forwards; } .shopping-video__product-video-list-group-track-indicator-pager--arrows { display: flex; gap: 8px; } .shopping-video__product-video-list-group-track-indicator-pager--arrows>button { background: none; border: none; } .shopping-video__product-video-list-group-track-indicator-pager--arrows>button>svg { width: 40px; height: 40px; } .shopping-video__product-video-list-group-track-indicator-pager--arrow-icon--previous { transform: rotate(90deg); } .shopping-video__product-video-list-group-track-indicator-pager--arrow-icon--next { transform: rotate(-90deg); } .shopping-video__product-video-list-group-track-indicator-pager--pages { width: 4ch; font-weight: bold; } .shopping-video__product-text-group { display: flex; align-items: flex-end; height: 100%; } .shopping-video__product-text-group--float .shopping-video__heading, .shopping-video__product-text-group--float .shopping-video__description { color: #fff; } .shopping-video__product-text-group--normal { background-color: rgb(var(--color-background)); } .shopping-video__product-text-group--normal .shopping-video__heading, .shopping-video__product-text-group--normal .shopping-video__description { color: rgb(var(--color-text)); } .shopping-video-section { overflow: auto; background-color: rgb(var(--color-background)); } @media (max-width: 959px) { .shopping-video-section { padding: 0; } } .shopping-video-section-wrapper { max-width: 100%; } .shopping-video-section-wrapper__video-list-group-wrapper { width: 100%; min-width: 0; max-width: 100%; } .shopping-video-section { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden; } .shopping-video-section-wrapper { gap: 0 !important; } .shopping-video-section-wrapper>.block-text, .shopping-video-section-wrapper>[class*="block-text"] { font-family: Figtree, sans-serif; line-height: 1.35; letter-spacing: 0; } .shopping-video-section-wrapper>.block-text p, .shopping-video-section-wrapper>[class*="block-text"] p { margin: 0; } .shopping-video-section-wrapper>.block-text p:first-child, .shopping-video-section-wrapper>[class*="block-text"] p:first-child { font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; } .shopping-video-section-wrapper>.block-text p+p, .shopping-video-section-wrapper>[class*="block-text"] p+p { margin-top: 8px; font-size: 10px; font-weight: 400; } .shopping-video-section-wrapper__video-list-group-wrapper { margin-top: 22px; } .shopping-video__product-video-list-group { --base-scale-ratio: 1; width: 100%; font-family: Figtree, sans-serif; font-size: 1px; } .shopping-video__product-video-list-group theme-carousel, .shopping-video__product-video-list-group-track-container, .shopping-video__product-video-list-group-track-container-wrapper { width: 100%; max-width: 100%; } .shopping-video__product-video-list-group-track-container, .shopping-video__product-video-list-group-track-container--page { padding: 0 20px; overflow: hidden; } .shopping-video__product-video-list-group-track-container-wrapper { min-width: 0; padding: 0; gap: 2px !important; align-items: stretch; justify-content: center; scroll-snap-type: x mandatory; } .shopping-video__product-video-list-group-track-container-wrapper>li { flex: 0 0 clamp(132px, 12.25vw, 238px); margin: 0; scroll-snap-align: start; } .shopping-video__product-video-list-group-track-container-wrapper>li .shopping-video__product-video-group, .shopping-video__product-video-list-group-track-container-wrapper>li.is-active .shopping-video__product-video-group, .shopping-video__product-video-list-group-track-container-wrapper>li.zoom .shopping-video__product-video-group { transform: none; } .shopping-video__product-video-group, .shopping-video__video { width: 100%; height: 100%; border-radius: 3px; } .shopping-video__video-wrapper { width: 100%; height: auto; aspect-ratio: 9 / 16; overflow: hidden; } .shopping-video__video-wrapper-media, .shopping-video__video-wrapper-media .theme-video-media, .shopping-video__video-wrapper-media video, .shopping-video__video-wrapper-media iframe, .shopping-video__video-wrapper-media img { width: 100%; height: 100%; object-fit: cover; } .shopping-video__video-text-group-wrapper, .shopping-video__video-wrapper-mute { display: none !important; } .shopping-video__product-video-group-card-group-wrapper, .shopping-video__product-video-group-card-group-wrapper--above-video { position: absolute; inset: auto 6px 6px; z-index: 6; width: auto; height: 38px; max-height: 38px; pointer-events: auto; } .shopping-video__product-card-group, .shopping-video__product-card-group--under-video, .shopping-video__product-card-group--above-video { position: static; width: 100%; height: 38px; max-height: 38px; overflow: hidden; background: linear-gradient(90deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 60%)); border-radius: 2px; } .shopping-video__product-card-group> :not(:first-child) { display: none; } .shopping-video__product-card { gap: 7px; width: 100%; height: 38px; padding: 3px; color: #fff; background: transparent; border-radius: 2px; } .shopping-video__product-card-link { display: flex; gap: 7px; align-items: center; width: 100%; min-width: 0; color: inherit; text-decoration: none; cursor: pointer; } .shopping-video__product-card-image { width: 32px; height: 32px; aspect-ratio: 1; overflow: hidden; background: #fff; border-radius: 1px; } .shopping-video__product-card-title-wrapper { justify-content: center; width: calc(100% - 39px); min-width: 0; } .shopping-video__product-card-title { display: block; overflow: hidden; color: #fff; font-family: Figtree, sans-serif; font-size: 8px; font-weight: 400; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .shopping-video__product-card-price, .shopping-video__product-card-operate-wrapper { display: none !important; } .shopping-video__product-video-list-group-track-indicator { display: none !important; } .shopping-video__product-video-list-group-track-container-indicator-pager--pages-arrow>button { top: 50%; z-index: 10; display: grid; width: 28px; height: 28px; place-items: center; color: #111; cursor: pointer; background: rgb(255 255 255 / 94%); border: 0; border-radius: 50%; box-shadow: 0 1px 4px rgb(0 0 0 / 16%); transform: translateY(-50%); } .shopping-video__product-video-list-group-track-container-indicator-pager--pages-arrow>button[name="previous"] { inset-inline-start: 22px; transform: translateY(-50%) rotate(180deg); } .shopping-video__product-video-list-group-track-container-indicator-pager--pages-arrow>button[name="next"] { inset-inline-end: 22px; } .shopping-video__product-video-list-group-track-container-indicator-pager--pages-arrow>button svg { width: 13px; height: 13px; } .shopping-video__product-video-list-group-track-container-indicator-pager--pages-arrow>button:disabled { visibility: hidden; } @media (max-width: 959px) { .shopping-video-section-wrapper__video-list-group-wrapper { margin-top: 18px; } .shopping-video__product-video-list-group-track-container, .shopping-video__product-video-list-group-track-container--page { padding: 0 12px; overflow: visible; } .shopping-video__product-video-list-group-track-container-wrapper { min-width: 0; padding: 0; justify-content: flex-start; } .shopping-video__product-video-list-group-track-container-wrapper>li { flex-basis: min(42vw, 178px); margin: 0; } .shopping-video__product-video-list-group-track-container-indicator-pager--pages-arrow { display: none; } }