(or an ), not
* in a . Centre the item itself and its link.
*
* SMALLER: 14px -> 12px on mobile only (the desktop 14px from R2.1 stands).
* Driven by the same setting hook so the client can still tune it.
*/
.utility-bar .utility-bar__item,
.utility-bar .utility-bar__item a,
.utility-bar .utility-bar__item p {
text-align: center;
/*
* SWEEP FIX (2026-08-13): this needs !important, and only because the
* theme's own type scale uses it first — `.body--small-mobile { font-size:
* var(--font-body-small-mobile) !important }` in the same stylesheet. The
* announcement
carries that class from the section's mobile_text_style
* setting, so an ordinary declaration here LOSES no matter how specific or
* how late it is.
*
* Net effect before this fix: R2.13's "Text size (mobile)" control was
* inert — the var resolved to 12px while the bar rendered 14px. Found by
* the runtime sweep, not by the client.
*
* This is `!important` against a rule we own, which is normally a smell —
* the cleaner fix is to drop !important from .body--small-mobile, but that
* is a shared type token used across the theme and out of scope here.
*/
font-size: var(--announcement-font-size-mobile, 12px) !important;
}
}
/* Header */
.section-header.shopify-section-group-header-group {
z-index: 3;
}
/*
* Purlisse redesign (G1.3, revised R2 2026-08-05): nav + utility links.
*
* TYPE READ FROM THE FIGMA INSPECT PANEL (Alex selected each layer) — NOT
* derived from the PNG export. Both "BEST SELLERS" and "SEARCH" come back
* IDENTICAL: Nunito 16px / 700 / #000. The build was rendering 15px / 400.
*
* (My cap-height derivation from the export said 16.3px for the nav and 21.3px
* for the announcement text; the panel says 16px for both. Panel wins — see
* SOP RULE 0.6 point 5.)
*/
.header__inline-menu .header__menu-item,
.header__inline-menu .header__menu-item a,
.header__inline-menu .header__menu-item span,
.header__icons .header__icon,
.header__icons .header__icon .body {
text-transform: uppercase;
font-family: var(--font-heading-family);
font-size: var(--header-nav-font-size, 16px);
font-weight: 700;
color: #7c7772;
}
/*
* R4.4 (client): text-size slider for the header navigation links.
*
* The 16px is the Figma Inspect panel value (see the note above), so it is
* the FALLBACK and the schema default — the design is preserved unless the
* merchant deliberately moves the slider.
*
* The variable is emitted by sections/header.liquid. Both the left nav and
* the right utility links share this rule, so one control moves all six
* labels together, which is what keeps the two sides matching (the whole
* point of the R2 FAIL 1/2 work documented above).
*/
font-size: var(--header-nav-font-size, 16px);
font-weight: 700;
color: #000000;
}
/*
* R2 FAIL 1 (Alex 2026-08-05): "left side menu link styling does not match the
* right side".
*
* The inner .body spans on the right were ALREADY correct (16px/700/uppercase,
* identical to the left nav) — the mismatch came from their WRAPPER /,
* which sat at 18px/400 and, on SEARCH only, `line-height: 0`. That zero
* line-height is what made SEARCH sit on a different baseline from LOG IN/CART
* and from the left nav.
*
* Pinning the wrapper (added above) plus a shared line-height makes both sides
* resolve to one style. Panel value for both: Nunito 16px / 700 / #000.
*/
.header__inline-menu .header__menu-item,
.header__inline-menu .header__menu-item a,
.header__inline-menu .header__menu-item span,
.header__icons .header__icon,
.header__icons .header__search,
.header__icons .header__search .body,
.header__icons .header__icon .body {
/*
* R4.4: was a hardcoded 25.6px, i.e. 1.6 x the 16px design size. Expressed as
* a ratio so it SCALES with the slider — a fixed line-height would clip
* descenders at larger sizes and leave a slack row at smaller ones. Same
* value at the default: 16 x 1.6 = 25.6px.
*/
line-height: 1.6;
}
/*
* R2 FAIL 2 (Alex 2026-08-05): "they still don't match visually".
*
* The DECLARED styles were already identical on both sides — that is why a
* computed-style comparison passed while the render plainly did not. Measuring
* the TEXT INK instead showed the truth: left glyphs 28.8px tall on baseline
* y94, right 21.5px on y98.
*
* A probe span rendering the same string in each context came back 136.6px on
* BOTH sides, which ruled out a different font face.
*
* THE REAL CAUSE: the LEFT nav's text is not in the element being styled — it
* sits in a nested `` at 18px / 500 / lh 28.8px.
* Styling `.header__menu-item` left that inner span untouched, so the LEFT was
* oversized while the RIGHT (whose label is a direct text node) was already
* correct at 16px. So the LEFT was wrong, not the right.
*
* And the nesting is NOT uniform: BESTSELLERS (a dropdown) has the span as a
* DIRECT child, while SKINCARE / MAKEUP / VALUE SETS nest it inside an . A
* `> span` child selector therefore fixed only the first item — hence the
* descendant selectors (`... a`, `... span`) here.
*
* Lesson: computed style on the element you assume is styled is not proof —
* measure the rendered ink, and walk the whole ancestor chain.
*/
/* Per-design: desktop utility = text labels (no icons); mobile = icons (no text) */
@media screen and (min-width: 750px) {
.header__icons .header__icon > svg,
.header__icons .header__icon .icon {
display: none;
}
}
@media screen and (max-width: 749px) {
.header__icons .header__icon .body,
.header__search--mobile .header__icon .body,
.header__search--mobile .body {
display: none;
}
.header__icons .header__icon > svg,
.header__icons .header__icon .icon,
.header__search--mobile svg,
.header__search--mobile .icon {
display: block;
width: 24px;
height: 24px;
}
}
.shopify-section-header-sticky {
position: sticky;
top: -1px;
}
.shopify-section-header-hidden {
top: calc(-1 * var(--header-height));
}
.shopify-section-header-hidden.menu-open {
top: 0;
}
.section-header.animate {
transition: top 0.15s ease-out;
}
.shopify-section-group-header-group {
z-index: 3;
}
.section-header ~ .shopify-section-group-header-group {
z-index: initial;
}
.header-wrapper {
display: block;
position: relative;
background-color: rgb(var(--color-background));
}
.header {
display: flex;
flex-flow: wrap;
align-items: center;
gap: 1rem;
row-gap: 2rem;
}
@media screen and (min-width: 750px) {
/* Logo, Menu (Left), Icons */
.header.header--logo-menu_left-icons .header__inline-menu {
flex-grow: 1;
}
.header.header--logo-menu_left-icons .header__icons {
margin-left: auto;
}
/* Logo, Menu (Center), Icons */
.header.header--logo-menu_center-icons .header__inline-menu {
flex-grow: 1;
justify-content: center;
}
/* Logo, Menu (Below, Left), Icons */
.header.header--logo-menu_below_left-icons .header__inline-menu {
flex: 0 0 100%;
}
.header.header--logo-menu_below_left-icons .header__icons {
margin-left: auto;
}
/* Logo, Menu (Below, Center), Icons */
.header.header--logo-menu_below_center-icons .header__inline-menu {
justify-content: center;
flex: 0 0 100%;
}
.header.header--logo-menu_below_center-icons .header__icons {
margin-left: auto;
}
/* Menu, Logo (Left), Icons */
.header.header--menu-logo_left-icons .header__logo {
display: flex;
flex-grow: 1;
}
.header.header--menu-logo_left-icons .header__icons {
margin-left: auto;
}
/* Menu, Logo (Center), Icons */
.header.header--menu-logo_center-icons .header__logo {
display: flex;
flex-grow: 1;
justify-content: center;
}
/*
* Purlisse redesign (R2 2026-08-05): TRUE optical centring.
*
* `flex-grow:1` on the logo alone centres it within the LEFTOVER space, not
* within the header — so with a wide nav (494px) and narrow icons (198px) the
* mark landed at x868 instead of the page centre 720. The design has the logo
* on the page centre (x657..836.5 of 1494 = centre 747 = frame centre).
*
* Giving the nav and icon columns equal flex-basis makes the three columns
* symmetric, so the centre column is genuinely centred at any width.
*/
.header.header--menu-logo_center-icons .header__inline-menu,
.header.header--menu-logo_center-icons .header__icons {
flex: 1 1 0;
min-width: 0;
}
.header.header--menu-logo_center-icons .header__icons {
justify-content: flex-end;
}
.header.header--menu-logo_center-icons .header__logo {
flex: 0 0 auto;
}
}
@media screen and (max-width: 749px) {
.header {
display: grid;
grid-template-columns: auto 1fr auto;
}
/* Logo, Menu (Left), Icons */
.header.header--menu-logo_left-icons-mobile {
grid-template-columns: auto 1fr 1fr;
}
.header.header--menu-logo_left-icons-mobile .header__menu-drawer {
order: 1;
}
.header.header--menu-logo_left-icons-mobile .header__logo {
order: 2;
justify-self: flex-start;
}
.header.header--menu-logo_left-icons-mobile .header__icons {
order: 3;
}
/*
* Purlisse redesign (G1.3): mobile header per Figma —
* hamburger + search (left) · logo (center) · cart+account (right).
* A standalone .header__search--mobile is rendered as a direct grid
* child (see header.liquid); place it in the left group and center logo.
*/
.header.header--menu-logo_left-icons-mobile {
grid-template-columns: auto auto 1fr auto;
align-items: center;
}
.header.header--menu-logo_left-icons-mobile .header__search--mobile {
order: 2;
justify-self: start;
display: block;
}
.header.header--menu-logo_left-icons-mobile .header__logo {
order: 3;
justify-self: center;
}
.header.header--menu-logo_left-icons-mobile .header__icons {
order: 4;
justify-self: end;
}
/* Hide the search that lives inside the right icon cluster on mobile
(it now lives in the standalone left slot) */
.header.header--menu-logo_left-icons-mobile .header__icons .header__search {
display: none;
}
/* Logo, Menu (Center), Icons */
.header.header--menu-logo_center-icons-mobile {
grid-template-columns: 1fr auto 1fr;
}
.header.header--menu-logo_center-icons-mobile .header__menu-drawer {
order: 1;
}
.header.header--menu-logo_center-icons-mobile .header__logo {
order: 2;
}
.header.header--menu-logo_center-icons-mobile .header__icons {
order: 3;
}
/* Icons, Logo (left), Menu */
.header.header--icons-logo_left-menu-mobile {
grid-template-columns: auto 1fr 1fr;
}
.header.header--icons-logo_left-menu-mobile .header__menu-drawer {
order: 3;
justify-self: end;
}
.header.header--icons-logo_left-menu-mobile .header__logo {
justify-self: flex-start;
order: 2;
}
.header.header--icons-logo_left-menu-mobile .header__icons {
order: 1;
}
/* Icons, Logo (center), Menu */
.header.header--icons-logo_center-menu-mobile {
grid-template-columns: 1fr auto 1fr;
}
.header.header--icons-logo_center-menu-mobile .header__menu-drawer {
order: 3;
justify-self: flex-end;
}
.header.header--icons-logo_center-menu-mobile .header__logo {
order: 2;
}
.header.header--icons-logo_center-menu-mobile .header__icons {
order: 1;
justify-self: flex-start;
}
}
.header *[tabindex='-1']:focus {
outline: none;
}
/* Purlisse redesign (G1.3): standalone mobile search — hidden on desktop */
.header__search--mobile {
display: none;
}
/* Logo */
.header__logo {
margin: 0;
line-height: 0;
justify-self: center;
text-align: center;
}
.header__logo svg {
width: var(--logo-width);
}
.header__heading-logo {
height: auto;
max-width: 100%;
vertical-align: middle;
}
/* Asset logo (Purlisse black wordmark): size from --logo-width per viewport */
.header__heading-logo--asset {
width: var(--logo-width-mobile, var(--logo-width));
}
@media screen and (min-width: 750px) {
.header__heading-logo--asset {
width: var(--logo-width);
}
}
/* Header menu */
.header__inline-menu {
display: none;
}
@media screen and (min-width: 750px) {
.header__inline-menu {
display: flex;
justify-content: flex-start;
}
}
.header__inline-menu .list-menu {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.header__menu {
padding: 0 1rem;
}
.header__menu-item {
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.3rem;
justify-content: space-evenly;
transition: opacity var(--duration-default) ease;
font-size: 15px;
}
.header__menu-item svg {
height: auto;
pointer-events: none;
width: 10px;
vertical-align: super;
transition: all var(--duration-default) ease;
}
.header__menu-item.unactive {
opacity: 0.6;
}
.header__menu-item .icon-caret {
right: 0.8rem;
}
header-menu > details,
details-disclosure > details {
position: relative;
}
@keyframes animateMenuOpen {
0% {
opacity: 0;
transform: translateY(-1.5rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Header icons */
.header__icons {
display: flex;
justify-content: end;
align-items: center;
gap: 1rem;
}
.header__icons--half {
gap: 0.5rem;
}
@media screen and (min-width: 750px) {
.header__icons--relative {
position: relative;
}
}
.header__icons .shopify-app-block,
.header__icon {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 2px;
height: auto;
width: auto;
padding: 0;
position: relative;
}
.header__button .icon,
.header__icon .icon {
height: var(--icon-size);
width: var(--icon-size);
fill: none;
}
.header__icon span {
height: 100%;
}
.header__button {
width: auto;
gap: 0.5rem;
align-items: center;
border-radius: var(--inputs-radius);
}
account-icon {
display: flex;
}
/* Cart Bubbles */
.cart-count-bubble:empty {
display: none;
}
.visually-hidden + .cart-count-bubble {
position: absolute;
line-height: 1;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-body-xsmall);
top: 50%;
left: 50%;
transform: translate(-50%, -25%);
}
.header__button .cart-count-bubble {
top: 0;
right: 0;
transform: translate(50%, -50%);
left: auto;
height: var(--icon-size);
width: var(--icon-size);
border-radius: 50%;
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
}
.header__icon--cart.pulsate {
animation: tada 1s infinite;
}
.header__icon--cart.pulsate .cart-count-bubble {
box-shadow: 0 0 0 0 rgb(0 119 200 / 10%), 0 0 0 0 rgb(0 128 200 / 28%),
0 0 0 0 rgb(0 109 200 / 30%);
animation: pulsate 1s infinite ease-in-out;
}
@keyframes tada {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulsate {
100% {
box-shadow: 0 0 0 40px rgba(0, 200, 0, 0), 0 0 0 80px rgba(0, 200, 0, 0),
0 0 0 160px rgba(0, 200, 0, 0);
}
}
/* Search */
.header__search {
display: inline-flex;
line-height: 0;
}
.header__search--inline {
min-width: 300px;
}
.search-modal__form {
width: 100%;
}
.header__search-form {
display: flex;
align-items: center;
justify-content: center;
}
.header__search-form .field__input {
border-top-left-radius: var(--inputs-radius);
border-bottom-left-radius: var(--inputs-radius);
}
.header__search-form .button {
width: auto;
min-width: 2rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--inputs-radius);
border-bottom-right-radius: var(--inputs-radius);
}
details[open] > .search-modal {
opacity: 1;
animation: animateMenuOpen var(--duration-default) ease;
}
details[open] .modal-overlay {
display: block;
}
details[open] .modal-overlay::after {
position: absolute;
content: '';
background-color: rgb(var(--color-foreground), 0.5);
top: 100%;
left: 0;
right: 0;
height: 100vh;
}
.search-modal {
opacity: 0;
height: calc(var(--inputs-height) + 3rem);
top: 100%;
overflow: visible;
padding: 0;
margin-bottom: 0;
position: absolute;
left: 0;
width: 100%;
}
@media screen and (max-width: 749px) {
.search-modal {
height: calc(var(--inputs-height) + 1rem);
}
}
.search-modal__content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
}
/* Header menu drawer */
.header__icon--menu .icon {
display: block;
opacity: 1;
transform: scale(1);
transition: transform 150ms ease, opacity 150ms ease;
}
.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
visibility: hidden;
}
/* Badges */
.badge {
border: 1px solid transparent;
border-radius: var(--badge-corner-radius);
display: inline-block;
z-index: 1;
line-height: 1;
position: absolute;
top: 8px;
right: 8px;
padding: 5px 10px;
text-align: left;
background-color: rgb(var(--color-badge-background));
border: 0;
color: rgb(var(--color-badge-foreground));
text-transform: uppercase;
word-break: break-word;
}
.badge.badge--text {
font-weight: 500;
font-size: 12px;
padding: 6px 12px;
}
.badge.badge--image {
position: absolute;
top: 12px;
right: 20px;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
z-index: 1;
padding: 0;
overflow: hidden;
background: none;
}
.gradient {
background: rgb(var(--color-background));
background: var(--gradient-background);
background-attachment: fixed;
}
@media screen and (forced-colors: active) {
.icon {
color: CanvasText;
fill: CanvasText !important;
}
.icon-close-small path {
stroke: CanvasText;
}
}
/* RTE */
.rte:after {
clear: both;
content: '';
display: block;
}
.rte > *:first-child {
margin-top: 0;
}
.rte > *:last-child {
margin-bottom: 0;
}
.rte table {
table-layout: fixed;
}
@media screen and (min-width: 750px) {
.rte table td {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
}
.rte img {
height: auto;
max-width: 100%;
border: var(--media-border-width) solid
rgba(var(--color-foreground), var(--media-border-opacity));
border-radius: var(--media-radius);
box-shadow: var(--media-shadow-horizontal-offset)
var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
rgba(var(--color-shadow), var(--media-shadow-opacity));
margin-bottom: var(--media-shadow-vertical-offset);
}
.rte ul,
.rte ol {
list-style-position: inside;
padding-left: 2rem;
}
.rte li {
list-style: inherit;
}
.rte li:last-child {
margin-bottom: 0;
}
.rte a {
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.1rem;
transition: text-decoration-thickness var(--duration-short) ease;
}
.rte a:hover {
text-decoration-thickness: 0.2rem;
}
.rte blockquote {
display: inline-flex;
}
.rte blockquote > * {
margin: -0.5rem 0 -0.5rem 0;
}
/* Fixed background */
.animate--fixed {
clip-path: inset(0);
}
.animate--fixed img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed svg:not(.zoom):not(.deferred-media__poster-button) {
position: fixed;
height: 100vh;
}
/* Zoom in image on scroll */
.animate--zoom-in {
--zoom-in-ratio: 1;
}
.animate--zoom-in img,
.animate--zoom-in svg {
transition: scale var(--duration-short) linear;
scale: var(--zoom-in-ratio);
}
/* Animations */
@media (prefers-reduced-motion: no-preference) {
.animate--ambient img,
.animate--ambient svg {
animation: animateAmbient 30s linear infinite;
}
@keyframes animateAmbient {
0% {
transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
}
100% {
transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
}
}
.scroll-trigger.animate--fade-in,
.scroll-trigger.animate--slide-in {
opacity: 0.01;
}
.scroll-trigger.animate--slide-in {
transform: translateY(2rem);
}
.scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
opacity: 1;
animation: var(--animation-fade-in);
}
.scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
animation: var(--animation-slide-in);
animation-delay: calc(var(--animation-order) * 75ms);
}
.scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
.scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
.scroll-trigger.scroll-trigger--design-mode .slider,
.scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
opacity: 1;
animation: none;
transition: none;
transform: none;
}
.scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
transform: translateY(0);
}
@keyframes slideIn {
from {
transform: translateY(2rem);
opacity: 0.01;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0.01;
}
to {
opacity: 1;
}
}
}
/* Loading spinner */
.loading__spinner {
position: absolute;
z-index: 1;
width: 1.8rem;
}
.loading__spinner {
width: 1.8rem;
display: inline-block;
}
.spinner {
animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
.path {
stroke-dasharray: 280;
stroke-dashoffset: 0;
transform-origin: center;
stroke: rgb(var(--color-foreground));
animation: dash 1.4s ease-in-out infinite;
}
@media screen and (forced-colors: active) {
.path {
stroke: CanvasText;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 280;
}
50% {
stroke-dashoffset: 75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 280;
transform: rotate(450deg);
}
}
.loading__spinner:not(.hidden) ~ cart-remove-button {
opacity: 50%;
}
.loading__spinner:not(.hidden) ~ cart-remove-button {
pointer-events: none;
cursor: default;
}
/* Progress bar */
.progress-bar-container {
width: 100%;
margin: auto;
}
.progress-bar {
height: 0.13rem;
width: 100%;
}
.progress-bar-value {
width: 100%;
height: 100%;
background-color: rgb(var(--color-foreground));
animation: indeterminateAnimation var(--duration-extra-longer) infinite
ease-in-out;
transform-origin: 0;
}
.progress-bar .progress-bar-value {
display: block;
}
@keyframes indeterminateAnimation {
0% {
transform: translateX(-20%) scaleX(0);
}
40% {
transform: translateX(30%) scaleX(0.7);
}
100% {
transform: translateX(100%) scaleX(0);
}
}
/** Modals **/
.modal {
box-sizing: border-box;
opacity: 0;
position: fixed;
visibility: hidden;
z-index: -1;
margin: 0 auto;
top: 0;
left: 0;
overflow: auto;
width: 100%;
background: rgba(var(--color-foreground), 0.2);
height: 100%;
}
.modal[open] {
opacity: 1;
visibility: visible;
z-index: 101;
}
.modal__container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 1rem;
max-width: 600px;
min-height: 200px;
max-height: 600px;
overflow: auto;
background-color: rgb(var(--color-background));
border-radius: var(--dialog-corner-radius);
border-color: rgba(var(--color-foreground), var(--dialog-border-opacity));
border-style: solid;
border-width: var(--dialog-border-width);
box-shadow: var(--dialog-shadow-horizontal-offset)
var(--dialog-shadow-vertical-offset) var(--dialog-shadow-blur-radius)
rgba(var(--color-shadow), var(--dialog-shadow-opacity));
}
.modal__close {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0;
z-index: 10;
}
.modal__toggle-close {
display: none;
}
.modal__close svg {
height: auto;
margin: 0;
width: 1.5rem;
}
@media screen and (max-width: 749px) {
.modal__container table {
display: block;
max-width: fit-content;
overflow-x: auto;
white-space: nowrap;
margin: 0;
}
}
/** Drawers **/
.drawer {
visibility: hidden;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: 100%;
display: flex;
justify-content: flex-end;
background-color: rgba(var(--color-foreground), 0.5);
transition: visibility var(--duration-default) ease;
}
.drawer--subdrawer {
background: transparent;
}
.drawer--left {
justify-content: flex-start;
}
.drawer.active,
menu-drawer details[open] > .drawer,
.menu-drawer-container[open] > .drawer {
visibility: visible;
}
.drawer__container {
height: 100%;
width: 100%;
max-width: 480px;
padding: 0 1rem;
border-right: 0;
overflow: hidden;
display: flex;
flex-flow: column;
transform: translateX(100%);
transition: transform var(--duration-default) ease;
border-radius: var(--dialog-corner-radius);
border-color: rgba(var(--color-foreground), var(--dialog-border-opacity));
border-style: solid;
border-width: var(--dialog-border-width);
box-shadow: var(--dialog-shadow-horizontal-offset)
var(--dialog-shadow-vertical-offset) var(--dialog-shadow-blur-radius)
rgba(var(--color-shadow), var(--dialog-shadow-opacity));
}
.drawer--left .drawer__container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: var(--dialog-corner-radius);
border-bottom-left-radius: var(--dialog-corner-radius);
}
.drawer--right .drawer__container {
border-top-right-radius: var(--dialog-corner-radius);
border-bottom-right-radius: var(--dialog-corner-radius);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.drawer__container--no-corners {
border-radius: 0 !important;
}
.drawer--left .drawer__container {
transform: translateX(-100%);
border-top-right-radius: var(--dialog-corner-radius);
border-bottom-right-radius: var(--dialog-corner-radius);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@media screen and (max-width: 749px) {
.drawer__container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.drawer.drawer--opened .drawer__container {
transform: translateX(0%);
}
.drawer__overlay {
display: block !important;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.drawer__header {
position: relative;
padding: 1rem 1rem 1rem 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.drawer__header--no-text {
justify-content: end;
padding: 1rem;
}
.drawer__header--no-padding {
padding: 1rem 0;
}
.drawer__header * {
margin: 0;
}
.drawer__close {
padding: 0;
z-index: 1;
}
.drawer__close svg {
height: 1.5rem;
width: 1.5rem;
vertical-align: top;
}
.drawer__content {
height: calc(100% - 52px);
overflow-y: auto;
scrollbar-color: #656868 #e8e6e4;
scrollbar-width: 3px;
}
.drawer__footer {
margin-top: auto;
margin-bottom: 0;
border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
padding: 1rem 0;
}
.drawer__utility {
position: absolute;
bottom: 137px;
z-index: 1000;
padding: 1rem;
margin-left: -1rem;
width: calc(100% + 2rem);
margin-top: auto;
}
.drawer__utility-list {
display: flex;
gap: 2rem;
align-items: center;
justify-content: center;
}
/** Navigation Drawer **/
.drawer--navigation {
/*top: calc(var(--header-height) + var(--announcement-height));*/
top: 0;
}
.drawer--navigation .drawer__container {
height: 100%;
}
.drawer__close--navigation {
position: absolute;
top: 1rem;
right: 1rem;
transform: rotate(180deg);
}
.navigation-drawer__content {
margin-left: -1rem;
width: calc(100% + 2rem);
display: flex;
flex-direction: column;
}
.navigation-drawer {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0.5rem;
border-top: 1px solid rgba(var(--color-foreground), 0.1);
padding-top: 1.5rem;
}
.navigation-drawer__heading {
letter-spacing: 1px;
margin-bottom: 1rem;
padding: 0rem 1rem;
}
.navigation-drawer__items {
display: flex;
flex-direction: column;
}
.navigation-drawer__item {
}
.navigation-drawer__item a,
.navigation-drawer__item summary {
display: block;
width: 100%;
padding: 6px 2rem;
}
.navigation-drawer__item a:hover,
.navigation-drawer__item summary:hover {
background-color: rgba(var(--color-foreground), 0.1);
}
summary.navigation-drawer__link {
display: flex;
align-items: center;
justify-content: space-between;
}
.navigation-drawer__submenu {
padding: 0 1rem;
}
.navigation-drawer__details > summary .icon-caret {
transition: all 300ms ease-in-out;
width: 1rem;
height: 1rem;
}
.navigation-drawer__details[open] > summary .icon-caret {
transform: rotate(-90deg);
}
/* Section Titles */
.screen-width .section__header {
padding: 0 2rem;
}
@media screen and (max-width: 749px) {
.screen-width .section__header {
padding: 0 1rem;
}
}
.section__header {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.section__header--bottom {
margin-bottom: 0;
margin-top: 1.5rem;
}
.section__header * {
margin: 0;
}
.section__title {
width: 100%;
}
.section__title--link {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
/** Account stuff **/
.customer__forgot {
text-align: right;
font-size: 0.8rem;
}
/** Tabs **/
.tabs {
gap: 1rem;
width: fit-content;
}
.tabs--center {
margin: 0 auto;
}
/* Purlisse redesign (G1.7): the design has NO grey rule under the tab row. */
.tabs:after {
content: none;
}
/*
* R2.3 (client, 2026-08-05): "I changed the Heading sizes to Large across the
* homepage ... but when I did this it is no longer as bold can you update? It
* should match the menu item font weight in its boldness."
*
* NOT size-dependent, and NOT a missing control — the "Heading size" select the
* client is using already exists. The problem is that every size class (.h1/.h2/
* .h3…) shares one weight from --font-heading-weight (settings.heading_weight,
* saved as 500), so a section title renders 500 at EVERY size. The sections the
* client left alone only look bolder because G1.12 targets one section by id
* (`[id$="__perks_program"] .image-with-text__heading`) and hardcodes 700.
* So picking "Large" didn't lighten anything — it moved the title off the one
* section that had a bespoke 700 rule.
*
* Fix = make the shared section title match that same 700, so the existing
* Heading size control looks right at every value.
*
* Scoped to section titles rather than raising settings.heading_weight, which
* would restyle 27/36 headings on the homepage alone — mostly mega-menu items
* the client never mentioned — plus PLP and PDP headings already PASS'd.
*/
.section__header .section__title,
.section__header .section__heading,
.collection-tabs__heading {
font-weight: 700;
}
.tabs .slider__slide {
width: auto;
}
.tabs__button {
position: relative;
padding: 0 5px 0.75rem;
text-transform: uppercase;
width: auto;
text-decoration: none;
/* Purlisse redesign (G1.7): inactive tabs are black per Figma */
color: #000000;
}
.tabs__button[aria-selected='true'] {
/* Purlisse redesign (G1.7): active tab is brown + underlined (Figma) */
font-weight: bold;
color: #796f66;
text-decoration: underline;
text-underline-offset: 0.25em;
}
/** Price **/
.price {
display: flex;
flex-direction: row;
gap: 0.5rem;
align-items: end;
}
/** Klaviyo Overrides **/
.klaviyo-bis-trigger {
width: 100% !important;
margin-top: 0.25rem !important;
}
.product-form__buy-buttons.hide-klaviyo .klaviyo-bis-trigger {
display: none !important;
}
/** Firework CSS **/
.fwn-grid .cy-made-in-fw,
.fwn-grid .cy-made-in-fw + svg {
display: none !important;
}
/** Quickbuy **/
.quickbuy {
display: flex;
gap: 1rem;
}
.quickbuy__image {
max-width: 200px;
width: 100%;
}
@media screen and (max-width: 749px) {
.quickbuy__image {
max-width: 100px;
}
}
.quickbuy__details {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.quickbuy__text {
display: flex;
align-items: end;
gap: 0.5rem;
}
.quickbuy__variants {
display: flex;
flex-flow: wrap;
gap: 0.25rem;
margin-top: 0.5rem;
}
.quickview__variant-pill {
width: calc(100% / 3 - (0.5rem * 2 / 3));
height: 100%;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
.quickbuy__variant-pill * {
width: 100%;
height: 100%;
}
.quickbuy__variant-button {
width: 100%;
background-color: transparent;
border: 1px solid rgba(var(--color-foreground), 0.25);
padding: 0.5rem;
cursor: pointer;
text-align: center;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.quickbuy__variant-button:disabled {
background-color: rgba(var(--color-foreground), 0.1);
}
.quickbuy__variant-button:hover {
border: 1px solid rgba(var(--color-foreground), 1);
}
/** Quickview **/
.quickview__images {
display: flex;
justify-content: center;
}
.quickview__image {
max-width: 320px;
width: 100%;
}
.quickview__details {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.quickview__text {
display: flex;
align-items: end;
gap: 1rem;
}
.quickview__text span {
flex-shrink: 0;
}
.quickview__variants {
display: flex;
flex-flow: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.quickview__variant-pill {
width: calc(100% / 3 - (0.5rem * 2 / 3));
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
.quickview__variant-pill:first-child label {
border-top-left-radius: var(--inputs-radius);
border-bottom-left-radius: var(--inputs-radius);
}
.quickview__variant-pill:last-child label {
border-top-right-radius: var(--inputs-radius);
border-bottom-right-radius: var(--inputs-radius);
}
.quickview__variant-pill label {
width: 100%;
background-color: transparent;
border: 1px solid rgba(var(--color-foreground), 1);
padding: 0.5rem;
cursor: pointer;
text-align: center;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.quickview__variant-pill input:disabled + label {
background-color: rgba(var(--color-foreground), 0.1);
}
.quickview__variant-pill input:checked + label {
background-color: rgba(var(--color-button), 1);
color: rgba(var(--color-button-text), 1);
}
.quickview__variant-pill:focus-within label {
outline: 2px solid #4678c6;
}
.quickview__actions {
margin-top: 1rem;
}
.quickview__information {
text-align: center;
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-bottom: 1rem;
}
.quickview__information * {
margin: 0;
}
/* Social list */
.list-social {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
}
.list-social .list-social__item {
width: 25px;
height: 25px;
}
.list-social .list-social__item svg {
vertical-align: top;
}
/** Yotpo **/
.yotpo-widget-subscriptions-add-to-cart .yotpo-radio-container {
border-radius: 0 !important;
}
/** HUE **/
.hue-review-module {
--hueReviewNameFontFamily: var(--font-heading-family);
--hueReviewNameFontSize: var(--font-body-family);
--hueBodyFontFamily: var(--font-body-family);
}
.hue-btn {
-webkit-appearance: none;
appearance: none;
height: var(--inputs-height) !important;
--hueQuizLauncherColor: rgb(var(--color-button-text));
--hueQuizLauncherBackgroundColor: rgb(var(--color-button));
--hueQuizLauncherBorder: solid var(--inputs-border-width)
rgb(var(--color-button-border));
--hueQuizLauncherBorderRadius: var(--button-corner-radius);
--hueQuizLauncherPadding: var(--inputs-padding);
--hueButtonFontFamily: var(--font-button-family);
--hueQuizLauncherFontSize: var(--font-button);
--hueQuizLauncherFontWeight: var(--font-button-weight);
--hueQuizLauncherLetterSpacing: var(--font-button-spacing);
--hueQuizLauncherHoverColor: rgb(var(--color-button-text-hover));
--hueQuizLauncherHoverBackgroundColor: rgb(var(--color-button-hover));
}
.hue-btn:hover {
--hueQuizLauncherBorder: solid var(--inputs-border-width)
rgb(var(--color-button-border-hover));
}
.hue-video-module__main-title {
line-height: var(--font-heading-height) !important;
--hueMainHeaderColor: rgb(var(--color-foreground));
--hueMainHeaderFontFamily: var(--font-heading-family);
--hueMainHeaderFontSize: var(--font-heading-h2);
--hueMainHeaderFontStyle: var(--font-heading-style);
--hueMainHeaderFontWeight: var(--font-heading-weight);
--hueMainHeaderLetterSpacing: var(--font-heading-spacing);
}
.hue-variant-select__control,
.hue-select-control,
.css-1akxrzl-control {
line-height: var(--font-body-height) !important;
font-size: var(--font-body);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
letter-spacing: var(--font-body-spacing);
height: var(--inputs-height) !important;
font-family: var(--font-body-family) !important;
background: rgb(var(--color-button)) !important;
color: rgb(var(--color-button-text)) !important;
--hueFiltersSelectColor: rgb(var(--color-button-text));
--hueVariantsSelectColor: rgb(var(--color-button-text));
--hueVariantsSelectBackgroundColor: rgb(var(--color-button));
--hueFilterHeight: var(--inputs-height);
--hueBodyFontFamily: var(--font-body-family);
--hueSecondaryBorderRadius: var(--inputs-radius);
--hueVariantsSelectBorder: var(--inputs-border-width) solid
rgb(var(--color-button));
}
.hue-variant-select__indicator,
.hue-filter-select__control-content-title,
.hue-variant-select__placeholder {
text-transform: uppercase;
--hueVariantsSelectTextTransform: var(--font-button-transform);
color: rgb(var(--color-button-text)) !important;
--hueBodyColor: rgb(var(--color-button-text));
--hueFiltersSelectColor: rgb(var(--color-button-text));
--hueSelectFontFamily: var(--font-button-family);
--hueVariantsSelectFontSize: var(--font-button);
--hueVariantsSelectFontWeight: var(--font-button-weight);
--hueFilterFontSize: var(--font-button);
--hueFilterFontWeight: var(--font-button-weight);
}
div[data-bv-show] {
display: block !important;
}
#recharge-storefront-experiences {
position: relative;
z-index: 10000000000000;
}
#smile-ui-lite-container {
z-index: 10000000 !important;
}
#smile-ui-lite-launcher-frame-container {
right: auto !important;
left: 16px !important;
}