. */
.rc-home-hero picture,
.rc-home-hero .rc-hero-image {
display: none;
}
/* ===================== BESTSELLERS ===================== */
.rc-home .rc-home-bestsellers {
background: var(--rc-white);
padding: 40px 20px 64px; /* top matches the heading's margin-bottom below → even spacing around the header */
}
/* Bestsellers has no sub-heading, so override the shared 8px so the header has equal
space above (section padding-top) and below (before the cards). */
.rc-home-bestsellers .rc-section-heading {
margin-bottom: 40px;
}
.rc-home-bestsellers .rc-product-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
max-width: 912px;
margin: 0 auto;
}
/* Tablet (769–1199px): the 216px cards are fixed-width, so the 912px row simply fits as many
as the viewport allows — at tablet widths that is three, leaving a lone orphan card centred
underneath. V5 feedback 2026-08-27 ("Should this go to 2x2?" → Moiz: "yes"): cap the row to
two cards (2 × 216 + 16 gap) so the four bestsellers read as a balanced 2×2 block. */
@media (min-width: 769px) and (max-width: 1199px) {
.rc-home-bestsellers .rc-product-cards {
max-width: 448px;
}
}
.rc-home-bestsellers .rc-product-card {
width: 216px;
display: flex;
flex-direction: column;
text-align: center;
}
.rc-home-bestsellers .rc-product-card__media {
width: 216px;
height: 216px;
overflow: hidden;
}
.rc-home-bestsellers .rc-product-card__media img {
display: block;
width: 100%;
height: 100%; /* resolves reliably: parent is a plain block with a definite 216px height (the flex item's height:100% did not resolve → tall bottles clipped) */
object-fit: contain; /* whole cutout fits, centered by object-position */
padding: 8px; /* product sits close to the tile border per Figma */
box-sizing: border-box; /* padding is inside the 216px, so the fit box is 200×200 */
}
.rc-home-bestsellers .rc-product-card__title {
font-family: var(--rc-font) !important; /* theme brandon !important list */
font-weight: var(--rc-weight-medium);
font-size: var(--rc-text-product-size);
line-height: var(--rc-text-product-lh);
letter-spacing: 0;
text-transform: none;
color: var(--rc-navy);
margin: 16px 0 8px; /* +4px between product name and price (business ask 2026-08-14) */
/* Bottom-align the name in its reserved 2-line box so the price beneath sits at the same
baseline across cards regardless of 1- vs 2-line names (homepage feedback 2026-08-20). */
min-height: 44px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.rc-home-bestsellers .rc-product-card__price {
font-family: var(--rc-font);
font-weight: var(--rc-weight-regular); /* comp "Desktop/Price" = Jost Regular 400 (title is 500) */
font-size: calc(14px * var(--rc-scale)); /* homepage feedback 2026-08-20: price −2px (16→14 base), still tracks the card scale */
line-height: 18px; /* comp price lh = 18 (not the 22 title lh) */
color: var(--rc-navy);
margin: 0 0 16px;
}
.rc-home-bestsellers .rc-product-card__cta {
margin: auto 0 0;
}
/* Mobile: 2×2 grid (business ask 2026-08-14) — the fixed 216px cards previously fell to a
single column of 4. Cards go half-width and the media becomes a fluid square. */
@media (max-width: 768px) {
.rc-home-bestsellers .rc-product-cards {
gap: 12px;
}
.rc-home-bestsellers .rc-product-card {
width: calc(50% - 6px);
}
.rc-home-bestsellers .rc-product-card__media {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
/* The CTA's 192px min-width overflowed the ~170px mobile card, so the two columns' SHOP
buttons touched across the gap. Let the button fill its (narrower) card instead. */
.rc-home-bestsellers .rc-product-card__cta .rc-btn {
min-width: 0;
width: 100%;
}
}
/* ===================== GUARANTEES ===================== */
.rc-home .rc-home-guarantees {
background: var(--rc-light-blue);
padding: 36px 20px;
}
.rc-home-guarantees .rc-guarantees {
display: flex;
justify-content: center;
gap: 48px;
max-width: 1160px;
margin: 0 auto;
}
.rc-home-guarantees .rc-guarantee {
width: 262px;
flex: 0 0 262px;
text-align: center;
}
/* icon = clean Figma icon asset (icon-only, no caption) used as a mask so it renders in the
brand navy token (#05264F) instead of the source's legacy #14274e. mask-size:contain shows
the whole icon. */
.rc-home-guarantees .rc-icon {
display: inline-block;
width: 62px;
height: 62px;
background-color: var(--rc-navy);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.rc-home-guarantees .rc-icon--shipping { -webkit-mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-free-shipping.png'); mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-free-shipping.png'); }
.rc-home-guarantees .rc-icon--care { -webkit-mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-crafted-with-care.png'); mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-crafted-with-care.png'); }
.rc-home-guarantees .rc-icon--nocompromises { -webkit-mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-no-compromises.png'); mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-no-compromises.png'); }
.rc-home-guarantees .rc-guarantee__title {
font-family: var(--rc-font) !important; /* theme brandon !important list */
font-weight: var(--rc-weight-medium);
font-size: var(--rc-text-product-size);
line-height: var(--rc-text-product-lh);
letter-spacing: 0;
text-transform: uppercase;
color: var(--rc-navy);
margin: 12px 0 8px;
}
.rc-home-guarantees .rc-guarantee__text {
font-family: var(--rc-font);
font-weight: var(--rc-weight-regular);
font-size: var(--rc-text-body-size);
line-height: var(--rc-text-body-lh);
color: var(--rc-navy);
margin: 0;
}
/* FAQ link reads as underlined body copy, not a red anchor (homepage feedback 2026-08-20):
inherit the surrounding navy + underline. 3-class scope beats the rebrand red-anchor rule. */
.rc-home-guarantees .rc-guarantee__text a {
color: inherit;
text-decoration: underline;
}
/* Mobile: stack the three columns. Desktop uses `flex: 0 0 262px` with 48px gaps and no
wrap → 3×262 + 2×48 = 882px, forcing the whole page wider than the viewport (horizontal
scroll; the 3rd column spills off-screen). Column layout drops the fixed basis and the
icons stack one per row. */
@media (max-width: 768px) {
.rc-home-guarantees .rc-guarantees {
flex-direction: column;
align-items: center;
gap: 32px;
}
.rc-home-guarantees .rc-guarantee {
flex: 0 0 auto;
width: 100%;
max-width: 320px;
}
/* Larger guarantee copy on mobile (business ask 2026-08-14). */
.rc-home-guarantees .rc-guarantee__text {
font-size: 18px;
line-height: 26px;
}
}
/* Tablet (769–1199px): the desktop row is rigid — flex: 0 0 262px + 48px gaps = 882px
(~922px with padding), which overflows any viewport narrower than that (e.g. iPad Air
820px) since the columns can't shrink. Keep the 3-column row but let the columns
shrink and tighten the gap so the band always fits without horizontal scroll. */
@media (min-width: 769px) and (max-width: 1199px) {
.rc-home-guarantees .rc-guarantees {
gap: 32px;
}
.rc-home-guarantees .rc-guarantee {
flex: 1 1 0;
width: auto;
min-width: 0;
max-width: 262px;
}
}
/* ===================== REVIEWS ===================== */
.rc-home .rc-home-reviews {
background: var(--rc-white);
padding: 64px 20px;
}
.rc-home-reviews .rc-reviews {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch; /* all cards match the tallest → equal-height lilac boxes */
gap: 17px;
max-width: 916px;
margin: 0 auto;
}
/* Tablet (769–1199px): same orphan-card problem as Bestsellers — three across, one centred
below. V5 feedback 2026-08-27 ("Should this be 2x2?" → Moiz: "Yes"): cap the row to two cards
(2 × 216 + 17 gap). Tracked separately from the bestsellers ask — the meeting note collapsed
the two into one "product grid" item. */
@media (min-width: 769px) and (max-width: 1199px) {
.rc-home-reviews .rc-reviews {
max-width: 449px;
}
}
.rc-home-reviews .rc-review {
width: 216px;
flex: 0 0 216px;
margin: 0;
text-align: center;
}
/* card = lilac tile with the circular photo overlapping its top edge (comp 1:76).
flex column so the body fills the (equalized) card height and the name pins to the bottom. */
.rc-home-reviews .rc-review {
position: relative;
display: flex;
flex-direction: column;
padding-top: 70px; /* photo half-height above the tile */
}
.rc-home-reviews .rc-review__photo {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 141px;
height: 141px;
border-radius: 50%;
object-fit: cover;
z-index: 1;
}
.rc-home-reviews .rc-review__body {
background: var(--rc-lilac);
padding: 84px 16px 24px; /* clears the overlapping photo bottom half */
min-height: 242px;
flex: 1 1 auto; /* fill the equalized card height */
display: flex;
flex-direction: column; /* stars (top) · quote (variable) · name (bottom) */
}
.rc-home-reviews .rc-review__stars {
color: var(--rc-navy);
font-size: 15px;
letter-spacing: 2px;
margin: 0 0 12px;
}
.rc-home-reviews .rc-review__quote {
font-family: var(--rc-font);
font-weight: var(--rc-weight-regular);
font-size: 17px; /* business ask 2026-08-14 (was body token → 16.25 on scaled desktop); literal, desktop + mobile */
line-height: 24px;
color: var(--rc-navy);
margin: 0 0 12px;
padding: 0;
border: 0;
background: none;
quotes: none;
}
/* kill the theme/snippet blockquote decorations (icon-font :before renders as tofu) */
.rc-home-reviews .rc-review__quote:before,
.rc-home-reviews .rc-review__quote:after {
content: none !important; /* theme blockquote:before icon-font glyph */
}
/* wpautop wraps quote text in ; theme blockquote p rules are larger/italic */
.rc-home-reviews .rc-review__quote p {
font: inherit;
color: inherit;
font-style: normal;
margin: 0;
padding: 0;
}
.rc-home-reviews .rc-review__name {
font-family: var(--rc-font);
font-weight: var(--rc-weight-regular);
font-size: var(--rc-text-body-size);
line-height: var(--rc-text-body-lh);
color: var(--rc-navy);
margin-top: auto; /* pin to the bottom so all names sit at the same level */
}
/* Mobile: show only the two featured reviews (Figma mobile 1:76), Abbie above Courtney;
desktop keeps all four. */
@media (max-width: 768px) {
.rc-home-reviews .rc-review--debbie,
.rc-home-reviews .rc-review--jody {
display: none;
}
.rc-home-reviews .rc-review--abbie { order: 1; }
.rc-home-reviews .rc-review--courtney { order: 2; }
/* Wider review cards on mobile — the fixed 216px boxes left too much side whitespace
(business ask 2026-08-14). They stack one per row, so let them fill the column. */
.rc-home-reviews .rc-review {
width: 100%;
flex-basis: auto;
max-width: 360px;
}
}
/* ===================== SCENTS ===================== */
.rc-home .rc-home-scents {
background: var(--rc-light-blue);
padding: 64px 20px;
}
.rc-home-scents .rc-scents {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
max-width: 912px;
margin: 0 auto;
}
.rc-home-scents .rc-scent-tile {
position: relative;
width: 216px;
height: 216px;
}
.rc-home-scents .rc-scent-tile__img {
display: block;
width: 216px;
height: 216px;
object-fit: cover;
}
/* SHOP overlay — Figma 296:146: a compact 94x94 square centered in the tile (both
axes), with the label centered inside. (Supersedes the earlier 192px bottom-anchored bar.)
Font size is best-judgment to fit the square; at the >=1200 scale it lands ~16px, honoring the
2026-08-14 16px ask on the primary desktop view. */
.rc-home-scents .rc-scent-tile__btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column; /* two-line label: SHOP / scent name */
align-items: center;
justify-content: center;
text-align: center;
width: 94px;
height: 94px;
min-width: 94px;
max-width: 94px;
min-height: 94px;
color: var(--rc-white);
font-size: 13px;
line-height: 15px;
letter-spacing: .03em;
padding: 6px;
}
.rc-home-scents .rc-scent-tile__btn-name {
display: block;
font-size: 13px;
line-height: 15px;
}
/* scent-colored SHOP buttons — primary scent tokens */
.rc-home-scents .rc-scent-btn--rose-hips { background: var(--rc-scent-rose-hips); }
.rc-home-scents .rc-scent-btn--coconut-vanilla { background: var(--rc-scent-coconut-vanilla); }
.rc-home-scents .rc-scent-btn--jasmine-orange-blossom { background: var(--rc-scent-jasmine-orange-blossom); }
.rc-home-scents .rc-scent-btn--vanilla-cashmere-oak { background: var(--rc-scent-vanilla-cashmere-oak); }
.rc-home-scents .rc-scent-btn--cucumber { background: var(--rc-scent-cucumber); }
.rc-home-scents .rc-scent-btn--lavender-cedar { background: var(--rc-scent-lavender-cedar); }
.rc-home-scents .rc-scent-tile__btn:hover {
filter: brightness(0.9);
color: var(--rc-white);
}
/* V4 feedback 2026-08-26 (#7 "keep text white on click"): the scent buttons are anchor .rc-btns,
so the legacy theme rule `a:focus { color:#ef4036 !important }` (style.css) repaints the label
red while pressed/focused — red-on-scent-colour, unreadable. Their background is never white, so
force the label white in every interactive state; !important + the type selector beat a:focus. */
.rc-home-scents a.rc-scent-tile__btn:hover,
.rc-home-scents a.rc-scent-tile__btn:focus,
.rc-home-scents a.rc-scent-tile__btn:focus-visible,
.rc-home-scents a.rc-scent-tile__btn:active {
color: var(--rc-white) !important;
}
/* Mobile: 2×3 grid of the six scents (business ask 2026-08-14) — the fixed 216px tiles
previously fell to a single column. Tiles go half-width fluid squares; the on-tile button
drops its 192px min-width so it fits the narrower tile. */
@media (max-width: 768px) {
.rc-home-scents .rc-scents {
gap: 12px;
}
.rc-home-scents .rc-scent-tile {
width: calc(50% - 6px);
height: auto;
aspect-ratio: 1 / 1;
}
.rc-home-scents .rc-scent-tile__img {
width: 100%;
height: 100%;
}
/* Fluid tiles: keep the SHOP box a centered square proportional to the tile. */
.rc-home-scents .rc-scent-tile__btn {
width: 60%;
height: 60%;
min-width: 0;
max-width: none;
min-height: 0;
}
}
/* ===================== DESKTOP ZOOM/SCALE — HOME-SPECIFIC OVERRIDES =====================
The --rc-scale 1.25 dial itself now lives in rc-brand.css (site-wide, >=1200px) so the shell
scales on every rebrand surface — see the note there. This block holds only the HOME-specific
fixed-px overrides that must move with the dial: scaled tile + grid max-width move together so
the 4-up rows keep their column count instead of rewrapping to 3-up, and the review photo's
clearances scale so the larger photo doesn't overlap the quote. Same 1200px breakpoint as the
dial (below it the scaled grids 912→1140 would crowd the viewport). Mobile (≤768px) untouched. */
@media (min-width: 1200px) {
/* The hero is NOT in this list any more. The before/after band takes its height from the
artwork's own aspect ratio and places the copy in percentages, so it already grows with
the viewport; the old `min-height: calc(720px * scale)` + capped background-size belonged
to the centred-lineup hero and would freeze the new band at 900px. */
/* bestsellers — tiles + grid width together (stays 4-up) */
.rc-home-bestsellers .rc-product-cards { max-width: calc(912px * var(--rc-scale)); gap: calc(16px * var(--rc-scale)); }
.rc-home-bestsellers .rc-product-card { width: calc(216px * var(--rc-scale)); }
.rc-home-bestsellers .rc-product-card__media { width: calc(216px * var(--rc-scale)); height: calc(216px * var(--rc-scale)); }
/* guarantees — max-width is only a cap (items fit), so scale items + gap + icon, not the cap */
.rc-home-guarantees .rc-guarantees { gap: calc(48px * var(--rc-scale)); }
.rc-home-guarantees .rc-guarantee { width: calc(262px * var(--rc-scale)); flex-basis: calc(262px * var(--rc-scale)); }
.rc-home-guarantees .rc-icon { width: calc(62px * var(--rc-scale)); height: calc(62px * var(--rc-scale)); }
/* reviews — cards + grid width + photo, and the photo clearances so it doesn't overlap the quote */
.rc-home-reviews .rc-reviews { max-width: calc(916px * var(--rc-scale)); gap: calc(17px * var(--rc-scale)); }
.rc-home-reviews .rc-review { width: calc(216px * var(--rc-scale)); flex-basis: calc(216px * var(--rc-scale)); padding-top: calc(70px * var(--rc-scale)); }
.rc-home-reviews .rc-review__photo { width: calc(141px * var(--rc-scale)); height: calc(141px * var(--rc-scale)); }
.rc-home-reviews .rc-review__body { padding-top: calc(84px * var(--rc-scale)); min-height: calc(242px * var(--rc-scale)); }
/* scents — tiles + grid width + the on-tile button */
.rc-home-scents .rc-scents { max-width: calc(912px * var(--rc-scale)); gap: calc(16px * var(--rc-scale)); }
.rc-home-scents .rc-scent-tile,
.rc-home-scents .rc-scent-tile__img { width: calc(216px * var(--rc-scale)); height: calc(216px * var(--rc-scale)); }
.rc-home-scents .rc-scent-tile__btn {
width: calc(94px * var(--rc-scale));
height: calc(94px * var(--rc-scale));
min-width: calc(94px * var(--rc-scale));
max-width: calc(94px * var(--rc-scale));
min-height: calc(94px * var(--rc-scale));
font-size: calc(13px * var(--rc-scale));
line-height: calc(15px * var(--rc-scale));
}
.rc-home-scents .rc-scent-tile__btn-name { font-size: calc(13px * var(--rc-scale)); line-height: calc(15px * var(--rc-scale)); }
}