/* ========================================================= SHOPSTYLE HOMEPAGE PRODUCT CARDS V3 Single source of truth for ALL homepage product shelves ========================================================= */ /* --------------------------------------------------------- DESKTOP / BASE --------------------------------------------------------- */ body.common-home .ssv3-page .products { box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px !important; width: 100% !important; margin-top: 24px !important; } /* Every homepage product card is identical */ body.common-home .ssv3-page .products > .product { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; border-radius: 16px !important; background: #fff !important; scroll-snap-align: start; } /* --------------------------------------------------------- IMAGE --------------------------------------------------------- */ body.common-home .ssv3-page .products > .product .product-img { position: relative !important; box-sizing: border-box !important; width: 100% !important; height: 320px !important; min-height: 320px !important; max-height: 320px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: #f7f7f7 !important; } body.common-home .ssv3-page .products > .product .product-img > a { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.common-home .ssv3-page .products > .product .product-img img { width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important; object-position: center !important; padding: 8px !important; box-sizing: border-box !important; } /* --------------------------------------------------------- DISCOUNT + FAVORITE --------------------------------------------------------- */ body.common-home .ssv3-page .products > .product .deal-tag { position: absolute !important; top: 10px !important; left: 10px !important; z-index: 4 !important; } body.common-home .ssv3-page .products > .product .fav { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 5 !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; display: grid !important; place-items: center !important; border-radius: 50% !important; } /* --------------------------------------------------------- PRODUCT INFORMATION --------------------------------------------------------- */ body.common-home .ssv3-page .products > .product .product-info-link { display: block !important; flex: 1 1 auto !important; color: inherit !important; text-decoration: none !important; } body.common-home .ssv3-page .products > .product .product-info { box-sizing: border-box !important; height: 100% !important; min-height: 132px !important; padding: 12px 13px 14px !important; display: flex !important; flex-direction: column !important; } /* Brand */ body.common-home .ssv3-page .products > .product .brand { min-height: 18px !important; max-height: 18px !important; margin: 0 0 4px !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 11px !important; line-height: 18px !important; font-weight: 800 !important; } /* Product title — ALWAYS exactly max 2 lines */ body.common-home .ssv3-page .products > .product .product-name { min-height: 40px !important; max-height: 40px !important; margin: 0 0 8px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; font-size: 13px !important; line-height: 20px !important; } /* Price always starts at same vertical position */ body.common-home .ssv3-page .products > .product .price { min-height: 24px !important; margin-top: auto !important; display: flex !important; align-items: center !important; gap: 7px !important; white-space: nowrap !important; font-weight: 850 !important; } /* Old price */ body.common-home .ssv3-page .products > .product .price .old { overflow: hidden !important; max-width: 50% !important; text-overflow: ellipsis !important; } /* Retailer always one line */ body.common-home .ssv3-page .products > .product .retailer { min-height: 18px !important; max-height: 18px !important; margin-top: 4px !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; line-height: 18px !important; } /* ========================================================= MEDIUM DESKTOP ========================================================= */ @media (max-width: 1180px) and (min-width: 901px) { body.common-home .ssv3-page .products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.common-home .ssv3-page .products > .product .product-img { height: 310px !important; min-height: 310px !important; max-height: 310px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) and (min-width: 701px) { body.common-home .ssv3-page .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } body.common-home .ssv3-page .products > .product .product-img { height: 290px !important; min-height: 290px !important; max-height: 290px !important; } } /* ========================================================= MOBILE — ALL PRODUCT SECTIONS BECOME IDENTICAL CAROUSELS ========================================================= */ @media (max-width: 700px) { body.common-home .ssv3-page .products { display: flex !important; grid-template-columns: none !important; gap: 12px !important; width: 100% !important; margin-top: 18px !important; padding: 0 18px 8px 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-left: 0 !important; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.common-home .ssv3-page .products::-webkit-scrollbar { display: none; } /* * One complete card is visible, * with a small part of the next card as visual cue. */ body.common-home .ssv3-page .products > .product { flex: 0 0 clamp( 260px, calc(100vw - 56px), 330px ) !important; width: clamp( 260px, calc(100vw - 56px), 330px ) !important; min-width: clamp( 260px, calc(100vw - 56px), 330px ) !important; max-width: clamp( 260px, calc(100vw - 56px), 330px ) !important; scroll-snap-align: start !important; scroll-snap-stop: normal; } body.common-home .ssv3-page .products > .product .product-img { height: clamp( 235px, 67vw, 275px ) !important; min-height: clamp( 235px, 67vw, 275px ) !important; max-height: clamp( 235px, 67vw, 275px ) !important; } body.common-home .ssv3-page .products > .product .product-info { min-height: 132px !important; padding: 11px 12px 13px !important; } body.common-home .ssv3-page .products > .product .product-name { min-height: 40px !important; max-height: 40px !important; font-size: 13px !important; line-height: 20px !important; } body.common-home .ssv3-page .products > .product .fav { width: 38px !important; height: 38px !important; } } /* ========================================================= SMALL PHONE ========================================================= */ @media (max-width: 360px) { body.common-home .ssv3-page .products { gap: 10px !important; } body.common-home .ssv3-page .products > .product { flex-basis: calc(100vw - 50px) !important; width: calc(100vw - 50px) !important; min-width: calc(100vw - 50px) !important; max-width: calc(100vw - 50px) !important; } body.common-home .ssv3-page .products > .product .product-img { height: 230px !important; min-height: 230px !important; max-height: 230px !important; } } /* ========================================================= SHOPSTYLE HOMEPAGE PRODUCT IMAGE STANDARD V2 ONE visual rule for every homepage product carousel ========================================================= */ body.common-home .ssv3-page .products > .product .product-img { position: relative !important; box-sizing: border-box !important; width: 100% !important; /* * Same image proportion everywhere. * Fashion-friendly vertical frame. */ aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: #ffffff !important; } body.common-home .ssv3-page .products > .product .product-img > a { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } /* * Full reset against old ShopStyle product-image rules. */ body.common-home .ssv3-page .products > .product .product-img img { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; object-position: 50% 50% !important; transform: none !important; background: #fff !important; transition: transform .25s ease !important; } /* ========================================================= JS CLASS: Image proportions are suitable for filling the entire area ========================================================= */ body.common-home .ssv3-page .products > .product .product-img img.ss-product-img--cover { object-fit: cover !important; object-position: center center !important; } /* ========================================================= JS CLASS: Image would be cropped too aggressively -> keep full product ========================================================= */ body.common-home .ssv3-page .products > .product .product-img img.ss-product-img--contain { object-fit: contain !important; object-position: center center !important; } /* * A contained product may use almost the entire available box. * No artificial padding. */ body.common-home .ssv3-page .products > .product .product-img img.ss-product-img--contain { width: 100% !important; height: 100% !important; } /* Very subtle desktop hover, same for every shelf */ @media (hover:hover) and (pointer:fine) { body.common-home .ssv3-page .products > .product:hover .product-img img.ss-product-img--cover { transform: scale(1.018) !important; } } /* ========================================================= TABLET / MOBILE Same rule — do NOT change object sizing between shelves ========================================================= */ @media (max-width: 991px) { body.common-home .ssv3-page .products > .product .product-img { aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; max-height: none !important; } } @media (max-width: 700px) { body.common-home .ssv3-page .products > .product .product-img { aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; max-height: none !important; } } @media (max-width: 360px) { body.common-home .ssv3-page .products > .product .product-img { aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; max-height: none !important; } } /* ========================================================= SHOPSTYLE HOMEPAGE — UNIFIED SINGLE ROW CAROUSELS V3 Trending / Women / Men / Lifestyle / Deals ========================================================= */ /* * CRITICAL: * Every homepage product shelf is ONE horizontal row. * Never allow 12 products to wrap into 2 rows. */ body.common-home .ssv3-page .product-section .products { box-sizing: border-box !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; grid-template-columns: none !important; grid-auto-flow: unset !important; gap: 16px !important; width: 100% !important; max-width: 100% !important; margin-top: 24px !important; padding: 0 2px 8px 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important; scroll-behavior: smooth !important; overscroll-behavior-x: contain !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.common-home .ssv3-page .product-section .products::-webkit-scrollbar { display: none !important; } /* ========================================================= DESKTOP Exactly 6 equal cards visible ========================================================= */ @media (min-width: 1181px) { body.common-home .ssv3-page .product-section .products > .product { flex: 0 0 calc( (100% - 80px) / 6 ) !important; width: calc( (100% - 80px) / 6 ) !important; min-width: calc( (100% - 80px) / 6 ) !important; max-width: calc( (100% - 80px) / 6 ) !important; scroll-snap-align: start !important; } } /* ========================================================= SMALL DESKTOP / LARGE TABLET Exactly 4 equal cards visible ========================================================= */ @media (min-width: 901px) and (max-width: 1180px) { body.common-home .ssv3-page .product-section .products { gap: 14px !important; } body.common-home .ssv3-page .product-section .products > .product { flex: 0 0 calc( (100% - 42px) / 4 ) !important; width: calc( (100% - 42px) / 4 ) !important; min-width: calc( (100% - 42px) / 4 ) !important; max-width: calc( (100% - 42px) / 4 ) !important; scroll-snap-align: start !important; } } /* ========================================================= TABLET Exactly 3 equal cards visible ========================================================= */ @media (min-width: 701px) and (max-width: 900px) { body.common-home .ssv3-page .product-section .products { gap: 14px !important; } body.common-home .ssv3-page .product-section .products > .product { flex: 0 0 calc( (100% - 28px) / 3 ) !important; width: calc( (100% - 28px) / 3 ) !important; min-width: calc( (100% - 28px) / 3 ) !important; max-width: calc( (100% - 28px) / 3 ) !important; scroll-snap-align: start !important; } } /* ========================================================= MOBILE One full card + visible piece of next card ========================================================= */ @media (max-width: 700px) { body.common-home .ssv3-page .product-section .products { gap: 12px !important; margin-top: 18px !important; padding: 0 18px 8px 0 !important; scroll-snap-type: x mandatory !important; } body.common-home .ssv3-page .product-section .products > .product { flex: 0 0 clamp( 260px, calc(100vw - 56px), 330px ) !important; width: clamp( 260px, calc(100vw - 56px), 330px ) !important; min-width: clamp( 260px, calc(100vw - 56px), 330px ) !important; max-width: clamp( 260px, calc(100vw - 56px), 330px ) !important; scroll-snap-align: start !important; } } /* ========================================================= VERY SMALL PHONE ========================================================= */ @media (max-width: 360px) { body.common-home .ssv3-page .product-section .products > .product { flex-basis: calc(100vw - 50px) !important; width: calc(100vw - 50px) !important; min-width: calc(100vw - 50px) !important; max-width: calc(100vw - 50px) !important; } } /* ========================================================= ABSOLUTE CARD CONSISTENCY Every shelf uses same vertical product structure ========================================================= */ body.common-home .ssv3-page .product-section .products > .product { align-self: stretch !important; height: auto !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } body.common-home .ssv3-page .product-section .products > .product .product-info-link { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } body.common-home .ssv3-page .product-section .products > .product .product-info { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } /* * Images stay centered in exactly the same 4:5 frame. */ body.common-home .ssv3-page .product-section .products > .product .product-img { width: 100% !important; aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; } body.common-home .ssv3-page .product-section .products > .product .product-img img { object-position: 50% 50% !important; } /* ========================================================= SHOPSTYLE HOMEPAGE PRODUCT IMAGES — GOLDEN MASTER V4 ONE RULE FOR EVERY PRODUCT / EVERY HOMEPAGE CAROUSEL ========================================================= */ /* * Every product receives exactly the same image viewport. */ body.common-home .ssv3-page .product-section .products > .product .product-img { position: relative !important; box-sizing: border-box !important; width: 100% !important; aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: #fff !important; } /* * The link itself is also a centering container. */ body.common-home .ssv3-page .product-section .products > .product .product-img > a { position: absolute !important; inset: 0 !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } /* * CRITICAL RULE: * * Do NOT stretch image to 100% width AND 100% height. * * Use intrinsic aspect ratio and let max-width / max-height * choose the largest possible size without cropping. */ body.common-home .ssv3-page .product-section .products > .product .product-img img, body.common-home .ssv3-page .product-section .products > .product .product-img img.ss-product-img--cover, body.common-home .ssv3-page .product-section .products > .product .product-img img.ss-product-img--contain { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; box-sizing: border-box !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; margin: auto !important; padding: 0 !important; display: block !important; object-fit: contain !important; object-position: center center !important; transform: none !important; transform-origin: center center !important; vertical-align: middle !important; background: transparent !important; } /* * Never let old rules vertically align images to the top. */ body.common-home .ssv3-page .product-section .product-img, body.common-home .ssv3-page .product-section .product-img > a { text-align: center !important; } /* * Keep all shelves identical. */ #ss-home-trending-products .product-img, #ss-home-women-products .product-img, #ss-home-men-products .product-img, #ss-home-lifestyle-products .product-img, #ss-home-deals-products .product-img { aspect-ratio: 4 / 5 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fff !important; } #ss-home-trending-products .product-img > a, #ss-home-women-products .product-img > a, #ss-home-men-products .product-img > a, #ss-home-lifestyle-products .product-img > a, #ss-home-deals-products .product-img > a { display: flex !important; align-items: center !important; justify-content: center !important; } /* * Same image rule on every screen size. */ @media (max-width: 1180px) { body.common-home .ssv3-page .product-section .product-img img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; margin: auto !important; } } @media (max-width: 700px) { body.common-home .ssv3-page .product-section .product-img > a { padding: 8px !important; } }