/* =========================================================================
PDP (single product) — Fruit3 child theme. Matches the Spill Station design.
Loopless Thai font (Anuphan) paired with Roboto, like the shop pages.
========================================================================= */
/* PDP uses the shared SITE font variable (defaults to inherit = theme font).
Override site-wide via :root { --wccm-site-font: … } — same variable the
shop/filter uses, kept separate from the carousel font. */
:root { --wccm-site-font: inherit; }
.wccm-pdp,
.wccm-pdp * { font-family: var(--wccm-site-font); }
.wccm-pdp-inner {
max-width: 1200px;
margin: 0 auto;
padding: 24px 24px 60px;
box-sizing: border-box;
}
/* Breadcrumb */
.wccm-pdp-breadcrumb {
font-size: 0.9rem;
color: #637381;
margin-bottom: 24px;
}
.wccm-pdp-breadcrumb a { color: #637381; text-decoration: none; }
.wccm-pdp-breadcrumb a:hover { color: #1a1a2e; }
/* ── Two-column top ──────────────────────────────────────────────────── */
.wccm-pdp-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: start;
}
/* Gallery */
.wccm-pdp-main-image {
background: #fff;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
}
.wccm-pdp-main-image img,
.wccm-pdp-noimg img { width: 100%; height: 100%; object-fit: contain; }
.wccm-pdp-thumbs {
display: flex;
gap: 12px;
margin-top: 16px;
flex-wrap: wrap;
}
.wccm-pdp-thumb {
width: 96px; height: 96px;
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
background: #fff;
cursor: pointer;
transition: border-color .15s;
}
.wccm-pdp-thumb.is-active { border-color: #1a1a2e; }
.wccm-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Summary */
.wccm-pdp-title {
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 700;
line-height: 1.3;
color: #1a1a2e;
margin: 0 0 20px;
text-align: left; /* was inheriting center from the theme */
}
.wccm-pdp-features { margin: 0 0 28px; }
.wccm-pdp-features ul { margin: 0; padding: 0; list-style: none; }
.wccm-pdp-features li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
color: #2b2b3a;
line-height: 1.5;
}
.wccm-pdp-features li::before {
content: "•";
position: absolute;
left: 4px;
color: #637381;
}
/* Quantity + actions */
.wccm-pdp-actions { margin-bottom: 24px; }
.wccm-pdp-qty { margin-bottom: 16px; }
.wccm-pdp-qty-label {
display: block;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 8px;
}
.wccm-qty-box {
display: inline-flex;
align-items: center;
border: 1px solid #d7dbe4;
border-radius: 8px;
overflow: hidden;
height: 36px; /* same on desktop and mobile */
}
.wccm-qty-box button {
width: 44px; height: 100%;
border: 0;
background: #f8f9fb;
font-size: 20px;
color: #1a1a2e;
cursor: pointer;
line-height: 1;
}
.wccm-qty-box button:hover { background: #eef0f4; }
.wccm-qty-input {
width: 56px; height: 100%;
border: 0;
border-left: 1px solid #d7dbe4;
border-right: 1px solid #d7dbe4;
text-align: center;
font-weight: 600;
font-size: 15px;
-moz-appearance: textfield;
}
.wccm-qty-input::-webkit-outer-spin-button,
.wccm-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Both buttons the SAME height & width. Grid gives two exactly-equal columns
regardless of each button's inner markup (flex basis was uneven because the
ELEX button is a wrapped DIV while Contact is a bare ). */
.wccm-pdp-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.wccm-pdp-buttons > * {
min-width: 0;
width: 100%;
}
/* The ELEX add-to-quote button wraps its markup — make every wrapper fill AND
center its content so both buttons look identical (the ELEX wrapper otherwise
left-aligns the button, so its icon+label sat left while Contact was centered). */
.wccm-pdp-buttons .elex-rqst-quote-front-wrap,
.wccm-pdp-buttons .add_view_quote_btn,
.wccm-pdp-buttons .w-100,
/* After a product is added, ELEX re-renders the control as
.w-100 > >