/* ========================================================= WAFRA PERFORMANCE — home-balance.css Static CSS extracted from Blade. ========================================================= */ /* ============================================================ WAFRA — HOMEPAGE BALANCE SYSTEM Desktop content width: 1380px Desktop side gutter: 36px ============================================================ */ :root{ --wf-home-max: 1380px; --wf-home-gap: 36px; --wf-home-section-space: 56px; } /* ============================================================ 1. ONE CONTENT WIDTH ============================================================ */ html body.tpl-zakas .wf-organic-categories__shell, html body.tpl-zakas .wf-home-offers-shell, html body.tpl-zakas .wf-home-product-section .zk-featured__head, html body.tpl-zakas .wf-home-product-section .zk-featured__viewport, html body.tpl-zakas .zk-editorial-band__grid, html body.tpl-zakas .zk-editorial-promos__grid, html body.tpl-zakas .zk-footer__inner{ width: min( var(--wf-home-max), calc(100% - 72px) ) !important; max-width: var(--wf-home-max) !important; margin-inline: auto !important; box-sizing: border-box !important; } /* ============================================================ 2. CATEGORY SECTION ============================================================ */ html body.tpl-zakas .wf-organic-categories{ padding-top: var(--wf-home-section-space) !important; padding-bottom: var(--wf-home-section-space) !important; } /* ============================================================ 3. OFFERS SECTION ============================================================ */ html body.tpl-zakas .wf-home-offers-section{ padding-top: var(--wf-home-section-space) !important; padding-bottom: var(--wf-home-section-space) !important; } /* ============================================================ 4. THREE PROMO BANNERS Equal width — same page edges ============================================================ */ html body.tpl-zakas .zk-editorial-band{ padding-top: var(--wf-home-section-space) !important; padding-bottom: var(--wf-home-section-space) !important; padding-inline: 0 !important; } html body.tpl-zakas .zk-editorial-band__grid{ display: grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap: 18px !important; align-items: stretch !important; } /* every one gets exactly same width */ html body.tpl-zakas .zk-editorial-band__grid > *{ width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } /* same image/card dimensions */ html body.tpl-zakas .zk-editorial-band__media{ width: 100% !important; max-width: none !important; margin: 0 !important; } /* ============================================================ 5. LATEST / POPULAR PRODUCTS ============================================================ */ html body.tpl-zakas .wf-home-product-section{ padding-top: var(--wf-home-section-space) !important; padding-bottom: var(--wf-home-section-space) !important; padding-inline: 0 !important; } html body.tpl-zakas .wf-home-product-section .zk-featured__head, html body.tpl-zakas .wf-home-product-section .zk-featured__viewport{ padding-inline: 0 !important; } /* Five equal cards */ @media(min-width:1101px){ html body.tpl-zakas .wf-home-product-section .zk-featured__track{ display: grid !important; grid-template-columns: repeat( 5, minmax(0,1fr) ) !important; gap: 18px !important; width: 100% !important; } } /* ============================================================ 6. TWO LARGE PROMO BANNERS ============================================================ */ html body.tpl-zakas .zk-editorial-promos{ padding-top: var(--wf-home-section-space) !important; padding-bottom: var(--wf-home-section-space) !important; padding-inline: 0 !important; } html body.tpl-zakas .zk-editorial-promos__grid{ display: grid !important; grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; gap: 18px !important; } html body.tpl-zakas .zk-editorial-promos__grid > *, html body.tpl-zakas .zk-editorial-promo{ width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } /* ============================================================ 7. OTHER HOME PLACEMENT BANNERS Keep banner logic untouched, constrain only presentation. ============================================================ */ html body.tpl-zakas .zk-final-banner, html body.tpl-zakas .zk-placement-banner, html body.tpl-zakas .home-placement-banner, html body.tpl-zakas .placement-banner{ width: min( var(--wf-home-max), calc(100% - 72px) ) !important; max-width: var(--wf-home-max) !important; margin-inline: auto !important; } html body.tpl-zakas .zk-final-banner img, html body.tpl-zakas .zk-final-banner video, html body.tpl-zakas .zk-placement-banner img, html body.tpl-zakas .zk-placement-banner video, html body.tpl-zakas .home-placement-banner img, html body.tpl-zakas .home-placement-banner video, html body.tpl-zakas .placement-banner img, html body.tpl-zakas .placement-banner video{ display: block; width: 100% !important; max-width: 100% !important; } /* ============================================================ 8. FOOTER Background remains full screen. Content aligns with homepage. ============================================================ */ html body.tpl-zakas #zkFooter{ width: 100% !important; } html body.tpl-zakas #zkFooter .zk-footer__inner{ padding-inline: 0 !important; } /* ============================================================ 9. CONSISTENT VERTICAL TRANSITIONS ============================================================ */ html body.tpl-zakas .wf-organic-categories + .wf-home-offers-section{ margin-top: 0 !important; } html body.tpl-zakas .wf-home-offers-section + *{ margin-top: 0 !important; } /* ============================================================ TABLET ============================================================ */ @media( min-width:768px ) and ( max-width:1100px ){ :root{ --wf-home-gap: 24px; --wf-home-section-space: 48px; } html body.tpl-zakas .wf-organic-categories__shell, html body.tpl-zakas .wf-home-offers-shell, html body.tpl-zakas .wf-home-product-section .zk-featured__head, html body.tpl-zakas .wf-home-product-section .zk-featured__viewport, html body.tpl-zakas .zk-editorial-band__grid, html body.tpl-zakas .zk-editorial-promos__grid, html body.tpl-zakas .zk-footer__inner, html body.tpl-zakas .zk-final-banner, html body.tpl-zakas .zk-placement-banner, html body.tpl-zakas .home-placement-banner, html body.tpl-zakas .placement-banner{ width: calc(100% - 48px) !important; } html body.tpl-zakas .zk-editorial-band__grid{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } html body.tpl-zakas .wf-home-product-section .zk-featured__track{ grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:767px){ :root{ --wf-home-gap: 15px; --wf-home-section-space: 40px; } html body.tpl-zakas .wf-organic-categories__shell, html body.tpl-zakas .wf-home-offers-shell, html body.tpl-zakas .wf-home-product-section .zk-featured__head, html body.tpl-zakas .wf-home-product-section .zk-featured__viewport, html body.tpl-zakas .zk-editorial-band__grid, html body.tpl-zakas .zk-editorial-promos__grid, html body.tpl-zakas .zk-footer__inner, html body.tpl-zakas .zk-final-banner, html body.tpl-zakas .zk-placement-banner, html body.tpl-zakas .home-placement-banner, html body.tpl-zakas .placement-banner{ width: calc(100% - 30px) !important; max-width: none !important; } html body.tpl-zakas .zk-editorial-band__grid, html body.tpl-zakas .zk-editorial-promos__grid{ grid-template-columns: 1fr !important; gap: 12px !important; } html body.tpl-zakas .wf-home-product-section .zk-featured__track{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; gap: 10px !important; } html body.tpl-zakas #zkFooter .zk-footer__inner{ padding-inline: 0 !important; } } /* ============================================================ WAFRA_PLACEMENT_FINAL_FIX_V2 Final placement/video alignment ============================================================ */ /* ------------------------------------------------------------ OLD CINEMATIC WRAPPER Remove remaining black canvas under homepage sections. Hero itself keeps its own media/background. ------------------------------------------------------------ */ html body.tpl-zakas .zk-cinema{ background: #ffffff !important; } /* ------------------------------------------------------------ ALL DASHBOARD PLACEMENT BANNERS Same ruler as categories/products/promos. ------------------------------------------------------------ */ html body.tpl-zakas .zk-placement-banner{ width: min( 1380px, calc(100% - 72px) ) !important; max-width: 1380px !important; margin: 56px auto !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* media container */ html body.tpl-zakas .zk-placement-banner .zk-placement-banner__media{ position: relative !important; width: 100% !important; max-width: none !important; aspect-ratio: 16 / 9 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; } /* ------------------------------------------------------------ IMAGE / DIRECT VIDEO Fill the exact same box. ------------------------------------------------------------ */ html body.tpl-zakas .zk-placement-banner .zk-placement-banner__media img, html body.tpl-zakas .zk-placement-banner .zk-placement-banner__media video{ display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; max-width: none !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; background: #ffffff !important; } /* embedded video */ html body.tpl-zakas .zk-placement-banner .zk-placement-banner__media iframe{ display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; max-width: none !important; border: 0 !important; margin: 0 !important; background: #ffffff !important; } /* ------------------------------------------------------------ FINAL BANNER LEGACY CLASS Same width if an older banner still uses this selector. ------------------------------------------------------------ */ html body.tpl-zakas .zk-final-banner{ width: min( 1380px, calc(100% - 72px) ) !important; max-width: 1380px !important; margin: 56px auto !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; box-shadow: none !important; } html body.tpl-zakas .zk-final-banner img, html body.tpl-zakas .zk-final-banner video{ display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; background: #ffffff !important; object-fit: cover !important; } /* ------------------------------------------------------------ TABLET ------------------------------------------------------------ */ @media( min-width:768px ) and ( max-width:1100px ){ html body.tpl-zakas .zk-placement-banner, html body.tpl-zakas .zk-final-banner{ width: calc(100% - 48px) !important; margin: 48px auto !important; } } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media(max-width:767px){ html body.tpl-zakas .zk-placement-banner, html body.tpl-zakas .zk-final-banner{ width: calc(100% - 30px) !important; max-width: none !important; margin: 40px auto !important; } html body.tpl-zakas .zk-placement-banner .zk-placement-banner__media{ aspect-ratio: 16 / 9 !important; } }