/* ========================================================= WAFRA PERFORMANCE — home-alignment.css Static CSS extracted from Blade. ========================================================= */ /* ============================================================ WAFRA — FINAL HOMEPAGE RULER Desktop: max content = 1380px side gutter = 36px ============================================================ */ :root{ --wf-final-max:1380px; --wf-final-side:36px; --wf-final-space:54px; } /* ============================================================ WHITE PAGE CANVAS BELOW HERO ============================================================ */ html body.tpl-zakas .zk-cinema{ background:#fff !important; } /* ============================================================ ONE WIDTH FOR ALL MAIN CONTENT ============================================================ */ 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-cinema .zk-editorial-band__grid, html body.tpl-zakas .zk-cinema .zk-editorial-promos__grid, html body.tpl-zakas #zkFooter .zk-footer__inner{ width: min( var(--wf-final-max), calc(100% - 72px) ) !important; max-width: var(--wf-final-max) !important; margin-inline:auto !important; box-sizing:border-box !important; } /* ============================================================ THREE PROMO CARDS ============================================================ */ html body.tpl-zakas .zk-cinema .zk-editorial-band{ width:100% !important; max-width:none !important; padding: var(--wf-final-space) 0 !important; margin:0 !important; background:#fff !important; } html body.tpl-zakas .zk-cinema .zk-editorial-band__grid{ display:grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap:18px !important; align-items:stretch !important; padding:0 !important; } html body.tpl-zakas .zk-cinema .zk-editorial-band__grid > *{ width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; } /* remove the old narrow middle column */ html body.tpl-zakas .zk-cinema .zk-editorial-band__media{ width:100% !important; max-width:none !important; margin:0 !important; box-sizing:border-box !important; } html body.tpl-zakas .zk-cinema .zk-editorial-band__media img{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; } /* ============================================================ LATEST + POPULAR ============================================================ */ html body.tpl-zakas .wf-home-product-section{ width:100% !important; padding: var(--wf-final-space) 0 !important; margin:0 !important; background:#fff !important; } html body.tpl-zakas .wf-home-product-section .zk-featured__track{ width:100% !important; max-width:100% !important; margin:0 !important; } @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; } } /* ============================================================ TWO PROMO BANNERS ============================================================ */ html body.tpl-zakas .zk-cinema .zk-editorial-promos{ width:100% !important; max-width:none !important; padding: var(--wf-final-space) 0 !important; margin:0 !important; background:#fff !important; } html body.tpl-zakas .zk-cinema .zk-editorial-promos__grid{ display:grid !important; grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; gap:18px !important; padding:0 !important; } html body.tpl-zakas .zk-cinema .zk-editorial-promos__grid > *, html body.tpl-zakas .zk-cinema .zk-editorial-promo{ width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; } /* ============================================================ PLACEMENT WRAPPER Remove full-width black outer canvas. ============================================================ */ html body.tpl-zakas .zk-cinema section:has(> .zk-placement-banner){ width:100% !important; max-width:none !important; height:auto !important; min-height:0 !important; padding: var(--wf-final-space) 0 !important; margin:0 !important; background:#fff !important; overflow:visible !important; } /* ============================================================ FINAL / DASHBOARD VIDEO BANNER KILL ORIGINAL: height clamp(480px,42vw,760px) black background ============================================================ */ html body.tpl-zakas .zk-cinema .zk-placement-banner{ position:relative !important; display:block !important; width: min( var(--wf-final-max), calc(100% - 72px) ) !important; max-width: var(--wf-final-max) !important; height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio: 16 / 9 !important; margin: 0 auto !important; padding:0 !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; background: transparent !important; box-shadow: none !important; } /* VIDEO MEDIA */ html body.tpl-zakas .zk-cinema .zk-placement-banner .zk-placement-banner__media{ position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background: transparent !important; } /* DIRECT VIDEO / IMAGE */ html body.tpl-zakas .zk-cinema .zk-placement-banner .zk-placement-banner__media video, html body.tpl-zakas .zk-cinema .zk-placement-banner .zk-placement-banner__media img{ position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit: cover !important; object-position: center center !important; background: transparent !important; } /* EMBED VIDEO */ html body.tpl-zakas .zk-cinema .zk-placement-banner .zk-placement-banner__media iframe{ position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; border:0 !important; transform: none !important; background: transparent !important; } /* ============================================================ FOOTER CONTENT ONLY Footer green background remains full width. ============================================================ */ html body.tpl-zakas #zkFooter{ width:100% !important; } html body.tpl-zakas #zkFooter .zk-footer__inner{ padding-inline:0 !important; } /* ============================================================ TABLET ============================================================ */ @media( min-width:768px ) and ( max-width:1100px ){ 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-cinema .zk-editorial-band__grid, html body.tpl-zakas .zk-cinema .zk-editorial-promos__grid, html body.tpl-zakas #zkFooter .zk-footer__inner{ width: calc(100% - 48px) !important; } html body.tpl-zakas .zk-cinema .zk-placement-banner{ width: calc(100% - 48px) !important; height:auto !important; min-height:0 !important; aspect-ratio: 16 / 9 !important; } html body.tpl-zakas .zk-cinema .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){ 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-cinema .zk-editorial-band__grid, html body.tpl-zakas .zk-cinema .zk-editorial-promos__grid, html body.tpl-zakas #zkFooter .zk-footer__inner{ width: calc(100% - 30px) !important; max-width:none !important; } html body.tpl-zakas .zk-cinema .zk-editorial-band__grid, html body.tpl-zakas .zk-cinema .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 .zk-cinema section:has(> .zk-placement-banner){ padding: 40px 0 !important; } html body.tpl-zakas .zk-cinema .zk-placement-banner{ width: calc(100% - 30px) !important; max-width:none !important; height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio: 16 / 9 !important; } } /* Hide empty placement slots — prevents black strip above footer */ .zk-cinema .zk-placement-banner:not(:has(img,video,iframe)){ display:none !important; } .zk-cinema section:has( > .zk-placement-banner:not(:has(img,video,iframe)) ){ display:none !important; margin:0 !important; padding:0 !important; min-height:0 !important; background:#fff !important; }