/*
Theme Name: Bella Beauty (Woodmart Child)
Theme URI: https://bellabeautybh.com/
Description: Child theme of Woodmart for Bella Beauty. All custom CSS/PHP lives here — the parent theme is never edited.
Author: Bella Beauty
Template: woodmart
Version: 1.0.0
Text domain: woodmart-child
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/* ---------------------------------------------------------------------------
Typography — CAIRO for everything (owner, 2026-08-14).
Previously the stack led with Montserrat and let Arabic fall back per character
to Cairo. That is a real technique, but on this site it split every mixed line
between two typefaces: «6.000 د.ب» drew the digits in Montserrat and the letters
in Cairo, and prices, phone numbers and percentages appear on nearly every
screen. The two faces have different proportions, so the result read as a
mistake rather than a pairing.
Cairo carries a full Latin set, so one family now covers both scripts and every
line is internally consistent. Montserrat is no longer requested at all — one
less font file on first paint.
Both `--bb-font-latin` and `--bb-font-arabic` are kept and both point at Cairo:
nothing in the stylesheet references them today, but leaving the names in place
means a future per-script decision has somewhere to live.
--------------------------------------------------------------------------- */
:root {
--bb-font-latin: "Cairo";
--bb-font-arabic: "Cairo";
--bb-font-stack: "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* -------------------------------------------------------------------------
DESIGN STANDARD — the single source for type and section rhythm.
Every new section, block or page uses these; nothing hard-codes a px value
that one of these already covers. Full rationale and the measured audit
behind them: Docs/design-standard.md.
Desktop values here; the two overrides below restate ONLY what changes at
each breakpoint, so a token is never defined in a media query alone.
------------------------------------------------------------------------- */
--bb-fs-hero-title: 44px;
--bb-fs-hero-body: 17px;
--bb-fs-hero-eyebrow: 14px;
--bb-fs-section-title: 24px; /* every «الأكثر مبيعاً»-class section heading */
/* Item title = the heading that names ONE item in a row. The product card and
the category tile already get theirs from theme options, so this token is for
NEW sections that introduce their own item rows. */
--bb-fs-item-title: 15px;
--bb-fs-body: 15px;
--bb-fs-small: 14px; /* section links, nav, CTA labels */
--bb-fs-micro: 11px; /* card feature words */
/* Section rhythm: gap between one section's last VISIBLE element and the next
section. Measure it that way — a carousel container's box ends above its
visible content, so box-to-box readings lie. */
--bb-gap-section: 40px;
/* Product media frame. Every product photo is shown in this ratio, cropped to
fill. The catalogue's own images run 0.666 to 1.5 (56 measured), so without a
fixed frame the gallery jumped between 240px and 1066px tall from slide to
slide. 1:1 is the catalogue's median AND most common ratio (19 of 56) and is
the shape the shop cards already use. Owner decision 2026-08-12 —
Docs/design-standard.md §5. */
--bb-ratio-product-media: 1 / 1;
/* Band grey — Docs/design-standard.md §4. One definition, used by the home
page's categories strip and the product page's section bands. */
--bb-color-band: #f4f4f4;
}
@media (max-width: 1024px) {
:root {
--bb-fs-hero-title: 32px;
--bb-fs-hero-body: 16px;
--bb-fs-hero-eyebrow: 13px;
--bb-fs-section-title: 22px;
--bb-fs-item-title: 14px;
--bb-gap-section: 24px;
}
}
@media (max-width: 768.98px) {
:root {
--bb-fs-hero-title: 26px;
--bb-fs-hero-body: 15px;
--bb-fs-hero-eyebrow: 12px;
--bb-fs-section-title: 20px;
--bb-fs-item-title: 13px;
--bb-gap-section: 16px;
}
}
/* ---------------------------------------------------------------------------
Header language switcher
TranslatePress renders its own markup, which sat 150x62 at y14 next to the
theme's 40x40 tools at y25 — bigger and misaligned. Short names are set in the
plugin itself (short-names, which also renders no flag), so this only matches
the theme's tool styling so it reads as one of the group. Logical properties
throughout, so it mirrors on the English side.
--------------------------------------------------------------------------- */
.bb-lang-switcher {
display: flex;
align-items: center;
}
/* Only the CURRENT item is sized to match the tools. The switcher container and
the dropdown list must stay unconstrained: an earlier version set height:40px
on the container and on every .trp-language-item, which clipped the open
dropdown so the second language could never be seen or clicked. */
.bb-lang-switcher .trp-shortcode-switcher__wrapper,
.bb-lang-switcher .trp-language-switcher {
width: auto;
min-width: 0;
padding: 0;
margin: 0;
}
.bb-lang-switcher .trp-current-language-item__wrapper {
height: 40px;
display: flex;
align-items: center;
}
.bb-lang-switcher .trp-language-item {
padding-block: 6px;
padding-inline: 8px;
display: flex;
align-items: center;
gap: 5px;
border: 0;
background: none;
}
.bb-lang-switcher .trp-current-language-item__wrapper .trp-language-item {
padding-block: 0;
height: 40px;
}
/* Match the neighbouring tools: same size, same weight. */
.bb-lang-switcher .trp-language-item-name {
font-size: var(--wd-header-el-font-size, 13px);
font-weight: var(--wd-header-el-font-weight, 600);
text-transform: uppercase;
line-height: 1;
color: inherit;
}
/* The theme's generated settings stylesheet emits every font variable as
`"Montserrat", "Cairo", Arial, Helvetica, sans-serif` — Montserrat is its own
default and the typography options are unset (§6i), so nothing we do in the
dashboard changes it. Overriding the VARIABLES here catches every rule the
theme writes against them, with no per-selector CSS.
`:root:root` is (0,2,0) so it beats the theme's own `:root` block, which is
printed inline AFTER this stylesheet.
THE LIST MUST BE COMPLETE. Measured on staging 2026-08-14: `--wd-title-font`
was missing from it, so every `h2` still resolved to
`Montserrat, Cairo, Arial…`. With Montserrat no longer downloaded, Latin
characters and digits inside headings fell through to ARIAL while the body ran
in Cairo — a worse split than the one the Cairo switch was meant to fix. If the
theme ever adds another `--wd-*-font`, it belongs here too. */
:root:root,
html:root .wd-popup,
html:root .mfp-wrap {
--wd-text-font: var(--bb-font-stack);
--wd-title-font: var(--bb-font-stack);
--wd-primary-font: var(--bb-font-stack);
--wd-secondary-font: var(--bb-font-stack);
--wd-alternative-font: var(--bb-font-stack);
--wd-widget-title-font: var(--bb-font-stack);
--wd-entities-title-font: var(--bb-font-stack);
--wd-header-el-font: var(--bb-font-stack);
--wd-nav-font: var(--bb-font-stack);
}
/* ---------------------------------------------------------------------------
Mobile menu submenu arrows in RTL
The chevron is an icon-font glyph (mod-nav-opener.css: .wd-nav-opener::after,
font-family: woodmart-font) that always points right. Its POSITION already
mirrors correctly under RTL (opener x0, link x50), so only the glyph itself
needs flipping. The expanded state rotates 90deg to point down, which reads
the same in both directions, so it is left alone.
--------------------------------------------------------------------------- */
[dir="rtl"] .mobile-nav .wd-nav-opener::after {
transform: scaleX(-1);
}
[dir="rtl"] .mobile-nav .wd-nav-opener.wd-active::after {
transform: rotate(90deg);
}
/* ---------------------------------------------------------------------------
Front page: hero sits flush under the header.
`.wd-content-layout { padding-block: 40px }` (style.css:5758) is the theme's
global page gutter, applied to every page. The front page opens with a
full-bleed stretched slider, so that 40px reads as a white band between the
header and the hero.
This mirrors the theme's OWN idiom for flush content —
`.wd-header-overlap:where(:not(.single-product)) .wd-content-layout:first-child
{ padding-top: 0 }` (style.css:4176) — but scoped to the front page instead of
borrowing the overlap class, which would also pull the header on top of the
hero. Bottom padding is untouched, and no other page is affected.
--------------------------------------------------------------------------- */
.home .wd-content-layout:first-child {
padding-top: 0;
}
/* ---------------------------------------------------------------------------
Full-bleed hero: cancel the container gutter.
`.wd-slider[class*="wd-section-stretch"]` sets
`--wd-width: calc(100vw - var(--wd-scroll-w) - ...)` (style.css:9206), i.e. the
full viewport width. The margin that pulls it back over the container's 15px
side padding lives on `.wd-slider.wd-section-stretch-content`
(style.css:9209) — a class the theme only adds on the WPBakery path. On
Gutenberg the width lands with no offset, so measured at 1440 the hero ran
-15 -> 1410 inside a 1425 viewport: 15px of bare page down the right edge.
Same declaration the theme uses, applied to the Gutenberg case only. Logical
margins, so it holds in both RTL and LTR.
--------------------------------------------------------------------------- */
.wd-slider.wd-section-stretch:not(.wd-section-stretch-content) {
/* The theme sets width to the full viewport via --wd-width; `auto` margins
centre that over the container whatever the container width is. A fixed
-15px was tied to the old full-width container and left the hero 52px off
centre once the container became 1320. */
/* Centre the full-viewport width over whatever the container width is:
(container - viewport) / 2 is the negative pull needed on each side.
`auto` does not centre here, so it is stated explicitly. */
margin-inline: calc((100% - var(--wd-width, 100vw)) / 2);
}
/* ---------------------------------------------------------------------------
Hero slide typography and layout.
The slide copy previously carried class names that matched no rule anywhere,
so it rendered as raw body text at one size on every viewport. These are the
sizes agreed for the responsive scale. Breakpoints follow the theme's own:
1024px (tablet) and 768.98px (mobile).
--------------------------------------------------------------------------- */
/* The copy must sit on the image's clean half — the INLINE START (right in RTL,
left in LTR). `margin-inline-start: auto` would push the box to the inline END,
i.e. over the product. The auto goes on the END side. */
.wd-slide-inner {
max-width: 500px;
margin-inline-start: 0;
margin-inline-end: auto;
text-align: start;
}
.wd-slide-label {
margin-bottom: 12px;
color: var(--wd-primary-color, #d4076e);
font-size: var(--bb-fs-hero-eyebrow);
font-weight: 600;
letter-spacing: .08em;
}
.wd-slide-title {
margin-bottom: 18px;
color: #1d1d1d;
font-size: var(--bb-fs-hero-title);
font-weight: 700;
line-height: 1.2;
}
.wd-slide-sub {
margin-bottom: 28px;
max-width: 42ch;
color: #4a4a4a;
font-size: var(--bb-fs-hero-body);
line-height: 1.7;
}
.wd-slide-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 0;
}
.wd-slide-cta .btn {
font-size: 15px;
}
/* Sizes are NOT restated here — they come from the tokens, which already carry
their own breakpoints. Only the spacing and width that genuinely differ. */
@media (max-width: 1024px) {
.wd-slide-inner { max-width: 420px; }
.wd-slide-sub { margin-bottom: 22px; }
.wd-slide-cta .btn { font-size: var(--bb-fs-small); }
}
@media (max-width: 768.98px) {
/* Was 100%, so a line ran the full 390 and the copy sat over the busiest part
of the photo. A measured cap keeps the line length readable and leaves the
product visible beside it. */
.wd-slide-inner { max-width: 78%; }
.wd-slide-title { margin-bottom: 12px; }
.wd-slide-label { margin-bottom: 8px; }
.wd-slide-sub { margin-bottom: 18px; line-height: 1.6; }
}
/* Slide copy sat flush against the container edge on desktop. Logical padding so
it holds in both directions; only above the theme's 1024px breakpoint, since the
mobile hero already uses the full width. */
@media (min-width: 1025px) {
.wd-slide-inner {
padding-inline: 40px;
max-width: 580px;
}
}
/* ---------------------------------------------------------------------------
Footer on mobile: EVERYTHING centred (owner request 2026-08-09).
This rule started life covering only the logo column, because columns 2-4 are
collapsed into accordions by the theme's own `collapse_footer_widgets` option
and their headings read acceptably at the inline start. The owner wants the
whole footer centred on a phone, so the scope widens here rather than a second
block being added beside it.
The accordion heading needs `justify-content` as well as `text-align`: the
theme lays it out as a flex row (title + chevron), so text-align alone leaves
the title pinned to the start with the chevron pushed away from it.
Scoped to the theme's own mobile breakpoint (768.98px).
--------------------------------------------------------------------------- */
@media (max-width: 768.98px) {
.wd-footer .footer-column,
.wd-footer .footer-column .wd-widget {
text-align: center;
}
.wd-footer .footer-column img {
margin-inline: auto;
}
.wd-footer .footer-column p,
.wd-footer .footer-column ul {
margin-inline: auto;
}
/* Accordion header: centre the title without losing the chevron, which the
theme absolutely positions at the inline end. */
.wd-footer .footer-column .widget-title {
justify-content: center;
text-align: center;
}
.wd-footer .footer-column .wd-widget li {
text-align: center;
}
}
/* ---------------------------------------------------------------------------
SCOPE: every `.wd-products-element` rule in this file describes the VERTICAL
product card (loop layout «BB Product Card»).
They were written unscoped, and `.wd-products-element` matches EVERY products
element on the site — so when the compact «BB Mini Product Card» arrived for the
product page's best-seller row, these rules hijacked it twice: the add-to-cart
was dragged 52px above its own box by a `margin-top: -52px` meant to sit it on a
photo, and then forced into a 40px circle. Both were debugged as if they were
theme bugs.
`:not(.wd-bbpdpbst)` excludes that one block by its own generated class rather
than by layout id, because ids differ between local and staging.
IF A SECOND non-standard card block is ever added, it must be added to these
exclusions — or, better, these rules moved onto a positive class that only the
vertical card carries.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Product card add-to-cart: white label on the brand fill, simple rounded edge.
The theme drives button colours through --btn-* custom properties, so setting
`color`/`background` directly loses to its own rules. Setting the variables is
the layer the theme actually reads.
--------------------------------------------------------------------------- */
.wd-product .wd-add-btn > a,
.wd-product .add_to_cart_button {
--btn-color: #fff;
--btn-color-hover: #fff;
--btn-bgcolor: var(--wd-primary-color, #d4076e);
--btn-bgcolor-hover: #bc0661;
--btn-brd-color: var(--wd-primary-color, #d4076e);
--btn-brd-color-hover: #bc0661;
--btn-brd-radius: 8px;
color: #fff;
border-radius: 8px;
}
/* ---------------------------------------------------------------------------
Carousel scrollbar in the brand colour.
Measured element names: `.wd-nav-scroll` is the track, `.wd-nav-scroll-drag`
the thumb (its own background is transparent, so the colour goes on the drag
element itself).
--------------------------------------------------------------------------- */
.wd-carousel-container .wd-nav-scroll-drag,
.wd-nav-scroll .wd-nav-scroll-drag {
background-color: var(--wd-primary-color, #d4076e);
border-radius: 4px;
}
.wd-carousel-container .wd-nav-scroll {
background-color: rgba(212, 7, 110, .12);
border-radius: 4px;
}
/* Section header: title opposite an "all products" link, as the reference does. */
.bb-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
/* The section heading was the ONE heading on the page that did not scale — 24px
at 1440 and 24px at 390, while the hero, the card and the category tile all
stepped down. The token carries the steps. */
.bb-section-head .bb-section-title {
margin: 0;
font-size: var(--bb-fs-section-title);
}
.bb-section-link {
color: var(--wd-primary-color, #d4076e);
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
Wishlist heart: SOLID fill, white by default, brand pink once in the wishlist.
The theme draws the heart as an icon-font glyph (\f106 on
.wd-action-icon::before, woodmart-font) which is an OUTLINE — a font glyph
cannot be filled by colour alone. It also reveals a SECOND glyph beside it
when added (.wd-check-icon, \f107), which appeared as the pink blob next to
the card once the icons were coloured.
Both glyphs are suppressed and the heart is painted with a mask instead, so
the shape is genuinely filled and its colour is just background-color.
--------------------------------------------------------------------------- */
:root {
--bb-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21s-7.5-4.7-7.5-10A4.5 4.5 0 0 1 12 8.2 4.5 4.5 0 0 1 19.5 11c0 5.3-7.5 10-7.5 10z'/%3E%3C/svg%3E");
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-wishlist-btn .wd-check-icon {
display: none !important;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-wishlist-btn .wd-action-icon::before {
content: none !important;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-wishlist-btn .wd-action-icon {
display: block;
width: 22px;
height: 22px;
background-color: #fff;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
transition: background-color .2s ease;
-webkit-mask: var(--bb-heart) center / contain no-repeat;
mask: var(--bb-heart) center / contain no-repeat;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-wishlist-btn a.added .wd-action-icon,
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-wishlist-btn a:hover .wd-action-icon {
background-color: var(--wd-primary-color, #d4076e);
}
/* ---------------------------------------------------------------------------
Product card to the owner's sketch.
image : heart top-start, sale badge top-end, add-to-cart ICON on the photo
(revealed on hover on desktop, always visible on touch)
below : 3-cell feature icon row, then title, then price
--------------------------------------------------------------------------- */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-product-wrapper {
position: relative;
background: #fff;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 12px;
overflow: hidden;
}
/* Overlays on the photo */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-wishlist-btn,
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-labels {
position: absolute;
z-index: 3;
margin: 0;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-wishlist-btn { top: 12px; inset-inline-start: 12px; }
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-labels { top: 12px; inset-inline-end: 12px; }
/* Add-to-cart icon: bottom of the photo, on the same side as the heart.
The GLYPH colour is not the anchor's `color` — the theme paints it through its
own variables (css/parts/base.css):
.wd-action-btn { --wd-action-color: var(--color-gray-800);
--wd-action-color-hover: var(--color-gray-500); }
.wd-action-btn > a:hover .wd-action-icon:before {
color: var(--wd-action-icon-color-hover, var(--wd-action-color-hover)); }
So setting `color: #fff` on the never reached the icon and it went GREY on
hover, from --color-gray-500. Setting the theme's own two variables is the fix;
no override, nothing to out-specify. */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-add-btn {
--wd-action-icon-color: var(--wd-primary-color, #d4076e);
--wd-action-icon-color-hover: #fff;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-add-btn > a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border-radius: 50%;
background-color: #fff;
color: var(--wd-primary-color, #d4076e);
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-add-btn > a:hover {
background-color: var(--wd-primary-color, #d4076e);
color: #fff;
}
/* Hidden until the CARD is hovered, desktop only.
This rule previously set opacity:1 on hover with no base opacity:0 anywhere, so
the button was simply always visible. It also targeted `.wd-add-btn`, while the
positioned element is the WRAPPER.
`hover: hover` follows the theme's own convention (woo-product-loop-base.css)
so touch devices, which cannot hover, keep the button visible. */
@media (hover: hover) and (min-width: 1025px) {
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-add-btn-wrapp {
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product:hover .wd-add-btn-wrapp {
opacity: 1;
visibility: visible;
}
}
/* Feature icons: one row of equal cells, directly under the photo. */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-attrs {
display: flex;
margin: 0;
border-top: 1px solid rgba(0, 0, 0, .08);
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-attrs table,
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-attrs tbody,
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-attrs tr {
display: flex;
width: 100%;
margin: 0;
border: 0;
}
/* Cell geometry lives in the single feature-strip block further down; this file
must not set it twice. */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-title { margin: 12px 14px 6px; }
.wd-products-element:not(.wd-bbpdpbst) .wd-product .price { display: block; margin: 0 14px 14px; }
/* ---------------------------------------------------------------------------
Equal-height cards.
Products carry different numbers of features (some none at all) and titles
wrap to one or two lines, so the cards ended up different heights in the same
row. Stretch every card to the tallest in the row and let the content column
distribute, with the title area reserving two lines so the price always sits
on the same baseline across the row.
--------------------------------------------------------------------------- */
.wd-products-element:not(.wd-bbpdpbst) .wd-carousel-item,
.wd-products-element:not(.wd-bbpdpbst) .wd-product {
display: flex;
height: 100%;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-product-wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
/* Price pinned to the bottom so every card ends on the same line. */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .price {
margin-top: auto;
}
/* The carousel track sizes each item to its own content, so a card with no
feature row came out ~56px shorter. Stretch the track and reserve the row
even when the block renders nothing for that product. */
.wd-products-element:not(.wd-bbpdpbst) .wd-carousel-wrap {
align-items: stretch;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-carousel-item {
height: auto;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-product-wrapper::after {
content: "";
display: block;
flex: 0 0 0;
}
/* A card with no features still has to reserve the strip, or its price lands on
a different line from the rest of the row. 33px = the measured height of a
filled strip (6px padding each side + one 21px line). */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-attrs:empty,
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-product-wrapper > .wd-loop-prod-title:first-of-type {
min-height: 33px;
}
/* The separator is a real element (`.wd-term-sep`), so it is hidden directly in
the feature-strip block below. The old font-size:0 / letter-spacing:-1em
workaround was written before the markup was dumped; it is gone because it
fought the size the terms actually need. */
/* ---------------------------------------------------------------------------
Add-to-cart icon: bottom-start of the PHOTO, per the sketch.
Anchored to the thumbnail rather than the card so it never drifts onto the
text block when the card grows.
--------------------------------------------------------------------------- */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-thumb { position: relative; }
/* Product labels are NOT styled here. Woodmart owns them end to end through
Theme Settings > Product labels — shape, percentage-vs-word, and a background
and text colour per label type (inc/admin/settings/shop.php:667-916). The
values are written by build/set-product-labels.php. Colouring them from this
file would out-specify the options and make the dashboard controls dead. */
/* ---------------------------------------------------------------------------
Categories strip: grey band across the full width, white circles.
--------------------------------------------------------------------------- */
.wd-cats-element {
position: relative;
padding-block: 36px;
}
.wd-cats-element::before {
/* --wd-width is not defined on this element, so the band was stuck at the
container width. Bleed from the element's own centre to the viewport edges
instead; 100vw includes the scrollbar, so it is trimmed off. */
content: "";
position: absolute;
inset-block: 0;
left: 50%;
width: calc(100vw - var(--wd-scroll-w, 0px));
transform: translateX(-50%);
background: var(--bb-color-band);
z-index: 0;
}
.wd-cats-element > * { position: relative; z-index: 1; }
.wd-cats-element .wd-cat-thumb {
background: #fff;
border-radius: 50%;
overflow: hidden;
}
/* Item titles are NOT sized here. The category tile title is owned by Theme
Settings > Advanced typography (`product_category_title`, which emits
`html .product.wd-cat .wd-entities-title` — specificity 0,3,1, so a child rule
would have to out-specify a live dashboard control to win). The product card
title takes the theme's own loop size. build/set-typography.php holds the
values. */
/* Gap between the hero and the first section below it.
This rule used to zero the margin, from when the grey CATEGORIES band followed
the hero and its own padding supplied the gap. Best-sellers sits there now —
a white section with no padding of its own — so the slider carries the gap.
Same 40/24/16 rhythm the section blocks use in build-home.php. */
.home .wd-slider { margin-bottom: 40px !important; }
@media (max-width: 1024px) {
.home .wd-slider { margin-bottom: 24px !important; }
}
@media (max-width: 768.98px) {
.home .wd-slider { margin-bottom: 16px !important; }
}
/* Bigger wishlist heart. */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-wishlist-btn .wd-action-icon {
width: 30px;
height: 30px;
}
/* Photo bleeds to the card edges — no white gutter above or beside it. */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-thumb {
margin: 0 !important;
padding: 0 !important;
border-radius: 0;
overflow: hidden;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-thumb img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-product-wrapper > *:first-child {
margin-top: 0;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-product-wrapper { position: relative; }
/* Card content order. The loop layout emits the blocks in its own sequence; this
places the photo first, then the cart button (order 2, set with the button),
then features, title, price. */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-thumb { order: 1; }
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-attrs { order: 3; }
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-title { order: 4; }
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-price,
.wd-products-element:not(.wd-bbpdpbst) .wd-product .price { order: 5; }
/* ---------------------------------------------------------------------------
FEATURE STRIP — the single place this row is styled.
Real markup, dumped from the rendered card:
| X
, … |
All three terms sit in ONE , so the equal cells come from a grid on the
cell and the divider goes on the term, not on a cell border. `justify-items`
must stay `stretch`: with `center` the term shrinks to its text and the
dividers land at uneven gaps.
--------------------------------------------------------------------------- */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-loop-prod-attrs td {
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: center;
justify-items: stretch;
width: 100%;
padding: 6px 0 !important;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-term {
display: flex;
align-items: center;
justify-content: center;
padding-inline: 6px;
text-align: center;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-term + .wd-term {
border-inline-start: 1px solid rgba(0, 0, 0, .1);
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-term-name {
font-size: 11px;
line-height: 1.3;
color: #6a6a6a;
white-space: nowrap;
}
/* The separator is a real element, so it is hidden as one — no font-size:0
trickery competing with the size the terms need. */
/* The PDP feature row uses the same taxonomy through `wd/sp-additional-info-table`,
whose separator is the same real element — one rule governs the property in
both places rather than two rules setting it (CLAUDE.md §6e). */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-term-sep,
.wd-single-attrs .wd-term-sep {
display: none;
}
/* ---------------------------------------------------------------------------
SCOPE NOTE for the card rules below and the hover rule above.
These describe the VERTICAL product card (loop layout «BB Product Card»): the
add-to-cart is lifted onto the photo's lower edge with `margin-top: -52px`.
`.wd-products-element` alone matched every products element on the site,
including the product page's best-seller row, which uses the compact
horizontal card «BB Mini Product Card». There the button is a normal child of
a text column, so the -52px dragged it 52px ABOVE the card — measured at 390,
button top 343 against a card top of 395, i.e. invisible outside the card.
`:not(.wd-bbpdpbst)` excludes that one block by its own generated class rather
than by layout id, so it holds on staging and live where post ids differ.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Add-to-cart: only the WRAPPER is positioned. An earlier rule also made the
inner .wd-add-btn absolute, which collapsed the wrapper to 0x0 so nothing was
clickable or visible on hover.
--------------------------------------------------------------------------- */
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-add-btn {
position: static !important;
margin: 0;
}
.wd-products-element:not(.wd-bbpdpbst) .wd-product .wd-add-btn-wrapp {
/* Bottom corner of the PHOTO. The button is a SIBLING of the thumbnail, so it
cannot be positioned against it, and container-type on the card collapsed
the thumbnail. It therefore stays IN FLOW, ordered right after the photo,
with a negative top margin lifting it onto the photo's lower edge; the
bottom margin cancels the shift so nothing below moves. */
position: static;
order: 2;
align-self: flex-start;
width: 40px;
height: 40px;
margin: -52px 12px 12px 12px;
z-index: 5;
}
/* ---------------------------------------------------------------------------
TABBED PRODUCTS SECTION (بكجات / وصل حديثاً)
The element itself is the theme's own `[products_tabs]`; only three things
are not expressible through its attributes.
Sizes and gaps come from the tokens at the top of this file — see
Docs/design-standard.md.
--------------------------------------------------------------------------- */
/* 1. Section rhythm is NOT set here.
The gap above this section is carried by the categories block's own
`marginBottom` attribute in build/build-home.php — a theme control, per
Docs/design-standard.md §1.
Measured why: the theme's generated settings stylesheet is printed inline in
wp_head, i.e. AFTER this file, and already sets a margin on content children.
A child rule at the same specificity loses on order, and beating it would mean
out-specifying a live dashboard control — exactly what the standard forbids. */
/* 2. Mobile shows SIX products, desktop shows ten.
`items_per_page` is a single value on the shortcode, so the query returns 10
at every width and the tail is hidden below the theme's mobile breakpoint.
Owner asked for 6 on mobile (2 across x 3 rows); the button underneath leads
to the full collection. */
@media (max-width: 768.98px) {
.wd-tab-content .products > .wd-product:nth-child(n+7) {
display: none;
}
}
/* 3. One button under the grid, pointing at the ACTIVE tab's collection.
Both links are in the markup and CSS reveals the one whose tab the THEME has
marked `.wd-active` (inc/shortcodes/products-tabs.php:135). `:has()` reads
that state directly, so there is no JavaScript re-implementing tab state and
nothing to fall out of step when the theme updates. */
.bb-tabs-cta {
display: flex;
justify-content: center;
margin-top: 28px;
}
/* Carries the section gap down to the About band. Set on this element rather
than as a margin-top on `.bb-about`, because the theme's generated settings
stylesheet is printed AFTER this file and already puts a 20px bottom margin on
content children. That rule is the same specificity as a two-class selector
here, so it wins on order alone — three classes is what actually takes. */
.home .entry-content .bb-tabs-cta {
margin-bottom: var(--bb-gap-section);
}
.bb-tabs-cta a {
display: none;
}
.entry-content:has(.products-tabs-title li:nth-child(1).wd-active) .bb-tabs-cta a[data-bb-tab="1"],
.entry-content:has(.products-tabs-title li:nth-child(2).wd-active) .bb-tabs-cta a[data-bb-tab="2"] {
display: inline-flex;
}
/* ---------------------------------------------------------------------------
ABOUT SECTION — قصّة بيلا بيوتي
Layout only. Every piece of content is a theme element (woodmart_title,
woodmart_button) or a core image block; nothing here restyles their internals.
Sizes and gaps come from the tokens — see Docs/design-standard.md.
--------------------------------------------------------------------------- */
.bb-about {
gap: 40px;
}
/* The reference centres the copy against the image. `align-items` on the row is
NOT the way to get it here: probed at (0,1,0), (0,2,0) and (0,2,1) it still
computes `normal`, so only !important would win — and that would be a wall
against a rule I could not identify. Centring the text inside its own column
reaches the same result on a class nothing else touches. */
.bb-about-text {
display: flex;
flex-direction: column;
justify-content: center;
}
/* The picture is a 630x944 PORTRAIT at the `large` size, so left alone it grew
the column to 945px and dwarfed the copy. Cap it and crop, rather than ship a
differently-cropped file. */
.bb-about .bb-about-media img {
display: block;
width: 100%;
height: 420px;
object-fit: cover;
border-radius: 8px;
}
.bb-about .bb-about-media figure {
margin: 0;
}
/* The two buttons sit side by side, as the reference has them. The theme wraps
each one in its own `.wd-button-wrapper`, which computes `display: block`
here even with the element's own `inline-element` class — and the text column
is a column-flex box, so each wrapper would take a full row. Both are inside
one `.bb-about-cta` in the markup, and that wrapper is the flex row. */
.bb-about-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Alignment is LOGICAL, so it mirrors with the document direction instead of
being pinned to a physical side. The theme's own `align` attribute emits
`text-left`/`text-right`, which put the Arabic copy on the wrong edge and
would do the same to the English side of the TranslatePress switcher — so the
attribute is deliberately not passed and this is the single source. */
.bb-about-text,
.bb-about-text .title-wrapper,
.bb-about-text .title-subtitle,
.bb-about-text .title-after_title {
text-align: start;
}
.bb-about-text .bb-about-cta {
justify-content: flex-start;
}
/* The title element ships its own bottom spacing; this only separates the copy
block from the buttons. */
.bb-about-text .title-wrapper {
margin-bottom: 24px;
}
@media (max-width: 768.98px) {
.bb-about {
gap: 20px;
}
.bb-about .bb-about-media img {
height: 260px;
}
/* Image first on a phone (owner request). The columns stack in source order,
which puts the copy on top; `order` flips them without touching the markup,
so the desktop two-column reading order stays as the reference has it. */
.bb-about .bb-about-media {
order: 1;
}
.bb-about .bb-about-text {
order: 2;
}
}
/* ---------------------------------------------------------------------------
ANNOUNCEMENT BAR — the marquee strip above the header.
The element, its animation and its colour are all the theme's own: the
`wd/marquee` block inside a `cms_block`, placed in the header builder's
`top-bar` row, whose background is a row param (build/build-announcement-bar.php).
Only two things are not expressible there.
--------------------------------------------------------------------------- */
/* 1. FULL WIDTH. The header row wraps its columns in `.container`, which caps the
strip at 1320px and leaves the ends of the loop visible mid-row. The reference
runs edge to edge. There is no per-row full-width param — the header's own
`full_width` setting is header-wide and would also stretch the main nav — so
the cap is lifted on this row only. */
.whb-top-bar > .container {
max-width: 100%;
padding-inline: 0;
}
/* 2. Item typography and colour.
The row's `color_scheme: light` is the theme's light-TEXT scheme, but it only
paints `.wd-header-text` — `.whb-color-light .wd-header-text { --wd-text-color:
rgba(255,255,255,.8) }`. This bar is an `.wd-header-html` element, which that
rule never reaches, so the items stayed at the body grey: measured 1.7:1
against the brand fill, i.e. unreadable. Setting the theme's own variable
carries the colour to everything inside the block. */
.whb-top-bar .wd-header-html {
--wd-text-color: #fff;
color: #fff;
}
.whb-top-bar .wd-marquee-item {
color: #fff;
padding-inline: 28px;
font-size: var(--bb-fs-small);
font-weight: 600;
white-space: nowrap;
}
/* Separator between items, so the loop reads as a list rather than a run-on
sentence. Logical side, so it mirrors with the document direction. */
.whb-top-bar .wd-marquee-item + .wd-marquee-item {
border-inline-start: 1px solid rgba(255, 255, 255, .35);
}
/* ---------------------------------------------------------------------------
BEFORE / AFTER — شاهدي الفرق بنفسك
The slider itself is the theme's own `woodmart_compare_images`; its handle,
drag behaviour and clipping all come from the theme. Only the framing is here.
Sizes and gaps from the tokens — Docs/design-standard.md.
--------------------------------------------------------------------------- */
.bb-ba {
position: relative;
max-width: 600px;
margin-inline: auto;
margin-top: 24px;
border-radius: 10px;
overflow: hidden;
}
/* Labels are real elements, not CSS `content`, so they stay translatable.
Logical sides, so they mirror with the document direction. */
.bb-ba-label {
position: absolute;
top: 14px;
z-index: 3;
padding: 6px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, .92);
color: #1d1d1d;
font-size: var(--bb-fs-small);
font-weight: 600;
line-height: 1.4;
pointer-events: none;
}
/* PHYSICAL left/right on purpose — the only place in this file that is.
The compare element clips the second image with a physical inset, so the
"before" photo is on the LEFT in both RTL and LTR. Logical properties put
«قبل» over the after-half on the Arabic side — seen in the render. These
labels track the images, not the reading direction. */
.bb-ba-label-before { left: 14px; }
.bb-ba-label-after { right: 14px; }
.bb-ba .wd-compare-img-wrapp,
.bb-ba .wd-compare-img {
margin: 0;
}
.bb-ba img {
display: block;
width: 100%;
height: auto;
}
/* The owner's own disclaimer. Small and quiet, but it must stay while the
photographs are placeholders. */
.bb-ba-note {
margin-top: 12px;
color: #6a6a6a;
font-size: var(--bb-fs-small);
text-align: center;
}
@media (max-width: 768.98px) {
.bb-ba {
max-width: 100%;
margin-top: 16px;
}
}
/* ---------------------------------------------------------------------------
Announcement bar: smooth scrolling.
TWO causes, both measured on the rendered page.
1. THEME BUG — a typo in Woodmart's own keyframe:
@keyframes wd-MarqueeScrolling {
from { transform: translat3d(0, 0, 0) } <- missing the "e"
to { transform: translate3d(calc(-100% - var(--wd-marquee-gap)),0,0) }
}
(css/parts/el-marquee.css). The misspelled function makes the whole
declaration invalid, so the browser drops it — the CSSOM reports the first
step as an EMPTY `0% { }`. With no explicit start the animation interpolates
from whatever transform the element currently has, and every loop restart
hitches instead of continuing cleanly.
Corrected with our own keyframe rather than by editing the parent theme.
Same maths, both ends explicit. Re-check after a Woodmart update: if they
fix the typo, this can go.
2. SPEED — the default `--wd-marquee-speed: 5s` moves a full content width in
five seconds. Measured 1425px of content, i.e. ~285px per second, which
reads as frantic rather than as a calm strip. The theme exposes the speed as
a custom property, so this is set through its own variable: 30s is ~48px/s,
an easy reading pace.
--------------------------------------------------------------------------- */
@keyframes bb-marquee-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-100% - var(--wd-marquee-gap)), 0, 0); }
}
/* 3. RTL — THE THEME'S RTL STYLESHEET DOUBLE-FLIPS THE ITEMS.
`css/parts/el-marquee-rtl.css` is a machine-mirrored copy of the LTR part,
and the mirroring turned `flex-direction: row` into `row-reverse` on BOTH
`.wd-marquee` and `.wd-marquee-content`. On an `rtl` document `row` ALREADY
lays a flex line right-to-left, so the extra `row-reverse` flips it back:
the four items rendered LEFT to RIGHT and read out of order — measured at
1440 as خبرة(-227) شحن(100) دعمٌ(463) دفع(796), i.e. ascending x in source
order, the opposite of Arabic reading order. The separator rules land on the
wrong side for the same reason.
Only the ITEM row is corrected. `.wd-marquee` itself must stay `row-reverse`:
that is what puts the theme's duplicated second `.wd-marquee-content` on the
side the loop travels towards, and it is what keeps the loop seamless. */
.whb-top-bar .wd-marquee-content {
flex-direction: row;
}
/* 4. TRAVEL DIRECTION. A ticker has to move so the reader meets the words in
order. Latin tickers move LEFT: the first word enters at the right edge and
is read first. The Arabic mirror moves RIGHT — the first item is the
rightmost, so it must be the first to cross the reading edge. The strip ran
leftwards, i.e. it presented the last item first.
Set through the theme's OWN variable, which its animation shorthand already
reads (`animation: … var(--wd-marquee-direction) …`), so nothing is
re-declared and a Woodmart update keeps control of the rest. */
.whb-top-bar .wd-marquee {
--wd-marquee-direction: reverse;
/* SPEED. `--wd-marquee-speed` is the time to travel ONE content width, so it
has to track the content, not the viewport. The strip now carries the four
benefits three times over (~1910px, see build-announcement-bar.php), and 45s
puts that at ~42px/s — the same reading pace the 30s/1295px version had.
One value for every width: the content width is intrinsic, and it exceeds
even a 1920 container, so it is no longer stretched to fit the screen. */
--wd-marquee-speed: 45s;
}
.whb-top-bar .wd-marquee-content {
animation-name: bb-marquee-scroll;
will-change: transform;
}
/* Respect a reduced-motion preference — a looping strip is exactly the kind of
movement that setting exists for. */
@media (prefers-reduced-motion: reduce) {
.whb-top-bar .wd-marquee-content {
animation: none;
}
.whb-top-bar .wd-marquee-content:nth-child(2) {
display: none;
}
}
/* ---------------------------------------------------------------------------
SHOPPABLE UGC — من عميلاتنا
Layout only. The carousel, the play button and the lightbox playback are all
the theme's own elements (nested carousel + video); nothing here re-implements
them. References: havess.com.au, breatheeveryday.com.
--------------------------------------------------------------------------- */
.bb-ugc {
margin-top: 24px;
}
/* Section gap below the UGC row.
Three classes, because the theme rule that governs margins on content children
needs that to beat (see the tabs CTA note above).
The +15px is the carousel offset documented in Docs/design-standard.md §3:
`.wd-carousel-inner` carries `margin-bottom: -15px`, so a carousel container's
box ends 15px ABOVE its visible content and a plain 40px lands as 25px. Measured
both ways before adding it. */
.home .entry-content .bb-ugc {
margin-bottom: calc(var(--bb-gap-section) + 15px);
}
/* 9:16 card, matching the vertical clips (480x848 / 720x1280). */
.bb-ugc-card {
position: relative;
aspect-ratio: 9 / 16;
border-radius: 12px;
overflow: hidden;
background: #f4f4f4;
}
/* The theme's video element and its poster fill the card.
The overlay class is `.wd-el-video-overlay` (video.php:299) — an earlier guess
at `.wd-video-overlay` matched nothing, so the poster sat at its natural
height and left a grey band across the bottom third of the card. */
.bb-ugc-card .wd-video,
.bb-ugc-card .wd-el-video,
.bb-ugc-card .wd-el-video-overlay {
position: absolute;
inset: 0;
width: 100%;
/* !important is needed and is safe here. The theme fixes `.wd-el-video` at
400px, so in a 552px card the poster left a grey band across the bottom
third. Probed the ladder: one class, two classes and an id-scoped rule all
still computed 400px — only !important takes. This is a hardcoded stylesheet
value with no Theme Settings control behind it, so overriding it breaks no
dashboard option (cf. Docs/design-standard.md §1), and it is scoped to this
one section. */
height: 100% !important;
margin: 0;
}
.bb-ugc-card .wd-el-video-overlay img {
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
}
/* Caption sits above the product card, over a gradient so it stays legible on
any frame. */
.bb-ugc-caption {
position: absolute;
inset-inline: 12px;
bottom: 78px;
z-index: 3;
color: #fff;
font-size: var(--bb-fs-small);
font-weight: 600;
text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
pointer-events: none;
}
.bb-ugc-card::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 2;
height: 45%;
background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
pointer-events: none;
}
/* Product card pinned to the bottom of the clip, as both references have it. */
.bb-ugc-product {
position: absolute;
inset-inline: 10px;
bottom: 10px;
z-index: 4;
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 10px;
background: rgba(255, 255, 255, .95);
text-decoration: none;
}
.bb-ugc-product-thumb img {
display: block;
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: cover;
}
.bb-ugc-product-meta {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.bb-ugc-product-title {
color: #1d1d1d;
font-size: 13px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bb-ugc-product-price {
color: var(--wd-primary-color, #d4076e);
font-size: 12px;
font-weight: 600;
}
/* The theme prints both the old and the current price; the strike-through one is
noise at this size. */
.bb-ugc-product-price del {
display: none;
}
.bb-ugc-product-price ins {
text-decoration: none;
}
/* ---------------------------------------------------------------------------
UGC lightbox: fit the clip to the viewport.
The clips are vertical (480x848 and 720x1280). The theme's video popup sizes
to the video's own dimensions, so a 1280-tall clip opened on a 900-tall
window ran off the top and bottom — head and hands cropped out of frame.
Constrain to the viewport and let the aspect ratio do the rest.
--------------------------------------------------------------------------- */
.wd-video-popup video,
.mfp-content .wd-video-popup video {
max-width: min(92vw, 520px);
max-height: 88vh;
width: auto;
height: auto;
margin-inline: auto;
display: block;
border-radius: 8px;
}
.wd-video-popup {
display: flex;
align-items: center;
justify-content: center;
max-height: 92vh;
background: transparent;
}
/* ---------------------------------------------------------------------------
Product page: "اشتري الآن" gets its own full-width row.
The button is the theme's own (quick-buy/class-main.php:26 injects it on
`woocommerce_after_add_to_cart_button`), so it lands INSIDE `form.cart`, which
is a wrapping flex row. With the block's Stretch control on, the theme gives
both buttons `flex: 1 1 auto` (style.css:24195), so add-to-cart and buy-now
share one line and each ends up half width.
The owner wants buy-now at the END of the section, full width. `flex-basis:
100%` on the wrapping row does exactly that with no `!important` and no other
property touched.
Specificity: the theme's rule is `.wd-btn-design-full form.cart :where(…)` =
0,2,1 — `:where()` contributes nothing. This selector is 0,3,1, so it wins on
its own. No theme option governs this placement, so child CSS is the correct
layer (Docs/design-standard.md §1).
--------------------------------------------------------------------------- */
.wd-single-add-cart form.cart .wd-buy-now-btn {
flex: 1 1 100%;
}
/* ---------------------------------------------------------------------------
Product page: the best-seller card fills its slide.
The row uses one card per view with the compact loop layout «BB Mini Product
Card». Its `.wd-carousel-item` computes to `display: flex`, so the card inside
it is a flex item at the browser default `flex: 0 1 auto` and shrinks to its
own content: measured at 390, a 218px card sitting in a 370px slide, with the
whole row floating in the left half.
The reference does not need this because its slide computes to `display:
block`, where a block-level card fills by itself.
NOT the theme's `wd_stretch_product*` metas — those look like the right switch
but `css/parts/woo-opt-stretch-cont.css` only ever sets `height`, being the
equal-height control for multi-column rows. Verified: the card stayed 218px
with them on.
Scoped to this one block by its own generated class, so no other product
carousel on the site is affected.
--------------------------------------------------------------------------- */
.wd-bbpdpbst .wd-carousel-item > .wd-product {
flex: 1 1 auto;
}
/* ---------------------------------------------------------------------------
Best-seller card: the add-to-cart icon.
The card uses the theme's `icon` style (owner, 2026-08-12: icon only, no label
beside it). The vertical card's circular-button rules a few hundred lines above
are deliberately scoped away from this block, so the icon would otherwise
render as a bare glyph on the text baseline.
Same visual language as the vertical card — a filled brand-pink disc — but
solid rather than white-on-photo, because here it sits on the card background
and not over an image. Colours come from the theme's own action-icon variables
(see the note on the vertical card), so no glyph colour is set directly.
--------------------------------------------------------------------------- */
.wd-bbpdpbst .wd-product .wd-add-btn > a {
--wd-action-icon-color: #fff;
--wd-action-icon-color-hover: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: var(--wd-primary-color, #d4076e);
transition: background-color .25s ease;
}
.wd-bbpdpbst .wd-product .wd-add-btn > a:hover {
background-color: #bc0661; /* brand pink dark — Docs/design-standard.md §4 */
}
/* ---------------------------------------------------------------------------
Product gallery: one fixed frame for every photo.
WooCommerce does not crop the `woocommerce_single` size — only catalog
thumbnails have a cropping setting — so each slide took the height of its own
image. Measured on «البكج الملكي» at 390: slides rendered 240, 1066, 240, 541,
541, 541, 541 and 360px tall, so the whole page below the gallery jumped as the
carousel moved. The theme's `product_slider_auto_height` option is already off;
it governs the carousel, not the images.
Nothing in the theme sets height, aspect-ratio or object-fit on these images
(verified against every loaded stylesheet), so there is no rule to out-specify —
this is the first thing to own the property, at the child-CSS layer the standard
assigns to values no theme option covers.
`.zoomImg` is excluded: it is the magnifier's absolutely-positioned clone, which
the zoom script sizes itself (measured 1066px against a 360px frame). It does not
affect layout, but constraining it would distort the magnification.
Ratio comes from the token, not a number here.
--------------------------------------------------------------------------- */
.woocommerce-product-gallery__image img:not(.zoomImg),
.wd-gallery-thumb .wd-carousel-item img {
aspect-ratio: var(--bb-ratio-product-media);
object-fit: cover;
width: 100%;
height: auto;
}
/* ---------------------------------------------------------------------------
Product page trust badges: stack the icon above the label on mobile.
The three badges are one `wd/container` row of `wd/paragraph` blocks, each an
inline 16px icon followed by its label. At 390 the three labels do not fit on
one line, so the row wrapped 2 + 1 and read as a broken grid.
Below the theme's own 768.98px breakpoint each badge becomes its own column —
icon over label, centred — and the three share the width equally, so they stay
on one line. `flex: 1 1 0` on the paragraphs is what makes the columns equal;
the anonymous text node after the `![]() ` becomes the second flex item on its
own, which is why no extra markup is needed.
Label size uses the existing micro token rather than a new number
(Docs/design-standard.md §2).
--------------------------------------------------------------------------- */
/* Equal columns across the full width at every size, so the row reads as centred
and nothing is left hugging one edge (owner, 2026-08-12). `flex: 1 1 0` gives
the three badges an identical share regardless of label length. */
.wd-bbpdptru {
flex-wrap: nowrap;
}
.wd-bbpdptru .wp-block-wd-paragraph {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1 1 0;
min-width: 0;
text-align: center;
margin: 0;
}
/* Icon size lives here, not inline on the ![]() , so it can differ per breakpoint. */
.wd-bbpdptru img {
width: 34px;
height: 34px;
flex: 0 0 auto;
}
@media (max-width: 768.98px) {
/* Icon above its label: the three labels do not fit on one line at 390, so the
row wrapped 2 + 1 and read as a broken grid. The anonymous text node after the
![]() becomes the second flex item on its own, so no extra markup is needed. */
.wd-bbpdptru .wp-block-wd-paragraph {
flex-direction: column;
justify-content: flex-start;
gap: 6px;
font-size: var(--bb-fs-micro);
line-height: 1.35;
}
.wd-bbpdptru img {
width: 30px;
height: 30px;
}
}
/* ---------------------------------------------------------------------------
Product page feature row: equal columns across the full width.
The block renders one table cell holding all the terms as inline `.wd-term`
spans, so they bunched at the reading edge with the rest of the row empty —
measured at 390, three terms filled 248px of a 360px column, and at 1440 they
used 400 of 625.
The cell and the terms become flex here so each term takes an equal share and
centres its own icon + label. This is presentation of one block instance, which
no theme option covers, so child CSS is the right layer
(Docs/design-standard.md §1) — the icon SIZE stays on the block's own
`termImageWidth` control and is deliberately not set here.
Scoped to this block's generated class, so the shop and card attribute rows are
untouched.
--------------------------------------------------------------------------- */
.wd-bbpdpfea tr {
width: 100%;
}
.wd-bbpdpfea td {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex: 1 1 auto;
width: 100%;
}
.wd-bbpdpfea .wd-term {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 6px;
flex: 1 1 0;
min-width: 0;
text-align: center;
}
.wd-bbpdpfea .wd-term-name {
font-size: var(--bb-fs-micro);
line-height: 1.35;
}
/* ---------------------------------------------------------------------------
Reviews pagination: centred.
The list is paginated at 2 per page (WordPress `page_comments` +
`comments_per_page`, which Woodmart styles as `.woocommerce-pagination`). The
numbers already run right-to-left correctly — «1» rightmost, the next chevron at
the far left pointing left — because the section inherits `dir="rtl"`; measured
at 390: 1 at x341 down to the chevron at x193.
What it lacked was balance: `text-align: start` pinned the row to the reading
edge under a full-width list. Centring is a presentation choice no theme option
covers, so it belongs here (Docs/design-standard.md §1).
--------------------------------------------------------------------------- */
.wd-bbpdprev .woocommerce-pagination {
display: flex;
justify-content: center;
text-align: center;
}
/* ---------------------------------------------------------------------------
Product page: alternating section bands.
Owner, 2026-08-12: "كل السكاشن سايحة على بعض" — every section was transparent on
white, so nothing read as a boundary. Measured before changing anything: seven
sections, all `rgba(0,0,0,0)`, separated by 16px — the same distance as the gaps
INSIDE a section, and two of those collapsed to 5px.
The two long, text-heavy blocks take the band; the product rows stay white. Only
those two, deliberately: strict odd/even alternation breaks on this page because
the up-sells row hides itself on the 29 products with no up-sells set, which
would put two grey bands side by side on some products and not others.
Technique is the one already proven on the home page's categories strip — a
full-bleed `::before` from the element's own centre, since `--wd-width` is not
defined here and the section is inside the 1320px container. Reused rather than
reinvented (CLAUDE.md §6c), and the colour comes from the shared token.
--------------------------------------------------------------------------- */
.wd-bbpdptab,
.wd-bbpdprev {
position: relative;
padding-block: 32px;
}
.wd-bbpdptab::before,
.wd-bbpdprev::before {
content: "";
position: absolute;
inset-block: 0;
left: 50%;
width: calc(100vw - var(--wd-scroll-w, 0px));
transform: translateX(-50%);
background: var(--bb-color-band);
z-index: 0;
}
.wd-bbpdptab > *,
.wd-bbpdprev > * {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------------------
Product page: one heading scale for every section.
Measured before: the four product rows rendered their heading at 22px while the
reviews heading — WooCommerce's own `#reviews h2`, never styled as a section
title — came out at 15px, smaller than the body text beside it, on a section
1576px tall.
All of them now take `--bb-fs-section-title` (24 / 22 / 20 by breakpoint), which
is the documented scale in Docs/design-standard.md §2, so the mobile size is the
20px the standard specifies rather than the 22px they happened to inherit.
--------------------------------------------------------------------------- */
.single-product-page .wd-products-element .wd-el-title,
.single-product-page .wd-products-element > .title,
/* Two classes on the element itself, so this is 0,3,0 and beats the theme's own
`.woocommerce-Reviews .woocommerce-Reviews-title { font-size: unset }` (0,2,0),
which otherwise wins on load order — its stylesheet part is printed after this
file — and drops the heading to the inherited 15px body size. No !important. */
.wd-single-reviews.wd-bbpdprev .woocommerce-Reviews-title {
font-size: var(--bb-fs-section-title);
font-weight: 600;
line-height: 1.3;
}
/* ---------------------------------------------------------------------------
Trust badge row in the prefooter — every page.
Rendered by build/build-prefooter-badges.php into Woodmart's own `.wd-prefooter`
(footer.php:41). Four equal cells with a hairline between them, which is the
feature-strip convention already documented in Docs/design-standard.md §5, so the
row matches the product card's feature strip rather than inventing a second look.
Mobile-first: 2×2 at 390 — four across is unreadable at that width, one per row
makes the footer enormous. The hairlines follow the grid at each breakpoint.
--------------------------------------------------------------------------- */
.bb-trust-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 0;
padding-block: 8px;
}
.bb-trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding-inline: 12px;
text-align: center;
}
/* Hairline between cells, never on the row's outer edges. At 2 columns that means
no line on every 2nd item; at 4 it means no line on every 4th. */
.bb-trust-item:not(:nth-child(2n)) {
border-inline-end: 1px solid rgba(0, 0, 0, 0.08);
}
.bb-trust-icon {
width: 40px;
height: 40px;
}
.bb-trust-label {
color: #1d1d1d;
font-size: var(--bb-fs-small);
font-weight: 600;
line-height: 1.3;
}
.bb-trust-sub {
color: #6a6a6a;
font-size: var(--bb-fs-micro);
line-height: 1.4;
}
@media (min-width: 769px) {
.bb-trust-row {
grid-template-columns: repeat(4, 1fr);
}
.bb-trust-item:not(:nth-child(2n)) {
border-inline-end: 0;
}
.bb-trust-item:not(:nth-child(4n)) {
border-inline-end: 1px solid rgba(0, 0, 0, 0.08);
}
.bb-trust-icon {
width: 44px;
height: 44px;
}
}
/* ---------------------------------------------------------------------------
«من نحن» and «تواصلي معنا» pages.
Only spacing and the band. Every value is a documented token — the section gap
from Docs/design-standard.md §3, the band colour from §4 — so nothing here picks
a number of its own.
The band's cells are core columns, which already stack to one per row below
782px, so there is no breakpoint work: the mobile layout is what core gives us.
--------------------------------------------------------------------------- */
.bb-about-page {
align-items: center;
margin-block-end: var(--bb-gap-section);
}
/* Square, cropped to fill — owner decision 2026-08-14, and consistent with the 1:1
frame the rest of the site already uses for product media
(Docs/design-standard.md §5). The source photo is portrait 390×584, so at 390 it
rendered 540px tall and at 1440 it ran 566px against ~300px of text, leaving the
text column half empty. A square fixes both viewports with one rule.
Not `--bb-ratio-product-media`: that token is documented as the PRODUCT media
frame, and this is a brand photograph. Same value today, different meaning — the
two should be free to diverge. */
.bb-about-page-media figure {
margin: 0;
}
.bb-about-page-media img {
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
}
/* Full-bleed band, the same technique the home page's categories strip and the
product page's sections use — reused rather than reinvented (§6c). */
.bb-band {
position: relative;
margin-block: var(--bb-gap-section);
padding-block: 32px;
}
.bb-band::before {
content: "";
position: absolute;
inset-block: 0;
left: 50%;
width: calc(100vw - var(--wd-scroll-w, 0px));
transform: translateX(-50%);
background: var(--bb-color-band);
z-index: 0;
}
.bb-band > * {
position: relative;
z-index: 1;
}
.bb-band h2 {
font-size: var(--bb-fs-section-title);
font-weight: 600;
margin-block-end: 16px;
}
.bb-band h3 {
font-size: var(--bb-fs-item-title);
font-weight: 600;
margin-block-end: 4px;
}
.bb-band p {
color: #6a6a6a;
}
.bb-about-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-block-start: 16px;
}
/* ---------------------------------------------------------------------------
Product page: the mobile sticky add-to-cart bar's quantity stepper.
Measured at 390: the whole 390px strip was one solid `#d4076e` slab. At <=768
the theme makes `.wd-sticky-btn` itself transparent (woo-opt-sticky-add-to-cart.css),
so the only painted surfaces are the full-width button and the quantity block
absolutely positioned on top of it — and woo-mod-quantity-overlap.css paints that
block from the SAME accent variables as the button:
.wd-quantity-overlap div.quantity { filter: brightness(0.95) }
.wd-quantity-overlap div.quantity :is(input[type],.btn) {
background-color: var(--btn-accented-bgcolor);
color: var(--btn-accented-color) }
The theme's only separation is that `brightness(0.95)` — 5% on this pink is
invisible, which is why the control read as part of the button. The xtemos demo
renders no sticky bar on mobile, so there was no reference layout to match.
Owner decision 2026-08-13: white block, `#4b4b4b` text, hairline divider — the
same neutral treatment the in-page stepper on this page already has (measured
transparent background, `rgb(75,75,75)` text), so pink stays reserved for the
action itself. Docs/design-standard.md §4 for both colours.
Specificity: the theme's base rule is 0,3,2 and its hover rule 0,5,2, so the
selectors below carry `.wd-sticky-btn` as an extra class to reach 0,4,2 and
0,6,2. Beating them on specificity rather than `!important` (CLAUDE.md §6b.4)
keeps the theme's own active/pressed states working. Scoped to `.wd-sticky-btn`
so the loop cards' overlap steppers, which use the same module, are untouched.
--------------------------------------------------------------------------- */
.wd-sticky-btn.wd-quantity-overlap div.quantity {
/* The theme dims the whole block to differentiate it; the block now has its own
background, so the filter would only muddy the white. */
filter: none;
background-color: #fff;
border-inline-end: 1px solid rgba(0, 0, 0, 0.08);
}
.wd-sticky-btn.wd-quantity-overlap div.quantity :is(input[type], .btn),
.wd-sticky-btn.wd-quantity-overlap :is(div, .cart):hover > div.quantity :is(input[type], .btn) {
background-color: transparent;
color: #4b4b4b;
}
/* ---------------------------------------------------------------------------
FAQ accordion (2026-09-05)
The block ships the theme's own `wd-style-shadow` accordion, which already
gives every question a rounded card with a soft shadow. What the theme cannot
know is Bella's type scale and the fact that a 1200px-wide question line is
unreadable, so the child sets the measure, the spacing and the accent.
The opener is the theme's `woodmart-font` chevron (`wd-opener-style-arrow`);
it is given a filled circle rather than being replaced, so the theme's own
rotate-on-open transform keeps working.
--------------------------------------------------------------------------- */
.bb-faq {
--wd-accordion-spacing: 18px;
--wd-row-gap: 10px;
max-width: 860px;
margin-inline: auto;
}
/* The shadow style paints `--bgcolor-gray-200` under a light colour scheme; on
the white product page and the white home section that reads as a grey slab.
White card on a hairline is the card convention in Docs/design-standard.md. */
.bb-faq > .wd-accordion-item {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .08);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
transition: box-shadow .25s ease, border-color .25s ease;
}
.bb-faq > .wd-accordion-item:hover,
.bb-faq > .wd-accordion-item:has(.wd-accordion-title.wd-active) {
border-color: rgba(212, 7, 110, .28);
box-shadow: 0 4px 16px rgba(212, 7, 110, .10);
}
.bb-faq .wd-accordion-title {
gap: 14px;
align-items: flex-start;
}
.bb-faq .wd-accordion-title-text {
font-size: 16px;
font-weight: 600;
line-height: 1.55;
color: #1d1d1d;
}
/* The chevron sits in a pink disc so the control is findable at a glance. It
keeps the theme's glyph and the theme's rotation. */
.bb-faq .wd-accordion-opener {
flex: 0 0 auto;
margin-block-start: 2px;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: rgba(212, 7, 110, .08);
color: #d4076e;
display: flex;
align-items: center;
justify-content: center;
}
.bb-faq .wd-accordion-title.wd-active .wd-accordion-opener {
background-color: #d4076e;
color: #fff;
}
/* A rule under the open question separates it from its answer without adding a
second border to the card. */
.bb-faq .wd-accordion-content {
border-top: 1px solid rgba(0, 0, 0, .06);
padding-block-start: 14px;
color: #4b4b4b;
font-size: var(--bb-fs-body);
line-height: 1.85;
}
.bb-faq .wd-accordion-content a {
color: #d4076e;
text-decoration: underline;
text-underline-offset: 3px;
}
/* The product page's FAQ heading is an h4 so it nests correctly under the page
title, but it is a section heading and takes the section type size. */
.bb-pdp-faq-title {
margin-block: 0 16px;
font-size: var(--bb-fs-section-title);
line-height: 1.35;
text-align: center;
}
@media (max-width: 768.98px) {
.bb-faq {
--wd-accordion-spacing: 15px;
}
.bb-faq .wd-accordion-title-text {
font-size: 15px;
}
}
|