body { background-image: url("../images/bg-image.6106d79d417d.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover; height: 100%; } .dropdown-toggle::after { content: none; } .custom-shadow { box-shadow: 5px 5px 25px 19px #000000; } .product_id { color: gray; font-size: 15px; } .badge.bg-warning.text-dark { position: absolute; top: 10px; right: 5px; z-index: 1; padding: 5px 10px; border-radius: 3px; font-size: 1rem; box-shadow: 2px 2px 15px 9px #000000; } .badge-banner { top: 80%; border-radius: 15px; font-size: 0.7rem; } /* Sticky footer, selectively by construction: margin-top:auto only absorbs free space, so on short pages (404, empty search results) the footer sits at the viewport bottom, while on pages with tall content it stays exactly where normal flow puts it. Everything JS appends to is position:fixed (#corner-stack and the support modal), unaffected by flex. */ body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; }