/* G7 Product Page — extends g7.css + brand-tokens.css.
Loaded on single products (after g7-woo). Brands the prototype .product layout.
Native Woo subsystems are restyled, not reimplemented: gallery (zoom/lightbox/
slider), tabs, related (reuses the .card override). Bespoke to the prototype:
summary, badges, the .tiers volume selector, trust bar, Frequently Bought
Together. The cart form (.product__buy) is Woo's real form; the quantity stepper
is hidden and driven by the tier selector via g7-product.js. */
/* ── Product 2-col layout ── */
.g7-product,
.woocommerce div.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-7); align-items: start; margin-bottom: var(--space-6); }
.woocommerce div.product > .onsale { top: 0; }
/* Gallery — native Woo gallery, branded to a full-width 9/16 cover hero. Sticky column.
Every product image is a 2048px square with the vial centered (cols 32-68%) and
filling the frame height (rows 14-100%), so a portrait tile reads large and the
centered vial keeps its framing. 9/16 was chosen over 4/5 to close the dead band
of white space that opened beside the image when the (taller) summary column
overran the (shorter) 4/5 gallery: at 9/16 the gallery grows to match the summary
and the residual band drops to ~one row. object-fit:cover shows the full source
height and crops only the near-white side margins, so nothing of the vial is lost
(verified by pixel scan across the catalog).
Sizing strategy (bulletproof): the 9/16 ratio lives on the TILE (.__image, a div,
which honours aspect-ratio reliably), NOT on the ![]()
. Browsers can ignore an
explicit aspect-ratio on a replaced element that carries width/height attrs + an
intrinsic square ratio, which left the square image letterboxed inside the taller
portrait tile and showed the card colour as a coloured band. So the tile sets the
box; the and the ![]()
are position:absolute/inset:0 to fill it, and
object-fit:cover crops the square to fill. Card background is white (not the mint
surface) so no coloured padding can ever show at an edge. */
.product__gallery { position: sticky; top: var(--space-5); }
.woocommerce div.product .product__gallery .images,
.woocommerce div.product .product__gallery .woocommerce-product-gallery {
width: 100%;
background: var(--white); border: 1px solid var(--color-line);
border-radius: var(--card-radius); padding: 0; margin-bottom: 0;
overflow: hidden; /* image cover-crops to the rounded edge */
}
.woocommerce div.product .product__gallery .woocommerce-product-gallery__wrapper { width: 100%; }
.woocommerce div.product .product__gallery .woocommerce-product-gallery__image { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; }
.woocommerce div.product .product__gallery .woocommerce-product-gallery__image > a { display: block; position: absolute; inset: 0; }
.woocommerce div.product .product__gallery .woocommerce-product-gallery__image img {
position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
object-fit: cover; background: transparent; border-radius: 0;
}
.woocommerce div.product .product__gallery .woocommerce-product-gallery__trigger { background: var(--white); border-radius: var(--radius-pill); }
/* ── Summary ── */
.woocommerce div.product .product__summary { padding-top: 0; }
.product__cat { display: inline-block; font-size: var(--text-label-size); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-accent-deep); background: var(--color-accent-soft); padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
.product__title { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-tracking); margin: 0 0 var(--space-3); }
.product__pricerow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.product__price { font-size: 28px; font-weight: 700; color: var(--color-text); margin: 0; }
.product__price .cur { font-size: var(--text-label-size); color: var(--color-text-soft); font-weight: 600; margin-right: 4px; vertical-align: 3px; }
.product__stock-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.stock-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--color-accent-deep); background: var(--color-accent-soft); padding: 5px 12px; border-radius: var(--radius-pill); }
.stock-pill--out { color: var(--color-text-soft); }
.stock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px rgba(63, 184, 175, 0.25); }
body.single-product .product-stage .g7-stock-notify { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border: 1px solid rgba(99,228,203,.45); border-radius: 8px; box-shadow: 0 2px 12px rgba(99,228,203,.12); background: rgba(99,228,203,.14); color: #4FE3C9; font: 700 11px/1 var(--studio-mono, monospace); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
body.single-product .product-stage .g7-stock-notify[hidden] { display: none !important; }
body.single-product .product-stage .g7-stock-notify:hover { border-color: rgba(99,228,203,.7); background: rgba(99,228,203,.28); color: #f9fffd; text-decoration: none; }
body.single-product .product-stage .g7-stock-notify:focus-visible { border-color: rgba(99,228,203,.7); outline: none; background: rgba(99,228,203,.28); color: #f9fffd; text-decoration: none; }
body.single-product .product-stage .g7-stock-notify:disabled { cursor: default; opacity: .55; }
.product__blurb { color: var(--color-text-soft); font-size: var(--text-lead-size); line-height: var(--text-lead-line); margin: 0 0 var(--space-5); }
.product__badges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.pbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 6px 12px; }
.pbadge svg { color: var(--color-accent-deep); flex: none; }
/* ── Buy box: real Woo cart form, branded. Quantity hidden; tiers drive it. ── */
.product__buy { margin-bottom: var(--space-5); }
.woocommerce div.product .product__buy form.cart { display: block; margin: 0; }
/* Quantity stepper replaces Woo's native qty input */
.product__buy--stepper .quantity { display: none !important; }
/* Strength selection for variable products. Uses WooCommerce's real variation
form, styled as a concise selector before the quantity tiers. */
.product-stage .variations_form .variations { width: 100%; margin: 0 0 18px; border: 0; }
.product-stage .variations_form .variations tr { display: grid; gap: 8px; }
.product-stage .variations_form .variations th,
.product-stage .variations_form .variations td { display: block; padding: 0; text-align: left; }
.product-stage .variations_form .variations label { font: 700 11px var(--studio-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: rgba(249,255,253,.68); }
.product-stage .variations_form select { width: 100%; min-height: 50px; padding: 0 46px 0 16px; color: #f9fffd; background: rgba(255,255,255,.06); border: 1px solid rgba(99,228,203,.35); border-radius: 7px; font: 700 15px var(--studio-mono, monospace); }
.product-stage .variations_form .reset_variations { display: inline-block; margin-top: 10px; color: var(--mint); font: 700 11px var(--studio-mono, monospace); letter-spacing: .08em; text-transform: uppercase; }
.product-stage .variations_form .woocommerce-variation-description,
.product-stage .variations_form .woocommerce-variation-price { display: none; }
/* Strength chips live beside the pricing decision, not buried in the cart form. */
.strength-picker { border: 0; padding: 0; margin: 18px 0 20px; }
.strength-picker legend { padding: 0; margin-bottom: 10px; font: 700 11px var(--studio-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: rgba(249,255,253,.68); }
.strength-picker__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.strength-chip { min-height: 42px; padding: 0 15px; color: rgba(249,255,253,.82); background: rgba(255,255,255,.035); border: 1px solid rgba(249,255,253,.25); border-radius: 5px; font: 700 13px var(--studio-mono, monospace); letter-spacing: .04em; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; }
.strength-chip:hover { border-color: rgba(99,228,203,.85); color: #f9fffd; }
.strength-chip:focus-visible { outline: 3px solid rgba(99,228,203,.38); outline-offset: 3px; }
.strength-chip.is-selected { color: #f9fffd; background: rgba(99,228,203,.08); border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint); }
.strength-chip.is-out-of-stock:not(.is-selected) { position: relative; overflow: hidden; color: rgba(200,211,208,.5); background: rgba(164,176,172,.055); border-color: rgba(190,202,198,.22); }
.strength-chip.is-out-of-stock:not(.is-selected)::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient(to bottom right, transparent calc(50% - .65px), rgba(190,202,198,.42) calc(50% - .35px), rgba(190,202,198,.42) calc(50% + .35px), transparent calc(50% + .65px)); pointer-events: none; }
.strength-chip.is-out-of-stock:not(.is-selected):hover { color: rgba(216,226,223,.68); background: rgba(164,176,172,.085); border-color: rgba(190,202,198,.38); }
.strength-chip.is-out-of-stock:not(.is-selected):hover::after { background: linear-gradient(to bottom right, transparent calc(50% - .65px), rgba(210,220,217,.54) calc(50% - .35px), rgba(210,220,217,.54) calc(50% + .35px), transparent calc(50% + .65px)); }
.strength-chip.is-out-of-stock .strength-chip__label { position: relative; z-index: 2; text-decoration: none; }
.strength-chip.is-out-of-stock.is-selected { color: #fff; background: rgba(105,31,18,.28); border-color: #ffb79b; box-shadow: 0 0 0 1px #ffb79b; }
.strength-chip.is-out-of-stock.is-selected::after { content: none; }
.strength-chip.is-out-of-stock:focus-visible { outline: 3px solid rgba(255,183,155,.52) !important; outline-offset: 3px; }
/* The native control remains the source of truth for WooCommerce, but the
chip group above is its intentional visible control. */
.product-stage .variations_form .variations { display: none !important; }
.product__buy .stock { display: none; } /* we show the stock-pill above */
.woocommerce div.product .product__buy .single_add_to_cart_button {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; height: 52px; font-size: 17px; font-weight: var(--text-label-weight);
letter-spacing: var(--text-label-tracking); text-transform: uppercase;
font-family: var(--font-body); border-radius: var(--button-radius); border: 1px solid transparent;
background: var(--button-bg); color: var(--button-color); cursor: pointer;
transition: background .15s ease, color .15s ease;
float: none; margin: 0; padding: 0 var(--space-5);
}
.woocommerce div.product .product__buy .single_add_to_cart_button:hover { background: var(--button-bg-hover); color: var(--button-color); }
.product__buy .btn__price { font-weight: 700; }
/* ── Quantity stepper + bulk discount ── */
.tiers { border: none; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.tiers__legend { font-size: var(--text-label-size); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-text-soft); margin-bottom: var(--space-3); padding: 0; }
.qty-stepper { display: flex; align-items: center; gap: 0; width: fit-content; border: 1.5px solid var(--color-line); border-radius: var(--radius-input); overflow: hidden; background: var(--color-surface); }
.qty-stepper__btn { appearance: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: transparent; color: var(--color-text); font-size: 22px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; user-select: none; }
.qty-stepper__btn:hover { background: var(--color-accent-soft); color: var(--color-accent-deep); }
.qty-stepper__btn:active { background: var(--color-accent); color: var(--white); }
.qty-stepper__btn--minus { border-right: 1.5px solid var(--color-line); }
.qty-stepper__btn--plus { border-left: 1.5px solid var(--color-line); }
.qty-stepper__input { width: 64px; height: 48px; border: 0; background: var(--white); color: var(--color-text); font-size: 18px; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper__input:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* Wholesale tier cards (still used for wholesale customers) */
.tier { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 14px 16px; margin-bottom: var(--space-2); background: var(--color-surface); border: 1.5px solid var(--color-line); border-radius: var(--radius-input); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.tier:last-child { margin-bottom: 0; }
.tier input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tier__radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--color-line); background: var(--white); position: relative; transition: border-color .15s ease; }
.tier__radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--color-accent); transform: scale(0); transition: transform .15s ease; }
.tier:hover { border-color: var(--color-accent); }
.tier.is-selected { border-color: var(--color-accent); background: var(--white); box-shadow: 0 0 0 1px var(--color-accent) inset; }
.tier.is-selected .tier__radio { border-color: var(--color-accent); }
.tier.is-selected .tier__radio::after { transform: scale(1); }
.tier__main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tier__units { font-size: 16px; font-weight: 700; color: var(--color-text); }
.tier__sub { font-size: 13px; color: var(--color-text-soft); }
.tier__off { display: inline-block; width: fit-content; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-accent-deep); background: var(--color-accent-soft); padding: 2px 8px; border-radius: var(--radius-pill); }
.tier__price { text-align: right; flex: none; }
.tier__per { display: block; font-size: 16px; font-weight: 700; color: var(--color-text); }
.tier__perlabel { font-size: 12px; color: var(--color-text-soft); }
.tier__value { position: absolute; top: -9px; right: 14px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: var(--mint-700); padding: 3px 10px; border-radius: var(--radius-pill); }
.product__save { font-size: 14px; font-weight: 600; color: var(--color-accent-deep); margin: 0 0 var(--space-4); min-height: 1.2em; }
.product__save strong { font-weight: 700; }
/* ── Meta + notice ── */
.product__meta { font-size: 14px; color: var(--color-text-soft); display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.product__meta strong { color: var(--color-text); font-weight: 600; }
.product__notice { background: var(--color-accent-soft); border-left: 3px solid var(--color-accent); border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); font-size: 14px; color: var(--mint-700); margin-top: var(--space-4); line-height: 1.5; }
/* ── Product footer: meta + compliance notice, full-width under the 2-col grid.
Relocated from the summary column so the notice spans the page (more prominent)
and the summary no longer overruns the portrait gallery image. ── */
.product__foot {
display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-6);
align-items: start; margin-top: var(--space-6); padding-top: var(--space-6);
border-top: 1px solid var(--color-line);
}
.product__foot .product__meta { margin-bottom: 0; }
.product__foot .product__notice { margin-top: 0; }
/* ── Trust bar ── */
.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-7) 0; }
.trust-item { text-align: center; padding: var(--space-4); background: var(--color-surface); border-radius: var(--card-radius); border: 1px solid var(--color-line); }
.trust-item svg { color: var(--color-accent-deep); margin-bottom: var(--space-2); }
.trust-item h4 { font-size: 15px; font-weight: 600; margin: 0; color: var(--color-text); }
/* ── Tabs (native, restyled) ── */
.product-tabs { margin: var(--space-7) 0; }
.woocommerce div.product .product-tabs ul.tabs.wc-tabs {
padding: 0; margin: 0 0 var(--space-5); border-bottom: 1px solid var(--color-line);
display: flex; flex-wrap: wrap; gap: var(--space-5);
}
.woocommerce div.product .product-tabs ul.tabs.wc-tabs::before { border: none; }
.woocommerce div.product .product-tabs ul.tabs li { border: none; background: transparent; margin: 0; padding: 0; display: block; }
.woocommerce div.product .product-tabs ul.tabs li.active { background: transparent; border-bottom: 2px solid var(--color-accent); }
.woocommerce div.product .product-tabs ul.tabs li a,
.woocommerce div.product .product-tabs ul.tabs li.active a {
color: var(--color-text-soft); font-size: 15px; font-weight: 600;
padding: var(--space-3) 0; display: block; text-shadow: none; text-decoration: none;
}
.woocommerce div.product .product-tabs ul.tabs li.active a { color: var(--color-accent-deep); }
.woocommerce div.product .product-tabs ul.tabs li a:hover { color: var(--color-accent-deep); }
.woocommerce div.product .product-tabs .woocommerce-Tabs-panel,
.woocommerce div.product .product-tabs .panel {
max-width: var(--container-read); border: none; padding: 0; margin: 0 0 var(--space-5); box-shadow: none; border-radius: 0;
}
.woocommerce div.product .product-tabs .panel h2 { font-size: var(--text-h3-size); margin-top: 0; }
.woocommerce div.product .product-tabs .panel p { color: var(--color-text-soft); line-height: 1.6; }
/* Specifications & COA tab → specs-table look */
.woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes.shop_attributes,
.woocommerce-Tabs-panel--additional_information table.shop_attributes {
width: 100%; border-collapse: collapse; border: 1px solid var(--color-line); border-radius: var(--radius-input); overflow: hidden;
}
.woocommerce-Tabs-panel--additional_information table th,
.woocommerce-Tabs-panel--additional_information table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); font-size: 15px; }
.woocommerce-Tabs-panel--additional_information table th { width: 220px; color: var(--color-text-soft); font-weight: 600; background: var(--color-surface); }
.woocommerce-Tabs-panel--additional_information table td { color: var(--color-text); }
.woocommerce-Tabs-panel--additional_information table tr:last-child th,
.woocommerce-Tabs-panel--additional_information table tr:last-child td { border-bottom: none; }
/* ── Related ── */
.woocommerce .related.products { margin: var(--space-7) 0; }
.woocommerce .related.products > h2 { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-tracking); margin-bottom: var(--space-5); }
/* ── Frequently bought together ── */
.fbt { margin: var(--space-7) 0; }
.fbt__head { margin-bottom: var(--space-5); }
.fbt__head .eyebrow { margin: 0 0 var(--space-2); }
.fbt__head h2 { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-tracking); margin: 0; }
.fbt__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--card-radius); padding: var(--space-6); }
.fbt__visual { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.fbt__shot { margin: 0; text-align: center; flex: 1; min-width: 84px; }
.fbt__shot img { width: 100%; max-width: 104px; height: auto; display: block; margin: 0 auto var(--space-2); border-radius: var(--radius-input); transition: opacity .15s ease, filter .15s ease; }
.fbt__shot figcaption { font-size: 13px; color: var(--color-text-soft); min-height: 3em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.fbt__shot.is-dimmed img { opacity: 0.35; filter: grayscale(1); }
.fbt__shot.is-dimmed figcaption { text-decoration: line-through; opacity: 0.55; }
.fbt__plus { font-size: 22px; font-weight: 700; color: var(--color-accent-deep); flex: none; }
.fbt__panel { display: flex; flex-direction: column; gap: var(--space-4); }
.fbt__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.fbt__item { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; position: relative; }
.fbt__item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fbt__check { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid var(--color-line); background: var(--white); position: relative; transition: border-color .15s ease, background .15s ease; }
.fbt__check::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .15s ease; }
.fbt__item input:checked ~ .fbt__check { background: var(--color-accent); border-color: var(--color-accent); }
.fbt__item input:checked ~ .fbt__check::after { transform: rotate(45deg) scale(1); }
.fbt__item:hover .fbt__check { border-color: var(--color-accent); }
.fbt__itemname { flex: 1; font-size: 15px; color: var(--color-text); }
.fbt__itemprice { font-size: 15px; font-weight: 700; color: var(--color-text); }
.fbt__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.fbt__totallabel { font-size: 14px; color: var(--color-text-soft); }
.fbt__totalprice { font-size: 22px; font-weight: 700; color: var(--color-text); }
.fbt__totalprice .cur { font-size: 12px; color: var(--color-text-soft); font-weight: 600; margin-right: 4px; vertical-align: 2px; }
.fbt__panel .btn--buy { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; font-size: 17px; }
/* ── Responsive ── */
@media (max-width: 860px) {
.g7-product,
.woocommerce div.product { grid-template-columns: 1fr; gap: var(--space-5); }
.product__gallery { position: static; }
.product__foot { grid-template-columns: 1fr; gap: var(--space-4); }
.trust-bar { grid-template-columns: repeat(2, 1fr); }
.fbt__body { grid-template-columns: 1fr; }
.fbt__visual { justify-content: center; }
.tier--best .tier__value { right: 10px; }
}
/* ── G7 editorial product experience ─────────────────────────────────────── */
body.single-product {
background: #eef5f2;
}
body.single-product #content,
body.single-product #content > .col-full,
body.single-product #primary,
body.single-product .content-area,
body.single-product .site-main {
width: 100%;
max-width: none;
margin: 0;
padding: 0 !important;
float: none;
}
body.single-product .woocommerce-breadcrumb { display: none; }
body.single-product .woocommerce-notices-wrapper:not(:empty) {
width: min(calc(100% - 48px), 1460px);
margin: 24px auto;
}
.product-stage {
position: relative;
isolation: isolate;
padding: 28px 0 clamp(86px, 9vw, 150px);
color: #f9fffd;
background:
radial-gradient(circle at 20% 30%, rgba(36, 128, 109, .28), transparent 30%),
radial-gradient(circle at 85% 18%, rgba(17, 94, 79, .42), transparent 34%),
#071915;
overflow: hidden;
}
.product-stage::before {
content: "";
position: absolute;
z-index: -2;
inset: 0;
background-image:
linear-gradient(rgba(99, 228, 203, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 228, 203, .045) 1px, transparent 1px);
background-size: 110px 110px;
mask-image: linear-gradient(90deg, transparent, #000 28%, #000 90%);
}
.product-stage::after {
content: "G7";
position: absolute;
z-index: -1;
right: 0;
bottom: -.28em;
font: 700 clamp(360px, 38vw, 680px)/1 var(--studio-sans, sans-serif);
letter-spacing: -.12em;
color: rgba(99, 228, 203, .035);
pointer-events: none;
}
.product-stage__inner,
.product-content-shell {
width: min(calc(100% - 48px), 1460px);
margin-inline: auto;
}
.product-stage .g7-product,
.product-stage div.product {
width: 100%;
max-width: 100%;
min-width: 0;
display: grid;
grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr);
gap: clamp(64px, 8vw, 130px);
align-items: start;
margin: 0;
}
/* Product visual */
.product-stage .product__gallery {
position: sticky;
top: 110px;
width: 100%;
max-width: 100%;
min-width: 0;
}
.product__visual-label {
display: flex;
justify-content: space-between;
/* The image begins directly under its Product / Lot traceable reference line,
so its top aligns with the information opening the detail column. */
margin-bottom: 4px;
font: 500 10px/1 var(--studio-mono, monospace);
letter-spacing: .13em;
text-transform: uppercase;
color: rgba(255, 255, 255, .48);
}
.product__visual-label span:last-child { color: #63e4cb; }
.product-stage div.product .product__gallery .images,
.product-stage div.product .product__gallery .woocommerce-product-gallery {
position: relative;
border: 1px solid rgba(99, 228, 203, .2);
border-radius: 18px;
background: rgba(239, 247, 244, .98);
box-shadow: 0 42px 100px rgba(0, 0, 0, .25);
overflow: hidden;
}
.product-stage div.product .product__gallery .images::after,
.product-stage div.product .product__gallery .woocommerce-product-gallery::after {
content: "INDEPENDENTLY TESTED · LOT DOCUMENTED";
position: absolute;
z-index: 3;
right: 22px;
bottom: 20px;
font: 500 8px/1 var(--studio-mono, monospace);
letter-spacing: .13em;
color: rgba(7, 25, 21, .44);
pointer-events: none;
}
.product-stage div.product .product__gallery .woocommerce-product-gallery__image {
aspect-ratio: 1 / 1;
}
.product-stage div.product .product__gallery .woocommerce-product-gallery__image img {
object-fit: contain;
padding: clamp(28px, 4vw, 62px);
}
.product-stage .woocommerce-product-gallery__trigger {
top: 18px !important;
right: 18px !important;
box-shadow: 0 8px 30px rgba(7, 25, 21, .12);
}
/* Product editorial summary */
.product-stage .product__summary {
width: 100%;
max-width: 720px;
min-width: 0;
padding: 0;
color: #f9fffd;
}
.product-stage .product__cat {
position: relative;
margin: 0 0 26px;
padding: 0 0 0 62px;
border-radius: 0;
background: transparent;
font: 500 10px/1 var(--studio-mono, monospace);
letter-spacing: .14em;
color: #63e4cb;
}
.product-stage .product__cat::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 42px;
height: 1px;
background: #63e4cb;
}
.product-stage .product__title,
.product-stage div.product .product_title {
max-width: 12ch;
margin: 0 0 34px;
font-size: clamp(48px, 4.6vw, 78px);
font-weight: 650;
line-height: .91;
letter-spacing: -.07em;
color: #f9fffd;
text-wrap: balance;
}
.product-stage .product__title--long {
max-width: 15ch;
font-size: clamp(42px, 3.65vw, 62px);
line-height: .94;
}
.product-stage .product__pricerow {
justify-content: flex-start;
gap: 24px;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(174, 235, 221, .18);
}
.product-stage .product__price {
font: 600 29px/1 var(--studio-mono, monospace);
color: #fff;
}
.product-stage .product__price .cur {
font-size: 10px;
color: rgba(255, 255, 255, .48);
}
.product-stage .stock-pill {
border: 1px solid rgba(99, 228, 203, .25);
border-radius: 999px;
background: rgba(99, 228, 203, .08);
font: 500 10px/1 var(--studio-mono, monospace);
letter-spacing: .06em;
color: #9df0df;
}
.product-stage .product__blurb {
max-width: 62ch;
margin: 0 0 30px;
font-size: 16px;
line-height: 1.75;
color: rgba(255, 255, 255, .64);
overflow-wrap: anywhere;
}
.product-stage .product__blurb p { margin: 0; }
.product-stage .product__badges {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin: 0 0 38px;
border: 1px solid rgba(174, 235, 221, .17);
border-radius: 10px;
overflow: hidden;
}
.product-stage .pbadge {
min-height: 48px;
padding: 12px 15px;
border: 0;
border-right: 1px solid rgba(174, 235, 221, .14);
border-bottom: 1px solid rgba(174, 235, 221, .14);
border-radius: 0;
background: rgba(255, 255, 255, .025);
font: 500 9px/1.35 var(--studio-mono, monospace);
letter-spacing: .05em;
color: rgba(255, 255, 255, .7);
}
.product-stage .pbadge:nth-child(2n) { border-right: 0; }
.product-stage .pbadge:nth-last-child(-n+2) { border-bottom: 0; }
.product-stage .pbadge svg { color: #63e4cb; }
/* Refined purchase controls */
.product-stage .tiers__legend {
margin-bottom: 15px;
font: 500 10px/1 var(--studio-mono, monospace);
letter-spacing: .12em;
color: rgba(255, 255, 255, .6);
}
.product-stage .qty-stepper {
border-color: rgba(174, 235, 221, .22);
background: rgba(255, 255, 255, .04);
}
.product-stage .qty-stepper__btn {
color: #9edfd3;
}
.product-stage .qty-stepper__btn:hover {
background: rgba(99, 228, 203, .12);
color: #63e4cb;
}
.product-stage .qty-stepper__btn:active {
background: #63e4cb;
color: #071915;
}
.product-stage .qty-stepper__btn--minus { border-color: rgba(174, 235, 221, .18); }
.product-stage .qty-stepper__btn--plus { border-color: rgba(174, 235, 221, .18); }
.product-stage .qty-stepper__input {
background: rgba(7, 25, 21, .5);
color: #f9fffd;
}
.product-stage .qty-stepper__input:focus {
outline-color: #63e4cb;
}
/* Wholesale tier cards on dark stage */
.product-stage .tier {
min-height: 74px;
margin: 0;
padding: 16px 18px;
border-width: 0 0 1px;
border-color: rgba(174, 235, 221, .14);
border-radius: 0;
background: rgba(255, 255, 255, .035);
box-shadow: none;
}
.product-stage .tiers {
border: 1px solid rgba(174, 235, 221, .18);
border-radius: 10px;
overflow: visible;
}
.product-stage .tier:first-of-type { border-radius: 9px 9px 0 0; }
.product-stage .tier:last-child { border-bottom: 0; border-radius: 0 0 9px 9px; }
.product-stage .tier:hover { border-color: rgba(99, 228, 203, .7); background: rgba(255, 255, 255, .06); }
.product-stage .tier.is-selected {
border-color: #63e4cb;
background: #e6f9f4;
box-shadow: inset 4px 0 0 #63e4cb;
}
.product-stage .tier__units,
.product-stage .tier__per { color: #f9fffd; }
.product-stage .tier__sub,
.product-stage .tier__perlabel { color: rgba(255, 255, 255, .46); }
.product-stage .tier.is-selected .tier__units,
.product-stage .tier.is-selected .tier__per { color: #071915; }
.product-stage .tier.is-selected .tier__sub,
.product-stage .tier.is-selected .tier__perlabel { color: rgba(7, 25, 21, .5); }
.product-stage .tier__radio { border-color: rgba(255, 255, 255, .35); background: transparent; }
.product-stage .tier.is-selected .tier__radio { border-color: #16816e; background: #fff; }
.product-stage .tier__off { border-radius: 3px; background: rgba(99, 228, 203, .14); color: #85ead5; }
.product-stage .tier.is-selected .tier__off { background: #c8eee6; color: #126c5c; }
.product-stage .tier__value {
top: 50%;
right: 18px;
transform: translateY(-50%);
border: 1px solid rgba(99, 228, 203, .25);
border-radius: 3px;
background: #071915;
color: #63e4cb;
}
.product-stage .product__save {
margin: 10px 0 18px;
font: 500 11px/1.4 var(--studio-mono, monospace);
color: #63e4cb;
}
.product-stage .product__save strong { color: #fff; }
.product-stage .g7-notice {
margin-bottom: 14px;
border: 1px solid rgba(174, 235, 221, .16);
border-left: 3px solid #63e4cb;
border-radius: 7px;
background: rgba(255, 255, 255, .035);
font-size: 12px;
line-height: 1.55;
color: rgba(255, 255, 255, .62);
}
.product-stage .g7-notice strong { color: #fff; }
.product-stage div.product .product__buy .single_add_to_cart_button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 64px;
border: 1px solid #63e4cb;
border-radius: 7px;
background: #63e4cb;
font: 600 12px/1 var(--studio-mono, monospace);
letter-spacing: .11em;
color: #071915;
box-shadow: 0 18px 45px rgba(3, 13, 11, .28);
}
.product-stage div.product .product__buy .single_add_to_cart_button:hover {
background: #f9fffd;
color: #071915;
box-shadow: 0 18px 55px rgba(3, 13, 11, .38);
}
/* Product file and supporting content */
.product-content-shell {
padding: clamp(72px, 8vw, 130px) 0 clamp(90px, 10vw, 160px);
}
.product-content-shell .product__foot {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
gap: 0;
margin: 0 0 70px;
padding: 0;
border: 1px solid rgba(7, 25, 21, .12);
border-radius: 16px;
background: #fff;
overflow: hidden;
box-shadow: 0 24px 70px rgba(7, 25, 21, .07);
}
.product-content-shell .product__record { padding: clamp(30px, 4vw, 54px); }
.product-content-shell .product__record-label,
.product-content-shell .product__notice-label {
display: block;
margin-bottom: 28px;
font: 600 10px/1 var(--studio-mono, monospace);
letter-spacing: .14em;
text-transform: uppercase;
}
.product-content-shell .product__record-label { color: #16816e; }
.product-content-shell .product__meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
font-family: var(--studio-mono, monospace);
}
.product-content-shell .product__meta-item {
min-width: 0;
padding: 4px 24px;
border-left: 1px solid rgba(7, 25, 21, .12);
}
.product-content-shell .product__meta-item:first-child { padding-left: 0; border-left: 0; }
.product-content-shell .product__meta-item span {
display: block;
margin-bottom: 12px;
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(7, 25, 21, .45);
}
.product-content-shell .product__meta-item strong {
display: block;
font-size: clamp(13px, 1.2vw, 16px);
line-height: 1.35;
letter-spacing: -.02em;
color: #071915;
overflow-wrap: anywhere;
}
.product-content-shell .product__notice {
margin: 0;
padding: clamp(30px, 4vw, 54px);
border: 0;
border-left: 1px solid rgba(99, 228, 203, .22);
border-radius: 0;
background: #0a211c;
color: rgba(255, 255, 255, .66);
}
.product-content-shell .product__notice-label { color: #63e4cb; }
.product-content-shell .product__notice p { margin: 0; font-size: 14px; line-height: 1.75; color: inherit; }
.product-content-shell .trust-bar {
margin: 0 0 clamp(90px, 9vw, 140px);
padding: 0;
border: 1px solid rgba(99, 228, 203, .18);
border-radius: 12px;
background: #071915;
overflow: hidden;
}
.product-content-shell .trust-item {
min-height: 150px;
padding: 34px 22px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.product-content-shell .product-section-head {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
gap: clamp(48px, 8vw, 120px);
align-items: end;
margin-bottom: 58px;
padding-bottom: 54px;
border-bottom: 1px solid rgba(7, 25, 21, .14);
}
.product-section-head > div > span {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 26px;
font: 500 10px/1 var(--studio-mono, monospace);
letter-spacing: .13em;
text-transform: uppercase;
color: rgba(7, 25, 21, .5);
}
.product-section-head > div > span::before { content: ""; width: 42px; height: 1px; background: #3bcdb0; }
.product-section-head h2 {
max-width: 11ch;
margin: 0;
font-size: clamp(54px, 6vw, 92px);
line-height: .9;
letter-spacing: -.07em;
}
.product-section-head > p {
max-width: 48ch;
margin: 0 0 5px;
font-size: 16px;
line-height: 1.75;
color: rgba(7, 25, 21, .58);
}
.product-content-shell .product-tabs { margin: 0 0 clamp(110px, 11vw, 175px); }
body.single-product.woocommerce .product-content-shell .woocommerce-tabs.wc-tabs-wrapper {
display: grid;
grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
gap: clamp(38px, 5vw, 76px);
align-items: start;
}
.product-content-shell .product-tabs ul.tabs.wc-tabs {
display: grid;
gap: 0;
margin: 0;
padding: 10px;
border: 1px solid rgba(99, 228, 203, .18);
border-radius: 14px;
background: #071915;
list-style: none;
counter-reset: g7-product-tab;
box-shadow: 0 24px 60px rgba(7, 25, 21, .12);
}
.product-content-shell .product-tabs ul.tabs.wc-tabs::before,
.product-content-shell .product-tabs ul.tabs.wc-tabs::after { display: none; }
.product-content-shell .product-tabs ul.tabs li,
.product-content-shell .product-tabs ul.tabs li.active {
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
background: transparent;
counter-increment: g7-product-tab;
}
.product-content-shell .product-tabs ul.tabs li:last-child { border-bottom: 0; }
.product-content-shell .product-tabs ul.tabs li::before,
.product-content-shell .product-tabs ul.tabs li::after { display: none; }
.product-content-shell .product-tabs ul.tabs li a,
.product-content-shell .product-tabs ul.tabs li.active a {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
width: 100%;
padding: 18px 15px;
font: 500 10px/1.3 var(--studio-mono, monospace);
letter-spacing: .09em;
text-transform: uppercase;
text-decoration: none;
color: rgba(255, 255, 255, .68);
text-shadow: none;
transition: background .18s ease, color .18s ease;
}
.product-content-shell .product-tabs ul.tabs li a::before {
content: "0" counter(g7-product-tab);
font-size: 8px;
color: #63e4cb;
}
.product-content-shell .product-tabs ul.tabs li a::after {
content: "→";
font-size: 14px;
color: #63e4cb;
transition: transform .18s ease;
}
.product-content-shell .product-tabs ul.tabs li a:hover { color: #fff; }
.product-content-shell .product-tabs ul.tabs li a:hover::after { transform: translateX(3px); }
.product-content-shell .product-tabs ul.tabs li.active { border-bottom-color: transparent; }
.product-content-shell .product-tabs ul.tabs li.active a {
border-radius: 8px;
background: #63e4cb;
color: #071915;
}
.product-content-shell .product-tabs ul.tabs li.active a::before,
.product-content-shell .product-tabs ul.tabs li.active a::after { color: #071915; }
body.single-product.woocommerce .product-content-shell .product-tabs .panel {
width: 100%;
max-width: none;
margin: 0;
padding: clamp(32px, 5vw, 68px);
border: 1px solid rgba(7, 25, 21, .11);
border-radius: 16px;
background: #fff;
box-shadow: 0 24px 70px rgba(7, 25, 21, .07);
}
body.single-product.woocommerce .product-content-shell .product-tabs .panel h2 {
margin: 0 0 26px;
font-size: clamp(34px, 3.5vw, 52px);
line-height: .98;
letter-spacing: -.045em;
}
body.single-product.woocommerce .product-content-shell .product-tabs .panel p {
max-width: 68ch;
font-size: 17px;
line-height: 1.82;
color: rgba(7, 25, 21, .68);
}
body.single-product.woocommerce .product-content-shell .product-tabs .panel p:last-child { margin-bottom: 0; }
body.single-product.woocommerce .product-content-shell .product-tabs .panel table {
border: 0;
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
overflow: hidden;
}
body.single-product.woocommerce .product-content-shell .product-tabs .panel table th,
body.single-product.woocommerce .product-content-shell .product-tabs .panel table td {
padding: 17px 20px;
border-color: rgba(7, 25, 21, .1);
font-size: 14px;
}
body.single-product.woocommerce .product-content-shell .product-tabs #reviews {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
gap: 42px;
}
body.single-product.woocommerce .product-content-shell .product-tabs #reviews #comments,
body.single-product.woocommerce .product-content-shell .product-tabs #reviews #review_form_wrapper { width: 100%; float: none; }
body.single-product.woocommerce .product-content-shell .product-tabs #reviews .commentlist { margin: 0; }
body.single-product.woocommerce .product-content-shell .product-tabs #reviews .commentlist li .comment_container {
padding: 24px;
border: 1px solid rgba(7, 25, 21, .1);
border-radius: 10px;
background: #f3f8f6;
}
.product-content-shell .related.products > h2,
.product-content-shell .fbt__head h2 {
font-size: clamp(48px, 5vw, 78px);
line-height: .92;
letter-spacing: -.06em;
}
.product-content-shell .fbt__body { border-radius: 12px; background: #dff0eb; }
@media (max-width: 1080px) {
.product-stage .g7-product,
.product-stage div.product {
grid-template-columns: minmax(340px, .82fr) minmax(460px, 1.18fr);
gap: 54px;
}
.product-stage .product__title { font-size: clamp(42px, 5.6vw, 62px); }
.product-stage .product__title--long { font-size: clamp(37px, 4.8vw, 52px); }
}
@media (max-width: 860px) {
.product-stage { padding-top: 52px; }
.product-stage .g7-product,
.product-stage div.product { grid-template-columns: 1fr; gap: 60px; }
.product-stage .product__gallery { position: relative; top: auto; }
.product-stage .product__summary { max-width: none; padding-top: 0; }
.product-stage .product__title,
.product-stage .product__title--long { max-width: 14ch; font-size: clamp(44px, 8.5vw, 70px); }
.product-content-shell .woocommerce-tabs.wc-tabs-wrapper { grid-template-columns: 1fr; gap: 38px; }
.product-content-shell .product-section-head { grid-template-columns: 1fr; gap: 28px; }
body.single-product.woocommerce .product-content-shell .woocommerce-tabs.wc-tabs-wrapper { grid-template-columns: 1fr; gap: 28px; }
.product-content-shell .product-tabs ul.tabs.wc-tabs { grid-template-columns: repeat(3, 1fr); }
.product-content-shell .product-tabs ul.tabs li,
.product-content-shell .product-tabs ul.tabs li.active { border-right: 1px solid rgba(255, 255, 255, .1); border-bottom: 0; }
.product-content-shell .product-tabs ul.tabs li:last-child { border-right: 0; }
body.single-product.woocommerce .product-content-shell .product-tabs #reviews { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.product-stage,
.product-stage__inner,
.product-stage div.product,
.product-stage .product__gallery,
.product-stage .product__summary { max-width: 100%; overflow-x: clip; }
.product-stage .product__gallery,
.product-stage .product__summary {
box-sizing: border-box;
width: calc(100vw - 32px) !important;
max-width: calc(100vw - 32px) !important;
}
.product-stage div.product .product__gallery .images,
.product-stage div.product .product__gallery .woocommerce-product-gallery {
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
}
.product-stage__inner,
.product-content-shell { width: min(calc(100% - 32px), 1460px); }
.product-stage { padding: 38px 0 72px; }
.product__visual-label { margin-bottom: 12px; font-size: 8px; }
.product-stage div.product .product__gallery .images,
.product-stage div.product .product__gallery .woocommerce-product-gallery { border-radius: 12px; }
.product-stage div.product .product__gallery .woocommerce-product-gallery__image img { padding: 20px; }
.product-stage .product__summary { padding-top: 0; }
.product-stage .product__cat { margin-bottom: 20px; padding-left: 50px; font-size: 9px; }
.product-stage .product__title,
.product-stage .product__title--long { font-size: clamp(38px, 12vw, 54px); line-height: .94; }
.product-stage .product__badges { grid-template-columns: 1fr; }
.product-stage .pbadge { border-right: 0; }
.product-stage .pbadge:nth-last-child(-n+2) { border-bottom: 1px solid rgba(174, 235, 221, .14); }
.product-stage .pbadge:last-child { border-bottom: 0; }
.product-stage .tier { padding: 15px 13px; }
.product-stage .tier__value { position: static; transform: none; margin-left: 8px; }
.qty-stepper__btn { width: 44px; height: 44px; }
.qty-stepper__input { width: 56px; height: 44px; font-size: 16px; }
.product-content-shell { padding-top: 64px; }
.product-content-shell .product__foot { grid-template-columns: 1fr; gap: 0; margin-bottom: 54px; padding: 0; }
.product-content-shell .product__meta { grid-template-columns: 1fr; }
.product-content-shell .product__meta-item,
.product-content-shell .product__meta-item:first-child {
padding: 16px 0;
border: 0;
border-top: 1px solid rgba(7, 25, 21, .1);
}
.product-content-shell .product__meta-item:first-child { padding-top: 0; border-top: 0; }
.product-content-shell .product__notice { border-left: 0; border-top: 1px solid rgba(99, 228, 203, .22); }
.product-content-shell .trust-bar { grid-template-columns: repeat(2, 1fr); }
.product-content-shell .trust-item { min-height: 130px; }
.product-section-head h2 { font-size: clamp(50px, 16vw, 72px); }
.product-content-shell .product-section-head { padding-bottom: 38px; }
.product-content-shell .product-tabs ul.tabs.wc-tabs {
display: flex;
gap: 0;
overflow-x: auto;
scroll-snap-type: x proximity;
}
.product-content-shell .product-tabs ul.tabs li,
.product-content-shell .product-tabs ul.tabs li.active {
min-width: 175px;
border-right: 1px solid rgba(255, 255, 255, .1);
scroll-snap-align: start;
}
body.single-product.woocommerce .product-content-shell .product-tabs .panel { padding: 28px 22px; }
}
/* Specificity lock: the shared non-home system predates this product stage.
Keep its useful typography tokens without allowing its light commerce rules
to leak back into the dark editorial product experience. */
body.single-product .product-stage .product__gallery { position: relative; top: auto; }
body.single-product .product-stage .product__summary { padding-top: 0; }
body.single-product .product-stage div.product .product__gallery .images,
body.single-product .product-stage div.product .product__gallery .woocommerce-product-gallery {
border-radius: 18px;
background: #f8fcfa;
}
body.single-product .product-stage div.product .product__gallery .woocommerce-product-gallery__image {
aspect-ratio: 1 / 1;
/* Woo's 2048px hover-zoom image is absolutely positioned here. Containment
keeps that useful zoom layer from widening the document scroll area. */
contain: layout paint;
}
body.single-product .product-stage div.product .product__gallery .woocommerce-product-gallery__image img {
object-fit: contain;
padding: clamp(28px, 4vw, 62px);
}
body.single-product .product-stage .product__cat {
border-radius: 0;
background: transparent;
color: #63e4cb;
}
body.single-product .product-stage .product__title,
body.single-product .product-stage div.product .product_title { color: #f9fffd; }
body.single-product .product-stage .product__price { color: #fff; }
body.single-product .product-stage .product__blurb { color: rgba(255, 255, 255, .64); }
body.single-product .product-stage .pbadge {
border-radius: 0;
background: rgba(255, 255, 255, .025);
color: rgba(255, 255, 255, .7);
}
body.single-product .product-stage .tier {
border-radius: 0;
background: rgba(255, 255, 255, .035);
box-shadow: none;
}
body.single-product .product-stage .tier:first-of-type { border-radius: 9px 9px 0 0; }
body.single-product .product-stage .tier:last-child { border-radius: 0 0 9px 9px; }
body.single-product .product-stage .tier.is-selected {
background: #e6f9f4;
box-shadow: inset 4px 0 0 #63e4cb;
}
body.single-product .product-stage .tier__units,
body.single-product .product-stage .tier__per { color: #f9fffd; }
body.single-product .product-stage .tier__sub,
body.single-product .product-stage .tier__perlabel { color: rgba(255, 255, 255, .46); }
body.single-product .product-stage .tier.is-selected .tier__units,
body.single-product .product-stage .tier.is-selected .tier__per { color: #071915; }
body.single-product .product-stage .tier.is-selected .tier__sub,
body.single-product .product-stage .tier.is-selected .tier__perlabel { color: rgba(7, 25, 21, .5); }
body.single-product .product-stage .product__notice,
body.single-product .product-stage .g7-notice {
border: 1px solid rgba(174, 235, 221, .16);
border-left: 3px solid #63e4cb;
border-radius: 7px;
background: rgba(255, 255, 255, .035);
color: rgba(255, 255, 255, .62);
}
body.single-product .product-stage div.product .product__buy .single_add_to_cart_button {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 64px;
border: 1px solid #63e4cb !important;
border-radius: 7px;
background: #63e4cb !important;
color: #071915 !important;
}
body.single-product .product-stage div.product .product__buy .single_add_to_cart_button:hover {
background: #f9fffd !important;
color: #071915 !important;
}
/* Wholesale prices remain visible before login, but only paid/activated
wholesale accounts can select them. */
body.single-product .product-stage .tier--wholesale { position: relative; }
body.single-product .product-stage .tier--wholesale.is-locked {
cursor: not-allowed;
background: rgba(255,255,255,.018);
border-color: rgba(174,235,221,.11);
opacity: .68;
}
body.single-product .product-stage .tier--wholesale.is-locked:hover { background: rgba(255,255,255,.018); border-color: rgba(174,235,221,.18); }
body.single-product .product-stage .tier--wholesale.is-locked .tier__units,
body.single-product .product-stage .tier--wholesale.is-locked .tier__per { color: rgba(249,255,253,.72); }
body.single-product .tier__lock {
display: grid;
place-items: center;
width: 22px;
height: 22px;
flex: 0 0 22px;
border: 1px solid rgba(99,228,203,.35);
border-radius: 50%;
color: #63e4cb;
}
body.single-product .tier__lock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body.single-product .tiers__wholesale-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 17px;
border-top: 1px solid rgba(174,235,221,.14);
background: rgba(99,228,203,.06);
color: rgba(249,255,253,.58);
font: 500 9px/1.5 var(--studio-mono, monospace);
letter-spacing: .04em;
text-transform: uppercase;
}
body.single-product .tiers__wholesale-cta a { flex: none; color: #63e4cb; font-weight: 700; }
body.single-product .tiers__wholesale-cta a:hover { color: #fff; text-decoration: none; }
@media (max-width: 560px) {
body.single-product .tiers__wholesale-cta { align-items: flex-start; flex-direction: column; }
}
/* Public wholesale entry point. Partner-only prices remain gated server-side. */
body.single-product .product__wholesale-teaser {
margin: -2px 0 20px;
font-family: var(--font-mono, monospace);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
line-height: 1.45;
text-transform: uppercase;
color: rgba(235, 248, 245, .68);
}
body.single-product .product__wholesale-teaser strong {
color: #63e4cb;
font-weight: 700;
}
body.single-product .product__wholesale-teaser a {
border-bottom: 1px solid rgba(99, 228, 203, .55);
color: #f9fffd;
text-decoration: none;
}
body.single-product .product__wholesale-teaser a:hover,
body.single-product .product__wholesale-teaser a:focus-visible {
border-color: #63e4cb;
color: #63e4cb;
}
@media (max-width: 860px) {
body.single-product .product-stage .product__gallery { position: relative; top: auto; }
body.single-product .product-stage .product__summary { padding-top: 0; }
}
@media (max-width: 600px) {
body.single-product .product-stage div.product .product__gallery .images,
body.single-product .product-stage div.product .product__gallery .woocommerce-product-gallery { border-radius: 12px; }
body.single-product .product-stage div.product .product__gallery .woocommerce-product-gallery__image img { padding: 20px; }
}
/*
* Desktop gallery pin
*
* Sticky elements are constrained by an ancestor with overflow:hidden. The
* product stage used that clipping for its decorative G7 treatment, which
* prevented the gallery from staying with the viewport while the summary
* column was read. Keep the stage as the sticky boundary, but allow its
* contents to be visible: the gallery then releases naturally when the
* summary column and the stage end, before the next product section begins.
*/
@media (min-width: 861px) {
body.single-product { overflow-x: hidden; }
body.single-product .product-stage { overflow: visible; }
body.single-product .product-stage__inner,
body.single-product .product-stage .g7-product,
body.single-product .product-stage div.product { overflow: visible; }
body.single-product .product-stage .product__gallery {
position: relative;
top: auto;
}
body.single-product .product-stage .product__gallery-pin {
/* The label, reserved clearance, and image are one pinned unit. */
position: sticky;
/* Match the panel's initial stage position so it does not travel upward
before pinning; it releases only at the end of the summary stage. */
top: 110px;
padding-top: 18px;
align-self: start;
}
}
@media (max-width: 860px) {
body.single-product .product-stage .product__gallery-pin {
position: static;
padding-top: 0;
}
}
/* ── Browsable sold-out variations ── */
body.single-product .product-stage .stock-pill.stock-pill--out {
border-color: rgba(255, 159, 122, .48);
background: rgba(105, 31, 18, .28);
color: #ffc5ae;
}
body.single-product .product-stage div.product .product__buy .single_add_to_cart_button.g7-oos-selected,
body.single-product .product-stage div.product .product__buy .single_add_to_cart_button.g7-oos-selected.disabled {
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
border-color: rgba(255, 159, 122, .72) !important;
background: rgba(105, 31, 18, .34) !important;
color: #ffe2d7 !important;
box-shadow: none;
}
body.single-product .product-stage div.product .product__buy .single_add_to_cart_button.g7-oos-selected:hover,
body.single-product .product-stage div.product .product__buy .single_add_to_cart_button.g7-oos-selected:focus-visible {
background: rgba(137, 44, 25, .52) !important;
color: #fff !important;
outline: 3px solid rgba(255, 197, 174, .28);
outline-offset: 3px;
}
body.g7-stock-modal-open { overflow: hidden; }
.g7-stock-modal[hidden] { display: none !important; }
.g7-stock-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
padding: 24px;
}
.g7-stock-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(2, 11, 9, .82);
backdrop-filter: blur(7px);
}
.g7-stock-modal__dialog {
position: relative;
width: min(100%, 560px);
padding: clamp(30px, 5vw, 48px);
border: 1px solid rgba(99, 228, 203, .34);
border-top: 4px solid #ff9f7a;
border-radius: 12px;
background: #071915;
color: #f9fffd;
box-shadow: 0 30px 100px rgba(0, 0, 0, .5);
}
.g7-stock-modal__dialog:focus { outline: none; }
.g7-stock-modal__dialog:focus-visible { outline: 3px solid #63e4cb; outline-offset: 5px; }
.g7-stock-modal__eyebrow {
display: block;
margin-bottom: 16px;
font: 600 10px/1 var(--studio-mono, monospace);
letter-spacing: .14em;
text-transform: uppercase;
color: #ffb79b;
}
.g7-stock-modal__dialog h2 {
max-width: 15ch;
margin: 0 0 18px;
font: 600 clamp(30px, 5vw, 46px)/1.02 var(--studio-serif, Georgia, serif);
letter-spacing: -.035em;
color: #fff;
}
.g7-stock-modal__dialog p {
margin: 0 0 28px;
font: 500 15px/1.7 var(--studio-sans, sans-serif);
color: rgba(249, 255, 253, .7);
}
.g7-stock-modal__dialog p strong { color: #fff; }
.g7-stock-modal__close {
position: absolute;
top: 16px;
right: 16px;
display: grid;
place-items: center;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid rgba(249, 255, 253, .22);
border-radius: 50%;
background: transparent;
font: 400 28px/1 sans-serif;
color: #fff;
cursor: pointer;
}
.g7-stock-modal__close:hover,
.g7-stock-modal__close:focus-visible { border-color: #63e4cb; color: #63e4cb; outline: none; }
.g7-stock-modal__action {
min-height: 50px;
padding: 0 20px;
border: 1px solid #63e4cb;
border-radius: 6px;
background: #63e4cb;
font: 600 11px/1 var(--studio-mono, monospace);
letter-spacing: .1em;
text-transform: uppercase;
color: #071915;
cursor: pointer;
}
.g7-stock-modal__action:hover,
.g7-stock-modal__action:focus-visible { background: #f9fffd; outline: 3px solid rgba(99, 228, 203, .3); outline-offset: 3px; }
.g7-stock-alert-form { display: grid; gap: 14px; margin-top: 4px; }
.g7-stock-alert-form[hidden] { display: none !important; }
.g7-stock-alert-form__field { display: grid; gap: 7px; }
.g7-stock-alert-form label { font: 700 11px/1.2 var(--studio-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: rgba(249,255,253,.82); }
.g7-stock-alert-form input[type="text"],
.g7-stock-alert-form input[type="email"] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 52px; margin: 0; padding: 0 15px; border: 1px solid rgba(249,255,253,.3); border-radius: 6px; background: rgba(255,255,255,.07); color: #fff; font: 500 16px/1.2 var(--studio-sans, sans-serif); }
.g7-stock-alert-form input[type="text"]:focus,
.g7-stock-alert-form input[type="email"]:focus { border-color: #63e4cb; outline: 3px solid rgba(99,228,203,.24); outline-offset: 2px; }
.g7-stock-alert-form input[aria-invalid="true"] { border-color: #ffb79b; }
.g7-stock-alert-form__error,
.g7-stock-modal__dialog .g7-stock-alert-form__error { margin: 0; color: #ffc5ae; font: 600 13px/1.5 var(--studio-sans, sans-serif); }
.g7-stock-alert-form__submit { width: 100%; }
.g7-stock-alert-form__submit.is-loading { cursor: progress; opacity: .72; }
.g7-stock-alert-form__status,
.g7-stock-modal__dialog .g7-stock-alert-form__status { min-height: 0; margin: 16px 0 0; padding: 0; font: 600 14px/1.55 var(--studio-sans, sans-serif); }
.g7-stock-alert-form__status:empty { display: none; }
.g7-stock-alert-form__status.is-success { padding: 14px 16px; border: 1px solid rgba(99,228,203,.45); background: rgba(99,228,203,.11); color: #b9ffef; }
.g7-stock-alert-form__status.is-error { color: #ffc5ae; }
.g7-stock-alert-form__privacy,
.g7-stock-modal__dialog .g7-stock-alert-form__privacy { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: rgba(249,255,253,.56); }
.g7-stock-modal__secondary { margin: 18px 0 0; padding: 4px 0; border: 0; border-bottom: 1px solid rgba(249,255,253,.35); background: transparent; color: rgba(249,255,253,.76); font: 600 11px/1.4 var(--studio-mono, monospace); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.g7-stock-modal__secondary:hover,
.g7-stock-modal__secondary:focus-visible { border-color: #63e4cb; color: #fff; outline: 2px solid rgba(99,228,203,.3); outline-offset: 4px; }
.g7-stock-alert-form__trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
body.single-product .product-stage .g7-simple-oos-button { width: 100%; pointer-events: auto; cursor: pointer; opacity: 1; border-color: rgba(255,159,122,.72); background: rgba(105,31,18,.34); color: #ffe2d7; }
@media (max-width: 600px) {
.g7-stock-modal { align-items: end; padding: 12px; }
.g7-stock-modal__dialog { width: 100%; max-height: calc(100vh - 24px); overflow-y: auto; padding: 30px 22px 24px; border-radius: 12px; }
.g7-stock-modal__dialog h2 { padding-right: 30px; font-size: 32px; }
.g7-stock-modal__action { width: 100%; }
}
/* G7 Product Page — Solid card surfaces + tightened stepper (v2.12.93)
Replaces all transparent card backgrounds on the dark product stage with
solid dark surfaces. Consolidates and tightens the quantity stepper area. */
/* ── Trust badges grid ── */
body.single-product .product-stage .pbadge {
background: rgba(7, 25, 21, .92);
}
/* ── Wholesale tier cards ── */
body.single-product .product-stage .tier {
background: rgba(7, 25, 21, .88);
}
body.single-product .product-stage .tier:hover {
background: rgba(10, 33, 28, .95);
}
body.single-product .product-stage .tier.is-selected {
background: #e6f9f4;
}
body.single-product .product-stage .tier--wholesale.is-locked {
background: rgba(7, 25, 21, .72);
}
body.single-product .product-stage .tier--wholesale.is-locked:hover {
background: rgba(7, 25, 21, .82);
}
/* ── Tiers container ── */
body.single-product .product-stage .tiers {
background: rgba(7, 25, 21, .88) !important;
}
/* ── Research-use / compliance notice ── */
body.single-product .product-stage .g7-notice,
body.single-product .product-stage .product__notice {
background: rgba(7, 25, 21, .88);
}
/* ── Quantity stepper: tightened ── */
body.single-product .product-stage .qty-stepper {
background: rgba(7, 25, 21, .92);
border: 1px solid rgba(99, 228, 203, .28);
border-radius: 8px;
overflow: hidden;
}
body.single-product .product-stage .qty-stepper__btn {
width: 44px;
height: 44px;
font-size: 20px;
color: #9edfd3;
}
body.single-product .product-stage .qty-stepper__btn:hover {
background: rgba(99, 228, 203, .12);
color: #63e4cb;
}
body.single-product .product-stage .qty-stepper__btn:active {
background: #63e4cb;
color: #071915;
}
body.single-product .product-stage .qty-stepper__btn--minus {
border-right: 1px solid rgba(174, 235, 221, .14);
}
body.single-product .product-stage .qty-stepper__btn--plus {
border-left: 1px solid rgba(174, 235, 221, .14);
}
body.single-product .product-stage .qty-stepper__input {
width: 52px;
height: 44px;
background: rgba(7, 25, 21, .95);
color: #f9fffd;
font-size: 16px;
font-weight: 700;
}
body.single-product .product-stage .qty-stepper__input:focus {
outline-color: #63e4cb;
}
/* ── 10 Vials quick button: integrated, not bolted on ── */
body.single-product .product-stage .qty-stepper__quick {
min-height: 44px;
padding: 0 14px;
border: 0;
border-left: 1px solid rgba(174, 235, 221, .14);
border-radius: 0;
background: transparent;
color: rgba(158, 223, 211, .72);
font: 700 10px/1.2 var(--studio-mono, monospace);
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
body.single-product .product-stage .qty-stepper__quick:hover {
background: rgba(99, 228, 203, .08);
color: #63e4cb;
}
body.single-product .product-stage .qty-stepper__quick.is-active {
background: rgba(99, 228, 203, .1);
color: #63e4cb;
}
/* ── Strength chips ── */
body.single-product .product-stage .strength-chip {
background: rgba(7, 25, 21, .82);
}
body.single-product .product-stage .strength-chip:hover {
background: rgba(10, 33, 28, .92);
}
body.single-product .product-stage .strength-chip.is-selected {
background: rgba(99, 228, 203, .12);
}
body.single-product .product-stage .strength-chip.is-out-of-stock:not(.is-selected) {
background: rgba(7, 25, 21, .65);
}
/* ── Variation select dropdown ── */
body.single-product .product-stage .variations_form select {
background: rgba(7, 25, 21, .88);
}
/* ── Wholesale CTA bar ── */
body.single-product .tiers__wholesale-cta {
background: rgba(7, 25, 21, .82);
}
/* ── Wholesale teaser line ── */
body.single-product .product__wholesale-teaser {
background: rgba(7, 25, 21, .72);
padding: 8px 12px;
border-radius: 4px;
}
/* ── Fix: tier price/per-vial spacing + section rhythm ── */
/* Add breathing room between price and "per vial" label */
body.single-product .product-stage .tier__per {
line-height: 1.3;
margin-bottom: 2px;
}
body.single-product .product-stage .tier__perlabel {
display: block;
line-height: 1.3;
}
/* Add a space between "CAD 138.32" and "per vial" via the label having its own line */
body.single-product .product-stage .tier__price {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
/* Tighten the gap between stepper and save text */
body.single-product .product-stage .product__save {
margin: 8px 0 14px;
}
/* Consistent spacing between save text and wholesale tiers */
body.single-product .product-stage .tiers {
margin-top: 0;
}
/* 10 Vials button: better vertical centering for two-line text */
body.single-product .product-stage .qty-stepper__quick {
display: flex;
align-items: center;
justify-content: center;
line-height: 1.15;
}
/* ── Fix: broken top-left corner on tiers container ── */
body.single-product .product-stage .tiers {
overflow: hidden;
border-radius: 10px;
}
body.single-product .product-stage .tier:first-of-type {
border-radius: 10px 10px 0 0;
}
body.single-product .product-stage .tier:last-child {
border-radius: 0 0 10px 10px;
}
/* ── Fix: stepper fills container width, corners connect ── */
body.single-product .product-stage .tiers .qty-stepper {
width: 100%;
border-radius: 10px 10px 0 0;
border: 0;
border-bottom: 1px solid rgba(174, 235, 221, .14);
}
body.single-product .product-stage .tiers .qty-stepper__quick {
border-radius: 0;
}
body.single-product .product-stage .tiers .product__save {
margin: 8px 0 0;
padding: 0 2px;
}
/* Remove the separate border from the tiers container since the stepper
now forms the top edge */
body.single-product .product-stage .tiers {
border: 0;
overflow: hidden;
border-radius: 10px;
}
/* ── Merged Sold Out + Notify Me CTA (single red button) ── */
body.single-product .product-stage .g7-stock-notify--soldout {
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 9px 20px;
border: 1px solid #A04E32;
border-radius: 999px;
background: #B85C3C;
color: #fff;
font: 700 11px/1 var(--studio-mono, monospace);
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background .2s, border-color .2s;
box-shadow: 0 2px 12px rgba(184, 92, 60, .25);
}
body.single-product .product-stage .g7-stock-notify--soldout:hover {
background: #A04E32;
border-color: #8B4226;
color: #fff;
text-decoration: none;
}
body.single-product .product-stage .g7-stock-notify--soldout:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(184, 92, 60, .35);
}
body.single-product .product-stage .g7-stock-notify--soldout .g7-stock-notify__sep {
opacity: .6;
margin: 0 2px;
}
/* Hide the old separate notify button when merged version is shown */
body.single-product .product-stage .g7-stock-notify:not(.g7-stock-notify--soldout)[hidden] { display: none !important; }
/* Wholesale access changes behavior, not the product-page visual system.
Locked and unlocked cards share the same dark treatment. Selection is shown
only with mint outline/radio signals, never a light-theme card inversion. */
body.single-product .product-stage .tier--wholesale.is-locked {
opacity: 1;
background: rgba(7, 25, 21, .88);
border-color: rgba(174, 235, 221, .17);
}
body.single-product .product-stage .tier--wholesale.is-locked:hover {
background: rgba(7, 25, 21, .88);
border-color: rgba(174, 235, 221, .17);
}
body.single-product .product-stage .tier--wholesale.is-locked .tier__units,
body.single-product .product-stage .tier--wholesale.is-locked .tier__per {
color: #f9fffd;
}
body.single-product .product-stage .tier.is-selected {
background: rgba(10, 33, 28, .96) !important;
border-color: #63e4cb;
box-shadow: inset 4px 0 0 #63e4cb;
}
body.single-product .product-stage .tier.is-selected .tier__units,
body.single-product .product-stage .tier.is-selected .tier__per {
color: #f9fffd;
}
body.single-product .product-stage .tier.is-selected .tier__sub,
body.single-product .product-stage .tier.is-selected .tier__perlabel {
color: rgba(255, 255, 255, .54);
}
body.single-product .product-stage .tier.is-selected .tier__radio {
border-color: #63e4cb;
background: transparent;
}
body.single-product .product-stage .tier.is-selected .tier__radio::after {
background: #63e4cb;
}
/* Match public and activated wholesale card surfaces exactly. The radio fill is
the selection signal; access state must not invert or restructure the card. */
body.single-product .product-stage .tier.is-selected {
background: rgba(7, 25, 21, .88) !important;
border-color: rgba(174, 235, 221, .17);
box-shadow: none;
}
body.single-product .product-stage .tier.is-selected:hover {
background: rgba(10, 33, 28, .95) !important;
}
/* Fix: Sold Out button on simple OOS products. */
body.single-product .product-stage .product__buy:has(.g7-simple-oos-button) form.cart {
display: none !important;
}
body.single-product .product-stage .g7-simple-oos-button {
width: 100% !important;
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
appearance: none !important;
display: flex !important;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 52px;
padding: 10px 22px;
border: 1px solid #A04E32 !important;
border-radius: 8px;
background: #B85C3C !important;
color: #fff !important;
font: 700 13px/1 var(--studio-mono, monospace);
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background .2s, border-color .2s;
box-shadow: 0 2px 12px rgba(184, 92, 60, .25);
}
body.single-product .product-stage .g7-simple-oos-button:hover {
background: #A04E32 !important;
border-color: #8B4226 !important;
color: #fff !important;
text-decoration: none;
}
/* Fix: Product image card clipped at stage boundary.
Sticky positioning caused either clipping or floating past the stage.
Disable sticky so the gallery stays in its grid cell. */
@media (min-width: 861px) {
body.single-product .product-stage {
overflow: hidden;
}
body.single-product .product-stage__inner,
body.single-product .product-stage .g7-product,
body.single-product .product-stage div.product {
overflow: visible;
}
body.single-product .product-stage .product__gallery {
position: relative;
top: auto;
}
body.single-product .product-stage .product__gallery-pin {
position: relative;
top: auto;
padding-top: 18px;
align-self: start;
}
}