/* Reserve space for VirtueMart listing thumbnails (convention: resized to 145px height)
so the layout doesn't collapse and titles jump while images are loading. */
.browseProductImage,
.browseCategoryImage {
min-height: 145px;
background-color: #f5f5f5;
}
/* --- Footer cleanup --- */
#sp-bottom {
padding-top: 25px;
padding-bottom: 10px;
}
/* The footer's flex row defaults to align-items:stretch, forcing all 4
columns to match the tallest one (the "Supports" column, which needs the
most height for its long link list). Columns should only be as tall as
their own content -- this alone removes most of the empty vertical space
in the shorter columns. */
#sp-bottom .row {
align-items: flex-start !important;
}
/* Tighten internal spacing so the "Supports" column (badge + trust-logo
image + long link list) doesn't dominate the footer's overall height. */
#sp-bottom .sppb-section {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#sp-bottom .sppb-addon-wrapper {
margin-bottom: 8px !important;
}
/* Column titles ("Contact", "Navigation", "Supports") are rendered in a dark
navy (#29265B) nearly identical to the footer's own dark navy background
(#29235C) -- essentially invisible. Confirmed on the live site too. */
#sp-bottom .sp-module-title,
#sp-bottom .sppb-addon-title {
color: #ffffff !important;
margin-bottom: 12px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.85;
}
#sp-bottom .sp-module-content .menu li {
margin-bottom: 3px;
font-size: 14px;
}
#sp-bottom .sppb-addon-content {
font-size: 14px !important;
line-height: 1.5 !important;
}
/* Drop the LinkedIn icon row entirely -- it was wrapped in a container with
55px of padding above AND below just for one icon (~150px total), by far
the single biggest remaining chunk of empty footer space. */
#sp-bottom-down {
display: none !important;
}
/* Tighten the copyright bar: 30px padding top/bottom around one line of text. */
#sp-footer .container-inner {
padding: 12px 0 !important;
}
/* Floating GICAT / certification badges: lift them off the very edge of the
viewport, and clear the "scroll to top" button (.sp-scroll-up, bottom:30px
right:30px, 36x36px) which the right-hand certification badge otherwise
sits on top of.
These being position:fixed, they stay glued to the viewport corners
through the ENTIRE page, at any window size -- whatever content the
visitor scrolls to that happens to reach those corners gets covered. The
original site has this same issue (confirmed), uncommented by since the
badges there are the same 250px size. Shrinking them to a small corner
chip (kept at their natural aspect ratio via `transform: scale()`, which
avoids fighting the many inline width/height rules on the inner ![]()
)
keeps the "always-visible trust badge" effect the client asked for while
making any incidental overlap minor instead of covering full lines of
text. */
#section-id-1701962971909,
#section-id-1621938946242 {
bottom: 85px !important;
transform: scale(0.65);
opacity: 0.95;
}
#section-id-1701962971909 {
transform-origin: bottom left;
}
#section-id-1621938946242 {
transform-origin: bottom right;
}
/* Below this, even the shrunk badges are disproportionate to the page --
hide them rather than let them cover text. */
@media (max-width: 767px), (max-height: 500px) {
#section-id-1701962971909,
#section-id-1621938946242 {
display: none !important;
}
}
/* VirtueMart category page title reorder: see main.js (the h1 is nested two
levels deep inside the subcategory grid's container, too deep for a
flexbox `order` fix -- it needs an actual DOM move). */
/* Shared header/footer chrome rules hoisted out of ~403 duplicate
inline