@font-face {
    font-family: "DIN Next Slab Pro";
    src: url("../fonts/din-next-slab/DINNextSlabPro-Light.woff") format("woff"),
         url("../fonts/din-next-slab/DINNextSlabPro-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Almarai Local";
    src: url("../fonts/Almarai/Almarai-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Almarai Local";
    src: url("../fonts/Almarai/Almarai-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/*
 * FINAL TYPOGRAPHY OVERRIDE
 * Keep this stylesheet LAST in the public layout. This intentionally wins over
 * legacy page CSS (Montserrat / Aptos / Oswald / Inter) so the font changes on
 * the header, mega menu, buttons, forms, cards, internal pages and checkout.
 * Icon elements are excluded so Bootstrap Icons / Font Awesome are unaffected.
 */
html:not([dir="rtl"]) body,
html:not([dir="rtl"]) :is(
    h1,h2,h3,h4,h5,h6,p,a,span,strong,b,small,label,li,dt,dd,th,td,
    button,input,select,textarea,option,legend,blockquote,time,address
):not(i):not([class^="bi-"]):not([class*=" bi-"]):not([class^="fa-"]):not([class*=" fa-"]) {
    font-family: "DIN Next Slab Pro", Georgia, serif !important;
}

html[dir="rtl"] body,
html[dir="rtl"] :is(
    h1,h2,h3,h4,h5,h6,p,a,span,strong,b,small,label,li,dt,dd,th,td,
    button,input,select,textarea,option,legend,blockquote,time,address
):not(i):not([class^="bi-"]):not([class*=" bi-"]):not([class^="fa-"]):not([class*=" fa-"]) {
    font-family: "Almarai Local", Arial, sans-serif !important;
}

/* The supplied DIN file is a Light cut, so body copy stays light/clean while
   existing semantic font weights can still be synthetically emphasized. */
html:not([dir="rtl"]) body { font-weight: 300; }