/* ============================================
TAN REDUCTION — whiten canvas, boost contrast
Bone was #FBF8F2 warm tan mush against cream sections
============================================ */
/* tokens moved to assets/css/au-tokens.css (single source of truth) 2026-09-09 */
html, body { background: var(--au-bone) !important; }
/* Homepage section zebra — white vs cream for visible separation */
body.home section.au-tile--bone { background: #FFFFFF !important; }
body.home section.au-tile--cream { background: #F4EFE7 !important; }
/* Featured Peptides section — force white so gold cards pop */
body.home section.au-tile.au-tile--bone { background: #FFFFFF !important; }
/* PDP + shop + inner pages: canvas whiter */
body.single-product,
body.woocommerce.archive,
body.post-type-archive-product,
body.page:not(.home),
body.blog { background: #FDFCFA !important; }
body.single-product article,
body.woocommerce.archive main,
body.blog main { background: transparent !important; }
/* Card contrast bump — white cards on any tinted parent */
.au-card { background: #FFFFFF !important; border: 1px solid rgba(31,27,23,0.12) !important; }
.au-card__media { background: #F7F4EE !important; }
/* PDP hero atelier bg — kill tan bg on product card */
body.single-product article > div:first-of-type + div > div:first-child > div {
background: #F4EFE7 !important;
}
/* Tab panels white for max contrast */
.au-pdp-tabs__panel { background: #FFFFFF !important; }
/* ============================================
ACCESSIBILITY GUARDRAILS
Kill inherited outline:none, force visible focus ring
============================================ */
*:focus-visible {
outline: 2px solid #8F6E1F !important;
outline-offset: 3px !important;
border-radius: 4px !important;
box-shadow: 0 0 0 4px rgba(184,150,46,0.15) !important;
}
button:focus-visible,
a:focus-visible {
outline-color: #8F6E1F !important;
}
/* Mobile bnav — 44x44 touch minimum */
@media (max-width: 768px) {
.aureum-bnav-item,
#aureum-bnav a,
.aureum-mobile-bnav a {
min-width: 60px !important;
min-height: 44px !important;
padding: 8px 12px !important;
}
}
/* Body text gold escalated to bronze (contrast 4.5:1 vs bone) */
.au-hero__sub,
.au-tile__lede,
p.au-hero__sub,
body .au-marquee__item {
color: var(--au-ink-soft, #4A4540) !important;
}
/* --au-gold-safe now lives in assets/css/au-tokens.css (same value #8F6E1F) */
/* ============================================
PLUGIN LEAK KILLERS — v6 navy + Cormorant + aaf tokens
Fires across ALL pages regardless of plugin injection
============================================ */
/* Site-wide navy #1A1A2E leak → atelier ink #1F1B17 */
.aureum-bnav,
#aureumBnav,
[style*="#1A1A2E"],
[style*="1A1A2E"] {
--aaf-dark: #1F1B17 !important;
}
/* Kill hardcoded navy gradient on PDP RUO badge above ATC form */
body.single-product form.cart div[style*="linear-gradient(135deg,#1A1A2E"],
body.single-product form.cart div[style*="linear-gradient(135deg, #1A1A2E"],
body.single-product .aureum-cc-styles div[style*="#1A1A2E"],
body.single-product [style*="linear-gradient(135deg,#1A1A2E"] {
background: var(--au-ink, #1F1B17) !important;
background-image: none !important;
border: 1px solid rgba(184,150,46,0.4) !important;
}
/* AAF plugin Cormorant leak — force Fraunces */
.aaf-heading,
.aaf-heading *,
.aaf-compare-card-body h3,
.aaf-compare-modal-header h2,
.aaf-review-title,
[class^="aaf-"] h1, [class^="aaf-"] h2, [class^="aaf-"] h3,
[class^="aaf-"] .heading {
font-family: 'Fraunces', Georgia, serif !important;
font-style: normal !important;
}
.aaf-body-font,
[class^="aaf-"] p,
[class^="aaf-"] span:not(.woocommerce-Price-currencySymbol),
[class^="aaf-"] li,
[class^="aaf-"] a,
[class^="aaf-"] button,
[class^="aaf-"] input,
[class^="aaf-"] textarea {
font-family: 'Inter Tight', -apple-system, sans-serif !important;
}
/* AAF plugin dark token — force atelier ink */
:root {
--aaf-dark: #1F1B17 !important;
--aaf-gold: #B8962E !important;
--aaf-gold-hover: #8F6E1F !important;
--aaf-cream: #F4EFE7 !important;
--aaf-cream-alt: #ECE5D5 !important;
}
/* Kill @import Cormorant loading site-wide (plugin @import can't be cache-busted, but font-family override wins render) */
body, body * {
font-family: 'Inter Tight', -apple-system, sans-serif;
}
body h1, body h2, body h3, body h4, body h5,
body [style*="Cormorant"],
body [style*="Fraunces"] {
font-family: 'Fraunces', Georgia, serif !important;
}
body.woocommerce-page a.button,
body input, body select, body textarea, body button {
font-family: 'Inter Tight', sans-serif !important;
}
/* Exit popup — add dialog semantics via CSS (JS role add fallback) */
#aureum-exit-popup { outline: none !important; }
#aureum-exit-popup[aria-hidden="true"] { display: none !important; }
/* Verify page duplicate H1 kill — plugin injects its own h1 alongside page.php h1 */
body.page .aureum-coa-header h1 { display: none !important; }
/* Style page.php default h1 to atelier (was 86px black) */
body.page:not(.woocommerce-page):not(.home) .hentry > h1,
body.page:not(.woocommerce-page):not(.home) .post > h1:first-child {
font-family: 'Fraunces', Georgia, serif !important;
font-size: clamp(40px, 5vw, 64px) !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
color: var(--au-ink, #1F1B17) !important;
font-weight: 400 !important;
margin: 40px auto 24px !important;
text-align: center !important;
max-width: 900px !important;
padding: 0 24px !important;
}
/* === MARQUEE CRITICAL (re-anchor in case head cascade strip) === */
header.au-nav-top .au-marquee {
display: block !important;
overflow: hidden !important;
background: var(--au-ink) !important;
color: var(--au-bone) !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
white-space: nowrap !important;
position: relative !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
line-height: 1 !important;
}
header.au-nav-top .au-marquee__track {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
white-space: nowrap !important;
width: max-content !important;
animation: au-marquee-scroll 60s linear infinite !important;
will-change: transform !important;
gap: 0 !important;
}
header.au-nav-top .au-marquee:hover .au-marquee__track { animation-play-state: paused !important; }
header.au-nav-top .au-marquee__item {
display: inline-flex !important;
align-items: center !important;
gap: 14px !important;
padding: 11px 28px !important;
font-family: var(--au-body) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
color: rgba(251,248,242,0.78) !important;
font-weight: 500 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
header.au-nav-top .au-marquee__dot {
width: 4px !important; height: 4px !important;
border-radius: 50% !important;
background: var(--au-gold) !important;
box-shadow: 0 0 8px rgba(184,150,46,0.6) !important;
flex-shrink: 0 !important;
display: inline-block !important;
}
@keyframes au-marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* === STICKY SCROLL-SHRINK NAV === */
header.au-nav-top {
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
transition: background 0.3s ease, box-shadow 0.3s ease !important;
}
header.au-nav-top.au-scrolled {
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
background: rgba(251,248,242,0.88) !important;
box-shadow: 0 1px 0 var(--au-hairline), 0 8px 32px rgba(15,12,9,0.06) !important;
}
header.au-nav-top.au-scrolled .au-marquee {
max-height: 0 !important;
padding: 0 !important;
border-bottom: 0 !important;
opacity: 0 !important;
transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease !important;
}
header.au-nav-top.au-scrolled .au-nav-main { padding-top: 12px !important; padding-bottom: 12px !important; transition: padding 0.3s ease !important; }
header.au-nav-top.au-scrolled .au-nav-main__brand { font-size: 22px !important; transition: font-size 0.3s ease !important; }
/* === ACTIVE PAGE INDICATOR === */
.au-nav-main__links li > a { position: relative !important; transition: color 0.2s ease !important; }
.au-nav-main__links li > a::after {
content: '' !important;
position: absolute !important;
bottom: -6px !important;
left: 50% !important;
width: 0 !important;
height: 2px !important;
background: var(--au-gold) !important;
transform: translateX(-50%) !important;
transition: width 0.3s cubic-bezier(0.2,0.8,0.2,1) !important;
border-radius: 1px !important;
box-shadow: 0 0 8px rgba(184,150,46,0.4) !important;
}
.au-nav-main__links li > a:hover::after,
.au-nav-main__links li.is-active > a::after { width: 24px !important; }
.au-nav-main__links li.is-active > a { color: var(--au-gold) !important; }
/* === LOGO DOT PULSE === */
.au-brand-dot {
color: var(--au-gold) !important;
font-style: italic !important;
display: inline-block !important;
transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), text-shadow 0.4s ease !important;
}
.au-nav-main__brand:hover .au-brand-dot {
transform: scale(1.4) rotate(8deg) !important;
text-shadow: 0 0 20px rgba(184,150,46,0.6) !important;
}
/* === LIVE CART COUNT BADGE === */
.au-nav-main__cart-count {
position: absolute !important;
top: -4px !important;
right: -4px !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
background: var(--au-gold) !important;
color: var(--au-ink) !important;
font-family: var(--au-body) !important;
font-size: 10px !important;
font-weight: 700 !important;
border-radius: 9999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
border: 2px solid var(--au-paper) !important;
box-shadow: 0 2px 8px rgba(184,150,46,0.4) !important;
pointer-events: none !important;
}
.au-cart-icon { position: relative !important; }
.au-cart-icon.au-bounce .au-nav-main__cart-count { animation: au-cart-bounce 0.6s cubic-bezier(0.2,0.8,0.2,1) !important; }
@keyframes au-cart-bounce {
0%, 100% { transform: scale(1); }
30% { transform: scale(1.4); background: #d4ae3e; }
60% { transform: scale(0.9); }
}
/* === MEGA-MENU v7 === */
.au-has-mega { position: relative !important; }
.au-mega-panel {
position: absolute !important;
top: calc(100% + 18px) !important;
left: 50% !important;
transform: translateX(-50%) translateY(-8px) !important;
width: min(880px, 92vw) !important;
background: var(--au-paper) !important;
border: 1px solid var(--au-hairline) !important;
border-radius: 18px !important;
box-shadow: 0 24px 80px rgba(15,12,9,0.15), 0 0 0 1px rgba(184,150,46,0.05) !important;
padding: 36px !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2,0.8,0.2,1), visibility 0.25s !important;
z-index: 200 !important;
}
.au-has-mega:hover .au-mega-panel,
.au-has-mega:focus-within .au-mega-panel {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) !important;
}
.au-mega-panel::before {
content: '' !important;
position: absolute !important;
top: -10px !important;
left: 50% !important;
transform: translateX(-50%) rotate(45deg) !important;
width: 16px !important;
height: 16px !important;
background: var(--au-paper) !important;
border-left: 1px solid var(--au-hairline) !important;
border-top: 1px solid var(--au-hairline) !important;
}
.au-mega-panel__inner { display: grid !important; grid-template-columns: 1.3fr 1fr !important; gap: 40px !important; }
.au-mega-panel__label {
display: block !important;
font-family: var(--au-body) !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: var(--au-gold) !important;
font-weight: 600 !important;
margin-bottom: 18px !important;
}
.au-mega-cat {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 16px !important;
margin: 0 -16px !important;
border-radius: 10px !important;
color: var(--au-ink) !important;
text-decoration: none !important;
transition: background 0.2s ease, padding-left 0.3s ease !important;
}
.au-mega-cat:hover { background: var(--au-cream) !important; padding-left: 24px !important; color: var(--au-gold) !important; }
.au-mega-cat__name { font-family: var(--au-display) !important; font-size: 17px !important; letter-spacing: -0.01em !important; }
.au-mega-cat__count { font-family: var(--au-mono) !important; font-size: 11px !important; color: var(--au-ink-muted) !important; margin-left: auto !important; margin-right: 12px !important; }
.au-mega-cat__arrow { color: var(--au-gold) !important; opacity: 0 !important; transition: opacity 0.2s ease, transform 0.3s ease !important; }
.au-mega-cat:hover .au-mega-cat__arrow { opacity: 1 !important; transform: translateX(4px) !important; }
.au-mega-feat {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 12px !important;
margin-bottom: 8px !important;
border-radius: 12px !important;
color: var(--au-ink) !important;
text-decoration: none !important;
transition: background 0.2s ease !important;
}
.au-mega-feat:hover { background: var(--au-cream) !important; }
.au-mega-feat__thumb {
width: 52px !important;
height: 52px !important;
border-radius: 10px !important;
overflow: hidden !important;
background: var(--au-linen) !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.au-mega-feat__thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.au-mega-feat__body { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.au-mega-feat__name { font-family: var(--au-display) !important; font-size: 15px !important; color: var(--au-ink) !important; letter-spacing: -0.01em !important; }
.au-mega-feat__price { font-family: var(--au-body) !important; font-size: 12px !important; color: var(--au-gold) !important; font-weight: 600 !important; }
.au-mega-feat__price .woocommerce-Price-amount { font-weight: 600 !important; }
.au-mega-cta {
display: block !important;
text-align: center !important;
margin-top: 16px !important;
padding: 12px !important;
background: var(--au-ink) !important;
color: var(--au-bone) !important;
border-radius: 9999px !important;
font-family: var(--au-body) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: background 0.2s ease, color 0.2s ease !important;
}
.au-mega-cta:hover { background: var(--au-gold) !important; color: var(--au-ink) !important; }
/* === SEARCH DRAWER === */
.au-search-drawer {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
background: var(--au-paper) !important;
border-bottom: 1px solid var(--au-hairline) !important;
box-shadow: 0 16px 48px rgba(15,12,9,0.12) !important;
max-height: 0 !important;
overflow: hidden !important;
transition: max-height 0.4s cubic-bezier(0.2,0.8,0.2,1) !important;
visibility: hidden !important;
}
.au-search-drawer.open { max-height: 240px !important; visibility: visible !important; }
.au-search-drawer__inner { max-width: 1080px !important; margin: 0 auto !important; padding: 24px clamp(1.5rem, 4vw, 3rem) !important; }
.au-search-drawer__form {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding-bottom: 18px !important;
border-bottom: 1px solid var(--au-hairline) !important;
color: var(--au-ink-muted) !important;
}
.au-search-drawer__input {
flex: 1 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
font-family: var(--au-display) !important;
font-size: clamp(20px, 3vw, 32px) !important;
color: var(--au-ink) !important;
letter-spacing: -0.015em !important;
padding: 6px 0 !important;
}
.au-search-drawer__input::placeholder { color: var(--au-ink-muted) !important; font-style: italic !important; }
.au-search-drawer__close {
background: transparent !important;
border: 1px solid var(--au-hairline-strong) !important;
border-radius: 50% !important;
width: 38px !important;
height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: var(--au-ink) !important;
transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
.au-search-drawer__close:hover { background: var(--au-ink) !important; color: var(--au-bone) !important; border-color: var(--au-ink) !important; }
.au-search-drawer__suggest { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 18px !important; flex-wrap: wrap !important; }
.au-search-drawer__label {
font-family: var(--au-body) !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: var(--au-gold) !important;
font-weight: 600 !important;
margin-right: 8px !important;
}
.au-search-drawer__suggest a {
padding: 6px 14px !important;
background: var(--au-cream) !important;
border: 1px solid var(--au-hairline) !important;
border-radius: 9999px !important;
color: var(--au-ink) !important;
font-family: var(--au-body) !important;
font-size: 12px !important;
text-decoration: none !important;
letter-spacing: 0.02em !important;
transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.au-search-drawer__suggest a:hover { background: var(--au-ink) !important; border-color: var(--au-ink) !important; color: var(--au-bone) !important; }
/* === CART DRAWER v7 RESTYLE === */
.aureum-cart-drawer { background: var(--au-bone) !important; }
.aureum-cart-drawer-header { border-bottom: 1px solid var(--au-hairline) !important; }
.aureum-cart-drawer-title { font-family: var(--au-display) !important; color: var(--au-ink) !important; letter-spacing: -0.02em !important; font-weight: 400 !important; font-size: 26px !important; }
.aureum-cart-drawer-close:hover { color: var(--au-gold) !important; }
.aureum-cart-drawer-item-name { font-family: var(--au-display) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: var(--au-ink) !important; font-size: 16px !important; }
.aureum-cart-drawer-item-price { font-family: var(--au-display) !important; color: var(--au-gold) !important; font-size: 16px !important; }
.aureum-cart-drawer-item-qty { font-family: var(--au-mono) !important; color: var(--au-ink-muted) !important; font-size: 11px !important; }
.aureum-cart-drawer-footer { background: var(--au-cream) !important; border-top: 1px solid var(--au-hairline) !important; }
.aureum-cart-drawer-subtotal span:first-child { font-family: var(--au-body) !important; color: var(--au-ink-muted) !important; letter-spacing: 0.14em !important; font-size: 11px !important; }
.aureum-cart-drawer-total { font-family: var(--au-display) !important; color: var(--au-ink) !important; font-size: 28px !important; font-weight: 400 !important; letter-spacing: -0.02em !important; }
.aureum-cart-drawer-btn { border-radius: 9999px !important; font-family: var(--au-body) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; }
.aureum-cart-drawer-btn-secondary { background: transparent !important; color: var(--au-ink) !important; border: 1px solid var(--au-hairline-strong) !important; }
.aureum-cart-drawer-btn-secondary:hover { background: var(--au-ink) !important; color: var(--au-bone) !important; border-color: var(--au-ink) !important; }
.aureum-cart-drawer-btn-primary { background: var(--au-gold) !important; color: var(--au-ink) !important; border: 1px solid var(--au-gold) !important; }
.aureum-cart-drawer-btn-primary:hover { background: var(--au-ink) !important; color: var(--au-bone) !important; border-color: var(--au-ink) !important; }
.aureum-cart-drawer-spinner { border-color: var(--au-hairline) !important; border-top-color: var(--au-gold) !important; }
.aureum-cart-drawer-empty-text { font-family: var(--au-body) !important; color: var(--au-ink-muted) !important; }
/* === MOBILE BOTTOM NAV v7 RESTYLE === */
@media (max-width: 768px) {
.aureum-bnav {
background: rgba(251,248,242,0.92) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-top: 1px solid var(--au-hairline) !important;
box-shadow: 0 -4px 20px rgba(15,12,9,0.05) !important;
}
.aureum-bnav-item {
color: var(--au-ink-soft) !important;
font-family: var(--au-body) !important;
font-size: 10px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
transition: color 0.2s ease !important;
position: relative !important;
}
.aureum-bnav-item.active,
.aureum-bnav-item:hover { color: var(--au-gold) !important; }
.aureum-bnav-item.active::before {
content: '' !important;
position: absolute !important;
top: 4px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 24px !important;
height: 2px !important;
background: var(--au-gold) !important;
border-radius: 1px !important;
box-shadow: 0 0 8px rgba(184,150,46,0.5) !important;
}
.aureum-bnav-badge {
background: var(--au-gold) !important;
color: var(--au-ink) !important;
border: 1.5px solid var(--au-bone) !important;
font-family: var(--au-body) !important;
font-weight: 700 !important;
}
}
/* Mobile mega panel hide */
@media (max-width: 768px) {
.au-mega-panel { display: none !important; }
.au-search-drawer.open { max-height: 280px !important; }
.au-search-drawer__input { font-size: 18px !important; }
.au-search-drawer__suggest { gap: 8px !important; }
.au-search-drawer__suggest a { font-size: 11px !important; padding: 5px 11px !important; }
/* Sticky shrink on mobile */
header.au-nav-top.au-scrolled .au-nav-main__brand { font-size: 20px !important; }
}
/* ============================================
V6 LEGACY OVERRIDES — hide dupes, restyle survivors
============================================ */
/* Kill plugin mega menu (replaced by v7 mega-menu) */
#aureum-mega-menu,
.aureum-mega-menu-wrap,
.aureum-mega-menu-trigger,
.aureum-zero-gap-nuclear,
#aureum-zero-gap-nuclear { display: none !important; }
/* Plugin nav/dup wrappers */
.aureum-nav-v6,
.aureum-secondary-nav,
.aureum-marquee-old,
.aureum-top-strip-legacy { display: none !important; }
/* Newsletter wrap (v6 dark Cormorant) → atelier light */
.aureum-newsletter-wrap,
.aureum-nl-wrap {
background: var(--au-cream, #F5F0E6) !important;
color: var(--au-ink, #1F1B17) !important;
font-family: 'Inter Tight', -apple-system, sans-serif !important;
border-top: 1px solid rgba(31,27,23,.08) !important;
border-bottom: 1px solid rgba(31,27,23,.08) !important;
padding: 56px 24px !important;
}
.aureum-newsletter-wrap *,
.aureum-nl-wrap * {
font-family: inherit !important;
color: var(--au-ink, #1F1B17) !important;
}
.aureum-newsletter-wrap h2,
.aureum-newsletter-wrap h3,
.aureum-nl-wrap h2,
.aureum-nl-wrap h3 {
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
color: var(--au-gold, #B8962E) !important;
font-weight: 400 !important;
letter-spacing: -.01em !important;
}
.aureum-newsletter-wrap input[type="email"],
.aureum-nl-wrap input[type="email"] {
background: #fff !important;
border: 1px solid rgba(31,27,23,.15) !important;
color: var(--au-ink) !important;
border-radius: 4px !important;
padding: 12px 16px !important;
font-family: 'Inter Tight', sans-serif !important;
}
.aureum-newsletter-wrap button,
.aureum-nl-wrap button {
background: var(--au-ink, #1F1B17) !important;
color: var(--au-bone, #FBF8F2) !important;
border: none !important;
padding: 12px 24px !important;
font-family: 'Inter Tight', sans-serif !important;
text-transform: uppercase !important;
letter-spacing: .12em !important;
font-size: 11px !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: background .2s ease !important;
}
.aureum-newsletter-wrap button:hover,
.aureum-nl-wrap button:hover { background: var(--au-gold, #B8962E) !important; }
/* aem-popup-overlay newsletter modal → atelier */
#aem-popup-overlay,
.aem-popup-overlay {
background: rgba(31,27,23,.55) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.aem-popup-box,
.aem-popup-inner,
.aem-popup-content {
background: var(--au-bone, #FBF8F2) !important;
color: var(--au-ink, #1F1B17) !important;
font-family: 'Inter Tight', sans-serif !important;
border: 1px solid rgba(31,27,23,.1) !important;
border-radius: 6px !important;
box-shadow: 0 30px 80px rgba(0,0,0,.25) !important;
padding: 40px !important;
}
.aem-popup-box *,
.aem-popup-inner *,
.aem-popup-content * {
color: var(--au-ink, #1F1B17) !important;
font-family: inherit !important;
}
.aem-popup-box h2,
.aem-popup-box h3,
.aem-popup-inner h2,
.aem-popup-inner h3 {
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
color: var(--au-gold, #B8962E) !important;
font-weight: 400 !important;
}
.aem-popup-box input[type="email"],
.aem-popup-inner input[type="email"] {
background: #fff !important;
border: 1px solid rgba(31,27,23,.18) !important;
color: var(--au-ink) !important;
border-radius: 4px !important;
padding: 12px 16px !important;
}
.aem-popup-box button,
.aem-popup-inner button {
background: var(--au-ink) !important;
color: var(--au-bone) !important;
text-transform: uppercase !important;
letter-spacing: .12em !important;
font-size: 11px !important;
border-radius: 4px !important;
}
.aem-popup-close { color: var(--au-ink) !important; opacity: .5 !important; }
.aem-popup-close:hover { opacity: 1 !important; }
/* aureum-sp-toast social proof toast → atelier */
.aureum-sp-toast,
#aureum-sp-toast,
.au-sp-toast {
background: var(--au-bone, #FBF8F2) !important;
color: var(--au-ink, #1F1B17) !important;
border: 1px solid rgba(31,27,23,.1) !important;
border-left: 3px solid var(--au-gold, #B8962E) !important;
border-radius: 4px !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 13px !important;
box-shadow: 0 12px 32px rgba(0,0,0,.12) !important;
padding: 14px 18px !important;
}
.aureum-sp-toast *,
#aureum-sp-toast *,
.au-sp-toast * { color: var(--au-ink) !important; font-family: inherit !important; }
.aureum-sp-toast strong { color: var(--au-gold) !important; font-weight: 600 !important; }
/* exit-popup → atelier */
.aureum-exit-popup,
#aureum-exit-popup,
.aureum-exit-popup-overlay {
background: rgba(31,27,23,.6) !important;
backdrop-filter: blur(10px) !important;
}
.aureum-exit-popup-box,
.aureum-exit-popup-inner {
background: var(--au-bone, #FBF8F2) !important;
color: var(--au-ink) !important;
font-family: 'Inter Tight', sans-serif !important;
border-radius: 6px !important;
border: 1px solid rgba(31,27,23,.1) !important;
padding: 40px !important;
}
.aureum-exit-popup-box *,
.aureum-exit-popup-inner * { color: var(--au-ink) !important; font-family: inherit !important; }
.aureum-exit-popup-box h2,
.aureum-exit-popup-inner h2 {
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
color: var(--au-gold) !important;
font-weight: 400 !important;
}
/* back-to-top → bone+gold pill */
.aureum-back-to-top,
#aureum-back-to-top,
.au-back-to-top {
background: var(--au-bone, #FBF8F2) !important;
color: var(--au-ink, #1F1B17) !important;
border: 1px solid rgba(31,27,23,.12) !important;
border-radius: 999px !important;
width: 44px !important;
height: 44px !important;
box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
transition: all .25s ease !important;
}
.aureum-back-to-top:hover,
#aureum-back-to-top:hover,
.au-back-to-top:hover {
background: var(--au-gold, #B8962E) !important;
color: var(--au-bone) !important;
transform: translateY(-2px) !important;
}
.aureum-back-to-top svg,
#aureum-back-to-top svg { fill: currentColor !important; }
/* cart drawer plugin → atelier light */
.aureum-cart-drawer,
#aureum-cart-drawer,
.aureum-cart-drawer-panel,
.aureum-cart-drawer-inner {
background: var(--au-bone, #FBF8F2) !important;
color: var(--au-ink, #1F1B17) !important;
font-family: 'Inter Tight', sans-serif !important;
border-left: 1px solid rgba(31,27,23,.08) !important;
}
.aureum-cart-drawer *,
#aureum-cart-drawer * {
color: var(--au-ink, #1F1B17) !important;
font-family: inherit !important;
}
.aureum-cart-drawer h2,
.aureum-cart-drawer h3,
.aureum-cart-drawer-header h2 {
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
color: var(--au-gold, #B8962E) !important;
font-weight: 400 !important;
}
.aureum-cart-drawer-item,
.aureum-cart-line {
border-bottom: 1px solid rgba(31,27,23,.08) !important;
padding: 16px 0 !important;
}
.aureum-cart-drawer-checkout,
.aureum-cart-drawer button[type="submit"],
.aureum-cart-drawer .checkout-button {
background: var(--au-ink, #1F1B17) !important;
color: var(--au-bone, #FBF8F2) !important;
text-transform: uppercase !important;
letter-spacing: .12em !important;
font-size: 12px !important;
border-radius: 4px !important;
padding: 14px 24px !important;
border: none !important;
transition: background .2s ease !important;
}
.aureum-cart-drawer-checkout:hover,
.aureum-cart-drawer button[type="submit"]:hover { background: var(--au-gold) !important; }
.aureum-cart-drawer-overlay { background: rgba(31,27,23,.5) !important; backdrop-filter: blur(6px) !important; }
/* mobile bnav → atelier */
.aureum-bnav,
#aureum-bnav,
.aureum-mobile-bnav {
background: var(--au-bone, #FBF8F2) !important;
color: var(--au-ink) !important;
border-top: 1px solid rgba(31,27,23,.08) !important;
box-shadow: 0 -8px 24px rgba(0,0,0,.06) !important;
font-family: 'Inter Tight', sans-serif !important;
}
.aureum-bnav *,
#aureum-bnav *,
.aureum-mobile-bnav * {
color: var(--au-ink, #1F1B17) !important;
font-family: inherit !important;
}
.aureum-bnav a,
.aureum-mobile-bnav a {
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: .1em !important;
text-decoration: none !important;
}
.aureum-bnav a.active,
.aureum-bnav a[aria-current="page"],
.aureum-mobile-bnav a.active { color: var(--au-gold, #B8962E) !important; }
.aureum-bnav svg,
.aureum-mobile-bnav svg { fill: currentColor !important; }
/* PR float (Request a Compound) → atelier pill */
.aureum-pr-float,
#aureum-pr-float,
.aureum-pr-styles {
background: var(--au-ink, #1F1B17) !important;
color: var(--au-bone, #FBF8F2) !important;
border-radius: 999px !important;
font-family: 'Inter Tight', sans-serif !important;
text-transform: uppercase !important;
letter-spacing: .12em !important;
font-size: 11px !important;
padding: 12px 22px !important;
box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
border: 1px solid rgba(184,150,46,.4) !important;
transition: all .25s ease !important;
}
.aureum-pr-float:hover,
#aureum-pr-float:hover {
background: var(--au-gold, #B8962E) !important;
color: var(--au-bone) !important;
transform: translateY(-2px) !important;
}
/* Force-kill any plugin font-family overrides on body */
body.home,
body.blog,
body.woocommerce { font-family: 'Inter Tight', -apple-system, sans-serif !important; }
/* ============================================
PDP-SPECIFIC FIXES (single-product page)
============================================ */
/* Tab nav sticky offset — clear main nav (~120px expanded) */
body.single-product .au-pdp-tabs__nav { top: 100px !important; }
body.single-product header.au-nav-top.au-scrolled ~ * .au-pdp-tabs__nav,
body.single-product .au-pdp-tabs__nav { top: clamp(72px, 12vh, 130px) !important; }
/* Kill duplicate sticky ATC bar (plugin) — my au-pdp-sticky wins */
.aureum-sticky-atc,
#aureum-sticky-atc { display: none !important; }
/* Kill duplicate dark navy RUO badge above add-to-cart form */
body.single-product form.cart > div[style*="linear-gradient(135deg,#1A1A2E"],
body.single-product form.cart > div[style*="linear-gradient(135deg, #1A1A2E"] { display: none !important; }
/* Kill duplicate disclaimer + trust-badges (plugin) — atelier trust strip below covers */
body.single-product .aureum-disclaimer-box,
body.single-product .aureum-trust-badges { display: none !important; }
/* Loyalty earn-points chip — atelier pill */
bodyhtml body.single-product .wlr-product-message {
background: var(--au-cream, #F5F0E6) !important;
color: var(--au-gold, #B8962E) !important;
border-left: 2px solid var(--au-gold) !important;
border-radius: 0 6px 6px 0 !important;
padding: 10px 14px !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
font-weight: 600 !important;
line-height: 1.4 !important;
}
/* Subscribe & Save — atelier overrides */
body.single-product .aureum-sub-option { font-family: 'Inter Tight', sans-serif !important; }
body.single-product .aureum-sub-toggle-item {
border: 1px solid var(--au-hairline, rgba(31,27,23,.12)) !important;
border-radius: 4px !important;
background: var(--au-paper, #fff) !important;
padding: 14px 16px !important;
transition: border-color .2s ease, background .2s ease !important;
}
body.single-product .aureum-sub-toggle-item--active {
border-color: var(--au-gold, #B8962E) !important;
background: var(--au-bone, #FBF8F2) !important;
}
body.single-product .aureum-sub-toggle-label {
font-family: 'Inter Tight', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--au-ink, #1F1B17) !important;
letter-spacing: 0.01em !important;
}
body.single-product .aureum-sub-save-badge {
background: var(--au-gold, #B8962E) !important;
color: var(--au-ink) !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
padding: 3px 10px !important;
border-radius: 999px !important;
}
body.single-product .aureum-sub-frequency-wrap {
background: var(--au-cream, #F5F0E6) !important;
border-radius: 4px !important;
padding: 14px 16px !important;
}
body.single-product .aureum-sub-frequency-wrap label {
font-family: 'Inter Tight', sans-serif !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: var(--au-ink-muted, #6B665D) !important;
font-weight: 600 !important;
}
body.single-product .aureum-sub-frequency-wrap select {
border: 1px solid var(--au-hairline) !important;
border-radius: 4px !important;
background: #fff !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 14px !important;
color: var(--au-ink) !important;
padding: 10px 14px !important;
}
body.single-product .aureum-sub-frequency-note {
font-family: 'Inter Tight', sans-serif !important;
font-size: 11px !important;
color: var(--au-ink-muted) !important;
font-style: italic !important;
}
/* MG variation dropdown — atelier select */
body.single-product table.variations select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background: var(--au-paper, #fff) url("data:image/svg+xml;utf8,") no-repeat right 16px center !important;
border: 1px solid var(--au-hairline-strong, rgba(31,27,23,.18)) !important;
border-radius: 4px !important;
padding: 12px 40px 12px 16px !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 14px !important;
color: var(--au-ink) !important;
letter-spacing: 0.02em !important;
cursor: pointer !important;
min-width: 140px !important;
transition: border-color .2s ease !important;
}
body.single-product table.variations select:hover,
body.single-product table.variations select:focus {
border-color: var(--au-gold) !important;
outline: none !important;
}
body.single-product table.variations th.label label {
font-family: 'Inter Tight', sans-serif !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
color: var(--au-ink-muted) !important;
font-weight: 600 !important;
}
body.single-product .reset_variations {
font-family: 'Inter Tight', sans-serif !important;
font-size: 11px !important;
color: var(--au-ink-muted) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--au-hairline-strong) !important;
margin-left: 12px !important;
}
/* Single add-to-cart button — atelier ink pill */
body.single-product .single_add_to_cart_button {
background: var(--au-ink, #1F1B17) !important;
color: var(--au-bone, #FBF8F2) !important;
border: 0 !important;
border-radius: 9999px !important;
padding: 16px 36px !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.16em !important;
font-weight: 600 !important;
transition: background .25s ease, transform .25s ease !important;
box-shadow: 0 8px 24px rgba(31,27,23,.12) !important;
}
body.single-product .single_add_to_cart_button:hover {
background: var(--au-gold, #B8962E) !important;
color: var(--au-ink) !important;
transform: translateY(-2px) !important;
}
/* Quantity stepper — atelier */
body.single-product .quantity {
display: inline-flex !important;
align-items: stretch !important;
border: 1px solid var(--au-hairline-strong) !important;
border-radius: 4px !important;
overflow: hidden !important;
margin-right: 12px !important;
}
body.single-product .quantity .qty {
border: 0 !important;
background: var(--au-paper, #fff) !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 15px !important;
color: var(--au-ink) !important;
text-align: center !important;
width: 64px !important;
padding: 12px 0 !important;
}
/* Back-to-top — beat inline styles */
button#aureum-back-to-top[style] {
background: var(--au-bone, #FBF8F2) !important;
color: var(--au-ink, #1F1B17) !important;
border: 1px solid var(--au-hairline-strong, rgba(31,27,23,.18)) !important;
box-shadow: 0 8px 24px rgba(15,12,9,.12) !important;
}
button#aureum-back-to-top[style]:hover {
background: var(--au-gold, #B8962E) !important;
color: var(--au-bone) !important;
}
/* Exit popup — also catch h3 (plugin uses h3 not h2) */
#aureum-exit-popup h3,
.aureum-exit-popup-box h3,
.aureum-exit-popup-inner h3 {
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
color: var(--au-gold, #B8962E) !important;
font-weight: 400 !important;
letter-spacing: -.01em !important;
}
/* Legacy mega-menu — re-confirm hide (was rendering before) */
.aureum-mega-menu,
#aureum-mega-menu,
div.aureum-mega-menu { display: none !important; visibility: hidden !important; }
/* Aureum CC compliance footer dark strip on PDP — make it atelier */
body.single-product main#au-main + div[style*="background:#1A1816"],
body.single-product article + div[style*="background:#1A1816"] {
background: var(--au-cream, #F5F0E6) !important;
color: var(--au-ink-muted, #6B665D) !important;
border-top: 1px solid var(--au-hairline) !important;
}
body.single-product article + div[style*="background:#1A1816"] a {
color: var(--au-gold, #B8962E) !important;
}
/* ============================================
BOTTOM-LEFT STACK COLLISION FIX
Compare bar, wployalty launcher, Request a Compound pill,
sticky ATC, exit popup, social-proof toast all fight here
============================================ */
/* Compare bar — hide globally (no 2+ products = noise) */
#aaf-compare-bar:not([style*="display:block"]):not([style*="display: block"]),
#aaf-compare-bar { display: none !important; }
body #aaf-compare-bar[style*="display:block"],
body #aaf-compare-bar[style*="display: block"] { display: flex !important; }
/* WPLoyalty launcher — hide bleeding "Now Clear" stub on PDP/all */
#wll-site-launcher .wll-launcher-text:empty,
.wll-launcher-button-text:empty { display: none !important; }
/* Force atelier color on visible launcher */
.wll-launcher-container,
#wll-site-launcher [class*="launcher"] {
background: var(--au-ink, #1F1B17) !important;
color: var(--au-bone) !important;
}
/* PR float positioning intentionally REMOVED from here (2026-09-08).
* This block used to send the pill bottom-RIGHT, and the "FLOATING UI LAYER"
* block near the end of this file sent it bottom-LEFT. Both used !important,
* so the later one silently won and the pill landed on top of the product grid.
* All float POSITIONING now lives in exactly one place: see FLOATING UI LAYER below. */
/* Mobile: stack above bnav */
@media (max-width: 768px) {
.aureum-pr-float,
#aureum-pr-float {
bottom: 74px !important;
right: 12px !important;
font-size: 10px !important;
padding: 10px 16px !important;
}
}
/* Social-proof toast — keep bottom-left, raise above other widgets */
.aureum-sp-toast,
#aureum-sp-toast {
bottom: 24px !important;
left: 24px !important;
z-index: 9999 !important;
}
/* Newsletter wrap renders AFTER footer (plugin bug) — relocate visually before */
.aureum-newsletter-wrap {
margin-top: -1px !important;
position: relative !important;
z-index: 1 !important;
}
/* Or hide on single-product (footer already has links) */
body.single-product .aureum-newsletter-wrap,
body.single-product .aureum-nl-wrap { display: none !important; }
/* Sticky ATC bar (mine) — bottom-right, narrower, doesn't span full width on desktop */
body.single-product .au-pdp-sticky {
z-index: 99 !important;
}
/* PDP hero image — constrain max-height so doesn't dominate */
body.single-product .au-pdp-gallery,
body.single-product main#au-main > article > div:first-of-type + div > div:first-child > div {
max-height: min(75vh, 720px) !important;
}
body.single-product main#au-main > article > div > div:first-child img[fetchpriority="high"] {
max-height: 60vh !important;
object-fit: contain !important;
}
/* Wployalty "Earn up to N points" inline banner — atelier subtle */
.wlr-product-message {
margin: 8px 0 !important;
}
/* Hide WLLoyalty launcher entirely if not configured (empty button) */
#wll-site-launcher:has(.wll-launcher-container:empty),
.wll-launcher-container:empty { display: none !important; }
/* ============================================
JS-BUILT COMPARE BAR — second compare widget
(aureum-product-compare plugin creates .aureum-compare-bar via JS,
no CSS = shows in document flow at body end → visible at bottom-left)
============================================ */
.aureum-compare-bar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9998 !important;
background: var(--au-ink, #1F1B17) !important;
color: var(--au-bone, #FBF8F2) !important;
padding: 12px 24px !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 12px !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
box-shadow: 0 -4px 20px rgba(0,0,0,.2) !important;
}
.aureum-compare-bar.visible { display: flex !important; }
.aureum-compare-bar.visible[class*="visible"] { display: flex !important; }
.aureum-compare-bar-label,
.aureum-compare-bar-thumbs { color: var(--au-bone) !important; font-family: inherit !important; }
.aureum-compare-bar .btn-compare-now {
background: var(--au-gold, #B8962E) !important;
color: var(--au-ink) !important;
border: 0 !important;
border-radius: 999px !important;
padding: 10px 20px !important;
font-family: inherit !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
font-weight: 600 !important;
cursor: pointer !important;
}
.aureum-compare-bar .btn-compare-clear {
background: transparent !important;
color: rgba(251,248,242,.55) !important;
border: 0 !important;
font-family: inherit !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
cursor: pointer !important;
}
.aureum-compare-bar .btn-compare-clear:hover { color: var(--au-gold) !important; }
/* Hide newsletter wrap on home page (renders AFTER footer = wrong order) */
body.home .aureum-newsletter-wrap,
body.page-id-25 .aureum-newsletter-wrap { display: none !important; }
/* Also hide WLLoyalty launcher empty bleed across all pages */
#wll-site-launcher { font-size: 0 !important; }
#wll-site-launcher * { font-size: initial !important; }
/* ============================================
PDP STICKY ATC BAR — was unstyled, dumping full image at body end
Applies to ALL products
============================================ */
.au-pdp-sticky {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 95 !important;
background: rgba(251,248,242,0.96) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-top: 1px solid var(--au-hairline, rgba(31,27,23,.1)) !important;
box-shadow: 0 -8px 32px rgba(15,12,9,.08) !important;
transform: translateY(100%) !important;
transition: transform .35s cubic-bezier(.2,.8,.2,1) !important;
padding: 14px 24px !important;
pointer-events: none !important;
}
.au-pdp-sticky.visible {
transform: translateY(0) !important;
pointer-events: auto !important;
}
.au-pdp-sticky__inner {
max-width: 1280px !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
}
.au-pdp-sticky__product {
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex: 1 !important;
min-width: 0 !important;
}
.au-pdp-sticky__thumb {
width: 48px !important;
height: 48px !important;
flex-shrink: 0 !important;
border-radius: 6px !important;
overflow: hidden !important;
background: var(--au-cream, #F5F0E6) !important;
border: 1px solid var(--au-hairline) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.au-pdp-sticky__thumb img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
padding: 4px !important;
max-width: none !important;
max-height: none !important;
}
.au-pdp-sticky__info {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
}
.au-pdp-sticky__name {
font-family: 'Fraunces', Georgia, serif !important;
font-size: 16px !important;
color: var(--au-ink, #1F1B17) !important;
letter-spacing: -0.01em !important;
font-weight: 400 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.au-pdp-sticky__price {
font-family: 'Inter Tight', sans-serif !important;
font-size: 13px !important;
color: var(--au-ink-muted, #6B665D) !important;
display: flex !important;
align-items: baseline !important;
gap: 6px !important;
}
.au-pdp-sticky__price .from {
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: var(--au-ink-muted) !important;
}
.au-pdp-sticky__price .woocommerce-Price-amount {
color: var(--au-ink) !important;
font-weight: 600 !important;
}
.au-pdp-sticky__cta {
background: var(--au-ink, #1F1B17) !important;
color: var(--au-bone, #FBF8F2) !important;
text-decoration: none !important;
padding: 14px 28px !important;
border-radius: 9999px !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
font-weight: 600 !important;
flex-shrink: 0 !important;
transition: background .2s ease, transform .2s ease !important;
border: 0 !important;
cursor: pointer !important;
}
.au-pdp-sticky__cta:hover {
background: var(--au-gold, #B8962E) !important;
color: var(--au-ink) !important;
transform: translateY(-1px) !important;
}
@media (max-width: 768px) {
.au-pdp-sticky { padding: 10px 16px 14px !important; bottom: 60px !important; }
.au-pdp-sticky__thumb { width: 40px !important; height: 40px !important; }
.au-pdp-sticky__name { font-size: 14px !important; }
.au-pdp-sticky__price { font-size: 12px !important; }
.au-pdp-sticky__price .from { display: none !important; }
.au-pdp-sticky__cta { padding: 11px 18px !important; font-size: 11px !important; letter-spacing: 0.1em !important; }
}
/* ============================================
ACTIVITY TICKER — was unstyled, dumping 5 lines stacked in flow
Should be fixed bottom-left pill rotating through entries
============================================ */
.au-activity {
position: fixed !important;
bottom: 24px !important;
left: 24px !important;
z-index: 90 !important;
background: var(--au-ink, #1F1B17) !important;
color: var(--au-bone, #FBF8F2) !important;
border-radius: 999px !important;
padding: 10px 18px 10px 14px !important;
box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(184,150,46,.15) !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 12px !important;
max-width: 340px !important;
line-height: 1.35 !important;
transition: opacity .35s ease, transform .35s ease !important;
pointer-events: none !important;
}
.au-activity__inner {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.au-activity__dot {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: var(--au-gold, #B8962E) !important;
box-shadow: 0 0 10px rgba(184,150,46,.7) !important;
flex-shrink: 0 !important;
animation: au-activity-pulse 2s ease-in-out infinite !important;
}
@keyframes au-activity-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(1.3); }
}
.au-activity__rotator {
position: relative !important;
min-width: 240px !important;
height: 18px !important;
overflow: hidden !important;
}
.au-activity__line {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-family: inherit !important;
color: var(--au-bone) !important;
opacity: 0 !important;
transform: translateY(8px) !important;
transition: opacity .5s ease, transform .5s ease !important;
display: block !important;
}
.au-activity__line.is-active {
opacity: 1 !important;
transform: translateY(0) !important;
}
.au-activity__line strong {
color: var(--au-gold, #B8962E) !important;
font-weight: 600 !important;
font-family: inherit !important;
}
.au-activity__line em {
color: var(--au-bone) !important;
font-style: italic !important;
font-family: 'Fraunces', Georgia, serif !important;
}
/* Mobile: shrink + move above bnav */
@media (max-width: 768px) {
.au-activity {
bottom: 74px !important;
left: 12px !important;
right: 12px !important;
max-width: none !important;
font-size: 11px !important;
padding: 8px 14px 8px 12px !important;
}
.au-activity__rotator { min-width: 0 !important; }
}
/* ============================================
PRODUCT CARD — atelier polish + contrast fix
============================================ */
.au-card {
background: #FFFFFF !important;
border: 1px solid rgba(31,27,23,.10) !important;
border-radius: 14px !important;
overflow: hidden !important;
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease !important;
box-shadow: 0 1px 2px rgba(31,27,23,.04) !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.au-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 20px 48px rgba(31,27,23,.08), 0 0 0 1px rgba(184,150,46,.18) !important;
border-color: rgba(184,150,46,.22) !important;
}
.au-card__media {
padding: 0 !important;
margin: 0 !important;
background: #FAFAF8 !important;
aspect-ratio: 1/1 !important;
overflow: hidden !important;
border-radius: 14px 14px 0 0 !important;
position: relative !important;
display: block !important;
}
.au-card__media::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, transparent 70%, rgba(31,27,23,.04)) !important;
pointer-events: none !important;
}
.au-card__media img,
.au-card__media a img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
display: block !important;
transform-origin: center center !important;
transition: transform .6s cubic-bezier(.2,.8,.2,1) !important;
}
.au-card:hover .au-card__media img { transform: scale(1.05) !important; }
/* Card body — spacing + hierarchy */
.au-card__body {
padding: 22px 22px 24px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
flex: 1 !important;
background: #FFFFFF !important;
}
.au-card__category {
font-family: 'Inter Tight', sans-serif !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
color: var(--au-gold, #B8962E) !important;
font-weight: 600 !important;
line-height: 1.4 !important;
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
}
.au-card__title {
font-family: 'Fraunces', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.25 !important;
letter-spacing: -0.01em !important;
color: var(--au-ink, #1F1B17) !important;
margin: 4px 0 0 !important;
font-weight: 400 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 45px !important;
}
.au-card__title a {
color: inherit !important;
text-decoration: none !important;
border-bottom: 0 !important;
}
.au-card__title a:hover { color: var(--au-gold) !important; }
.au-card__purity {
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
color: var(--au-gold, #B8962E) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 3px 8px !important;
background: rgba(184,150,46,.08) !important;
border-radius: 4px !important;
align-self: flex-start !important;
margin-top: 2px !important;
}
.au-card__foot {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-top: auto !important;
padding-top: 16px !important;
border-top: 1px solid rgba(31,27,23,.06) !important;
gap: 12px !important;
}
.au-card__price {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
font-family: 'Fraunces', Georgia, serif !important;
font-size: 18px !important;
color: var(--au-ink, #1F1B17) !important;
letter-spacing: -0.02em !important;
font-weight: 400 !important;
}
.au-card__price-from {
font-family: 'Inter Tight', sans-serif !important;
font-size: 9px !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
color: var(--au-ink-muted, #6B665D) !important;
font-weight: 500 !important;
}
.au-card__price .woocommerce-Price-amount {
color: var(--au-ink) !important;
font-family: 'Fraunces', serif !important;
font-weight: 400 !important;
}
.au-card__buy {
padding: 8px 18px !important;
background: transparent !important;
color: var(--au-ink, #1F1B17) !important;
border: 1px solid rgba(31,27,23,.15) !important;
border-radius: 999px !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: background .2s ease, color .2s ease, border-color .2s ease !important;
flex-shrink: 0 !important;
}
.au-card__buy:hover {
background: var(--au-ink, #1F1B17) !important;
color: var(--au-bone, #FBF8F2) !important;
border-color: var(--au-ink) !important;
}
/* Content-visibility override — force normal render for card imgs (was deferring in screenshots) */
.au-card img,
li.product img,
.products img,
article img,
.au-blog-card img,
.au-blog-featured-card img,
.au-hero__image img,
.au-hero__image video { content-visibility: visible !important; }
/* Kill global img content-visibility:auto that defers renders */
img[loading="lazy"] { content-visibility: visible !important; }
/* Hide shop newsletter-after-footer bleed */
body.woocommerce.archive .aureum-newsletter-wrap,
body.post-type-archive-product .aureum-newsletter-wrap { display: none !important; }
/* ============================================
FORM AUTOFILL SUPPRESSION — kill browser pink/yellow highlight
Applies to wholesale, affiliates, protocol builder, checkout etc.
============================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
box-shadow: 0 0 0 1000px #FFFFFF inset !important;
-webkit-text-fill-color: var(--au-ink, #1F1B17) !important;
caret-color: var(--au-ink) !important;
background-clip: content-box !important;
transition: background-color 100000s ease-in-out 0s !important;
}
/* Generic form input atelier styling on non-checkout pages */
body:not(.woocommerce-checkout):not(.woocommerce-cart) input[type="text"],
body:not(.woocommerce-checkout):not(.woocommerce-cart) input[type="email"],
body:not(.woocommerce-checkout):not(.woocommerce-cart) input[type="tel"],
body:not(.woocommerce-checkout):not(.woocommerce-cart) input[type="url"],
body:not(.woocommerce-checkout):not(.woocommerce-cart) input[type="number"],
body:not(.woocommerce-checkout):not(.woocommerce-cart) select:not(#mg):not([name*="wc"]),
body:not(.woocommerce-checkout):not(.woocommerce-cart) textarea {
background: #FFFFFF !important;
background-color: #FFFFFF !important;
border: 1px solid rgba(31,27,23,.15) !important;
border-radius: 4px !important;
padding: 12px 16px !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 14px !important;
color: var(--au-ink, #1F1B17) !important;
transition: border-color .2s ease !important;
}
body:not(.woocommerce-checkout) input[type="text"]:focus,
body:not(.woocommerce-checkout) input[type="email"]:focus,
body:not(.woocommerce-checkout) input[type="tel"]:focus,
body:not(.woocommerce-checkout) input[type="url"]:focus,
body:not(.woocommerce-checkout) textarea:focus {
border-color: var(--au-gold, #B8962E) !important;
outline: 0 !important;
}
/* ==== MOBILE P0 + DRAWER 2026-07-07 (390px audit) ==== */
html, body { overflow-x: clip !important; }
.au-nav-hamburger { display:none; width:44px; height:44px; padding:10px; background:transparent; border:0; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:6px; flex-shrink:0; }
.au-nav-hamburger span { display:block; width:22px; height:1.5px; background:var(--au-ink,#1F1B17); border-radius:1px; transition:transform .3s cubic-bezier(0.2,0.8,0.2,1), opacity .2s ease; }
.au-nav-hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.au-nav-hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.au-nav-hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
.au-nav-main__brand { white-space:nowrap !important; flex-shrink:0 !important; }
.au-mobile-drawer { position:fixed; inset:0; z-index:9999; visibility:hidden; pointer-events:none; }
.au-mobile-drawer.is-open { visibility:visible; pointer-events:auto; }
.au-mobile-drawer__overlay { position:absolute; inset:0; background:rgba(31,27,23,0.38); opacity:0; transition:opacity .3s ease; }
.au-mobile-drawer.is-open .au-mobile-drawer__overlay { opacity:1; }
.au-mobile-drawer__panel { position:absolute; top:0; left:0; height:100%; width:82%; max-width:340px; background:var(--au-bone,#FBF8F2); box-shadow:var(--au-shadow-4,0 15px 50px rgba(31,27,23,.08)); transform:translateX(-100%); transition:transform .34s cubic-bezier(0.2,0.8,0.2,1); display:flex; flex-direction:column; padding:24px; box-sizing:border-box; }
.au-mobile-drawer.is-open .au-mobile-drawer__panel { transform:translateX(0); }
.au-mobile-drawer__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.au-mobile-drawer__brand { font-family:var(--au-display); font-size:26px; color:var(--au-ink); }
.au-mobile-drawer__close { background:none; border:0; color:var(--au-ink); cursor:pointer; padding:8px; line-height:0; }
.au-mobile-drawer__links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.au-mobile-drawer__links li { border-bottom:1px solid var(--au-hairline,rgba(31,27,23,0.08)); }
.au-mobile-drawer__links a { display:block; padding:16px 4px; font-family:var(--au-display); font-size:22px; color:var(--au-ink); text-decoration:none; transition:color .2s ease, padding .2s ease; }
.au-mobile-drawer__links a:hover, .au-mobile-drawer__links a:focus { color:var(--au-gold); padding-left:10px; }
.au-mobile-drawer__foot { margin-top:auto; display:flex; gap:12px; padding-top:24px; }
.au-mobile-drawer__foot a { flex:1; text-align:center; padding:12px; border:1px solid var(--au-gold-line,rgba(184,150,46,0.22)); border-radius:2px; font-family:var(--au-body); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--au-ink); text-decoration:none; transition:background .2s,color .2s; }
.au-mobile-drawer__foot a:hover { background:var(--au-gold); color:#fff; }
@media (min-width:769px){ .au-mobile-drawer { display:none !important; } }
@media (max-width:768px){
.au-nav-hamburger { display:flex !important; }
.au-nav-main { gap:12px !important; padding:16px 20px !important; }
.au-nav-main__brand { font-size:22px !important; }
.au-nav-main__actions { gap:8px !important; }
.au-nav-main__icon { width:36px !important; }
.au-band--dark { overflow:hidden !important; }
.au-band--dark > div > div[style*="grid-template-columns"] { grid-template-columns:1fr !important; gap:40px !important; }
.au-band--dark > div > div[style*="grid-template-columns"] > div { text-align:center !important; border-left:0 !important; border-right:0 !important; padding-left:0 !important; padding-right:0 !important; }
}
/* device-lab: mobile stats strip fit */
@media (max-width:600px){.au-tile__inner>div[style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 16px!important;}.au-tile__inner>div[style*="repeat(4"]>*{min-width:0!important;}}
/* device-lab: mobile category filter = scroll-chip row */
@media (max-width:600px){.au-catfilter{flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;-ms-overflow-style:none;}.au-catfilter::-webkit-scrollbar{display:none;}.au-catfilter>a{flex:0 0 auto!important;white-space:nowrap;scroll-snap-align:start;}}
/* device-lab: mobile form inputs 16px (no iOS zoom) + hide bottom nav while typing */
@media (max-width:600px){
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),textarea,select{font-size:16px!important;}
body:has(input:focus,textarea:focus,select:focus) .aureum-bnav{display:none!important;}
}
/* ============================================================
FLOATING UI LAYER — SINGLE SOURCE OF TRUTH (2026-09-08)
Do NOT position floats anywhere else in this file, in the theme,
or in a mu-plugin. Earlier versions positioned .aureum-pr-float in
four different places with !important; the last one won by accident
and dropped a 217px-wide pill on top of the product grid.
Layout contract:
LEFT rail (bottom-up): My Rewards pill, then Request-a-Compound.
RIGHT rail (bottom-up): back-to-top, then Tidio chat (Tidio owns right).
Left-rail items must stay narrow enough to clear the content column,
so Request-a-Compound rests as a token-sized disc and only expands
to its full label on hover / keyboard focus.
============================================================ */
:root{
--au-float-gutter: 24px;
--au-float-gap: 12px;
--au-float-size: 44px;
--au-float-rail-1: 24px; /* My Rewards sits here */
--au-float-rail-2: 80px; /* Request-a-Compound sits above it */
--au-float-rail-3: 136px; /* back-to-top sits above that */
}
/* --- LEFT rail: Request a Compound --- */
.aureum-pr-float,
#aureum-pr-float{
position: fixed !important;
left: var(--au-float-gutter) !important;
right: auto !important;
bottom: var(--au-float-rail-2) !important;
z-index: 998 !important;
/* collapsed disc at rest so it never covers product cards */
width: var(--au-float-size) !important;
height: var(--au-float-size) !important;
padding: 0 !important;
gap: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
justify-content: center !important;
border-radius: 999px !important;
/* position:fixed takes this out of normal flow and `contain` seals layout+paint
inside the element, so the hover width change cannot reflow page content.
A width transition is the correct affordance here; transform would distort the label. */
contain: layout paint !important;
transition: width .28s cubic-bezier(.22,.61,.36,1), padding .28s cubic-bezier(.22,.61,.36,1), gap .28s cubic-bezier(.22,.61,.36,1) !important;
}
/* The label is a bare TEXT NODE inside the (no wrapper element), so it cannot be
targeted with a child selector. Collapse it with font-size:0 at rest and restore on
expand. The text stays in the DOM, so the link keeps its accessible name
("Request a Compound") for screen readers even while visually collapsed. */
.aureum-pr-float,
#aureum-pr-float{
font-size: 0 !important;
letter-spacing: 0 !important;
}
.aureum-pr-float svg,
#aureum-pr-float svg{ width: 18px !important; height: 18px !important; }
.aureum-pr-float:hover,
.aureum-pr-float:focus-visible,
#aureum-pr-float:hover,
#aureum-pr-float:focus-visible{
width: auto !important;
height: auto !important;
padding: 12px 22px !important;
gap: 8px !important;
/* restore the label typography that the collapsed state zeroes out */
font-size: 11px !important;
letter-spacing: .12em !important;
}
.aureum-pr-float:hover > span,
.aureum-pr-float:focus-visible > span,
.aureum-pr-float:hover .aureum-pr-float__label,
.aureum-pr-float:focus-visible .aureum-pr-float__label{
opacity: 1;
transform: none;
}
.aureum-pr-float:focus-visible,
#aureum-pr-float:focus-visible{
outline: 2px solid var(--au-gold) !important;
outline-offset: 3px !important;
}
.aureum-pr-float svg{ flex: 0 0 auto !important; }
/* --- LEFT rail: loyalty launcher keeps the lowest slot --- */
.wll-launcher-button-container{
left: var(--au-float-gutter) !important;
right: auto !important;
bottom: var(--au-float-rail-1) !important;
}
/* --- LEFT rail, top slot: back-to-top.
Tidio owns the bottom-right corner, so every Aureum float lives on the left.
NOTE: the element renders with id "aureum-back-to-top" and NO class, so the
old `.aureum-back-to-top` selector never matched anything and that rule
silently did nothing for months — which is why this button stayed on the
right and collided with the chat bubble. Both selectors are used here. --- */
#aureum-back-to-top,
.aureum-back-to-top{
left: var(--au-float-gutter) !important;
right: auto !important;
bottom: var(--au-float-rail-3) !important;
}
@media (max-width:600px){
:root{
--au-float-gutter: 16px;
--au-float-rail-1: 74px; /* clear the mobile bottom nav */
--au-float-rail-2: 130px;
--au-float-rail-3: 186px;
}
}
@media (prefers-reduced-motion: reduce){
.aureum-pr-float,
#aureum-pr-float,
.aureum-pr-float > span,
.aureum-pr-float__label{ transition: none !important; }
}
/* device-lab: PDP + cart mobile layout — stack 2-col, fix tab overlap */
@media (max-width:768px){
.single-product [style*="grid-template-columns:1.1fr 1fr"]{grid-template-columns:1fr!important;}
[style*="grid-template-columns:1.5fr 1fr"]{grid-template-columns:1fr!important;}
.au-pdp-tabs__nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:22px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;}
.au-pdp-tabs__nav::-webkit-scrollbar{display:none;}
.au-pdp-tabs__nav>*{flex:0 0 auto!important;white-space:nowrap!important;}
}
/* device-lab: stack remaining 2-col pages on mobile (contact, account, 404) */
@media (max-width:768px){
[style*="grid-template-columns:1.1fr 1fr"]{grid-template-columns:1fr!important;}
body.woocommerce-account [style*="grid-template-columns"]{grid-template-columns:1fr!important;}
.aureum-404-links{grid-template-columns:1fr!important;}
}
/* SSOT: gold-fill CTAs -> ink-pill primary (owner-directed 8/5). gold = accent, never fill */
a.au-btn--gold, button.au-btn--gold, .au-btn.au-btn--gold{
background: var(--au-ink) !important;
color: var(--au-bone) !important;
border: 1px solid var(--au-ink) !important;
box-shadow: none !important;
}
a.au-btn--gold:hover, button.au-btn--gold:hover, .au-btn.au-btn--gold:hover{
background: #000 !important; color: var(--au-bone) !important; border-color:#000 !important;
}
/* device-lab: PDP gallery must NOT stick on mobile (huge image covered content on scroll) */
@media (max-width:768px){
.single-product [style*="position:sticky;top:120px"]{position:static!important;top:auto!important;}
.single-product .woocommerce-product-gallery{position:static!important;top:auto!important;}
}
/* device-lab: about page content grids stack on phone */
@media (max-width:600px){
body.page-id-28 [style*="grid-template-columns:1fr 1fr"],
body.page-id-28 [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important;}
}
/* WPLoyalty rewards widget -> Aureum brand (was indigo #4F47EB) */
[class*=wlr-]{--wlr-primary-color:#B8962E!important;--wlr-secondary-color:#1A1816!important;}
.wlr-my-rewards-title,.wlr-earning-options a,.wlr-reward-type-name,.wlr-my-rewards-sections a,[class*=wlr-my-reward] a{color:#B8962E!important;}
.wlr-button,.wlr-button-reward,.wlr-button-reward-apply,.wlr-code-button,.wlr-birthday-edit-button{background:#1A1816!important;color:#FBF8F2!important;border-color:#1A1816!important;}
.wlr-reward-card,.wlr-table-header{border-color:var(--au-hairline-strong,rgba(31,27,23,.18))!important;}
/* sticky CTA bar: equalize REQUEST pill + ADD TO CART height */
@media (max-width:768px){.aureum-pr-float,.single_add_to_cart_button,.au-sticky-atc,.au-pdp-sticky__btn{min-height:52px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;}}
/* device-lab: homepage This-release + any 1fr 1.3fr tile stack on mobile (was clipping right card) */
@media (max-width:768px){
body.home .au-tile__inner>div[style*="grid-template-columns"],body.home .au-journal__inner[style*="grid-template-columns"],body.home [style*="grid-template-columns:1fr 1.3fr"],body.home [style*="grid-template-columns:1fr 1.4fr 1fr"],body.home [style*="grid-template-columns:1fr 1.5fr"]{grid-template-columns:1fr!important;}
}
/* SYSTEMATIC device-lab: stack ALL inline multi-col grids on mobile (asymmetric = clippers) */
@media (max-width:768px){
[style*="grid-template-columns:1fr 1.3fr"],[style*="grid-template-columns:1fr 1.5fr"],[style*="grid-template-columns:1.3fr 1fr"],[style*="grid-template-columns: 1.3fr 1fr"],[style*="grid-template-columns:1fr 1.4fr 1fr"]{grid-template-columns:1fr!important;}
}
@media (max-width:600px){
[style*="grid-template-columns:repeat(3,1fr)"],[style*="grid-template-columns: repeat(3, 1fr)"],[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:1fr!important;}
[style*="grid-template-columns:repeat(4,1fr)"],[style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
/* device-lab: cart line-items -> premium stacked cards on mobile (was cramped table) */
@media (max-width:768px){
.woocommerce-cart-form__contents thead{display:none!important;}
.woocommerce-cart-form__contents,.woocommerce-cart-form__contents tbody,.woocommerce-cart-form__contents tr,.woocommerce-cart-form__contents td{display:block!important;width:auto!important;}
.woocommerce-cart-form__contents tr.cart_item{border:1px solid var(--au-hairline-strong,rgba(31,27,23,.14))!important;border-radius:14px!important;padding:16px 18px 18px!important;margin:0 0 16px!important;position:relative!important;background:var(--au-paper,#fff)!important;box-shadow:0 1px 3px rgba(31,27,23,.04)!important;}
.woocommerce-cart-form__contents tr.cart_item td{border:none!important;border-top:none!important;padding:5px 0!important;text-align:left!important;font-size:15px!important;}
.woocommerce-cart-form__contents tr.cart_item td.product-remove,.woocommerce-cart-form__contents tr.cart_item td.remove{position:absolute!important;top:14px!important;right:14px!important;padding:0!important;width:auto!important;}
.woocommerce-cart-form__contents tr.cart_item td.product-name{font-family:var(--au-display)!important;font-size:20px!important;padding-right:32px!important;margin-bottom:2px!important;}
.woocommerce-cart-form__contents tr.cart_item td.product-price,.woocommerce-cart-form__contents tr.cart_item td.product-subtotal{font-family:var(--au-display)!important;font-size:18px!important;color:var(--au-ink)!important;}
.woocommerce-cart-form__contents tr.cart_item td.product-quantity{margin-top:6px!important;}
.woocommerce-cart-form__contents tr.cart_item td.product-thumbnail img{max-width:72px!important;border-radius:8px!important;}
}
/* ============================================================
TIDIO LAUNCHER — clear the mobile bottom nav (2026-09-09)
The launcher and its "Chat with us" teaser sat directly on top of the
category filter row, because Tidio anchors its wrapper to bottom:0 and
knows nothing about #aureumBnav (60px tall, fixed). The wrapper is
pointer-events:none and full-viewport, so shifting it moves the launcher
without blocking anything; when the panel opens, the bottom nav stays
reachable below it instead of being covered.
============================================================ */
@media (max-width: 782px) {
/* Tidio sets an inline height:100%, so shifting bottom alone pushes the opened
panel off the top of the screen. Shrink the wrapper by the same amount. */
#tidio-chat {
bottom: 68px !important;
height: calc(100% - 68px) !important;
}
}
/* ============================================================
PRODUCT-CARD CTA TAP TARGET — mobile (2026-09-09)
.au-card__buy rendered 33px tall on a 390px viewport. That clears the
WCAG 2.2 AA minimum (24px), so this is not a compliance fix — it is the
primary commerce action on the busiest mobile surface, and a thumb-sized
target converts better. Height only; type, colour and radius unchanged.
Dense compound chips are deliberately left at 28px: they pass AA, and
inflating 30 of them would destroy the tag-cloud density.
============================================================ */
@media (max-width: 782px) {
.au-card__buy {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
}
/* ============================================================
PDP BUY BOX — loyalty line + sticky-bar float collision (2026-09-11)
============================================================ */
/* WPLoyalty's "Earn up to N points." span was styled as a 190x84 boxed block
sitting in the same wrapped flex row as the variation selector, so it shoved
the MG dropdown to the right and made the buy box read as two competing
controls. It is supporting copy, not a control: full-width, slim, below the
form, sentence case. */
.single-product .wlr-product-message {
flex-basis: 100% !important;
width: 100% !important;
order: 5 !important;
margin: 4px 0 0 !important;
padding: 8px 0 !important;
background: transparent !important;
border: 0 !important;
border-top: 1px solid var(--au-hairline) !important;
border-radius: 0 !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
color: var(--au-gold-text, #7C5E12) !important;
}
/* When the sticky add-to-cart bar is showing, the My Rewards pill (rail-1, 24px)
sat directly on top of the bar's product name. Lift the whole left rail above
the bar for as long as it is visible. Measured bar height: 77px. */
/* The bar reveals by more than one mechanism (class on some scroll ranges, not on
others), so a :has(.visible) hook is unreliable. On a product page the bar can
appear at any moment, so on desktop the rail simply lives above it always.
Mobile keeps its own values (bottom nav offset) from the media query below. */
@media (min-width: 783px) {
body.single-product {
--au-float-rail-1: 100px;
--au-float-rail-2: 156px;
--au-float-rail-3: 212px;
}
}
/* ============================================================
PDP MEDIA CARD — tablet / phone (2026-09-11)
============================================================
Below 1024px the layout stacks, and the media card was a full-width 1:1
square with 48px of inner padding: on an iPad the entire first screen was
the photo card and the title, price and Add to Cart began at y≈970; on a
phone the product occupied ~200px of a 327px card. A shorter frame with
tighter padding keeps the photo large and brings the buy box up a screen.
Desktop (≥1024) is untouched. */
@media (max-width: 1023px) {
body.single-product .au-pdp-media {
aspect-ratio: 4 / 3 !important;
padding: 24px !important;
border-radius: 20px !important;
}
body.single-product .au-pdp-media__img {
max-height: 100% !important;
max-width: 92% !important;
width: auto !important;
object-fit: contain !important;
}
}
@media (max-width: 600px) {
body.single-product .au-pdp-media {
aspect-ratio: 1 / 1 !important;
padding: 14px !important;
}
body.single-product .au-pdp-media__img {
max-width: 100% !important;
}
}
/* The mobile bottom nav shows up to 768px, but the float rail only switched to
its "clear the nav" values at ≤600px. In the 601–768 band (iPad portrait)
the My Rewards pill sat behind the nav. Match the nav's breakpoint. */
@media (min-width: 601px) and (max-width: 768px) {
:root {
--au-float-gutter: 16px;
--au-float-rail-1: 74px;
--au-float-rail-2: 130px;
--au-float-rail-3: 186px;
}
}
/* PDP media: the image is a grid child with an inline max-width, so max-height
alone did not bind — at 768 the frame was 518px tall and the photo 591px,
clipped top and bottom by overflow:hidden. Size the image to the frame and
let object-fit keep the whole vial visible. */
@media (max-width: 1023px) {
body.single-product .au-pdp-media__img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
}
/* My Rewards pill: aureum-premium-polish.php still declares
`#wll-site-launcher .wll-launcher-button-container { bottom:24px !important }`
(its comment says position was removed; for the pill it was not). The id in
that selector out-specifies the FLOATING UI LAYER rule, so the pill ignored the
rail on every viewport and sat under the mobile bottom nav. Match the
specificity here (this file loads later) so the rail is the single owner. */
#wll-site-launcher .wll-launcher-button-container,
body #wll-site-launcher .wll-launcher-button-container {
left: var(--au-float-gutter) !important;
right: auto !important;
bottom: var(--au-float-rail-1) !important;
}
/* The media frame is display:grid with auto-sized tracks, so the image's
height:100% resolved against a track that was itself sized by the image —
circular, treated as auto, still overflowing. Make the single track the
frame's content box so 100% means the frame. */
@media (max-width: 1023px) {
body.single-product .au-pdp-media {
grid-template-columns: 100% !important;
grid-template-rows: 100% !important;
}
}
/* ============================================================
SHOP HERO — tablet / phone (2026-09-11)
============================================================
The catalogue hero is min-height:62vh with 140px/100px vertical padding
(inline). Cinematic on a desktop; on an iPad it is 635px tall and, with the
category chips beneath it, the first product card starts at y=1077 — a full
screen of scrolling before a single product. Keep the composition, shorten
the frame where the screen is short. Desktop untouched. */
@media (max-width: 1023px) {
body.post-type-archive-product .au-shop-hero,
body.tax-product_cat .au-shop-hero {
min-height: 44vh !important;
padding: 88px 24px 64px !important;
}
}
@media (max-width: 600px) {
body.post-type-archive-product .au-shop-hero,
body.tax-product_cat .au-shop-hero {
min-height: 40vh !important;
padding: 72px 20px 52px !important;
}
}
/* Journal (blog index) hero: same inline 58vh + 140/100px pattern as the shop.
Same remedy on short screens. */
@media (max-width: 1023px) {
body.blog .au-journal-hero { min-height: 42vh !important; padding: 88px 24px 64px !important; }
}
@media (max-width: 600px) {
body.blog .au-journal-hero { min-height: 38vh !important; padding: 72px 20px 52px !important; }
}
/* ============================================================
PHONE FLOAT DIET (2026-09-11)
============================================================
On a 390px screen the bottom 200px held: the bottom nav, the Tidio launcher
AND its "Chat with us" teaser, the My Rewards pill and the Request-a-Compound
float. Measured on the homepage: the rewards pill (40x40 at y=730) sat on
top of the hero's primary "Enter the Catalog" CTA (y=703-754).
Both Aureum floats have permanent homes — Points & Rewards is the third item
in the account nav, and the compound request has its own page — so on phones
they are hidden and the bottom nav + chat remain. Tablet and desktop keep them. */
@media (max-width: 600px) {
.wll-launcher-button-container,
#wll-site-launcher .wll-launcher-button-container,
.aureum-pr-float,
#aureum-pr-float {
display: none !important;
}
}
/* Shop hero trust pill on phones: three mono labels in a 327px pill wrapped
each label into a 3-line stack ("COA / PER / LOT"). Keep every label on one
line, tighten the pill, and let it scroll sideways if a phone is narrower. */
@media (max-width: 600px) {
.au-shop-hero__pill {
gap: 14px !important;
padding: 11px 16px !important;
margin-top: 28px !important;
/* the hero text wrapper is wider than the visible column, so 100% still
let the pill bleed under the hero's overflow:hidden; bind to the viewport */
max-width: calc(100vw - 48px) !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.au-shop-hero__pill::-webkit-scrollbar { display: none; }
.au-shop-hero__pill > span {
white-space: nowrap !important;
font-size: 10px !important;
letter-spacing: 0.10em !important;
flex: 0 0 auto !important;
}
}
/* Shop toolbar on phones: "41 Compounds | Sort: [select]" wrapped mid-label
and the View Certificates link floated into the same row. Two clean rows:
count + sort, then the certificates link. */
@media (max-width: 600px) {
.au-shop-toolbar { gap: 12px !important; }
.au-shop-toolbar__meta { gap: 12px !important; flex-wrap: nowrap !important; width: 100% !important; }
.au-shop-toolbar__meta > span { white-space: nowrap !important; }
.au-shop-toolbar__meta form.woocommerce-ordering { flex: 1 1 auto !important; min-width: 0 !important; }
.au-shop-toolbar__meta form.woocommerce-ordering select { width: 100% !important; }
.au-shop-toolbar > a { width: 100% !important; text-align: left !important; }
}
/* Home hero eyebrow "Aureum Archive · Vol I": brand gold at 11px over a busy
photograph read as a smudge at 1440 (the only weak line in a strong hero).
Same colour, lifted: a soft ink halo and a hair more tracking. */
.au-hero__eyebrow {
color: var(--au-gold-light, #D4B64D) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 14px rgba(0, 0, 0, .35) !important;
letter-spacing: 0.2em !important;
}