/** Shopify CDN: Minification failed
Line 373:0 Unexpected "}"
Line 411:11 Expected ":"
Line 636:0 Unexpected "}"
**/
/* ------------------- SM Updates ------------------- */
/* ==========================================================================
MAABAE typography — Optima Nova (titles) + Lato (body)
SM-owned. Added 2026-09-11.
HOW THE PIECES FIT
------------------
1) FONT LOADING — already added to layout/theme.liquid :
(Adobe Fonts web project "MAABAE" — family "optima-nova-lt-pro",
weights 300/400/500/700. Lato loads via Shopify — set in Theme
settings > Typography > Body.)
2) FONT ASSIGNMENT — the CSS below. Paste it at the TOP of sm-custom.css.
This REPLACES the commented-out font blocks in otra-custom.css
(the :root --typeHeaderPrimary/--typeBasePrimary override and the
.maabae-template { p / .btn } forced block).
SCOPING — everything is scoped to .maabae-template (regular MAABAE pages
+ the -mb unified pages). The CC rollback pages (.culture-club-template)
are intentionally left on their original fonts. When the CC templates are
eventually removed, every page is .maabae-template, so this becomes
effectively global with no rework.
========================================================================== */
/* All Headings in Optima Nova 400 weight */
.maabae-template {
--typeHeaderPrimary: "optima-nova-lt-pro";
--typeHeaderWeight: 400;
}
/* Uppercase H1 + H2 only (product-tile titles stay natural case) */
.maabae-template h1, .maabae-template .h1,
.maabae-template h2, .maabae-template .h2 {
text-transform: uppercase !important;
}
/* Less space between letters in titles */
.maabae-template {
--typeHeaderSpacing: -0.04em; /* tracking -40 */
}
/* Non-heading, class-styled card titles that DON'T read the heading variable.
Keep ONLY if these sections appear on MAABAE pages:
.cs-cell__title = Featured-collection SLIDER .scp__title = complementary
The standard featured-collection / recommendations grids use
.grid-product__title, which the "Heading" product-title style already routes
through the variable — so nothing is needed for them here. */
.maabae-template .cs-cell__title,
.maabae-template .scp__title {
font-family: "optima-nova-lt-pro", sans-serif !important;
}
.maabae-template .btn:not(.btn--circle):not(.btn--small) {
font-size: 14px; /* theme: max(base - 4px, 13px) */
padding: 18px 28px 16px; /* theme: 11px 20px (9px 17px on mobile) */
}
.maabae-template .btn--circle {
text-box: normal
}
.maabae-template .btn {
transition-delay: 0s !important;
}
.maabae-template .btn {
font-family: "Lato" !important;
}
/* Grid-item preorder tag (incl. Restock Rocket app badge) */
.maabae-template .restock-rocket-preorder-badge,
.maabae-template .grid-product__tag--custom {
background-color: transparent !important;
border: 2px solid #F6F5F4;
color: #F6F5F4 !important;
border-radius: 0 !important;
text-transform: uppercase !important;
}
/* Grid-item preorder tag - smaller on mobile */
@media only screen and (max-width: 768px) {
.maabae-template .restock-rocket-preorder-badge.preorder-badge-collection {
font-size: 10px;
line-height: 1;
padding: 3px 8px 4px;
border-width: 2px;
top: 23px; /* = "+" button centre (top 8px + 30px / 2) */
transform: translateY(-50%); /* centre the badge on that line */
}
}
/* Grid-item sold-out button (outline, non-interactive) */
.qai__btn--soldout { pointer-events: none; }
.maabae-template .qai__btn--soldout,
.maabae-template .grid-product__soldout { border-color: currentColor; }
/* Light (grey #F6F5F4) button variants — for dark imagery/video */
.maabae-template .btn--light {
background-color: #F6F5F4 !important;
border-color: #F6F5F4 !important;
color: #102100 !important;
}
.maabae-template .btn--light:hover {
background-color: transparent !important;
border-color: #F6F5F4 !important;
color: #F6F5F4 !important;
}
.maabae-template .btn--light-outline {
background-color: transparent !important;
border-color: #F6F5F4 !important;
color: #F6F5F4 !important;
}
.maabae-template .btn--light-outline:hover {
background-color: #F6F5F4 !important;
border-color: #F6F5F4 !important;
color: #102100 !important;
}
/* ================================================================
PRODUCT GRID TILES:
================================================================ */
/* Grid item title font size */
body .grid-product__title.grid-product__title--heading {
font-size: 14px;
}
/* 1) Product rows: flex + wrap so tiles in a row stretch to equal height */
.maabae-template .grid:has(> .grid__item.grid-product) {
display: flex;
flex-wrap: wrap;
}
/* ...but never wrap the horizontal strips */
.maabae-template .grid.grid--slider:has(> .grid__item.grid-product) {
flex-wrap: nowrap;
}
/* swipe strip is mobile only (matches theme.css's breakpoint) */
@media only screen and (max-width: 768px) {
.maabae-template .grid-overflow-wrapper > .grid:has(> .grid__item.grid-product) {
flex-wrap: nowrap;
}
}
/* 2) Inside each tile: a flex column that fills the (now equal) tile height */
.maabae-template .grid__item.grid-product > .grid-product__content {
display: flex;
flex-direction: column;
height: 100%;
}
.maabae-template .grid__item.grid-product .grid__item-image-wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* 3) The button: pushed to the bottom; slack lands above it */
.maabae-template .grid__item.grid-product .grid-product__shop-now {
margin-top: auto !important; /* overrides the inline margin-top:6px */
padding-top: 6px; /* keeps the original 6px breathing room */
}
/* 3) The gap between SHOP NOW button and the next row */
@media only screen and (max-width: 768px) {
.maabae-template .grid__item.grid-product {
margin-bottom: 40px; /* theme mobile default: 15px */
}
}
/* COLLECTION FILTER / SORT (mobile sticky bar): one continuous bar */
@media only screen and (max-width: 768px) {
/* The bar */
.maabae-template .collection-filter {
background: var(--colorBody);
border-radius: 0;
gap: 0;
margin-bottom: 15px;
align-items: stretch;
transition: top 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* matches the header slide-in */
}
.maabae-template .collection-filter__item {
margin-bottom: 0;
}
.maabae-template .collection-filter__item--drawer,
.maabae-template .collection-filter__item--sort {
flex: 1 1 50%;
}
/* The items: no boxes of their own */
.maabae-template .collection-filter .btn,
.maabae-template .collection-filter .btn:not(.btn--tertiary-active),
.maabae-template .collection-filter__sort-container,
.maabae-template .collection-filter select {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* Sticky offset: flush at the top unless the fixed header is actually on screen.
(When it is, this rule stops matching and the JS's inline top = header height wins.) */
body.maabae-template:not(:has(.site-header--stuck.site-header--opening)) .collection-filter {
top: 0 !important;
}
}
/* Sticky Add-to-cart button on product pages */
#essential-sticky-cart-form-mobile {
padding: 25px 15px 15px 15px !important;
background: #F6F5F4 !important;
}
#essential-sticky-cart-form-mobile button {
background: #102100 !important;
margin: 20px;
color: #F6F5F4 !important;
border-radius: 10px !important;
}
/* ================================================================
PDP Product section updates
================================================================ */
.product-block {text-align: left !important}
.product-block--sales-point {
display: flex !important;
align-items: center !important; /* Vertically centers the icon and text */
justify-content: flex-start !important; /* Left aligns the content */
text-align: left !important; /* Ensures text itself is left-aligned */
margin: 0px !important;
}
/* PDP variant buttons: make SOLD-OUT sizes visible (they render invisible) */
.maabae-template .variant-input-wrap label.disabled {
color: rgba(5, 9, 2, 0.2); /* theme: var(--colorBorder) = #F6F5F4 */
box-shadow: 0 0 0 1px rgba(5, 9, 2, 0.2); /* faint outline so the pill reads as a pill */
}
.maabae-template .variant-input-wrap label.disabled:after {
display: none;
border-color: rgba(16, 33, 0, 0.4); /* the diagonal strike */
}
.variant-input-wrap label {
border-radius: 25px;
}
/* Color variant image */
.mm-catalog-color {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
}
.mm-catalog-color__item {
display: inline-flex;
align-items: center;
gap: 12px;
}
.mm-catalog-color .color-swatch {
margin: 0;
flex: 0 0 auto;
}
.mm-catalog-color__divider {
width: 1px;
height: 24px; /* knob: line height */
background: currentColor; /* follows the text colour */
opacity: 0.5; /* knob: 1 = solid */
flex: 0 0 auto;
}
.mm-catalog-color__label {
margin: 0; /* theme h5 has a bottom margin */
line-height: 1;
}
.sales-points {margin: 5px 0px !important;}
.product-block--header {margin-bottom: 10px}
/* Smaller gap under the last block */
.maabae-template .page-content--product {
padding-bottom: 30px; /* theme: 40px mobile / 75px desktop */
}
.maabae-template .page-content--product .product-single__meta .product-block:last-child {
margin-bottom: 0; /* theme: 25px on every block */
}
/* Announcement bar and Main Header on Mobile */
/* Mobile announcement bar - make thinner and keep content centered */
@media screen and (max-width: 768px) {
/* Main announcement bar container
.announcement-bar {
min-height: 30px !important;
height: 30px !important;
padding: 10px 0 !important;
line-height: 20px !important; /* Match the height */
}
.announcement-text {
padding: 0px !importan;
font-size: 0.8em;
text-decoration:none;
}
.header-layout {
display: flex !important;
align-items: center !important;
height: 35px !important;
}
.site-header__search .search__input {
padding: 2px 5px !important;
margin-top: 2px;
}
#SiteHeader > div.site-header__search-container.is-active > div > div > predictive-search > form > div.search__input-wrap > button {
width: 30px !important;
height: 30px !important;
padding: 4px !important;
}
/* Scale down the icon inside the button */
#SiteHeader > div.site-header__search-container.is-active > div > div > predictive-search > form > div.search__input-wrap > button .icon {
width: 20px !important;
height: 20px !important;
}
}
/* Add-to-cart on Collection Grid */
.cleverapps-collections-add-to-cart-add-to-cart-button {
margin-top: 2.5px !important;
width: 60% !important;
border: 2px solid #000000 !important;
height: 30px !important;
min-height: 30px !important;
font-size: 14px !important;
padding: 2px 10px !important;
}
.cleverapps-collections-add-to-cart-widget,
.cleverapps-collections-add-to-cart-button-super-container {
padding-left: 0px !important;
padding-right: 0px !important;
flex-start: start !important;
}
.cleverapps-collections-add-to-cart-sold-out-button {
margin-top: 2.5px !important;
border-radius: 0 !important;
background: #F6F5F4 !important;
border: 1px solid #b0b0b0 !important;
font-size: 13px !important;
color: #b0b0b0 !important;
border-radius: 10px !important;
width: 50% !important;
height: 30px !important;
font-family: 'Josefin Sans';
min-height: 30px !important;
font-size 14px !important;
}
.grid-product__tag--sold-out {display: none}
@media screen and (max-width: 768px) {
.cleverapps-collections-add-to-cart-add-to-cart-button, .cleverapps-collections-add-to-cart-sold-out-button {
font-size: 10px !important;
width: 70% !important;
margin-top: 0px !important;
}
[data-context="featured-collection"] .cleverapps-collections-add-to-cart-add-to-cart-button, .cleverapps-collections-add-to-cart-sold-out-button {
width: 70% !important;
}
}
[data-context="featured-collection"] .cleverapps-collections-add-to-cart-widget {
padding-bottom: 0 !important;
}
/*** MM Complementary Products ***/
.mm-product-recommendations-block[data-intent=complementary]{
display: flex;
flex-direction: column;
gap: 12px;
padding: 0px;
position: relative;
@media (max-width: 767px){
padding: 16px 0px;
gap: 12px;
}
&.atc-active{
.grid-product__link:after{
content: unset;
}
}
.flickity-enabled{
position: static;
}
.flickity-button{
top: unset;
bottom: -10px;
left: 20px;
background: transparent;
@media (max-width: 749px){
bottom: -20px;
}
&:after{
content: "";
display: inline-block;
width: 20px;
height: 14px;
background-repeat: no-repeat;
background-size: contain;
margin-left: 6px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.2243 0L12.5729 0.672015L18.2365 6.52407H0.476347H0V7.47593H18.2356L12.5729 13.327L13.2243 14L20 6.99905L13.2243 0Z' fill='black'/%3E%3C/svg%3E");
}
&.flickity-next{
left: 60px;
@media (min-width: 768px) and (max-width: 991px){
top: 40px;
right: 20px;
left: inherit;
}
@media (max-width: 767px){
left: calc(0% - 90px);
}
}
&.flickity-previous{
&:after{
transform:rotate(180deg) translateY(0px)
}
@media (min-width: 768px) and (max-width: 991px){
top: 40px;
left: unset;
right: 60px;
}
@media (max-width: 767px){
left: calc(0% - 130px);
}
}
svg{
display: none;
}
}
.product-recommendations_content{
.product-recommendations__title {
margin: 0;
max-width: none;
}
}
.product-single__related[data-slideshow]{
--mm-rec-peek: 0.4; /* how much of the next tile shows: 0.4 = 40% */
/* before Flickity runs / when all tiles fit: wrap into rows that fill the width */
display: flex;
flex-wrap: wrap;
margin: 0 -4px;
&.flickity-enabled{
display: block;
}
.grid__item{
float: none;
flex: 1 0 auto;
width: calc(100% / (var(--mm-rec-per-slide, 4) + var(--mm-rec-peek)));
min-width: 0;
padding: 0 4px;
margin: 0;
@media (max-width: 767px){
width: calc(100% / (2 + var(--mm-rec-peek)));
}
}
/* swipe-only: belt and braces in case controls ever get switched on */
.flickity-page-dots,
.flickity-button{
display: none;
}
}
.grid__item-image-wrapper {
flex-direction: column;
align-items: flex-start;
.grid-product__image-mask{
width: 100%;
}
.grid-product__meta{
width: 100%;
margin: 0;
}
}
}
/*** MM Quantities ***/
.mm-quantities-wrapper{
&.quantity-block .title{
margin: 0 0 12px;
}
.title{
font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
font-weight: var(--typeHeaderWeight);
letter-spacing: var(--typeHeaderSpacing);
line-height: var(--typeHeaderLineHeight);
font-size: calc(var(--typeBaseSize) + 2px);
margin: 0 0 20px;
@media (max-width: 767px){
font-size: var(--typeBaseSize);
}
}
}
.mm-quantities-blocks{
display: flex;
align-items: stretch;
gap: 8px;
}
.quantity-block{
flex: 1;
display: flex;
align-items: center;
padding: 12px;
gap: 8px;
background-color: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
border: 2px solid transparent;
@media screen and (max-width: 1220px) and (min-width: 992px){
padding: 12px 6px;
}
@media (max-width: 991px){
flex-direction: column;
text-align: center;
}
}
.mm-quantities-wrapper .image-wrapper{
max-width: 56px;
}
.quantity-title{
font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
font-weight: var(--typeHeaderWeight);
letter-spacing: var(--typeHeaderSpacing);
line-height: var(--typeHeaderLineHeight);
font-size: calc(var(--typeBaseSize) + 2px);
margin: 0;
@media (max-width: 767px){
font-size: var(--typeBaseSize);
}
}
.quantity-pricing{
color: var(--colorPrice);
font-size: calc(var(--typeBaseSize) * 0.85);
line-height: 130%;
margin: 0;
}
.tag{
position: absolute;
top: -12px;
color: #1C4632;
background: #F6F5F4;
font-size: 12px;
font-weight: 400;
line-height: 1;
text-transform: capitalize;
border: 0px solid #1C4632;
border-radius: 0px;
padding: 4px 9px;
}
.quantity-block:last-child{
.tag{
background: #F6F5F4;
color: #1C4632;
}
}
.quantity-block.active{
border-color: #1A4630;
background: #F6F5F4;
}
}
.quick-product__btn.quick-view-icon{
background: transparent;
text-align: right;
max-width: fit-content;
left: unset;
.icon--quick-view{
width: 24px;
height: 24px;
}
}
/* ========== SEARCH HEADER (both MAABAE + CultureClub) ==========
When search opens it reads as ONE solid full-width panel that continues
the header colour — no grey body colour, no grey gap under the input,
no dark page scrim. Panel bleeds edge-to-edge; result rows stay centered
in the site's 1500px content column.
STRUCTURE rules are template-agnostic; only COLOUR branches per brand. */
/* ---- STRUCTURE (both templates) ---- */
predictive-search { max-width: none; }
.site-header__search .page-width {
max-width: 1500px;
margin: 0 auto;
position: static;
}
predictive-search .search__results {
margin-top: 0 !important; /* kill the 10px grey strip */
left: 50%;
right: auto;
width: 100vw !important;
margin-left: -50vw !important; /* stretch to viewport edges */
margin-right: 0 !important;
}
predictive-search .search__results > * {
max-width: 1500px;
margin-left: auto;
margin-right: auto;
padding-left: 17px;
padding-right: 17px;
}
predictive-search.is-active .predictive__screen {
background: transparent !important;
}
/* ---- COLOUR: MAABAE (header colour) ---- */
.maabae-template .site-header__search,
.maabae-template .site-header__search .page-width,
.maabae-template predictive-search,
.maabae-template predictive-search .search__results {
background-color: var(--colorNav) !important;
}
.maabae-template .site-header__search,
.maabae-template .site-header__search .search__input,
.maabae-template .site-header__search .search__input::placeholder,
.maabae-template predictive-search .search__results,
.maabae-template predictive-search .search__results a,
.maabae-template predictive-search .search__results span,
.maabae-template predictive-search .search__results p {
color: var(--colorNavText);
}
.maabae-template .site-header__search .btn--search .icon path,
.maabae-template .site-header__search .btn--close-search .icon path {
stroke: var(--colorNavText) !important;
}
/* ---- COLOUR: CultureClub (maroon palette) ---- */
.culture-club-template .site-header__search,
.culture-club-template .site-header__search .page-width,
.culture-club-template predictive-search,
.culture-club-template predictive-search .search__results {
background-color: var(--cc-panel) !important;
}
.culture-club-template predictive-search .search__results,
.culture-club-template predictive-search .search__results a,
.culture-club-template predictive-search .search__results span,
.culture-club-template predictive-search .search__results p {
color: var(--cc-accent) !important;
}
/* ---- MOBILE: close the left gap so the panel is truly edge-to-edge ---- */
@media only screen and (max-width: 768px) {
.site-header__search-container.is-active,
.site-header__search-container {
left: 50% !important;
right: auto !important;
width: 100vw !important;
margin-left: -50vw !important;
}
.site-header__search {
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin-left: 0 !important;
}
.site-header__search .page-width {
padding-left: 17px !important;
padding-right: 17px !important;
max-width: 100% !important;
}
predictive-search .search__results {
margin-top: 0 !important;
}
predictive-search .search__results > * {
padding-left: 17px;
padding-right: 17px;
}
}
/* ---- DIVIDERS / BORDERS: follow brand colour ---- */
.maabae-template .predictive-search-results h3 {
border-color: #F6F5F4 !important;
}
.culture-club-template .predictive-search-results h3 {
border-color: var(--cc-accent) !important;
}
/* ---- SEARCH INPUT FIELD: rounded corners + dark brand border + dark text ---- */
.site-header__search .search__input {
border-radius: 6px !important;
border: 1px solid;
}
.maabae-template .site-header__search .search__input {
color: var(--colorNav) !important;
border-color: var(--colorNav) !important;
}
.culture-club-template .site-header__search .search__input {
color: var(--cc-panel) !important;
border-color: var(--cc-panel) !important;
}
/* search (magnifier) icon = same dark brand colour */
.maabae-template .site-header__search .btn--search .icon path {
stroke: var(--colorNav) !important;
}
.culture-club-template .site-header__search .btn--search .icon path {
stroke: var(--cc-panel) !important;
}
/* ---- "Show all results for..." button border ---- */
.maabae-template .results__search-btn {
border-color: #F6F5F4 !important;
}
.culture-club-template .results__search-btn {
border-color: var(--cc-accent) !important;
}
/* ---- TYPED vs PREDICTED suggestion text ----
Markup: madaliya two tone
Opacity compounds, so dim via COLOR not opacity. */
.maabae-template .results--queries span {
color: rgba(255, 255, 255, 0.55) !important;
opacity: 1 !important;
}
.maabae-template .results--queries mark {
color: var(--colorNavText) !important;
opacity: 1 !important;
}
.culture-club-template .results--queries span {
color: rgba(240, 224, 130, 0.55) !important;
opacity: 1 !important;
}
.culture-club-template .results--queries mark {
color: var(--cc-accent) !important;
opacity: 1 !important;
}
/* ---- MOBILE: cart drawer ---- */
/* ---- MOBILE: cart drawer full-screen (close the left gap) ---- */
@media only screen and (max-width: 768px) {
#CartDrawer.drawer--right {
width: 100vw !important;
max-width: 100% !important;
right: -100vw !important;
}
#CartDrawer.drawer--right.drawer--is-open {
transform: translateX(-100vw) !important;
}
}
/* ---- MAABAE: cart drawer "Check Out" button (grey bg, dark green text) ---- */
.maabae-template #CartDrawer .cart__checkout {
background-color: #F6F5F4 !important;
color: #102100 !important;
border: 2px solid #102100 !important;
transition: 0.3s;
}
.maabae-template #CartDrawer .cart__checkout:hover {
background-color: #102100 !important;
color: #F6F5F4 !important;
border-color: #F6F5F4 !important;
}
/* Hide dynamic/quick checkout buttons (PayPal, G Pay, etc.) in the cart drawer only */
#CartDrawer .additional-checkout-buttons {
display: none !important;
}
/* ================= Featured collection "VIEW ALL" ================= */
/* View-all always reads as a text link (uppercase, underline on hover), never a pill. */
/* --- Shared text-link look (top-right, bottom, mobile tail) --- */
[data-context="featured-collection"] .section-header__link.btn,
[data-context="featured-collection"] .grid__item > a.btn,
[data-context="featured-collection"] .grid-product__see-all {
background: transparent !important;
border: none !important;
padding: 5 !important;
min-width: 0 !important;
color: inherit !important;
font-size: 14px !important;
letter-spacing: 0.5px !important;
font-weight: 300;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: none !important;
}
[data-context="featured-collection"] .section-header__link.btn:hover,
[data-context="featured-collection"] .grid__item > a.btn:hover,
[data-context="featured-collection"] .grid-product__see-all:hover {
background: transparent !important;
color: inherit !important;
text-decoration: underline !important;
}
/* Stop CultureClub template colours bleeding into Klaviyo forms/popups */
.culture-club-template [class*="kl-private-reset-css-"],
.culture-club-template [class*="kl-private-reset-css-"] * {
color: initial;
}
/* Cart product thumbnails */
.cart__image > .image-wrap {
overflow: hidden;
border-radius: 6px;
background: transparent !important;
}
.cart__image > .image-wrap image-element,
.cart__image > .image-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
}
.cart__image > .image-wrap img {
display: block;
object-fit: cover;
object-position: center;
}
/* ================================================================
SM CART DRAWER RECOMMENDATIONS
Source: Shopify Search & Discovery complementary products
================================================================ */
#CartDrawer [data-sm-cart-recommendations-mount][hidden] {
display: none !important;
}
#CartDrawer [data-sm-cart-recommendations-mount][aria-busy="true"] {
min-height: 1px;
}
/*
Impulse does not lock the page behind the drawer on iOS Safari
(theme.css sets .supports-touch.lock-scroll to overflow:initial there), so
when the drawer's scroll region reaches its top or bottom edge iOS chains
the swipe to the page underneath and the drawer feels stuck. Contain the
scroll inside the drawer. The shorter the cart content, the more often the
edges are hit, which is why this shows up after adding a recommendation.
*/
#CartDrawer .drawer__scrollable {
overscroll-behavior-y: contain;
}
/*
Keep the cart products and recommendations in the same normal-flow scroll
region. The footer remains a fixed sibling managed by Impulse.
*/
#CartDrawer [data-sm-cart-recommendations-mount]:not([hidden]) {
position: static;
order: 99;
flex: 0 0 auto;
width: 100%;
height: auto;
min-height: 0;
margin-top: 48px;
padding: 0;
overflow: visible;
}
/*
Hold a consistent recommendation start position for short carts. Once the
cart lines exceed this space, their natural height pushes the widget down.
*/
#CartDrawer .drawer__scrollable:has(> [data-sm-cart-recommendations-mount]:not([hidden])) > [data-products] {
flex: 0 0 auto;
min-height: clamp(160px, 27vh, 220px);
}
#CartDrawer [data-sm-cart-recommendations-mount]:not([hidden]) > .sm-cart-recommendations {
position: static;
width: 100%;
}
#CartDrawer .sm-cart-recommendations {
--sm-cart-recommendations-bg: #102100;
--sm-cart-recommendations-ink: #f6f5f4;
--sm-cart-recommendations-divider: rgba(246, 245, 244, 0.45);
margin-top: 0;
padding: 0;
border-top: 0;
border-bottom: 0;
border-radius: 0;
background: var(--sm-cart-recommendations-bg);
color: var(--sm-cart-recommendations-ink);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
/* MAABAE outlined card: dark-green drawer background with cream details. */
.maabae-template #CartDrawer .sm-cart-recommendations {
--sm-cart-recommendations-bg: #102100;
--sm-cart-recommendations-ink: #f6f5f4;
--sm-cart-recommendations-divider: rgba(246, 245, 244, 0.45);
}
/* CultureClub outlined card: navy drawer background with yellow details. */
.culture-club-template #CartDrawer .sm-cart-recommendations {
--sm-cart-recommendations-bg: #131737;
--sm-cart-recommendations-ink: #f2f08e;
--sm-cart-recommendations-divider: rgba(242, 240, 142, 0.45);
}
#CartDrawer .sm-cart-recommendations__tabs {
display: flex;
align-items: center;
gap: 18px;
margin: 0;
padding: 0;
overflow: visible;
border-bottom: 1px solid var(--sm-cart-recommendations-divider);
}
#CartDrawer .sm-cart-recommendations__tab {
appearance: none;
flex: 0 0 auto;
margin: 0 0 -1px !important;
padding: 12px 0 10px !important;
border: 0 !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--sm-cart-recommendations-ink) !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.04em !important;
text-align: left !important;
text-transform: uppercase !important;
white-space: nowrap;
opacity: 0.62;
cursor: pointer;
}
#CartDrawer .sm-cart-recommendations__tab[aria-selected="true"] {
border-bottom-color: var(--sm-cart-recommendations-ink) !important;
opacity: 1;
}
/* With one intent, extend the thick active rule across the full widget. */
#CartDrawer .sm-cart-recommendations__tab:only-child {
flex: 1 1 100%;
width: 100%;
}
#CartDrawer .sm-cart-recommendations__tab:hover {
opacity: 1;
}
#CartDrawer .sm-cart-recommendations__tab:focus-visible {
outline: 1px solid var(--sm-cart-recommendations-ink);
outline-offset: -3px;
}
#CartDrawer .sm-cart-recommendations__panel[hidden] {
display: none !important;
}
#CartDrawer .sm-cart-recommendations__products {
display: block;
}
#CartDrawer .sm-cart-recommendations__card {
display: grid;
grid-template-columns: 100px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 14px 0;
border-bottom: 1px solid var(--sm-cart-recommendations-divider);
color: inherit;
}
#CartDrawer .sm-cart-recommendations__card:last-child {
border-bottom: 0;
}
#CartDrawer .sm-cart-recommendations__image-link {
display: block;
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 6px;
background: rgba(0, 0, 0, 0.14);
}
#CartDrawer .sm-cart-recommendations__image,
#CartDrawer .sm-cart-recommendations__image--placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
}
#CartDrawer .sm-cart-recommendations__details {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto 1fr;
column-gap: 12px;
align-items: start;
min-width: 0;
padding: 2px 0;
}
#CartDrawer .sm-cart-recommendations__product-title {
grid-column: 1;
grid-row: 1;
display: block;
color: var(--sm-cart-recommendations-ink) !important;
font-size: 15px;
font-weight: 400;
line-height: 1.25;
text-decoration: none;
}
#CartDrawer .sm-cart-recommendations__product-title:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
#CartDrawer .sm-cart-recommendations__price {
grid-column: 1;
grid-row: 2;
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 6px;
color: var(--sm-cart-recommendations-ink) !important;
font-size: 13px;
line-height: 1.2;
}
#CartDrawer .sm-cart-recommendations__compare-price {
color: var(--sm-cart-recommendations-ink) !important;
opacity: 0.65;
}
#CartDrawer .sm-cart-recommendations__price span {
color: var(--sm-cart-recommendations-ink) !important;
}
#CartDrawer .sm-cart-recommendations__action {
grid-column: 2;
grid-row: 1;
align-self: start;
margin: 0;
padding: 0;
}
#CartDrawer .sm-cart-recommendations__action .qai-trigger {
position: static !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 92px;
margin: 0;
padding: 8px 16px 6px !important;
border: 1px solid var(--sm-cart-recommendations-ink) !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--sm-cart-recommendations-ink) !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: 0.04em !important;
}
#CartDrawer .sm-cart-recommendations__action .qai-trigger:hover,
#CartDrawer .sm-cart-recommendations__action .qai-trigger:focus-visible {
background: var(--sm-cart-recommendations-ink) !important;
color: var(--sm-cart-recommendations-bg) !important;
border-color: var(--sm-cart-recommendations-ink) !important;
filter: none;
}
#CartDrawer .sm-cart-recommendations__action .qai-trigger.is-loading {
opacity: 0.55;
pointer-events: none;
}
/* Keep the checkout note directly beneath the left-aligned subtotal label. */
#CartDrawer .drawer__footer > .cart__item-sub.cart__item-row {
margin-bottom: 3px;
}
#CartDrawer .drawer__footer > .cart__item-row.text-center {
margin-bottom: 14px;
text-align: left !important;
}
#CartDrawer .drawer__footer > .cart__item-row.text-center small {
display: block;
text-align: left;
}
/* Pull the checkout action closer to the note and give it more presence. */
#CartDrawer .cart__checkout-wrapper {
margin-top: 10px;
}
#CartDrawer .cart__checkout {
min-height: 60px;
padding-top: 17px !important;
padding-bottom: 17px !important;
}
@media only screen and (max-width: 480px) {
#CartDrawer .sm-cart-recommendations {
margin-top: 0;
padding: 0;
}
#CartDrawer .sm-cart-recommendations__card {
grid-template-columns: 100px minmax(0, 1fr);
gap: 12px;
padding: 12px 0;
}
#CartDrawer .sm-cart-recommendations__image-link {
width: 100px;
height: 100px;
}
#CartDrawer .sm-cart-recommendations__product-title {
font-size: 14px;
}
#CartDrawer .sm-cart-recommendations__action .qai-trigger {
min-width: 82px;
padding: 7px 12px 5px !important;
}
}
/* ================================================================
KLAVIYO "GET 10% OFF" TEASER (form RgKMgX)
Klaviyo renders the tab as a fixed, -90deg-rotated div with inline
styles, so overrides need !important. Notes: docs/projects/website/notes.md
================================================================ */
/* 1. Hide the tab while the cart or nav drawer is open (mobile only). */
@media only screen and (max-width: 768px) {
html.js-drawer-open .kl-teaser-RgKMgX,
html.js-drawer-open [class*="kl-teaser-"] {
display: none !important;
}
}
/* 2. Start the tab 1/3 down the screen on mobile (desktop stays centred).
translate(-100%) makes `top` the tab's top edge. */
@media only screen and (max-width: 768px) {
.kl-teaser-RgKMgX {
top: 33.333% !important;
transform: rotate(-90deg) translate(-100%, 0) !important;
}
}
/* 3. Dismiss X: tucked inside the corner, no circle, thinner stroke.
The tab is rotated, so bottom/right here = visual top/right. */
.kl-teaser-RgKMgX button.klaviyo-close-form {
bottom: 4px !important;
right: 4px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.kl-teaser-RgKMgX button.klaviyo-close-form circle {
fill: none;
stroke: none;
}
.kl-teaser-RgKMgX button.klaviyo-close-form path {
stroke-width: 1.25;
}
/* ================================================================
ESSENTIAL STICKY ADD TO CART: mobile bar hidden until 100vh scrolled
Replace the previous version of this block at the end of
assets/sm-custom.css. Requires assets/sm-sticky-atc-gate.js (marks the
bar with data-sm-sticky-bar and toggles html.sm-past-100vh).
The app sets opacity/visibility via its own classes
(opacity: var(--opacity) etc.) in a stylesheet injected AFTER
sm-custom.css, so a bare attribute selector lost the tie. Anchoring to
the app's #sticky-cart-portal container plus !important wins.
Uses opacity/visibility rather than transform so it never fights the
app's own show/hide animation. Verified 2026-09-03 on the September
Refresh v1 preview. Notes: docs/projects/website/notes.md
================================================================ */
@media only screen and (max-width: 767px) {
#sticky-cart-portal [data-sm-sticky-bar] {
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.25s ease, visibility 0s linear 0.25s !important;
}
html.sm-past-100vh #sticky-cart-portal [data-sm-sticky-bar] {
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0.25s ease, visibility 0s !important;
}
}
/* ================================================================
JUDGE.ME REVIEW WIDGET (all-reviews) — MAABAE
Only the individual review cards get a surface (background + shadow),
now with rounded corners. The widget chrome — summary/header panel and
the sort bar — loses its background and drop-shadow. Scoped to
.maabae-template so the CultureClub navy styling (otra-custom.css) is
untouched. These panels come from Judge.me's own CSS, hence !important.
================================================================ */
/* No background / shadow on anything that ISN'T a review card:
the widget wrapper, the summary+histogram header, the sort bar, and the
reviews container. */
.maabae-template .jdgm-rev-widg,
.maabae-template .jdgm-rev-widg__header,
.maabae-template .jdgm-rev-widg__summary,
.maabae-template .jdgm-rev-widg__actions,
.maabae-template .jdgm-rev-widg__reviews {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Review cards: keep a surface + subtle shadow, add rounded corners. */
.maabae-template .jdgm-rev {
background: #ffffff !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
border: 0 !important;
}
/* STOQ Notify Me Button */
.maabae-template .restock-rocket-button-container .restock-rocket-button-product {
background-color: transparent !important;
color: #102100 !important;
border: 2px solid #102100 !important;
border-radius: 10px !important;
font-family: "Lato", sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: -0.5px !important;
text-transform: uppercase !important;
padding: 13px 20px !important;
min-height: 0 !important; /* STOQ sets min-height:50px */
line-height: 1.42 !important;
text-box: trim-both cap alphabetic; /* same trim as .maabae-template .btn */
box-shadow: none !important;
transition: background-color .2s ease, color .2s ease;
}
/* STOQ Preorder Badge on PDP */
.maabae-template .product-single__title .restock-rocket-preorder-badge {
display: none;
}
/* Hover: fill to primary (standard outline-button behaviour).
STOQ fades the whole container to 0.8 on hover - override that so the
fill reads cleanly. Delete these two rules if you prefer no hover fill. */
.maabae-template .restock-rocket-button-container:hover {
opacity: 1 !important;
}
.maabae-template .restock-rocket-button-container:hover .restock-rocket-button-product {
background-color: #102100 !important;
color: #F6F5F4 !important;
}
/* ================================================================
JUDGE.ME BUTTONS -> MAABAE theme buttons
================================================================ */
/* Shared box + type for every Judge.me button flavour */
.jdgm-write-rev-link,
.jdgm-ask-question-btn,
.jdgm-btn {
font-family: "Lato", sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: -0.5px !important;
text-transform: uppercase !important;
line-height: 1 !important;
padding: 11px 20px !important;
border-radius: 10px !important;
border-width: 2px !important;
border-style: solid !important;
box-shadow: none !important;
text-decoration: none !important;
}
/* Primary (solid) */
.jdgm-write-rev-link,
.jdgm-ask-question-btn,
.jdgm-btn--solid {
background-color: #102100 !important;
border-color: #102100 !important;
color: #F6F5F4 !important;
}
.jdgm-write-rev-link:hover,
.jdgm-ask-question-btn:hover,
.jdgm-btn--solid:hover {
background-color: #102100 !important;
border-color: #102100 !important;
color: #F6F5F4 !important;
}
/* Secondary (outline) - Cancel / Back */
.jdgm-btn--border {
background-color: transparent !important;
border-color: #102100 !important;
color: #102100 !important;
}
.jdgm-btn--border:hover {
background-color: #102100 !important;
color: #F6F5F4 !important;
}
/* Contact page input fields */
.maabae-template .contact-form .form-vertical input.input-full,
.maabae-template .contact-form .form-vertical textarea.input-full {
background-color: #fff;
border: 1px solid #102100;
color: #000;
}
.maabae-template .contact-form .form-vertical input.input-full:focus-visible,
.maabae-template .contact-form .form-vertical textarea.input-full:focus-visible {
outline: 2px solid #102100;
outline-offset: 2px;
}