/* VSZ - Site CSS (consolidated 11 Sept 2026).
*
* Merged from four separate CSS snippets in their exact previous render
* order, so the cascade is unchanged: 20527, 20512, 20257, 20282.
* Each block below is byte-identical to the snippet it came from.
*/
/* ==== [20527] Header & footer (modern, sticky, responsive) ==== */
/* =========================================================================
VSZ - Header & footer, modern responsive rebuild. 11 Sept 2026.
Catalog mode: no cart, no account, no WhatsApp button in the header.
Stored layout (astra-settings, rewritten one-shot - the Astra MCP builder
tool only merges and would duplicate components):
desktop primary : logo | search | language-switcher
desktop below : main menu on the blue bar
mobile primary : hamburger | logo
mobile below : full-width search
mobile drawer : menu + language switcher
========================================================================= */
:root {
/* 20px is the site's own content gutter, measured off the H1 at 1440, so
the header and footer edges line up with the page. */
--vsz-gutter: 20px;
--vsz-shell: 1560px;
--vsz-brand: var(--ast-global-color-0, #0c1cab);
--vsz-ink: #16203a;
--vsz-muted: #5b6472;
--vsz-line: #e5e9f1;
--vsz-surface: #f3f5fb;
/* Driven by .vsz-scrolled on ; every header dimension derives from
these so the shrink is one transition, not eight. */
--vsz-logo-h: 64px;
--vsz-row-pad: 13px;
--vsz-nav-pad: 14px;
--vsz-hdr-shadow: 0 1px 0 var(--vsz-line);
}
html.vsz-scrolled {
--vsz-logo-h: 46px;
--vsz-row-pad: 8px;
--vsz-nav-pad: 11px;
--vsz-hdr-shadow: 0 4px 20px rgba(15, 23, 42, .10);
}
/* 921px is Astra's own header breakpoint - below it the mobile header markup
takes over, so the two sets of numbers never overlap. The phone header is
not sticky (see section 7), so the scrolled values match the resting ones:
nothing may resize under a thumb that is only scrolling the page. */
@media (max-width: 921px) {
:root,
html.vsz-scrolled {
--vsz-gutter: 16px;
--vsz-logo-h: 56px;
--vsz-row-pad: 10px;
}
}
/* =========================================================================
1. SHELL - nothing may touch the viewport edge
========================================================================= */
.ast-primary-header-bar .site-primary-header-wrap,
.ast-below-header-bar .site-below-header-wrap,
.ast-mobile-header-wrap .ast-main-header-wrap,
.site-footer .ast-builder-grid-row-container-inner {
width: 100%;
max-width: var(--vsz-shell);
margin-inline: auto;
padding-inline: var(--vsz-gutter);
}
/* The footer rows are grid items, and margin-inline:auto on a grid item makes
it size to its content - which is why the bottom bar was 487px wide inside
a 1425px row. The explicit width above is load-bearing, not defensive. */
.ast-primary-header-bar .ast-builder-grid-row,
.ast-below-header-bar .ast-builder-grid-row,
.site-footer .ast-builder-grid-row {
max-width: 100%;
}
/* Astra prints a min-height on every header row from its height settings,
which would pin the row at 80px and make the shrink do nothing visible. */
.ast-primary-header-bar .site-primary-header-wrap,
.ast-below-header-bar .site-below-header-wrap,
.ast-mobile-header-wrap .ast-main-header-wrap,
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-mobile-header-wrap .ast-below-header-bar {
min-height: 0;
}
/* =========================================================================
2. STICKY HEADER - desktop only
position:sticky works here - body's overflow propagates to the viewport,
so the header's scrollport is the viewport and no ancestor clips it.
========================================================================= */
#masthead {
position: sticky;
top: 0;
z-index: 500;
background: #fff;
box-shadow: var(--vsz-hdr-shadow);
transition: box-shadow .2s ease;
}
/* The admin bar is fixed at 32px on desktop, 46px below 783px. */
body.admin-bar #masthead {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar #masthead {
top: 46px;
}
}
/* =========================================================================
3. DESKTOP PRIMARY ROW - logo | search | language
========================================================================= */
.ast-primary-header-bar {
background: #fff;
border-bottom: 1px solid var(--vsz-line);
}
.ast-primary-header-bar .site-primary-header-wrap {
padding-block: var(--vsz-row-pad);
transition: padding .22s ease;
}
.ast-primary-header-bar .ast-builder-grid-row {
align-items: center;
gap: 24px;
}
/* Astra sizes the centre column to its content (minmax(0,1fr) auto
minmax(0,1fr)), which left the search field 191px wide in the middle of
1385px of row. The search is the point of that column, so the sides
shrink to content instead. */
.ast-primary-header-bar .ast-builder-grid-row-has-sides {
grid-template-columns: auto minmax(0, 1fr) auto !important;
}
/* Logo: sized by height, not width - the mark is near-square, so a width
cap makes it grow taller than the row it sits in. */
.ast-primary-header-bar .site-logo-img img,
.ast-primary-header-bar .site-logo-img .custom-logo-link img {
max-width: none !important;
width: auto !important;
height: var(--vsz-logo-h);
transition: height .22s ease;
}
/* Astra pads the branding block 16px top and bottom, which set the row
height before the logo did. */
.ast-primary-header-bar .site-branding,
.ast-mobile-header-wrap .site-branding {
padding-block: 0;
}
.ast-primary-header-bar .site-logo-img,
.ast-mobile-header-wrap .site-logo-img {
padding: 0;
line-height: 0;
}
.ast-primary-header-bar .site-branding a {
display: inline-flex;
align-items: center;
transition: opacity .15s;
}
.ast-primary-header-bar .site-branding a:hover {
opacity: .85;
}
.ast-primary-header-bar .site-header-primary-section-center {
flex: 1 1 auto;
min-width: 0;
justify-content: center;
}
.ast-primary-header-bar .site-header-primary-section-left,
.ast-primary-header-bar .site-header-primary-section-right {
flex: 0 0 auto;
}
/* =========================================================================
4. SEARCH - a real field, not a bare glyph. Live search is already on for
products, so the field is the most useful thing in the header.
========================================================================= */
.ast-header-search {
width: 100%;
}
.ast-header-search .ast-search-menu-icon.search-box,
.ast-header-search .ast-search-menu-icon.ast-inline-search {
position: relative;
width: 100%;
max-width: 560px;
margin-inline: auto;
}
.ast-header-search .search-form {
position: relative;
display: flex;
align-items: center;
width: 100%;
border: 1px solid transparent;
border-radius: 12px !important;
background: var(--vsz-surface);
transition: background .15s, border-color .15s, box-shadow .15s;
}
.ast-header-search .search-form:focus-within {
background: #fff;
border-color: color-mix(in srgb, var(--vsz-brand) 45%, #fff);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--vsz-brand) 14%, transparent);
}
.ast-header-search .search-form label {
flex: 1 1 auto;
display: block;
min-width: 0;
margin: 0;
}
/* Astra prints a fixed width, height and padding on .search-field from its
dynamic sheet, and that padding was written for a smaller icon; the field
has to follow the flex track instead. */
.ast-header-search .search-field,
.ast-header-search .ast-search-menu-icon .search-field {
width: 100% !important;
height: 44px !important;
padding-inline: 4px 14px !important;
border: 0 !important;
border-radius: 12px;
background: transparent !important;
box-shadow: none !important;
outline: 0;
font-size: 15px;
line-height: 1.4;
color: var(--vsz-ink);
transition: height .22s ease;
}
.ast-header-search .search-field::placeholder {
color: #8b94a6;
opacity: 1;
}
html.vsz-scrolled .ast-header-search .search-field,
html.vsz-scrolled .ast-header-search .ast-search-menu-icon .search-field {
height: 40px !important;
}
/* The submit button doubles as the leading icon. Astra positions it
absolutely over the field, which puts the glyph on top of the placeholder
once the field is this wide - so it goes back into the flex flow. */
.ast-header-search .search-form .search-submit {
position: static !important;
transform: none !important;
order: -1;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-inline-start: 5px;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--vsz-muted);
cursor: pointer;
transition: color .15s;
}
.ast-header-search .search-form .search-submit:hover,
.ast-header-search .search-form .search-submit:focus-visible {
background: transparent;
color: var(--vsz-brand);
}
.ast-header-search .search-submit svg {
width: 17px;
height: 17px;
fill: currentColor;
}
.ast-header-search .search-submit .astra-search-icon {
display: inline-flex;
margin: 0;
}
/* Live-search dropdown: a card, not a bare list. */
.ast-header-search .ast-live-search-results {
inset-inline: 0;
z-index: 600;
width: 100%;
max-height: min(62vh, 460px);
padding: 6px;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--vsz-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}
.ast-header-search .ast-search--posttype-heading {
display: block;
padding: 10px 12px 6px;
font-size: 11.5px;
font-weight: 800;
text-transform: uppercase;
color: #8b94a6;
}
/* Tracking is a Latin-typography device; on Arabic it pulls joined letters
apart, so it is scoped to the English document. */
html[lang^="en"] .ast-header-search .ast-search--posttype-heading {
letter-spacing: .06em;
}
.ast-header-search .ast-search-item {
display: block;
padding: 10px 12px;
border-radius: 10px;
font-size: 14.5px;
line-height: 1.5;
color: var(--vsz-ink);
text-decoration: none;
transition: background .12s, color .12s;
}
.ast-header-search .ast-search-item:hover,
.ast-header-search .ast-search-item:focus-visible,
.ast-header-search .ast-search-item.active {
background: var(--vsz-surface);
color: var(--vsz-brand);
}
.ast-header-search .ast-live-search-results::-webkit-scrollbar {
width: 8px;
}
.ast-header-search .ast-live-search-results::-webkit-scrollbar-thumb {
border: 2px solid #fff;
border-radius: 8px;
background: #d3d9e6;
}
/* =========================================================================
5. LANGUAGE SWITCHER - one segmented control
Astra prints the switcher colour from its dynamic sheet (set to #F0F5FA
for the old blue bar, invisible now it sits on white) and that rule
outranks a plain class selector, hence !important on colour only.
========================================================================= */
.ast-builder-language-switcher-menu {
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 3px;
border: 1px solid var(--vsz-line);
border-radius: 999px;
background: var(--vsz-surface);
list-style: none;
}
.ast-builder-language-switcher-menu li {
margin: 0;
padding: 0;
list-style: none;
}
.ast-builder-language-switcher-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
text-decoration: none !important;
transition: background .15s, color .15s, box-shadow .15s;
}
.ast-builder-language-switcher-item,
.ast-builder-language-switcher-item .ast-lswitcher-item-header,
.ast-builder-language-switcher-item .ast-builder-language-switcher-native-name {
color: var(--vsz-muted) !important;
}
.ast-builder-language-switcher-item:hover,
.ast-builder-language-switcher-item:hover .ast-builder-language-switcher-native-name,
.ast-builder-language-switcher-item:focus-visible,
.ast-builder-language-switcher-item:focus-visible .ast-builder-language-switcher-native-name,
.ast-builder-language-switcher-item__active,
.ast-builder-language-switcher-item__active .ast-lswitcher-item-header,
.ast-builder-language-switcher-item__active .ast-builder-language-switcher-native-name {
color: var(--vsz-brand) !important;
}
.ast-builder-language-switcher-item__active {
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
}
.ast-builder-language-switcher-item img {
display: block;
width: 18px;
height: 12px;
margin: 0;
border-radius: 2px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}
/* =========================================================================
6. BELOW HEADER - the blue navigation bar
========================================================================= */
.ast-below-header-bar {
background: var(--vsz-brand);
}
.ast-below-header-bar .site-header-below-section-center {
flex: 1 1 auto;
min-width: 0;
}
.ast-below-header-bar .main-header-menu {
justify-content: center;
}
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link {
position: relative;
padding: var(--vsz-nav-pad) 16px;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
color: #fff;
white-space: nowrap;
transition: color .15s, padding .22s ease;
}
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link::after {
content: "";
position: absolute;
inset-inline: 16px;
bottom: max(6px, calc(var(--vsz-nav-pad) - 6px));
height: 2px;
border-radius: 2px;
background: #fff;
transform: scaleX(0);
transform-origin: center;
transition: transform .18s ease;
}
.ast-below-header-bar .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-below-header-bar .main-header-menu > .menu-item:focus-within > .menu-link::after,
.ast-below-header-bar .main-header-menu > .current-menu-item > .menu-link::after,
.ast-below-header-bar .main-header-menu > .current-menu-ancestor > .menu-link::after,
.ast-below-header-bar .main-header-menu > .current-menu-parent > .menu-link::after {
transform: scaleX(1);
}
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link:hover {
color: rgba(255, 255, 255, .88);
}
/* The dropdown reads as a card, not a blue slab. */
.ast-below-header-bar .main-header-menu .sub-menu {
padding: 6px;
border: 1px solid var(--vsz-line);
border-radius: 12px;
background: #fff;
box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}
.ast-below-header-bar .main-header-menu .sub-menu .menu-link {
padding: 9px 14px;
border-radius: 8px;
font-size: 14.5px;
font-weight: 500;
color: var(--vsz-ink);
transition: background .15s, color .15s;
}
.ast-below-header-bar .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-below-header-bar .main-header-menu .sub-menu .menu-item:focus-within > .menu-link {
background: var(--vsz-surface);
color: var(--vsz-brand);
}
/* Between 1240px and the mobile breakpoint the items no longer fit. Scroll
the bar rather than letting it wrap into a ragged second line. */
@media (max-width: 1240px) {
.ast-below-header-bar .main-header-menu {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x proximity;
}
.ast-below-header-bar .main-header-menu::-webkit-scrollbar {
display: none;
}
.ast-below-header-bar .main-header-menu > .menu-item {
scroll-snap-align: start;
}
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link {
padding-inline: 11px;
font-size: 14px;
}
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link::after {
inset-inline: 11px;
}
}
/* Tighten the desktop header at the laptop widths where it is busiest. */
@media (max-width: 1100px) {
.ast-primary-header-bar .ast-builder-grid-row {
gap: 14px;
}
.ast-header-search .ast-search-menu-icon.search-box {
max-width: 420px;
}
}
/* =========================================================================
7. MOBILE HEADER - row 1 hamburger | logo, row 2 full-width search.
Not sticky: the owner does not want the header following the page on a
phone, and 112px of chrome on an 844px screen is a lot to give up.
========================================================================= */
.ast-mobile-header-wrap .ast-primary-header-bar {
border-bottom: 0;
}
.ast-mobile-header-wrap .ast-main-header-wrap {
padding-block: var(--vsz-row-pad);
}
.ast-mobile-header-wrap .ast-builder-grid-row {
align-items: center;
}
/* The mobile row has an empty side, so it keeps Astra's symmetric tracks
and the logo stays optically centred. */
.ast-mobile-header-wrap .ast-primary-header-bar .ast-builder-grid-row-has-sides {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
}
.ast-mobile-header-wrap .site-logo-img img,
.ast-mobile-header-wrap .site-logo-img .custom-logo-link img {
max-width: none !important;
width: auto !important;
height: var(--vsz-logo-h);
}
@media (max-width: 921px) {
#masthead {
position: static;
box-shadow: none;
border-bottom: 1px solid var(--vsz-line);
}
/* The mobile below-bar carries .site-below-header-wrap as a class on
itself rather than on a child, so the shell rule in section 1 never
reached it and it kept Astra's 20px while row 1 used 16px. */
.ast-mobile-header-wrap .ast-below-header-bar {
padding-inline: var(--vsz-gutter);
background: #fff;
border-bottom: 0;
}
/* Breathing room under the field. Without it the search box sits flush
against the first section of the page. */
.ast-mobile-header-wrap .ast-below-header-bar .ast-builder-grid-row {
padding-block: 0 14px;
}
/* Astra's trigger is a filled brand-blue square, which read as heavier
than the logo itself. A quiet outline lets the logo lead. */
.ast-mobile-header-wrap .menu-toggle.main-header-menu-toggle {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
border: 1px solid var(--vsz-line) !important;
border-radius: 12px !important;
background: var(--vsz-surface) !important;
color: var(--vsz-ink) !important;
}
.ast-mobile-header-wrap .menu-toggle.main-header-menu-toggle svg {
width: 19px !important;
height: 19px !important;
fill: currentColor !important;
}
.ast-mobile-header-wrap .ast-header-search .ast-search-menu-icon.search-box {
max-width: none;
}
.ast-mobile-header-wrap .ast-header-search .search-form {
border-color: var(--vsz-line);
}
/* 16px is the smallest size iOS Safari will not zoom the page for. */
.ast-mobile-header-wrap .ast-header-search .search-field,
.ast-mobile-header-wrap .ast-header-search .ast-search-menu-icon .search-field {
height: 42px !important;
font-size: 16px;
}
.ast-mobile-header-wrap .ast-live-search-results {
max-height: 58vh;
}
}
.ast-mobile-header-wrap .menu-toggle,
.ast-mobile-header-wrap .main-header-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Drawer */
.ast-mobile-header-wrap .ast-mobile-header-content {
padding: 8px 4px 18px;
}
.ast-mobile-header-wrap .main-header-menu .menu-link {
padding: 13px 16px;
border-bottom: 1px solid var(--vsz-line);
font-size: 15.5px;
font-weight: 600;
}
.ast-mobile-header-wrap .main-header-menu .sub-menu .menu-link {
padding-inline-start: 30px;
font-size: 14.5px;
font-weight: 500;
opacity: .85;
}
.ast-mobile-header-wrap .ast-builder-language-switcher-wrapper {
margin-top: 16px;
padding: 14px 16px 0;
border-top: 1px solid var(--vsz-line);
}
.ast-mobile-header-wrap .ast-builder-language-switcher-menu {
gap: 6px;
padding: 4px;
}
.ast-mobile-header-wrap .ast-builder-language-switcher-item {
padding: 9px 16px;
font-size: 14px;
}
/* =========================================================================
8. FOOTER - branch cards, link columns, bottom bar
========================================================================= */
.site-footer {
background: var(--ast-global-color-4, #F0F5FA);
}
.site-primary-footer-wrap {
padding-block: 44px 36px;
}
.site-primary-footer-wrap .ast-builder-footer-grid-columns {
gap: 28px 40px;
align-items: stretch;
}
.site-footer .footer-widget-area .widget:last-child {
margin-bottom: 0;
}
/* Astra gives every footer widget area a 20px top margin, which pushed the
branch cards down inside their stretched grid rows and left the two boxes
short of the column they are supposed to fill. */
.site-footer .site-primary-footer-wrap .footer-widget-area {
margin-top: 0;
}
/* Left-aligned reads better than Astra's centred tablet and phone footer,
and the accent rule under each title only works against a text edge. */
.site-footer .footer-widget-area,
.site-footer .footer-widget-area .widget {
text-align: start;
}
.site-footer .widget-title {
position: relative;
margin: 0 0 14px;
font-size: 15px;
font-weight: 800;
line-height: 1.5;
color: var(--vsz-ink);
}
.site-footer .widget_nav_menu ul.menu,
.site-footer .widget_nav_menu ul.menu li {
margin: 0;
padding: 0;
list-style: none;
}
.site-footer .widget_nav_menu .menu-link {
display: inline-block;
padding-block: 5px;
font-size: 14px;
line-height: 1.7;
color: var(--vsz-muted);
text-decoration: none;
transition: color .15s;
}
.site-footer .widget_nav_menu .menu-link:hover,
.site-footer .widget_nav_menu .menu-link:focus-visible {
color: var(--vsz-brand);
}
/* --- Column balance ---------------------------------------------------
The four widgets hold 2, 2, 5 and 8 links. In a 4-equal-column row that
put two short boxed cards next to a list three times their height and
the whole band read as broken. Above 1100px the two branches stack into
one column and each link menu takes a full-height column, so all three
finish level. Two equal rows keep the cards matched even when one
address wraps and the other does not.
RTL note: grid column 1 is the right-hand column, which is where the
branches already sat, so nothing jumps between languages. */
@media (min-width: 1101px) {
.site-footer .site-primary-footer-wrap .ast-builder-footer-grid-columns {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-template-rows: 1fr 1fr !important;
/* Astra prints align-items:flex-start on this row, so without this
the two link columns would not span their two rows. */
align-items: stretch !important;
gap: 20px 40px;
}
.site-footer-primary-section-1 {
grid-column: 1;
grid-row: 1;
}
.site-footer-primary-section-2 {
grid-column: 1;
grid-row: 2;
}
.site-footer-primary-section-3 {
grid-column: 2;
grid-row: 1 / span 2;
}
.site-footer-primary-section-4 {
grid-column: 3;
grid-row: 1 / span 2;
}
}
/* --- Branch cards (footer sections 1 and 2) ---------------------------- */
.site-footer-primary-section-1 .widget_nav_menu,
.site-footer-primary-section-2 .widget_nav_menu {
padding: 20px;
border: 1px solid var(--vsz-line);
border-radius: 16px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
/* Fill the stretched grid row, so the two boxes match whatever the
addresses do at that width. */
.site-footer-primary-section-1 .footer-widget-area,
.site-footer-primary-section-2 .footer-widget-area,
.site-footer-primary-section-1 .widget_nav_menu,
.site-footer-primary-section-2 .widget_nav_menu {
height: 100%;
}
.site-footer-primary-section-1 .widget-title,
.site-footer-primary-section-2 .widget-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 15.5px;
}
.site-footer-primary-section-1 .widget-title::before,
.site-footer-primary-section-2 .widget-title::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
background: var(--vsz-brand);
-webkit-mask: var(--vsz-ic-pin) center / contain no-repeat;
mask: var(--vsz-ic-pin) center / contain no-repeat;
}
/* One icon per link, matched on the href so it works in both languages
without touching the menu items themselves. The full selector is needed
to beat the inline-block rule above: a ::before on an inline box ignores
width and height, so the icon would render at zero size. */
.site-footer .site-footer-primary-section-1 .widget_nav_menu .menu-link,
.site-footer .site-footer-primary-section-2 .widget_nav_menu .menu-link {
display: flex;
align-items: flex-start;
gap: 10px;
padding-block: 8px;
font-size: 14px;
line-height: 1.65;
}
.site-footer-primary-section-1 .menu-link::before,
.site-footer-primary-section-2 .menu-link::before {
content: "";
flex: 0 0 auto;
width: 17px;
height: 17px;
margin-top: 3px;
background: currentColor;
opacity: .6;
-webkit-mask: var(--vsz-ic-pin) center / contain no-repeat;
mask: var(--vsz-ic-pin) center / contain no-repeat;
transition: opacity .15s;
}
.site-footer-primary-section-1 .menu-link:hover::before,
.site-footer-primary-section-2 .menu-link:hover::before {
opacity: 1;
}
.site-footer .menu-link[href*="wa.me"]::before,
.site-footer .menu-link[href*="whatsapp"]::before {
-webkit-mask-image: var(--vsz-ic-wa);
mask-image: var(--vsz-ic-wa);
}
.site-footer .menu-link[href^="tel:"]::before {
-webkit-mask-image: var(--vsz-ic-phone);
mask-image: var(--vsz-ic-phone);
}
.site-footer .menu-link[href^="mailto:"]::before {
-webkit-mask-image: var(--vsz-ic-mail);
mask-image: var(--vsz-ic-mail);
}
/* --- Link columns (footer sections 3 and 4) ---------------------------- */
.site-footer-primary-section-3 .widget-title,
.site-footer-primary-section-4 .widget-title {
padding-bottom: 10px;
}
.site-footer-primary-section-3 .widget-title::after,
.site-footer-primary-section-4 .widget-title::after {
content: "";
position: absolute;
inset-inline-start: 0;
bottom: 0;
width: 34px;
height: 2px;
border-radius: 2px;
background: var(--vsz-brand);
}
/* =========================================================================
9. FOOTER BOTTOM BAR
========================================================================= */
.site-below-footer-wrap {
background: var(--vsz-brand);
padding-block: 14px;
}
.ast-footer-copyright,
.ast-footer-copyright * {
font-size: 13px;
line-height: 1.7;
color: rgba(255, 255, 255, .8);
}
/* =========================================================================
10. OVERRIDES THAT MUST OUTRANK ASTRA'S DYNAMIC SHEET
Astra's dynamic CSS loads before this file but wins on specificity, so
every !important below is deliberate rather than lazy.
========================================================================= */
/* Columns: Astra's tablet layout is 4-equal, which puts four columns of
Arabic text into a 900px screen. Two instead - branches on the first
row, link menus on the second. */
@media (max-width: 1100px) {
.site-footer .site-primary-footer-wrap .ast-builder-footer-grid-columns {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* Bottom bar: each half was centring its own content, which left the social
icons and the copyright bunched together in the middle of the row. */
.site-below-footer-wrap .ast-builder-footer-grid-columns {
display: flex !important;
width: 100% !important;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.site-below-footer-wrap .site-footer-section {
flex: 0 0 auto;
margin: 0 !important;
justify-content: flex-start;
}
.site-below-footer-wrap .site-footer-section:last-child {
justify-content: flex-end;
}
/* Astra hides the footer social icons on tablet and phone. Keep them. */
.site-footer .site-footer-below-section-1 .ast-builder-layout-element {
display: flex !important;
}
.site-footer .ast-footer-social-wrap .ast-builder-social-element {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 38px !important;
height: 38px !important;
margin-inline-end: 8px;
border-radius: 50% !important;
background: rgba(255, 255, 255, .12) !important;
color: #fff;
transition: background .15s, color .15s, transform .15s;
}
.site-footer .ast-footer-social-wrap .ast-builder-social-element:last-child {
margin-inline-end: 0;
}
.site-footer .ast-footer-social-wrap .ast-builder-social-element:hover,
.site-footer .ast-footer-social-wrap .ast-builder-social-element:focus-visible {
background: #fff !important;
color: var(--vsz-brand);
transform: translateY(-2px);
}
.site-footer .ast-footer-social-wrap .ast-builder-social-element svg {
width: 17px;
height: 17px;
fill: currentColor;
}
/* =========================================================================
11. FOOTER ON PHONES - the four stacked columns ran to about 1400px, so
the two link lists collapse behind their own titles. The branch cards
stay open: the address and the WhatsApp number are the reason anyone
scrolls this far. The toggles are wired by the companion JS snippet;
without it .vsz-acc is never added and every list stays expanded.
========================================================================= */
@media (max-width: 600px) {
.site-footer .site-primary-footer-wrap {
padding-block: 28px 22px;
}
.site-footer .site-primary-footer-wrap .ast-builder-footer-grid-columns {
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px;
}
.site-footer-primary-section-1 .widget_nav_menu,
.site-footer-primary-section-2 .widget_nav_menu {
padding: 16px;
}
.site-footer .vsz-acc .widget-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0;
padding: 14px 16px;
border: 1px solid var(--vsz-line);
border-radius: 14px;
background: #fff;
cursor: pointer;
user-select: none;
}
.site-footer .vsz-acc .widget-title::after {
content: "";
position: static;
width: 18px;
height: 18px;
border-radius: 0;
background: var(--vsz-muted);
-webkit-mask: var(--vsz-ic-chevron) center / contain no-repeat;
mask: var(--vsz-ic-chevron) center / contain no-repeat;
transition: transform .2s ease;
}
.site-footer .vsz-acc.vsz-open .widget-title::after {
transform: rotate(180deg);
}
.site-footer .vsz-acc.vsz-open .widget-title {
border-end-start-radius: 0;
border-end-end-radius: 0;
border-bottom-color: transparent;
}
.site-footer .vsz-acc nav {
display: none;
padding: 0 16px 12px;
border: 1px solid var(--vsz-line);
border-top: 0;
border-end-start-radius: 14px;
border-end-end-radius: 14px;
background: #fff;
}
.site-footer .vsz-acc.vsz-open nav {
display: block;
}
.site-footer .vsz-acc .menu-link {
display: block;
padding-block: 10px;
border-bottom: 1px solid #f1f4f9;
}
.site-footer .vsz-acc .menu li:last-child .menu-link {
border-bottom: 0;
}
/* The bottom bar stacks, social icons first. */
.site-below-footer-wrap .ast-builder-footer-grid-columns {
flex-direction: column;
justify-content: center;
gap: 14px;
}
.site-below-footer-wrap .site-footer-section,
.site-below-footer-wrap .site-footer-section:last-child {
width: 100%;
justify-content: center;
text-align: center;
}
.site-footer .ast-footer-social-wrap {
text-align: center;
}
}
/* =========================================================================
12. ICONS - masks, so each one inherits the colour of its own text
========================================================================= */
:root {
--vsz-ic-pin: url('data:image/svg+xml;utf8,');
--vsz-ic-wa: url('data:image/svg+xml;utf8,');
--vsz-ic-phone: url('data:image/svg+xml;utf8,');
--vsz-ic-mail: url('data:image/svg+xml;utf8,');
--vsz-ic-chevron: url('data:image/svg+xml;utf8,');
}
/* =========================================================================
13. MOTION
========================================================================= */
@media (prefers-reduced-motion: reduce) {
#masthead,
.ast-primary-header-bar .site-primary-header-wrap,
.ast-primary-header-bar .site-logo-img img,
.ast-header-search .search-field,
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link,
.site-footer .vsz-acc .widget-title::after {
transition: none !important;
}
}
/* ==== [20512] Homepage product card: hover button + sale badge ==== */
/* ==========================================================================
Homepage product cards (.sz) - fixes for Astra's on-card elements.
See the snippet note for the measured root cause of each block.
========================================================================== */
/* 1 - The action button.
`.sz .astra-shop-thumbnail-wrap > a` (meant for the image link) also matches
this button and stretched it to the full card, producing a blue disc over
the product photo. Re-assert Astra's intended 38px disc, pinned bottom-start
so it never collides with the sale badge in the top corner. */
.sz .astra-shop-thumbnail-wrap > a.ast-on-card-button {
width: 38px !important;
height: 38px !important;
flex: 0 0 auto !important;
top: auto !important;
bottom: 10px !important;
left: auto !important;
right: auto !important;
inset-inline-start: 10px !important;
inset-inline-end: auto !important;
}
/* 2 - The sale badge.
The theme styles `.onsale`; Astra renders `.ast-on-card-button.ast-onsale-card`,
so the badge was unstyled, sat outside the thumbnail and was clipped to
"خفيض". Give it the same pill treatment as the gold ::before badges. */
.sz ul.products li.product .ast-on-card-button.ast-onsale-card {
top: 10px !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
inset-inline-start: 10px !important;
inset-inline-end: auto !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 4px 9px !important;
border-radius: 999px !important;
background: var(--royal-lift) !important;
color: #fff !important;
font-size: .68rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 3 - Corner badge for the product that replaced Ripe Vapes 20K on 10 Sept 2026
(17185 -> 16105 Arabic, 17196 -> 16704 English). */
.sz li.post-16105 .astra-shop-thumbnail-wrap::before {
content: 'جديد';
background: var(--ice);
color: #052436;
}
.sz li.post-16704 .astra-shop-thumbnail-wrap::before {
content: 'New';
background: var(--ice);
color: #052436;
}
/* ==== [20257] About page scoped styling ==== */
/* ===== VSZ About page — scoped styling ===== */
.vsz-about {
line-height: 1.9;
}
.vsz-about .vsz-lead {
font-size: 1.15em;
background: var(--ast-global-color-4, #f6f7fb);
border-inline-start: 4px solid var(--ast-global-color-0, #1a237e);
padding: 1.25em 1.5em;
border-radius: 10px;
margin-bottom: 2em;
}
/* Stats row */
.vsz-about .vsz-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1em;
margin: 2em 0 2.5em;
}
.vsz-about .vsz-stat {
background: var(--ast-global-color-4, #f6f7fb);
border-radius: 10px;
padding: 1.1em 0.6em;
text-align: center;
}
.vsz-about .vsz-num {
display: block;
font-size: 1.6em;
font-weight: 700;
color: var(--ast-global-color-0, #1a237e);
line-height: 1.2;
}
.vsz-about .vsz-lbl {
display: block;
font-size: 0.85em;
opacity: 0.75;
margin-top: 0.3em;
}
/* Branch cards */
.vsz-about .vsz-branches {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25em;
margin: 1.5em 0 2em;
}
.vsz-about .vsz-branch {
border: 1px solid var(--ast-border-color, #e3e6ef);
border-radius: 12px;
padding: 1.4em 1.5em;
}
.vsz-about .vsz-branch h3 {
margin-top: 0;
margin-bottom: 0.4em;
}
.vsz-about .vsz-hours {
display: inline-block;
background: var(--ast-global-color-0, #1a237e);
color: #fff;
font-size: 0.85em;
font-weight: 600;
padding: 0.3em 0.9em;
border-radius: 999px;
margin-bottom: 0.8em;
}
.vsz-about a.vsz-btn,
.vsz-about a.vsz-btn:hover,
.vsz-about a.vsz-btn:focus {
display: inline-block;
background: #25d366;
color: #fff !important;
font-weight: 600;
padding: 0.55em 1.2em;
border-radius: 8px;
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
.vsz-about a.vsz-btn:hover {
filter: brightness(0.93);
}
/* Category and contact lists */
.vsz-about .vsz-cats,
.vsz-about .vsz-contact {
list-style: none;
padding-inline-start: 0;
}
.vsz-about .vsz-cats li,
.vsz-about .vsz-contact li {
padding: 0.55em 0;
border-bottom: 1px solid var(--ast-border-color, #eef0f6);
}
.vsz-about .vsz-cats li:last-child,
.vsz-about .vsz-contact li:last-child {
border-bottom: 0;
}
/* Compliance callout */
.vsz-about .vsz-note {
background: #fff8e6;
border: 1px solid #f0dca8;
border-radius: 10px;
padding: 1.2em 1.4em;
margin: 1.2em 0 1.6em;
}
.vsz-about .vsz-note p:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.vsz-about .vsz-stats {
grid-template-columns: repeat(2, 1fr);
}
.vsz-about .vsz-branches {
grid-template-columns: 1fr;
}
}
/* ==== [20282] Guide article scoped editorial styling ==== */
/* ===== VSZ guide articles — scoped editorial styling ===== */
.vsz-article {
line-height: 1.95;
font-size: 1.02em;
}
.vsz-article > p,
.vsz-article > ul,
.vsz-article > ol {
margin-bottom: 1.35em;
}
/* --- Hero image --- */
.vsz-article figure.vsz-hero {
margin: 0 auto 2em;
max-width: 640px;
text-align: center;
}
.vsz-article figure.vsz-hero img {
width: 100%;
height: auto;
border-radius: 14px;
display: block;
}
/* --- Last reviewed line --- */
.vsz-article p.vsz-reviewed {
margin-bottom: 1.8em;
}
.vsz-article p.vsz-reviewed em {
display: inline-block;
font-style: normal;
font-size: 0.8em;
letter-spacing: 0.02em;
background: var(--ast-global-color-4, #f2f4f9);
color: var(--ast-global-color-3, #5b6070);
padding: 0.3em 0.95em;
border-radius: 999px;
}
/* --- Lead / summary box --- */
.vsz-article p.vsz-lead {
font-size: 1.08em;
background: var(--ast-global-color-4, #f6f7fb);
border-inline-start: 4px solid var(--ast-global-color-0, #1a237e);
padding: 1.2em 1.45em;
border-radius: 10px;
margin-bottom: 2.2em;
}
/* --- Headings --- */
.vsz-article h2 {
position: relative;
margin-top: 2.2em;
margin-bottom: 0.75em;
padding-inline-start: 0.7em;
line-height: 1.45;
font-size: 1.45em;
}
.vsz-article h2::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.18em;
bottom: 0.18em;
width: 4px;
border-radius: 3px;
background: var(--ast-global-color-0, #1a237e);
}
.vsz-article h3 {
margin-top: 1.7em;
margin-bottom: 0.6em;
font-size: 1.13em;
line-height: 1.5;
color: var(--ast-global-color-1, #23272f);
}
/* --- Lists --- */
.vsz-article ul,
.vsz-article ol {
padding-inline-start: 1.4em;
}
.vsz-article li {
margin-bottom: 0.55em;
}
.vsz-article li::marker {
color: var(--ast-global-color-0, #1a237e);
font-weight: 600;
}
/* --- Tables --- */
.vsz-article table {
width: 100%;
border-collapse: collapse;
margin: 1.6em 0 2em;
font-size: 0.96em;
border: 1px solid var(--ast-border-color, #e3e6ef);
border-radius: 10px;
overflow: hidden;
}
.vsz-article table th {
background: var(--ast-global-color-4, #f2f4f9);
font-weight: 700;
text-align: start;
}
.vsz-article table th,
.vsz-article table td {
padding: 0.8em 1em;
border-bottom: 1px solid var(--ast-border-color, #e8eaf2);
vertical-align: top;
}
.vsz-article table tbody tr:last-child td {
border-bottom: 0;
}
/* --- WhatsApp links as pills --- */
.vsz-article a[href*="wa.me"],
.vsz-article a[href*="wa.me"]:hover,
.vsz-article a[href*="wa.me"]:focus {
display: inline-block;
background: #25d366;
color: #fff !important;
font-weight: 600;
font-size: 0.95em;
padding: 0.28em 0.9em;
border-radius: 999px;
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
white-space: nowrap;
direction: ltr;
unicode-bidi: embed;
}
.vsz-article a[href*="wa.me"]:hover {
filter: brightness(0.93);
}
/* --- Map links --- */
.vsz-article a[href*="maps.app.goo.gl"],
.vsz-article a[href*="google.com/maps"] {
font-weight: 600;
}
/* --- Body links --- */
.vsz-article p a:not([href*="wa.me"]),
.vsz-article li a:not([href*="wa.me"]) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(26, 35, 126, 0.35);
}
.vsz-article p a:not([href*="wa.me"]):hover,
.vsz-article li a:not([href*="wa.me"]):hover {
text-decoration-color: currentColor;
}
/* --- Closing contact block --- */
.vsz-article h2:last-of-type + p + ul,
.vsz-article h2:last-of-type + p + ul li {
list-style: none;
}
.vsz-article h2:last-of-type + p + ul {
padding-inline-start: 0;
background: var(--ast-global-color-4, #f6f7fb);
border-radius: 12px;
padding: 1.2em 1.4em;
}
.vsz-article h2:last-of-type + p + ul li {
margin-bottom: 0.7em;
}
.vsz-article h2:last-of-type + p + ul li:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.vsz-article {
font-size: 1em;
line-height: 1.85;
}
.vsz-article figure.vsz-hero {
max-width: 100%;
margin-bottom: 1.5em;
}
.vsz-article h2 {
font-size: 1.3em;
}
.vsz-article table {
display: block;
overflow-x: auto;
white-space: normal;
}
}