/*
* product.css — Single product page.
* CSS variables (--black, --grey1..3, --cream, --white, --gold, --radius)
* are defined in global.css — do not redefine here.
*/
body.single-product {
background: #ffffff;
/* overflow-x intentionally omitted — html already clips horizontal overflow
(see critical.css); setting it here shifts the scroll container away from
the viewport and breaks position:sticky on .pdp-gallery. */
padding-bottom: 80px; /* reserve space so sticky ATC bar never covers page content */
}
/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.pdp-breadcrumb {
padding: 12px 0;
font-size: 12px;
color: var(--text);
display: flex;
gap: 8px;
align-items: center;
border-bottom: 1px solid var(--grey3);
}
.pdp-breadcrumb a { color: var(--text); text-decoration: none; }
.pdp-breadcrumb a:hover { color: var(--black); }
.pdp-breadcrumb svg { width: 10px; height: 10px; stroke: var(--grey3); fill: none; stroke-width: 2; }
/* ── Product layout ─────────────────────────────────────────────────────────── */
.pdp-wrap {
display: grid;
grid-template-columns: 45% 55%;
max-width: 1400px;
margin: 0 auto;
padding: 32px 40px 64px;
}
/* ── Gallery ────────────────────────────────────────────────────────────────── */
.pdp-gallery {
position: sticky;
top: var(--header-h);
align-self: start;
}
.pdp-gallery__main {
overflow: hidden;
background: #F7F5F2;
border-radius: 4px;
margin-bottom: 10px;
position: relative;
}
@supports not (aspect-ratio: 1 / 1) {
.pdp-gallery__main { padding-bottom: 100%; height: 0; }
}
@supports (aspect-ratio: 1 / 1) {
.pdp-gallery__main { aspect-ratio: 1 / 1; }
}
.pdp-gallery__main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pdp-gallery__badges {
position: absolute;
top: 12px;
left: 12px;
z-index: 1;
}
.pdp-gallery__badges .badge {
font-size: 10px !important;
padding: 4px 9px !important;
letter-spacing: 0.08em !important;
}
/* ── PDP gallery skeleton shimmer ──────────────────────────────────────────── */
.pdp-gallery__skeleton {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
90deg,
#efefef 0%,
#e4e4e4 40%,
#efefef 80%
);
background-size: 300% 100%;
animation: pdp-shimmer 1.6s ease-in-out infinite;
pointer-events: none;
transition: opacity 0.3s ease;
border-radius: 4px;
}
@keyframes pdp-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.pdp-gallery__thumbs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 8px;
}
.pdp-gallery__thumb {
overflow: hidden;
background: #F7F5F2;
border-radius: 3px;
cursor: pointer;
border: 1.5px solid transparent;
transition: border-color 0.15s;
padding: 0;
}
@supports not (aspect-ratio: 1 / 1) {
.pdp-gallery__thumb { padding-bottom: 100%; height: 0; }
}
@supports (aspect-ratio: 1 / 1) {
.pdp-gallery__thumb { aspect-ratio: 1 / 1; }
}
.pdp-gallery__thumb.is-active,
.pdp-gallery__thumb:hover { border-color: var(--black); }
.pdp-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pdp-gallery__mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.pdp-gallery__mosaic-item {
overflow: hidden;
background: #F7F5F2;
border-radius: 3px;
}
@supports not (aspect-ratio: 1 / 1) {
.pdp-gallery__mosaic-item { padding-bottom: 100%; height: 0; }
}
@supports (aspect-ratio: 1 / 1) {
.pdp-gallery__mosaic-item { aspect-ratio: 1 / 1; }
}
.pdp-gallery__mosaic-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Mobile gallery slider */
.pdp-gallery__slider {
display: none;
position: relative;
overflow: hidden;
border-radius: 4px;
background: #F7F5F2;
margin-bottom: 10px;
}
@supports not (aspect-ratio: 1 / 1) {
.pdp-gallery__slider { padding-bottom: 100%; height: 0; }
}
@supports (aspect-ratio: 1 / 1) {
.pdp-gallery__slider { aspect-ratio: 1 / 1; }
}
.pdp-gallery__slides {
display: flex;
transition: transform 0.3s ease;
height: 100%;
}
.pdp-gallery__slide {
flex: 0 0 100%;
height: 100%;
}
.pdp-gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pdp-gallery__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.9);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
padding: 0;
touch-action: manipulation; /* rapid taps on the same spot were triggering the browser's native double-tap-to-zoom */
}
.pdp-gallery__arrow--prev { left: 10px; }
.pdp-gallery__arrow--next { right: 10px; }
.pdp-gallery__arrow svg { width: 16px; height: 16px; stroke: var(--black); fill: none; stroke-width: 2; }
.pdp-gallery__dots {
display: none;
justify-content: center;
gap: 6px;
margin-bottom: 8px;
}
.pdp-gallery__dot {
/* Visual size: 6×6px — but tap area padded to 44×44px for WCAG 2.5.5 */
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--grey3);
border: none;
padding: 19px; /* (44 - 6) / 2 = 19px each side */
background-clip: content-box;
cursor: pointer;
transition: background 0.15s;
box-sizing: content-box;
}
.pdp-gallery__dot.is-active { background: var(--black); background-clip: content-box; }
.pdp-gallery__strip {
display: none;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.pdp-gallery__strip::-webkit-scrollbar { display: none; }
.pdp-gallery__strip-thumb {
flex: 0 0 56px;
height: 56px;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
border: 1.5px solid transparent;
transition: border-color 0.15s;
padding: 0;
background: #F7F5F2;
}
.pdp-gallery__strip-thumb.is-active { border-color: var(--black); }
.pdp-gallery__strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Product info column ─────────────────────────────────────────────────────── */
.pdp-info { padding: 0 0 0 52px; min-width: 0; position: relative; }
/* ── PDP info skeleton ──────────────────────────────────────────────────────── */
.pdp-info-skeleton {
position: absolute;
inset: 0;
z-index: 5;
background: #fff;
pointer-events: none;
transition: opacity 0.3s ease;
display: flex;
flex-direction: column;
gap: 14px;
padding: 0 0 0 52px;
}
.pdp-sk-line {
display: block;
border-radius: 4px;
background: linear-gradient(90deg, #efefef 0%, #e4e4e4 40%, #efefef 80%);
background-size: 300% 100%;
animation: pdp-shimmer 1.6s ease-in-out infinite;
}
.pdp-sk-line--rating { height: 16px; width: 55%; }
.pdp-sk-line--title { height: 36px; width: 90%; }
.pdp-sk-line--price { height: 22px; width: 30%; }
.pdp-sk-line--benefits { height: 64px; width: 100%; border-radius: 6px; }
.pdp-sk-line--atc { height: 40px; width: 100%; border-radius: 7px; margin-top: 6px; }
@media (max-width: 900px) {
.pdp-info-skeleton { padding: 0 16px; }
}
.pdp-reviews-link {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
text-decoration: none;
color: var(--black);
overflow: hidden; /* needed so flex child can truncate */
}
.pdp-reviews-link:hover { text-decoration: none; }
.pdp-stars {
color: #FFA222;
font-size: 14px;
letter-spacing: 1px;
flex-shrink: 0; /* stars never shrink */
}
.pdp-review-text {
font-size: 13px;
color: var(--text);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0; /* allows flex child to shrink below content size */
}
.pdp-title {
font-family: 'Cormorant', serif;
font-size: 28px;
font-weight: 400;
line-height: 1.1;
margin-bottom: 3px;
color: var(--text);
}
.pdp-price {
font-size: 20px;
font-weight: 500;
margin-bottom: 20px;
color: var(--text);
}
.pdp-price del {
font-size: 0.75em;
color: var(--text);
text-decoration: line-through;
font-weight: 400;
}
.pdp-price ins {
text-decoration: none;
}
/* ── Subscribe & Save selector (WCS-ATT) ──────────────────────────────────────── */
.pdp-sub-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
user-select: none;
}
.pdp-sub-radio {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--grey3);
flex-shrink: 0;
position: relative;
transition: border-color 0.15s;
}
.js-pdp-sub-option.is-selected .pdp-sub-radio {
border-color: var(--gold);
background: var(--gold);
}
.js-pdp-sub-option.is-selected .pdp-sub-radio::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--white);
transform: translate(-50%, -50%);
}
/* Subscribe & Save — emphasised hero option, selected by default */
.pdp-sub-hero {
position: relative;
border: 2px solid var(--grey3);
border-radius: 6px;
padding: 16px 16px 14px;
cursor: pointer;
transition: border-color 0.15s;
}
.pdp-sub-hero.is-selected { border-color: var(--black); }
.pdp-sub-hero__ribbon {
position: absolute;
top: 0;
right: 0;
border-radius: 0 4px 0 6px;
}
.pdp-sub-hero__top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.pdp-sub-hero__title {
font-size: 15px;
font-weight: 500;
color: var(--black);
}
.pdp-sub-hero__price {
font-size: 19px;
font-weight: 500;
color: var(--black);
margin: 2px 0 8px 28px;
}
.pdp-sub-hero__price del {
font-size: 0.7em;
color: var(--text);
text-decoration: line-through;
font-weight: 400;
}
.pdp-sub-hero__perks {
display: flex;
gap: 14px;
margin-left: 28px;
font-size: 12px;
color: var(--text);
}
.pdp-sub-hero__perks span::before { content: '✓ '; color: var(--black); }
/* One-time purchase — quiet secondary option */
.pdp-sub-onetime {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border: 1px solid var(--grey3);
border-radius: 6px;
cursor: pointer;
transition: border-color 0.15s;
}
.pdp-sub-onetime.is-selected { border-color: var(--black); }
.pdp-sub-onetime__label {
flex: 1;
font-size: 13.5px;
color: var(--text);
}
.pdp-sub-onetime.is-selected .pdp-sub-onetime__label { color: var(--black); }
.pdp-sub-onetime__price { font-size: 13.5px; color: var(--text); }
.pdp-sub-onetime.is-selected .pdp-sub-onetime__price { color: var(--black); font-weight: 500; }
/* ── Subscription info ──────────────────────────────────────────────────────── */
.pdp-subscription-info {
margin: -4px 0 20px;
padding: 14px 16px;
background: #F7F5F2;
border-radius: 6px;
border-left: 3px solid var(--black);
}
.pdp-subscription-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--black);
margin-bottom: 10px;
}
.pdp-subscription-badge svg {
width: 13px;
height: 13px;
stroke: var(--black);
fill: none;
stroke-width: 1.5;
}
.pdp-subscription-terms {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.pdp-subscription-terms li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text);
}
.pdp-subscription-terms li svg {
width: 13px;
height: 13px;
stroke: var(--black);
fill: none;
stroke-width: 1.5;
flex-shrink: 0;
}
/* ── Benefits grid ──────────────────────────────────────────────────────────── */
.pdp-benefits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 24px;
margin-bottom: 24px;
}
.pdp-benefits--no-price {
margin-top: 16px;
}
.pdp-benefit {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: var(--text);
}
.pdp-benefit svg,
.pdp-benefit__custom-icon {
width: 16px;
height: 16px;
stroke: var(--black);
fill: none;
stroke-width: 1.5;
flex-shrink: 0;
}
/* ── Purchase block: simple ─────────────────────────────────────────────────── */
.pdp-delivery-info {
background: #F7F5F2;
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 20px;
font-size: 13px;
color: var(--text);
display: flex;
flex-direction: column;
gap: 4px;
}
.pdp-delivery-info strong { color: var(--black); }
.pdp-delivery-info svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
display: inline;
vertical-align: middle;
margin-right: 4px;
}
.pdp-qty-atc {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 0;
width: 100%;
}
.pdp-qty {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: var(--radius);
overflow: hidden;
flex-shrink: 0;
}
.pdp-qty-btn {
width: 34px;
height: var(--btn-h);
background: none;
border: none;
font-size: 16px;
cursor: pointer;
color: var(--black);
font-family: 'Ysabeau Office', sans-serif;
transition: background 0.15s;
}
.pdp-qty-btn:hover { background: var(--grey3); }
.pdp-qty-input {
width: 40px;
height: var(--btn-h);
border: none;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
text-align: center;
font-size: 14px;
font-family: 'Ysabeau Office', sans-serif;
font-weight: 500;
background: var(--white);
-moz-appearance: textfield;
appearance: textfield;
}
.pdp-qty-input::-webkit-inner-spin-button,
.pdp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
/* Primary (orange) — the PDP's main CTA. Email button template. */
.pdp-btn-atc {
flex: 1;
background: var(--cta-orange);
color: #ffffff;
border: none;
border-radius: var(--radius-btn);
height: var(--btn-h);
padding: 0 var(--btn-pad-x);
font-family: var(--font-body);
font-size: var(--btn-font-size);
font-weight: 500;
text-transform: capitalize;
box-shadow: none;
cursor: pointer;
transition: background 0.18s;
}
.pdp-btn-atc:hover { background: var(--cta-orange-hover); }
.pdp-btn-atc:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Composite product: style plugin-native output ──────────────────────────── */
.pdp-composite-wrap { margin-bottom: 4px; }
/* ── Composite spinner — three soft pulsing dots ─────────────────────────────
* blockUI creates .blockUI.blockOverlay (overlay) and .blockUI.blockMsg
* (message box) inside the blocked form.
* The message HTML is set via wc_cp_block_params.message (see inc/woocommerce.php).
* WC's own ::before spinner on the overlay is suppressed here.
*/
/* 1. Kill WC's default ::before loader.svg on the overlay */
.pdp-composite-wrap .blockUI.blockOverlay::before {
content: none !important;
display: none !important;
animation: none !important;
}
/* 2. Remove plugin clearfix pseudo-elements on composite_button (vestigial float-clear) */
.pdp-composite-wrap .composite_button::before,
.pdp-composite-wrap .composite_button::after {
content: none !important;
display: none !important;
}
/* 2. Strip blockUI's default white box from the message layer */
.pdp-composite-wrap .blockUI.blockMsg {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 3. Three dot loader */
@keyframes vlt-dot-pulse {
0%, 100% { opacity: 0.2; transform: scale(0.75); }
50% { opacity: 0.9; transform: scale(1); }
}
.vlt-cp-loader {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.vlt-cp-loader span {
display: block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--black);
animation: vlt-dot-pulse 1.6s ease-in-out infinite;
}
.vlt-cp-loader span:nth-child(1) { animation-delay: 0s; }
.vlt-cp-loader span:nth-child(2) { animation-delay: 0.28s; }
.vlt-cp-loader span:nth-child(3) { animation-delay: 0.56s; }
/* Single section heading above all selects */
.pdp-composite-heading {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--text);
margin: 0 0 12px;
line-height: 1.2;
}
/* ── Override plugin spacing — kills the 3rem padding-bottom per component ── */
.pdp-composite-wrap .component .component_inner { padding-bottom: 0 !important; }
.pdp-composite-wrap .component_selections { padding-top: 0 !important; }
/* ── Hide all plugin chrome — selected-product panels, price, summary ── */
.pdp-composite-wrap .composited_product_details_wrapper,
.pdp-composite-wrap .composite_price,
.pdp-composite-wrap .composite_summary,
.pdp-composite-wrap .composite_message,
.pdp-composite-wrap .composite_availability,
.pdp-composite-wrap .block_component,
.pdp-composite-wrap .component_inner_summary,
.pdp-composite-wrap .component_description_wrapper,
.pdp-composite-wrap .component_section_title,
.pdp-composite-wrap .select_label { display: none !important; }
/* ── Component title — "Choose Your Diffuser", "Choose Your Candle", etc. ──
* Each component's own title, shown above its dropdown so customers can tell
* them apart regardless of whether the overall section heading is shown.
* The plugin's default icon prefix needs its own icon font we don't load, so
* it's suppressed here in favour of the theme's own typography. */
.pdp-composite-wrap .component_title_wrapper { margin: 0 0 8px; }
.pdp-composite-wrap .component_title_wrapper .step_title_wrapper { margin: 0 !important; }
.pdp-composite-wrap .component_title_text {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text);
padding-left: 0 !important;
display: block !important;
}
.pdp-composite-wrap .component_title_text::before { content: none !important; }
/* Per-product opt-out ("Component titles: Hide" admin setting) — removes every
* per-component title above, regardless of whether the overall section
* heading ("Choose Your Scents") is shown. */
.pdp-composite-wrap--hide-titles .component_title_wrapper { display: none !important; }
/* Single-option components always get the plugin's own (empty, non-functional)
* dropdown hidden in favour of the static "included" line below — regardless
* of the title setting. `.vlt-single-option-static` is added unconditionally
* by JS in single-product.php once we can tell the component has no visible
* selection control. */
.pdp-composite-wrap .composite_component.vlt-single-option-static .component_options_select_wrapper { display: none !important; }
/* Per-product opt-out ("Also hide the title..." checkbox) — additionally
* hides the title label above a single-option component, since the static
* "included" line already says what it is. `.vlt-single-option-title-hidden`
* is only added when that checkbox is on. */
.pdp-composite-wrap .composite_component.vlt-single-option-title-hidden .component_title_wrapper { display: none !important; }
/* Static "included" line for a single-option component — reads like the
* other components' selects (same border/radius/padding) but without the
* dropdown chevron or pointer cursor, since there's nothing to choose. A
* checkmark + "Included" badge make it unambiguous this isn't a control. */
.pdp-composite-wrap .vlt-composite-included {
width: 100%;
box-sizing: border-box;
border: 1.5px solid var(--grey3);
border-radius: 12px;
padding: 11px 16px;
min-height: 44px;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--text);
background-color: #FAFAFA;
}
.pdp-composite-wrap .vlt-composite-included__check {
flex-shrink: 0;
color: var(--text);
font-size: 13px;
line-height: 1;
}
.pdp-composite-wrap .vlt-composite-included__text {
flex: 1;
min-width: 0;
}
.pdp-composite-wrap .vlt-composite-included__badge {
flex-shrink: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text);
background-color: #fff;
border: 1px solid var(--grey3);
border-radius: 4px;
padding: 3px 8px;
}
/* Kill the plugin's 2rem padding-top above the button row */
.pdp-composite-wrap .composite_wrap { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Force the WC composite form and all wrappers to fill the full container width */
.pdp-composite-wrap form.cart,
.pdp-composite-wrap .cart_group,
.pdp-composite-wrap .composite_form_wrap { width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; }
/* Space between components — tight stack */
.pdp-composite-wrap .composite_component {
margin: 0 0 7px 0 !important;
}
.pdp-composite-wrap .composite_component:last-of-type {
margin-bottom: 0 !important;
}
/* Override plugin's 1.618em padding-top on composited product title */
.component .composited_product_title_wrapper {
padding-top: 6px !important;
}
/* Dropdown wrapper */
.pdp-composite-wrap .component_options_select_wrapper {
margin-bottom: 0;
}
/* The select */
.pdp-composite-wrap select,
.pdp-composite-wrap .component_options_select {
width: 100%;
border: 1.5px solid var(--grey3);
border-radius: 12px;
padding: 11px 44px 11px 16px;
min-height: 44px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--text);
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M1.5 1.5l5 5 5-5' stroke='%23221F20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
transition: border-color 0.15s;
}
.pdp-composite-wrap select:focus,
.pdp-composite-wrap .component_options_select:focus {
outline: none;
border-color: var(--black);
}
/* ── Composite button row: qty stepper + Add to Cart side-by-side ── */
.pdp-composite-wrap .composite_button {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Qty wrapper — matches .pdp-qty exactly */
.pdp-composite-wrap .composite_button .quantity {
display: flex !important;
align-items: center !important;
border: 1px solid #ddd !important;
border-radius: var(--radius) !important;
overflow: hidden !important;
flex-shrink: 0 !important;
}
/* Native qty input inside composite — matches .pdp-qty-input */
.pdp-composite-wrap .composite_button .quantity .qty {
width: 40px !important;
height: var(--btn-h) !important;
border: none !important;
border-left: 1px solid #ddd !important;
border-right: 1px solid #ddd !important;
text-align: center !important;
font-size: 14px !important;
font-family: 'Ysabeau Office', sans-serif !important;
font-weight: 500 !important;
background: var(--white) !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
padding: 0 !important;
}
.pdp-composite-wrap .composite_button .quantity .qty::-webkit-inner-spin-button,
.pdp-composite-wrap .composite_button .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; }
/* Injected −/+ buttons inside composite qty — re-use .pdp-qty-btn styles */
.pdp-composite-wrap .composite_button .quantity .pdp-qty-btn {
width: 34px;
height: var(--btn-h);
background: none;
border: none;
font-size: 16px;
cursor: pointer;
color: var(--black);
font-family: 'Ysabeau Office', sans-serif;
transition: background 0.15s;
flex-shrink: 0;
}
.pdp-composite-wrap .composite_button .quantity .pdp-qty-btn:hover { background: var(--grey3); }
/* Add to cart button — flex: 1 so it fills remaining width */
.pdp-composite-wrap .single_add_to_cart_button,
.pdp-composite-wrap .composite_add_to_cart_button {
flex: 1 !important;
background: var(--cta-orange);
color: #fff;
border: none;
border-radius: var(--radius-btn);
height: var(--btn-h);
padding: 0 var(--btn-pad-x);
font-family: var(--font-body);
font-size: var(--btn-font-size);
font-weight: 500;
text-transform: capitalize;
box-shadow: none;
cursor: pointer;
transition: background 0.18s;
margin-top: 0;
}
.pdp-composite-wrap .single_add_to_cart_button:hover,
.pdp-composite-wrap .composite_add_to_cart_button:hover { background: var(--cta-orange-hover); }
.pdp-composite-wrap .single_add_to_cart_button:disabled,
.pdp-composite-wrap .composite_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }
.pdp-trust-line {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12px;
color: var(--text);
margin-top: 14px;
margin-bottom: 20px;
}
.pdp-trust-line svg {
width: 14px;
height: 14px;
stroke: var(--star-gold);
fill: none;
stroke-width: 1.5;
}
/* ── USP grid (replaces trust-line) ──────────────────────────────────────── */
.pdp-usp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 16px;
margin-bottom: 20px;
}
.pdp-usp {
display: flex;
align-items: flex-start;
gap: 10px;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-align: left;
font: inherit;
}
.pdp-usp:hover .pdp-usp__title {
text-decoration: underline;
}
.pdp-usp__icon {
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 1px;
}
.pdp-usp__icon svg {
width: 22px;
height: 22px;
stroke: var(--grey2);
fill: none;
stroke-width: 1.5;
}
.pdp-usp__text {
display: flex;
flex-direction: column;
}
.pdp-usp__title {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--black);
line-height: 1.3;
}
.pdp-usp__sub {
font-family: var(--font-body);
font-size: 12px;
color: var(--text);
line-height: 1.3;
}
@media (max-width: 600px) {
.pdp-usp-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pdp-usp__title { font-size: 12px; }
.pdp-usp__sub { font-size: 10px; }
.pdp-usp__icon { width: 18px; height: 18px; }
.pdp-usp__icon svg { width: 18px; height: 18px; }
}
.pdp-payment-methods {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.pdp-payment-badge {
background: #F7F5F2;
border-radius: 4px;
padding: 6px 12px;
font-size: 12px;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
border: none;
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
font-family: var(--font-body);
text-align: left;
transition: background 0.15s;
}
.pdp-payment-badge:hover { background: #eeebe6; }
.pdp-payment-badge strong { color: var(--black); }
/* ── Payment / Delivery info modals ──────────────────────────────────────── */
.pdp-payment-modal {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
align-items: center;
justify-content: center;
}
.pdp-payment-modal.is-open {
display: flex;
}
.pdp-payment-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
cursor: pointer;
}
.pdp-payment-modal__box {
position: relative;
background: #fff;
border-radius: 8px;
padding: 36px 32px 32px;
max-width: 480px;
width: calc(100% - 32px);
max-height: 90vh;
overflow-y: auto;
}
.pdp-payment-modal__close {
position: absolute;
top: 14px;
right: 14px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
color: var(--text);
line-height: 0;
}
.pdp-payment-modal__close svg { width: 20px; height: 20px; }
.pdp-payment-modal__close:hover { color: var(--black); }
.pdp-payment-modal__logo { margin-bottom: 16px; }
.pdp-payment-modal__logo img { height: 44px; width: auto; }
.pdp-payment-modal__title {
font-size: 20px;
font-weight: 600;
margin: 0 0 12px;
color: var(--black);
}
.pdp-payment-modal__intro {
font-size: 14px;
color: var(--text);
line-height: 1.6;
margin: 0 0 16px;
}
.pdp-payment-modal__steps {
font-size: 14px;
color: var(--black);
line-height: 1.7;
margin: 0 0 20px;
padding-left: 20px;
}
.pdp-payment-modal__note {
font-size: 11px;
color: var(--text);
margin: 0;
line-height: 1.5;
}
@media (max-width: 600px) {
/* max-height:90vh above isn't enough on mobile — many mobile browsers
size `vh` against the LARGEST possible viewport (address bar hidden),
so the visible margin shrinks toward zero when the address bar is
showing, leaving the box edge-to-edge with no backdrop to tap and
close. Force a real margin with an explicit height cap instead. */
.pdp-payment-modal__box {
margin: 32px 0;
max-height: calc(100vh - 64px);
max-height: calc(100dvh - 64px);
}
}
/* ── Delivery info modal rows ─────────────────────────────────────────────── */
.pdp-delivery-modal__rows {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 16px;
}
.pdp-delivery-modal__row {
display: flex;
gap: 14px;
align-items: flex-start;
}
.pdp-delivery-modal__icon {
flex-shrink: 0;
width: 22px;
padding-top: 2px;
}
.pdp-delivery-modal__icon svg {
width: 20px;
height: 20px;
stroke: var(--black);
}
.pdp-delivery-modal__row strong {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
color: var(--black);
}
.pdp-delivery-modal__row p {
font-size: 13px;
color: var(--text);
margin: 0 0 4px;
line-height: 1.5;
}
.pdp-delivery-modal__note {
font-size: 11px;
color: var(--text);
margin: 2px 0 0;
line-height: 1.5;
}
/* Delivery info box — clickable */
.pdp-delivery-info.js-delivery-modal-trigger {
cursor: pointer;
}
.pdp-delivery-info.js-delivery-modal-trigger:hover {
opacity: 0.85;
}
/* ── Purchase block: bundle ─────────────────────────────────────────────────── */
.pdp-bundle-header {
background: var(--cream);
border-radius: 4px 4px 0 0;
padding: 10px 16px;
text-align: center;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
}
.pdp-bundle-options {
border: 1px solid var(--grey3);
border-top: none;
border-radius: 0 0 4px 4px;
margin-bottom: 20px;
overflow: hidden;
}
.pdp-bundle-option {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
cursor: pointer;
border-bottom: 1px solid var(--grey3);
transition: background 0.15s;
position: relative;
border-left: 3px solid transparent;
}
.pdp-bundle-option:last-child { border-bottom: none; }
.pdp-bundle-option.is-selected {
background: #FAFAFA;
border-left-color: var(--gold);
}
.pdp-bundle-option:not(.is-selected):hover { background: #FAFAFA; }
.pdp-bundle-radio {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--grey3);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 0.15s;
position: relative;
}
.pdp-bundle-option.is-selected .pdp-bundle-radio {
border-color: var(--gold);
background: var(--gold);
}
.pdp-bundle-option.is-selected .pdp-bundle-radio::after {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--white);
}
.pdp-bundle-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pdp-bundle-name {
font-size: 14px;
font-weight: 500;
color: var(--black);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pdp-bundle-badge {
font-size: 10px;
background: var(--black);
color: var(--white);
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pdp-bundle-badge--green { background: #2E7D32; }
.pdp-bundle-sub { font-size: 12px; color: var(--text); font-weight: 300; }
.pdp-bundle-per { font-size: 12px; color: #2E7D32; font-weight: 500; margin-top: 2px; }
/* Inline qty inside bundle option */
.pdp-bundle-qty {
display: flex;
align-items: center;
border: 1px solid var(--grey3);
border-radius: var(--radius);
overflow: hidden;
margin-left: 4px;
}
.pdp-bundle-qty-btn {
width: 30px;
height: 30px;
background: none;
border: none;
font-size: 14px;
cursor: pointer;
color: var(--black);
font-family: 'Ysabeau Office', sans-serif;
}
.pdp-bundle-qty-input {
width: 36px;
height: 30px;
border: none;
border-left: 1px solid var(--grey2);
border-right: 1px solid var(--grey2);
text-align: center;
font-size: 13px;
font-family: 'Ysabeau Office', sans-serif;
font-weight: 500;
background: var(--white);
-moz-appearance: textfield;
appearance: textfield;
}
.pdp-bundle-qty-input::-webkit-inner-spin-button,
.pdp-bundle-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.pdp-bundle-price { text-align: right; flex-shrink: 0; }
.pdp-bundle-price__main { font-size: 16px; font-weight: 500; color: var(--black); }
.pdp-bundle-price__was { font-size: 12px; color: var(--text); text-decoration: line-through; }
/* Bundle full-width ATC */
.pdp-bundle-atc {
width: 100%;
background: var(--cta-orange);
color: #ffffff;
border: none;
border-radius: var(--radius-btn);
height: var(--btn-h);
padding: 0 var(--btn-pad-x);
font-family: var(--font-body);
font-size: var(--btn-font-size);
font-weight: 500;
text-transform: capitalize;
box-shadow: none;
cursor: pointer;
transition: background 0.18s;
margin-bottom: 8px;
display: block;
}
.pdp-bundle-atc:hover { background: var(--cta-orange-hover); }
.pdp-bundle-atc:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Offer Group option selector ──────────────────────────────────────────── */
/* ── Offer Group wrapper ────────────────────────────────────────────────────── */
.pdp-og-wrap {
background: #f9f8f6;
border: 1px solid var(--grey3);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 16px;
}
/* ── Offer Group header (inside wrapper) ───────────────────────────────────── */
.pdp-og-header {
padding: 0 4px 16px;
text-align: center;
font-size: 20px;
font-weight: 500;
font-style: normal;
letter-spacing: 0.01em;
color: var(--text);
font-family: var(--font-head);
display: flex;
align-items: center;
gap: 16px;
}
.pdp-og-header::before,
.pdp-og-header::after {
content: '';
flex: 1;
height: 1px;
background: var(--grey3);
}
/* ── Options container ─────────────────────────────────────────────────────── */
.pdp-og-options {
display: flex;
flex-direction: column;
gap: 10px;
}
/* ── Individual option card ────────────────────────────────────────────────── */
.pdp-og-option {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
cursor: pointer;
border: 1px solid var(--grey3);
border-radius: var(--radius);
transition: background 0.15s, border-color 0.2s, box-shadow 0.2s;
position: relative;
background: var(--white);
}
.pdp-og-option.is-selected {
border: 2px solid var(--gold);
border-radius: var(--radius);
padding: 15px 19px; /* compensate for thicker border */
background: var(--white);
z-index: 1; /* sit above siblings so full border is visible */
}
.pdp-og-option:not(.is-selected):hover {
background: #faf8f5;
border-color: #ccc;
}
/* Link options keep the same column layout — only the link-label element differs */
/* ── Radio circle ──────────────────────────────────────────────────────────── */
.pdp-og-radio {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--grey3);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
margin-top: 1px;
}
.pdp-og-option.is-selected .pdp-og-radio {
border-color: var(--gold);
background: var(--gold);
}
.pdp-og-option.is-selected .pdp-og-radio::after {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--white);
}
/* ── Info column (label, sub-text, savings) ────────────────────────────────── */
.pdp-og-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.pdp-og-name {
font-size: 14px;
font-weight: 600;
color: var(--black);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
line-height: 1.4;
}
/* ── Badge (inline with label) ─────────────────────────────────────────────── */
.pdp-og-badge {
font-size: 9px;
font-weight: 700;
background: var(--black);
color: var(--white);
padding: 3px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.pdp-og-badge--green { background: #2E7D32; }
.pdp-og-badge--gold { background: var(--gold); color: var(--black); }
/* ── Sub-text + savings ────────────────────────────────────────────────────── */
.pdp-og-sub {
font-size: 12px;
color: var(--text);
font-weight: 300;
line-height: 1.4;
}
.pdp-og-link-label {
font-size: 12px;
color: var(--black);
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
.pdp-og-savings {
font-size: 12px;
color: #2E7D32;
font-weight: 500;
margin-top: 1px;
}
/* ── Price column (right-aligned) ──────────────────────────────────────────── */
.pdp-og-price {
text-align: right;
flex-shrink: 0;
margin-left: auto;
padding-left: 12px;
}
.pdp-og-price__main {
font-size: 17px;
font-weight: 600;
color: var(--black);
line-height: 1.3;
}
.pdp-og-price__was {
font-size: 12px;
color: var(--text);
text-decoration: line-through;
margin-top: 2px;
}
.pdp-og-price__per {
font-size: 12px;
color: var(--gold);
font-weight: 600;
margin-top: 2px;
}
/* ── Corner badge — "MOST POPULAR" top-right of card ───────────────────────── */
.pdp-og-corner-badge {
position: absolute;
top: 0;
right: 0;
background: #1a3a2a;
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 0 0 0 6px;
}
/* ── Inline qty stepper inside option row ──────────────────────────────────── */
.pdp-og-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--grey3);
border-radius: var(--radius);
overflow: hidden;
margin-left: 4px;
vertical-align: middle;
}
.pdp-og-qty-btn {
width: 30px;
height: 30px;
background: none;
border: none;
font-size: 15px;
cursor: pointer;
color: var(--black);
font-family: var(--font-body);
display: flex;
align-items: center;
justify-content: center;
}
.pdp-og-qty-input {
width: 34px;
height: 30px;
border: none;
border-left: 1px solid var(--grey3);
border-right: 1px solid var(--grey3);
text-align: center;
font-size: 13px;
font-family: var(--font-body);
font-weight: 500;
background: var(--white);
-moz-appearance: textfield;
appearance: textfield;
}
.pdp-og-qty-input::-webkit-inner-spin-button,
.pdp-og-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
/* ── Offer group ATC button ────────────────────────────────────────────────── */
.pdp-og-atc {
width: 100%;
background: var(--cta-orange);
color: var(--white);
border: none;
border-radius: var(--radius-btn);
height: var(--btn-h);
padding: 0 var(--btn-pad-x);
font-family: var(--font-body);
font-size: var(--btn-font-size);
font-weight: 500;
text-transform: capitalize;
box-shadow: none;
cursor: pointer;
transition: background 0.18s;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.pdp-og-atc:hover { background: var(--cta-orange-hover); }
.pdp-og-atc:active { transform: scale(0.99); }
.pdp-og-atc:disabled { opacity: 0.5; cursor: not-allowed; }
.pdp-guarantee-line {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12px;
color: var(--text);
margin-bottom: 16px;
}
.pdp-guarantee-line svg {
width: 14px;
height: 14px;
stroke: var(--grey2);
fill: none;
stroke-width: 1.5;
}
.pdp-delivery-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.pdp-delivery-cell {
border: 1px solid var(--grey3);
border-radius: 4px;
padding: 12px;
font-size: 12px;
}
.pdp-delivery-cell__name {
font-weight: 500;
color: var(--black);
margin-bottom: 2px;
display: flex;
align-items: center;
gap: 6px;
}
.pdp-delivery-cell__name svg {
width: 13px;
height: 13px;
stroke: var(--black);
fill: none;
stroke-width: 1.5;
}
.pdp-delivery-cell__date { color: var(--text); font-weight: 300; }
.pdp-delivery-cell__sub { color: var(--text); font-weight: 300; margin-top: 2px; }
/* ── Short description ────────────────────────────────────────────────────────── */
.pdp-desc {
font-size: 16px;
color: var(--text);
line-height: 1.75;
margin-bottom: 6px;
font-weight: 300;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pdp-desc.is-expanded {
display: block;
-webkit-line-clamp: unset;
}
.pdp-read-more {
font-size: 13px;
color: var(--black);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
margin-bottom: 24px;
display: inline-block;
background: none;
border: none;
padding: 0;
font-family: 'Ysabeau Office', sans-serif;
}
/* ── Accordions ─────────────────────────────────────────────────────────────── */
/* ── "Why Everyone Loves This" — video placeholder section ──────────────────── */
/*
* Fireworks video integration pending — this renders static placeholder cards.
* Each card has a coloured thumbnail, centred play button, and shopping bag badge.
*/
/* Firework skeleton loader — shown before SDK loads on scroll */
.fw-skeleton {
display: flex; gap: 10px; overflow: hidden; padding: 4px 0;
}
.fw-skeleton-card {
flex: 0 0 160px; height: 220px; border-radius: 12px;
background: linear-gradient(110deg, #f0ede9 30%, #f7f5f2 50%, #f0ede9 70%);
background-size: 200% 100%;
animation: fw-shimmer 1.4s ease-in-out infinite;
}
@keyframes fw-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Scrollable track */
.pdp-video-track {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 16px;
/* hide scrollbar on all browsers */
scrollbar-width: none;
}
.pdp-video-track::-webkit-scrollbar { display: none; }
/* Individual video card */
.pdp-video-card {
flex: 0 0 140px;
scroll-snap-align: start;
cursor: default;
}
/* Thumbnail — coloured background, rounded, square */
.pdp-video-thumb {
position: relative;
width: 140px;
height: 140px;
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
/* Shopping bag badge — top-right corner */
.pdp-video-bag {
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
background: rgba(255, 255, 255, 0.18);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.9);
flex-shrink: 0;
}
/* Play button — centred circle */
.pdp-video-play {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
display: flex;
align-items: center;
justify-content: center;
/* subtle inner ring */
box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
.pdp-video-play svg {
margin-left: 3px; /* optical centre for play triangle */
}
/* Card title */
.pdp-video-title {
font-family: 'Ysabeau Office', sans-serif;
font-size: 12px;
font-weight: 400;
color: var(--text);
line-height: 1.4;
margin: 0;
}
.pdp-accordions { border-top: 1px solid var(--grey3); }
.pdp-accordion { border-bottom: 1px solid var(--grey3); }
.pdp-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
cursor: pointer;
font-size: 17px;
font-weight: 500;
user-select: none;
background: none;
border: none;
width: 100%;
text-align: left;
font-family: 'Ysabeau Office', sans-serif;
color: var(--black);
}
.pdp-accordion-icon {
font-size: 20px;
color: var(--text);
transition: transform 0.2s;
flex-shrink: 0;
line-height: 1;
}
.pdp-accordion.is-open .pdp-accordion-icon { transform: rotate(45deg); }
.pdp-accordion-body {
display: none;
padding: 0 0 16px;
font-size: 14px;
color: var(--text);
line-height: 1.75;
font-weight: 300;
}
.pdp-accordion-body h5,
.pdp-accordion-body h6 {
font-family: 'Ysabeau Office', sans-serif;
font-size: 15px;
/* Capped at the accordion header's own weight (.pdp-accordion-header,
500) — bolder than that (was 700) made an item subheading like
"Beautiful Fragrance" visually outweigh the "Key Benefits" section
title above it, even once sized smaller. */
font-weight: 500;
color: var(--black);
line-height: 1.3;
margin: 20px 0 8px;
}
.pdp-accordion-body h5:first-child,
.pdp-accordion-body h6:first-child {
margin-top: 0;
}
.pdp-accordion-body p {
/* Explicit — the global `body p { font-size: 17.5px }` rule (global.css)
targets directly, so it otherwise wins over this container's own
font-size, which only reaches text that isn't wrapped in a
. */
font-size: inherit;
margin: 0 0 16px;
}
/* The Key Benefits content always leads with a redundant "
Key Benefits
"
duplicating this accordion's own header — Product Details' h5 is real content
(ingredients/usage), so this is scoped to #pdp-acc-benefits only. */
#pdp-acc-benefits h5 {
display: none;
}
.pdp-accordion-body p:last-child {
margin-bottom: 0;
}
.pdp-accordion.is-open .pdp-accordion-body { display: block; }
.pdp-accordion--video .pdp-accordion-body { padding: 32px 0; }
/* Native accordion */
summary.pdp-accordion-header { list-style: none; }
summary.pdp-accordion-header::-webkit-details-marker { display: none; }
details.pdp-accordion[open] .pdp-accordion-body { display: block; }
details.pdp-accordion[open] .pdp-accordion-icon { transform: rotate(45deg); }
/* ── Carousels ───────────────────────────────────────────────────────────────── */
.pdp-carousel {
padding: 40px 0;
border-top: 1px solid var(--grey3);
}
.pdp-carousel-heading {
font-family: 'Cormorant', serif;
font-size: 26px;
font-weight: 400;
margin-bottom: 24px;
text-align: center;
}
.pdp-carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
padding-bottom: 12px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--grey3) transparent;
}
.pdp-carousel-track::-webkit-scrollbar { height: 4px; }
.pdp-carousel-track::-webkit-scrollbar-track { background: transparent; }
.pdp-carousel-track::-webkit-scrollbar-thumb { background: var(--grey3); border-radius: 2px; }
.pdp-carousel-card {
flex: 0 0 200px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
/* Contains the absolutely-positioned .screen-reader-text price labels
(WooCommerce "Original price was…"). Without it they anchor to
.pdp-carousel-wrap, outside the scrolling track, and the last cards'
labels sat ~250px past the screen edge — widening the page on phones. */
position: relative;
}
.pdp-carousel-card__link {
display: block;
text-decoration: none;
color: var(--black);
flex: 1;
}
.pdp-carousel-card__link:hover { text-decoration: none; }
.pdp-carousel-card__link:hover .pdp-carousel-card__name,
.pdp-carousel-card__link:hover .pdp-carousel-card__price { text-decoration: none; }
.pdp-carousel-card__actions {
display: flex;
gap: 6px;
margin-top: 10px;
}
.pdp-carousel-card__atc {
flex: 1;
background: var(--black);
color: #ffffff;
border: none;
border-radius: var(--radius-btn);
height: 40px;
font-family: 'Ysabeau Office', sans-serif;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.18s;
}
.pdp-carousel-card__atc:hover { background: #3a3a3a; }
.pdp-carousel-card__atc:disabled { opacity: 0.5; cursor: not-allowed; }
.pdp-carousel-card__atc--link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.pdp-carousel-card__view {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1.5px solid var(--grey3);
border-radius: var(--radius-btn);
color: var(--black);
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
}
.pdp-carousel-card__view:hover { border-color: var(--black); background: var(--grey3); }
.pdp-carousel-card__view svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pdp-carousel-card__img {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #F7F5F2;
border-radius: 4px;
margin-bottom: 10px;
}
.pdp-carousel-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
display: block;
}
.pdp-carousel-card__link:hover .pdp-carousel-card__img img { transform: scale(1.04); }
.pdp-carousel-card__badge {
position: absolute;
top: 8px;
left: 8px;
/* visual style matches .badge--sale on the category page */
display: inline-flex;
align-items: center;
background: var(--sale-badge-bg);
color: var(--sale-badge-text);
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
padding: 3px 6px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.pdp-carousel-card__name {
font-family: 'Cormorant', serif;
font-size: 15px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 3px;
}
.pdp-carousel-card__price { font-size: 13px; color: var(--text); }
.pdp-carousel-card__price s { color: var(--text); margin-right: 4px; }
/* ── Reviews section ────────────────────────────────────────────────────────── */
.pdp-reviews {
padding: 60px 40px;
border-top: 1px solid var(--grey3);
max-width: var(--max-w);
margin: 0 auto;
box-sizing: border-box;
}
.pdp-reviews-header { text-align: center; margin-bottom: 40px; }
.pdp-reviews-header h2 {
font-family: 'Cormorant', serif;
font-size: 36px;
font-weight: 400;
margin-bottom: 10px;
}
.pdp-reviews-header__meta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.pdp-reviews-header__score {
font-size: 22px;
font-weight: 700;
color: var(--black);
line-height: 1;
}
.pdp-reviews-header .pdp-stars { font-size: 22px; color: #FFA222; line-height: 1; }
.pdp-reviews-header__count {
font-size: 14px;
color: var(--text);
line-height: 1;
}
.pdp-reviews-header p { font-size: 14px; color: var(--text); margin-top: 4px; }
.pdp-reviews-filter { margin-bottom: 28px; }
.pdp-reviews-filter select {
font-family: 'Ysabeau Office', sans-serif;
font-size: 13px;
padding: 8px 14px;
border: 1px solid var(--grey3);
border-radius: var(--radius);
background: var(--white);
cursor: pointer;
}
.pdp-reviews-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 28px;
}
.pdp-review-card {
border: none;
border-radius: var(--radius);
padding: 20px 18px;
background: var(--white);
display: flex;
flex-direction: column;
}
.pdp-review-card__stars { color: #FFA222; font-size: 16px; margin-bottom: 4px; }
.pdp-review-card__date { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.pdp-review-card__author { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.pdp-review-card__verified {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #1a7a3a;
margin-bottom: 6px;
font-weight: 500;
}
.pdp-review-card__verified-icon { width: 14px; height: 14px; fill: #1a7a3a; flex-shrink: 0; }
.pdp-review-card__verified-date { color: var(--text); font-weight: 400; }
.pdp-review-card__product {
display: inline-block;
font-size: 15px;
color: var(--text);
margin-bottom: 8px;
text-decoration: none;
}
.pdp-review-card__product:hover { color: var(--text); }
.pdp-review-card__text {
font-size: 15px;
color: var(--text);
line-height: 1.6;
font-weight: 300;
margin-bottom: 12px;
}
.pdp-review-read-more {
display: inline;
background: none;
border: none;
padding: 0;
margin-left: 4px;
font-size: 13px;
color: var(--black);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
font-family: inherit;
}
.pdp-review-card__helpful {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding: 5px 12px;
font-size: 12px;
color: var(--text);
background: none;
border: none;
border-radius: 20px;
cursor: pointer;
font-family: inherit;
transition: color 0.15s, background 0.15s;
}
.pdp-review-card__helpful:hover {
color: var(--black);
}
.pdp-review-card__helpful.is-voted {
color: var(--black);
}
.pdp-review-card__helpful svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
}
/* ── Valentte reply block ───────────────────────────────────────────────── */
.pdp-review-reply {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--grey3);
}
.pdp-review-reply__toggle {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
}
.pdp-review-reply__brand {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--black);
line-height: 1;
}
.pdp-review-reply__cta {
font-size: 12px;
color: var(--text);
white-space: nowrap;
transition: color 0.15s;
line-height: 1;
}
.pdp-review-reply__toggle:hover .pdp-review-reply__cta {
color: var(--black);
}
.pdp-review-reply__text {
font-size: 13px;
color: var(--text);
line-height: 1.5;
margin: 10px 0 0;
}
/* ── Accordion carousel wrap + arrows ────────────────────────────────────── */
.pdp-carousel-wrap {
position: relative;
}
.pdp-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--black);
border: none;
cursor: pointer;
padding: 0;
z-index: 2;
transition: background 0.15s, opacity 0.15s;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.pdp-carousel-arrow--prev { left: -16px; }
.pdp-carousel-arrow--next { right: -16px; }
.pdp-carousel-arrow:hover:not(:disabled) { background: #444; }
.pdp-carousel-arrow:disabled { opacity: 0.25; cursor: default; }
.pdp-carousel-arrow svg {
width: 18px;
height: 18px;
stroke: #fff;
fill: none;
stroke-width: 2.5;
}
.pdp-reviews-load-more {
display: block;
margin: 0 auto;
background: transparent;
border: 1px solid var(--black);
color: var(--black);
font-family: 'Ysabeau Office', sans-serif;
font-size: 13px;
padding: 12px 36px;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.18s;
}
.pdp-reviews-load-more:hover { background: var(--black); color: var(--white); }
/* ── Email capture ──────────────────────────────────────────────────────────── */
.pdp-email-capture {
background: var(--cream);
padding: 52px 0;
text-align: center;
border-top: 1px solid var(--grey3);
}
.pdp-email-capture h2 {
font-family: 'Cormorant', serif;
font-size: 32px;
font-weight: 400;
margin-bottom: 8px;
}
.pdp-email-capture p {
font-size: 14px;
color: var(--text);
margin-bottom: 24px;
font-weight: 300;
}
.pdp-email-form {
display: flex;
gap: 10px;
max-width: 480px;
margin: 0 auto 12px;
}
.pdp-email-form input {
flex: 1;
padding: 12px 16px;
border: 1px solid var(--grey3);
border-radius: var(--radius);
font-family: 'Ysabeau Office', sans-serif;
font-size: 14px;
background: var(--white);
}
/* Secondary (black) */
.pdp-email-form button {
background: var(--black);
color: var(--white);
border: none;
min-height: var(--btn-h);
padding: 0 var(--btn-pad-x);
border-radius: var(--radius-btn);
font-family: var(--font-body);
font-size: var(--btn-font-size-compact);
font-weight: 500;
text-transform: capitalize;
cursor: pointer;
transition: background 0.18s;
white-space: nowrap;
}
.pdp-email-form button:hover { background: #3a3a3a; }
.pdp-email-terms { font-size: 11px; color: var(--text); }
/* ── Sticky add to cart bar ─────────────────────────────────────────────────── */
.pdp-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--white);
border-top: 1px solid var(--grey3);
padding: 8px 40px;
display: flex;
align-items: center;
gap: 16px;
z-index: 99999;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
transform: translateY(100%);
transition: transform 0.3s;
}
.pdp-sticky-bar.is-visible { transform: translateY(0); }
/* Info block: title+price row, then subtitle row */
.pdp-sticky-bar__info { flex: 1; min-width: 0; }
.pdp-sticky-bar__top {
display: flex;
align-items: baseline;
gap: 12px;
}
.pdp-sticky-bar__name {
font-family: 'Cormorant', serif;
font-size: 22px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdp-sticky-bar__price {
font-size: 16px;
font-weight: 500;
color: var(--black);
white-space: nowrap;
flex-shrink: 0;
}
.pdp-sticky-bar__sub {
display: flex;
align-items: center;
gap: 0;
margin-top: 1px;
}
.pdp-sticky-bar__delivery {
font-size: 13px;
color: var(--text);
white-space: nowrap;
}
.pdp-sticky-bar__trust {
font-size: 13px;
color: var(--text);
white-space: nowrap;
}
.pdp-sticky-bar__trust::before { content: '\00a0\00b7\00a0'; }
.pdp-sticky-bar .pdp-qty { height: var(--btn-h); }
.pdp-sticky-bar .pdp-qty-btn { height: var(--btn-h); }
.pdp-sticky-bar .pdp-qty-input { height: var(--btn-h); font-size: 16px; }
/* Primary (orange) — sticky add to basket */
.pdp-sticky-bar__btn {
background: var(--cta-orange);
color: var(--white);
border: none;
height: var(--btn-h);
padding: 0 var(--btn-pad-x);
border-radius: var(--radius-btn);
font-family: var(--font-body);
font-size: var(--btn-font-size-compact);
font-weight: 500;
text-transform: capitalize;
cursor: pointer;
white-space: nowrap;
transition: background 0.18s;
}
.pdp-sticky-bar__btn:hover { background: var(--cta-orange-hover); }
/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.pdp-breadcrumb { display: none; }
/* Keep stars + review count on one line when there's room; only wrap
onto a second line if it genuinely doesn't fit — never clip. */
.pdp-reviews-link { flex-wrap: wrap; overflow: visible; }
.pdp-review-text { white-space: normal; overflow: visible; text-overflow: unset; }
/* Accordion headers/body text (Key Benefits, Product Details, Reviews,
Related Products, etc.) — same 17px/14px as desktop felt oversized on
narrow mobile widths. */
.pdp-accordion-header { font-size: 15px; }
.pdp-accordion-body { font-size: 13px; }
/* Keep the same size gap as desktop (17/15) so item subheadings (e.g.
"Beautiful Fragrance") stay smaller than the section title above them —
without this they'd match the header's own 15px and compete with it. */
.pdp-accordion-body h5,
.pdp-accordion-body h6 { font-size: 14px; }
.pdp-wrap {
/* minmax(0, 1fr), not 1fr: a bare 1fr column won't shrink below its
content's min-content width — the gallery's row of slides — which made
the page ~574px wider than the phone screen (zoom-out on 221 PDPs). */
grid-template-columns: minmax(0, 1fr);
padding: 0 0 48px;
gap: 28px;
}
.pdp-gallery,
.pdp-info {
min-width: 0;
}
.pdp-gallery {
position: static;
}
/* Switch to slider on mobile */
.pdp-gallery__thumbs,
.pdp-gallery__mosaic,
.pdp-gallery__main {
display: none;
}
.pdp-gallery__slider { display: block; }
.pdp-gallery__strip { display: flex; padding: 0 16px; }
.pdp-info { padding: 0 16px; }
.pdp-title { font-size: 28px; }
.pdp-delivery-options { grid-template-columns: 1fr; }
.pdp-carousel { padding: 32px 16px; }
.pdp-carousel-card { flex: 0 0 160px; }
/* Inset arrows so they stay visible without overflowing the narrow container */
.pdp-carousel-arrow { width: 36px; height: 36px; }
.pdp-carousel-arrow--prev { left: 4px; }
.pdp-carousel-arrow--next { right: 4px; }
.pdp-carousel-arrow svg { width: 14px; height: 14px; }
.pdp-reviews { padding: 40px 20px; }
.pdp-reviews-grid { grid-template-columns: repeat(2, 1fr); }
.pdp-email-capture { padding: 36px 16px; }
.pdp-email-form { flex-direction: column; }
.pdp-payment-methods { gap: 6px; margin-bottom: 20px; }
.pdp-payment-badge { font-size: 11px; padding: 5px 10px; width: 100%; justify-content: center; }
/* Push page content above the fixed sticky bar (two-row layout) */
body.single-product {
padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
.pdp-sticky-bar {
padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
flex-wrap: wrap;
gap: 6px 8px;
}
.pdp-sticky-bar__info { flex: 1 1 100%; }
.pdp-sticky-bar__name { font-size: 16px; line-height: 1.2; }
.pdp-sticky-bar__price { font-size: 15px; font-weight: 600; }
.pdp-sticky-bar__sub { font-size: 12px; justify-content: space-between; width: 100%; padding-top: 5px; }
.pdp-sticky-bar__delivery { font-size: 12px; }
.pdp-sticky-bar__trust { font-size: 12px; }
.pdp-sticky-bar .pdp-qty { height: 40px; }
.pdp-sticky-bar .pdp-qty-btn { width: 30px; height: 40px; font-size: 16px; touch-action: manipulation; }
.pdp-sticky-bar .pdp-qty-input { width: 34px; height: 40px; font-size: 16px; touch-action: manipulation; }
.pdp-sticky-bar__btn { flex: 1; height: 40px; padding: 0 20px; font-size: 15px; touch-action: manipulation; }
}
@media (max-width: 480px) {
.pdp-reviews-grid { grid-template-columns: 1fr; }
}
/* ── Review form ─────────────────────────────────────────────────────────── */
.pdp-review-form {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 4px;
}
.pdp-rf-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.pdp-rf-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.pdp-rf-label {
font-size: 13px;
font-weight: 500;
color: var(--black);
letter-spacing: 0.01em;
}
.pdp-rf-req { color: #c0392b; margin-left: 2px; }
.pdp-rf-optional { font-weight: 400; color: var(--text); font-size: 12px; }
.pdp-rf-input,
.pdp-rf-textarea {
width: 100%;
padding: 11px 14px;
font-family: 'Ysabeau Office', sans-serif;
font-size: 14px;
color: var(--black);
background: #fff;
border: 1px solid var(--grey2);
border-radius: 6px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.pdp-rf-input:focus,
.pdp-rf-textarea:focus {
border-color: var(--black);
box-shadow: 0 0 0 3px rgba(86,86,86,0.1);
}
.pdp-rf-textarea { min-height: 120px; resize: vertical; }
/* Star rating */
.pdp-rf-stars {
display: flex;
flex-direction: row-reverse;
gap: 4px;
width: fit-content;
}
.pdp-rf-stars input { display: none; }
.pdp-rf-stars label {
font-size: 32px;
color: var(--grey3);
cursor: pointer;
transition: color 0.1s;
line-height: 1;
}
.pdp-rf-stars input:checked ~ label,
.pdp-rf-stars label:hover,
.pdp-rf-stars label:hover ~ label {
color: #F4A400;
}
/* Upload area */
.pdp-rf-upload {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border: 1.5px dashed var(--grey2);
border-radius: 6px;
cursor: pointer;
color: var(--text);
transition: border-color 0.15s, background 0.15s;
}
.pdp-rf-upload:hover {
border-color: var(--black);
background: #fafafa;
}
.pdp-rf-upload svg {
width: 20px;
height: 20px;
flex-shrink: 0;
stroke: var(--grey1);
}
.pdp-rf-upload span { font-size: 14px; font-weight: 500; }
.pdp-rf-upload__hint { font-size: 12px; font-weight: 400; color: var(--text); }
.pdp-rf-file-input { display: none; }
.pdp-rf-preview {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
.pdp-rf-preview__img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 4px;
border: 1px solid var(--grey3);
}
/* Submit */
.pdp-rf-submit {
align-self: flex-start;
background: var(--black);
color: #fff;
border: none;
border-radius: 6px;
padding: 13px 32px;
font-family: 'Ysabeau Office', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.18s;
letter-spacing: 0.02em;
}
.pdp-rf-submit:hover:not(:disabled) { background: #3a3a3a; }
.pdp-rf-submit:disabled { opacity: 0.6; cursor: not-allowed; }
/* Review form status messages */
.pdp-rf-message {
margin-top: 14px;
padding: 12px 16px;
border-radius: 6px;
font-size: 14px;
line-height: 1.5;
}
.pdp-rf-message--approved {
background: #f0faf4;
border: 1px solid #a8d5b5;
color: #2d6a45;
}
.pdp-rf-message--pending {
background: #fffbf0;
border: 1px solid #f0d080;
color: #7a5c00;
}
.pdp-rf-message--error {
background: #fff5f5;
border: 1px solid #f5b8b8;
color: #8b1a1a;
}
@media (max-width: 600px) {
.pdp-rf-row { grid-template-columns: 1fr; }
.pdp-rf-submit { width: 100%; text-align: center; }
}
/* ── Sold-out status notice (replaces qty + ATC on OOS simple products) ──────── */
.pdp-soldout-notice {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: 10px 20px;
margin: 0;
background: #fff5f5;
border: 1.5px solid #f5b8b8;
border-radius: var(--radius-btn);
font-family: 'Ysabeau Office', sans-serif;
font-size: 14px;
font-weight: 500;
color: #C0392B;
letter-spacing: 0.02em;
text-align: center;
}
/* ── Back-in-stock notification form ────────────────────────────────────────── */
.pdp-restock-wrap {
margin: 20px 0 4px;
padding: 20px;
background: #f9f7f4;
border-radius: var(--radius-btn);
border: 1px solid #e8e4df;
}
.pdp-restock-heading {
margin: 0 0 14px;
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
}
.pdp-restock-form { display: flex; flex-direction: column; gap: 10px; }
.pdp-restock-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.pdp-restock-input {
width: 100%;
height: 44px;
padding: 0 14px;
border: 1.5px solid #ddd8d2;
border-radius: var(--radius-btn);
font-family: 'Ysabeau Office', sans-serif;
font-size: 14px;
color: var(--text);
background: #fff;
box-sizing: border-box;
transition: border-color 0.15s;
}
.pdp-restock-input:focus {
outline: none;
border-color: var(--black);
}
.pdp-restock-input::placeholder { color: var(--text); }
.pdp-restock-submit {
display: block;
width: 100%;
height: 44px;
background: var(--black);
color: #ffffff;
border: none;
border-radius: var(--radius-btn);
font-family: 'Ysabeau Office', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.18s;
}
.pdp-restock-submit:hover:not(:disabled) { background: #3a3a3a; }
.pdp-restock-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.pdp-restock-msg {
margin-top: 10px;
padding: 10px 14px;
border-radius: var(--radius-btn);
font-size: 13px;
line-height: 1.5;
}
.pdp-restock-msg--success {
background: #f0faf4;
border: 1px solid #a8d5b5;
color: #2d6a45;
}
.pdp-restock-msg--error {
background: #fff5f5;
border: 1px solid #f5b8b8;
color: #8b1a1a;
}
@media (max-width: 600px) {
.pdp-restock-fields { grid-template-columns: 1fr; }
.pdp-restock-wrap { padding: 16px; }
}
/* ── Review card photos ────────────────────────────────────────────────────── */
.pdp-review-card__images {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.pdp-review-card__images a img {
width: 110px;
height: 110px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #eee;
display: block;
cursor: zoom-in;
transition: opacity 0.15s;
}
.pdp-review-card__images a:hover img { opacity: 0.85; }
/* ── Review photo lightbox ─────────────────────────────────────────────────── */
#vlt-lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
z-index: 99999;
align-items: center;
justify-content: center;
}
#vlt-lightbox.is-open { display: flex; }
.vlt-lb-inner {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 0 12px;
}
.vlt-lb-img {
max-width: min(88vw, 900px);
max-height: 88vh;
width: auto;
height: auto;
border-radius: 6px;
display: block;
object-fit: contain;
}
.vlt-lb-close {
position: absolute;
top: -44px;
right: 0;
background: none;
border: none;
color: #fff;
font-size: 36px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
opacity: 0.8;
}
.vlt-lb-close:hover { opacity: 1; }
.vlt-lb-arrow {
background: rgba(255,255,255,0.12);
border: none;
color: #fff;
font-size: 40px;
line-height: 1;
cursor: pointer;
padding: 6px 14px;
border-radius: 4px;
flex-shrink: 0;
transition: background 0.15s;
}
.vlt-lb-arrow:hover { background: rgba(255,255,255,0.28); }
.vlt-lb-counter {
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.65);
font-size: 13px;
white-space: nowrap;
}
/* ── WooCommerce notices — PDP ───────────────────────────────────────────────── */
/*
* Override WooCommerce's default full-width banner with clean brand-aligned cards.
* Selectors cover both ul and div variants (WC renders both depending on version).
* Three semantic variants: error, message (success), info.
*/
/* Wrapper — reset any WC default border/background on the container itself */
.single-product .woocommerce-notices-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 16px 40px 0;
border: none !important;
background: none !important;
box-shadow: none !important;
}
.single-product .woocommerce-notices-wrapper:empty {
padding: 0;
}
/* ── Notice cards: ul AND div variants ─── */
.single-product .woocommerce-notices-wrapper ul.woocommerce-error,
.single-product .woocommerce-notices-wrapper div.woocommerce-error,
.single-product .woocommerce-notices-wrapper ul.woocommerce-message,
.single-product .woocommerce-notices-wrapper div.woocommerce-message,
.single-product .woocommerce-notices-wrapper ul.woocommerce-info,
.single-product .woocommerce-notices-wrapper div.woocommerce-info {
display: block !important;
list-style: none !important;
margin: 0 0 10px !important;
padding: 14px 44px 14px 46px !important; /* left: icon | right: dismiss */
border-radius: 6px !important;
font-family: 'Ysabeau Office', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
position: relative !important;
background-image: none !important;
width: auto !important;
float: none !important;
clear: both !important;
}
/* Override WC's default top-border-only style and any inline WC borders */
.single-product .woocommerce-notices-wrapper ul.woocommerce-error::after,
.single-product .woocommerce-notices-wrapper div.woocommerce-error::after,
.single-product .woocommerce-notices-wrapper ul.woocommerce-message::after,
.single-product .woocommerce-notices-wrapper div.woocommerce-message::after,
.single-product .woocommerce-notices-wrapper ul.woocommerce-info::after,
.single-product .woocommerce-notices-wrapper div.woocommerce-info::after {
content: none !important;
display: none !important;
}
/* Icon via ::before — replace WC's glyph with an SVG background */
.single-product .woocommerce-notices-wrapper ul.woocommerce-error::before,
.single-product .woocommerce-notices-wrapper div.woocommerce-error::before,
.single-product .woocommerce-notices-wrapper ul.woocommerce-message::before,
.single-product .woocommerce-notices-wrapper div.woocommerce-message::before,
.single-product .woocommerce-notices-wrapper ul.woocommerce-info::before,
.single-product .woocommerce-notices-wrapper div.woocommerce-info::before {
content: '' !important;
display: block !important;
position: absolute !important;
left: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
font-size: 0 !important;
font-family: inherit !important;
}
/* ── Error ─── */
.single-product .woocommerce-notices-wrapper ul.woocommerce-error,
.single-product .woocommerce-notices-wrapper div.woocommerce-error {
background-color: #FEF6F6 !important;
border: 1px solid #F5C2C2 !important;
border-left: 4px solid #C0392B !important;
border-top: 1px solid #F5C2C2 !important;
color: #7B1F1F !important;
}
.single-product .woocommerce-notices-wrapper ul.woocommerce-error::before,
.single-product .woocommerce-notices-wrapper div.woocommerce-error::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
}
/* ── Success / message ─── */
.single-product .woocommerce-notices-wrapper ul.woocommerce-message,
.single-product .woocommerce-notices-wrapper div.woocommerce-message {
background-color: #F0F9F4 !important;
border: 1px solid #86C99A !important;
border-left: 4px solid #1A8A45 !important;
border-top: 1px solid #86C99A !important;
color: #0F4023 !important;
}
.single-product .woocommerce-notices-wrapper ul.woocommerce-message::before,
.single-product .woocommerce-notices-wrapper div.woocommerce-message::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A8A45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") !important;
}
/* ── Info ─── */
.single-product .woocommerce-notices-wrapper ul.woocommerce-info,
.single-product .woocommerce-notices-wrapper div.woocommerce-info {
background-color: #F5F7FA !important;
border: 1px solid #B0BDCC !important;
border-left: 4px solid #3D6B8E !important;
border-top: 1px solid #B0BDCC !important;
color: #1E3A4F !important;
}
.single-product .woocommerce-notices-wrapper ul.woocommerce-info::before,
.single-product .woocommerce-notices-wrapper div.woocommerce-info::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6B8E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
}
/* List items / inner content — strip bullets and WC padding */
.single-product .woocommerce-notices-wrapper li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: none !important;
}
.single-product .woocommerce-notices-wrapper li + li {
margin-top: 4px !important;
}
/* "View cart" / action links */
.single-product .woocommerce-notices-wrapper a:not(.vlt-notice-dismiss) {
color: inherit !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
text-decoration-thickness: 1px !important;
background: none !important;
border: none !important;
padding: 0 !important;
display: inline !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.single-product .woocommerce-notices-wrapper a:not(.vlt-notice-dismiss):hover {
opacity: 0.7 !important;
}
/* Dismiss button (injected by JS) */
.vlt-notice-dismiss {
position: absolute !important;
top: 50% !important;
right: 14px !important;
transform: translateY(-50%) !important;
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 4px !important;
margin: 0 !important;
color: inherit !important;
opacity: 0.4 !important;
line-height: 1 !important;
border-radius: 3px !important;
transition: opacity 0.15s !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vlt-notice-dismiss:hover { opacity: 0.85 !important; }
/* Mobile */
@media (max-width: 900px) {
.single-product .woocommerce-notices-wrapper {
padding: 12px 20px 0;
}
}
@media (max-width: 600px) {
.single-product .woocommerce-notices-wrapper {
padding: 10px 16px 0;
}
.single-product .woocommerce-notices-wrapper ul.woocommerce-error,
.single-product .woocommerce-notices-wrapper div.woocommerce-error,
.single-product .woocommerce-notices-wrapper ul.woocommerce-message,
.single-product .woocommerce-notices-wrapper div.woocommerce-message,
.single-product .woocommerce-notices-wrapper ul.woocommerce-info,
.single-product .woocommerce-notices-wrapper div.woocommerce-info {
padding: 12px 36px 12px 42px !important;
font-size: 13px !important;
}
}
/* ── Lightbox ────────────────────────────────────────────────────────────────── */
.pdp-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}
.pdp-lightbox[hidden] { display: none; }
.pdp-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 18, 18, 0.9);
cursor: pointer;
}
/* Outer column: [row with card + arrows] + [thumbs] */
.pdp-lightbox__layout {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 40px 20px 32px;
box-sizing: border-box;
max-height: 100dvh;
width: 100%;
pointer-events: none; /* let clicks through to backdrop */
}
.pdp-lightbox__layout > * { pointer-events: auto; }
/* Middle row: [prev] [card] [next] */
.pdp-lightbox__row {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
min-height: 0;
width: 100%;
justify-content: center;
}
/* Spacer so card stays centred when there's only 1 image */
.pdp-lightbox__arrow-spacer { flex-shrink: 0; width: 48px; }
/* White rounded image card */
.pdp-lightbox__card {
position: relative;
background: #FAFAF9;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
max-width: min(860px, calc(100vw - 120px));
max-height: calc(100dvh - 120px);
display: flex;
align-items: center;
justify-content: center;
}
/* × close button — dark circle inside card, top-right */
.pdp-lightbox__close {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(34, 31, 32, 0.65);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background 0.15s;
z-index: 3;
padding: 0;
}
.pdp-lightbox__close:hover { background: rgba(34, 31, 32, 0.9); }
.pdp-lightbox__close svg { width: 16px; height: 16px; }
.pdp-lightbox__stage {
display: flex;
align-items: center;
justify-content: center;
}
.pdp-lightbox__img {
max-width: min(860px, calc(100vw - 120px));
max-height: calc(100dvh - 120px);
object-fit: contain;
display: block;
transition: opacity 0.18s ease;
user-select: none;
}
.pdp-lightbox__img.is-loading { opacity: 0; }
/* Arrows — float outside the card in the dark overlay */
.pdp-lightbox__arrow {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border: 1.5px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background 0.15s, transform 0.12s;
padding: 0;
}
.pdp-lightbox__arrow:hover { background: rgba(255, 255, 255, 0.28); transform: scale(1.08); }
.pdp-lightbox__arrow svg { width: 20px; height: 20px; stroke: #fff; }
/* Thumbnail strip */
.pdp-lightbox__thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
max-width: 100%;
flex-shrink: 0;
}
.pdp-lightbox__thumbs::-webkit-scrollbar { display: none; }
.pdp-lightbox__thumb {
flex: 0 0 58px;
height: 58px;
border: 2px solid transparent;
border-radius: 6px;
overflow: hidden;
background: none;
padding: 0;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.15s, border-color 0.15s;
}
.pdp-lightbox__thumb.is-active,
.pdp-lightbox__thumb:hover { opacity: 1; border-color: rgba(255, 255, 255, 0.85); }
.pdp-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 680px) {
.pdp-lightbox__layout { padding: 32px 12px 20px; gap: 12px; }
.pdp-lightbox__row { gap: 10px; }
.pdp-lightbox__card {
max-width: calc(100vw - 40px);
max-height: calc(100dvh - 100px);
}
.pdp-lightbox__img {
max-width: calc(100vw - 40px);
max-height: calc(100dvh - 100px);
}
.pdp-lightbox__arrow { width: 38px; height: 38px; }
.pdp-lightbox__arrow svg { width: 16px; height: 16px; }
}
/* ── Variant-selection attention pulse ──────────────────────────────────────── */
@keyframes vlt-attention-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(86, 86, 86, 0); }
30% { box-shadow: 0 0 0 6px rgba(86, 86, 86, 0.18); }
60% { box-shadow: 0 0 0 3px rgba(86, 86, 86, 0.08); }
}
.vlt-needs-attention {
animation: vlt-attention-pulse 1.8s ease forwards;
border-radius: var(--radius);
}
/* ── Region restriction notice (replaces Add to Cart on restricted products) ─ */
.restriction-notice {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 16px 18px;
background: #fdf3e3;
border: 1px solid #f0d49a;
border-radius: 6px;
color: #5c3d0e;
font-size: 14px;
line-height: 1.55;
margin: 0 0 20px;
}
.restriction-notice svg {
flex-shrink: 0;
margin-top: 1px;
color: #7a5218;
}
/* ── WooCommerce screen-reader-text — visually hidden, accessible ─────────── */
/* WC price HTML includes a with plain-text */
/* price descriptions for assistive tech. This hides it visually without */
/* removing it from the accessibility tree. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* PDP buttons share a row with the qty stepper on phones — 16px labels */
@media (max-width: 600px) {
.pdp-btn-atc,
.pdp-bundle-atc,
.pdp-og-atc,
.pdp-composite-wrap .single_add_to_cart_button,
.pdp-composite-wrap .composite_add_to_cart_button { font-size: var(--btn-font-size-compact); padding: 0 16px; }
}