/* * DICHANA 2.2.84 — Curated product visual system * Uses the approved five-category studio still lifes as one coherent, * responsive art direction across every screenshot-selected placement. */ .curated-product-art-v2284 { position: relative !important; inset: auto !important; isolation: isolate; display: grid !important; place-items: center; overflow: visible !important; min-width: 0; padding: clamp(7px, .8vw, 12px) !important; background: radial-gradient(circle at 12% 16%, rgba(255, 255, 255, .98) 0 9%, transparent 32%), radial-gradient(circle at 88% 18%, rgba(255, 174, 220, .24), transparent 40%), radial-gradient(circle at 78% 88%, rgba(90, 220, 246, .2), transparent 42%), linear-gradient(145deg, #fff5fa 0%, #f8f3ff 48%, #ebfaff 100%) !important; border: 1px solid rgba(255, 255, 255, .88) !important; border-radius: clamp(22px, 2.2vw, 34px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 24px 64px rgba(16, 33, 58, .16), 0 8px 20px rgba(209, 0, 130, .08) !important; } .curated-product-art-v2284::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); } .curated-product-art-v2284 > img { position: relative !important; z-index: 1; inset: auto !important; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; /* Retained homepage CSS caps this image at 210px on phones. */ max-height: none !important; margin: 0 !important; opacity: 1 !important; object-fit: cover !important; object-position: center !important; transform: none !important; border: 0 !important; border-radius: clamp(16px, 1.65vw, 26px) !important; filter: saturate(.98) contrast(1.015); box-shadow: 0 10px 30px rgba(16, 33, 58, .1); } .cta-band .curated-product-art-v2284--cta { width: clamp(280px, 26vw, 420px) !important; aspect-ratio: 1 / 1; justify-self: end; align-self: center; } .category-hero-visual-v8577.curated-product-art-v2284--hero { width: min(100%, 560px) !important; aspect-ratio: 1 / 1; justify-self: end; align-self: center; } .category-cta-band-v8577 .curated-product-art-v2284--category-cta { width: min(100%, 420px) !important; aspect-ratio: 1 / 1; justify-self: end; align-self: center; } /* * Retained generic fallback pages include earlier high-specificity CTA rules. * Bind the shared frame directly to their CTA context so the curated system * wins without changing unrelated page artwork. */ html body.cta-balance-v8585 .cta-band .curated-product-art-v2284, html body .cta-band.batch2-cta .batch2-cta-orbit.curated-product-art-v2284, html body .cta-band.batch3-cta .batch3-cta-orbit.curated-product-art-v2284, html body .cta-band.cta-band-video .cta-product-stack.curated-product-art-v2284 { position: relative !important; inset: auto !important; overflow: visible !important; width: clamp(280px, 26vw, 420px) !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; padding: clamp(7px, .8vw, 12px) !important; background: radial-gradient(circle at 12% 16%, rgba(255, 255, 255, .98) 0 9%, transparent 32%), radial-gradient(circle at 88% 18%, rgba(255, 174, 220, .24), transparent 40%), radial-gradient(circle at 78% 88%, rgba(90, 220, 246, .2), transparent 42%), linear-gradient(145deg, #fff5fa 0%, #f8f3ff 48%, #ebfaff 100%) !important; border: 1px solid rgba(255, 255, 255, .88) !important; border-radius: clamp(22px, 2.2vw, 34px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 24px 64px rgba(16, 33, 58, .16), 0 8px 20px rgba(209, 0, 130, .08) !important; } html body.cta-balance-v8585 .cta-band .curated-product-art-v2284 > img, html body .cta-band.batch2-cta .batch2-cta-orbit.curated-product-art-v2284 > img, html body .cta-band.batch3-cta .batch3-cta-orbit.curated-product-art-v2284 > img, html body .cta-band.cta-band-video .cta-product-stack.curated-product-art-v2284 > img { position: relative !important; inset: auto !important; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transform: none !important; border-radius: clamp(16px, 1.65vw, 26px) !important; } html body .category-hero-visual-v8577.curated-product-art-v2284--hero { height: auto !important; min-height: 0 !important; /* Legacy category breakpoints also cap the frame at 252–360px. */ max-height: none !important; aspect-ratio: 1 / 1 !important; } html body .category-hero-visual-v8577.curated-product-art-v2284--hero > img { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; } @media (max-width: 900px) { body .cta-band .batch2-cta-orbit.curated-product-art-v2284, body .cta-band .batch3-cta-orbit.curated-product-art-v2284, body .cta-band .cta-product-stack.curated-product-art-v2284, body .category-hero-visual-v8577.curated-product-art-v2284, body .category-cta-band-v8577 .curated-product-art-v2284 { position: relative !important; inset: auto !important; display: grid !important; width: min(78vw, 360px) !important; max-width: 100% !important; aspect-ratio: 1 / 1; margin: clamp(22px, 6vw, 34px) auto 0 !important; justify-self: center; } } @media (max-width: 480px) { .curated-product-art-v2284 { padding: 6px !important; border-radius: 22px !important; box-shadow: 0 18px 44px rgba(16, 33, 58, .15) !important; } .curated-product-art-v2284 > img { border-radius: 17px !important; } } @media (prefers-reduced-motion: reduce) { .curated-product-art-v2284, .curated-product-art-v2284 > img { animation: none !important; transition: none !important; } } /* v2.2.89: outrank retained category breakpoint caps while keeping the scoped frame square. */ html body.category-fix-v8579 .category-hero-visual-v8577.curated-product-art-v2284--hero, html body.category-fix-v8580 .category-hero-visual-v8577.curated-product-art-v2284--hero, html body.product-category-v8577 .category-hero-visual-v8577.curated-product-art-v2284--hero { height: auto !important; max-height: none !important; aspect-ratio: 1 / 1 !important; }