/* ==========================================================================
Woodway design system — 2026-09-18
One place for the brand tokens and the components built on them.
Loaded from woodmart-child/functions.php. Staging only until approved.
========================================================================== */
:root {
/* colour */
--ww-ink: #13233F; /* navy — structure, primary actions, headings */
--ww-ink-800: #1B3054;
--ww-ink-600: #2C4571;
--ww-linen: #F7F2EA; /* page / section background */
--ww-sand: #EFE6D8; /* alternate sections */
--ww-white: #FFFFFF;
--ww-walnut: #8A5530; /* secondary actions, wood accent */
--ww-brass: #C8963E; /* hairlines, icons, stars — never white text on it */
--ww-charcoal: #1E1B18; /* body text */
--ww-stone: #5E5750; /* secondary text */
--ww-line: #E3D9CB; /* borders */
--ww-sale: #A8432A; /* real, time-boxed discounts only */
--ww-success: #4E6B4A;
/* spacing scale (4px base) */
--ww-1: 4px; --ww-2: 8px; --ww-3: 12px; --ww-4: 16px;
--ww-6: 24px; --ww-8: 32px; --ww-12: 48px; --ww-18: 72px; --ww-24: 96px;
--ww-wa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12.04%202C6.58%202%202.13%206.45%202.13%2011.91c0%201.75.46%203.45%201.32%204.95L2%2022l5.25-1.38c1.45.79%203.08%201.21%204.79%201.21h.01c5.46%200%209.91-4.45%209.91-9.91%200-2.65-1.03-5.14-2.9-7.01A9.82%209.82%200%200%200%2012.04%202zm0%2018.13h-.01c-1.52%200-3.01-.41-4.31-1.18l-.31-.18-3.2.84.85-3.12-.2-.32a8.21%208.21%200%200%201-1.26-4.36c0-4.54%203.7-8.23%208.24-8.23%202.2%200%204.27.86%205.82%202.42a8.18%208.18%200%200%201%202.41%205.82c0%204.54-3.69%208.31-8.23%208.31zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.98-.14.16-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.16%200-.43.06-.65.31-.22.25-.85.83-.85%202.03s.87%202.35.99%202.51c.12.16%201.71%202.61%204.15%203.66.58.25%201.03.4%201.38.51.58.19%201.11.16%201.53.1.47-.07%201.47-.6%201.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E");
/* shape */
--ww-r-card: 12px;
--ww-r-btn: 10px;
--ww-r-pill: 999px;
--ww-shadow: 0 8px 24px rgba(19, 35, 63, .08);
--ww-shadow-lg: 0 16px 40px rgba(19, 35, 63, .12);
/* rhythm */
--ww-section-y: 48px;
--ww-container: 1280px;
}
@media (min-width: 1025px) {
:root { --ww-section-y: 88px; }
}
/* --------------------------------------------------------------------------
1. Base — typography, RTL, page ground
-------------------------------------------------------------------------- */
body,
.wd-nav > li > a,
.woocommerce-checkout,
input, select, textarea, button {
font-family: "IBM Plex Sans Arabic", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body {
background: var(--ww-white);
color: var(--ww-charcoal);
font-size: 16px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5,
.wd-entities-title,
.widget-title,
.woocommerce-loop-product__title {
color: var(--ww-ink);
line-height: 1.3;
letter-spacing: 0;
}
/* type scale */
.ww-display { font-size: 32px; font-weight: 700; line-height: 1.2; }
h1, .ww-h1 { font-size: 26px; font-weight: 700; }
h2, .ww-h2 { font-size: 22px; font-weight: 600; }
h3, .ww-h3 { font-size: 18px; font-weight: 600; }
.ww-lead { font-size: 17px; color: var(--ww-stone); line-height: 1.8; }
.ww-meta { font-size: 14px; font-weight: 500; color: var(--ww-stone); }
@media (min-width: 1025px) {
.ww-display { font-size: 52px; }
h1, .ww-h1 { font-size: 40px; }
h2, .ww-h2 { font-size: 32px; }
h3, .ww-h3 { font-size: 22px; }
body { font-size: 17px; }
.ww-lead { font-size: 19px; }
}
/* body copy stays readable — never wider than ~68 characters */
.ww-measure { max-width: 62ch; }
a { color: var(--ww-ink); }
a:hover { color: var(--ww-walnut); }
/* nothing may push the page sideways (see section 20 for why this is
`clip` and not `hidden`) */
img, video { max-width: 100%; height: auto; }
/* section rhythm — alternating grounds instead of horizontal rules */
.ww-section { padding-block: var(--ww-section-y); }
.ww-section--linen { background: var(--ww-linen); }
.ww-section--sand { background: var(--ww-sand); }
.ww-section--ink { background: var(--ww-ink); color: #EDE7DE; }
.ww-section--ink h2, .ww-section--ink h3 { color: var(--ww-white); }
.ww-wrap {
max-width: var(--ww-container);
margin-inline: auto;
padding-inline: var(--ww-4);
}
@media (min-width: 769px) { .ww-wrap { padding-inline: var(--ww-6); } }
@media (min-width: 1025px) { .ww-wrap { padding-inline: 40px; } }
/* section heading with a brass hairline — the recurring "craft" detail */
.ww-sec-head { margin-block-end: var(--ww-6); }
.ww-sec-head h2 { margin: 0 0 var(--ww-2); }
.ww-sec-head p { margin: 0; color: var(--ww-stone); }
.ww-sec-head::after {
content: "";
display: block;
width: 56px;
height: 2px;
background: var(--ww-brass);
margin-block-start: var(--ww-3);
}
.ww-sec-head--center { text-align: center; }
.ww-sec-head--center::after { margin-inline: auto; }
/* --------------------------------------------------------------------------
2. Buttons
-------------------------------------------------------------------------- */
.btn, .button, button,
.wd-buy-now-btn,
input[type="submit"],
.single_add_to_cart_button,
.woocommerce .button {
border-radius: var(--ww-r-btn);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.ww-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ww-2);
min-height: 48px;
padding: 12px 28px;
border-radius: var(--ww-r-btn);
font-size: 16px;
font-weight: 600;
text-decoration: none;
border: 2px solid transparent;
cursor: pointer;
}
.ww-btn--primary { background: var(--ww-ink); color: var(--ww-white); }
.ww-btn--primary:hover { background: var(--ww-ink-800); color: var(--ww-white); }
.ww-btn--secondary { background: transparent; color: var(--ww-walnut); border-color: var(--ww-walnut); }
.ww-btn--secondary:hover { background: var(--ww-walnut); color: var(--ww-white); }
.ww-btn--ghost { background: transparent; color: var(--ww-white); border-color: rgba(255,255,255,.55); }
.ww-btn--ghost:hover { background: var(--ww-white); color: var(--ww-ink); }
.ww-btn:active { transform: translateY(1px); }
/* WoodMart's own buttons inherit the same palette */
.woodmart-buttons .wd-action-btn > a,
.wd-buy-now-btn,
.single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .checkout-button {
background-color: var(--ww-ink) !important;
color: var(--ww-white) !important;
border-color: var(--ww-ink) !important;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button:hover,
.single_add_to_cart_button:hover {
background-color: var(--ww-ink-800) !important;
border-color: var(--ww-ink-800) !important;
}
/* --------------------------------------------------------------------------
3. Accessibility — focus, targets, motion
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--ww-brass);
outline-offset: 2px;
border-radius: 4px;
}
/* every interactive control clears 44px on touch */
@media (pointer: coarse) {
.wd-tools-element > a,
.wd-nav > li > a,
.ww-btn,
.button,
.wd-action-btn > a {
min-height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.ww-top-rotator .ww-top-msg { animation: none !important; }
.ww-top-rotator .ww-top-msg:not(.is-on) { display: none; }
}
.ww-sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* --------------------------------------------------------------------------
4. Header — light ground, navy wordmark, one clear search
-------------------------------------------------------------------------- */
.whb-top-bar {
background-color: var(--ww-ink) !important;
border: 0 !important;
}
.whb-top-bar,
.whb-top-bar a,
.whb-top-bar .wd-header-text { color: #E6DFD4 !important; font-size: 13px; }
.whb-top-bar a:hover { color: var(--ww-white) !important; }
.ww-top-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.ww-top-link::before { font-size: 14px; line-height: 1; }
.ww-top-link--pin::before { content: "\1F4CD"; }
.ww-top-link--wa::before { content: "\1F4AC"; }
.ww-top-end { display: inline-flex; align-items: center; gap: var(--ww-4); }
/* The announcement messages cross-fade. They used to be absolutely positioned
inside an `inline-block` with `min-width: 18ch; overflow: hidden` — absolute
children contribute nothing to their parent's width, so the box stayed ~18ch
and the longest message (30ch) was cut off mid-word next to the WhatsApp
link. Stacking them in one grid cell keeps the cross-fade and lets the box
take the width of the widest message. */
.ww-top-rotator { display: inline-grid; vertical-align: middle; }
.ww-top-msg {
grid-area: 1 / 1;
white-space: nowrap; opacity: 0;
animation: ww-rotate 15s linear infinite;
}
.ww-top-msg:not(.is-on) { pointer-events: none; }
.ww-top-msg:nth-child(1) { animation-delay: 0s; }
.ww-top-msg:nth-child(2) { animation-delay: 5s; }
.ww-top-msg:nth-child(3) { animation-delay: 10s; }
/* Each message holds its slot until the next one has taken over. The previous
timing faded out at 33% and the next did not reach full opacity until 5%
of its own cycle, which left the bar blank for about a quarter of every
rotation. */
@keyframes ww-rotate {
0%, 32% { opacity: 1; transform: translateY(0); }
35%,100% { opacity: 0; transform: translateY(-6px); }
}
.whb-main-header,
.whb-general-header,
.whb-header-bottom {
background-color: var(--ww-linen) !important;
border-color: var(--ww-line) !important;
}
.whb-main-header .wd-tools-element > a,
.whb-header-bottom .wd-nav > li > a { color: var(--ww-ink) !important; }
.whb-header-bottom { border-top: 1px solid var(--ww-line) !important; }
/* logo sits on linen, so it needs no plate */
.whb-column .wd-logo img { display: block; }
/* search — the widest single control in the header */
.wd-header-search-form .searchform {
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-pill);
background: var(--ww-white);
overflow: hidden;
box-shadow: none;
}
.wd-header-search-form .searchform input[type="text"],
.wd-header-search-form .searchform input[type="search"] {
height: 50px;
font-size: 15px;
color: var(--ww-charcoal);
background: transparent;
padding-inline-start: var(--ww-4);
}
.wd-header-search-form .searchform input::placeholder { color: var(--ww-stone); opacity: 1; }
.wd-header-search-form .searchform .searchsubmit {
background: var(--ww-ink);
color: var(--ww-white);
width: 50px;
border-radius: var(--ww-r-pill);
margin: 4px;
}
.wd-header-search-form .searchform:focus-within { border-color: var(--ww-brass); box-shadow: 0 0 0 3px rgba(200,150,62,.22); }
/* main navigation */
.wd-nav-main > li > a {
font-weight: 600;
font-size: 15px;
text-transform: none !important;
padding-block: 14px;
position: relative;
}
.wd-nav-main > li > a::after {
content: "";
position: absolute;
inset-inline: 0; inset-block-end: 6px;
height: 2px;
background: var(--ww-brass);
transform: scaleX(0);
transition: transform .18s ease;
transform-origin: inline-start;
}
.wd-nav-main > li:hover > a::after,
.wd-nav-main > li.current-menu-item > a::after { transform: scaleX(1); }
/* --------------------------------------------------------------------------
5. Product card — one component everywhere
-------------------------------------------------------------------------- */
.wd-product.product-grid-item {
background: var(--ww-white);
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-card);
overflow: hidden;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
display: flex;
flex-direction: column;
}
.wd-product.product-grid-item:hover {
border-color: transparent;
box-shadow: var(--ww-shadow);
transform: translateY(-2px);
}
.wd-product .product-wrapper { display: flex; flex-direction: column; height: 100%; }
.wd-product .product-element-top {
aspect-ratio: 4 / 5;
background: var(--ww-linen);
overflow: hidden;
}
.wd-product .product-element-top img {
width: 100%; height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
}
.wd-product .product-element-bottom,
.wd-product .wd-product-header { padding: var(--ww-3) var(--ww-3) var(--ww-4); }
.wd-product .wd-entities-title {
font-size: 15px;
font-weight: 600;
line-height: 1.5;
margin-block: 0 var(--ww-1);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.9em;
}
.wd-product .wd-product-cats,
.wd-product .wd-product-cats a { font-size: 13px; color: var(--ww-stone); }
.wd-product .price { font-size: 19px; font-weight: 600; color: var(--ww-ink); }
.wd-product .price del { font-size: 14px; font-weight: 400; color: var(--ww-stone); opacity: 1; }
.wd-product .price ins { text-decoration: none; }
/* one badge per card, and it is never the amber-on-white pair */
.wd-product .product-labels > * { display: none; }
.wd-product .product-labels > *:first-child { display: block; }
.wd-product .product-labels .onsale,
.wd-product .product-labels > span {
background: var(--ww-sale);
color: var(--ww-white);
border-radius: var(--ww-r-pill);
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
box-shadow: none;
}
.wd-product .out-of-stock { background: var(--ww-stone); }
/* grid gutters */
.wd-products-element .wd-product,
.products .wd-product { margin-block-end: var(--ww-6); }
/* --------------------------------------------------------------------------
6. Shop and category pages
-------------------------------------------------------------------------- */
.page-title.title-shop,
.archive .page-title,
.tax-product_cat .page-title {
background: var(--ww-linen) !important;
color: var(--ww-ink) !important;
padding-block: var(--ww-8) !important;
min-height: 0 !important;
border-bottom: 1px solid var(--ww-line);
}
.page-title.title-shop .entry-title,
.archive .page-title .entry-title {
color: var(--ww-ink) !important;
font-size: 28px;
font-weight: 700;
}
.page-title .woocommerce-breadcrumb,
.page-title .breadcrumbs { color: var(--ww-stone) !important; }
.page-title .woocommerce-breadcrumb a { color: var(--ww-stone) !important; }
/* the dark photographic category header goes */
.page-title.color-scheme-light { background-image: none !important; }
.wd-shop-tools {
background: var(--ww-white);
border-block: 1px solid var(--ww-line);
padding-block: var(--ww-3);
}
.shop-loop-head { margin-block-end: var(--ww-6); }
@media (max-width: 768px) {
/* filter + sort stay reachable while scrolling a long grid */
.wd-shop-tools {
position: sticky;
inset-block-start: 0;
z-index: 30;
background: var(--ww-white);
box-shadow: 0 2px 8px rgba(19,35,63,.06);
}
}
/* --------------------------------------------------------------------------
7. Product page
-------------------------------------------------------------------------- */
.single-product-page .summary-inner {
background: var(--ww-white);
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-card);
padding: var(--ww-6);
}
.single-product-page .product_title {
font-size: 24px;
font-weight: 700;
line-height: 1.4;
margin-block-end: var(--ww-2);
}
.single-product-page .summary-inner > .price,
.single-product-page .price {
font-size: 28px;
font-weight: 700;
color: var(--ww-ink);
}
.single-product-page .price del { font-size: 18px; font-weight: 400; color: var(--ww-stone); }
.single-product-page .single_add_to_cart_button {
min-height: 52px;
font-size: 17px;
width: 100%;
justify-content: center;
}
.single-product-page .woocommerce-product-details__short-description { color: var(--ww-stone); }
/* the trust row under the buy box — only promises the shop actually keeps */
.ww-pdp-assurance {
display: grid;
grid-template-columns: 1fr;
gap: var(--ww-2);
margin-block-start: var(--ww-4);
padding-block-start: var(--ww-4);
border-block-start: 1px solid var(--ww-line);
font-size: 14px;
color: var(--ww-stone);
list-style: none;
padding-inline-start: 0;
}
.ww-pdp-assurance li { display: flex; gap: var(--ww-2); align-items: flex-start; }
.ww-pdp-assurance li::before { content: "\2713"; color: var(--ww-success); font-weight: 700; }
.ww-pdp-ask {
display: inline-flex; align-items: center; gap: var(--ww-2);
margin-block-start: var(--ww-3);
font-weight: 600; color: var(--ww-walnut); text-decoration: none;
}
.ww-pdp-ask::before { content: "\1F4AC"; }
@media (min-width: 1025px) {
.ww-pdp-assurance { grid-template-columns: 1fr 1fr; }
}
/* mobile purchase bar */
@media (max-width: 1024px) {
.single-product-page .summary-inner { padding: var(--ww-4); border-radius: var(--ww-r-card); }
.wd-sticky-btn,
.wd-sticky-btn-container {
background: var(--ww-white) !important;
border-top: 1px solid var(--ww-line);
box-shadow: 0 -6px 20px rgba(19,35,63,.1);
padding-block: var(--ww-2);
}
.wd-sticky-btn .single_add_to_cart_button { min-height: 48px; }
/* nothing floats over the price or the buy button */
body.single-product .chaty-widget,
body.single-product #chaty-widget-0 { inset-block-end: 84px !important; }
}
/* --------------------------------------------------------------------------
8. Cart and checkout — same surfaces, no rule changes
-------------------------------------------------------------------------- */
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
#order_review {
background: var(--ww-white);
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-card);
padding: var(--ww-4);
}
.woocommerce table.shop_table { border: 0; }
.woocommerce table.shop_table th { color: var(--ww-ink); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-btn);
min-height: 48px;
font-size: 16px; /* stops iOS zooming on focus */
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--ww-brass); }
.woocommerce .checkout-button,
#place_order { min-height: 54px; font-size: 17px; }
/* --------------------------------------------------------------------------
9. Footer
-------------------------------------------------------------------------- */
.footer-container {
background: var(--ww-ink) !important;
color: #CFC7BB;
}
.footer-container a { color: #CFC7BB; }
.footer-container a:hover { color: var(--ww-white); }
.footer-container .widget-title,
.footer-container h4, .footer-container h5 { color: var(--ww-white) !important; }
.footer-container .wd-sub-menu > li > a { color: #CFC7BB; }
.copyrights-wrapper { border-top: 1px solid rgba(255,255,255,.12); color: #A79E92; }
/* --------------------------------------------------------------------------
10. Homepage components
-------------------------------------------------------------------------- */
/* --- hero: live text beside a real room, never text baked into an image --- */
.ww-hero { background: var(--ww-linen); overflow: hidden; }
.ww-hero__inner {
max-width: var(--ww-container);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.ww-hero__media { position: relative; order: -1; }
.ww-hero__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.ww-hero__body { padding: var(--ww-8) var(--ww-4) var(--ww-12); }
.ww-hero__eyebrow {
display: inline-flex; align-items: center; gap: var(--ww-2);
font-size: 13px; font-weight: 600; letter-spacing: .04em;
color: var(--ww-walnut);
margin-block-end: var(--ww-3);
}
.ww-hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--ww-brass); }
.ww-hero h1 { margin: 0 0 var(--ww-3); font-size: 30px; line-height: 1.25; }
.ww-hero p { margin: 0 0 var(--ww-6); color: var(--ww-stone); max-width: 52ch; }
.ww-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ww-3); }
@media (min-width: 769px) {
.ww-hero__inner { grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.ww-hero__media { order: 0; }
.ww-hero__media img { height: 100%; aspect-ratio: auto; min-height: 460px; }
.ww-hero__body { padding: var(--ww-18) 40px; display: flex; flex-direction: column; justify-content: center; }
.ww-hero h1 { font-size: 46px; }
}
@media (min-width: 1200px) {
.ww-hero h1 { font-size: 54px; }
.ww-hero__media img { min-height: 540px; }
}
/* --- promise strip --- */
.ww-promise { background: var(--ww-ink); color: #E9E3D9; }
.ww-promise__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--ww-4);
padding-block: var(--ww-6);
}
.ww-promise__item { display: flex; gap: var(--ww-3); align-items: flex-start; font-size: 14px; line-height: 1.5; }
.ww-promise__item b { display: block; color: var(--ww-white); font-size: 15px; font-weight: 600; }
.ww-promise__icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--ww-brass); }
@media (min-width: 769px) {
.ww-promise__grid { grid-template-columns: repeat(4, 1fr); gap: var(--ww-8); padding-block: var(--ww-8); }
.ww-promise__item { font-size: 15px; }
}
/* --- shop by room tiles --- */
.ww-rooms__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--ww-3);
}
@media (min-width: 769px) { .ww-rooms__grid { grid-template-columns: repeat(3, 1fr); gap: var(--ww-4); } }
@media (min-width: 1200px) { .ww-rooms__grid { grid-template-columns: repeat(6, 1fr); } }
.ww-room {
position: relative;
display: block;
border-radius: var(--ww-r-card);
overflow: hidden;
text-decoration: none;
background: var(--ww-sand);
isolation: isolate;
}
.ww-room img {
display: block; width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
transition: transform .35s ease;
}
.ww-room:hover img { transform: scale(1.04); }
.ww-room::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(13,22,40,.82) 0%, rgba(13,22,40,.28) 42%, rgba(13,22,40,0) 68%);
}
.ww-room__label {
position: absolute;
inset-inline: 0; inset-block-end: 0;
z-index: 1;
padding: var(--ww-3);
color: var(--ww-white);
}
.ww-room__label b { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ww-room__label span { font-size: 13px; color: #D6CEC2; }
/* --- maker story --- */
.ww-story__grid { display: grid; grid-template-columns: 1fr; gap: var(--ww-6); align-items: center; }
.ww-story__media img { width: 100%; border-radius: var(--ww-r-card); aspect-ratio: 4 / 3; object-fit: cover; }
.ww-story__facts {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: var(--ww-4);
margin-block-start: var(--ww-6);
padding-block-start: var(--ww-6);
border-block-start: 1px solid var(--ww-line);
}
.ww-story__fact b { display: block; font-size: 26px; font-weight: 700; color: var(--ww-ink); line-height: 1.2; }
.ww-story__fact span { font-size: 14px; color: var(--ww-stone); }
@media (min-width: 900px) {
.ww-story__grid { grid-template-columns: 1fr 1fr; gap: var(--ww-12); }
.ww-story__facts { grid-template-columns: repeat(3, 1fr); }
}
/* --- visit us --- */
.ww-visit__grid { display: grid; grid-template-columns: 1fr; gap: var(--ww-6); }
@media (min-width: 769px) { .ww-visit__grid { grid-template-columns: 1fr 1fr; gap: var(--ww-8); } }
.ww-visit__card {
background: var(--ww-white);
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-card);
padding: var(--ww-6);
}
.ww-visit__card h3 { margin: 0 0 var(--ww-2); }
.ww-visit__card p { margin: 0 0 var(--ww-3); color: var(--ww-stone); }
.ww-visit__card .ww-btn { margin-block-start: var(--ww-2); }
/* --- product section headings on the homepage --- */
.ww-products-head {
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: var(--ww-3);
margin-block-end: var(--ww-4);
}
.ww-products-head h2 { margin: 0; }
.ww-products-head a { font-weight: 600; color: var(--ww-walnut); text-decoration: none; white-space: nowrap; }
.ww-products-head a:hover { text-decoration: underline; }
/* the old amber "more products" pill, wherever it still appears */
.ucaddon_color_overlay_button a,
.uc-color-overlay-button a { border-radius: var(--ww-r-btn) !important; }
/* --------------------------------------------------------------------------
11. Small mobile widths — 360 / 390 / 430
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
.ww-hero__body { padding: var(--ww-6) var(--ww-4) var(--ww-8); }
.ww-hero h1 { font-size: 26px; }
.ww-hero__actions .ww-btn { flex: 1 1 100%; }
.ww-promise__grid { grid-template-columns: 1fr 1fr; gap: var(--ww-3); }
.ww-story__facts { grid-template-columns: 1fr 1fr; }
.wd-product .wd-entities-title { font-size: 14px; }
.wd-product .price { font-size: 17px; }
.ww-sec-head h2 { font-size: 21px; }
}
/* the floating chat bubble must never sit on top of a price or a CTA */
.chaty-widget, #chaty-widget-0 { z-index: 60 !important; }
@media (max-width: 768px) {
.chaty-widget, #chaty-widget-0 { inset-block-end: 16px !important; }
}
/* --------------------------------------------------------------------------
12. Re-point WoodMart's own variables at the brand palette
The theme paints prices, the cart pill, links and countless small details
from these. Overriding them here is one change instead of fifty.
-------------------------------------------------------------------------- */
:root,
body,
.wd-nav-opener,
.whb-header {
--wd-primary-color: #13233F;
--wd-alternative-color: #8A5530;
--wd-link-color: #13233F;
--wd-link-color-hover: #8A5530;
--wd-text-color: #1E1B18;
--wd-title-color: #13233F;
--wd-main-bgcolor: #FFFFFF;
--wd-form-brd-radius: 10px;
--wd-brd-radius: 12px;
--wd-primary-corners: 10px;
}
/* prices, wherever they appear */
.price,
.price ins,
.price .amount,
.wd-product .price,
.woocommerce-Price-amount {
color: var(--ww-ink);
}
.price del,
.price del .amount { color: var(--ww-stone); }
/* the header cart button was an amber pill */
.whb-main-header .wd-header-cart .wd-tools-inner,
.whb-main-header .wd-header-cart.wd-design-8 > a {
background: var(--ww-ink) !important;
color: var(--ww-white) !important;
border-radius: var(--ww-r-pill) !important;
}
.whb-main-header .wd-header-cart .wd-cart-number {
background: var(--ww-brass) !important;
color: var(--ww-ink) !important;
}
/* promise strip icons are inline SVG, sized once */
.ww-promise__icon svg { width: 26px; height: 26px; display: block; }
.ww-promise__icon { color: var(--ww-brass); }
/* footer wordmark */
.ww-footer-brand { display: block; margin-block-end: var(--ww-4); }
.ww-footer-brand img { width: 168px; height: auto; }
/* --------------------------------------------------------------------------
13. Mobile chrome — bottom bar, announcement bar, no floating overlap
-------------------------------------------------------------------------- */
/* announcement bar: exactly one line, never clipped mid-word */
.whb-top-bar .ww-top-mobile,
.whb-top-bar .wd-header-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
@media (max-width: 768px) {
.whb-top-bar,
.whb-top-bar .wd-header-text { font-size: 12px; line-height: 34px; }
.whb-top-bar .whb-column { padding-inline: var(--ww-3); }
}
/* bottom toolbar */
.wd-toolbar {
background: var(--ww-white) !important;
border-top: 1px solid var(--ww-line) !important;
box-shadow: 0 -4px 16px rgba(19, 35, 63, .08);
}
.wd-toolbar .wd-tools-element > a,
.wd-toolbar .wd-toolbar-label { color: var(--ww-ink) !important; font-size: 11px; font-weight: 600; }
.wd-toolbar .wd-tools-element > a { min-height: 48px; }
.wd-toolbar .wd-toolbar-link .wd-custom-icon {
display: block;
width: 22px; height: 22px;
margin-inline: auto;
background: no-repeat center / 22px 22px
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313233F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.7-5.2A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E");
}
/* On phones the WhatsApp action lives in the bottom bar and in the header, so
the floating bubble is removed: it used to sit on top of the hero button and
on product prices. */
@media (max-width: 1024px) {
.chaty-widget,
#chaty-widget-0,
.chaty-widget-is { display: none !important; }
}
/* one hover treatment for every card, even where a widget asked for another */
.wd-product.wd-hover-tiled .wd-product-header,
.wd-product.wd-hover-tiled .product-element-bottom { padding: var(--ww-3) var(--ww-3) var(--ww-4); }
.wd-product.wd-hover-tiled .wd-bottom-actions,
.wd-product.wd-hover-tiled .wd-buttons { display: none; }
/* the rating line on cards was clipping */
.wd-product .star-rating,
.wd-product .wd-product-rating { overflow: visible; }
/* --------------------------------------------------------------------------
14. Subcategory chips
-------------------------------------------------------------------------- */
.ww-chips { margin-block-end: var(--ww-4); }
.ww-chips ul {
display: flex;
gap: var(--ww-2);
list-style: none;
margin: 0;
padding: 0 0 var(--ww-1);
overflow-x: auto;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.ww-chips li { flex: 0 0 auto; }
.ww-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 6px 16px;
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-pill);
background: var(--ww-white);
color: var(--ww-ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.ww-chip span { font-weight: 400; color: var(--ww-stone); font-size: 13px; }
.ww-chip:hover { border-color: var(--ww-walnut); color: var(--ww-walnut); }
.ww-chip.is-current { background: var(--ww-ink); border-color: var(--ww-ink); color: var(--ww-white); }
.ww-chip.is-current span { color: #CFC7BB; }
@media (max-width: 768px) {
.ww-chips ul { padding-inline: var(--ww-1); }
.ww-chip { min-height: 44px; }
}
/* footer tagline under the reverse wordmark */
.ww-footer-tag { color: #A79E92; font-size: 14px; max-width: 46ch; margin: 0; }
.footer-container .ww-footer-brand img { width: 172px; height: auto; }
/* the payment mark reads on navy without a white plate */
.footer-container img[src*="cash-only"] {
background: var(--ww-white);
border-radius: 6px;
padding: 6px 10px;
}
/* --------------------------------------------------------------------------
15. Overflow guards
Found by measuring body.scrollWidth at 360 / 390 / 430 px: a flex child with
the default min-width:auto grows to fit its content instead of scrolling.
-------------------------------------------------------------------------- */
.ww-chips {
width: 100%;
max-width: 100%;
min-width: 0;
flex: 1 1 100%;
}
.ww-chips ul {
max-width: 100%;
min-width: 0;
}
/* the reviews block carried negative margins wider than a phone */
.woocommerce-Reviews,
.woocommerce-Reviews > div { max-width: 100%; }
/* nothing inside a page-builder widget may exceed its column */
.elementor-widget-container { max-width: 100%; }
/* WoodMart's product gallery zoom layer is not needed on touch devices and
was the widest element on the product page */
@media (max-width: 1024px) {
img.zoomImg { display: none !important; }
}
@media (max-width: 1024px) {
/* the theme parks carousel arrows outside the track, 40px past the screen
edge; on touch the dots and the swipe gesture are enough */
.wd-nav-arrows,
.wd-btn-arrow { display: none !important; }
/* the reviews panel carried -30px side margins */
.woocommerce-Reviews { margin-inline: 0 !important; }
}
/* --------------------------------------------------------------------------
16. Contrast and target fixes found by measuring, not by eye
-------------------------------------------------------------------------- */
/* links inside the navy promise strip were inheriting navy on navy (1:1) */
.ww-promise a {
color: #F3E6CE;
text-decoration: underline;
text-underline-offset: 3px;
}
.ww-promise a:hover { color: var(--ww-white); }
/* room tile captions sit on photographs: keep the scrim dark enough for white
text no matter which image is used */
.ww-room::after {
background: linear-gradient(to top, rgba(10,18,33,.92) 0%, rgba(10,18,33,.55) 38%, rgba(10,18,33,0) 70%);
}
.ww-room__label b { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ww-room__label span { color: #E6DFD4; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
/* breadcrumbs and secondary meta were a hair under 4.5:1 */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.wd-breadcrumbs,
.wd-breadcrumbs a,
.price_label,
.woocommerce-result-count {
color: #55504A !important;
font-size: 13px;
}
/* star ratings: brass stars, but any number beside them is text-coloured */
.star-rating span::before,
.star-rating::before { color: var(--ww-brass) !important; }
.woocommerce-review__published-date,
.woocommerce-product-rating .rating,
.woocommerce-product-rating span { color: var(--ww-charcoal) !important; }
/* the sticky purchase bar label must read on its own background */
.wd-sticky-btn .single_add_to_cart_button,
.wd-sticky-btn .single_add_to_cart_button span {
color: var(--ww-white) !important;
font-size: 15px;
}
/* bigger targets where the measurement said they were short */
.ww-top-link { min-height: 40px; }
.ww-products-head a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; }
.ww-promise a { display: inline-flex; align-items: center; min-height: 32px; }
.wd-product .wd-product-cats a { display: inline-block; padding-block: 4px; }
/* announcement bar text never smaller than 13px */
.whb-top-bar,
.whb-top-bar .wd-header-text,
.whb-top-bar a { font-size: 13px !important; }
/* the quick add-to-cart button on cards kept a literal amber from the theme's
generated CSS, so the variable override could not reach it (white on amber
measures 2.05:1) */
.wd-add-btn > a,
.wd-buttons a.button,
.wd-product a.button.add_to_cart_button,
.wd-product a.button.product_type_simple,
.wd-product a.button.product_type_variable,
.wd-add-btn-replace > a {
background-color: var(--ww-ink) !important;
border-color: var(--ww-ink) !important;
color: var(--ww-white) !important;
}
.wd-add-btn > a:hover,
.wd-buttons a.button:hover { background-color: var(--ww-ink-800) !important; }
/* mobile menu tabs */
.wd-nav-mob-tab > li > a,
.wd-nav-mob-tab .nav-link-text { color: var(--ww-ink) !important; font-weight: 600; }
.wd-nav-mob-tab > li.wd-active > a { color: var(--ww-walnut) !important; }
/* mobile header controls in brand navy, not the old amber */
.whb-main-header .wd-header-mobile-nav > a,
.whb-main-header .wd-header-mobile-nav .wd-tools-icon,
.whb-main-header .wd-tools-element .wd-tools-icon { color: var(--ww-ink) !important; }
.whb-main-header .wd-header-mobile-nav > a { background: var(--ww-white) !important; border: 1px solid var(--ww-line); }
/* mobile search submit matches the pill */
@media (max-width: 1024px) {
.wd-header-search-form-mobile .searchform,
.wd-search-form .searchform { border-radius: var(--ww-r-pill); overflow: hidden; }
.wd-search-form .searchform .searchsubmit { border-radius: var(--ww-r-pill); }
}
/* --------------------------------------------------------------------------
17. Cart / checkout chrome
-------------------------------------------------------------------------- */
.wd-checkout-steps {
background: var(--ww-linen) !important;
border-block: 1px solid var(--ww-line);
padding-block: var(--ww-3);
}
.wd-checkout-steps a,
.wd-checkout-steps span,
.wd-checkout-steps li { color: var(--ww-stone) !important; font-weight: 600; }
.wd-checkout-steps .step-active,
.wd-checkout-steps .step-active a,
.wd-checkout-steps .step-active span { color: var(--ww-ink) !important; }
/* any WooCommerce button that still carried the old amber */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
a.button.wc-backward,
.wc-proceed-to-checkout a.button {
background-color: var(--ww-ink) !important;
border-color: var(--ww-ink) !important;
color: var(--ww-white) !important;
border-radius: var(--ww-r-btn);
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background-color: var(--ww-ink-800) !important; }
/* secondary actions inside the cart stay quiet */
.woocommerce .cart .button[name="update_cart"] {
background-color: transparent !important;
color: var(--ww-walnut) !important;
border: 2px solid var(--ww-walnut) !important;
}
.cart-empty,
.woocommerce-info,
.wc-empty-cart-message { color: var(--ww-ink); }
/* --------------------------------------------------------------------------
18. Campaign banner
A slot at the very top of the homepage. Both crops declare their own ratio
through custom properties set by the shortcode, so the space is reserved
before the image arrives and nothing jumps.
-------------------------------------------------------------------------- */
.ww-banner { background: var(--ww-white); padding-block: var(--ww-4) 0; }
.ww-banner .ww-wrap { position: relative; }
.ww-banner__link { display: block; text-decoration: none; }
.ww-banner__pic { display: block; }
.ww-banner__pic img {
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--ww-banner-ratio-d, 1000 / 300);
object-fit: cover;
border-radius: var(--ww-r-card);
background: var(--ww-linen);
}
@media (max-width: 768px) {
.ww-banner { padding-block: var(--ww-3) 0; }
.ww-banner__pic img { aspect-ratio: var(--ww-banner-ratio-m, 900 / 400); }
}
.ww-banner__link:hover .ww-banner__pic img { filter: brightness(1.03); }
/* staging-only marker: this creative is waiting on a business decision */
.ww-banner__flag {
margin: var(--ww-2) 0 0;
padding: var(--ww-2) var(--ww-3);
border: 1px dashed var(--ww-sale);
border-radius: var(--ww-r-btn);
background: #FBF1EE;
color: #7A2E1B;
font-size: 13px;
line-height: 1.6;
}
.ww-banner__flag strong { color: var(--ww-sale); }
/* With a banner above it the hero no longer needs to fill the screen on its
own — two full-height blocks would compete. */
@media (min-width: 769px) {
.ww-hero__body { padding-block: var(--ww-12); }
.ww-hero__media img { min-height: 380px; }
.ww-hero h1 { font-size: 40px; }
}
@media (min-width: 1200px) {
.ww-hero h1 { font-size: 46px; }
.ww-hero__media img { min-height: 430px; }
}
/* --------------------------------------------------------------------------
19. Shop category filter
-------------------------------------------------------------------------- */
.ww-catf { font-size: 15px; }
.ww-catf__search { margin-block-end: var(--ww-3); }
.ww-catf__q {
width: 100%;
min-height: 44px;
padding: 8px var(--ww-3);
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-pill);
background: var(--ww-white);
font-size: 15px;
color: var(--ww-charcoal);
}
.ww-catf__q:focus { border-color: var(--ww-brass); outline: none; box-shadow: 0 0 0 3px rgba(200,150,62,.22); }
.ww-catf__list { max-height: 60vh; overflow-y: auto; padding-inline-end: var(--ww-1); }
@media (max-width: 1024px) { .ww-catf__list { max-height: none; } }
.ww-catf__row {
display: flex;
align-items: center;
gap: var(--ww-2);
min-height: 40px;
padding: 4px var(--ww-2);
border-radius: var(--ww-r-btn);
cursor: pointer;
color: var(--ww-charcoal);
}
.ww-catf__row:hover { background: var(--ww-linen); }
.ww-catf__row input { accent-color: var(--ww-ink); width: 18px; height: 18px; flex: 0 0 auto; }
.ww-catf__name { flex: 1 1 auto; line-height: 1.4; }
.ww-catf__count {
flex: 0 0 auto;
min-width: 2.5em;
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--ww-stone);
background: var(--ww-linen);
border-radius: var(--ww-r-pill);
padding: 2px 8px;
}
.ww-catf__row:has(input:checked) { background: var(--ww-ink); color: var(--ww-white); }
.ww-catf__row:has(input:checked) .ww-catf__count { background: rgba(255,255,255,.18); color: var(--ww-white); }
.ww-catf__row--all { font-weight: 600; }
.ww-catf__row--parent { font-weight: 600; }
.ww-catf__group { border-block-end: 1px solid var(--ww-line); }
.ww-catf__group:last-of-type { border-block-end: 0; }
.ww-catf__summary {
list-style: none;
display: flex;
align-items: center;
cursor: pointer;
}
.ww-catf__summary::-webkit-details-marker { display: none; }
.ww-catf__summary .ww-catf__row { flex: 1 1 auto; }
.ww-catf__summary::after {
content: "";
flex: 0 0 auto;
width: 9px; height: 9px;
margin-inline-start: var(--ww-2);
border-inline-end: 2px solid var(--ww-stone);
border-block-end: 2px solid var(--ww-stone);
transform: rotate(45deg);
transition: transform .18s ease;
}
.ww-catf__group[open] > .ww-catf__summary::after { transform: rotate(-135deg); }
.ww-catf__children { padding-inline-start: var(--ww-4); padding-block-end: var(--ww-2); }
.ww-catf__row--child { font-size: 14px; }
.ww-catf__empty { margin: var(--ww-3) var(--ww-2); color: var(--ww-stone); font-size: 14px; }
.ww-catf__actions {
display: flex;
align-items: center;
gap: var(--ww-3);
margin-block-start: var(--ww-4);
padding-block-start: var(--ww-3);
border-block-start: 1px solid var(--ww-line);
}
.ww-catf__apply { flex: 1 1 auto; min-height: 44px; }
.ww-catf__clear { color: var(--ww-walnut); font-weight: 600; white-space: nowrap; }
/* On desktop the choice applies immediately, so the button is a fallback for
keyboard and no-JS use rather than the main path. */
@media (min-width: 1025px) {
.ww-catf__apply { flex: 0 0 auto; padding-inline: var(--ww-4); font-size: 14px; }
}
/* In the mobile filter drawer the two actions stay reachable at the bottom. */
@media (max-width: 1024px) {
.wd-side-hidden .ww-catf__actions,
.sidebar-container .ww-catf__actions {
position: sticky;
inset-block-end: 0;
z-index: 2;
background: var(--ww-white);
margin-inline: calc(var(--ww-4) * -1);
padding: var(--ww-3) var(--ww-4);
box-shadow: 0 -6px 18px rgba(19,35,63,.1);
}
}
/* the chevron is its own target, so a tap on the name selects the category
instead of folding the group away */
.ww-catf__summary::after {
width: 40px;
height: 40px;
margin-inline-start: 0;
border: 0;
transform: none;
background: no-repeat center / 10px 10px
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235E5750' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
border-radius: var(--ww-r-btn);
}
.ww-catf__summary:hover::after { background-color: var(--ww-linen); }
.ww-catf__group[open] > .ww-catf__summary::after { transform: rotate(180deg); }
.ww-catf__group--d1 > .ww-catf__summary .ww-catf__row { font-size: 14px; }
.ww-catf__group--d1 { border-block-end: 0; }
/* the last categories must be able to scroll clear of the sticky action bar */
@media (max-width: 1024px) {
.ww-catf__list { padding-block-end: 84px; }
}
/* ==========================================================================
20. Header — two rows, pinned, readable (2026-09-18, revised)
The owner preferred the earlier two-row composition: a tall row carrying the
logo, a wide search and the account/cart controls, with the primary
navigation on its own row beneath it. Both rows pin; only the announcement
strip scrolls away.
`overflow-x: hidden` on html/body turns them into scroll containers, which
silently kills `position: sticky`. `clip` prevents the same sideways
scrolling without creating a scroll container.
========================================================================== */
html, body { overflow-x: clip; }
:root { --ww-header-h: 126px; }
@media (max-width: 1024px) { :root { --ww-header-h: 60px; } }
/* The whole header sticks, offset by the height of the announcement strip, so
the strip scrolls away and both usable rows stay. One element, no clone, no
show/hide on scroll direction — nothing to flicker, nothing to jump. */
.whb-header {
position: sticky;
top: calc(-1 * var(--ww-topbar-h));
z-index: 390;
background: var(--ww-linen);
transition: box-shadow .2s ease;
}
html.ww-scrolled .whb-header { box-shadow: 0 6px 20px rgba(19, 35, 63, .10); }
.whb-general-header { border-bottom: 1px solid var(--ww-line) !important; }
/* everything in the bar reads as navy on linen (14.1:1), in both states */
.whb-header,
.whb-header a,
.whb-header button,
.whb-general-header .wd-tools-element > a,
.whb-general-header .wd-tools-icon { color: var(--ww-ink) !important; }
.whb-top-bar,
.whb-top-bar a { color: #E6DFD4 !important; }
.whb-general-header .wd-logo img { max-height: 48px; width: auto; }
@media (max-width: 1024px) { .whb-general-header .wd-logo img { max-height: 34px; } }
/* WoodMart's own sticky machinery is unused now — make sure no stray clone
or leftover row can double up behind the real header. */
.whb-clone, .wd-header-clone, .whb-sticky-row.whb-sticked { display: none !important; }
/* Drawers, the cart side panel and dialogs must stay above the header. */
.wd-side-hidden,
.cart-widget-side,
.wd-sidebar-opened,
.mobile-nav,
.mfp-wrap,
.wd-popup,
.login-form-side { z-index: 999 !important; }
.wd-close-side { z-index: 998 !important; }
/* anchors should not land underneath the pinned bar */
:target { scroll-margin-top: calc(var(--ww-header-h) + 16px); }
/* --------------------------------------------------------------------------
20b. The search field — the widest control in the header again.
WoodMart renders the submit button as a بحث; the icon font that
used to draw a magnifier on it no longer resolves, which left a blank navy
rectangle. The glyph is drawn here as a background image instead, so it
cannot depend on a font loading.
-------------------------------------------------------------------------- */
@media (min-width: 1025px) {
.whb-general-header .whb-col-center,
.whb-general-header .wd-header-search-form {
flex: 1 1 auto;
min-width: 0;
}
.whb-general-header .wd-header-search-form {
max-width: 720px;
margin-inline: auto;
}
}
/* `overflow: hidden` here (added to keep the pill's corners clean) also clipped
the category dropdown, which is a child of this 52px form: the panel opened
at full opacity and was cut to a 1px sliver, which is why «اختر القسم»
looked dead. The corners are kept by rounding the controls themselves. */
.wd-header-search-form .searchform {
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-pill);
background: var(--ww-white);
overflow: visible;
}
.wd-header-search-form .searchform > input[type="text"],
.wd-header-search-form .searchform > input[type="search"] { border-radius: var(--ww-r-pill); }
.wd-header-search-form .searchform input[type="text"],
.wd-header-search-form .searchform input[type="search"] { height: 50px; font-size: 15px; }
.wd-header-search-form .searchform .searchsubmit {
width: 42px;
height: 42px;
margin: 4px;
border-radius: 50%;
background-color: var(--ww-ink);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
}
.wd-header-search-form .searchform .searchsubmit span { display: none; }
.wd-header-search-form .searchform .searchsubmit::before,
.wd-header-search-form .searchform .searchsubmit::after { display: none; }
.wd-header-search-form .searchform .searchsubmit:hover { background-color: var(--ww-walnut); }
.wd-header-search-form .searchform:focus-within { border-color: var(--ww-brass); box-shadow: 0 0 0 3px rgba(200, 150, 62, .22); }
.wd-header-search-form .searchform .searchsubmit:focus-visible {
outline: 2px solid var(--ww-brass);
outline-offset: 2px;
}
/* the category selector sits inside the same pill, separated by a hairline */
.wd-header-search-form .wd-search-cat,
.wd-header-search-form .search-by-category {
border-inline-start: 1px solid var(--ww-line);
font-size: 14px;
color: var(--ww-charcoal);
}
/* ==========================================================================
21. Primary navigation — its own row under the search bar
========================================================================== */
.whb-header-bottom {
background: var(--ww-white) !important;
border-block-start: 1px solid var(--ww-line) !important;
border-block-end: 1px solid var(--ww-line) !important;
}
.whb-header-bottom .whb-column { padding-block: 0; }
.whb-header-bottom .whb-empty-column { display: none !important; }
.whb-header-bottom .whb-column { flex: 1 1 auto; min-width: 0; justify-content: center; }
.whb-header-bottom a { color: var(--ww-ink) !important; }
.ww-nav-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ww-nav-slot > .ww-nav,
.ww-nav-slot .ww-nav__list { height: 100%; }
.ww-nav__list {
display: flex;
align-items: center;
gap: var(--ww-1);
list-style: none;
margin: 0;
padding: 0;
flex-wrap: nowrap;
}
.ww-nav__item { position: relative; }
.ww-nav__link {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 0 var(--ww-3);
border: 0;
background: transparent;
border-radius: var(--ww-r-btn);
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: var(--ww-ink);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.ww-nav__link:hover { background: var(--ww-sand); color: var(--ww-ink); }
.ww-nav__link:focus-visible { outline: 2px solid var(--ww-brass); outline-offset: 2px; }
.ww-nav__link--sale { color: var(--ww-sale); }
.ww-nav__link--sale:hover { background: #F7E9E5; color: var(--ww-sale); }
.ww-nav__chev {
width: 8px; height: 8px;
border-inline-end: 2px solid currentColor;
border-block-end: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .18s ease;
margin-block-start: -3px;
}
.ww-nav__item.is-open .ww-nav__chev { transform: rotate(-135deg); margin-block-start: 3px; }
.ww-nav__item.is-open > .ww-nav__link { background: var(--ww-sand); }
/* A short dropdown, not a mega-menu: five shopping groups and one link to the
shop page, where the complete category filter lives. Six rows can never
need an internal scrollbar. */
.ww-drop {
position: absolute;
inset-block-start: calc(100% + 6px);
inset-inline-start: 0;
z-index: 40;
width: 268px;
background: var(--ww-white);
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-card);
box-shadow: var(--ww-shadow-lg);
padding: var(--ww-2);
}
.ww-drop[hidden] { display: none; }
.ww-drop__list { list-style: none; margin: 0; padding: 0; }
.ww-drop__list a {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 var(--ww-3);
border-radius: var(--ww-r-btn);
font-size: 15px;
color: var(--ww-ink);
text-decoration: none;
}
.ww-drop__list a:hover { background: var(--ww-sand); color: var(--ww-walnut); }
.ww-drop__list a:focus-visible { outline: 2px solid var(--ww-brass); outline-offset: -2px; }
.ww-drop__all {
display: flex;
align-items: center;
gap: 6px;
min-height: 44px;
margin-block-start: var(--ww-2);
padding: 0 var(--ww-3);
border-block-start: 1px solid var(--ww-line);
font-size: 15px;
font-weight: 600;
color: var(--ww-walnut);
text-decoration: none;
}
.ww-drop__all:hover { color: var(--ww-ink); }
.ww-drop__all:focus-visible { outline: 2px solid var(--ww-brass); outline-offset: -2px; }
/* the navigation row is a desktop affordance; phones use the drawer menu */
@media (max-width: 1024px) {
.whb-header-bottom { display: none !important; }
.ww-nav-slot { display: none; }
}
/* the offset is written by script from the real announcement height; the CSS
default is 0 so a failed measurement can never clip the bar */
:root { --ww-topbar-h: 0px; }
/* mobile: burger + search icon on one side, logo centred, cart on the other */
.whb-general-header .wd-header-mobile-nav,
.whb-general-header .wd-header-search { margin-inline-end: var(--ww-1); }
.whb-general-header .wd-header-mobile-nav > a {
background: transparent !important;
border: 0 !important;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
}
.whb-general-header .wd-header-mobile-nav .wd-tools-icon,
.whb-general-header .wd-search-full-screen .wd-tools-icon { color: var(--ww-ink) !important; }
.whb-column.whb-col-mobile .wd-tools-element > a { min-width: 44px; min-height: 44px; }
/* The header builder's generated CSS still carries the old 105px row height
(the same stale generated stylesheet that kept the amber palette). It is set
on the row's inner wrappers as well as the row, and the wrappers are what
overhang: left alone, a 105px inner inside an 80px row covers the top 25px
of the navigation row and — because the general row carries a higher
z-index — silently swallows clicks on it. Every box in the chain is pinned
to the same height here. */
.whb-general-header,
.whb-general-header > .container,
.whb-general-header > .whb-container,
.whb-general-header .whb-general-header-inner,
.whb-general-header .whb-column { height: 80px !important; min-height: 80px !important; max-height: 80px !important; }
@media (min-width: 1025px) {
.whb-header-bottom,
.whb-header-bottom > .container,
.whb-header-bottom > .whb-container,
.whb-header-bottom .whb-header-bottom-inner,
.whb-header-bottom .whb-column { height: 52px !important; min-height: 52px !important; max-height: 52px !important; }
}
@media (max-width: 1024px) {
.whb-general-header,
.whb-general-header > .container,
.whb-general-header > .whb-container,
.whb-general-header .whb-general-header-inner,
.whb-general-header .whb-column { height: 56px !important; min-height: 56px !important; max-height: 56px !important; }
}
.whb-top-bar,
.whb-top-bar .whb-column { height: 38px !important; min-height: 38px !important; }
@media (max-width: 1024px) { .whb-top-bar { display: none !important; } }
/* ==========================================================================
22. Footer (2026-09-18)
========================================================================== */
.footer-container { background: var(--ww-ink) !important; color: #C9C1B6; }
.footer-container .container,
.footer-container .main-footer { padding: 0 !important; max-width: none; }
.ww-footer { padding-block: var(--ww-12) var(--ww-4); }
@media (max-width: 768px) { .ww-footer { padding-block: var(--ww-8) var(--ww-3); } }
.ww-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--ww-8) var(--ww-6);
}
@media (min-width: 700px) { .ww-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .ww-footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr; gap: var(--ww-6) var(--ww-8); } }
.ww-footer__logo { display: inline-block; margin-block-end: var(--ww-3); }
.ww-footer__logo img { width: 164px; height: auto; display: block; }
.ww-footer__tag { margin: 0 0 var(--ww-4); color: #C9C1B6; font-size: 15px; line-height: 1.7; max-width: 40ch; }
.ww-footer__social { display: flex; gap: var(--ww-2); list-style: none; margin: 0; padding: 0; }
.ww-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border: 1px solid rgba(255,255,255,.22);
border-radius: var(--ww-r-pill);
color: #EDE7DE;
}
.ww-footer__social a:hover { background: var(--ww-brass); border-color: var(--ww-brass); color: var(--ww-ink); }
.ww-footer__social svg { width: 20px; height: 20px; }
.ww-footer__col h3 {
margin: 0 0 var(--ww-3);
font-size: 15px;
font-weight: 600;
color: var(--ww-white) !important;
letter-spacing: .01em;
}
.ww-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ww-footer__col li { margin-block-end: 2px; }
.ww-footer__col a,
.ww-footer__contact li {
display: block;
padding-block: 7px;
color: #C9C1B6;
font-size: 15px;
line-height: 1.6;
text-decoration: none;
}
.ww-footer__col a:hover { color: var(--ww-white); text-decoration: underline; text-underline-offset: 3px; }
.ww-footer__contact li { padding-block: 6px; }
.ww-footer__contact a { display: inline; padding: 0; }
.ww-footer__label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--ww-brass);
letter-spacing: .04em;
}
.ww-footer__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ww-3);
margin-block-start: var(--ww-8);
padding-block-start: var(--ww-4);
border-block-start: 1px solid rgba(255,255,255,.14);
}
.ww-footer__copy { margin: 0; font-size: 14px; color: #A79E92; }
.ww-footer__pay { display: flex; align-items: center; gap: var(--ww-2); margin: 0; font-size: 14px; color: #C9C1B6; }
.ww-footer__pay strong { color: var(--ww-white); font-weight: 600; }
.ww-footer__cash {
width: 62px; height: auto;
background: var(--ww-white);
border-radius: 5px;
padding: 4px 7px;
}
/* WoodMart's own copyright strip is replaced by the one above */
.copyrights-wrapper { display: none !important; }
@media (max-width: 480px) {
.ww-footer__bar { flex-direction: column; align-items: flex-start; }
.ww-footer__grid { gap: var(--ww-6); }
}
/* ==========================================================================
23. Side cart drawer (2026-09-18)
In RTL WoodMart opens it from the left (the inline-end), which is correct.
========================================================================== */
.cart-widget-side {
width: min(400px, 92vw) !important;
background: var(--ww-white);
display: flex;
flex-direction: column;
}
.cart-widget-side .wd-heading {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ww-3);
padding: var(--ww-4);
border-block-end: 1px solid var(--ww-line);
background: var(--ww-linen);
}
.cart-widget-side .wd-heading .title {
font-size: 17px;
font-weight: 600;
color: var(--ww-ink);
}
.cart-widget-side .close-side-widget > a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
border-radius: var(--ww-r-btn);
color: var(--ww-ink) !important;
font-size: 14px;
font-weight: 600;
}
.cart-widget-side .close-side-widget > a:hover { background: var(--ww-sand); }
.cart-widget-side .widget_shopping_cart,
.cart-widget-side .widget_shopping_cart_content { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.ww-minicart { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.ww-minicart__list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
list-style: none;
margin: 0;
padding: var(--ww-3) var(--ww-4);
}
.ww-minicart__item {
position: relative;
display: grid;
grid-template-columns: 76px 1fr 32px;
gap: var(--ww-3);
align-items: start;
padding-block: var(--ww-3);
border-block-end: 1px solid var(--ww-line);
}
.ww-minicart__item:last-child { border-block-end: 0; }
.ww-minicart__item.is-busy { opacity: .55; pointer-events: none; }
.ww-minicart__thumb { display: block; }
.ww-minicart__thumb img {
width: 76px; height: 76px;
object-fit: cover;
border-radius: var(--ww-r-btn);
background: var(--ww-linen);
display: block;
}
.ww-minicart__body { min-width: 0; }
.ww-minicart__name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
color: var(--ww-ink);
text-decoration: none;
margin-block-end: var(--ww-2);
}
.ww-minicart__name:hover { color: var(--ww-walnut); }
.ww-minicart__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ww-2);
margin-block-start: var(--ww-2);
}
.ww-minicart__price { font-size: 15px; font-weight: 600; color: var(--ww-ink); white-space: nowrap; }
.ww-minicart__qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-pill);
overflow: hidden;
background: var(--ww-white);
}
.ww-qty-btn {
width: 34px; height: 34px;
border: 0;
background: transparent;
color: var(--ww-ink);
font-size: 17px;
line-height: 1;
cursor: pointer;
}
.ww-qty-btn:hover { background: var(--ww-linen); }
.ww-qty-input {
width: 34px;
height: 34px;
border: 0;
border-inline: 1px solid var(--ww-line);
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--ww-charcoal);
background: transparent;
-moz-appearance: textfield;
}
.ww-minicart__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: var(--ww-r-pill);
color: var(--ww-stone) !important;
font-size: 0;
}
.ww-minicart__remove svg { width: 15px; height: 15px; }
.ww-minicart__remove:hover { background: #F7E9E5; color: var(--ww-sale) !important; }
.ww-minicart__foot {
flex: 0 0 auto;
padding: var(--ww-4);
border-block-start: 1px solid var(--ww-line);
background: var(--ww-linen);
}
.ww-minicart__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ww-3);
margin: 0 0 var(--ww-1);
font-size: 15px;
color: var(--ww-stone);
}
.ww-minicart__total strong { font-size: 21px; font-weight: 700; color: var(--ww-ink); }
.ww-minicart__note { margin: 0 0 var(--ww-3); font-size: 13px; color: var(--ww-stone); }
.ww-minicart__actions { display: grid; gap: var(--ww-2); }
.ww-minicart__actions .ww-btn { width: 100%; min-height: 48px; }
/* empty state */
.ww-minicart--empty {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ww-2);
padding: var(--ww-12) var(--ww-6);
text-align: center;
}
.ww-minicart__icon { width: 56px; height: 56px; color: var(--ww-line); }
.ww-minicart__emptytitle { margin: var(--ww-2) 0 0; font-size: 17px; font-weight: 600; color: var(--ww-ink); }
.ww-minicart__emptytext { margin: 0 0 var(--ww-3); font-size: 14px; color: var(--ww-stone); max-width: 30ch; }
/* the drawer sits above the pinned header, the bottom bar and the chat button */
.cart-widget-side { z-index: 999 !important; }
@media (max-width: 1024px) {
.cart-widget-side { width: min(420px, 94vw) !important; }
/* nothing may float over the checkout button inside the drawer */
body.wd-open-side .chaty-widget,
body.wd-open-side #chaty-widget-0,
body.wd-open-side .wd-toolbar { display: none !important; }
}
.ww-qty-btn[disabled] { opacity: .35; cursor: not-allowed; }
.ww-minicart__limit { margin: var(--ww-1) 0 0; font-size: 12px; color: var(--ww-sale); }
/* WoodMart draws its own cross glyph on `.remove`; the button already has an
SVG, so the duplicate is suppressed */
.ww-minicart__remove::before,
.ww-minicart__remove::after { content: none !important; display: none !important; }
/* remaining small-print contrast, measured rather than guessed */
.per-page-variation,
.per-page-variation span,
.per-page-title,
.pf-value,
.price_slider_amount .price_label,
.wd-products-per-page a { color: #55504A !important; }
.per-page-variation.active span,
.per-page-variation.wd-active span { color: var(--ww-ink) !important; font-weight: 700; }
.star-rating + .count,
.woocommerce-product-rating .woocommerce-review-link,
.wd-product .star-rating span,
li.product .star-rating span { color: var(--ww-charcoal) !important; }
/* the category selector inside the search field is a real control */
.searchform select,
.searchform .wd-dropdown-menu-opener,
.searchform .wd-cat-stylized { min-height: 40px; }
.searchform .wd-cat-stylized > span,
.searchform select { font-size: 14px; color: #55504A; }
/* the numeric rating that sits behind the stars is decorative; keep it out of
the accessibility tree instead of leaving it as unreadable text */
.star-rating .rating,
.star-rating strong.rating { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Chaty keeps its WhatsApp form in the page at z-index -1; a sliver of its
green header was bleeding through the pinned bar. Hidden until the plugin
opens it, using visibility so the plugin's own display toggle still works. */
.chaty-outer-forms { visibility: hidden; }
.chaty-outer-forms.chaty-form-active,
.chaty-outer-forms[style*="display: block"],
.chaty-outer-forms[style*="display:block"] { visibility: visible; }
/* a proper down-caret on the categories button, mirrored correctly in RTL */
.ww-nav__chev {
width: 12px; height: 12px;
border: 0;
margin: 0;
transform: none;
background: no-repeat center / 11px 11px
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2313233F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E");
transition: transform .18s ease;
}
.ww-nav__item.is-open .ww-nav__chev { transform: rotate(180deg); margin: 0; }
/* ==========================================================================
24. Contact page (2026-09-18)
========================================================================== */
.ww-contact { max-width: 880px; margin-inline: auto; }
.ww-contact__title { margin: 0 0 var(--ww-3); font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: var(--ww-ink); }
.ww-contact__lead { font-size: 17px; color: var(--ww-charcoal); margin-block-end: var(--ww-6); }
.ww-contact__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ww-4);
}
@media (max-width: 640px) { .ww-contact__grid { grid-template-columns: 1fr; } }
.ww-contact__card {
background: var(--ww-white);
border: 1px solid var(--ww-line);
border-radius: var(--ww-r-card);
padding: var(--ww-5);
}
.ww-contact__card h2 {
margin: 0 0 var(--ww-2);
font-size: 14px;
font-weight: 700;
letter-spacing: .04em;
color: var(--ww-walnut);
}
.ww-contact__card p { margin: 0 0 var(--ww-1); font-size: 16px; color: var(--ww-ink); }
.ww-contact__card a { color: var(--ww-ink); text-decoration: underline; text-underline-offset: 3px; }
.ww-contact__card a:hover { color: var(--ww-walnut); }
.ww-contact__foot { margin-block-start: var(--ww-6); }
/* ==========================================================================
25. Fix pass — cart button, nav baseline, banner gap, top bar, WhatsApp
(18 September 2026)
========================================================================== */
/* --- 3. Navigation baseline -----------------------------------------------
WoodMart's header-text slot carries `set-cont-mb-s reset-last-child`, which
gives every child a 10px bottom margin and removes it from the last one.
Under `align-items: center` that margin is centred with the item, so the
first five links sat 5px above «المدونة». */
.ww-nav-slot .ww-nav,
.ww-nav-slot .ww-nav__list,
.ww-nav-slot .ww-nav__list > li,
.ww-nav-slot .ww-nav__list > li > a,
.ww-nav-slot .ww-nav__list > li > button { margin-block: 0 !important; }
/* --- 2. Cart button -------------------------------------------------------
Three separate boxes were escaping the pill: the inner wrapper drew a second
navy pill 2px taller than the button, and the count bubble was positioned
`top: -3px` against the wrapper, so it floated above the button's edge.
One pill, everything in it. */
.whb-general-header .wd-header-cart > a {
display: inline-flex;
align-items: center;
height: 44px;
padding: 0 6px;
border-radius: 999px;
background: var(--ww-ink);
overflow: hidden;
}
.whb-general-header .wd-header-cart .wd-tools-inner {
display: inline-flex;
align-items: center;
gap: 8px;
height: 100%;
padding: 0;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.whb-general-header .wd-header-cart .wd-tools-icon {
position: relative !important;
flex: 0 0 32px;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
background: var(--ww-white);
border-radius: 50%;
color: var(--ww-ink) !important;
}
/* The badge is positioned against the icon, not the wrapper, and kept a clear
2px inside the pill on every edge. WoodMart sets physical `top`/`right`, so
these have to be physical and marked important to win. */
.whb-general-header .wd-header-cart .wd-cart-number {
position: absolute !important;
top: -4px !important;
bottom: auto !important;
inset-inline-start: -4px !important;
inset-inline-end: auto !important;
min-width: 16px;
height: 16px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ww-brass);
color: var(--ww-ink) !important;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.whb-general-header .wd-header-cart .wd-cart-number > span { display: none; }
.whb-general-header .wd-header-cart .wd-tools-text {
display: inline-flex;
align-items: center;
height: 100%;
margin: 0;
padding-inline-end: 6px;
color: var(--ww-white) !important;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.whb-general-header .wd-header-cart .wd-tools-text * { color: var(--ww-white) !important; }
.whb-general-header .wd-header-cart > a:focus-visible { outline: 2px solid var(--ww-brass); outline-offset: 2px; }
/* --- 4. Banner breathing room --------------------------------------------
The promotional banner sat flush against the section beneath it. */
.elementor-element-wwbannerw,
.ww-banner { margin-block-end: var(--ww-12) !important; }
@media (max-width: 768px) {
.elementor-element-wwbannerw,
.ww-banner { margin-block-end: var(--ww-8) !important; }
}
/* --- 5. Announcement bar --------------------------------------------------
The empty centre column was claiming half the row and squeezing the right
cell to 335px, so its content was clipped. The columns now take the width
they need and sit at the two ends. */
.whb-top-bar .whb-column.whb-empty-column { display: none !important; }
.whb-top-bar .whb-top-bar-inner { justify-content: space-between; gap: var(--ww-4); }
.whb-top-bar .whb-column { flex: 0 1 auto; width: auto !important; max-width: none !important; }
.whb-top-bar .wd-header-text { overflow: visible !important; }
@media (max-width: 1200px) {
/* below this the two ends would meet, so the rotator steps aside */
.whb-top-bar .ww-top-rotator { display: none; }
}
/* --- 6. WhatsApp ----------------------------------------------------------
The word «واتساب» was standing in for an icon, and the number inherited the
page's RTL direction, which reversed its digit groups on screen. */
.ww-top-link--wa::before { content: none !important; }
.ww-wa-icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
fill: currentColor;
}
.ww-btn .ww-wa-icon { width: 20px; height: 20px; margin-inline-end: 8px; }
.ww-num { direction: ltr; unicode-bidi: isolate; }
/* the mobile toolbar drew this link with WoodMart's placeholder glyph, which
renders as a gear; the mask paints the WhatsApp mark instead */
.wd-toolbar .wd-toolbar-link .wd-toolbar-icon::before,
.wd-toolbar .wd-toolbar-link .wd-toolbar-icon::after { content: none !important; }
.wd-toolbar .wd-toolbar-link .wd-toolbar-icon {
width: 22px;
height: 22px;
background-color: currentColor;
-webkit-mask: var(--ww-wa-mask) center / contain no-repeat;
mask: var(--ww-wa-mask) center / contain no-repeat;
}
/* Elementor strips inline