/* ============================================================ ANS DHIVYAM RELATED PRODUCTS — FINAL RESPONSIVE GRID ============================================================ DESKTOP : 5 PRODUCTS TABLET : 3 PRODUCTS MOBILE : 2 PRODUCTS SECTION : CENTERED IMAGE : EQUAL SQUARE CARD : FULLY VISIBLE BACKGROUND: ORIGINAL WEBSITE BACKGROUND CONTENT : SUBTLE LUXURY SHADE HOVER : KEEP EXISTING THEME HOVER ALIGNMENT: KEEP EXISTING THEME ALIGNMENT HTML / BLADE / PHP / JS : NO CHANGES ============================================================ */ /* ============================================================ 1. RELATED SECTION ============================================================ */ .related { position: relative !important; width: 85% !important; max-width: 85% !important; margin: 40px auto 0 !important; padding: 0 0 25px !important; box-sizing: border-box !important; background: transparent !important; } /* ============================================================ 2. RELATED TITLE ============================================================ */ .related .title-block { width: 100% !important; margin: 0 0 25px !important; padding: 0 !important; text-align: center !important; background: transparent !important; } .related .title-block h2 { margin: 0 !important; } /* ============================================================ 3. RELATED CONTENT ============================================================ */ .related .content-product-list { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; background: transparent !important; } /* ============================================================ 4. PRODUCT LIST ============================================================ */ .related .products-list.slick-carousel { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 12px 0 18px !important; box-sizing: border-box !important; background: transparent !important; } /* ============================================================ 5. SLICK LIST IMPORTANT: DO NOT CUT TOP/BOTTOM OF PRODUCT CARD ============================================================ */ .related .products-list.slick-carousel .slick-list { width: 100% !important; margin: 0 !important; padding: 8px 0 18px !important; overflow: visible !important; box-sizing: border-box !important; background: transparent !important; } /* ============================================================ 6. SLICK TRACK ============================================================ */ .related .products-list.slick-carousel .slick-track { display: flex !important; align-items: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ============================================================ 7. SLICK SLIDE ============================================================ */ .related .products-list.slick-carousel .slick-slide { position: relative !important; height: auto !important; align-self: flex-start !important; box-sizing: border-box !important; background: transparent !important; } /* ============================================================ 8. DESKTOP 1200px+ 5 PRODUCTS ============================================================ */ @media (min-width: 1200px) { .related { width: 85% !important; max-width: 85% !important; margin-left: auto !important; margin-right: auto !important; } .related .products-list.slick-carousel .slick-slide { width: 20% !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; } .related .products-list.slick-carousel > li { width: 20% !important; max-width: 20% !important; flex: 0 0 20% !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; } } /* ============================================================ 9. TABLET 768px - 1199px 3 PRODUCTS ============================================================ */ @media (min-width: 768px) and (max-width: 1199px) { .related { width: 90% !important; max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; } .related .products-list.slick-carousel .slick-slide { width: 33.333333% !important; padding-left: 7px !important; padding-right: 7px !important; box-sizing: border-box !important; } .related .products-list.slick-carousel > li { width: 33.333333% !important; max-width: 33.333333% !important; flex: 0 0 33.333333% !important; padding-left: 7px !important; padding-right: 7px !important; box-sizing: border-box !important; } } /* ============================================================ 10. MOBILE BELOW 768px 2 PRODUCTS ============================================================ */ @media (max-width: 767px) { .related { width: 96% !important; max-width: 96% !important; margin: 30px auto 0 !important; padding-bottom: 20px !important; } .related .title-block { margin-bottom: 18px !important; } .related .products-list.slick-carousel { padding-top: 8px !important; padding-bottom: 15px !important; } .related .products-list.slick-carousel .slick-list { padding-top: 6px !important; padding-bottom: 14px !important; } .related .products-list.slick-carousel .slick-slide { width: 50% !important; padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; } .related .products-list.slick-carousel > li { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; } } /* ============================================================ 11. SMALL MOBILE BELOW 480px ============================================================ */ @media (max-width: 480px) { .related { width: 98% !important; max-width: 98% !important; margin-top: 25px !important; } .related .products-list.slick-carousel .slick-slide { width: 50% !important; padding-left: 4px !important; padding-right: 4px !important; } .related .products-list.slick-carousel > li { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; padding-left: 4px !important; padding-right: 4px !important; } } /* ============================================================ 12. PRODUCT CARD ============================================================ */ .related .products-entry.product-wapper { position: relative !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; /* IMPORTANT: Do not force background on entire card. Website background remains visible. */ background: transparent !important; } /* ============================================================ 13. PRODUCT IMAGE ============================================================ */ .related .products-entry .products-thumb { position: relative !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; box-sizing: border-box !important; /* Use existing website background. */ background: transparent !important; } /* ============================================================ 14. PRODUCT IMAGE ============================================================ */ .related .products-entry .products-thumb img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ============================================================ 15. PRODUCT CONTENT ============================================================ */ .related .products-entry .product-content { width: 100% !important; min-height: 72px !important; padding: 12px 10px !important; box-sizing: border-box !important; /* Subtle luxury shade only behind text/content. */ background: rgba(248, 245, 239, 0.78) !important; } /* ============================================================ 16. PRODUCT TITLE ============================================================ */ .related .products-entry .product-title { min-height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background: transparent !important; } /* ============================================================ 17. PRODUCT PRICE ============================================================ */ .related .products-entry .price { margin-top: 4px !important; background: transparent !important; } /* ============================================================ 18. MOBILE CONTENT ============================================================ */ @media (max-width: 767px) { .related .products-entry .product-content { min-height: 62px !important; padding: 10px 7px !important; background: rgba(248, 245, 239, 0.78) !important; } .related .products-entry .product-title { min-height: 34px !important; max-height: 34px !important; } } /* ============================================================ 19. SMALL MOBILE CONTENT ============================================================ */ @media (max-width: 480px) { .related .products-entry .product-content { min-height: 58px !important; padding: 8px 6px !important; } .related .products-entry .product-title { min-height: 32px !important; max-height: 32px !important; } } /* ============================================================ 20. CARD HEIGHT ============================================================ */ .related .products-list.slick-carousel .slick-slide .products-entry { height: auto !important; min-height: 0 !important; box-sizing: border-box !important; } /* ============================================================ 21. LIST ITEM SPACING ============================================================ */ .related .products-list.slick-carousel li { margin-top: 0 !important; margin-bottom: 0 !important; } /* ============================================================ 22. REMOVE GRID CLEAR ============================================================ */ .related .products-list.slick-carousel::before, .related .products-list.slick-carousel::after { display: none !important; content: none !important; } /* ============================================================ 23. IMPORTANT — DO NOT CLIP CARD ============================================================ */ .related, .related .content-product-list, .related .products-list.slick-carousel, .related .products-list.slick-carousel .slick-list, .related .products-list.slick-carousel .slick-track { box-sizing: border-box !important; } /* ============================================================ 24. KEEP EXISTING THEME HOVER ============================================================ */ /* NO custom transform NO custom opacity NO custom transition NO custom hover Existing Mojuri hover remains unchanged. */ /* ============================================================ 25. KEEP EXISTING TEXT ALIGNMENT ============================================================ */ /* NO text-align on product content. Existing Mojuri alignment remains unchanged. */ /* ============================================================ 26. IMPORTANT RESTORE ORIGINAL WEBSITE BACKGROUND ============================================================ */ .related, .related .content-product-list, .related .products-list.slick-carousel, .related .products-list.slick-carousel .slick-list, .related .products-list.slick-carousel .slick-track, .related .products-list.slick-carousel .slick-slide, .related .products-entry.product-wapper, .related .products-entry, .related .products-entry .products-thumb { background-color: transparent !important; } /* ============================================================ END ============================================================ */