:root {
--wd-text-font: "Jost", Arial, Helvetica, sans-serif;
--wd-text-font-weight: 400;
--wd-text-color: rgb(58,53,46);
--wd-text-font-size: 16px;
--wd-title-font: "Cormorant Garamond", Arial, Helvetica, sans-serif;
--wd-title-font-weight: 600;
--wd-title-color: rgb(10,9,8);
--wd-entities-title-font: "Cormorant Garamond", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight: 600;
--wd-entities-title-color: rgb(10,9,8);
--wd-entities-title-color-hover: rgb(184, 150, 62);
--wd-alternative-font: "Jost", Arial, Helvetica, sans-serif;
--wd-widget-title-font: "Cormorant Garamond", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight: 600;
--wd-widget-title-transform: uppercase;
--wd-widget-title-color: rgb(10,9,8);
--wd-widget-title-font-size: 18px;
--wd-header-el-font: "Jost", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight: 400;
--wd-header-el-transform: uppercase;
--wd-header-el-font-size: 14px;
--wd-otl-style: dotted;
--wd-otl-width: 2px;
--wd-primary-color: rgb(184,150,62);
--wd-alternative-color: rgb(138,111,46);
--btn-default-bgcolor: rgb(184,150,62);
--btn-default-bgcolor-hover: rgb(138,111,46);
--btn-accented-bgcolor: rgb(10,9,8);
--btn-accented-bgcolor-hover: rgb(184,150,62);
--wd-form-brd-width: 1px;
--notices-success-bg: #459647;
--notices-success-color: #fff;
--notices-warning-bg: #E0B252;
--notices-warning-color: #fff;
--wd-link-color: rgb(184,150,62);
--wd-link-color-hover: rgb(138,111,46);
}
.wd-age-verify-wrap {
--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
background-color: #111111;
background-image: none;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.wd-promo-popup-wrap {
--wd-popup-width: 800px;
--wd-popup-padding: 15px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
object-fit: cover;
object-position: center center;
}
.wd-footer {
background-color: #0A0908;
background-image: none;
}
html .wd-checkout-steps {
text-transform: capitalize;
color: rgb(10,9,8);
}
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
font-size: 44px;
color: rgb(10,9,8);
}
.single-product :is(.wd-page-content, .whb-header) {
background-color: rgb(244,244,244);
background-image: none;
}
{
font-size: 11px;
text-transform: uppercase;
padding: 14px 28px 14px 28px;
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
--wd-form-color: rgb(10,9,8);
--wd-form-placeholder-color: rgb(153,145,134);
--wd-form-brd-color: rgb(232,224,208);
--wd-form-brd-color-focus: rgb(184,150,62);
--wd-form-bg: rgb(255,255,255);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
--wd-arrow-color: rgb(184,150,62);
--wd-arrow-color-hover: rgb(0,0,0);
}
.wd-nav-pagin-wrap:not(.wd-custom-style) {
--wd-pagin-bg: rgb(184,150,62);
--wd-pagin-bg-hover: rgb(0,0,0);
--wd-pagin-bg-act: rgb(255,255,255);
}
.wd .product-label.onsale {
background-color: rgb(0,0,0);
}
.mfp-wrap.wd-popup-quick-view-wrap {
--wd-popup-width: 920px;
}
@media (max-width: 1024px) {
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
font-size: 36px;
}
}
@media (max-width: 768.98px) {
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
font-size: 28px;
}
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}
@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}
@font-face {
font-family: "Nogate";
font-weight: 400;
font-display:swap;
font-style: normal;
}
/* ==========================================================================
RAYLAM PERFUMES — MASTER STYLESHEET v5
ONE file. Replaces EVERYTHING in WoodMart → Theme Settings → Custom CSS.
HOW TO APPLY
1. Open WoodMart → Theme Settings → Custom CSS → Global.
2. Select ALL existing content and DELETE it.
3. Paste this entire file. Save.
4. Hard-refresh (Ctrl+Shift+R) and check home, shop, one product,
the cart drawer, and About Us on a phone.
WHAT THIS IS
The consolidation of v4 → v4.8 (eight stacked patch generations) into
one organized file. Every conflict resolved to its final winning value.
Your three decisions are applied:
· Marquee — reverted to the ORIGINAL outlined design (v4.8 restyle gone)
· Card prices — two-price STACKED: small struck "was" above, deep-gold
"now" below
· Product-page entrance animations — REMOVED entirely. This ends the
Apris 4 / Ivory Woods invisible-title glitch for good: the title,
"Inspired by", price and pills now render instantly, always.
DEAD CODE REMOVED (existed in the stack, styled nothing, or was wrong):
· v4.2's cart block aimed at `.wd-side-hidden.wd-cart` (class doesn't
exist in WoodMart 8.5.5)
· v4.5's WP-Rocket instructions (no optimizer plugin is installed)
· v4.8's marquee restyle (reverted by your decision)
· the sitewide `.elementor-button` catch-all (zero such elements here;
every button on this site is `a.btn`)
· duplicate WhatsApp block, duplicate overflow guards, 3 dead
testimonial generations, `.wd-scroll` mispositioning (it is
WoodMart's GENERIC scroll-container class, NOT the top button —
positioning it broke the cart drawer and search dropdown)
HARD-WON RULES — do not relearn these:
R1 Vertical padding lives in Elementor sections, never in block CSS.
R2 Scope single-product price to `.entry-summary >` or it leaks into
related-product cards.
R3 Use overflow-x:clip, not hidden — `hidden` silently forces
overflow-y to `auto` and turns every block into a nested scroller.
R4 Never rely on `aspect-ratio` alone to give an Elementor flex child
its height — pair it with a definite min-height on the widget
(see MOOD GRID), or the widget collapses to the grid gap.
R5 Never gate content visibility behind a load-fired opacity animation —
a throttled load strands it invisible. Scroll-reveals driven by the
IntersectionObserver JS are fine (the JS force-reveals on failure).
R6 Only `.scrollToTop` is the scroll-top button. Never position
`.wd-scroll` or `.wd-scroll-btn`.
CONTENTS
1 Tokens 6 Product cards 11 Sections (custom blocks)
2 Base 7 Single product 12 Cart drawer
3 Typography 8 Reveal engine 13 Floating buttons
4 Header/nav 9 Marquee 14 System page spacing
5 Buttons 10 USP strip 15 Mobile (≤767px)
16 Editorial pages (About)
17 Accessibility
18 Small screens (≤380px)
19 Reduced motion
========================================================================== */
/* ==========================================================================
1 · TOKENS
Variable-driven so the planned dark/light toggle can own colour later.
========================================================================== */
:root{
/* surfaces */
--ry-ink: #0A0908;
--ry-ink-2: #131110;
--ry-ink-3: #191614;
--ry-cream: #F7F2E8;
--ry-page: #FFFFFF;
/* accents */
--ry-gold: #B8963E;
--ry-gold-deep: #8A6F2E; /* 4.78:1 on white — AA passes; use for text */
--ry-hair: #E8E0D0;
/* text */
--ry-on-dark: #EFE9DC;
--ry-on-dark-2: #B7AE9C;
--ry-on-dark-3: #9A9182;
--ry-on-light: #0A0908;
--ry-muted: #5C5142;
--ry-muted-2: #7A7264;
--ry-muted-3: #8A7B5E;
/* type */
--ry-serif: 'Cormorant Garamond', serif;
--ry-sans: 'Jost', sans-serif;
/* scale — mobile floors matter most: h2 33px / body 15px ≈ 2.2:1 */
--ry-fs-h2: clamp(33px, 4.4vw, 44px);
--ry-fs-h3: clamp(21px, 2.4vw, 26px);
--ry-fs-body: clamp(15px, 1.1vw, 16px);
--ry-fs-small: 13.5px;
--ry-fs-eyebrow: 11px;
--ry-lh-body: 1.7;
/* horizontal rhythm — vertical rhythm belongs to Elementor (R1) */
--ry-pad-x: clamp(18px, 5vw, 40px);
--ry-gap: clamp(12px, 2vw, 24px);
--ry-max: 1200px;
}
/* ==========================================================================
2 · BASE
========================================================================== */
body, p, li,
.wd-content-layout,
.elementor-widget-text-editor{
font-size: var(--ry-fs-body);
line-height: var(--ry-lh-body);
}
html, body{ max-width:100%; overflow-x:hidden; }
.wd-content-layout{ padding-block:0 !important; }
.single-product .wd-content-layout{ padding-top:50px !important; }
.elementor-section-wrap > .elementor-section{ max-width:100vw; }
.woocommerce-checkout,
.woocommerce-cart,
.woocommerce-account{ line-height:1.6; }
/* ==========================================================================
3 · TYPOGRAPHY SYSTEM
========================================================================== */
/* 3.1 — Serif for anything that titles something */
h1, h2, h3, h4,
.ry-std-head h2, .ry-std-cell h3, .ry-std-n,
.ry-conc-head h2, .ry-faq-head h2, .ry-faq-i summary,
.ry-tm-head h2, .ry-thread h2, .ry-founder-txt h2,
.ry-find-c h3, .ry-mood2-in h3, .ry-num .n,
.ry-close h2,
.wd-entities-title, .woocommerce-loop-product__title,
.single-product div.product .product_title,
.widget-title, .footer-container .widget-title{
font-family: var(--ry-serif) !important;
text-transform: none !important;
letter-spacing: .02em !important;
}
/* 3.2 — Sans for anything read rather than scanned */
body, p, li,
.ry-eyebrow, .ry-btn,
.price, .ry-tm-nm, .ry-tm-prod{
font-family: var(--ry-sans) !important;
}
/* 3.3 — ONE section-title size, custom blocks and WooCommerce alike */
.ry-std-head h2, .ry-conc-head h2, .ry-faq-head h2,
.ry-tm-head h2, .ry-thread h2,
.woocommerce-products-header__title,
.elementor-widget-heading .elementor-heading-title,
.wd-products-title, .section-title, .title-wrapper .liner-title{
font-size: var(--ry-fs-h2) !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: .01em !important;
text-transform: none !important;
}
/* 3.4 — ONE eyebrow style (uppercase on purpose — the contrast is the point) */
.ry-eyebrow,
.ry-thread-eye,
.wd-products-title .liner-off,
.elementor-widget-heading .elementor-heading-title small{
font-family: var(--ry-sans) !important;
font-size: var(--ry-fs-eyebrow) !important;
letter-spacing: .3em !important;
text-transform: uppercase !important;
color: var(--ry-gold) !important;
}
/* 3.5 — ONE gap between eyebrow → heading → content */
.ry-std-head, .ry-conc-head, .ry-faq-head, .ry-tm-head{
margin-bottom: clamp(28px, 3.5vw, 44px) !important;
}
/* 3.6 — Finishing: balanced headlines, no orphan words */
h1, h2, h3,
.ry-std-head h2, .ry-conc-head h2, .ry-faq-head h2,
.ry-tm-head h2, .ry-thread h2, .ry-founder-txt h2,
.ry-h, .ry-h-hero{
text-wrap:balance;
}
.ry-body, .ry-std-cell p, .ry-conc-head p, .ry-faq-i p{
text-wrap:pretty;
}
/* 3.7 — Numerals: names get lining figures ("Apris 4" sits on the
baseline); prices get tabular figures (columns align) */
.wd-entities-title, .woocommerce-loop-product__title,
.single-product div.product .product_title{
font-variant-numeric:lining-nums !important;
font-feature-settings:"lnum" 1 !important;
}
.wd-product .price,
ul.products li.product .price,
.single-product .entry-summary > .price,
.single-product .summary-inner > .price{
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
}
/* ==========================================================================
4 · HEADER · FOOTER · NAV
========================================================================== */
.whb-header, .whb-main-header{
border-bottom:1px solid var(--ry-gold) !important;
box-shadow:none !important;
}
.footer-container{ border-top:1px solid var(--ry-gold) !important; }
/* Nav underline-draw */
.whb-header .menu-item > a,
.site-header .menu-item > a{ position:relative; }
.whb-header .menu-item > a::after,
.site-header .menu-item > a::after{
content:""; position:absolute; left:0; right:100%; bottom:-2px;
height:1px; background:var(--ry-gold);
transition:right .4s cubic-bezier(.65,0,.35,1);
}
.whb-header .menu-item > a:hover::after,
.site-header .menu-item > a:hover::after{ right:0; }
/* Mega-menu dropdown */
.whb-header .wd-dropdown-menu,
.whb-header .wd-sub-menu{
border:1px solid rgba(184,150,62,.25) !important;
box-shadow:0 24px 60px rgba(10,9,8,.25) !important;
padding:14px 0 !important;
}
.whb-header .wd-dropdown-menu a,
.whb-header .wd-sub-menu a{
font-family:var(--ry-sans) !important; font-size:12px !important;
letter-spacing:.14em !important; text-transform:uppercase !important;
padding:11px 26px !important;
transition:color .3s ease, background .3s ease, padding-left .3s ease !important;
}
.whb-header .wd-dropdown-menu a:hover,
.whb-header .wd-sub-menu a:hover{
color:var(--ry-gold) !important; padding-left:32px !important;
}
.whb-header .wd-dropdown-menu .wd-sub-menu{ margin:0 !important; min-width:200px !important; }
.whb-header .menu-item-has-children > a > .wd-nav-arrow,
.whb-header .menu-item-has-children > a::after{
opacity:.7; margin-left:5px; font-size:11px; vertical-align:middle;
}
/* Off-canvas drawers must clear the 3D slider layers */
.mobile-nav, .wd-side-hidden,
.wd-side-hidden-content, .wd-mobile-menu{ z-index:999999 !important; }
.mobile-nav-overlay, .wd-close-side-widget-overlay,
.wd-overlay, .wd-overlay-bg{ z-index:999998 !important; }
.elementor-widget-wd_slider, .wd-slider,
.wd-carousel-container, .wd-carousel-inner, .wd-carousel-wrap{ z-index:10 !important; }
/* Shop archive title banner off */
.post-type-archive-product .page-title{ display:none !important; }
/* ==========================================================================
5 · BUTTONS
Every button on this site is `a.btn` (WoodMart button widget). There are
zero .elementor-button elements — verified across all pages.
========================================================================== */
/* 5.1 — Content buttons: sweep + lift. Scoped away from chrome. */
a.btn:not(.skip-link){
position:relative;
overflow:hidden;
border-radius:0 !important;
transition:transform .45s cubic-bezier(.2,.7,.2,1),
box-shadow .45s ease,
background-color .4s ease,
color .4s ease,
border-color .4s ease;
}
.wd-slider a.btn::before,
.elementor-widget-container a.btn::before{
content:"";
position:absolute; top:0; left:-130%;
width:55%; height:100%; z-index:1;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
transform:skewX(-22deg);
transition:left .8s cubic-bezier(.4,0,.2,1);
pointer-events:none;
}
.wd-slider a.btn:hover::before,
.elementor-widget-container a.btn:hover::before{ left:135%; }
.wd-slider a.btn > *,
.elementor-widget-container a.btn > *{ position:relative; z-index:2; }
.wd-slider a.btn:hover,
.elementor-widget-container a.btn:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(184,150,62,.35);
}
/* never animate chrome */
.whb-header a.btn, .wd-nav a.btn, #wpadminbar a.btn, a.skip-link{
transform:none !important; box-shadow:none !important;
}
.whb-header a.btn::before, .wd-nav a.btn::before, a.skip-link::before{
display:none !important;
}
/* 5.2 — Opt-in variants (Elementor → Advanced → CSS Classes on the wrapper) */
.ry-b-shine a.btn{
background:var(--ry-gold) !important;
color:var(--ry-ink) !important;
border-color:var(--ry-gold) !important;
}
.ry-b-arrow a.btn::after{
content:"→"; display:inline-block;
width:0; opacity:0; margin-left:0; overflow:hidden;
transition:width .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease, margin-left .45s ease;
}
.ry-b-arrow a.btn:hover::after{ width:16px; opacity:1; margin-left:9px; }
.ry-on-light a.btn{ color:var(--ry-ink) !important; border-color:var(--ry-ink) !important; }
/* 5.3 — Engine button (inside custom HTML blocks) */
.ry-btn{
display:inline-block; position:relative; overflow:hidden;
border:1px solid var(--ry-gold); color:var(--ry-gold);
font-size:12px; letter-spacing:.2em; padding:16px 40px;
text-decoration:none; background:transparent;
background-image:linear-gradient(var(--ry-gold),var(--ry-gold));
background-repeat:no-repeat; background-position:center; background-size:100% 0%;
transition:background-size .55s cubic-bezier(.65,0,.35,1), color .35s ease .1s;
}
.ry-btn:hover{ background-size:100% 100%; color:#fff; }
/* 5.4 — WooCommerce system buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .checkout-button{
border-radius:0 !important;
letter-spacing:.16em; text-transform:uppercase; font-size:12px;
transition:background-color .35s ease, color .35s ease, border-color .35s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .checkout-button:hover{
background-color:var(--ry-gold) !important; color:var(--ry-ink) !important;
}
.woocommerce-info, .woocommerce-message{ border-top-color:var(--ry-gold) !important; }
/* touch devices: no sticky hover */
@media (hover:none){
a.btn::before{ display:none !important; }
a.btn:hover{ transform:none !important; box-shadow:none !important; }
}
/* ==========================================================================
6 · PRODUCT CARDS — shop grid, related, upsells, home widgets
Two-price STACKED: small struck "was" line above, deep-gold "now" below.
========================================================================== */
/* ---- shared, all breakpoints ---- */
.wd-product .price,
.product-grid-item .price,
ul.products li.product .price,
.wd-products-element .price{
display:flex !important;
flex-direction:column !important;
align-items:inherit !important; /* follows the card's text-align */
gap:1px !important;
line-height:1.35 !important;
letter-spacing:0 !important;
opacity:1 !important;
}
.wd-product .price del,
.product-grid-item .price del,
ul.products li.product .price del,
.wd-products-element .price del{
display:block !important;
order:0;
color:#B0A88F !important;
font-weight:400 !important;
opacity:.8 !important;
margin:0 !important;
text-decoration:line-through !important;
}
.wd-product .price ins,
.product-grid-item .price ins,
ul.products li.product .price ins,
.wd-products-element .price ins{
display:block !important;
order:1;
color:var(--ry-gold-deep) !important;
font-weight:500 !important;
text-decoration:none !important;
}
/* ---- desktop + tablet (≥768px) ----
NOTE: WoodMart sizes the title through a shorthand, so !important is
required here or the theme wins at ~15.7px. */
@media (min-width:768px){
.wd-product .wd-entities-title,
ul.products li.product .wd-entities-title,
.woocommerce-loop-product__title{
font-size:23px !important;
font-weight:600 !important;
line-height:1.2 !important;
letter-spacing:0 !important;
margin:18px 0 6px !important;
}
.wd-product .price del,
ul.products li.product .price del,
.wd-products-element .price del{ font-size:13.5px !important; }
.wd-product .price ins,
ul.products li.product .price ins,
.wd-products-element .price ins{ font-size:18px !important; }
/* if a product has no sale, the bare price node gets the "now" look */
.wd-product .price,
ul.products li.product .price{ font-size:18px !important; color:var(--ry-gold-deep) !important; }
/* category label off — it competed with the title and adds nothing
on a 13-product store */
.wd-product .wd-product-cats,
ul.products li.product .wd-product-cats{ display:none !important; }
}
/* ---- sale badge: refined gold tag, never WoodMart's black circle ---- */
.wd-product .onsale,
.product-grid-item .onsale,
ul.products li.product .onsale{
background:var(--ry-ink) !important;
color:var(--ry-gold) !important;
border:none !important;
border-radius:0 !important;
width:auto !important; height:auto !important;
min-width:0 !important; min-height:0 !important;
line-height:1 !important;
font-family:var(--ry-sans) !important;
font-size:9.5px !important;
font-weight:400 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
padding:6px 10px !important;
top:14px !important; left:14px !important; right:auto !important;
}
/* ==========================================================================
7 · SINGLE PRODUCT PAGE
Entrance animations REMOVED (decision + R5). Everything renders
instantly and identically on every product. Hover effects stay.
========================================================================== */
/* Belt-and-braces: guarantee these can never be animation-hidden even if
an old cached stylesheet still declares the removed keyframes. */
.single-product div.product .product_title,
.single-product div.product .raylam-inspired,
.single-product .entry-summary > .price,
.single-product .summary-inner > .price,
.single-product div.product .raylam-tagline,
.raylam-pill{
opacity:1 !important;
animation:none !important;
}
/* 7.1 — Meta bar */
.raylam-meta-bar{ display:flex; align-items:center; gap:10px; margin:0 0 10px; flex-wrap:wrap; }
.raylam-meta-tag{
font-size:11px; letter-spacing:.14em; text-transform:uppercase;
padding:5px 12px; border:1px solid var(--ry-gold);
color:var(--ry-gold-deep); background:#fff; line-height:1;
}
.raylam-meta-plain{
font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ry-muted-3);
}
/* 7.2 — Inspired by */
.raylam-inspired{ display:flex; align-items:center; gap:12px; margin:0 0 10px; line-height:1.15; }
.raylam-inspired::before{
content:""; width:28px; height:1px; background:var(--ry-gold); flex:0 0 auto;
}
.raylam-inspired span{
font-family:var(--ry-serif); font-style:italic; font-size:19px; color:#6E6356;
}
.raylam-inspired span b, .raylam-inspired span strong,
.raylam-inspired b, .raylam-inspired strong{
color:var(--ry-gold-deep); font-weight:600; font-style:italic;
}
/* 7.3 — Title + tagline */
.single-product div.product .product_title{
font-weight:500 !important; font-size:40px !important;
line-height:1.05 !important; letter-spacing:.01em !important;
color:var(--ry-on-light) !important; margin:0 0 4px !important;
}
.raylam-tagline{
font-size:15px; color:#555048; line-height:1.5; margin:0 0 10px; max-width:46ch;
}
/* 7.4 — PRICE, scoped to the summary column ONLY (R2).
On this WoodMart build the price is `.entry-summary > .summary-inner >
p.price` — NOT a direct child of .entry-summary — so both paths are
listed. `.summary-inner >` cannot leak into related cards (their prices
live in .product-element-bottom). */
.single-product .entry-summary > .price,
.single-product .entry-summary > p.price,
.single-product .summary-inner > .price,
.single-product .summary-inner > p.price{
font-family:var(--ry-serif) !important;
color:var(--ry-on-light) !important; font-size:32px !important;
line-height:1 !important; margin:0 0 14px !important;
display:flex !important; align-items:baseline !important; gap:12px !important;
}
.single-product .entry-summary > .price del,
.single-product .entry-summary > p.price del,
.single-product .summary-inner > .price del,
.single-product .summary-inner > p.price del{
color:#B0A88F !important; font-size:19px !important;
font-weight:400 !important; opacity:.8 !important;
}
.single-product .entry-summary > .price del .woocommerce-Price-amount,
.single-product .summary-inner > .price del .woocommerce-Price-amount{ font-weight:400 !important; }
.single-product .entry-summary > .price ins,
.single-product .entry-summary > p.price ins,
.single-product .summary-inner > .price ins,
.single-product .summary-inner > p.price ins{
text-decoration:none !important; color:var(--ry-gold) !important; font-size:32px !important;
}
/* Collapse empty placeholders */
.single-product div.product .woocommerce-product-rating:empty,
.single-product div.product .star-rating:empty,
.single-product div.product .woocommerce-product-details__short-description:empty{
display:none !important; margin:0 !important; padding:0 !important;
}
.single-product div.product .wd-product-detail-meta,
.single-product div.product .product_meta{ margin-top:8px !important; }
/* 7.5 — Notes + pills */
.raylam-notes{ margin:2px 0 8px; }
.raylam-acc{ border-top:1px solid var(--ry-hair); margin:0; }
.raylam-acc summary{
list-style:none; cursor:pointer; padding:10px 0;
display:flex; align-items:center; justify-content:space-between;
font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ry-on-light);
}
.raylam-acc summary::-webkit-details-marker{ display:none; }
.raylam-acc summary::after{ content:"+"; color:var(--ry-gold); font-size:18px; line-height:1; }
.raylam-acc[open] summary::after{ content:"\2212"; }
.raylam-acc .raylam-acc-body{ padding:0 0 10px; }
.raylam-acc-body p{ font-size:14px; color:#555048; line-height:1.6; margin:0; }
.raylam-notes-label{
font-size:11px; letter-spacing:.2em; text-transform:uppercase;
color:var(--ry-muted-3); margin:0 0 8px;
}
.raylam-note-row{ display:flex; align-items:center; gap:8px; margin:0 0 6px; flex-wrap:wrap; }
.raylam-note-type{
font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:var(--ry-muted-3); min-width:46px;
}
.raylam-pill{
position:relative; overflow:hidden; display:inline-block;
font-size:12px; padding:6px 13px; background:var(--ry-cream);
color:var(--ry-muted); border:1px solid var(--ry-hair); line-height:1; cursor:default;
transition:transform .4s cubic-bezier(.34,1.56,.64,1),
background .4s ease, border-color .4s ease, box-shadow .4s ease, color .4s ease;
}
.raylam-pill::after{
content:attr(data-note); position:absolute; left:0; right:0; top:100%;
display:flex; align-items:center; justify-content:center; height:100%;
color:#fff; pointer-events:none;
transition:top .4s cubic-bezier(.65,0,.35,1);
}
.raylam-pill:hover{
transform:translateY(-5px) scale(1.07);
background:var(--ry-gold); border-color:var(--ry-gold);
box-shadow:0 10px 22px rgba(184,150,62,.38); color:transparent;
}
.raylam-pill:hover::after{ top:0; }
/* 7.6 — Trust bar */
.raylam-trust{
display:flex; gap:22px; flex-wrap:wrap; padding:12px 0; margin:2px 0 16px;
border-top:1px solid var(--ry-hair); border-bottom:1px solid var(--ry-hair);
}
.raylam-trust span{
font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ry-muted-2);
display:flex; align-items:center; gap:7px;
}
.raylam-trust i{ color:var(--ry-gold); font-style:normal; font-size:14px; }
.raylam-after{ margin-top:18px; }
.raylam-after .raylam-trust{ margin:0 0 6px; }
/* 7.7 — Cart area, two rows */
.single-product div.product .wd-add-btns,
.single-product div.product .woodmart-add-btns,
.single-product div.product form.cart{
display:grid !important;
grid-template-columns:1fr 132px !important;
grid-auto-rows:auto !important;
gap:12px !important; align-items:stretch !important;
width:100% !important; margin:0 0 20px !important; float:none !important;
}
.single-product div.product .wd-add-btns form.cart,
.single-product div.product .woodmart-add-btns form.cart{ display:contents !important; }
.single-product div.product .quantity{
grid-column:2 !important; grid-row:1 !important;
margin:0 !important; height:56px !important;
display:flex !important; align-items:stretch !important;
border:1px solid var(--ry-hair) !important; box-sizing:border-box !important;
}
.single-product div.product .quantity input.qty{
width:52px !important; height:54px !important; border:none !important;
background:#fff !important; color:var(--ry-on-light) !important; border-radius:0 !important;
text-align:center !important; font-size:15px !important; padding:0 !important;
-moz-appearance:textfield !important; box-shadow:none !important;
}
.single-product div.product .quantity input.qty::-webkit-outer-spin-button,
.single-product div.product .quantity input.qty::-webkit-inner-spin-button{
-webkit-appearance:none !important; margin:0 !important;
}
.single-product div.product .quantity .plus,
.single-product div.product .quantity .minus{
width:40px !important; height:54px !important; border:none !important;
background:#fff !important; color:var(--ry-muted-3) !important; border-radius:0 !important;
font-size:16px !important; line-height:54px !important;
transition:background-color .25s ease, color .25s ease !important;
}
.single-product div.product .quantity .plus:hover,
.single-product div.product .quantity .minus:hover{
background-color:var(--ry-gold) !important; color:#fff !important;
}
/* ADD TO CART — black centre-open */
.single-product div.product .single_add_to_cart_button{
grid-column:1 !important; grid-row:1 !important;
height:56px !important; width:100% !important;
display:flex !important; align-items:center !important; justify-content:center !important;
color:var(--ry-on-light) !important; border:1px solid var(--ry-ink) !important;
border-radius:0 !important;
letter-spacing:.18em !important; font-size:12px !important; font-weight:400 !important;
text-transform:uppercase !important; padding:0 24px !important; margin:0 !important;
box-sizing:border-box !important;
background-color:#fff !important;
background-image:linear-gradient(var(--ry-ink),var(--ry-ink)) !important;
background-repeat:no-repeat !important; background-position:center center !important;
background-size:100% 0% !important;
transition:background-size .55s cubic-bezier(.65,0,.35,1), color .35s ease .12s !important;
}
.single-product div.product .single_add_to_cart_button:hover{
color:#fff !important; background-size:100% 100% !important;
}
.single-product div.product .single_add_to_cart_button:focus,
.single-product div.product .single_add_to_cart_button:active,
.single-product div.product .single_add_to_cart_button.loading,
.single-product div.product .single_add_to_cart_button.added{
color:#fff !important; background-size:100% 100% !important;
background-color:var(--ry-ink) !important;
}
/* BUY NOW — gold centre-open */
.single-product div.product .woodmart-buy-now-btn,
.single-product div.product .wd-buy-now-btn,
.single-product div.product a.buy_now_button{
grid-column:1 / -1 !important; grid-row:2 !important;
position:relative !important; overflow:hidden !important; z-index:0 !important;
height:56px !important; width:100% !important;
display:flex !important; align-items:center !important; justify-content:center !important;
background:var(--ry-ink) !important; color:#fff !important;
border:1px solid var(--ry-ink) !important; border-radius:0 !important;
letter-spacing:.18em !important; font-size:12px !important; font-weight:400 !important;
text-transform:uppercase !important; padding:0 24px !important; margin:0 !important;
text-align:center !important; box-sizing:border-box !important;
transition:border-color .55s ease !important;
}
.single-product div.product .woodmart-buy-now-btn::before,
.single-product div.product .wd-buy-now-btn::before,
.single-product div.product a.buy_now_button::before{
content:"" !important; position:absolute !important;
left:50% !important; right:50% !important; top:0 !important; bottom:0 !important;
background:var(--ry-gold) !important; z-index:-1 !important;
transition:left .55s cubic-bezier(.65,0,.35,1), right .55s cubic-bezier(.65,0,.35,1) !important;
}
.single-product div.product .woodmart-buy-now-btn > *,
.single-product div.product .wd-buy-now-btn > *,
.single-product div.product a.buy_now_button > *{
position:relative !important; z-index:1 !important;
}
.single-product div.product .woodmart-buy-now-btn:hover,
.single-product div.product .wd-buy-now-btn:hover,
.single-product div.product a.buy_now_button:hover{
background:var(--ry-ink) !important; border-color:var(--ry-gold) !important; color:#fff !important;
}
.single-product div.product .woodmart-buy-now-btn:hover::before,
.single-product div.product .wd-buy-now-btn:hover::before,
.single-product div.product a.buy_now_button:hover::before{ left:0 !important; right:0 !important; }
/* 7.8 — Sale badge on the product page itself */
.single-product .product-image-wrap .onsale,
.single-product span.onsale{
background:var(--ry-ink) !important; color:var(--ry-gold) !important;
border:none !important; border-radius:0 !important;
font-size:11px !important; letter-spacing:.12em !important;
min-width:auto !important; min-height:auto !important;
width:auto !important; height:auto !important; line-height:1 !important;
padding:7px 12px !important; top:16px !important; right:16px !important;
}
/* 7.9 — Urgency widgets quieted */
.single-product .wd-sales-countdown,
.single-product .woodmart-product-purchased-counter,
.single-product .wd-product-views{
font-size:11px !important; color:#9A9286 !important;
letter-spacing:.04em !important; opacity:.85 !important;
}
/* 7.10 — Gallery (hover only — no load animations) */
.single-product .woocommerce-product-gallery__image img{
transition:transform .9s cubic-bezier(.2,.7,.2,1) !important;
}
.single-product .woocommerce-product-gallery__image:hover img{ transform:scale(1.06) !important; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img{
transition:opacity .3s ease, outline-color .3s ease !important;
outline:1px solid transparent; outline-offset:-1px;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover{
outline-color:var(--ry-gold) !important; opacity:1 !important;
}
@media (max-width:1024px){
.single-product div.product .product_title{ font-size:36px !important; }
.single-product .entry-summary > .price,
.single-product .entry-summary > .price ins,
.single-product .summary-inner > .price,
.single-product .summary-inner > .price ins{ font-size:30px !important; }
.raylam-tagline{ font-size:14px; }
.raylam-pill{ font-size:11px; }
}
/* ==========================================================================
8 · REVEAL ENGINE (scroll-driven — safe per R5: the Custom JS adds .in
via IntersectionObserver and force-reveals everything if the observer
fails. Do not rename these classes without changing the JS.)
========================================================================== */
.ry{ font-family:var(--ry-sans); box-sizing:border-box; }
.ry *{ box-sizing:border-box; }
.ry-reveal{
opacity:0; transform:translateY(24px);
transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.ry-reveal.in{ opacity:1; transform:translateY(0); }
.ry-stagger > *{
opacity:0; transform:translateY(18px);
transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.ry-stagger.in > *{ opacity:1; transform:translateY(0); }
.ry-stagger.in > *:nth-child(1){ transition-delay:.06s }
.ry-stagger.in > *:nth-child(2){ transition-delay:.18s }
.ry-stagger.in > *:nth-child(3){ transition-delay:.30s }
.ry-stagger.in > *:nth-child(4){ transition-delay:.42s }
.ry-stagger.in > *:nth-child(5){ transition-delay:.54s }
.ry-stagger.in > *:nth-child(6){ transition-delay:.66s }
.ry-words span{
display:inline-block; opacity:0; transform:translateY(28px) rotate(3deg);
transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.ry-words.in span{ opacity:1; transform:translateY(0) rotate(0); }
.ry-letters span{
display:inline-block; opacity:0; transform:translateY(40px) scale(.5);
transition:opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.ry-letters.in span{ opacity:1; transform:translateY(0) scale(1); }
/* ==========================================================================
9 · MARQUEE — ORIGINAL outlined design, restored per your decision.
ONE definition. Speed is set by Custom JS via data-speed on the element.
========================================================================== */
.ry-mq{
overflow:hidden; white-space:nowrap; position:relative; max-width:100%;
padding:clamp(14px,2.4vw,30px) 0;
}
.ry-mq-track{ display:inline-block; white-space:nowrap; will-change:transform; }
.ry-mq span{
font-family:var(--ry-serif); font-weight:600; font-style:normal;
font-size:clamp(38px,7vw,84px); line-height:1.15; margin:0 clamp(20px,3vw,40px);
letter-spacing:normal;
color:transparent;
-webkit-text-stroke:1.5px var(--mq-color,var(--ry-gold));
text-stroke:1.5px var(--mq-color,var(--ry-gold));
filter:drop-shadow(0 0 14px rgba(184,150,62,.25));
opacity:1;
}
/* solid accent word */
.ry-mq .fill{
color:var(--mq-color,var(--ry-gold)) !important;
-webkit-text-stroke:0 !important; text-stroke:0 !important;
filter:none; font-style:italic;
}
/* optional hairline-dot separator, if the new marquee copy is used */
.ry-mq .ry-mq-dot{
display:inline-block; width:6px; height:6px; border-radius:50%;
background:var(--ry-gold); vertical-align:middle;
margin:0 clamp(20px,3vw,40px); opacity:.7;
}
.ry-mq.on-dark{ background:var(--ry-ink); --mq-color:var(--ry-gold); }
.ry-mq.on-white{ background:#fff; --mq-color:var(--ry-ink); }
.ry-mq.on-cream{ background:var(--ry-cream); --mq-color:var(--ry-gold); }
.ry-mq.on-image{ --mq-color:#ffffff; }
.ry-mq.on-image::before{ content:""; position:absolute; inset:0; background:rgba(10,9,8,.5); }
.ry-mq.on-image .ry-mq-track{ position:relative; z-index:2; }
/* ==========================================================================
10 · USP STRIP
========================================================================== */
.ry-usp{
background:var(--ry-ink); max-width:100%; overflow:hidden;
border-top:1px solid rgba(184,150,62,.25);
border-bottom:1px solid rgba(184,150,62,.25);
font-family:var(--ry-sans);
}
.ry-usp-track{
display:flex; justify-content:center; flex-wrap:wrap;
gap:14px 34px; padding:15px 20px;
}
.ry-usp-track span{
display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
font-size:11px; letter-spacing:2px; color:var(--ry-on-dark-2); text-transform:uppercase;
}
.ry-usp-track i{ color:var(--ry-gold); font-style:normal; }
.ry-usp-track b{ color:var(--ry-gold); font-weight:500; }
/* desktop shows one set; the duplicate exists only to seam the mobile loop */
@media (min-width:768px){
.ry-usp-track span:nth-child(n+6){ display:none; }
}
/* ==========================================================================
11 · SECTIONS — custom homepage blocks
R1: horizontal padding only; Elementor owns vertical.
========================================================================== */
/* ---- 11.1 · The Raylam Standard (bento grid) ---- */
.ry-std{ background:var(--ry-ink); padding:0 var(--ry-pad-x); font-family:var(--ry-sans); }
.ry-std-head{ text-align:center; max-width:var(--ry-max); margin-left:auto; margin-right:auto; }
.ry-std-head h2{ color:var(--ry-on-dark); margin:12px 0 0; }
.ry-std-grid{
display:grid; grid-template-columns:repeat(6,1fr);
gap:2px; max-width:var(--ry-max); margin:0 auto;
}
.ry-std-cell{
position:relative; overflow:hidden;
background:var(--ry-ink-2); border:1px solid rgba(184,150,62,.16);
padding:clamp(26px,2.6vw,36px);
transition:background .5s ease, border-color .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.ry-std-cell::before{
content:""; position:absolute; inset:0;
background:radial-gradient(circle at 100% 0%, rgba(184,150,62,.20), transparent 62%);
opacity:0; transition:opacity .5s ease;
}
.ry-std-cell:hover{
background:var(--ry-ink-3); border-color:rgba(184,150,62,.5); transform:translateY(-4px);
}
.ry-std-cell:hover::before{ opacity:1; }
.ry-std-cell > *{ position:relative; z-index:2; }
.ry-std-n{
font-size:13px !important; letter-spacing:.2em !important;
color:var(--ry-gold); display:block; margin-bottom:16px;
}
.ry-std-cell h3{
font-weight:600 !important; font-size:var(--ry-fs-h3);
color:var(--ry-on-dark); margin:0 0 10px; line-height:1.25;
}
.ry-std-cell p{ font-size:var(--ry-fs-small); line-height:1.75; color:var(--ry-on-dark-3); margin:0; }
.ry-std-cell.wide{ grid-column:span 3; }
.ry-std-cell.wide h3{ font-size:clamp(26px,3.2vw,36px); }
.ry-std-cell.wide p{ font-size:15px; max-width:44ch; }
.ry-std-cell.half{ grid-column:span 3; }
.ry-std-cell.third{ grid-column:span 2; }
.ry-std-cta{ text-align:center; margin-top:clamp(30px,3.6vw,46px); }
@media (max-width:900px){
.ry-std-grid{ grid-template-columns:repeat(2,1fr); }
.ry-std-cell.wide, .ry-std-cell.half, .ry-std-cell.third{ grid-column:span 2; }
}
/* ---- 11.2 · Founder note ---- */
.ry-founder{
display:grid; grid-template-columns:1fr 1.12fr;
background:var(--ry-ink); font-family:var(--ry-sans);
max-width:var(--ry-max); margin-left:auto; margin-right:auto;
}
.ry-founder-img{ background-size:cover; background-position:center; min-height:440px; }
.ry-founder-txt{
padding:clamp(40px,6vw,84px); display:flex; flex-direction:column; justify-content:center;
}
.ry-founder-txt h2{
font-weight:600 !important; font-size:var(--ry-fs-h2);
color:var(--ry-on-dark); margin:12px 0 20px;
}
.ry-founder-txt p{
font-size:var(--ry-fs-body); line-height:1.75;
color:var(--ry-on-dark-2); margin:0 0 16px; max-width:52ch;
}
.ry-founder-quote{
border-left:2px solid var(--ry-gold); padding-left:20px; margin:6px 0 22px;
font-family:var(--ry-serif); font-style:italic;
font-size:clamp(18px,2.1vw,22px); line-height:1.5; color:var(--ry-on-dark);
}
.ry-founder-sig{ border-top:1px solid rgba(184,150,62,.25); padding-top:20px; margin-top:6px; }
.ry-founder-sig .n{
font-family:var(--ry-serif); font-style:italic; font-size:26px;
color:var(--ry-gold); line-height:1;
}
.ry-founder-sig .r{
font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
color:var(--ry-muted-2); margin-top:8px; display:block;
}
@media (max-width:880px){
.ry-founder{ grid-template-columns:1fr; }
.ry-founder-img{ min-height:280px; }
}
/* ---- 11.3 · Golden-thread quote ---- */
.ry-thread{
position:relative; overflow:hidden; background:var(--ry-ink);
padding:0 var(--ry-pad-x); text-align:center;
}
.ry-thread::before{
content:""; position:absolute; inset:0;
background:radial-gradient(ellipse at 50% 40%, rgba(184,150,62,.14), transparent 60%);
}
.ry-thread-inner{ position:relative; z-index:3; max-width:760px; margin:0 auto; }
.ry-thread h2{
font-weight:600 !important; color:var(--ry-on-dark);
line-height:1.12 !important; margin:16px 0 0;
}
.ry-thread h2 em{ color:var(--ry-gold); font-style:italic; }
.ry-thread-line{
height:1px; background:rgba(184,150,62,.2); margin:30px auto;
max-width:340px; position:relative; overflow:hidden;
}
.ry-thread-line i{
position:absolute; left:0; top:0; height:100%; width:0;
background:linear-gradient(90deg,transparent,var(--ry-gold),transparent);
box-shadow:0 0 12px var(--ry-gold);
}
.ry-thread-inner.in .ry-thread-line i{
animation:ryThreadDraw 2.6s cubic-bezier(.6,0,.2,1) forwards,
ryThreadSweep 3s 2.6s ease-in-out infinite;
}
@keyframes ryThreadDraw{ from{width:0;left:0} to{width:100%;left:0} }
@keyframes ryThreadSweep{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.ry-thread p{
font-family:var(--ry-serif); font-style:italic;
font-size:clamp(17px,2.2vw,21px); color:var(--ry-on-dark-2);
margin:0 auto; max-width:540px; line-height:1.6;
}
.ry-thread-p{
position:absolute; left:var(--x); top:var(--y); width:4px; height:4px;
border-radius:50%; background:var(--ry-gold); opacity:0;
box-shadow:0 0 10px 2px rgba(184,150,62,.6);
animation:ryThreadFloat 6s var(--d) ease-in-out infinite; z-index:2;
}
@keyframes ryThreadFloat{
0%,100%{ opacity:0; transform:translateY(10px) }
50% { opacity:.8; transform:translateY(-14px) }
}
/* ---- 11.4 · Signature Finder tiles ---- */
.ry-find{
display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ry-gap);
max-width:var(--ry-max); margin:0 auto; padding:0 var(--ry-pad-x);
}
.ry-find-tile{
position:relative; overflow:hidden; min-height:clamp(340px,42vw,460px);
background-size:cover; background-position:center; text-decoration:none;
display:flex; align-items:flex-end;
transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.ry-find-tile::before{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg,transparent 30%,rgba(10,9,8,.85));
transition:background .5s ease;
}
.ry-find-tile::after{
content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
transform:skewX(-20deg); transition:left .8s cubic-bezier(.4,0,.2,1);
}
.ry-find-tile:hover{ transform:translateY(-8px); }
.ry-find-tile:hover::after{ left:130%; }
.ry-find-c{ position:relative; z-index:2; padding:clamp(24px,3vw,36px); }
.ry-find-c .e{
font-family:var(--ry-sans); font-size:11px; letter-spacing:.24em;
color:var(--ry-gold); text-transform:uppercase;
}
.ry-find-c h3{
font-weight:600 !important; font-size:clamp(24px,3vw,32px);
color:var(--ry-on-dark); margin:8px 0 10px;
}
.ry-find-c .cta{
font-family:var(--ry-sans); font-size:12px; letter-spacing:.16em;
color:var(--ry-on-dark); text-transform:uppercase;
opacity:0; transform:translateY(10px);
transition:opacity .4s ease, transform .4s ease; display:inline-block;
}
.ry-find-tile:hover .cta{ opacity:1; transform:translateY(0); color:var(--ry-gold); }
@media (max-width:820px){
.ry-find{ grid-template-columns:1fr; }
.ry-find-tile{ min-height:300px; }
.ry-find-c .cta{ opacity:1; transform:none; }
}
/* ---- 11.5 · Stat counters ---- */
.ry-nums{
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,40px);
max-width:1000px; margin:0 auto; padding:0 var(--ry-pad-x); text-align:center;
}
.ry-num .n{
font-weight:600 !important; font-size:clamp(40px,7vw,68px);
color:var(--ry-gold); line-height:1; display:block;
}
.ry-num .l{
font-family:var(--ry-sans); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--ry-muted-3); margin-top:10px; display:block;
}
@media (max-width:640px){ .ry-nums{ grid-template-columns:1fr; gap:26px; } }
/* ---- 11.6 · Explore by Mood ---- */
.ry-mood2{
display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ry-gap);
max-width:var(--ry-max); margin:0 auto; padding:0 var(--ry-pad-x);
}
.ry-mood2-c{
position:relative; overflow:hidden; display:block; text-decoration:none;
aspect-ratio:3/4; background-size:cover; background-position:center;
transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.ry-mood2-c::before{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(10,9,8,.05) 35%, rgba(10,9,8,.88) 100%);
transition:background .5s ease;
}
.ry-mood2-c:hover{ transform:translateY(-6px); }
.ry-mood2-c:hover::before{
background:linear-gradient(180deg, rgba(10,9,8,.2) 20%, rgba(10,9,8,.94) 100%);
}
.ry-mood2-in{
position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(16px,2vw,24px);
}
.ry-mood2-in h3{
font-weight:600 !important; font-size:clamp(22px,2.4vw,28px);
color:var(--ry-on-dark); margin:0 0 6px; line-height:1.1;
}
.ry-mood2-in span{
font-family:var(--ry-sans); font-size:10.5px; letter-spacing:.08em;
color:var(--ry-on-dark-2); display:block; line-height:1.5;
}
.ry-mood2-in i{
display:block; height:1px; width:0; background:var(--ry-gold); margin-top:12px;
transition:width .6s cubic-bezier(.65,0,.35,1);
}
.ry-mood2-c:hover .ry-mood2-in i{ width:48px; }
@media (max-width:900px){ .ry-mood2{ grid-template-columns:repeat(2,1fr); } }
/* MOOD GRID height fix (R4): aspect-ratio tiles contribute ZERO height to
the Elementor flex widget — without these the widget collapses to 10px
and the next section paints over the tiles. Verified formulas. */
@media (max-width:767px){
.elementor-widget:has(> .ry-mood2){ min-height: calc(100vw - 2*var(--ry-pad-x)); }
}
@media (min-width:768px) and (max-width:900px){
.elementor-widget:has(> .ry-mood2){
min-height: calc(((min(1200px,100vw) - 2*var(--ry-pad-x) - var(--ry-gap))/2) * 8/3 + var(--ry-gap));
}
}
@media (min-width:901px){
.elementor-widget:has(> .ry-mood2){
min-height: calc(((min(1200px,100vw) - 2*var(--ry-pad-x) - 3*var(--ry-gap))/4) * 4/3);
}
}
/* ---- 11.7 · Why Extrait — concentration explainer ---- */
.ry-conc{ background:var(--ry-ink); padding:0 var(--ry-pad-x); font-family:var(--ry-sans); }
.ry-conc-head{ text-align:center; max-width:640px; margin:0 auto; }
.ry-conc-head h2{ color:var(--ry-on-dark); margin:12px 0 16px; }
.ry-conc-head p{
font-size:var(--ry-fs-body); line-height:var(--ry-lh-body);
color:var(--ry-on-dark-2); margin:0;
}
.ry-conc-grid{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:2px; }
.ry-conc-row{
display:grid; grid-template-columns:1.5fr 3fr .7fr .9fr;
align-items:center; gap:18px; padding:20px 22px;
background:var(--ry-ink-2); border:1px solid rgba(184,150,62,.14);
transition:background .4s ease, border-color .4s ease;
}
.ry-conc-row:hover{ background:var(--ry-ink-3); }
.ry-conc-t{ font-size:13px; letter-spacing:.06em; color:var(--ry-on-dark-3); }
.ry-conc-t b{ color:var(--ry-gold); font-weight:500; }
.ry-conc-bar{ height:6px; background:rgba(184,150,62,.12); position:relative; display:block; }
.ry-conc-bar i{
position:absolute; left:0; top:0; height:100%; background:rgba(184,150,62,.4);
display:block; transform-origin:left; transform:scaleX(0);
transition:transform 1.2s cubic-bezier(.65,0,.35,1) .2s;
}
.ry-stagger.in .ry-conc-bar i,
.ry-conc-grid.in .ry-conc-bar i{ transform:scaleX(1); }
.ry-conc-v{ font-size:12px; color:var(--ry-muted-2); text-align:right; }
.ry-conc-h{ font-size:12px; color:var(--ry-muted-2); text-align:right; letter-spacing:.04em; }
.ry-conc-row.is-us{ background:#191512; border-color:rgba(184,150,62,.5); }
.ry-conc-row.is-us .ry-conc-t{ color:var(--ry-on-dark); font-size:14px; }
.ry-conc-row.is-us .ry-conc-bar i{
background:var(--ry-gold); box-shadow:0 0 16px rgba(184,150,62,.6);
}
.ry-conc-row.is-us .ry-conc-v,
.ry-conc-row.is-us .ry-conc-h{ color:var(--ry-gold); }
.ry-conc-foot{
text-align:center; margin:clamp(26px,3vw,38px) 0 0;
font-family:var(--ry-serif); font-style:italic; font-size:19px; color:var(--ry-gold);
}
/* ---- 11.8 · Testimonials — ONE implementation, calm auto-scroll ---- */
.ry-tm{
background:var(--ry-cream); padding:0; max-width:100%;
overflow:hidden; font-family:var(--ry-sans);
}
.ry-tm-head{
text-align:center; padding:0 var(--ry-pad-x);
max-width:var(--ry-max); margin-left:auto; margin-right:auto;
}
.ry-tm-head h2{ color:var(--ry-on-light); margin:12px 0 8px; }
.ry-tm-head .sub{ font-size:13px; color:var(--ry-gold-deep); letter-spacing:.04em; }
.ry-tm-strip{
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ry-tm-strip + .ry-tm-strip{ margin-top:16px; }
.ry-tm-row{ display:flex; gap:16px; width:max-content; animation:ryTmScroll 90s linear infinite; }
.ry-tm-strip:nth-of-type(3) .ry-tm-row{ animation-duration:105s; animation-direction:reverse; }
@keyframes ryTmScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ry-tm:hover .ry-tm-row{ animation-play-state:paused; }
.ry-tm-card{
flex:0 0 auto; width:clamp(250px,26vw,300px);
background:#fff; border:1px solid var(--ry-hair); border-top:2px solid var(--ry-gold);
padding:22px 22px 18px; display:flex; flex-direction:column;
}
.ry-tm-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ry-tm-stars{ color:var(--ry-gold); letter-spacing:2px; font-size:13px; }
.ry-tm-stars .e{ color:#DED3B8; }
.ry-tm-stars.four i{ color:#D8CDB4; font-style:normal; }
.ry-tm-badge{
font-size:9px; letter-spacing:.08em; text-transform:uppercase;
color:#8A9A6A; border:1px solid #cdd8b8; padding:2px 6px; border-radius:2px;
}
.ry-tm-card p{ font-size:14.5px; line-height:1.55; color:#2C2822; margin:0 0 14px; flex:1; }
.ry-tm-who{
display:flex; align-items:center; gap:10px;
border-top:1px solid #F0E9D8; padding-top:12px;
}
.ry-tm-av{
width:30px; height:30px; border-radius:50%;
background:var(--ry-ink); color:var(--ry-gold);
display:flex; align-items:center; justify-content:center;
font-family:var(--ry-serif); font-size:14px; flex:0 0 auto;
}
.ry-tm-nm{ line-height:1.3; }
.ry-tm-nm .n{ font-size:12.5px; color:var(--ry-on-light); font-weight:500; }
.ry-tm-nm .c{ font-size:10.5px; color:var(--ry-gold-deep); }
.ry-tm-prod{
font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
color:var(--ry-gold); margin-left:auto;
}
/* ---- 11.9 · Homepage FAQ ---- */
.ry-faq{ background:var(--ry-page); padding:0 var(--ry-pad-x); font-family:var(--ry-sans); }
.ry-faq-head{ text-align:center; max-width:var(--ry-max); margin-left:auto; margin-right:auto; }
.ry-faq-head h2{ color:var(--ry-on-light); margin:12px 0 0; }
.ry-faq-list{ max-width:760px; margin:0 auto; }
.ry-faq-i{ border-bottom:1px solid var(--ry-hair); }
.ry-faq-i summary{
list-style:none; cursor:pointer; padding:22px 34px 22px 0; position:relative;
font-size:clamp(19px,2.1vw,22px) !important;
font-weight:600 !important; color:var(--ry-on-light); transition:color .3s ease;
}
.ry-faq-i summary::-webkit-details-marker{ display:none; }
.ry-faq-i summary:hover{ color:var(--ry-gold-deep); }
.ry-faq-i summary::after{
content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
color:var(--ry-gold); font-size:22px; font-family:var(--ry-sans);
transition:transform .3s ease;
}
.ry-faq-i[open] summary::after{ content:"\2212"; }
.ry-faq-i p{
font-size:var(--ry-fs-body); line-height:var(--ry-lh-body); color:var(--ry-muted);
margin:0 0 22px; max-width:64ch;
}
/* ---- 11.10 · Closing CTA + Woo widget alignment ---- */
.ry-close{ padding-left:var(--ry-pad-x); padding-right:var(--ry-pad-x); }
.elementor-widget-woocommerce-products .woocommerce,
.elementor-widget-wd_products .woocommerce{
max-width:var(--ry-max); margin-left:auto; margin-right:auto;
}
/* ==========================================================================
12 · CART DRAWER — correct WoodMart 8.5.5 structure
.cart-widget-side > .wd-heading + .widget_shopping_cart >
.widget_shopping_cart_content > .shopping-cart-widget-body (scrolls)
+ .shopping-cart-widget-footer
min-height:0 at every flex level lets the middle pane shrink.
========================================================================== */
.cart-widget-side{
display:flex !important;
flex-direction:column !important;
}
.cart-widget-side .wd-heading{
flex:0 0 auto !important;
border-bottom:1px solid rgba(184,150,62,.2) !important;
}
.cart-widget-side .widget_shopping_cart{
flex:1 1 auto !important;
display:flex !important; flex-direction:column !important;
min-height:0 !important;
}
.cart-widget-side .widget_shopping_cart_content{
flex:1 1 auto !important;
display:flex !important; flex-direction:column !important;
min-height:0 !important;
}
.cart-widget-side .shopping-cart-widget-body{
flex:1 1 auto !important;
min-height:0 !important;
overflow-y:auto !important;
}
.cart-widget-side .shopping-cart-widget-footer{
flex:0 0 auto !important;
border-top:1px solid rgba(184,150,62,.25) !important;
}
/* Rows */
.cart-widget-side .cart_list li,
.widget_shopping_cart .cart_list li{
position:relative !important;
padding:14px 34px 14px 0 !important;
border-bottom:1px solid rgba(0,0,0,.06) !important;
}
/* Hide the "Show" label on WoodMart's invisible full-row click target,
keep the click area. Three mechanisms on purpose — any one suffices. */
.widget_shopping_cart .cart-item-link,
.cart-widget-side .cart-item-link,
a.cart-item-link.wd-fill{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
font-size:0 !important;
line-height:0 !important;
color:transparent !important;
text-indent:-9999px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-decoration:none !important;
}
.cart-widget-side .cart-item-link *,
.widget_shopping_cart .cart-item-link *{
font-size:0 !important; color:transparent !important;
}
/* Remove button: hide the literal "×" text node, keep ONE ::before glyph */
.cart-widget-side .cart_list li a.remove_from_cart_button,
.widget_shopping_cart .cart_list li a.remove_from_cart_button,
.cart-widget-side .cart_list li a.remove,
.widget_shopping_cart .cart_list li a.remove{
font-size:0 !important;
line-height:0 !important;
color:transparent !important;
position:absolute !important;
top:10px !important; right:0 !important;
z-index:3 !important;
width:28px !important; height:28px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
}
.cart-widget-side .cart_list li a.remove_from_cart_button::before,
.widget_shopping_cart .cart_list li a.remove_from_cart_button::before,
.cart-widget-side .cart_list li a.remove::before,
.widget_shopping_cart .cart_list li a.remove::before{
content:"\00d7" !important;
font-family:var(--ry-sans) !important;
font-size:20px !important;
line-height:1 !important;
color:var(--ry-muted-3) !important;
transition:color .25s ease;
}
.cart-widget-side .cart_list li a.remove_from_cart_button:hover::before,
.widget_shopping_cart .cart_list li a.remove_from_cart_button:hover::before{
color:var(--ry-ink) !important;
}
/* Drawer typography */
.cart-widget-side .cart_list li .wd-entities-title,
.widget_shopping_cart .cart_list li .wd-entities-title{
font-family:var(--ry-serif) !important;
font-size:17px !important;
font-weight:600 !important;
letter-spacing:0 !important;
line-height:1.2 !important;
}
.cart-widget-side .quantity,
.widget_shopping_cart .quantity{
font-family:var(--ry-sans) !important;
font-size:13px !important;
color:var(--ry-gold-deep) !important;
}
/* ==========================================================================
13 · FLOATING BUTTONS — WhatsApp + scroll-top
R6: only .scrollToTop is the button. Never position .wd-scroll.
========================================================================== */
.ry-wa{
position:fixed; right:20px; bottom:20px; z-index:9997;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 20px rgba(0,0,0,.28); text-decoration:none;
transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.ry-wa:hover{ transform:scale(1.08); box-shadow:0 10px 28px rgba(37,211,102,.5); }
.ry-wa svg{ width:30px; height:30px; fill:#fff; }
.ry-wa::after{
content:""; position:absolute; inset:0; border-radius:50%;
border:2px solid #25D366; animation:ryWaPulse 2.4s ease-out infinite;
pointer-events:none;
}
@keyframes ryWaPulse{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.7);opacity:0} }
.scrollToTop{
right:20px !important; bottom:88px !important; z-index:9996 !important;
}
/* ==========================================================================
14 · SHOP / ARCHIVE / SYSTEM PAGE SPACING
========================================================================== */
.post-type-archive-product .wd-content-layout,
.tax-product_cat .wd-content-layout,
.woocommerce-cart .wd-content-layout,
.woocommerce-checkout .wd-content-layout,
.woocommerce-account .wd-content-layout,
.search-results .wd-content-layout,
.error404 .wd-content-layout{
padding-top:clamp(28px,3.5vw,48px) !important;
padding-bottom:clamp(40px,5vw,72px) !important;
}
.post-type-archive-product .page-title + .wd-content-layout,
.tax-product_cat .page-title + .wd-content-layout{
padding-top:clamp(20px,2.5vw,34px) !important;
}
/* ==========================================================================
15 · MOBILE (≤767px) — every phone rule, once
========================================================================== */
@media (max-width:767px){
/* 15.1 — Card hierarchy: name leads at 21px, stacked price supports */
ul.products li.product .wd-entities-title,
.wd-product .wd-entities-title,
.woocommerce-loop-product__title{
font-size:21px !important;
font-weight:600 !important;
letter-spacing:0 !important;
line-height:1.15 !important;
text-transform:none !important;
margin:16px 0 5px !important;
}
.wd-product .price,
ul.products li.product .price{ font-size:15px !important; color:var(--ry-gold-deep) !important; }
.wd-product .price del,
ul.products li.product .price del{ font-size:12px !important; }
.wd-product .price ins,
ul.products li.product .price ins{ font-size:15px !important; }
/* 15.2 — Card presentation: overlays off, centred, uniform image shape */
.wd-product .wd-add-btn,
.wd-product .wd-buttons,
.wd-product .wd-hover-content,
.wd-product .wd-product-cats{ display:none !important; }
ul.products li.product,
.wd-product{ text-align:center !important; padding-bottom:14px !important; }
.wd-product .product-image-link img,
ul.products li.product .product-image-link img{
aspect-ratio:1/1 !important;
object-fit:cover !important;
width:100% !important; height:auto !important;
}
/* sale badge hidden on mobile cards — the stacked was-price already
tells the story; the badge is just clutter at this size */
ul.products li.product .onsale,
.wd-product .onsale{ display:none !important; }
/* 15.3 — Shop toolbar quieted */
.woocommerce-result-count,
.wd-shop-tools .wd-sidebar-opener,
.wd-shop-tools span{
font-size:11px !important; letter-spacing:.06em !important;
font-weight:400 !important; text-transform:uppercase !important;
}
/* 15.4 — Marquee sized for phones (original outlined look) */
.ry-mq span{ font-size:clamp(28px,9vw,44px); margin:0 14px;
-webkit-text-stroke-width:1px; filter:none; }
.ry-mq{ padding:12px 0; }
.ry-mq .ry-mq-dot{ width:4px; height:4px; margin:0 16px; }
/* 15.5 — USP strip: one line, slow drift */
.ry-usp-track{
flex-wrap:nowrap; justify-content:flex-start;
width:max-content; gap:0; padding:12px 0;
animation:ryUspScroll 45s linear infinite;
}
.ry-usp-track span{ flex:0 0 auto; font-size:10px; letter-spacing:1.4px; padding:0 18px; }
@keyframes ryUspScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* 15.6 — Testimonials: one slow row */
.ry-tm-card{ width:270px; }
.ry-tm-strip:nth-of-type(3){ display:none; }
.ry-tm-row{ animation-duration:110s; }
/* 15.7 — Bento + comparison table stack */
.ry-std-grid{ grid-template-columns:1fr; }
.ry-std-cell.wide, .ry-std-cell.half, .ry-std-cell.third{ grid-column:span 1; }
.ry-std-cell{ padding:24px 20px; }
.ry-std-cell.wide h3{ font-size:26px; }
.ry-std-cell.wide p{ font-size:14.5px; }
.ry-conc-row{ grid-template-columns:1fr auto; gap:6px 12px; padding:16px; }
.ry-conc-bar{ grid-column:1 / -1; order:3; }
.ry-conc-h{ display:none; }
.ry-conc-t{ font-size:12.5px; }
/* 15.8 — Mood tiles: squares, all four reachable */
.ry-mood2{ gap:10px; }
.ry-mood2-c{ aspect-ratio:1/1; }
.ry-mood2-in{ padding:14px; }
.ry-mood2-in h3{ font-size:21px; }
.ry-mood2-in span{ font-size:9.5px; }
.ry-mood2-in i{ width:32px; }
.ry-founder-txt{ padding:34px 20px; }
/* 15.9 — Section headings gain optical weight on low-DPI screens */
.ry-std-head h2, .ry-conc-head h2, .ry-faq-head h2,
.ry-tm-head h2, .ry-thread h2, .ry-founder-txt h2{
font-weight:700 !important;
-webkit-font-smoothing:antialiased;
}
/* 15.10 — Hero slider */
.wd-slider, .wd-slide, .elementor-widget-wd_slider{ min-height:520px !important; }
.wd-slide-content, .wd-slide-inner{ text-align:center !important; padding:20px !important; }
.wd-slide-content h2, .wd-slide-heading{
font-size:30px !important; line-height:1.2 !important;
}
/* 15.11 — Single product page */
.single-product div.product .product_title{ font-size:32px !important; }
.single-product .entry-summary > .price,
.single-product .entry-summary > .price ins,
.single-product .summary-inner > .price,
.single-product .summary-inner > .price ins{ font-size:26px !important; }
.single-product .entry-summary > .price del,
.single-product .summary-inner > .price del{ font-size:16px !important; }
.raylam-tagline{ font-size:14px; }
.raylam-pill{ font-size:11px; padding:5px 11px; }
.raylam-trust{ gap:10px 14px; }
.raylam-trust span{ font-size:10px; letter-spacing:.04em; }
.single-product div.product .wd-add-btns,
.single-product div.product .woodmart-add-btns,
.single-product div.product form.cart{
grid-template-columns:1fr 104px !important; gap:8px !important;
}
.single-product div.product .quantity input.qty{ width:36px !important; }
.single-product div.product .quantity .plus,
.single-product div.product .quantity .minus{ width:32px !important; }
.single-product div.product .single_add_to_cart_button{
font-size:11px !important; letter-spacing:.1em !important; padding:0 10px !important;
}
.single-product div.product .woodmart-buy-now-btn,
.single-product div.product .wd-buy-now-btn,
.single-product div.product a.buy_now_button{
font-size:11px !important; letter-spacing:.12em !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li{ width:22% !important; }
/* 15.12 — Breadcrumbs scroll instead of pushing width */
.woocommerce-breadcrumb, .wd-breadcrumbs{
font-size:11px; overflow-x:auto; white-space:nowrap;
scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.woocommerce-breadcrumb::-webkit-scrollbar,
.wd-breadcrumbs::-webkit-scrollbar{ display:none; }
/* 15.13 — Blocks may not scroll inside themselves (R3: clip, not hidden) */
.ry-std, .ry-conc, .ry-faq, .ry-tm, .ry-founder,
.ry-thread, .ry-find, .ry-nums, .ry-mood2{
overflow-x:clip;
overflow-y:visible;
max-width:100%;
}
/* 15.14 — Footer breathing room */
.footer-container .widget{ margin-bottom:28px; }
/* 15.15 — Tap targets */
.ry-btn{
min-height:46px; display:inline-flex; align-items:center; justify-content:center;
}
/* 15.16 — Floating buttons */
.ry-wa{ width:52px; height:52px; right:14px; bottom:14px; }
.ry-wa svg{ width:27px; height:27px; }
.scrollToTop{ right:14px !important; bottom:76px !important; }
}
/* ==========================================================================
16 · EDITORIAL PAGES (About Us + shared dividers)
========================================================================== */
.ry-sec{
padding:clamp(52px,7vw,92px) clamp(22px,5vw,48px);
max-width:900px; margin:0 auto; text-align:center;
}
.ry .serif, .ry h1, .ry h2, .ry h3{ font-family:var(--ry-serif); }
.ry-h{ font-size:var(--ry-fs-h2); line-height:1.15; color:var(--ry-on-light); }
.ry-h-hero{ font-size:clamp(38px,7.5vw,60px); line-height:1.04; color:#fff; }
.ry-body{
font-size:var(--ry-fs-body); color:var(--ry-muted);
line-height:var(--ry-lh-body); max-width:640px; margin:0 auto;
}
/* Gold rule divider — About Us AND Contact Us */
.ry-rule{
width:0; height:2px; background:var(--ry-gold); margin:20px auto;
transition:width 1.2s cubic-bezier(.65,0,.35,1) .2s;
}
.in .ry-rule, .ry-rule.in{ width:64px; }
/* Our Story cards */
.ry-cards{
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2.5vw,24px); max-width:900px; margin:36px auto 0;
}
.ry-card{
background:var(--ry-cream); padding:clamp(26px,3vw,38px) 22px;
transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.ry-card:hover{ transform:translateY(-10px); box-shadow:0 22px 46px rgba(184,150,62,.24); }
.ry-card .ico{ font-size:30px; color:var(--ry-gold); }
.ry-card h3{
font-family:var(--ry-serif); font-size:clamp(19px,2.4vw,22px);
margin:12px 0 8px; color:var(--ry-on-light);
}
.ry-card p{ font-size:14px; color:var(--ry-muted-2); line-height:1.65; margin:0; }
@media (max-width:767px){ .ry-cards{ grid-template-columns:1fr; } }
/* Blur reveal variant (JS adds .in) */
.ry-blur{
opacity:0; filter:blur(14px); transform:translateY(20px);
transition:opacity 1s ease, filter 1s ease, transform 1s ease;
}
.ry-blur.in{ opacity:1; filter:blur(0); transform:translateY(0); }
/* ==========================================================================
17 · ACCESSIBILITY
========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
outline:2px solid var(--ry-gold);
outline-offset:3px;
border-radius:1px;
}
.ry-faq-i summary:focus-visible,
.raylam-acc summary:focus-visible{ outline-offset:1px; }
@media (prefers-contrast:more){
.ry-std-cell p, .ry-conc-t, .ry-founder-txt p{ color:#D8D2C6 !important; }
}
/* ==========================================================================
18 · SMALL SCREENS (≤380px — Galaxy A-series, older iPhones)
========================================================================== */
@media (max-width:380px){
ul.products li.product .wd-entities-title,
.wd-product .wd-entities-title{ font-size:19px !important; }
.ry-mood2-in h3{ font-size:19px; }
.ry-std-cell{ padding:20px 16px; }
.ry-conc-row{ padding:14px 12px; }
}
/* ==========================================================================
19 · REDUCED MOTION — one block
(The marquee and count-up respect this in the Custom JS.)
========================================================================== */
@media (prefers-reduced-motion:reduce){
.ry-reveal, .ry-stagger > *, .ry-words span, .ry-letters span, .ry-blur{
opacity:1 !important; transform:none !important; filter:none !important;
}
.ry-rule{ width:64px !important; transition:none !important; }
.ry-std-cell, .ry-card, .raylam-pill, .ry-find-tile, .ry-mood2-c{
transition:none !important;
}
.ry-tm-row{ animation:none !important; }
.ry-tm-strip{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
.ry-usp-track{
animation:none !important; flex-wrap:wrap !important;
width:auto !important; justify-content:center !important; gap:10px 20px !important;
}
.ry-thread-line i{ width:100% !important; animation:none !important; }
.ry-thread-p{ display:none; }
.ry-wa::after{ animation:none; }
a.btn{ transition:none !important; }
a.btn::before{ display:none !important; }
a.btn:hover{ transform:none !important; }
}
/* ============================ END OF v5 ================================== */
/* ==========================================================================
RAYLAM v5 — §20 HERO SLIDES · EDITORIAL EDITION
Replaces any earlier §20. Delete the old block first, then paste this.
==========================================================================
WHY THE LAST VERSION LOOKED PLAIN
==========================================================================
It was one white line and a bar. A luxury fragrance hero is a COMPOSITION,
not a headline. This version adds the three things that actually read as
expensive, all measured live on your slider:
1. A gold eyebrow above the heading, wide-tracked, different per slide.
(Chanel / Dior / Le Labo all open with a small line before the big
one. It is the single biggest "editorial" signal available.)
2. A two-tone heading — one word in gold italic. This is already your
house style: your Raylam Promise reads "We make yours *unforgettable*"
in gold italic. The hero now speaks the same language.
3. A refined hairline that FADES at both ends instead of a hard 64px bar,
and slow motion built from letter-spacing + transform only.
ALSO FIXED HERE: your slide content was capped at max-width:66% by an
Elementor setting, so the heading only got 257px of a 390px screen and
broke into a cramped column. Widened to 90% on mobile — heading now gets
334px at 47px type. Verified: no overflow, content sits inside the slide.
==========================================================================
TWO THINGS TO DO IN ELEMENTOR (both quick)
==========================================================================
A) TURN OFF THE CONTENT ANIMATION — this is what made the heading vanish.
Slides widget → Style → Slides → Content Animation → None
(Elementor's JS calls jQuery .hide() on the slide content and the
re-show never fires. Proof: your page loads slideInUp.min.css.
The display:block !important below is a safety net either way.)
B) MAKE THE HEADING TWO-TONE — type HTML directly in the Heading field:
Find Your Signature Scent
Made for Daylight
Worn After Dark
For the Ones Who Arrive
The word renders gold + italic automatically (styled below).
If Elementor prints the tags as literal text instead, just remove them
— everything else still works and still looks premium.
SAFETY (v5 rule R5): no animation here touches opacity or text-fill.
Worst case on any browser = solid white heading + gold rule. It cannot
disappear again, which is exactly what went wrong before.
========================================================================== */
/* ---- 20.1 · Reveal the slide content (safety net for Content Animation) --- */
.elementor-slides .swiper-slide-contents{
display:block !important;
position:relative;
z-index:1;
}
/* NOTE: there is deliberately NO rule setting `position` on
.swiper-slide-inner. Elementor needs it absolute; overriding it drops the
text BELOW the image. That was the original bug. Do not add one. */
/* ---- 20.2 · Cinematic scrim ----------------------------------------------
Slight darkening at the very top (so the logo/menu stay legible), clear
through the middle (bottles stay bright), deep at the bottom (text). */
.elementor-slides .swiper-slide-inner::before{
content:"";
position:absolute; inset:0;
z-index:0;
pointer-events:none;
background:linear-gradient(180deg,
rgba(10,9,8,.10) 0%,
rgba(10,9,8,0) 34%,
rgba(10,9,8,.40) 64%,
rgba(10,9,8,.82) 100%);
}
/* ---- 20.3 · THE EYEBROW — per slide, pure CSS ---------------------------
Uses Swiper's own data-swiper-slide-index, so it stays correct even
though Swiper clones slides for the infinite loop.
Edit the four `content:` strings to whatever you like. */
.elementor-slides .swiper-slide-contents::before{
content:"The Signature Collection";
display:block;
font-family:var(--ry-sans);
font-size:10px;
font-weight:400;
letter-spacing:.46em;
text-transform:uppercase;
color:var(--ry-gold);
margin:0 0 16px 4px; /* 4px left offset optically centres tracked caps */
opacity:.95;
}
[data-swiper-slide-index="1"] .swiper-slide-contents::before{ content:"Extrait de Parfum"; }
[data-swiper-slide-index="2"] .swiper-slide-contents::before{ content:"Crafted in Karachi"; }
[data-swiper-slide-index="3"] .swiper-slide-contents::before{ content:"A Voice Wrapped in Fragrance"; }
/* eyebrow settles in from wide tracking */
.elementor-slides .swiper-slide-active .swiper-slide-contents::before{
animation:ryEyebrow 1.5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ryEyebrow{
from{ letter-spacing:.85em; transform:translateY(8px); }
to { letter-spacing:.46em; transform:translateY(0); }
}
/* ---- 20.4 · THE HEADING -------------------------------------------------- */
.elementor-slide-heading{
color:#fff !important;
-webkit-text-fill-color:#fff !important; /* hard-undo any cached rule */
background-image:none !important;
font-family:var(--ry-serif) !important;
font-weight:600 !important;
font-size:clamp(40px,5vw,72px) !important;
line-height:1.02 !important;
letter-spacing:-.005em !important;
text-wrap:balance;
text-shadow:0 2px 30px rgba(10,9,8,.6);
position:relative;
padding-bottom:26px;
margin:0 !important;
}
/* the gold italic accent word — type word in the Heading field */
.elementor-slide-heading em,
.elementor-slide-heading i,
.elementor-slide-heading strong{
color:var(--ry-gold) !important;
-webkit-text-fill-color:var(--ry-gold) !important;
font-style:italic !important;
font-weight:600 !important;
}
/* rise + settle on each slide change (transform only — never opacity) */
.elementor-slides .swiper-slide-active .elementor-slide-heading{
animation:ryHeroRise 1.2s cubic-bezier(.2,.7,.2,1) .1s both;
}
@keyframes ryHeroRise{
from{ transform:translateY(30px) scale(.98); }
to { transform:translateY(0) scale(1); }
}
/* ---- 20.5 · The hairline — fades at both ends, draws itself in ---------- */
.elementor-slide-heading::after{
content:"";
position:absolute; left:50%; bottom:6px;
transform:translateX(-50%);
height:1px; width:150px;
background:linear-gradient(90deg,
transparent, rgba(184,150,62,.9) 30%, rgba(184,150,62,.9) 70%, transparent);
}
.elementor-slides .swiper-slide-active .elementor-slide-heading::after{
animation:ryHeroLine 1.6s cubic-bezier(.65,0,.35,1) .55s both;
}
@keyframes ryHeroLine{
from{ width:0; }
to { width:150px; }
}
/* ---- 20.6 · Desktop-only description + button ---------------------------
(Hidden on mobile in 20.7. Only styled in case you use them on desktop.) */
.elementor-slide-description{
font-family:var(--ry-sans) !important;
font-size:13px !important;
letter-spacing:.16em;
text-transform:uppercase;
color:#D8D2C6 !important;
text-shadow:0 1px 14px rgba(10,9,8,.6);
margin-top:6px;
}
.elementor-slide-button{
font-family:var(--ry-sans) !important;
font-size:12px !important;
letter-spacing:.2em !important;
text-transform:uppercase !important;
color:#fff !important;
border:1px solid rgba(184,150,62,.85) !important;
border-radius:0 !important;
padding:14px 34px !important;
background:rgba(10,9,8,.25) !important;
transition:background-color .4s ease, color .4s ease, border-color .4s ease;
}
.elementor-slide-button:hover{
background:var(--ry-gold) !important;
color:var(--ry-ink) !important;
border-color:var(--ry-gold) !important;
}
/* ---- 20.7 · MOBILE — eyebrow + heading + rule, nothing else -------------
The whole slide is already a link, so no button is needed to convert. */
@media (max-width:767px){
.elementor-slide-button,
.elementor-slide-description{ display:none !important; }
/* VERTICAL POSITION — the fix for "Middle overlaps the bottles, Top looks
cheap". Leave Elementor's Vertical Position on MIDDLE; this overrides it
on phones only: anchor the block to the top, then drop it into the upper
third with a margin.
Measured live on a 570px slide at 390px wide:
eyebrow starts 18% down · heading 28% · block ends 45%
— clear of the bottles, nowhere near flush-top.
TO NUDGE IT: change the 26vw below. Bigger = lower, smaller = higher.
24vw ≈ 2% higher · 28vw ≈ 2% lower
Do NOT use padding-top on .swiper-slide-inner — Elementor generates an
ID-level padding rule that beats it. Margin on the contents wins. */
.elementor-slides .swiper-slide-inner{
align-items:flex-start !important;
}
.elementor-slides .swiper-slide-contents{
margin-top:clamp(80px,26vw,150px) !important;
}
/* Elementor caps content at 66% — far too narrow on a phone.
(You can also raise this in Slides → Style → Slides → Content Width.) */
.elementor-slides .swiper-slide-contents{
max-width:90% !important;
padding:0 6px 8px !important;
}
.elementor-slide-heading{
font-size:clamp(40px,12vw,50px) !important;
padding-bottom:24px;
}
.elementor-slides .swiper-slide-contents::before{
font-size:9.5px; letter-spacing:.4em; margin-bottom:14px;
}
.elementor-slide-heading::after{ width:120px; }
.elementor-slides .swiper-slide-active .elementor-slide-heading::after{
animation-name:ryHeroLineM;
}
@keyframes ryHeroLineM{ from{ width:0; } to{ width:120px; } }
}
/* very small phones */
@media (max-width:380px){
.elementor-slide-heading{ font-size:38px !important; }
.elementor-slides .swiper-slide-contents::before{ letter-spacing:.34em; }
}
/* ---- 20.8 · Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.elementor-slides .swiper-slide-active .elementor-slide-heading,
.elementor-slides .swiper-slide-active .elementor-slide-heading::after,
.elementor-slides .swiper-slide-active .swiper-slide-contents::before,
.elementor-slide-heading{
animation:none !important;
transform:none !important;
}
.elementor-slide-heading::after{
width:120px; transform:translateX(-50%) !important;
}
}
/* ========================== END OF §20 HERO ============================== */
/* ==========================================================================
RAYLAM v5 — §21 INSTANT PRODUCT GALLERY
Append to the END of your existing WoodMart → Theme Settings →
Custom CSS → Global file, after "END OF §20 HERO".
Do NOT delete anything. This is additive.
WHY THIS EXISTS
Measured live on /product/oud-celestia/ :
· Gallery slide 3 had naturalWidth 0 — the browser had never fetched
it. Clicking a thumbnail STARTED the download. That is the pause
you are seeing.
· The product video is 8.6 MB with no poster and no preload
attribute, so it downloads in full on every visit and shows an
empty rectangle until it buffers.
The JS (§21 in Custom JS) does the loading work. This file does the
looking-good work: reserved space, a cream shimmer instead of a white
gap, and a fade instead of a pop.
RULE COMPLIANCE
R1 No vertical padding here — horizontal/box only.
R4 aspect-ratio is used on .wd-carousel-item, which is a CAROUSEL
child, not an Elementor flex child, so the collapse-to-gap bug
does not apply. If a gallery ever does collapse, swap the
aspect-ratio line for min-height:449px and it behaves identically.
R5 Nothing here hides content behind a load-fired opacity animation.
The fade is opt-in via a class the JS adds, so a script failure
leaves the gallery fully visible rather than blank.
========================================================================== */
/* ---- 21.1 · Reserve the space ------------------------------------------
Product images are square (700×700 / 1280×1280). Locking the ratio
stops reflow as each slide arrives and gives the shimmer a box. */
.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item{
position:relative; /* anchors the shimmer in 21.2 */
aspect-ratio:1/1;
background-color:var(--ry-cream);
overflow:hidden;
}
.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item > img,
.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item > a > img{
width:100%; height:100%;
object-fit:cover;
display:block;
}
/* ---- 21.2 · Shimmer while a slide resolves -----------------------------
Sits underneath; the image paints over it. One background-position
animation, no JS, composited. */
.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item::before{
content:"";
position:absolute; inset:0; z-index:0;
background:linear-gradient(100deg,
var(--ry-cream) 30%,
#EFE7D6 48%,
var(--ry-cream) 66%);
background-size:220% 100%;
animation:ryShimmer 1.5s ease-in-out infinite;
}
.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item > img,
.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item > a{
position:relative; z-index:1;
}
@keyframes ryShimmer{
0% { background-position:130% 0; }
100%{ background-position:-30% 0; }
}
/* ---- 21.3 · Fade in, don't pop -----------------------------------------
Class-based and JS-driven, per R5. Deliberately NOT
"img{opacity:0}" — that would blank the gallery if the script ever
failed to run. Default is visible; the fade is the enhancement. */
.woocommerce-product-gallery .wd-gallery-images img.ry-fade{
opacity:0;
transition:opacity .32s cubic-bezier(.22,.61,.36,1);
}
.woocommerce-product-gallery .wd-gallery-images img.ry-fade.ry-loaded{
opacity:1;
}
/* ---- 21.4 · Video sits flush, never shows a black box ------------------
The mp4 is 1080×1920 (vertical) in a square frame. object-fit keeps it
filling the slot; the poster set by the JS covers the gap before the
first frame decodes. */
.wd-product-video,
.wd-product-video.wd-fill{
background-color:var(--ry-cream);
overflow:hidden;
}
.wd-product-video video{
width:100%; height:100%;
object-fit:cover;
display:block;
background-color:var(--ry-cream);
}
/* ---- 21.5 · Gallery thumbnails ----------------------------------------
Matches the gold-outline active state used on the flex-control thumbs
in §7.10, so both gallery styles agree. */
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item img{
aspect-ratio:1/1;
object-fit:cover;
opacity:.72;
transition:opacity .2s ease, transform .2s ease;
}
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item img:hover{
opacity:1;
transform:scale(1.03);
}
.woocommerce-product-gallery .wd-gallery-thumb .wd-active img,
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item.wd-active img{
opacity:1;
outline:1px solid var(--ry-gold);
outline-offset:-1px;
}
/* ---- 21.6 · Reduced motion --------------------------------------------
Mirrors §19. */
@media (prefers-reduced-motion:reduce){
.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item::before{
animation:none !important;
}
.woocommerce-product-gallery .wd-gallery-images img.ry-fade,
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item img{
transition:none !important;
}
.woocommerce-product-gallery .wd-gallery-images img.ry-fade{
opacity:1 !important;
}
}
/* ========================= END OF §21 GALLERY ============================ */
/**
* RAYLAM v5 — §24 NATURAL IMAGERY
*
* DELETE §22 AND §23 FIRST, then paste this in their place.
* Do not stack them — that is what made this complicated.
*
* What this does: removes every dark overlay from the banners and the
* marquee so the photography shows as shot. Text stays readable via a
* shadow on the letters themselves rather than by darkening the picture.
*
* That is also the more premium approach. A scrim dims the whole image
* to protect a few words. A text-shadow protects only the words.
*/
/* 24.1 - NO SCRIM ON THE BANNERS. All devices. */
.elementor-slides .swiper-slide-inner::before{
background: none !important;
}
/* 24.2 - NO OVERLAY ON THE MARQUEE. */
.ry-mq.on-image::before{
background: none !important;
}
/* 24.3 - KEEP THE HEADING READABLE WITHOUT DARKENING THE IMAGE.
*
* This is what replaces the scrim. The shadow sits tight to the glyphs,
* so it is invisible against the photograph but keeps white type legible
* over a bright slide.
*
* If a heading still gets lost on your brightest banner, raise the two
* .55 values toward .75 — that is the only number worth touching here.
*/
.elementor-slide-heading{
text-shadow:
0 1px 2px rgba(10,9,8,.55),
0 2px 12px rgba(10,9,8,.55) !important;
}
.elementor-slides .swiper-slide-contents::before{
text-shadow: 0 1px 4px rgba(10,9,8,.6);
}
.elementor-slide-heading::after{
box-shadow: 0 0 10px rgba(10,9,8,.35);
}
/* 24.4 - MARQUEE BACK TO ITS ORIGINAL DARK BAND.
*
* §23 lifted this to #14110F. Reverting to the v5 token so the strip
* matches every other dark section on the site.
*/
.ry-mq.on-dark{
background: var(--ry-ink) !important;
}
/* 24.5 - WHATSAPP BUTTON: PULSE RESTORED.
*
* §23.4 switched this off on phones. The button itself was never removed.
*/
@media (max-width:767px){
.ry-wa::after{
animation: ryWaPulse 2.4s ease-out infinite !important;
}
.ry-thread-p{
display: revert;
}
}
/* 24.6 - KEEP THE ONE PERFORMANCE FIX FROM §23.
*
* The §21 shimmer had no stop condition and kept animating invisibly
* behind every loaded gallery image. This is not a visual change — it
* only stops wasted work once the photo has arrived.
*/
.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item:has(img.ry-loaded)::before{
animation: none !important;
opacity: 0;
}
.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item::before{
animation-iteration-count: 4 !important;
animation-fill-mode: forwards !important;
}
/**
* RAYLAM v5 — §27 HEADER DROPDOWN
*
* Append to the end of WoodMart Theme Settings → Custom CSS → Global.
* Additive. Refines the dropdown styling set in §4.
*
* WHAT WAS WRONG
*
* 1. An 80x80 icons8 clip-art image sits inside the "The Collection"
* link. It is pale on a white panel, so it reads as a block of dead
* space rather than an icon, and it forces the panel to roughly three
* times the height one text item needs. This is the single biggest
* reason the menu looks cheap. Stock icons and luxury retail do not
* belong in the same nav.
*
* 2. The parent item was centred while the flyout items were left
* aligned — two alignments in one component.
*
* 3. The third-level flyout (MEN / WOMEN / UNISEX) opened with a visual
* gap and a vertical offset, so the two panels read as separate
* floating boxes instead of one connected menu.
*
* 4. A stray rule sat under the parent item.
*
* The fix is subtraction: remove the icon, tighten the panel to its type,
* align everything left, and butt the flyout against its parent.
*/
/* 27.1 - REMOVE THE STOCK ICON. This is most of the fix. */
.whb-header .wd-nav-img,
.whb-header .wd-sub-menu img,
.whb-header .wd-dropdown-menu img.wd-nav-img{
display: none !important;
}
/* 27.2 - PANEL SIZED TO ITS CONTENT, NOT TO A PHANTOM ICON. */
.whb-header .wd-dropdown-menu{
min-width: 236px !important;
padding: 10px 0 !important;
}
.whb-header .wd-dropdown-menu > .container,
.whb-header .wd-dropdown-menu > .wd-entry-content,
.whb-header .wd-dropdown-menu > .container.wd-entry-content{
padding: 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
.whb-header .wd-sub-menu{
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
}
/* 27.3 - ONE ALIGNMENT. Left, everywhere. */
.whb-header .wd-dropdown-menu a,
.whb-header .wd-sub-menu a,
.whb-header .sub-sub-menu a{
display: block !important;
text-align: left !important;
padding: 10px 24px !important;
font-family: var(--ry-sans) !important;
font-size: 11.5px !important;
font-weight: 400 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
color: var(--ry-muted) !important;
line-height: 1.4 !important;
white-space: nowrap !important;
}
.whb-header .wd-dropdown-menu a:hover,
.whb-header .wd-sub-menu a:hover,
.whb-header .sub-sub-menu a:hover{
color: var(--ry-gold-deep) !important;
background: transparent !important;
}
/* 27.4 - THE PARENT ITEM READS AS A HEADING, NOT A TWIN. */
.whb-header .wd-sub-menu > li.menu-item-has-children > a{
color: var(--ry-on-light) !important;
font-weight: 500 !important;
}
/* 27.5 - NO STRAY RULES INSIDE THE PANEL. */
.whb-header .wd-dropdown-menu li,
.whb-header .wd-sub-menu li,
.whb-header .sub-sub-menu li{
border: 0 !important;
margin: 0 !important;
}
.whb-header .wd-dropdown-menu li::after,
.whb-header .wd-sub-menu li::after{
display: none !important;
}
/* 27.6 - BUTT THE FLYOUT AGAINST ITS PARENT.
*
* Aligned to the top of the parent panel and flush to its right edge, so
* the two panels read as one menu opening sideways rather than as two
* boxes floating near each other.
*/
.whb-header .sub-sub-menu,
.whb-header .wd-sub-menu .wd-dropdown{
top: -10px !important;
left: 100% !important;
margin: 0 !important;
min-width: 190px !important;
padding: 10px 0 !important;
border: 1px solid rgba(184,150,62,.25) !important;
border-left: 0 !important;
box-shadow: 0 24px 60px rgba(10,9,8,.18) !important;
}
/* 27.7 - THE CHEVRON SITS INLINE WITH ITS LABEL.
*
* It was rendering below "Shop" as a detached mark. This pins it back
* beside the text at a size that reads as punctuation, not decoration.
*/
.whb-header .menu-item-has-children > a > .wd-nav-arrow{
position: static !important;
display: inline-block !important;
margin: 0 0 0 6px !important;
font-size: 9px !important;
line-height: 1 !important;
vertical-align: middle !important;
opacity: .55 !important;
transform: none !important;
}
.whb-header .menu-item-has-children:hover > a > .wd-nav-arrow{
opacity: 1 !important;
}
/* 27.8 - A HAIRLINE BETWEEN SIBLINGS, ONLY WHERE THERE ARE SEVERAL. */
.whb-header .sub-sub-menu > li + li > a{
border-top: 1px solid rgba(232,224,208,.7) !important;
}
/**
* RAYLAM v5 — §28 NAV CHEVRON + PAGE TITLES
*
* Append to the end of WoodMart Theme Settings → Custom CSS → Global.
*
* FIXES TWO THINGS
*
* 1. The detached chevron under "Shop".
* 2. Page titles rendering near-black over dark banner images.
*/
/* 28.3 - PAGE TITLES IN WHITE, EVERY PAGE.
*
* The title block already carries .color-scheme-light, but the title
* inherits the body colour (--ry-on-light, near-black) and renders dark
* over the banner image. This sets it explicitly.
*
* Applies site-wide: My Account, Cart, Checkout, Shop, Contact, and any
* page using the WoodMart page-title block with a background image.
*/
.wd-page-title .title,
.wd-page-title .entry-title,
.wd-page-title h1,
.page-title .entry-title,
.page-title h1.title{
color: #FFFFFF !important;
text-shadow: 0 1px 3px rgba(10,9,8,.55), 0 2px 16px rgba(10,9,8,.4) !important;
}
/* 28.4 - BREADCRUMBS TO MATCH.
*
* Current page in a soft off-white, links in gold, separators muted.
*/
.wd-page-title .wd-breadcrumbs,
.wd-page-title .breadcrumbs,
.wd-page-title .aioseo-breadcrumbs{
color: rgba(255,255,255,.82) !important;
text-shadow: 0 1px 3px rgba(10,9,8,.5) !important;
}
.wd-page-title .wd-breadcrumbs a,
.wd-page-title .breadcrumbs a,
.wd-page-title .aioseo-breadcrumbs a{
color: var(--ry-gold) !important;
}
.wd-page-title .wd-breadcrumbs a:hover,
.wd-page-title .breadcrumbs a:hover{
color: #FFFFFF !important;
}
.wd-page-title .wd-breadcrumbs .breadcrumb-separator,
.wd-page-title .wd-breadcrumbs em{
color: rgba(255,255,255,.45) !important;
}
/* 28.5 - A SCRIM ONLY WHERE TYPE SITS ON A PHOTOGRAPH.
*
* §24 removed the scrim from the hero slider, which was the right call —
* those banners are the product. This is a different case: the page-title
* strip has text centred over an arbitrary image, so it needs a floor of
* contrast. Kept light, and only on the title block.
*
* Delete this block if you would rather the image stayed completely clean
* and are happy relying on the text-shadow above.
*/
.wd-page-title .wd-page-title-bg::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10,9,8,.28) 0%,
rgba(10,9,8,.34) 100%);
pointer-events: none;
}
.wd-page-title .container{
position: relative;
z-index: 2;
}
/**
* RAYLAM v5 — §29 DROPDOWN CHEVRONS
*
* DELETE §28.1 AND §28.2 FIRST — this replaces them.
* Keep the rest of §28 (page titles, breadcrumbs).
* Paste at the end of Custom CSS.
*
* WHY THE OLD ARROW LOOKED WRONG
* WoodMart draws its chevron as a glyph from its icon font on
* .woodmart-nav-link::after, at 7px. §4 then claimed that same
* pseudo-element for the gold underline. One element cannot be a 1px
* underline and a 7px glyph at the same time, so the chevron ended up
* detached below the label, sitting on the white dropdown panel.
*
* This takes ::after for the chevron alone and draws it in CSS instead of
* an icon font: two 1px borders rotated 45 degrees. That gives a crisp
* hairline chevron at any size and any pixel density, with a stroke weight
* that matches the hairline rules used elsewhere in v5 — an icon font at
* 7px cannot do that.
*
* The hover underline is unaffected: WoodMart's wd-style-underline effect
* lives on span.nav-link-text::after, not here.
*/
/* 29.1 - TOP-LEVEL CHEVRON. Sits inline, points down. */
.whb-header .wd-nav-main > li.menu-item-has-children > a.woodmart-nav-link::after,
.whb-header .wd-nav-header > li.menu-item-has-children > a.woodmart-nav-link::after{
content: "" !important;
display: inline-block !important;
position: static !important;
width: 5px !important;
height: 5px !important;
margin: 0 0 0 9px !important;
padding: 0 !important;
border: 0 !important;
border-right: 1px solid currentColor !important;
border-bottom: 1px solid currentColor !important;
background: none !important;
transform: translateY(-2px) rotate(45deg) !important;
transform-origin: center !important;
vertical-align: middle !important;
opacity: .6 !important;
transition: transform .35s cubic-bezier(.65,0,.35,1),
opacity .3s ease,
border-color .3s ease !important;
}
/* 29.2 - ON HOVER: FLIP TO POINT UP, IN GOLD.
*
* The flip is the affordance — it says the panel is open. 225deg rather
* than -135deg so the rotation travels the long way round and reads as a
* deliberate movement.
*/
.whb-header .wd-nav-main > li.menu-item-has-children:hover > a.woodmart-nav-link::after,
.whb-header .wd-nav-header > li.menu-item-has-children:hover > a.woodmart-nav-link::after{
transform: translateY(1px) rotate(225deg) !important;
border-color: var(--ry-gold) !important;
opacity: 1 !important;
}
/* 29.3 - KEEP THE HOVER UNDERLINE.
*
* Explicit, so nothing later disables the theme effect now that ::after
* is doing a different job.
*/
.whb-header .wd-nav-main > li > a .nav-link-text::after,
.whb-header .wd-nav-header > li > a .nav-link-text::after{
display: block !important;
background: var(--ry-gold) !important;
height: 1px !important;
}
/* 29.4 - SUB-MENU CHEVRON. Points right, pinned to the panel edge.
*
* "The Collection" opens a flyout to the side, so its marker should point
* that way. Absolutely positioned here because the item is a block link
* and the chevron belongs at the right edge, not after the word.
*/
.whb-header .wd-sub-menu > li.menu-item-has-children > a{
position: relative !important;
padding-right: 40px !important;
}
.whb-header .wd-sub-menu > li.menu-item-has-children > a::after{
content: "" !important;
display: block !important;
position: absolute !important;
top: 50% !important;
right: 20px !important;
width: 4px !important;
height: 4px !important;
border: 0 !important;
border-right: 1px solid currentColor !important;
border-top: 1px solid currentColor !important;
background: none !important;
transform: translateY(-50%) rotate(45deg) !important;
opacity: .45 !important;
transition: right .3s cubic-bezier(.65,0,.35,1),
opacity .3s ease,
border-color .3s ease !important;
}
.whb-header .wd-sub-menu > li.menu-item-has-children:hover > a::after{
right: 15px !important;
opacity: 1 !important;
border-color: var(--ry-gold-deep) !important;
}
/* 29.5 - MOBILE MENU CHEVRONS.
*
* The off-canvas menu uses its own opener button. Same hairline language,
* larger tap target.
*/
.mobile-nav .wd-nav-opener,
.wd-side-hidden .wd-nav-opener{
opacity: .55 !important;
}
.mobile-nav .wd-nav-opener:hover,
.wd-side-hidden .wd-nav-opener:hover{
opacity: 1 !important;
color: var(--ry-gold) !important;
}
/* 29.6 - RESPECT REDUCED MOTION. Mirrors §19. */
@media (prefers-reduced-motion: reduce){
.whb-header .menu-item-has-children > a::after,
.whb-header .wd-sub-menu > li.menu-item-has-children > a::after{
transition: none !important;
}
}