/* LuxDesire client-side cart */
:root{
--lux-red:#900000;
--lux-red2:#be002f;
--lux-gold:#d4af37;
}
/* the visitor's own currency now REPLACES the $ figure outright (cart.js:
localAmount/moneyHtml/annotateOne) rather than following it in
parentheses — so .lux-fx is the price itself now, not a secondary note.
It intentionally carries no font-size/weight/colour of its own: every
place it's used either (a) copies the ORIGINAL priced element's own
classes onto it (catalogue cards, product page, carousel, sidebar —
annotateOne()), so it automatically inherits that exact same bold/gold
treatment, or (b) sits as a child of an already-styled parent (the
bundle-picker price, inline "worth $X" sentences), inheriting colour and
weight the normal CSS way. Adding a competing rule here would just fight
whichever of those two it should be matching in a given spot. */
.lux-fx{white-space:nowrap}
/* the ORIGINAL $ text is kept in the DOM (never rewritten — the "add to
cart" code reads the real USD price back out of it) and only hidden from
view once a converted figure exists to replace it visually. */
.lux-usd-hidden{display:none!important}
/* Logo size itself is set in wp-content/uploads/2025/10/lux-header.css
(#masthead img.hfe-site-logo-img — higher specificity via #masthead id,
wins over Elementor's own `.hfe-site-logo-container img{width:26%}`).
Sized there to 78px so the header folds into one compact row next to the
nav/search/cart line, without stretching the round badge out of shape. */
/* ---- cart icon in the header menu ----
li.lux-cart-item stretches to the tallest sibling in the flex nav (itself,
at 42px), but the "Home/Store/…" links are fixed-height (9px padding +
14px line-height = 32px) and sit pinned to the TOP of that stretched box —
they don't get vertically re-centred. A same-height circle badge therefore
reads ~5px lower than the nav text's optical centre. Shrink the badge and
nudge it up so both centre on the same line. */
li.lux-cart-item{
position:relative;display:flex!important;align-items:flex-start;
overflow:visible!important;margin-left:14px;
}
li.lux-cart-item .lux-cart-toggle{
display:flex!important;align-items:center;justify-content:center;cursor:pointer;position:relative;
width:34px;height:34px;flex:0 0 34px;margin-top:-1px;padding:0;border:1px solid rgba(212,175,55,.7);
border-radius:50%;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;
line-height:1;overflow:visible;transition:background .2s ease,border-color .2s ease;
}
li.lux-cart-item .lux-cart-toggle:hover{background:rgba(255,255,255,.24);border-color:var(--lux-gold)}
li.lux-cart-item .lux-cart-toggle svg{
width:18px;height:18px;fill:#fff;display:block;flex:0 0 18px;
}
.lux-cart-badge{
position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
border-radius:999px;background:var(--lux-gold);color:#3a2600;
font-family:'Play',sans-serif;font-size:10px;font-weight:700;line-height:18px;text-align:center;
box-shadow:0 1px 5px rgba(0,0,0,.4);border:1.5px solid #fff;
}
.lux-cart-badge[hidden]{display:none}
/* mobile trigger sitting next to the burger — hidden on desktop */
.lux-cart-toggle.lux-cart-mobile{
display:none;align-items:center;justify-content:center;position:relative;
width:40px;height:40px;flex:0 0 40px;padding:0;margin:0 8px 0 0;cursor:pointer;
border:1px solid rgba(212,175,55,.7);border-radius:50%;
background:rgba(255,255,255,.12);color:#fff;overflow:visible;
}
.lux-cart-toggle.lux-cart-mobile svg{width:21px;height:21px;fill:#fff;display:block}
@media (max-width:1024px){
/* the nav widget stacks vertically, so take the cart out of flow and
park it beside the burger instead of above it */
.hfe-nav-menu{position:relative}
.lux-cart-toggle.lux-cart-mobile{
display:flex;position:absolute;top:2px;right:48px;margin:0;z-index:9;
}
li.lux-cart-item{display:none!important}
/* free up the width the cart + language buttons now occupy so neither
sits on the search bar */
.elementor-widget-aws .elementor-widget-container{padding-right:100px}
}
/* ---- brand styling for the native WooCommerce buy buttons ---- */
.woocommerce div.product form.cart{display:flex!important;align-items:stretch;gap:10px;flex-wrap:wrap}
.woocommerce div.product form.cart .quantity{margin:0}
.woocommerce div.product form.cart .quantity .qty{
height:48px;width:74px;border:1px solid #ddd;border-radius:10px;text-align:center;
font-family:'Play',sans-serif;font-size:15px;font-weight:600;color:#2b0d0d;
}
.woocommerce div.product form.cart .quantity .qty:focus{
border-color:var(--lux-gold);box-shadow:0 0 0 3px rgba(212,175,55,.2);outline:0;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button.add_to_cart_button{
background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%)!important;
color:#fff!important;border:0!important;border-radius:999px!important;
font-family:'Play',sans-serif!important;font-weight:700!important;letter-spacing:.4px;
box-shadow:0 3px 10px rgba(144,0,0,.28);transition:filter .2s ease,transform .1s ease;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button{
height:48px;padding:0 34px;width:auto!important;min-width:190px;font-size:15px;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:hover{filter:brightness(1.13);color:#fff!important}
.woocommerce div.product form.cart .button.single_add_to_cart_button:active,
.woocommerce a.button.add_to_cart_button:active{transform:translateY(1px)}
/* ---- drawer ---- */
.lux-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;
transition:opacity .25s ease,visibility .25s ease;z-index:2147483000;
}
.lux-overlay.open{opacity:1;visibility:visible}
.lux-drawer{
position:fixed;top:0;right:0;height:100%;width:420px;max-width:100vw;
background:#fff;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
z-index:2147483001;display:flex;flex-direction:column;
box-shadow:-8px 0 32px rgba(0,0,0,.3);font-family:'Play',sans-serif;
}
.lux-drawer.open{transform:translateX(0)}
.lux-drawer-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:18px 20px;background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%);
color:#fff;border-bottom:2px solid var(--lux-gold);flex:0 0 auto;
}
.lux-drawer-head h2{margin:0;font-size:19px;font-weight:700;letter-spacing:.4px;color:#fff;font-family:'Play',sans-serif}
.lux-close{background:none;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:0 4px;opacity:.85}
.lux-close:hover{opacity:1}
.lux-drawer-body{flex:1 1 auto;overflow-y:auto;padding:16px 20px}
.lux-drawer-foot{flex:0 0 auto;padding:16px 20px 20px;border-top:1px solid #e8e8e8;background:#fafafa}
/* ---- line items ---- */
.lux-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #eee}
.lux-line:last-child{border-bottom:0}
.lux-line-img{width:68px;height:68px;flex:0 0 68px;border-radius:8px;object-fit:cover;background:#f2f2f2;border:1px solid #eee}
.lux-line-main{flex:1 1 auto;min-width:0}
.lux-line-name{
display:block;font-size:14px;font-weight:600;color:#2b0d0d;text-decoration:none;
line-height:1.35;margin-bottom:4px;overflow-wrap:anywhere;
}
.lux-line-name:hover{color:var(--lux-red)}
.lux-line-price{font-size:13px;color:#777;margin-bottom:8px}
.lux-qty{display:inline-flex;align-items:center;border:1px solid #ddd;border-radius:999px;overflow:hidden;background:#fff}
.lux-qty button{
width:28px;height:28px;border:0;background:none;cursor:pointer;font-size:16px;line-height:1;
color:var(--lux-red);font-weight:700;
}
.lux-qty button:hover{background:#fbf3e6}
.lux-qty span{min-width:28px;text-align:center;font-size:13px;font-weight:700;color:#2b0d0d}
.lux-line-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;flex:0 0 auto}
.lux-line-total{font-size:15px;font-weight:700;color:var(--lux-red);white-space:nowrap}
.lux-remove{background:none;border:0;color:#b0b0b0;cursor:pointer;font-size:12px;padding:2px 0;text-decoration:underline}
.lux-remove:hover{color:#c0392b}
/* ---- gift line items ---- */
.lux-line-gift{background:linear-gradient(90deg,rgba(212,175,55,.08),transparent 60%);border-radius:10px;padding:14px 8px}
.lux-gift-badge{
display:inline-block;background:var(--lux-gold);color:#3a2600;font-size:9px;font-weight:700;
letter-spacing:.4px;padding:2px 6px;border-radius:4px;vertical-align:middle;margin-left:4px;
}
.lux-was{text-decoration:line-through;color:#aaa}
.lux-gift-tag{color:#1d7a3e;font-weight:700}
.lux-gift-extra{color:#888;font-weight:500}
.lux-gift-hint{font-size:11px;color:#a07a00;margin-top:3px;line-height:1.4}
.lux-gift-progress{
background:#fbf3e6;border:1px dashed var(--lux-gold);border-radius:10px;
padding:10px 12px;font-size:12.5px;color:#6b4e00;margin-bottom:12px;line-height:1.5;
}
.lux-gift-progress a{color:var(--lux-red);font-weight:600}
.lux-empty{text-align:center;padding:56px 16px;color:#888}
.lux-empty svg{width:64px;height:64px;fill:#e0e0e0;margin-bottom:14px}
.lux-empty p{margin:0 0 18px;font-size:15px}
/* ---- totals + buttons ---- */
.lux-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:8px;color:#555}
.lux-row.total{font-size:19px;font-weight:700;color:#2b0d0d;margin:12px 0 16px;padding-top:12px;border-top:1px dashed #ddd}
.lux-row.total .v{color:var(--lux-red)}
.lux-btn{
display:block;width:100%;padding:14px 18px;border:0;border-radius:999px;cursor:pointer;
font-family:'Play',sans-serif;font-size:15px;font-weight:700;letter-spacing:.3px;text-align:center;
background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%);color:#fff;text-decoration:none;
transition:filter .2s ease,transform .1s ease;
}
.lux-btn:hover{filter:brightness(1.12);color:#fff}
.lux-btn:active{transform:translateY(1px)}
.lux-btn.ghost{background:none;color:var(--lux-red);border:1px solid #e0c98a;margin-top:10px}
.lux-btn.ghost:hover{background:#fbf3e6;filter:none;color:var(--lux-red)}
.lux-btn[disabled]{opacity:.5;cursor:not-allowed}
/* ---- checkout form ---- */
.lux-field{margin-bottom:12px}
.lux-field label{display:block;font-size:12px;font-weight:600;color:#555;margin-bottom:5px;letter-spacing:.2px}
.lux-field input,.lux-field textarea{
width:100%;padding:11px 14px;border:1px solid #ddd;border-radius:10px;
font-family:'Play',sans-serif;font-size:14px;color:#2b0d0d;background:#fff;outline:0;
transition:border-color .2s ease,box-shadow .2s ease;
}
.lux-field input:focus,.lux-field textarea:focus{border-color:var(--lux-gold);box-shadow:0 0 0 3px rgba(212,175,55,.2)}
.lux-field textarea{resize:vertical;min-height:70px}
.lux-field.err input,.lux-field.err textarea{border-color:#c0392b}
.lux-field .msg{display:none;font-size:11px;color:#c0392b;margin-top:4px}
.lux-field.err .msg{display:block}
.lux-back{background:none;border:0;color:#888;font-size:13px;cursor:pointer;padding:0;margin-bottom:14px;text-decoration:underline}
.lux-back:hover{color:var(--lux-red)}
/* ---- success ---- */
.lux-done{text-align:center;padding:40px 10px}
.lux-done .tick{
width:66px;height:66px;border-radius:50%;margin:0 auto 18px;
background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%);
display:flex;align-items:center;justify-content:center;
}
.lux-done .tick svg{width:32px;height:32px;fill:#fff}
.lux-done h3{margin:0 0 8px;font-size:20px;color:#2b0d0d;font-family:'Play',sans-serif}
.lux-done p{margin:0 0 6px;color:#666;font-size:14px;line-height:1.5}
.lux-done .num{font-weight:700;color:var(--lux-red)}
/* ---- homepage bestsellers horizontal scroll row (sits above the gift banner) ---- */
.lux-best-row{
background:linear-gradient(180deg, #200e0e 0%, #2c1111 100%);
border-top:1px solid rgba(212,175,55,.22);border-bottom:2px solid var(--lux-gold);
padding:14px 0;
}
.lux-best-row__inner{max-width:1240px;margin:0 auto;padding:0 20px}
.lux-best-row__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.lux-best-row__head h2{
margin:0;font-family:'Play',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--lux-gold);display:flex;align-items:center;gap:7px;
}
.lux-best-row__flame{font-size:15px;line-height:1}
.lux-best-row__nav{display:flex;gap:6px;flex:0 0 auto}
.lux-best-row__arrow{
/* was 28px — under the ~40px touch-target minimum for a control someone on
a phone taps repeatedly to page through the carousel */
width:40px;height:40px;border-radius:50%;flex:0 0 40px;border:1px solid rgba(212,175,55,.6);
background:rgba(255,255,255,.08);color:#f3d98a;font-size:13px;cursor:pointer;padding:0;
display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease;
}
.lux-best-row__arrow:hover{background:rgba(255,255,255,.2);border-color:var(--lux-gold)}
.lux-best-row__track{
display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none;
}
.lux-best-row__track::-webkit-scrollbar{display:none}
.lux-best-card{
flex:0 0 auto;width:150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:7px;
text-decoration:none;padding:2px;transition:transform .15s ease;
}
.lux-best-card:hover{transform:translateY(-3px)}
.lux-best-card__imgwrap{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#f2f2f2;border:1px solid rgba(212,175,55,.25)}
.lux-best-card:hover .lux-best-card__imgwrap{border-color:var(--lux-gold)}
.lux-best-card__imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.lux-best-card__badge{
position:absolute;top:6px;left:6px;background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%);
color:#fff;font-family:'Play',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.2px;
padding:3px 7px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.4);white-space:nowrap;
}
.lux-best-card__name{
font-family:'Play',sans-serif;font-size:12.5px;font-weight:600;color:#f2e6d8;line-height:1.25;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;
}
.lux-best-card__price{font-family:'Play',sans-serif;font-size:14px;font-weight:700;color:var(--lux-gold)}
@media (max-width:640px){
.lux-best-row{padding:12px 0}
.lux-best-row__inner{padding:0 14px}
.lux-best-card{width:126px}
.lux-best-row__head h2{font-size:12.5px}
}
/* ---- homepage "spend $36, pick a gift" banner ---- */
@keyframes lux-gift-glow{
0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.55)}
50%{box-shadow:0 0 0 10px rgba(212,175,55,0)}
}
.lux-gift-banner{
background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%);
border-bottom:4px solid var(--lux-gold);
box-shadow:inset 0 -30px 40px -30px rgba(0,0,0,.35);
}
.lux-gift-banner__inner{max-width:1240px;margin:0 auto;padding:22px 28px 18px;color:#fff;text-align:center}
.lux-gift-banner__head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:16px}
/* Both banner animations used to be `infinite`, so they kept pulsing for as
long as the tab stayed open — visually noisy and, for the glow below,
genuinely expensive (animating box-shadow repaints every frame). They now
only run on the visitor's first page of the session, a few times, and
`html.lux-intro` is what switches them on (set once in cart.js). */
.lux-gift-banner__icon{
font-size:38px;line-height:1;flex:0 0 auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
}
html.lux-intro .lux-gift-banner__icon{
animation:lux-gift-bounce 2.2s ease-in-out 3;
}
@keyframes lux-gift-bounce{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
.lux-gift-banner__eyebrow{
display:inline-block;font-family:'Play',sans-serif;font-size:10.5px;font-weight:700;
letter-spacing:1.2px;text-transform:uppercase;color:#3a2600;background:var(--lux-gold);
padding:3px 10px;border-radius:999px;margin-bottom:7px;
}
.lux-gift-banner__copy h2{
margin:0 0 6px;font-family:'Play',sans-serif;font-size:25px;font-weight:700;color:#fff;
letter-spacing:.2px;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.lux-gift-banner__copy p{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.92);max-width:720px}
.lux-gift-banner__copy strong{color:var(--lux-gold);font-size:1.05em}
.lux-gift-banner__items{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.lux-gift-card{
flex:1 1 280px;max-width:400px;display:flex;align-items:center;gap:14px;text-align:left;
background:rgba(255,255,255,.97);border-radius:16px;padding:12px;text-decoration:none;
box-shadow:0 10px 30px rgba(0,0,0,.3);border:2px solid var(--lux-gold);
transition:transform .18s ease,box-shadow .18s ease;
}
html.lux-intro .lux-gift-card{
animation:lux-gift-glow 2.6s ease-in-out 3;
}
/* visitors who ask their OS for less motion get none of the intro flourish */
@media (prefers-reduced-motion:reduce){
html.lux-intro .lux-gift-card,
html.lux-intro .lux-gift-banner__icon{animation:none}
}
.lux-gift-card:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 16px 38px rgba(0,0,0,.38)}
.lux-gift-card img{width:68px;height:68px;border-radius:12px;object-fit:cover;flex:0 0 68px;background:#f2f2f2}
.lux-gift-card__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.lux-gift-card__tag{
font-family:'Play',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.3px;
color:#fff;background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%);
padding:3px 10px;border-radius:999px;width:fit-content;
}
.lux-gift-card__name{font-family:'Play',sans-serif;font-size:16px;font-weight:700;color:#2b0d0d;line-height:1.25}
.lux-gift-card__price{font-family:'Play',sans-serif;font-size:18px;font-weight:700;color:#1d7a3e}
.lux-gift-card__price del{color:#aaa;font-weight:500;margin-right:8px;font-size:.75em}
/* ---- discretion / trust strip ---- */
.lux-gift-banner__trust{
display:flex;gap:14px;flex-wrap:wrap;padding-top:12px;border-top:1px solid rgba(255,255,255,.25);
}
.lux-trust-item{
display:flex;align-items:center;gap:9px;font-family:'Play',sans-serif;font-size:13px;
color:rgba(255,255,255,.95);flex:1 1 220px;
}
.lux-trust-item .ico{
flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.14);border:1px solid rgba(212,175,55,.6);font-size:15px;
}
.lux-trust-item b{color:var(--lux-gold);font-weight:700}
@media (max-width:900px){
.lux-gift-banner__copy h2{font-size:28px}
}
@media (max-width:640px){
.lux-gift-banner__inner{padding:28px 18px 22px}
.lux-gift-banner__icon{font-size:42px}
.lux-gift-banner__copy h2{font-size:22px}
.lux-gift-banner__copy p{font-size:14px}
.lux-gift-card{max-width:100%;padding:14px}
.lux-gift-card img{width:76px;height:76px;flex-basis:76px}
.lux-gift-card__name{font-size:16px}
.lux-gift-card__price{font-size:18px}
.lux-trust-item{flex:1 1 100%}
}
/* ---- toast ---- */
.lux-toast{
position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);
background:#1e1e1e;color:#fff;padding:13px 22px;border-radius:999px;
font-family:'Play',sans-serif;font-size:14px;font-weight:600;
box-shadow:0 6px 24px rgba(0,0,0,.35);z-index:2147483002;
opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
border:1px solid rgba(212,175,55,.5);max-width:90vw;text-align:center;
}
.lux-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* ---- quick-add button on catalogue cards ----
Astra hides it until hover, which makes it unreachable on touch devices.
Keep it always visible and in brand colours. */
.woocommerce ul.products li.product a.ast-on-card-button,
a.ast-on-card-button.add_to_cart_button{
visibility:visible!important;opacity:1!important;
top:12px;right:12px;width:42px;height:42px;padding:0!important;min-width:0!important;
display:flex!important;align-items:center;justify-content:center;
border-radius:50%!important;
background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%)!important;
color:#fff!important;border:1.5px solid rgba(212,175,55,.85)!important;
box-shadow:0 3px 12px rgba(0,0,0,.3);
transition:transform .18s ease,filter .18s ease;
}
.woocommerce ul.products li.product a.ast-on-card-button:hover,
a.ast-on-card-button.add_to_cart_button:hover{transform:scale(1.09);filter:brightness(1.15)}
/* Astra puts a translucent white disc behind the glyph — it swallows the icon
once the button itself is coloured, so flatten it. */
a.ast-on-card-button.add_to_cart_button .ahfb-svg-iconset,
a.ast-on-card-button.add_to_cart_button .ast-icon{
display:flex!important;align-items:center;justify-content:center;
width:20px;height:20px;line-height:0;color:#fff!important;
background:none!important;background-color:transparent!important;
opacity:1!important;border-radius:0!important;box-shadow:none!important;
}
a.ast-on-card-button.add_to_cart_button svg{
width:20px!important;height:20px!important;display:block;
fill:#fff!important;stroke:#fff!important;
}
/* Astra's hover tooltip — keep it out of the circle */
a.ast-on-card-button.add_to_cart_button .ast-card-action-tooltip{
position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
background:#1e1e1e;color:#fff;font-family:'Play',sans-serif;font-size:11px;font-weight:600;
padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;
opacity:0;transition:opacity .18s ease;
}
a.ast-on-card-button.add_to_cart_button:hover .ast-card-action-tooltip{opacity:1}
/* ---- gift promo notice on the product page ---- */
.lux-gift-notice{
display:flex;align-items:flex-start;gap:12px;margin:14px 0 18px;padding:14px 16px;
background:linear-gradient(135deg,#fff8e8,#fbf0d6);border:1px solid rgba(212,175,55,.6);
border-radius:12px;font-family:'Play',sans-serif;font-size:13.5px;line-height:1.55;color:#5c4300;
max-width:520px;
}
.lux-gift-notice svg{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:var(--lux-red);stroke-width:1.6;margin-top:1px}
.lux-gift-notice strong{color:var(--lux-red)}
/* ---- listing "added" state ---- */
a.add_to_cart_button.lux-added{
background:linear-gradient(135deg,#1d7a3e 0%,#25a153 100%)!important;
border-color:rgba(255,255,255,.8)!important;
}
@media (max-width:480px){
.lux-drawer{width:100%}
.lux-drawer-body{padding:14px 16px}
.lux-drawer-foot{padding:14px 16px 18px}
}
/* ================= client-side search (search.js) ================= */
.aws-container{position:relative}
.lux-sr-drop{
position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:2147482500;
background:#fff;border:1px solid rgba(212,175,55,.55);border-radius:12px;overflow:hidden;
box-shadow:0 14px 36px rgba(0,0,0,.28);font-family:'Play',sans-serif;max-height:70vh;overflow-y:auto;
}
.lux-sr-item{
display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;
border-bottom:1px solid #f0f0f0;transition:background .15s ease;
}
.lux-sr-item:last-of-type{border-bottom:0}
.lux-sr-item:hover{background:#fbf3e6}
.lux-sr-item img{width:46px;height:46px;flex:0 0 46px;object-fit:cover;border-radius:8px;background:#f2f2f2}
.lux-sr-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.lux-sr-name{font-size:13.5px;font-weight:600;color:#2b0d0d;line-height:1.3}
.lux-sr-cat{font-size:11px;color:#999}
.lux-sr-price{font-size:13.5px;font-weight:700;color:var(--lux-red);white-space:nowrap}
.lux-sr-price del{color:#bbb;font-weight:500;margin-right:5px;font-size:.85em}
.lux-sr-all{
display:block;padding:11px 14px;text-align:center;font-size:12.5px;font-weight:700;
color:#fff;background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%);text-decoration:none;
}
.lux-sr-all:hover{filter:brightness(1.12);color:#fff}
.lux-sr-empty{padding:16px;text-align:center;color:#888;font-size:13px}
.lux-sr-heading{
padding:10px 14px 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--lux-gold,#b8860b);background:#fff;
}
/* results page */
.lux-srp{max-width:1200px;margin:0 auto;padding:40px 20px 60px;font-family:'Play',sans-serif}
.lux-srp-title{margin:0 0 6px;font-size:32px;font-weight:700;color:#2b0d0d;font-family:'Play',sans-serif}
.lux-srp-sub{margin:0 0 28px;font-size:15px;color:#777}
.lux-srp-sub strong{color:var(--lux-red)}
.lux-srp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:24px}
.lux-srp-card{
display:flex;flex-direction:column;text-decoration:none;background:#fff;border-radius:12px;
overflow:hidden;border:1px solid #eee;transition:transform .18s ease,box-shadow .18s ease;
}
.lux-srp-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.lux-srp-img{display:block;aspect-ratio:1/1;background:#f5f5f5;overflow:hidden}
.lux-srp-img img{width:100%;height:100%;object-fit:cover;display:block}
.lux-srp-name{padding:12px 12px 2px;font-size:14.5px;font-weight:700;color:#2b0d0d;line-height:1.35}
.lux-srp-cat{padding:0 12px;font-size:11.5px;color:#999}
.lux-srp-price{padding:6px 12px 14px;font-size:16px;font-weight:700;color:var(--lux-red)}
.lux-srp-price del{color:#bbb;font-weight:500;margin-right:6px;font-size:.8em}
.lux-srp-empty{grid-column:1/-1;padding:40px;text-align:center;color:#888;font-size:15px}
.lux-srp-empty a{color:var(--lux-red);font-weight:700}
@media (max-width:600px){
.lux-srp{padding:26px 14px 40px}
.lux-srp-title{font-size:24px}
.lux-srp-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
}
/* inline confirmation replacing the dead wp-comments-post.php round-trip */
.lux-review-done{
background:#f2faf4;border:1px solid #b9e2c6;border-radius:12px;padding:16px 18px;margin:0 0 20px;
font-family:'Play',sans-serif;font-size:14px;color:#1d6b38;line-height:1.55;
}
.lux-review-done strong{color:#14562b}
/* ================= sitewide discretion / trust bar (top of every page) ================= */
.lux-trustbar{
width:100%;position:relative;overflow:hidden;
background:linear-gradient(135deg,#1a0509 0%,#3a0a14 55%,#1a0509 100%);
border-bottom:1px solid rgba(212,175,55,.45);
box-shadow:0 1px 0 rgba(212,175,55,.15) inset;
}
.lux-trustbar__track{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:7px 22px;max-width:1300px;margin:0 auto;padding:9px 18px;
font-family:'Play',sans-serif;
}
.lux-trustbar__item{
display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
font-size:12.5px;font-weight:600;letter-spacing:.25px;color:#f1dfa3;
}
.lux-trustbar__ico{font-size:14px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.lux-trustbar__sep{color:var(--lux-gold);opacity:.55;font-size:6px}
@media (max-width:900px){
.lux-trustbar__track{gap:6px 14px;padding:8px 14px}
.lux-trustbar__item{font-size:11.5px}
}
@media (max-width:520px){
.lux-trustbar__track{padding:7px 10px;gap:5px 10px}
.lux-trustbar__item{font-size:10.5px}
.lux-trustbar__sep{display:none}
.lux-trustbar__ico{font-size:12.5px}
}
/* ================= checkout: summary, payment, consent ================= */
.lux-sec{
font-family:'Play',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;
text-transform:uppercase;color:#a08050;margin:20px 0 10px;padding-bottom:6px;
border-bottom:1px solid #eee;
}
.lux-sec:first-child{margin-top:4px}
/* two-step progress indicator */
.lux-steps{
display:flex;align-items:center;justify-content:center;gap:8px;
margin:2px 0 16px;font-family:'Play',sans-serif;
}
.lux-step{display:flex;align-items:center;gap:8px}
.lux-step-num{
display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;
border-radius:50%;font-size:13px;font-weight:700;border:1.5px solid #ddd;color:#999;background:#fff;
transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.lux-step-label{font-size:12.5px;font-weight:600;color:#999;letter-spacing:.2px;transition:color .2s ease}
.lux-step.is-active .lux-step-num{border-color:var(--lux-red);background:var(--lux-red);color:#fff}
.lux-step.is-active .lux-step-label{color:#2b0d0d}
.lux-step.is-done .lux-step-num{border-color:var(--lux-gold);background:var(--lux-gold);color:#3a2600}
.lux-step.is-done .lux-step-label{color:#a08050}
.lux-step-line{width:34px;height:1.5px;background:#e2e2e2;flex:0 0 auto}
.lux-step-line.is-done{background:var(--lux-gold)}
/* order summary block */
.lux-sum{
background:#fbf7ef;border:1px solid rgba(212,175,55,.45);border-radius:12px;
padding:12px 14px;margin-bottom:6px;font-family:'Play',sans-serif;
}
.lux-sum-head{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#a08050;margin-bottom:8px}
.lux-sum-row{display:flex;gap:8px;align-items:baseline;font-size:13px;color:#4a3a1e;padding:3px 0}
.lux-sum-q{flex:0 0 auto;font-weight:700;color:var(--lux-red);min-width:24px}
.lux-sum-n{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.lux-sum-p{flex:0 0 auto;font-weight:700;white-space:nowrap}
.lux-sum-total{border-top:1px dashed rgba(212,175,55,.6);margin-top:6px;padding-top:8px;font-size:15px;color:#2b0d0d}
/* select styled like the inputs */
.lux-field select{
width:100%;padding:11px 14px;border:1px solid #ddd;border-radius:10px;background:#fff;
font-family:'Play',sans-serif;font-size:14px;color:#2b0d0d;outline:0;appearance:none;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 10px center;background-size:20px;
transition:border-color .2s ease,box-shadow .2s ease;
}
.lux-field select:focus{border-color:var(--lux-gold);box-shadow:0 0 0 3px rgba(212,175,55,.2)}
.lux-field.err select{border-color:#c0392b}
/* the single, locked-in payment method — no radios needed for one option,
so this reads as a confirmation card rather than a form control */
.lux-pay-only{
display:flex;align-items:flex-start;gap:12px;padding:14px 15px;margin-bottom:9px;
border:1.5px solid var(--lux-gold);border-radius:12px;
background:linear-gradient(135deg,#fffdf7 0%,#fbf3e6 100%);position:relative;
}
.lux-pay-only-ico{font-size:22px;line-height:1;flex:0 0 auto;margin-top:1px}
.lux-pay-only-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.lux-pay-only-t{font-family:'Play',sans-serif;font-size:14px;font-weight:700;color:#2b0d0d}
.lux-pay-only-d{font-size:12px;color:#8a7550;line-height:1.5}
.lux-pay-only-badge{
position:absolute;top:-9px;right:12px;background:var(--lux-red);color:#fff;
font-family:'Play',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
padding:3px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.25);
}
/* consent checkboxes */
.lux-check{
display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;cursor:pointer;
font-family:'Play',sans-serif;font-size:12.5px;line-height:1.5;color:#555;
}
.lux-check input{margin:1px 0 0;accent-color:var(--lux-red);flex:0 0 auto;width:16px;height:16px}
.lux-check strong{color:#2b0d0d}
.lux-check a{color:var(--lux-red);font-weight:600}
.lux-check-msg{display:none;font-size:12px;color:#c0392b;margin:-2px 0 6px 26px}
/* short reassurance strip under step 1 — the form itself is only two
fields, so this keeps the screen from reading as unfinished/empty */
.lux-step1-note{
margin-top:22px;padding-top:18px;border-top:1px dashed #e8e0d0;
display:flex;flex-direction:column;gap:11px;font-family:'Play',sans-serif;
}
.lux-step1-note-row{
display:flex;align-items:center;gap:10px;font-size:12.5px;color:#8a7550;line-height:1.4;
}
.lux-step1-note-row span{font-size:17px;flex:0 0 auto}
.lux-payhint{
font-family:'Play',sans-serif;font-size:11.5px;color:#7a6030;background:#fbf3e6;
border:1px dashed rgba(212,175,55,.6);border-radius:9px;padding:8px 11px;
margin:0 0 11px;line-height:1.45;text-align:center;
}
/* confirmation screen */
.lux-done-box{
background:#faf7f2;border:1px solid #ece4d6;border-radius:12px;padding:12px 14px;
margin:16px 0;text-align:left;font-family:'Play',sans-serif;
}
.lux-done-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#777;padding:3px 0}
.lux-done-row strong{color:#2b0d0d}
/* "a specialist will call within the hour" — the headline promise of the
confirmation screen, so it gets its own card rather than a plain line */
.lux-done-callout{
display:flex;align-items:center;gap:13px;text-align:left;
background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%);
border:1px solid rgba(212,175,55,.7);border-radius:14px;
padding:15px 16px;margin:0 0 16px;box-shadow:0 6px 18px rgba(144,0,0,.22);
}
.lux-done-callout-ico{
font-size:26px;line-height:1;flex:0 0 auto;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.lux-done-callout-body{display:flex;flex-direction:column;gap:4px;font-family:'Play',sans-serif}
.lux-done-callout-body strong{color:var(--lux-gold);font-size:14.5px;font-weight:700;letter-spacing:.1px}
.lux-done-callout-body span{color:rgba(255,255,255,.92);font-size:12.5px;line-height:1.5}
.lux-done-callout-body span strong{color:#fff}
.lux-done-tip{font-size:12.5px;color:#888;margin:12px 0 0;line-height:1.5}
.lux-done-fine{font-size:11.5px;color:#aaa;margin:10px 0 0;line-height:1.5}
/* ================= store policies page ================= */
.lux-policy{max-width:820px;margin:0 auto;padding:44px 22px 64px;font-family:'Play',sans-serif;color:#3a3a3a}
.lux-policy h1{font-size:34px;font-weight:700;color:#2b0d0d;margin:0 0 10px;font-family:'Play',sans-serif}
.lux-policy-intro{font-size:15.5px;line-height:1.65;color:#777;margin:0 0 30px}
.lux-policy h2{
font-size:20px;font-weight:700;color:var(--lux-red);margin:34px 0 12px;padding-bottom:8px;
border-bottom:2px solid rgba(212,175,55,.45);font-family:'Play',sans-serif;
}
.lux-policy p{font-size:14.5px;line-height:1.7;margin:0 0 12px}
.lux-policy ul{margin:0 0 14px;padding-left:20px}
.lux-policy li{font-size:14.5px;line-height:1.7;margin-bottom:9px}
.lux-policy strong{color:#2b0d0d}
.lux-policy-note{
margin-top:36px;background:#fff8e8;border:1px dashed var(--lux-gold);border-radius:12px;
padding:14px 16px;font-size:13.5px;line-height:1.6;color:#6b4e00;
}
.lux-policy-note a{color:var(--lux-red);font-weight:700}
.lux-unverified{font-size:12.5px;color:#a08050;font-style:italic}
.lux-missing{
display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
color:#a04a00;background:#fff0dc;border:1px solid #f0c088;border-radius:5px;padding:1px 7px;
}
/* ================= 18+ age gate ================= */
.lux-age{
position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(26,5,9,.97),rgba(58,10,20,.97));
backdrop-filter:blur(6px);padding:20px;font-family:'Play',sans-serif;
}
.lux-age__box{
max-width:440px;width:100%;background:#fff;border-radius:18px;padding:32px 28px;text-align:center;
border:2px solid var(--lux-gold);box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lux-age__ico{font-size:44px;line-height:1;margin-bottom:12px}
.lux-age__box h2{
margin:0 0 10px;font-size:23px;font-weight:700;color:#2b0d0d;font-family:'Play',sans-serif;
}
.lux-age__box p{margin:0 0 8px;font-size:14px;line-height:1.6;color:#666}
.lux-age__fine{font-size:12px;color:#999;margin-top:14px}
.lux-age__btns{display:flex;gap:10px;margin-top:22px}
.lux-age__btns .lux-btn{margin:0}
.lux-age__no{
flex:0 0 38%;background:none!important;color:#888!important;border:1px solid #ddd!important;
}
.lux-age__no:hover{background:#f5f5f5!important;color:#666!important;filter:none}
html.lux-age-lock,html.lux-age-lock body{overflow:hidden!important}
@media (max-width:420px){
.lux-age__box{padding:26px 20px}
.lux-age__btns{flex-direction:column-reverse}
.lux-age__no{flex:1 1 auto}
}
/* ------------------------------------------------ language switch (header) */
/* sits in the nav next to the cart icon — same round-button language as
li.lux-cart-item .lux-cart-toggle, so it reads as one native header, not
a bolted-on widget */
li.lux-lang-item{
position:relative;display:flex!important;align-items:flex-start;
overflow:visible!important;margin-left:10px;
}
.lux-lang-toggle{
align-items:center;justify-content:center;gap:6px;cursor:pointer;position:relative;
height:34px;flex:0 0 auto;margin-top:-1px;padding:0 12px 0 10px;
border:1px solid rgba(212,175,55,.7);border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
color:#f3d98a;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
font-family:'Play',sans-serif;line-height:1;overflow:visible;box-shadow:0 2px 6px rgba(0,0,0,.25);
transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
}
li.lux-lang-item .lux-lang-toggle{display:flex!important}
.lux-lang-toggle:hover{
background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.1));
border-color:var(--lux-gold);box-shadow:0 4px 14px rgba(212,175,55,.35);transform:translateY(-1px);
}
.lux-lang-toggle .lux-lang-flag{font-size:16px;line-height:1}
.lux-lang-toggle .lux-lang-caret{font-size:8px;opacity:.75;transition:transform .2s ease}
.lux-lang-toggle[aria-expanded="true"] .lux-lang-caret{transform:rotate(180deg)}
/* mobile trigger next to the burger — mirrors .lux-cart-toggle.lux-cart-mobile;
hidden by default so it doesn't also show up next to the desktop nav item */
.lux-lang-toggle.lux-lang-mobile{
display:none!important;width:40px;height:40px;flex:0 0 40px;margin:0 8px 0 0;
padding:0;border-radius:50%;
}
.lux-lang-toggle.lux-lang-mobile .lux-lang-code,
.lux-lang-toggle.lux-lang-mobile .lux-lang-caret{display:none}
@media (max-width:1024px){
.lux-lang-toggle.lux-lang-mobile{display:flex!important;position:absolute;top:2px;right:96px;z-index:9}
li.lux-lang-item{display:none!important}
}
.lux-lang-menu{
list-style:none;margin:0;padding:8px;position:fixed;
background:linear-gradient(180deg, #241414, #170b0b);
border:1px solid var(--lux-gold);border-radius:16px;
box-shadow:0 16px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(212,175,55,.12);
min-width:212px;max-height:60vh;overflow-y:auto;
font-family:'Play',sans-serif;z-index:99999;
animation:lux-lang-pop .18s ease-out;
}
@keyframes lux-lang-pop{
from{opacity:0;transform:translateY(-6px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.lux-lang-menu__label{
padding:6px 10px 8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(243,217,138,.65);border-bottom:1px solid rgba(212,175,55,.2);margin-bottom:4px;
}
.lux-lang-opt{
display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
background:none;border:0;border-radius:10px;color:#f2e6d8;font-size:13px;text-align:left;cursor:pointer;
transition:background .15s ease;
}
.lux-lang-opt:hover{background:rgba(212,175,55,.16)}
.lux-lang-opt .lux-lang-flag{font-size:17px;line-height:1}
.lux-lang-opt .lux-lang-name{flex:1 1 auto}
.lux-lang-opt .lux-lang-check{width:14px;flex:0 0 14px;text-align:center;font-size:12px;color:var(--lux-gold);opacity:0}
.lux-lang-opt--active{background:rgba(212,175,55,.14)}
.lux-lang-opt--active .lux-lang-name{color:var(--lux-gold);font-weight:700}
.lux-lang-opt--active .lux-lang-check{opacity:1}
/* ============================================================
Premium catalogue-card skin — frame, badge, price, title.
Pure styling on the existing WooCommerce/Astra markup, nothing
in the card's own content (image, name, price figures) changes.
============================================================ */
/* the theme lays cards out as floated columns of uneven height (each photo
has its own aspect ratio) — a grid + flex column is what actually lines
every card's price up on the same baseline, border or no border */
ul.products{
display:grid!important;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:26px 22px;
}
ul.products li.product{
display:flex!important;flex-direction:column;
float:none!important;width:auto!important;margin:0!important;
background:#fff;
border:1px solid rgba(212,175,55,.32);
border-radius:18px;
padding:14px 16px 20px;
box-shadow:0 6px 20px rgba(43,13,13,.07);
transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
ul.products li.product:hover{
transform:translateY(-5px);
border-color:var(--lux-gold);
box-shadow:0 18px 38px rgba(43,13,13,.16);
}
/* pull the thumbnail flush to the card's own rounded edge, so the image
reads as part of one frame instead of floating inside it — and crop
every photo to the same square so uneven source aspect ratios stop
throwing rows out of alignment */
ul.products li.product .astra-shop-thumbnail-wrap{
position:relative;overflow:hidden;aspect-ratio:1/1;
margin:-14px -16px 14px;border-radius:14px 14px 0 0;
}
ul.products li.product .astra-shop-thumbnail-wrap img{
width:100%!important;height:100%!important;object-fit:cover;
}
/* summary block grows to fill the leftover card height, and pins price to
the bottom, so it sits on the same line across a row regardless of how
long any one title runs */
ul.products li.product .astra-shop-summary-wrap{
display:flex;flex-direction:column;flex:1;
}
ul.products li.product .price{margin-top:auto;padding-top:8px}
ul.products li.product .astra-shop-thumbnail-wrap img{
transition:transform .5s ease;
}
ul.products li.product:hover .astra-shop-thumbnail-wrap img{transform:scale(1.06)}
/* thin gold seam between image and the card's white body, echoing the
header/footer hairlines used everywhere else on the site */
ul.products li.product .astra-shop-thumbnail-wrap::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(212,175,55,.55),transparent);
}
/* sale ribbon — was a plain white pill, now a small brand-coloured tag */
ul.products li.product .ast-onsale-card{
background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%)!important;
color:#fff!important;border:1px solid rgba(212,175,55,.85)!important;
border-radius:999px!important;padding:5px 13px!important;
font-family:'Play',sans-serif!important;font-size:10.5px!important;font-weight:700!important;
letter-spacing:.07em;text-transform:uppercase;
box-shadow:0 3px 10px rgba(0,0,0,.28);
}
/* title + category */
ul.products li.product .woocommerce-loop-product__title{
font-family:'Play',sans-serif;font-weight:700;font-size:15px;line-height:1.35;
color:#2b0d0d;letter-spacing:.01em;
}
ul.products li.product .ast-woo-product-category{
display:block;color:var(--lux-gold);font-size:10px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;margin:4px 0 8px;
}
/* price — muted strike-through, bold brand-red current price */
ul.products li.product .price{font-family:'Play',sans-serif}
ul.products li.product .price del{opacity:1}
ul.products li.product .price del .amount{color:#b3aaa3;font-weight:400;font-size:13px}
ul.products li.product .price ins{text-decoration:none}
ul.products li.product .price ins .amount{
color:var(--lux-red2);font-weight:800;font-size:18px;
}
/* ---- homepage: make promo photos clickable through to the catalog ---- */
/* plain ![]()
banners (hero + wide strips) — wrapped directly in an */
a.lux-clickable-img{display:block;cursor:pointer;transition:filter .15s ease,opacity .15s ease}
a.lux-clickable-img:hover{filter:brightness(1.05)}
a.lux-clickable-img:active{filter:brightness(.95)}
/* "Shop By Categories" cards use an Elementor CSS background-image on the
container, not a real ![]()
, so the whole card is made clickable with a
full-cover transparent overlay rather than restructuring Elementor's
own container markup. */
.lux-clickable-card{position:relative}
.lux-card-overlay-link{
position:absolute;inset:0;z-index:5;cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
/* ---- homepage: "Her" / "Him" bundle promos --------------------------- */
.lux-bundle-section{
display:flex;gap:20px;flex-wrap:wrap;justify-content:center;
max-width:1240px;margin:0 auto;padding:26px 28px 22px;
}
.lux-bundle-banner{
flex:1 1 460px;max-width:600px;
background:linear-gradient(135deg,var(--lux-red) 0%,var(--lux-red2) 100%);
border-radius:20px;border:2px solid var(--lux-gold);
box-shadow:0 14px 34px rgba(0,0,0,.28);
padding:22px 22px 20px;color:#fff;
}
.lux-bundle-banner__eyebrow{
display:inline-block;font-family:'Play',sans-serif;font-size:10.5px;font-weight:700;
letter-spacing:1.2px;text-transform:uppercase;color:#3a2600;background:var(--lux-gold);
padding:3px 10px;border-radius:999px;margin-bottom:9px;
}
.lux-bundle-banner h3{
margin:0 0 6px;font-family:'Play',sans-serif;font-size:21px;font-weight:700;color:#fff;
line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.lux-bundle-banner .lux-bundle-desc{margin:0 0 14px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.92)}
.lux-bundle-banner .lux-bundle-desc strong{color:var(--lux-gold)}
.lux-bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.lux-bundle-opt{cursor:pointer;display:block;position:relative}
.lux-bundle-opt input{position:absolute;opacity:0;width:1px;height:1px}
.lux-bundle-opt__card{
display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
background:rgba(255,255,255,.97);border-radius:14px;padding:10px 8px;
border:2px solid transparent;transition:border-color .15s ease,transform .15s ease;
}
.lux-bundle-opt input:checked + .lux-bundle-opt__card{
border-color:var(--lux-gold);transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.lux-bundle-opt input:focus-visible + .lux-bundle-opt__card{outline:2px solid var(--lux-gold);outline-offset:2px}
.lux-bundle-opt__card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#f2f2f2}
.lux-bundle-opt__name{font-family:'Play',sans-serif;font-size:11.5px;font-weight:700;color:#2b0d0d;line-height:1.3;text-transform:capitalize}
.lux-bundle-opt__price{font-family:'Play',sans-serif;font-size:13px;font-weight:700;color:#1d7a3e}
.lux-bundle-gift{
display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);
border:1px dashed var(--lux-gold);border-radius:12px;padding:10px 12px;margin-bottom:14px;font-size:12.5px;line-height:1.5;
}
.lux-bundle-gift b{color:var(--lux-gold)}
.lux-bundle-add{
display:block;width:100%;padding:13px 18px;border:0;border-radius:999px;cursor:pointer;
font-family:'Play',sans-serif;font-size:14.5px;font-weight:700;letter-spacing:.3px;text-align:center;
background:var(--lux-gold);color:#3a2600;transition:filter .2s ease,transform .1s ease;
}
.lux-bundle-add:hover{filter:brightness(1.05)}
.lux-bundle-add:active{transform:scale(.98)}
@media (max-width:900px){
.lux-bundle-banner h3{font-size:19px}
}
@media (max-width:640px){
.lux-bundle-section{padding:20px 16px;gap:16px}
.lux-bundle-banner{padding:18px 16px 16px}
.lux-bundle-grid{gap:7px}
.lux-bundle-opt__name{font-size:10.5px}
}
/* cart drawer line names come straight from the WooCommerce H1, which on
this catalogue is stored lowercase — capitalize for display only */
.lux-line-name, .lux-sum-n{text-transform:capitalize}
.lux-clickable-card:hover{filter:brightness(1.04)}
/* ---- promo v2: 50% welcome deal + mystery gift (industry-leader mechanics) */
.lux-opt-was{color:#a88;font-weight:400;font-size:11px;margin-right:2px}
.lux-off-chip{display:inline-block;font-style:normal;background:var(--lux-red,#c00);color:#fff;
font-size:10px;font-weight:700;line-height:1;padding:3px 5px;border-radius:4px;vertical-align:1px}
.lux-half-tag{display:inline-block;background:#1d7a3e;color:#fff;font-size:10px;font-weight:700;
line-height:1;padding:3px 6px;border-radius:4px}
.lux-half-badge{display:inline-block;background:#1d7a3e;color:#fff;font-size:10px;font-weight:700;
line-height:1;padding:2px 6px;border-radius:8px;vertical-align:2px;text-transform:none}
.lux-mystery-badge{background:linear-gradient(90deg,#7b2ff7,#d4145a)!important}
.lux-row.lux-save span,.lux-row.lux-save .v{color:#1d7a3e;font-weight:700}
.lux-sum-save .lux-sum-n,.lux-sum-save .lux-sum-p{color:#1d7a3e;font-weight:700}
.lux-mystery-progress{background:linear-gradient(135deg,#faf5ff,#fdf2f8);border:1px dashed #c084fc;
border-radius:10px;padding:10px 12px;font-size:12.5px;color:#4a044e;margin-bottom:12px}
.lux-mystery-bar{height:7px;background:#eadcf5;border-radius:99px;margin-top:8px;overflow:hidden}
.lux-mystery-bar span{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,#7b2ff7,#d4145a);transition:width .4s ease}
/* ============================================================================
LUX DESIRE — PREMIUM SHOP SKIN (catalogue + single product)
----------------------------------------------------------------------------
The header, footer, bestseller rail and cart drawer were already on-brand
(deep burgundy + gold), but everything between them — the shop archive, the
category pages and the product page — was still stock Astra/WooCommerce:
a #f5f7f9 page, a big white content slab and white product cards. That read
as a different, cheaper website the moment a visitor left the homepage.
This block re-skins those three page types only (body.post-type-archive-product,
body.tax-product_cat, body.single-product — 243 pages) into the same
burgundy/gold material, and replaces the flat buttons with proper premium
ones (gold gradient, hairline highlight, shine sweep on hover).
Nothing here changes markup or content — it is purely a skin on top of the
existing WooCommerce classes.
============================================================================ */
:root{
--lux-ink:#12060a; /* page background, deepest */
--lux-ink2:#1d0910; /* raised surfaces */
--lux-card-a:#2a1018; /* card gradient, top */
--lux-card-b:#190910; /* card gradient, bottom */
--lux-hair:rgba(212,175,55,.26); /* gold hairline, resting */
--lux-hair-hi:rgba(212,175,55,.8); /* gold hairline, hover */
--lux-cream:#f4e8d6; /* primary text on dark */
--lux-cream-dim:rgba(244,232,214,.62);
--lux-gold-lt:#f7e3a1;
--lux-gold-dk:#b8912b;
}
/* ---------------------------------------------------------------- page shell */
:is(body.post-type-archive-product,body.tax-product_cat,body.single-product){
background:var(--lux-ink)!important;
}
:is(body.post-type-archive-product,body.tax-product_cat,body.single-product) #content.site-content{
background:
radial-gradient(1100px 520px at 12% -8%,rgba(144,0,0,.42) 0%,transparent 62%),
radial-gradient(900px 480px at 92% 4%,rgba(190,0,47,.20) 0%,transparent 60%),
linear-gradient(180deg,#1d0910 0%,#12060a 46%,#0e0508 100%)!important;
}
/* Astra's white content slab (85px of padding on the archive) — drop the paint,
keep a saner rhythm so the grid gets more of the viewport */
:is(body.post-type-archive-product,body.tax-product_cat,body.single-product)
:is(.ast-woocommerce-container,#primary,#main,.site-main,.ast-separate-container .site-main){
background:transparent!important;box-shadow:none!important;
}
:is(body.post-type-archive-product,body.tax-product_cat) .ast-woocommerce-container{
padding:46px 34px 60px!important;
}
/* base type colour inside the shop area */
:is(body.post-type-archive-product,body.tax-product_cat,body.single-product) #content
:is(p,li,span,h1,h2,h3,h4,h5,dt,dd,label,td,th){color:var(--lux-cream)}
:is(body.post-type-archive-product,body.tax-product_cat,body.single-product) #content a{color:var(--lux-gold)}
:is(body.post-type-archive-product,body.tax-product_cat,body.single-product) #content a:hover{color:var(--lux-gold-lt)}
/* --------------------------------------------------- archive top bar / breadcrumb */
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb{
font-family:'Play',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
color:var(--lux-cream-dim)!important;margin-bottom:18px;
}
:is(body.post-type-archive-product,body.tax-product_cat,body.single-product) .woocommerce-breadcrumb a{
color:var(--lux-gold)!important;text-decoration:none;
}
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-products-header__title,
:is(body.post-type-archive-product,body.tax-product_cat) .page-title{
color:var(--lux-cream)!important;letter-spacing:.02em;
}
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-result-count{
color:var(--lux-cream-dim)!important;font-family:'Play',sans-serif;font-size:13px;
margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--lux-hair);
}
/* sorting dropdown → dark pill with a gold chevron */
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-ordering select{
-webkit-appearance:none;appearance:none;
background:linear-gradient(160deg,#2a1018,#1a0910)!important;
color:var(--lux-cream)!important;border:1px solid var(--lux-hair)!important;
border-radius:999px!important;padding:10px 40px 10px 18px!important;
font-family:'Play',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
background-repeat:no-repeat!important;background-position:right 15px center!important;background-size:13px!important;
transition:border-color .2s ease,box-shadow .2s ease;
}
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-ordering select:hover,
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-ordering select:focus{
border-color:var(--lux-hair-hi)!important;box-shadow:0 0 0 3px rgba(212,175,55,.14)!important;outline:0;
}
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-ordering select option{
background:#1a0910;color:var(--lux-cream);
}
/* =============================================================== PRODUCT CARD */
ul.products li.product{
background:linear-gradient(165deg,var(--lux-card-a) 0%,var(--lux-card-b) 100%)!important;
border:1px solid var(--lux-hair)!important;
border-radius:18px!important;
box-shadow:0 10px 30px rgba(0,0,0,.42)!important;
overflow:hidden;position:relative;
}
/* faint gold sheen along the card's top edge — the same hairline used on the
header/footer, so the cards visually belong to the same set */
ul.products li.product::before{
content:'';position:absolute;top:0;left:14%;right:14%;height:1px;z-index:3;
background:linear-gradient(90deg,transparent,rgba(212,175,55,.65),transparent);
opacity:.7;transition:opacity .3s ease;
}
ul.products li.product:hover{
border-color:var(--lux-hair-hi)!important;
box-shadow:0 22px 46px rgba(0,0,0,.6),0 0 0 1px rgba(212,175,55,.18)!important;
transform:translateY(-6px);
}
ul.products li.product:hover::before{opacity:1}
/* photo sits on a light plinth: most catalogue shots have a white/grey studio
background, so a dark backing would show as a hard rectangle instead */
ul.products li.product .astra-shop-thumbnail-wrap{
background:linear-gradient(180deg,#fffdf8,#f2ece1)!important;
}
ul.products li.product .astra-shop-thumbnail-wrap::after{
background:linear-gradient(90deg,transparent,rgba(212,175,55,.85),transparent)!important;
height:1px;
}
ul.products li.product .astra-shop-summary-wrap{padding-top:2px}
ul.products li.product .woocommerce-loop-product__title{
color:var(--lux-cream)!important;font-size:15px;line-height:1.35;
transition:color .2s ease;
}
ul.products li.product:hover .woocommerce-loop-product__title{color:var(--lux-gold-lt)!important}
ul.products li.product .ast-loop-product__link{text-decoration:none}
ul.products li.product .ast-woo-product-category{
color:var(--lux-gold)!important;opacity:.9;
}
/* price — dimmed strike-through, gold current price (was brand red on white,
which is unreadable against the dark card) */
ul.products li.product .price del .amount{color:rgba(244,232,214,.38)!important;font-size:13px}
ul.products li.product .price ins .amount{
color:var(--lux-gold-lt)!important;font-size:19px;font-weight:800;
text-shadow:0 1px 10px rgba(212,175,55,.28);
}
ul.products li.product .price .amount{color:var(--lux-gold-lt)!important}
/* sale flag — gold foil tag instead of the red pill */
ul.products li.product .ast-onsale-card{
background:linear-gradient(135deg,var(--lux-gold-lt) 0%,var(--lux-gold) 52%,var(--lux-gold-dk) 100%)!important;
color:#2b1500!important;border:0!important;
box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.55)!important;
font-size:10px!important;letter-spacing:.11em!important;padding:5px 12px!important;
/* 12px clipped 1-5px off the card at several desktop widths (1024-1920px) —
the thumbnail's own negative margin (cancelling the card's padding, see
.astra-shop-thumbnail-wrap above) makes its clipped box slightly larger
than intuition suggests; 16px clears it with margin to spare */
top:16px!important;left:16px!important;
}
/* ---- the card CTA: a small gold circle in the corner ----------------------
A first pass turned this into a full-width bar docked to the bottom of the
photo — on a card barely 200-300px tall that bar ended up covering a third
to half of the image itself, on both desktop and phones. Back to a compact
circular badge (same spot Astra used originally, just gold instead of red),
so the photo stays the star and the cart action is a discreet accent. */
ul.products li.product .astra-shop-thumbnail-wrap a.ast-on-card-button.add_to_cart_button{
top:16px!important;right:16px!important;bottom:auto!important;left:auto!important;
width:42px!important;height:42px!important;border-radius:50%!important;
background:linear-gradient(135deg,var(--lux-gold-lt) 0%,var(--lux-gold) 50%,var(--lux-gold-dk) 100%)!important;
border:1.5px solid rgba(255,255,255,.55)!important;
display:flex!important;align-items:center;justify-content:center;
transform:none!important;opacity:1!important;visibility:visible!important;
box-shadow:0 4px 14px rgba(0,0,0,.4)!important;
transition:transform .18s ease,filter .18s ease;
}
ul.products li.product .astra-shop-thumbnail-wrap a.ast-on-card-button.add_to_cart_button:hover{
filter:brightness(1.1);transform:scale(1.08)!important;
}
/* label stays as a hover tooltip beside the circle, not printed on the card */
ul.products li.product a.ast-on-card-button.add_to_cart_button .ast-card-action-tooltip{
position:absolute!important;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
background:#1e1e1e;color:#fff!important;font-family:'Play',sans-serif;font-size:11px;font-weight:600;
padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;
opacity:0!important;visibility:hidden!important;transition:opacity .18s ease,visibility .18s ease;
letter-spacing:normal;text-transform:none;width:auto!important;
}
ul.products li.product a.ast-on-card-button.add_to_cart_button:hover .ast-card-action-tooltip{
opacity:1!important;visibility:visible!important;
}
ul.products li.product a.ast-on-card-button.add_to_cart_button svg{
width:18px!important;height:18px!important;
fill:none!important;stroke:#2b1500!important;
}
ul.products li.product a.ast-on-card-button.add_to_cart_button
:is(.ahfb-svg-iconset,.ast-icon){color:#2b1500!important;width:18px;height:18px}
/* confirmation state after the item lands in the drawer */
ul.products li.product a.ast-on-card-button.add_to_cart_button.lux-added{
background:linear-gradient(135deg,#4fae76,#2f7d4f)!important;
}
ul.products li.product a.ast-on-card-button.add_to_cart_button.lux-added svg{
stroke:#fff!important;
}
/* touch devices have no hover — tooltip would stay permanently invisible,
which is fine, the icon alone is self-explanatory at this size */
@media (hover:none){
ul.products li.product .astra-shop-thumbnail-wrap a.ast-on-card-button.add_to_cart_button{
width:40px!important;height:40px!important;top:10px!important;right:10px!important;
}
}
/* ------------------------------------------------------------------ pagination */
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-pagination ul.page-numbers{
border:0!important;display:flex;gap:8px;justify-content:center;margin-top:38px;
}
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-pagination ul.page-numbers li{
border:0!important;overflow:visible;
}
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-pagination .page-numbers{
min-width:40px;height:40px;line-height:38px;padding:0 12px;
display:inline-block;text-align:center;border-radius:11px;
background:linear-gradient(160deg,#2a1018,#1a0910);
border:1px solid var(--lux-hair)!important;color:var(--lux-cream)!important;
font-family:'Play',sans-serif;font-weight:700;font-size:13.5px;text-decoration:none;
transition:border-color .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease;
}
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-pagination a.page-numbers:hover{
border-color:var(--lux-hair-hi)!important;color:var(--lux-gold-lt)!important;
transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.4);
}
:is(body.post-type-archive-product,body.tax-product_cat) .woocommerce-pagination .page-numbers.current{
background:linear-gradient(135deg,var(--lux-gold-lt) 0%,var(--lux-gold) 52%,var(--lux-gold-dk) 100%)!important;
color:#2b1500!important;border-color:transparent!important;
box-shadow:0 6px 18px rgba(212,175,55,.3),inset 0 1px 0 rgba(255,255,255,.5);
}
/* ==================================================================== SIDEBAR */
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .ast-woo-sidebar-widget,
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .widget{
background:linear-gradient(165deg,rgba(42,16,24,.92),rgba(20,9,14,.92))!important;
border:1px solid var(--lux-hair);border-radius:16px;
padding:20px 20px 22px!important;margin-bottom:22px!important;
box-shadow:0 8px 24px rgba(0,0,0,.35);
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .widget-title,
:is(body.post-type-archive-product,body.tax-product_cat) #secondary h2{
font-family:'Play',sans-serif!important;font-size:13px!important;font-weight:700!important;
letter-spacing:.14em;text-transform:uppercase;color:var(--lux-gold)!important;
margin:0 0 16px!important;padding-bottom:12px;border-bottom:1px solid var(--lux-hair);
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary a{
color:var(--lux-cream)!important;text-decoration:none;transition:color .18s ease;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary a:hover{color:var(--lux-gold-lt)!important}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary li{
border-color:rgba(212,175,55,.14)!important;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary
:is(.wc-block-product-categories-list-item-count,.count){
color:var(--lux-cream-dim)!important;font-size:12px;
}
/* price filter: dark rail, gold range + handles, gold "Filter" pill */
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .price_slider,
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .ui-slider{
background:rgba(244,232,214,.14)!important;height:5px!important;border-radius:99px!important;
border:0!important;margin-bottom:18px;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .ui-slider-range{
background:linear-gradient(90deg,var(--lux-gold-dk),var(--lux-gold-lt))!important;border-radius:99px!important;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .ui-slider-handle{
background:linear-gradient(135deg,var(--lux-gold-lt),var(--lux-gold-dk))!important;
border:2px solid #2b1500!important;width:16px!important;height:16px!important;border-radius:50%!important;
box-shadow:0 2px 8px rgba(0,0,0,.55)!important;top:-6px!important;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .price_label,
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .price_slider_amount{
color:var(--lux-cream-dim)!important;font-family:'Play',sans-serif;font-size:12.5px;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .price_label .from,
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .price_label .to{
color:var(--lux-gold-lt)!important;font-weight:700;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary
:is(input[type=text],input[type=search],input[type=number],.search-field){
background:rgba(255,255,255,.05)!important;border:1px solid var(--lux-hair)!important;
border-radius:10px!important;color:var(--lux-cream)!important;padding:9px 12px!important;
font-family:'Play',sans-serif;font-size:13px;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary
:is(input[type=text],input[type=search])::placeholder{color:rgba(244,232,214,.35)!important}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary
:is(input[type=text],input[type=search]):focus{
border-color:var(--lux-hair-hi)!important;box-shadow:0 0 0 3px rgba(212,175,55,.14)!important;outline:0;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary
:is(button.button,button[type=submit],input[type=submit],.wp-block-search__button){
background:linear-gradient(135deg,var(--lux-gold-lt) 0%,var(--lux-gold) 52%,var(--lux-gold-dk) 100%)!important;
color:#2b1500!important;border:0!important;border-radius:999px!important;
font-family:'Play',sans-serif!important;font-weight:800!important;font-size:11.5px!important;
letter-spacing:.14em;text-transform:uppercase;padding:10px 22px!important;cursor:pointer;
/* min-height 40px — the 10px/11.5px padding+font combo rendered ~31px tall,
under the accessible touch-target minimum for a button tapped on a phone */
min-height:40px;display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 5px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5)!important;
transition:filter .2s ease,transform .12s ease;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary
:is(button.button,button[type=submit],input[type=submit]):hover{filter:brightness(1.08)}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary
:is(button.button,button[type=submit],input[type=submit]):active{transform:translateY(1px)}
/* the block-search submit is icon-only; its arrow inherits no fill of its own */
:is(body.post-type-archive-product,body.tax-product_cat) #secondary
:is(.wc-block-product-search__button,button[type=submit]) svg{
fill:#2b1500!important;stroke:none!important;
/* as a flex child the dashicon collapsed to 0 width — pin the track */
flex:0 0 18px!important;width:18px!important;height:18px!important;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .wc-block-product-search__button{
width:44px;height:44px;padding:0!important;display:flex;align-items:center;justify-content:center;flex:0 0 44px;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .wc-block-product-search__fields,
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .wp-block-search__inside-wrapper{
display:flex;align-items:center;gap:10px;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .wc-block-product-search__field{flex:1 1 auto;min-width:0}
/* "Our Bestsellers" widget rows — Woo floats the thumbnail and relies on the
list item's left padding to clear it; the widget's own padding reset wiped
that, so the names ran back under the images. Lay the row out with flex. */
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget{
margin:0!important;padding:0!important;list-style:none;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget li{
display:flex!important;flex-wrap:wrap;align-items:center;
padding:11px 0!important;margin:0!important;
border-bottom:1px solid rgba(212,175,55,.14);
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget li:last-child{border-bottom:0}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget li > a{
display:flex!important;align-items:center;gap:12px;
flex:1 1 100%;min-width:0;font-size:13px;line-height:1.35;
}
/* Woo pins this thumbnail with position:absolute and pads the row around it —
that padding is gone with the flex row, so the image has to come back into
normal flow or it lands on top of the product name */
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget img{
position:static!important;float:none!important;margin:0!important;
width:48px!important;height:48px!important;
flex:0 0 48px;object-fit:cover;
border-radius:9px;border:1px solid var(--lux-hair);
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget .product-title{
flex:1 1 auto;min-width:0;
}
/* the price pair sits on its own line, indented to line up under the title */
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget li > :is(del,ins,.amount){
margin-left:60px;margin-top:4px;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget li > ins{
margin-left:6px;text-decoration:none;background:none;
}
/* cart.js's annotateStaticPrices() appends the FX estimate as a plain sibling right after — when it wraps off the end of
the row it needs the same 60px indent as the price pair above it, or it
lands flush against the widget's left edge instead of under the price */
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget li > .lux-fx{
margin-left:60px;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget .amount{
color:var(--lux-gold-lt)!important;font-weight:700;
}
:is(body.post-type-archive-product,body.tax-product_cat) #secondary .product_list_widget del .amount{
color:rgba(244,232,214,.35)!important;font-weight:400;
}
/* ============================================================ SINGLE PRODUCT */
/* gallery — framed like a display case rather than a bare image */
body.single-product .woocommerce-product-gallery{
background:linear-gradient(180deg,#fffdf8,#f1eae0);
border:1px solid var(--lux-hair);border-radius:18px;padding:14px;
box-shadow:0 16px 40px rgba(0,0,0,.45);
}
body.single-product .woocommerce-product-gallery__wrapper img{border-radius:12px}
body.single-product .flex-control-thumbs{margin-top:12px!important;gap:10px;display:flex}
body.single-product .flex-control-thumbs li{margin:0!important;width:auto!important}
body.single-product .flex-control-thumbs img{
border-radius:9px;border:1px solid rgba(0,0,0,.08);
transition:border-color .2s ease,transform .2s ease;
}
body.single-product .flex-control-thumbs img:hover,
body.single-product .flex-control-thumbs img.flex-active{
border-color:var(--lux-gold)!important;transform:translateY(-2px);
}
body.single-product .woocommerce-product-gallery__trigger{
background:linear-gradient(135deg,var(--lux-gold-lt),var(--lux-gold-dk))!important;
border-radius:50%!important;box-shadow:0 4px 12px rgba(0,0,0,.35)!important;
}
body.single-product span.onsale,
body.single-product .ast-onsale-card{
background:linear-gradient(135deg,var(--lux-gold-lt) 0%,var(--lux-gold) 52%,var(--lux-gold-dk) 100%)!important;
color:#2b1500!important;border:0!important;border-radius:999px!important;
font-family:'Play',sans-serif!important;font-weight:800!important;font-size:10.5px!important;
letter-spacing:.12em;text-transform:uppercase;padding:6px 14px!important;
box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55)!important;
}
/* summary column */
body.single-product .single-product-category a{
display:inline-block;color:var(--lux-gold)!important;font-family:'Play',sans-serif;
font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
border:1px solid var(--lux-hair);border-radius:999px;padding:5px 14px;margin-bottom:14px;
text-decoration:none;transition:border-color .2s ease,background .2s ease;
}
body.single-product .single-product-category a:hover{
border-color:var(--lux-hair-hi);background:rgba(212,175,55,.1);
}
body.single-product .product_title{
color:var(--lux-cream)!important;font-size:34px;line-height:1.2;letter-spacing:.005em;
margin:0 0 6px;
}
body.single-product .summary > p.price{
display:flex;align-items:baseline;gap:12px;margin:14px 0 22px;
padding-bottom:20px;border-bottom:1px solid var(--lux-hair);
}
body.single-product .summary > p.price del{opacity:1}
body.single-product .summary > p.price del .amount{
color:rgba(244,232,214,.38)!important;font-size:18px;font-weight:400;
}
body.single-product .summary > p.price ins{text-decoration:none;background:none}
body.single-product .summary > p.price ins .amount,
body.single-product .summary > p.price > .amount{
color:var(--lux-gold-lt)!important;font-family:'Play',sans-serif;
font-size:34px;font-weight:800;text-shadow:0 2px 16px rgba(212,175,55,.3);
}
/* quantity + the main buy button */
body.single-product .woocommerce div.product form.cart,
body.single-product div.product form.cart{align-items:center!important;gap:14px!important}
body.single-product div.product form.cart .quantity .qty{
height:56px!important;width:88px!important;
background:linear-gradient(160deg,#2a1018,#1a0910)!important;
border:1px solid var(--lux-hair)!important;border-radius:12px!important;
color:var(--lux-cream)!important;font-size:17px!important;font-weight:700!important;
}
body.single-product div.product form.cart .quantity .qty:focus{
border-color:var(--lux-hair-hi)!important;box-shadow:0 0 0 3px rgba(212,175,55,.16)!important;
}
body.single-product div.product form.cart .button.single_add_to_cart_button{
position:relative;overflow:hidden;
height:56px!important;min-width:260px!important;padding:0 42px!important;
background:linear-gradient(135deg,var(--lux-gold-lt) 0%,var(--lux-gold) 48%,var(--lux-gold-dk) 100%)!important;
color:#2b1500!important;border:0!important;border-radius:999px!important;
font-family:'Play',sans-serif!important;font-size:14px!important;font-weight:800!important;
letter-spacing:.16em!important;text-transform:uppercase;
box-shadow:0 10px 26px rgba(212,175,55,.26),0 2px 6px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.55)!important;
transition:filter .2s ease,transform .12s ease,box-shadow .25s ease;
}
/* slow diagonal shine sweeping across the button — the one motion cue that
makes a flat gold rectangle read as polished metal */
body.single-product div.product form.cart .button.single_add_to_cart_button::after{
content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
transform:skewX(-18deg);animation:luxShine 4.6s ease-in-out infinite;
}
@keyframes luxShine{
0%,62%{left:-60%}
92%,100%{left:130%}
}
body.single-product div.product form.cart .button.single_add_to_cart_button:hover{
filter:brightness(1.06);color:#2b1500!important;
box-shadow:0 14px 34px rgba(212,175,55,.36),0 2px 6px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.6)!important;
}
body.single-product div.product form.cart .button.single_add_to_cart_button:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
body.single-product div.product form.cart .button.single_add_to_cart_button::after{animation:none;display:none}
}
/* description + meta */
body.single-product .lux-short-description p,
body.single-product .woocommerce-product-details__short-description p{
color:rgba(244,232,214,.86)!important;line-height:1.75;
}
body.single-product .lux-short-description li,
body.single-product .woocommerce-Tabs-panel li{
color:rgba(244,232,214,.86)!important;line-height:1.7;
}
body.single-product .lux-short-description ul,
body.single-product .woocommerce-Tabs-panel ul{list-style:none;padding-left:4px}
body.single-product .lux-short-description ul li,
body.single-product .woocommerce-Tabs-panel ul li{position:relative;padding-left:22px;margin-bottom:9px}
body.single-product .lux-short-description ul li::before,
body.single-product .woocommerce-Tabs-panel ul li::before{
content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;transform:rotate(45deg);
background:linear-gradient(135deg,var(--lux-gold-lt),var(--lux-gold-dk));
box-shadow:0 0 8px rgba(212,175,55,.5);
}
body.single-product .product_meta{
margin-top:20px;padding-top:16px;border-top:1px solid var(--lux-hair);
font-family:'Play',sans-serif;font-size:12.5px;color:var(--lux-cream-dim)!important;
letter-spacing:.04em;
}
body.single-product .product_meta a{color:var(--lux-gold)!important}
/* the gift promo notice was tuned for a white page — invert it for the dark one */
body.single-product .lux-gift-notice{
background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(144,0,0,.22))!important;
border-color:var(--lux-hair-hi)!important;color:var(--lux-cream)!important;
}
body.single-product .lux-gift-notice strong{color:var(--lux-gold-lt)!important}
body.single-product .lux-gift-notice svg{stroke:var(--lux-gold)!important}
/* tabs */
body.single-product .woocommerce-tabs ul.tabs{
padding:0!important;margin:0 0 24px!important;border-bottom:1px solid var(--lux-hair)!important;
display:flex;gap:6px;
}
body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after{display:none!important}
body.single-product .woocommerce-tabs ul.tabs li{
background:none!important;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;
}
body.single-product .woocommerce-tabs ul.tabs li a{
display:block;padding:12px 22px!important;border-radius:10px 10px 0 0;
font-family:'Play',sans-serif;font-size:12px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--lux-cream-dim)!important;text-decoration:none;
border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease,background .2s ease;
}
body.single-product .woocommerce-tabs ul.tabs li a:hover{
color:var(--lux-cream)!important;background:rgba(212,175,55,.07);
}
body.single-product .woocommerce-tabs ul.tabs li.active a{
color:var(--lux-gold-lt)!important;border-bottom-color:var(--lux-gold)!important;
background:rgba(212,175,55,.1);
}
body.single-product .woocommerce-Tabs-panel h2{
color:var(--lux-cream)!important;font-size:22px;margin-bottom:14px;
}
body.single-product .woocommerce-Tabs-panel p{color:rgba(244,232,214,.86)!important;line-height:1.75}
/* related products heading */
body.single-product :is(.related,.upsells) > h2{
color:var(--lux-cream)!important;font-size:26px;letter-spacing:.02em;
margin:46px 0 22px;padding-bottom:14px;position:relative;
}
body.single-product :is(.related,.upsells) > h2::after{
content:'';position:absolute;left:0;bottom:0;width:72px;height:2px;
background:linear-gradient(90deg,var(--lux-gold),transparent);
}
/* the archive grid uses auto-fill, which is right when a page shows 12 cards;
with the 3-4 related items it would leave dead tracks on the right, so let
these stretch across the row instead */
body.single-product :is(.related,.upsells) ul.products{
grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
}
/* reviews, if a product ever has them */
body.single-product #reviews :is(.comment-text,.woocommerce-review__author,.comment_container){
color:var(--lux-cream)!important;
}
body.single-product #reviews .comment_container{
background:linear-gradient(165deg,rgba(42,16,24,.9),rgba(20,9,14,.9));
border:1px solid var(--lux-hair);border-radius:14px;padding:16px!important;
}
body.single-product #review_form :is(input,textarea){
background:rgba(255,255,255,.05)!important;border:1px solid var(--lux-hair)!important;
border-radius:10px!important;color:var(--lux-cream)!important;
}
body.single-product #review_form input[type=submit]{
background:linear-gradient(135deg,var(--lux-gold-lt),var(--lux-gold-dk))!important;
color:#2b1500!important;border:0!important;border-radius:999px!important;
font-weight:800!important;letter-spacing:.14em;text-transform:uppercase;padding:12px 30px!important;
}
/* ------------------------------------------------------------------ responsive */
@media (max-width:921px){
:is(body.post-type-archive-product,body.tax-product_cat) .ast-woocommerce-container{
padding:26px 16px 40px!important;
}
/* Astra reserves ~58px above the content column on phones — on a dark page
that reads as a hole between the header and the first row of products */
:is(body.post-type-archive-product,body.tax-product_cat,body.single-product) #primary{
padding-top:18px!important;
}
body.single-product .product_title{font-size:26px}
body.single-product .summary > p.price ins .amount,
body.single-product .summary > p.price > .amount{font-size:28px}
body.single-product div.product form.cart{gap:10px!important}
body.single-product div.product form.cart .quantity .qty{height:52px!important;width:74px!important}
body.single-product div.product form.cart .button.single_add_to_cart_button{
height:52px!important;min-width:0!important;flex:1 1 auto;padding:0 20px!important;font-size:13px!important;
}
body.single-product .woocommerce-tabs ul.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
ul.products{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))!important;gap:16px 14px!important}
ul.products li.product{padding:10px 12px 16px!important}
ul.products li.product .astra-shop-thumbnail-wrap{margin:-10px -12px 10px!important}
ul.products li.product .woocommerce-loop-product__title{font-size:13.5px!important}
ul.products li.product .price ins .amount{font-size:16px!important}
}
/* ============================================================================
ARABIC / RTL — Arabic is the one RTL language in the switcher (i18n.js sets
html[dir=rtl] via setDir()). Google Translate rewrites the page's words but
has no reason to touch layout direction, so without this block the whole
site stayed left-to-right under right-to-left script — menus, prices and
cards read in the wrong visual order even though every word was correctly
translated. This mirrors the highest-traffic, highest-visibility surfaces
(header, footer, catalogue cards, cart/checkout). It is a real, meaningful
pass, not an exhaustive pixel-mirror of every custom widget on the site —
the bestseller carousel and its arrows, for one, are left scrolling in
their built LTR direction rather than reversed, to avoid destabilising a
hand-tuned touch/drag component under time pressure.
============================================================================ */
html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .site-header .ast-main-header-bar-alignment,
html[dir="rtl"] li.lux-cart-item,
html[dir="rtl"] .lux-lang-toggle{direction:rtl}
html[dir="rtl"] .main-header-menu{padding-right:0}
/* trust bar / promo strip marquee text */
html[dir="rtl"] .lux-trustbar__track{direction:rtl}
/* catalogue + category cards: price/title/category block reads right-aligned */
html[dir="rtl"] ul.products li.product .astra-shop-summary-wrap,
html[dir="rtl"] ul.products li.product .woocommerce-loop-product__title,
html[dir="rtl"] ul.products li.product .ast-woo-product-category{text-align:right}
html[dir="rtl"] ul.products li.product .astra-shop-thumbnail-wrap a.ast-on-card-button.add_to_cart_button{
right:auto;left:16px;
}
html[dir="rtl"] .ast-onsale-card{left:auto;right:16px}
/* single product summary column */
html[dir="rtl"] body.single-product .summary{text-align:right}
html[dir="rtl"] body.single-product .single-product-category a{direction:ltr;display:inline-block}
/* sidebar filters/categories */
html[dir="rtl"] #secondary{text-align:right}
/* footer: columns + offices accordion */
html[dir="rtl"] .lux-footer-grid,
html[dir="rtl"] .lux-offices-grid{direction:rtl;text-align:right}
html[dir="rtl"] .lux-offices-grid summary,
html[dir="rtl"] .lux-offices-grid .lux-office-head{flex-direction:row-reverse}
/* cart drawer + checkout: keep the slide-in on its built side (right) — only
the text and row layout mirror, re-anchoring the animation itself is a
bigger, separate change */
html[dir="rtl"] .lux-drawer{text-align:right}
html[dir="rtl"] .lux-row,
html[dir="rtl"] .lux-sum-row,
html[dir="rtl"] .lux-done-row{flex-direction:row-reverse}
html[dir="rtl"] .lux-line{direction:rtl}
html[dir="rtl"] .lux-close{right:auto;left:16px}
/* USD amounts + the (≈ …) estimate stay LTR even inside RTL text — a price
like "$36.44" or "(≈ 134 zł)" read backwards if the digits/symbol get
bidi-reordered with the surrounding Arabic */
html[dir="rtl"] .price, html[dir="rtl"] .lux-money, html[dir="rtl"] .lux-fx,
html[dir="rtl"] .woocommerce-Price-amount{direction:ltr;unicode-bidi:isolate}