, so the blank line is a margin — and the last
one carries none, or the block's own margin_bottom would be doubled. */
[data-wetheme-section-type='template--product'] .gw-pdp-description > p {
margin: 0 0 var(--gw-desc-paragraph-gap, 21px);
}
[data-wetheme-section-type='template--product'] .gw-pdp-description > p:last-child {
margin-bottom: 0;
}
/* Rich text can carry a link; the frame draws none, so it inherits the copy's
colour and keeps only the underline. */
[data-wetheme-section-type='template--product'] .gw-pdp-description a {
color: inherit;
text-decoration: underline;
}
/* ---- trust bullets — Figma 30:10876 ------------------------------------ */
[data-wetheme-section-type='template--product'] .product-block-text-with-icon-group {
display: flex;
flex-direction: column;
gap: 16px;
}
[data-wetheme-section-type='template--product'] .product-block-text-with-icon-group .text-with-icon--content {
display: flex;
align-items: flex-start;
/* Left-aligned. Figma puts justify-center on row 1 only, which is a no-op
against w-full children — centring both rows is not what the frame does. */
justify-content: flex-start;
gap: 10px;
}
[data-wetheme-section-type='template--product'] .product-block-text-with-icon-group .text-with-icon--text {
font-family: var(--gw-pdp-font);
font-size: 18px;
font-weight: 400;
line-height: normal;
/* The theme's .label-font uppercases these; the frame is sentence case. */
text-transform: none;
letter-spacing: 0;
color: var(--gw-pdp-bullet-ink);
}
/* The theme's ICONSET has no mingcute check-fill, so the rendered outline
check-circle is masked over with the exported glyph rather than forking the
vendor block. 24 x 24 box per the frame. */
[data-wetheme-section-type='template--product'] .product-block-text-with-icon-group .text-with-icon--icon svg {
display: none;
}
[data-wetheme-section-type='template--product'] .product-block-text-with-icon-group .text-with-icon--icon {
position: relative;
flex: 0 0 auto;
width: 24px;
height: 24px;
}
/* The glyph does NOT fill its box. Figma insets the artwork inside the 24x24
icon frame at 19.46% / 8.4% / 0.78% / 8.32% (top/right/bottom/left), which is
exactly the exported SVG's own 19.9891 x 19.1427 at that offset. Sizing the
pseudo-element to the box and letting `contain` scale it made the check
noticeably larger and higher than the frame's. */
[data-wetheme-section-type='template--product'] .product-block-text-with-icon-group .text-with-icon--icon::after {
content: '';
position: absolute;
top: 19.46%;
left: 8.32%;
display: block;
width: 19.9891px;
height: 19.1427px;
background-color: var(--gw-pdp-check-color, #c8a96a);
-webkit-mask-image: var(--gw-pdp-check-url);
mask-image: var(--gw-pdp-check-url);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* ==========================================================================
4 — GW BOX CARD (Figma 30:10789 / 30:11038)
========================================================================== */
.gw-pdp-box-card {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 24px;
/* 15, not 16 — stroke inside the frame. */
padding: 15px;
background: var(--gw-bc-bg, #fdfaf4);
border: 1px solid var(--gw-bc-border, #f2ead8);
border-radius: 0;
/* Query container for the tarnish strip's fluid size below 1024 — 100cqi is
the card's content box. */
container-type: inline-size;
}
.gw-pdp-box-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
min-height: 40px;
}
.gw-pdp-box-card__heading {
margin: 0;
font-family: var(--gw-pdp-font);
font-size: 18px;
font-weight: 400;
/* Figma's line box (384 x 23 / 293 x 46). `normal` is 23.5 for EB Garamond
18 and pushed the mobile card 1px taller per heading line. */
line-height: 23px;
letter-spacing: 0;
text-transform: none;
color: var(--gw-pdp-secondary-500);
}
.gw-pdp-box-card__badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 140px;
height: 40px;
padding-inline: 9px;
background: var(--gw-bc-badge-bg, #a88e57);
border-radius: 0;
font-family: var(--gw-pdp-font);
font-size: 14px;
font-weight: 400;
line-height: normal;
color: var(--gw-bc-badge-text-color, #ffffff);
white-space: nowrap;
}
/* A WRAPPING FLEX ROW, not CSS grid — Figma 30:10791 is
flex flex-wrap gap-[23px] with w-[260px] shrink-0 items, and 544 fits
260 + 23 + 260 = 543 exactly, so it wraps 2 x 2. */
.gw-pdp-box-card__grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
gap: 23px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.gw-pdp-box-card__item {
display: flex;
align-items: center;
gap: 8px;
/* Figma writes w-[260px] shrink-0 against a 544 container: 260 + 23 + 260 =
543, two columns exactly. A fixed basis only holds at that one width —
below it the row wrapped to ONE column with a dead gutter beside it, which
is every desktop under ~1300 here. A half-of-the-row basis measures the
same 260 at the frame's width and stays two columns at every other.
Set --gw-bc-item-width to restore a fixed basis. */
flex: 1 1 var(--gw-bc-item-width, calc(50% - 11.5px));
min-width: 0;
/* The theme puts margin-bottom on every li, which was adding 4.5px to each
flex line and pushing the grid from 105 to 114. */
margin: 0;
}
.gw-pdp-box-card__chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
background: var(--gw-bc-chip-bg, #897244);
border-radius: 0;
font-family: 'Poppins', var(--body-font-stack, sans-serif);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #ffffff;
}
.gw-pdp-box-card__label {
flex: 1 1 auto;
min-width: 0;
font-family: var(--gw-pdp-font);
font-size: 16px;
font-weight: 400;
line-height: normal;
color: var(--gw-pdp-secondary-500);
}
/* Figma 31:60 is a ZERO-height box with the stroke drawn at inset -1px 0 0 0 —
the rule overlaps the 24px gap above it and contributes nothing to the
card's height. A plain border-top would occupy 1px and put the card at 271
against the frame's 270, so the negative top margin cancels the border box
and the stroke lands exactly where Figma paints it. The stroke is Accent/300
#DDC9A1 (Line 1's SVG), not the card's Accent/100 border colour. */
.gw-pdp-box-card__rule {
width: 100%;
height: 0;
margin: -1px 0 0;
border: 0;
border-top: 1px solid var(--gw-bc-rule, #ddc9a1);
}
.gw-pdp-box-card__tarnish {
width: 100%;
margin: 0;
font-family: var(--gw-pdp-font);
font-size: 16px;
font-weight: 500;
line-height: normal;
text-align: center;
text-transform: uppercase;
color: var(--gw-pdp-tarnish-ink);
/* The authored string carries doubled spaces around the first separator and
is reproduced literally, so the whitespace has to survive. */
white-space: pre-wrap;
}
@media (max-width: 1024px) {
/* Figma drops the justify-between wrapper on mobile: heading and badge become
separate stacked children of the card, badge left-aligned. One DOM, two
layouts — the wrapper is unwrapped rather than duplicated. */
.gw-pdp-box-card__header {
display: contents;
}
/* Figma keeps the 260 item inside the 293 column, so labels 03 and 04 wrap
to two lines (grid 233, card 483). One item per row as a COLUMN: in a
wrapping row a 260 max-width packs three per row on tablets, because flex
lines are built from the clamped size. Shrinks below 260 on narrow phones.
Set --gw-bc-item-width-mobile: 100% for full-width items. */
.gw-pdp-box-card__grid {
flex-direction: column;
}
.gw-pdp-box-card__item {
flex: none;
width: 100%;
max-width: var(--gw-bc-item-width-mobile, 260px);
}
/* Figma's 14px sets line 1 ("Tarnish-resistant · hypoallergenic ·", 291.7px)
in the 293 column with 1.3px to spare, so every card narrower than the 393
frame broke it onto three lines. Scaled to the card's content box instead:
14px from a 293 column up, the same two-line break below it (20.84 = line 1
width per px of font size). The 10px floor keeps that break on every screen
from 310px up; a higher floor sends the second "·" to the start of line 2
just below the floor's width. */
.gw-pdp-box-card__tarnish {
font-size: clamp(10px, (100cqi - 1px) / 20.84, 14px);
}
}
/* ==========================================================================
5 — GW REVIEW BANNER (Figma 30:10959 / 30:11094)
========================================================================== */
.gw-pdp-review-banner {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 24px 16px;
background: var(--gw-rb-bg, #e8dabd);
border-radius: 0;
}
.gw-pdp-review-banner__item {
display: flex;
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
.gw-pdp-review-banner__item[hidden] {
display: none;
}
.gw-pdp-review-banner__text {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
min-width: 0;
}
.gw-pdp-review-banner__name-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
/* Hugs name + 8 + stars, as the frame does. A fixed 210 overflowed once the
name rendered at 111.9 and centring pushed it 1px past the left inset. */
width: auto;
max-width: 100%;
flex-wrap: nowrap;
}
.gw-pdp-review-banner__name {
font-family: var(--gw-pdp-font);
font-size: 14px;
font-weight: 600;
line-height: normal;
letter-spacing: 2.52px;
text-transform: uppercase;
color: var(--gw-rb-text-color, #242424);
/* Figma's node is 110 x 18 — one line. "BETHANY M." at 14px with 2.52px
tracking measures 110 exactly, so it wrapped to two lines and took the
row to 36. */
white-space: nowrap;
}
/* Static 5-star row: gw-footer-stars.svg is the PDP star wrapper exactly —
92/108 = 17.037/20 = 0.85185 — so the viewBox does all the scaling. */
.gw-pdp-review-banner__stars {
display: block;
flex: 0 0 auto;
width: 92px;
height: 17.037px;
/* Accent/900 — the frame's star fill. */
color: var(--gw-rb-star-color, #4a3b1f);
}
.gw-pdp-review-banner__stars svg {
display: block;
width: 92px;
height: 17.037px;
}
/* The theme styles bare blockquotes with margin 0 0 32px and padding 16px 32px
— 80px of chrome that put the banner at 189 against the frame's 96. Scoped
through the section hook so it outranks that rule. */
[data-wetheme-section-type='template--product'] .gw-pdp-review-banner__quote,
.gw-pdp-review-banner__quote {
margin: 0;
padding: 0;
border: 0;
font-family: var(--gw-pdp-font);
font-size: 14px;
/* The theme italicises blockquotes; the frame's Body S is upright. */
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0;
color: var(--gw-rb-text-color, #242424);
}
.gw-pdp-review-banner__next {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 100px;
background: var(--gw-rb-arrow-bg, #4a3b1f);
color: #ffffff;
cursor: pointer;
}
.gw-pdp-review-banner__next-icon {
display: block;
width: 14px;
height: 14px;
}
.gw-pdp-review-banner__next-icon svg {
display: block;
width: 14px;
height: 14px;
}
/* ==========================================================================
6 — GW VIEW COUNTER (Figma 30:10698 / 30:11020)
========================================================================== */
.gw-pdp-view-counter {
display: inline-flex;
align-items: center;
gap: 8px;
padding-block: 8px;
font-family: var(--gw-pdp-font);
font-size: 16px;
font-weight: 400;
line-height: normal;
color: var(--gw-vc-text-color, #495057);
}
.gw-pdp-view-counter__dot {
position: relative;
flex-shrink: 0;
width: var(--gw-vc-dot-size, 12px);
height: var(--gw-vc-dot-size, 12px);
border-radius: 50%;
background-color: var(--gw-vc-dot-color, #c8a96a);
}
.gw-pdp-view-counter__dot--pulse::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background-color: inherit;
opacity: 0.6;
animation: gw-pdp-view-counter-pulse var(--gw-vc-pulse-speed, 2s) infinite;
}
@keyframes gw-pdp-view-counter-pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.7;
}
100% {
transform: scale(2);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.gw-pdp-view-counter__dot--pulse::before {
animation: none;
}
}
/* ==========================================================================
7 — RECIPIENT NAME + QUANTITY + ADD TO CART
Figma 30:10921 / 30:10737 / 30:10746
========================================================================== */
[data-wetheme-section-type='template--product'] .product--add-to-cart-form > .product-block-text-field {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
/* !important on the bottom half only: the rhythm rule above zeroes every
block's padding-bottom to undo custom.css, and this group's py-8 is the
frame's own (30:10921), not custom.css's 30. */
padding-top: 8px;
padding-bottom: 8px !important;
}
/* Figma 30:10737 — the quantity group is the same shape as the recipient
group: py-8, label then controls 16 apart. The theme ships a 4px label
margin instead. */
[data-wetheme-section-type='template--product'] quantity-input {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding-block: 8px;
}
[data-wetheme-section-type='template--product'] quantity-input label.quantity-selector {
margin-bottom: 0;
}
/* The frame stacks label → helper → field (30:10922 / 30:10939 / 30:10924).
The DOM is already in that order, but the theme gives .form-input-hint
`order: 3`, which threw the helper below the input. Ordering all three
explicitly rather than just resetting the hint, so the stack cannot be
reshuffled by a rule further up. */
[data-wetheme-section-type='template--product'] .product-block-text-field > label {
order: 1;
}
[data-wetheme-section-type='template--product'] .product-block-text-field > .form-input-hint {
order: 2;
margin: 0;
}
[data-wetheme-section-type='template--product'] .product-block-text-field > input {
order: 3;
}
[data-wetheme-section-type='template--product'] .product-block-text-field label.label-font {
margin: 0;
font-family: var(--gw-pdp-font);
font-size: 18px;
font-weight: 400;
line-height: normal;
color: var(--gw-pdp-label-ink);
}
[data-wetheme-section-type='template--product'] .product-block-text-field .form-input-hint {
margin: 0;
font-family: var(--gw-pdp-font);
font-size: 14px;
font-weight: 400;
line-height: normal;
color: var(--gw-pdp-neutral-600);
}
[data-wetheme-section-type='template--product'] .product-block-text-field input.width-full,
[data-wetheme-section-type='template--product'] quantity-input .js-qty {
box-sizing: border-box;
height: 56px;
background: var(--gw-pdp-accent-50);
border: 1px solid var(--gw-pdp-accent-100);
border-radius: 0;
}
/* !important is needed here and ONLY here. assets/custom.css carries
product-details .product-form-block.product-block-text-field input
{ padding: 5px 12px !important; width: max-content !important }
from earlier work, which pins the field to its content width — the opposite
of the full-width field this design draws. The rule predates this build and
also reaches product.hi-default-pdp.json, so it is overridden here rather
than deleted; flagged at handover as stale for whichever template adopts
this design next. */
[data-wetheme-section-type='template--product'] .product-block-text-field input.width-full {
width: 100% !important;
/* 15 / 9 — stroke inside the frame. */
padding: 9px 15px !important;
/* The border needs !important, and the reason is worth writing down: the
theme's base input rule is
input:not(.alt-input):not([type="checkbox"]):not([type="radio"])
:not([type="file"]):not([type="submit"]):not([type="hidden"])
:not(.btn)
and EVERY :not() contributes its argument's specificity, so that chain
scores (0,7,1) — it beats any reasonable selector here. It sets
`border: 1px solid var(--border-color)`, which painted the field
rgba(36,36,36,0.25) instead of the frame's #F2EAD8. `background` is not in
that rule, so it wins normally and is left un-flagged. */
background: var(--gw-pdp-accent-50);
border: 1px solid var(--gw-pdp-accent-100) !important;
border-radius: 0 !important;
font-family: var(--gw-pdp-font);
font-size: 16px;
font-weight: 400;
color: var(--gw-pdp-neutral-600);
}
[data-wetheme-section-type='template--product'] .product-block-text-field input.width-full::placeholder {
color: var(--gw-pdp-neutral-700);
opacity: 1;
}
[data-wetheme-section-type='template--product'] quantity-input label.quantity-selector {
font-family: var(--gw-pdp-font);
font-size: 18px;
font-weight: 400;
line-height: normal;
color: var(--gw-pdp-label-ink);
}
/* The frame writes both form labels with a trailing colon — "Recipient Name *:"
(30:10922) and "Quantity:" (30:10738). Neither is reachable from a setting:
the theme appends its own " *" AFTER the text_field title, and the quantity
label comes from a locale string. Generated content is the only place left
that does not mean editing all 31 locales/*.schema.json. */
[data-wetheme-section-type='template--product'] .product-block-text-field > label::after,
[data-wetheme-section-type='template--product'] quantity-input label.quantity-selector::after {
content: ':';
}
[data-wetheme-section-type='template--product'] quantity-input .js-qty {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 9px 39px;
}
[data-wetheme-section-type='template--product'] quantity-input .js-qty__adjust {
width: 20px;
height: 20px;
padding: 0;
background: none;
border: 0;
color: var(--gw-pdp-neutral-700);
}
[data-wetheme-section-type='template--product'] quantity-input .js-qty__num {
width: auto;
min-width: 0;
padding: 0;
background: none;
border: 0;
text-align: center;
font-family: 'Inter', var(--body-font-stack, sans-serif);
font-size: 16px;
font-weight: 500;
line-height: 1.4;
color: var(--gw-pdp-neutral-700);
}
/* ATC — look only. The class list is Bold's contract and is untouched. */
[data-wetheme-section-type='template--product'] .product--add-to-cart-button {
width: 100%;
height: 56px;
padding-block: 8px;
background: var(--gw-pdp-accent-800);
border: 0;
border-radius: 0;
font-family: var(--gw-pdp-font);
font-size: 18px;
font-weight: 700;
line-height: normal;
letter-spacing: 0;
text-transform: uppercase;
color: #ffffff;
}
/* The button wrapper is a 12px-gap flex row and the theme leaves an EMPTY
dynamic-checkout slot in it (show_smart_checkout is off), so the gap was
counted anyway and the block measured 68 against the frame's 56. */
[data-wetheme-section-type='template--product'] .paymentButtonsWrapper > *:empty {
display: none;
}
/* The reassurance line and the 48/12 bottom padding are one group with the
button in Figma (30:10746), closed by a #F1F3F5 bottom border. */
[data-wetheme-section-type='template--product'] .product-form-block:not(.product-block-text-with-icon-group) > .text-with-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-bottom: 48px;
border-bottom: 1px solid var(--gw-pdp-neutral-100);
}
[data-wetheme-section-type='template--product'] .product-form-block:not(.product-block-text-with-icon-group) > .text-with-icon .text-with-icon--text {
font-family: var(--gw-pdp-font);
font-size: 16px;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
color: var(--gw-pdp-neutral-800);
}
[data-wetheme-section-type='template--product'] .product-form-block:not(.product-block-text-with-icon-group) > .text-with-icon .text-with-icon--icon svg {
display: none;
}
[data-wetheme-section-type='template--product'] .product-form-block:not(.product-block-text-with-icon-group) > .text-with-icon .text-with-icon--icon {
flex: 0 0 auto;
width: 24px;
height: 24px;
}
[data-wetheme-section-type='template--product'] .product-form-block:not(.product-block-text-with-icon-group) > .text-with-icon .text-with-icon--icon::after {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: var(--gw-pdp-neutral-800);
-webkit-mask-image: var(--gw-pdp-prayer-url);
mask-image: var(--gw-pdp-prayer-url);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
@media (max-width: 1024px) {
[data-wetheme-section-type='template--product'] .product-form-block:not(.product-block-text-with-icon-group) > .text-with-icon {
padding-bottom: 12px;
}
}
/* ==========================================================================
8 — ACCORDIONS (Figma 30:10750)
The theme's plus_minus glyph is already a 20 x 20 stroke plus, so only the
box, the type and the rhythm change.
========================================================================== */
/* The theme puts a 1px rgba(36,36,36,0.25) rule on the TOP AND BOTTOM of every
collapsible-tab-container. The frame draws no rule between accordion rows at
all — they are three separate cards with a 12px gap — and those rules were
also what put a stray line above "AS SEEN IN". */
[data-wetheme-section-type='template--product'] .collapsible-tab-container {
border-top: 0;
border-bottom: 0;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-tab {
background: var(--gw-pdp-accent-50);
border: 1px solid var(--gw-pdp-accent-100);
border-radius: 0;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .summary {
display: flex;
align-items: center;
justify-content: space-between;
/* 24 / 23 — stroke inside the frame; 24 + 23.5 + 24 + 2 = 73.5 row height. */
padding: 24px 23px;
min-height: 71px;
}
/* The theme gives .text-with-icon a 16px block margin, which was adding 32 to
every row and putting it at 103.5 against the frame's 73. */
[data-wetheme-section-type='template--product'] .collapsible-tab-container .summary .text-with-icon {
margin: 0;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .summary .text-with-icon--text {
font-family: var(--gw-pdp-font);
font-size: 18px;
font-weight: 400;
line-height: normal;
/* The theme's .label-font uppercases the summary; the frame is title case
("Product Details", not "PRODUCT DETAILS"). */
text-transform: none;
letter-spacing: 0;
color: var(--gw-pdp-neutral-800);
white-space: nowrap;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .summary .icon--right svg {
width: 20px;
height: 20px;
}
/* Open panel (Figma 30:10949, "Shipping & Returns"): the heading keeps its
24 / 23 inset, the body sits 10 below it at the same inset, and the frame
closes 24 under the copy (25 / 24 in Figma includes the 1px stroke). The
frame's glyph is a filled 1.75px-bar plus, not the theme's 1px stroke, so
the Figma asset replaces it; the minus is the same bar without the stem. */
[data-wetheme-section-type='template--product'] .collapsible-tab-container .summary {
transition: padding-bottom .35s cubic-bezier(.25,.46,.45,.94);
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-tab.open .summary {
padding-bottom: 0;
min-height: 0;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .summary .icon--right {
display: block;
flex-shrink: 0;
width: 20px;
height: 20px;
background: url('gw-icon-plus.svg') center / 20px 20px no-repeat;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-tab.open .summary .icon--right {
background-image: url('gw-icon-minus.svg');
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .summary .icon--right svg {
display: none !important;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .content {
margin: 0;
/* 9 + the 15 component-collapsible-button.js adds to the open height = 24. */
padding: 10px 23px 9px;
}
/* Rich text body (Figma 30:10940) — one format for every accordion, whether
the copy comes from the block's rich text or a rich_text metafield. Blocks
stack flush; spacing comes from empty paragraphs, as in the frame. */
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .richtext-block,
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .richtext-block :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
margin: 0;
font-family: var(--gw-pdp-font);
font-size: 18px;
font-weight: 400;
line-height: normal;
letter-spacing: 0;
color: var(--gw-pdp-neutral-800);
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .richtext-block :is(ul, ol) {
/* 27 = 1.5 x 18, the frame's marker indent. One blank line above and
below the list, as in the frame — rich_text metafields cannot hold the
empty paragraphs the frame uses for that gap. */
margin: 1lh 0;
padding: 0 0 0 27px;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .richtext-block ul {
list-style: disc;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .richtext-block ol {
list-style: decimal;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .richtext-block li {
padding: 0;
/* theme.min.css sets `ul li` inside, which pushed the text to 51. */
list-style-position: outside;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .richtext-block li::before {
content: none;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .richtext-block :is(strong, b) {
font-weight: 700;
}
[data-wetheme-section-type='template--product'] .collapsible-tab-container .collapsible-content .richtext-block a {
color: inherit;
background: none;
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-position: from-font;
}
/* ==========================================================================
9 — GW PRESS LOGOS (Figma 31:2 / 31:12)
========================================================================== */
.gw-pdp-press-logos {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
width: 100%;
}
.gw-pdp-press-logos__heading {
margin: 0;
font-family: var(--gw-pdp-font);
font-size: 18px;
font-weight: 400;
line-height: normal;
text-align: center;
text-transform: none;
color: var(--gw-pl-heading-color, #191a1a);
}
.gw-pdp-press-logos__row {
display: flex;
align-items: stretch;
gap: 8px;
width: 100%;
}
.gw-pdp-press-logos__tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
/* 23 — stroke inside the frame. */
padding: 23px;
border: 1px solid var(--gw-pl-tile-border, #e9ded7);
border-radius: 0;
}
/* Figma pins a BOX per logo and letterboxes the artwork inside it with
object-contain — the boxes (141x48, 150x48, 140x40) are not the sources'
own aspect ratios (6.02, 3.97, 3.78), so `height: auto` collapses the tile.
The box is what makes the tile 96 tall: 48 + 23 + 23 + 2 border. */
.gw-pdp-press-logos__img {
display: block;
width: 141px;
height: 48px;
max-width: 100%;
object-fit: contain;
}
.gw-pdp-press-logos__tile:nth-child(2) .gw-pdp-press-logos__img {
width: 150px;
height: 48px;
}
.gw-pdp-press-logos__tile:nth-child(3) .gw-pdp-press-logos__img {
width: 140px;
height: 40px;
}
/* brightness(0), not grayscale(1): the frame's logos are solid BLACK, and
grayscale alone would leave CHARISMA's blue as mid-grey. Transparent pixels
are unaffected, so the artwork keeps its shape. */
.gw-pdp-press-logos--mono .gw-pdp-press-logos__img {
filter: brightness(0);
}
@media (max-width: 1024px) {
.gw-pdp-press-logos__tile {
/* 15 / 11 — stroke inside the frame. */
padding: 15px 11px;
}
/* Mobile drops the fixed boxes: every logo is w-full on its own aspect
ratio, all 79 wide inside a 103 tile. */
.gw-pdp-press-logos__img,
.gw-pdp-press-logos__tile:nth-child(2) .gw-pdp-press-logos__img,
.gw-pdp-press-logos__tile:nth-child(3) .gw-pdp-press-logos__img {
width: 100%;
height: auto;
}
}
/* ==========================================================================
10 — GW COLLECTIVE PROMO (Figma 32:2331 / 32:2572)
Desktop is one row (icon | text | arrow); mobile regroups into two rows
(icon + heading) then (body + arrow). Figma adds two wrapper frames on
mobile that have no desktop counterpart — a grid whose template changes at
the breakpoint serves both from ONE DOM.
========================================================================== */
.gw-pdp-collective-promo {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
'icon heading arrow'
'icon body arrow';
align-items: center;
gap: 12px 16px;
/* 15 — stroke inside the frame. */
padding: 15px;
background: var(--gw-cp-bg, #fdfaf4);
border: 1px solid var(--gw-cp-border, #f2ead8);
border-radius: 0;
color: var(--gw-cp-text-color, #252626);
text-decoration: none;
}
.gw-pdp-collective-promo__icon {
grid-area: icon;
display: block;
width: 68px;
height: 62px;
color: var(--gw-cp-icon-color, #897244);
/* The sits at inset 0 / -3.07% / -3.18% / -3.16% and the node is NOT
overflow-clip, so the bleed renders. Reproduced with a negative margin
rather than by growing the box, which would move the 16px gap. */
margin: 0 -2.09px -1.97px -2.15px;
}
.gw-pdp-collective-promo__icon svg,
.gw-pdp-collective-promo__icon-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.gw-pdp-collective-promo__heading {
grid-area: heading;
margin: 0;
font-family: var(--gw-pdp-font);
font-size: 20px;
font-weight: 500;
line-height: normal;
text-transform: none;
color: inherit;
}
.gw-pdp-collective-promo__body {
grid-area: body;
margin: 0;
font-family: var(--gw-pdp-font);
font-size: 16px;
font-weight: 400;
line-height: normal;
color: inherit;
}
.gw-pdp-collective-promo__arrow {
grid-area: arrow;
font-family: var(--gw-pdp-font);
font-size: 16px;
font-weight: 800;
line-height: normal;
white-space: nowrap;
color: var(--gw-pdp-neutral-900);
}
@media (max-width: 1024px) {
.gw-pdp-collective-promo {
grid-template-columns: auto 1fr auto;
grid-template-areas:
'icon heading heading'
'body body arrow';
gap: 16px;
}
.gw-pdp-collective-promo__icon {
width: 46px;
height: 41.9412px;
}
}
/* ==========================================================================
11 — EDITOR PLACEHOLDERS
Only ever rendered under request.design_mode; preview and live emit nothing.
========================================================================== */
.gw-pdp-placeholder {
padding: 16px;
border: 1px dashed var(--gw-pdp-accent-600);
background: var(--gw-pdp-accent-50);
font-family: var(--gw-pdp-font);
font-size: 14px;
line-height: 1.4;
color: var(--gw-pdp-accent-900);
}
/* ==========================================================================
12 — MOBILE TYPE STEPS
The only type that changes between breakpoints.
========================================================================== */
@media (max-width: 1024px) {
[data-wetheme-section-type='template--product'] h1.product-details-product-title {
font-size: 40px;
/* Present on mobile 30:11018 only. No visible effect on "Georgia
Necklace"; reproduced because the frame carries it. */
text-transform: capitalize;
}
}