/*
Theme Name: Snug Scent
Theme URI: https://snugscent.co.uk
Description: Snug Scent child theme for Bricks Builder.
Author: BIGMatrix
Author URI: https://bigmatrix.co.uk/
Template: bricks
Version: 1.1
Text Domain: bricks
*/
/* ==========================================================================
Snug Scent — child theme CSS
HOUSE RULE: a native Bricks control first; this file only for what Bricks
genuinely cannot express; never a Bricks custom-CSS field (element
_cssCustom, global-class _cssCustom, or the Theme Style stylesheet).
Enqueued from functions.php with filemtime() cache-busting and guarded by
! bricks_is_builder_main(), so edits here need no version bump and do not
leak into the builder panel.
SPECIFICITY: Bricks emits global classes scoped with the element class,
e.g. `.ss-media-cover.brxe-image` (0,2,0). Rules below that only ADD a
property Bricks does not control work fine unscoped. Anything that must
OVERRIDE a Bricks-controlled property has to match that specificity —
never reach for !important.
Address tokens as --ss-*; never redeclare them here.
========================================================================== */
/* --------------------------------------------------------------------------
1. Migrated out of Bricks custom-CSS fields on 2026-09-21.
-------------------------------------------------------------------------- */
/* .ss-media-cover — `_objectFit` is a control on the IMAGE element only; it
does not exist on `block`, so a generic utility class cannot set it.
Width/height stay native on the class. */
.ss-media-cover {
object-fit: cover;
}
/* .ss-container-query — Bricks has no control for container-type. */
.ss-container-query {
container-type: inline-size;
}
/* Was the Theme Style > CSS stylesheet. Bare element selectors cannot be
expressed through a global class. */
h1,
h2,
h3,
h4 {
word-break: break-word;
hyphens: auto;
}
button,
a.brxe-button {
user-select: none;
}
header.scrolling .bigm-dd {
color: var(--ss-olive-600);
}
/* --------------------------------------------------------------------------
2. Homepage. Structure and every other property are native controls on the
ss-* global classes; only the following cannot be expressed in Bricks.
-------------------------------------------------------------------------- */
/* Scrims are native Gradient controls: ss-hero__scrim (90deg fade, plus an even
wash at mobile_landscape where the copy spans the photo) and ss-cat-tile__scrim
(bottom-up), on the SS Colors tints --ss-linen-50-72/-12/-82 and
--ss-olive-900-55/-12. Moved out of this file on 2026-09-28. */
/* Descendant hover — a global class styles the element it is on, never a
child, so the nudge-on-hover has to live here. */
.ss-cat-tile:hover .ss-cat-tile__go {
transform: translateX(3px);
}
/* text-wrap has no Bricks control. */
.ss-quote__text {
text-wrap: balance;
}
/* Linked card titles: Bricks renders the heading's link as a nested ,
which the global class cannot target. Keep the heading's own colour. */
.ss-card__title > a {
color: inherit;
}
.ss-card__title > a:hover {
text-decoration: underline;
text-underline-offset: 0.16em;
}
/* --------------------------------------------------------------------------
3. WooCommerce add-to-cart button.
Woo prints its own markup — — and
ignores Bricks Theme Styles completely, rendering a hardcoded #e4e7e9 grey
at 18px with square corners. A global class cannot reach it because it is a
descendant emitted by the {woo_add_to_cart} tag, so the design-system
button is reapplied here. Values mirror theme-style `primary` at size `md`.
-------------------------------------------------------------------------- */
/* The tag renders inside a wrapper; both must fill the actions row. */
.ss-product-card__actions > * {
flex: 1;
min-width: 0;
}
.ss-product-card__actions .button,
.ss-product-card__actions .add_to_cart_button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: var(--ss-space-3) var(--ss-space-6);
border: 0;
border-radius: var(--ss-radius-pill);
background: var(--ss-action);
color: var(--ss-action-text);
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
font-size: var(--ss-text-sm);
font-weight: 500;
line-height: var(--ss-leading-label);
text-align: center;
text-decoration: none;
transition: background-color var(--ss-duration-normal) var(--ss-ease-out);
}
.ss-product-card__actions .button:hover,
.ss-product-card__actions .add_to_cart_button:hover {
background: var(--ss-action-hover);
color: var(--ss-action-text);
}
/* The "View basket" link Woo appends after an AJAX add. */
.ss-product-card__actions .added_to_cart {
display: block;
padding-top: var(--ss-space-2);
font-size: var(--ss-text-xs);
color: var(--ss-text-muted);
text-align: center;
}
/* Two cards per row on phones leave the button about 120px wide: half the side
padding keeps "Add to basket" / "Select options" on one line and splits
"Notify when in stock" (out of stock, inc/product-card.php) over two. */
@media (max-width: 478px) {
.ss-product-card__actions .button,
.ss-product-card__actions .add_to_cart_button {
padding-inline: var(--ss-space-3);
text-wrap: balance;
}
}
/* --------------------------------------------------------------------------
4. Footer sustainability credentials.
The line is one run of text with three inline certificate links, so the
anchors cannot carry a global class. Without this they take the global
link colour (--ss-text-brand), which is unreadable on the olive-900 band.
-------------------------------------------------------------------------- */
.ss-footer__muted a {
color: var(--ss-linen-50);
opacity: 0.72;
text-decoration: none;
transition: opacity var(--ss-duration-fast) var(--ss-ease-out);
}
.ss-footer__muted a:hover {
opacity: 1;
text-decoration: underline;
text-underline-offset: 0.16em;
}
/* Bricks sets .brxe-block{width:100%}. The footer bands wrap (as the design
intends at narrow widths), so two full-width children wrap immediately
instead of sitting at opposite ends. The comp's equivalents are plain
auto-width divs. A global class cannot target children, so it lives here. */
.ss-footer__row > * {
width: auto;
max-width: 100%;
}
/* --------------------------------------------------------------------------
5. Header menus: wrap by item, never mid-phrase.
The DS sets white-space: nowrap on .hd__link and .hd__cat, and flex-wrap
on .hd__cats-nav only. Bricks exposes neither control, and the menu links
are not their own elements, so both rules belong here.
Two selectors because Bricks renders a mega-menu trigger as
li > div.brx-submenu-toggle > a, while a plain item is li > a. Scoped to
.bricks-nav-menu so the mobile drawer (ul.bricks-mobile-menu) and the mega
panels' own links keep normal wrapping.
-------------------------------------------------------------------------- */
.ss-header__nav .bricks-nav-menu > li > a,
.ss-header__nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
white-space: nowrap;
}
/* Both header menus wrap to a second row rather than overflowing. The DS sets
this on .hd__cats-nav only, but its primary nav then overflows the viewport
between 992px (where both desktop menus hide) and ~1200px, because nowrap
labels give the nav a min-content width the row cannot afford. A second row
is the better failure mode than a horizontal scrollbar. Revisit if the
desktop/mobile switch moves from 991 to Bricks' 1279 breakpoint. */
.ss-header__nav .bricks-nav-menu {
flex-wrap: wrap;
}
/* --------------------------------------------------------------------------
6. Mega menu details Bricks has no control for.
Both come from the DS: .hd-mega__link:hover sets text-underline-offset,
and .hd-mega__col:hover .hd-mega__thumb img scales the image on COLUMN
hover — a parent-hover descendant selector, and the ![]()
inside a Bricks
image element is not its own element. The underline itself and the
transition are set natively on the classes.
-------------------------------------------------------------------------- */
.ss-mega__label:hover {
text-underline-offset: 3px;
}
.ss-mega__item:hover .ss-mega__thumb img {
transform: scale(1.04);
}
.ss-mega__thumb img {
transition: transform var(--ss-duration-slow) var(--ss-ease-out);
}
/* Feature card in the mega-panel aside: the DS underlines the title when the
whole card is hovered (.hd-mega__feature:hover .hd-mega__feature-title). */
.ss-mega__feature:hover .ss-mega__feature-title {
text-decoration: underline;
text-underline-offset: 3px;
}
/* --------------------------------------------------------------------------
7. Custom SVG icons (Snug Scent Lucide set, set_bd7f332519).
The uploaded Lucide files carry width="24" height="24". Font Awesome glyphs
scaled with font-size, so the rating element's iconSize and the button's
icon typography are font-size controls; neither can size an