/** Shopify CDN: Minification failed
Line 6637:0 Unexpected "/"
**/
/* ===================================================================
HomePal — Full Consolidated CSS (final v3)
PlayOne design system + theme overrides + polish + bug fixes
Replaces assets/homepal-playone.css entirely
=================================================================== */
/* ===================================================================
1. CSS VARIABLES
=================================================================== */
:root {
/* Brand palette */
--hp-primary: #C45D3E;
--hp-primary-dark: #A84830;
--hp-primary-gradient: linear-gradient(135deg, #E8734F 0%, #C45D3E 50%, #A84830 100%);
--hp-coral: #C45D3E;
--hp-coral-dark: #8A3F2A;
--hp-coral-soft: rgba(196, 93, 62, 0.05);
/* Sage — primary CTA color */
--hp-secondary: #2D6A4F;
--hp-sage: #4A5D3F;
--hp-sage-dark: #2D3A26;
--hp-sage-light: #8DA37F;
--hp-sage-soft: rgba(74, 93, 63, 0.06);
/* Accents */
--hp-accent-yellow: #FFD701;
--hp-accent-blue: #2196F3;
--hp-accent-green: #2D6A4F;
--hp-accent-orange: #FF9800;
--hp-accent-teal: #00897B;
--hp-accent-purple: #7B1FA2;
--hp-accent-pink: #E91E63;
--hp-whatsapp: #25D366;
/* Backgrounds — warm neutral */
--hp-bg: #FFFFFF;
--hp-bg-light: #F8F8F8;
--hp-bg-warm: #FAF8F5;
--hp-surface: #FAF7F2;
--hp-surface-alt: #F4F0E8;
--hp-cream: #FAF7F2;
--hp-cream-border: #ECE6D9;
/* Text + borders */
--hp-text: #1A1F1B;
--hp-text-muted: #5F6B5A;
--hp-text-secondary: #5F6B5A;
--hp-text-tertiary: #8B9580;
--hp-charcoal: #1F2920;
--hp-border: #ECE6D9;
--hp-border-subtle: rgba(31, 41, 32, 0.06);
--hp-border-strong: rgba(31, 41, 32, 0.18);
--color-secondary-background: #FAF7F2 !important;
/* Shadows */
--hp-shadow-xs: 0 1px 2px rgba(31, 41, 32, 0.04);
--hp-shadow-sm: 0 2px 6px rgba(31, 41, 32, 0.05);
--hp-shadow-md: 0 8px 20px rgba(31, 41, 32, 0.06);
--hp-shadow-lg: 0 16px 40px rgba(31, 41, 32, 0.08);
/* Radii */
--hp-radius-sm: 8px;
--hp-radius: 12px;
--hp-radius-lg: 18px;
--hp-radius-xl: 24px;
/* Motion */
--hp-ease: cubic-bezier(0.32, 0.72, 0, 1);
--hp-fast: 0.18s var(--hp-ease);
--hp-base: 0.28s var(--hp-ease);
--hp-slow: 0.4s var(--hp-ease);
--hp-transition: 0.28s var(--hp-ease);
/* Layout */
--hp-header-height: 72px;
--hp-announcement-height: 36px;
--hp-page-width: 1340px;
}
/* ===================================================================
2. GLOBAL BASE
=================================================================== */
body {
background: var(--hp-bg);
color: var(--hp-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--hp-text);
}
.hp-scroll-snap {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 4px 16px 24px;
margin: 0 -16px;
scrollbar-width: none;
}
.hp-scroll-snap::-webkit-scrollbar { display: none; }
.hp-scroll-snap > * { scroll-snap-align: start; flex-shrink: 0; }
/* ===================================================================
3. HP HEADER (custom component)
=================================================================== */
.hp-header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--hp-primary-gradient);
box-shadow: var(--hp-shadow-md);
}
.hp-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--hp-page-width);
margin: 0 auto;
padding: 0 24px;
height: var(--hp-header-height);
gap: 24px;
}
.hp-header__logo { flex-shrink: 0; }
.hp-header__logo img,
.hp-header__logo svg { max-height: 52px; width: auto; }
.hp-header__logo-text {
font-size: 28px; font-weight: 800; color: #fff;
text-decoration: none; line-height: 1; letter-spacing: -0.02em;
}
.hp-header__logo-text span {
display: block; font-size: 11px; font-weight: 600;
font-style: italic; opacity: 0.9; letter-spacing: 0.02em;
}
.hp-header__nav {
display: flex; align-items: center; gap: 8px;
flex: 1; justify-content: center;
}
.hp-header__nav-item {
position: relative; color: #fff; font-size: 15px; font-weight: 600;
text-decoration: none; padding: 8px 16px; border-radius: var(--hp-radius-sm);
transition: background var(--hp-fast); white-space: nowrap; cursor: pointer;
}
.hp-header__nav-item:hover,
.hp-header__nav-item.active { background: rgba(255,255,255,0.18); }
.hp-header__icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hp-header__icon-btn {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
color: #fff; background: transparent; border: none;
cursor: pointer; transition: background var(--hp-fast); position: relative;
}
.hp-header__icon-btn:hover { background: rgba(255,255,255,0.18); }
.hp-header__icon-btn svg {
width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
}
.hp-header__cart-count {
position: absolute; top: 2px; right: 2px;
min-width: 18px; height: 18px;
background: var(--hp-accent-yellow); color: #000;
font-size: 10px; font-weight: 700; border-radius: 50%;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.hp-header__mobile-toggle {
display: none; align-items: center; justify-content: center;
width: 40px; height: 40px; background: none; border: none;
color: #fff; cursor: pointer;
}
.hp-header__mobile-toggle svg {
width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none;
}
/* ===================================================================
4. ANNOUNCEMENT BAR + FREE DELIVERY
=================================================================== */
.hp-announcement {
background: var(--hp-text); color: #fff; text-align: center;
padding: 8px 16px; font-size: 13px; font-weight: 500;
display: flex; align-items: center; justify-content: center;
gap: 8px; min-height: var(--hp-announcement-height);
}
.hp-announcement a { color: var(--hp-accent-yellow); text-decoration: underline; }
.hp-announcement__icon { width: 24px; height: 24px; }
.hp-free-delivery {
background: #fff; text-align: center; padding: 10px 16px;
font-size: 14px; font-weight: 600; color: var(--hp-text);
border-bottom: 1px solid var(--hp-border);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hp-free-delivery__icon { font-size: 20px; }
/* ===================================================================
5. MEGA MENU (custom hp-*)
=================================================================== */
.hp-mega-menu {
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; box-shadow: var(--hp-shadow-lg);
border-top: 3px solid var(--hp-sage); z-index: 999;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: all var(--hp-base);
}
.hp-header__nav-item:hover .hp-mega-menu,
.hp-mega-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }
.hp-mega-menu__inner {
max-width: var(--hp-page-width); margin: 0 auto; padding: 24px;
display: grid; grid-template-columns: 280px 1fr;
gap: 32px; min-height: 380px;
}
.hp-mega-menu__sidebar { border-right: 1px solid var(--hp-border); padding-right: 24px; }
.hp-mega-menu__sidebar-title {
font-size: 13px; font-weight: 700; text-transform: uppercase;
color: var(--hp-text); margin-bottom: 16px; letter-spacing: 0.05em;
}
.hp-mega-menu__brands {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 12px; margin-bottom: 24px;
}
.hp-mega-menu__brand-item {
display: flex; align-items: center; justify-content: center;
padding: 8px; border-radius: var(--hp-radius-sm);
background: var(--hp-bg-light); transition: all var(--hp-fast);
}
.hp-mega-menu__brand-item:hover { box-shadow: var(--hp-shadow-sm); transform: translateY(-2px); }
.hp-mega-menu__brand-item img { max-height: 32px; width: auto; object-fit: contain; }
.hp-mega-menu__categories-title {
font-size: 16px; font-weight: 700; text-align: center;
margin-bottom: 20px; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--hp-text);
}
.hp-mega-menu__grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px;
}
.hp-mega-menu__cat-item {
display: flex; flex-direction: column; align-items: center;
text-decoration: none; color: var(--hp-text);
transition: transform var(--hp-fast);
}
.hp-mega-menu__cat-item:hover { transform: translateY(-4px); }
.hp-mega-menu__cat-img {
width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
margin-bottom: 8px; background: var(--hp-bg-light);
display: flex; align-items: center; justify-content: center;
}
.hp-mega-menu__cat-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-mega-menu__cat-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.3; }
/* ===================================================================
6. HERO GRID (custom hp-*)
=================================================================== */
.hp-hero-grid {
max-width: var(--hp-page-width); margin: 0 auto; padding: 20px 24px;
}
.hp-hero-grid__row-top {
display: grid; grid-template-columns: 1fr 1.4fr 1fr;
gap: 16px; margin-bottom: 16px;
}
.hp-hero-grid__row-bottom {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.hp-hero-card {
position: relative; border-radius: var(--hp-radius-lg); overflow: hidden;
text-decoration: none; color: inherit; display: block; min-height: 280px;
transition: transform var(--hp-base), box-shadow var(--hp-base);
}
.hp-hero-card:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow-lg); }
.hp-hero-card__bg { position: absolute; inset: 0; z-index: 0; }
.hp-hero-card__bg img { width: 100%; height: 100%; object-fit: cover; }
.hp-hero-card__overlay { position: absolute; inset: 0; z-index: 1; }
.hp-hero-card__content {
position: relative; z-index: 2; padding: 24px;
height: 100%; display: flex; flex-direction: column;
}
.hp-hero-card__heading { font-size: 32px; font-weight: 800; line-height: 1.1; margin-bottom: 8px; }
.hp-hero-card--small .hp-hero-card__heading { font-size: 26px; }
.hp-hero-card__link {
font-size: 14px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
.hp-hero-grid__row-bottom .hp-hero-card { min-height: 200px; }
.hp-hero-grid__row-bottom .hp-hero-card__heading { font-size: 24px; }
.hp-hero-card--theme-warm { background: linear-gradient(135deg, #FAF8F5, #F0EBE3); color: var(--hp-text); }
.hp-hero-card--theme-green { background: linear-gradient(135deg, #2D6A4F, #1B4332); color: #fff; }
.hp-hero-card--theme-coral { background: linear-gradient(135deg, #C45D3E, #A84830); color: #fff; }
.hp-hero-card--theme-yellow { background: linear-gradient(135deg, #FFD701, #FFC107); color: var(--hp-text); }
.hp-hero-card--theme-blue { background: linear-gradient(135deg, #2196F3, #1976D2); color: #fff; }
.hp-hero-card--theme-orange { background: linear-gradient(135deg, #FF9800, #F57C00); color: #fff; }
.hp-hero-card--theme-teal { background: linear-gradient(135deg, #00897B, #00695C); color: #fff; }
.hp-hero-card--theme-purple { background: linear-gradient(135deg, #7B1FA2, #6A1B9A); color: #fff; }
.hp-hero-card--theme-light { background: #F0F0F0; color: var(--hp-text); }
/* ===================================================================
7. SECTION SHELL + TABS (custom hp-*)
=================================================================== */
.hp-section { max-width: var(--hp-page-width); margin: 0 auto; padding: 40px 24px; }
.hp-section__header { text-align: center; margin-bottom: 32px; }
.hp-section__title { font-size: 28px; font-weight: 800; margin-bottom: 4px; color: var(--hp-text); }
.hp-section__subtitle {
font-size: 13px; font-weight: 600; text-transform: uppercase;
color: var(--hp-sage); letter-spacing: 0.18em;
}
.hp-tabs {
display: flex; justify-content: center; gap: 8px;
margin-bottom: 28px; flex-wrap: wrap;
}
.hp-tab {
padding: 9px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
background: transparent; color: var(--hp-text-secondary);
border: 1.5px solid var(--hp-border); cursor: pointer;
transition: all var(--hp-fast); white-space: nowrap;
}
.hp-tab:hover { border-color: var(--hp-sage); color: var(--hp-sage); background: var(--hp-sage-soft); }
.hp-tab.active { background: var(--hp-sage); color: #fff; border-color: var(--hp-sage); }
/* ===================================================================
8. CUSTOM HP PRODUCT CARDS
=================================================================== */
.hp-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hp-product-card {
position: relative; border-radius: var(--hp-radius); overflow: hidden;
background: #fff; transition: all var(--hp-base);
border: 1px solid transparent;
}
.hp-product-card:hover { border-color: var(--hp-border-subtle); box-shadow: var(--hp-shadow-md); }
.hp-product-card__image-wrapper {
position: relative; aspect-ratio: 1; overflow: hidden;
background: var(--hp-surface); border-radius: var(--hp-radius) var(--hp-radius) 0 0;
}
.hp-product-card__image {
width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;
}
.hp-product-card:hover .hp-product-card__image { transform: scale(1.05); }
.hp-product-card__image--secondary {
position: absolute; inset: 0; opacity: 0;
transition: opacity var(--hp-fast);
}
.hp-product-card:hover .hp-product-card__image--secondary { opacity: 1; }
.hp-product-card__badges {
position: absolute; top: 8px; left: 8px;
display: flex; flex-direction: column; gap: 4px; z-index: 2;
}
.hp-badge {
display: inline-block; padding: 4px 10px; border-radius: var(--hp-radius-sm);
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.hp-badge--sale { background: var(--hp-coral); color: #fff; }
.hp-badge--new { background: var(--hp-sage); color: #fff; }
.hp-badge--soldout { background: rgba(26, 31, 27, 0.85); color: #fff; }
.hp-product-card__quick-add {
position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 2;
opacity: 0; transform: translateY(8px);
transition: all var(--hp-base);
}
.hp-product-card:hover .hp-product-card__quick-add { opacity: 1; transform: translateY(0); }
.hp-product-card__quick-btn {
width: 100%; padding: 10px; background: var(--hp-text); color: #fff;
border: none; border-radius: var(--hp-radius-sm);
font-size: 13px; font-weight: 600; cursor: pointer;
text-transform: uppercase; letter-spacing: 0.04em;
transition: background var(--hp-fast);
}
.hp-product-card__quick-btn:hover { background: var(--hp-sage); }
.hp-product-card__info { padding: 12px 14px 16px; text-align: center; }
.hp-product-card__vendor {
font-size: 11px; font-weight: 600; text-transform: uppercase;
color: var(--hp-text-tertiary); letter-spacing: 0.04em; margin-bottom: 4px;
}
.hp-product-card__title {
font-size: 14px; font-weight: 600; color: var(--hp-text);
margin-bottom: 6px; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.hp-product-card__title a { color: inherit; text-decoration: none; }
.hp-product-card__price { font-size: 16px; font-weight: 700; color: var(--hp-text); }
.hp-product-card__price--compare {
text-decoration: line-through; color: var(--hp-text-tertiary);
font-weight: 400; font-size: 13px; margin-left: 6px;
}
.hp-product-card__price--sale { color: var(--hp-coral); }
/* ===================================================================
9. COLLECTION GRID (custom hp-*)
=================================================================== */
.hp-collection-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.hp-collection-card {
text-align: center; text-decoration: none; color: var(--hp-text);
transition: transform var(--hp-base);
}
.hp-collection-card:hover { transform: translateY(-4px); }
.hp-collection-card__image {
aspect-ratio: 1; border-radius: var(--hp-radius-lg); overflow: hidden;
margin-bottom: 10px; background: var(--hp-surface);
}
.hp-collection-card__image img {
width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;
}
.hp-collection-card:hover .hp-collection-card__image img { transform: scale(1.08); }
.hp-collection-card__title { font-size: 15px; font-weight: 700; }
/* ===================================================================
10. HP TRUST BAR + REVIEWS (custom)
=================================================================== */
.hp-trust-bar {
max-width: var(--hp-page-width); margin: 0 auto; padding: 32px 24px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.hp-trust-item {
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 20px;
border-radius: var(--hp-radius); background: var(--hp-surface);
}
.hp-trust-item__icon { width: 48px; height: 48px; margin-bottom: 12px; color: var(--hp-sage); }
.hp-trust-item__icon svg { width: 100%; height: 100%; }
.hp-trust-item__title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.hp-trust-item__desc { font-size: 13px; color: var(--hp-text-secondary); }
.hp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-review-card {
padding: 24px; border-radius: var(--hp-radius);
background: #fff; border: 1px solid var(--hp-border-subtle);
}
.hp-review-card__stars { color: var(--hp-coral); margin-bottom: 12px; font-size: 16px; }
.hp-review-card__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.hp-review-card__text {
font-size: 14px; color: var(--hp-text-secondary);
line-height: 1.6; margin-bottom: 12px;
}
.hp-review-card__author { font-size: 13px; font-weight: 600; color: var(--hp-sage); }
/* ===================================================================
11. HP CUSTOM PRODUCT PAGE
=================================================================== */
.hp-product-page {
max-width: var(--hp-page-width); margin: 0 auto; padding: 20px 24px 60px;
display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.hp-product-page__gallery { position: sticky; top: calc(var(--hp-header-height) + 20px); }
.hp-product-page__main-image {
border-radius: var(--hp-radius-lg); overflow: hidden;
background: var(--hp-surface); margin-bottom: 12px;
}
.hp-product-page__main-image img { width: 100%; height: auto; }
.hp-product-page__thumbnails { display: flex; gap: 8px; overflow-x: auto; }
.hp-product-page__thumb {
width: 72px; height: 72px; border-radius: var(--hp-radius-sm);
overflow: hidden; border: 2px solid transparent;
cursor: pointer; flex-shrink: 0; transition: border-color var(--hp-fast);
}
.hp-product-page__thumb.active,
.hp-product-page__thumb:hover { border-color: var(--hp-sage); }
.hp-product-page__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-product-page__info { padding-top: 8px; }
.hp-product-page__breadcrumb { font-size: 13px; color: var(--hp-text-tertiary); margin-bottom: 12px; }
.hp-product-page__breadcrumb a { color: var(--hp-text-tertiary); text-decoration: none; }
.hp-product-page__breadcrumb a:hover { color: var(--hp-sage); }
.hp-product-page__vendor {
font-size: 13px; font-weight: 700; text-transform: uppercase;
color: var(--hp-text-tertiary); letter-spacing: 0.06em; margin-bottom: 8px;
}
.hp-product-page__title { font-size: 28px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
.hp-product-page__meta {
display: flex; gap: 12px; align-items: center;
margin-bottom: 16px; flex-wrap: wrap;
}
.hp-product-page__tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 12px; border-radius: 6px;
font-size: 12px; font-weight: 600;
background: var(--hp-sage-soft); color: var(--hp-sage);
}
.hp-product-page__stock {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; font-weight: 600; color: var(--hp-sage);
}
.hp-product-page__stock svg { width: 16px; height: 16px; }
.hp-product-page__price-row { margin-bottom: 20px; }
.hp-product-page__price { font-size: 32px; font-weight: 800; }
.hp-product-page__price sup { font-size: 18px; top: -8px; }
.hp-product-page__description {
font-size: 15px; line-height: 1.65; color: var(--hp-text); margin-bottom: 24px;
}
.hp-product-page__promises { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.hp-product-page__promise {
display: flex; align-items: center; gap: 10px;
font-size: 14px; font-weight: 500;
}
.hp-product-page__promise svg { width: 20px; height: 20px; color: var(--hp-sage); flex-shrink: 0; }
.hp-product-page__promise strong { font-weight: 700; }
.hp-product-page__add-row { display: flex; gap: 12px; margin-bottom: 24px; }
.hp-product-page__add-btn {
flex: 1; padding: 16px 32px; background: var(--hp-sage); color: #fff;
border: none; border-radius: var(--hp-radius-sm);
font-size: 16px; font-weight: 700; cursor: pointer;
text-transform: uppercase; letter-spacing: 0.04em;
transition: background var(--hp-fast), transform var(--hp-fast);
}
.hp-product-page__add-btn:hover { background: var(--hp-sage-dark); transform: translateY(-1px); }
.hp-product-page__wishlist {
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--hp-border); border-radius: var(--hp-radius-sm);
background: #fff; cursor: pointer; color: var(--hp-text-tertiary);
transition: all var(--hp-fast);
}
.hp-product-page__wishlist:hover { border-color: var(--hp-sage); color: var(--hp-sage); }
.hp-product-page__wishlist svg { width: 22px; height: 22px; }
.hp-product-page__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-product-page__tag-pill {
padding: 6px 14px; border-radius: 999px;
font-size: 12px; font-weight: 500;
border: 1px solid var(--hp-border); color: var(--hp-text);
text-decoration: none; transition: all var(--hp-fast); background: #fff;
}
.hp-product-page__tag-pill:hover {
border-color: var(--hp-sage); color: var(--hp-sage); background: var(--hp-sage-soft);
}
/* ===================================================================
12. HP CART DRAWER (custom)
=================================================================== */
.hp-cart-drawer {
position: fixed; top: 0; right: 0;
width: 420px; max-width: 95vw;
height: 100vh; height: 100dvh;
background: #fff; z-index: 2000;
box-shadow: -4px 0 30px rgba(0,0,0,0.15);
transform: translateX(100%);
transition: transform 0.35s var(--hp-ease);
display: flex; flex-direction: column; overflow: hidden;
}
.hp-cart-drawer.open { transform: translateX(0); }
.hp-cart-drawer__header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--hp-border); flex-shrink: 0;
}
.hp-cart-drawer__title { font-size: 18px; font-weight: 700; }
.hp-cart-drawer__close {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
border: none; background: var(--hp-surface); border-radius: 50%;
cursor: pointer; color: var(--hp-text);
}
.hp-cart-drawer__items { flex: 1; overflow-y: auto; padding: 16px 20px; }
.hp-cart-drawer__item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hp-border); }
.hp-cart-drawer__item-img {
width: 80px; height: 80px; border-radius: var(--hp-radius-sm);
overflow: hidden; background: var(--hp-surface); flex-shrink: 0;
}
.hp-cart-drawer__item-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-cart-drawer__item-info { flex: 1; min-width: 0; }
.hp-cart-drawer__item-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
.hp-cart-drawer__item-price { font-size: 15px; font-weight: 700; color: var(--hp-text); }
.hp-cart-drawer__item-qty {
display: inline-flex; align-items: center; gap: 0;
border: 1px solid var(--hp-border); border-radius: var(--hp-radius-sm); margin-top: 8px;
}
.hp-cart-drawer__qty-btn {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border: none; background: transparent; cursor: pointer;
font-size: 16px; font-weight: 600; color: var(--hp-text);
}
.hp-cart-drawer__qty-value { width: 32px; text-align: center; font-size: 14px; font-weight: 600; }
.hp-cart-upsell {
padding: 12px 20px 14px; border-top: 1px solid var(--hp-border);
flex-shrink: 0; background: var(--hp-surface); overflow: hidden;
}
.hp-cart-upsell__title {
font-size: 14px; font-weight: 700; margin-bottom: 12px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.hp-cart-upsell__scroll {
display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.hp-cart-upsell__scroll::-webkit-scrollbar { height: 4px; }
.hp-cart-upsell__scroll::-webkit-scrollbar-track { background: var(--hp-border); border-radius: 2px; }
.hp-cart-upsell__scroll::-webkit-scrollbar-thumb { background: var(--hp-sage); border-radius: 2px; }
.hp-cart-upsell__item {
flex-shrink: 0; width: 120px; scroll-snap-align: start;
border-radius: var(--hp-radius-sm); overflow: hidden;
background: #fff; border: 1px solid var(--hp-border);
transition: border-color var(--hp-fast);
}
.hp-cart-upsell__item:hover { border-color: var(--hp-sage); }
.hp-cart-upsell__item-img { aspect-ratio: 1; overflow: hidden; background: var(--hp-surface); display: block; }
.hp-cart-upsell__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-cart-upsell__item-info { padding: 8px 10px; }
.hp-cart-upsell__item-title {
font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 4px;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.hp-cart-upsell__item-price { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.hp-cart-upsell__add-btn {
width: 100%; padding: 7px; background: var(--hp-sage); color: #fff;
border: none; border-radius: 6px;
font-size: 11px; font-weight: 700; cursor: pointer;
text-transform: uppercase; letter-spacing: 0.04em;
transition: background var(--hp-fast);
display: flex; align-items: center; justify-content: center; gap: 4px;
}
.hp-cart-upsell__add-btn:hover { background: var(--hp-sage-dark); }
.hp-cart-upsell__add-btn.added { background: var(--hp-accent-green); }
.hp-cart-upsell__add-btn svg { width: 14px; height: 14px; }
.hp-cart-drawer__footer {
padding: 16px 20px; border-top: 1px solid var(--hp-border);
flex-shrink: 0; background: #fff;
position: relative; z-index: 2;
}
.hp-cart-drawer__subtotal {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.hp-cart-drawer__subtotal-label { font-size: 15px; font-weight: 600; }
.hp-cart-drawer__subtotal-value { font-size: 20px; font-weight: 800; }
.hp-cart-drawer__checkout-btn {
width: 100%; padding: 16px; background: var(--hp-sage); color: #fff;
border: none; border-radius: var(--hp-radius-sm);
font-size: 16px; font-weight: 700; cursor: pointer;
text-transform: uppercase; letter-spacing: 0.06em;
transition: background var(--hp-fast);
}
.hp-cart-drawer__checkout-btn:hover { background: var(--hp-sage-dark); }
.hp-cart-drawer__overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.4);
z-index: 1999; opacity: 0; visibility: hidden;
transition: all 0.3s ease;
}
.hp-cart-drawer__overlay.open { opacity: 1; visibility: visible; }
@media (max-height: 700px) {
.hp-cart-upsell { padding: 10px 16px 12px; }
.hp-cart-upsell__item { width: 100px; }
.hp-cart-upsell__item-img { aspect-ratio: 4/3; }
.hp-cart-drawer__footer { padding: 12px 16px; }
.hp-cart-drawer__checkout-btn { padding: 14px; font-size: 15px; }
}
@media (max-height: 500px) {
.hp-cart-upsell { display: none !important; }
}
/* ===================================================================
13. HP FOOTER + BREADCRUMB + COLLECTION + MOBILE NAV
=================================================================== */
.hp-footer { background: var(--hp-text); color: #fff; padding: 48px 24px 24px; }
.hp-footer__inner {
max-width: var(--hp-page-width); margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 40px; margin-bottom: 40px;
}
.hp-footer__col-title {
font-size: 15px; font-weight: 700; margin-bottom: 16px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.hp-footer__links { list-style: none; padding: 0; margin: 0; }
.hp-footer__links li { margin-bottom: 10px; }
.hp-footer__links a {
color: rgba(255,255,255,0.7); text-decoration: none;
font-size: 14px; transition: color var(--hp-fast);
}
.hp-footer__links a:hover { color: #fff; }
.hp-footer__bottom {
max-width: var(--hp-page-width); margin: 0 auto;
padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15);
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: rgba(255,255,255,0.5);
}
.hp-breadcrumb {
max-width: var(--hp-page-width); margin: 0 auto;
padding: 12px 24px; font-size: 13px; color: var(--hp-text-tertiary);
}
.hp-breadcrumb a { color: var(--hp-text-tertiary); text-decoration: none; }
.hp-breadcrumb a:hover { color: var(--hp-sage); }
.hp-breadcrumb__sep { margin: 0 6px; opacity: 0.5; }
.hp-collection { max-width: var(--hp-page-width); margin: 0 auto; padding: 0 24px 60px; }
.hp-collection__header { text-align: center; padding: 24px 0 32px; }
.hp-collection__title { font-size: 32px; font-weight: 800; }
.hp-collection__count { font-size: 14px; color: var(--hp-text-tertiary); margin-top: 4px; }
.hp-collection__toolbar {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 24px; padding: 12px 0;
border-bottom: 1px solid var(--hp-border);
}
.hp-collection__sort select {
padding: 8px 14px; border: 1px solid var(--hp-border);
border-radius: var(--hp-radius-sm); font-size: 14px; background: #fff;
}
.hp-mobile-nav {
position: fixed; top: 0; left: 0;
width: 320px; max-width: 85vw; height: 100vh;
background: #fff; z-index: 2000;
transform: translateX(-100%);
transition: transform 0.35s var(--hp-ease);
display: flex; flex-direction: column; overflow-y: auto;
}
.hp-mobile-nav.open { transform: translateX(0); }
.hp-mobile-nav__header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--hp-border);
}
.hp-mobile-nav__items { padding: 12px 0; }
.hp-mobile-nav__item {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; color: var(--hp-text); text-decoration: none;
font-size: 16px; font-weight: 600;
border-bottom: 1px solid var(--hp-border);
}
.hp-mobile-nav__item:hover { background: var(--hp-surface); }
/* ===================================================================
14. RESPONSIVE BREAKPOINTS (custom hp-*)
=================================================================== */
@media (max-width: 1024px) {
.hp-hero-grid__row-top { grid-template-columns: 1fr 1fr; }
.hp-hero-grid__row-top .hp-hero-card:nth-child(2) { grid-column: span 1; }
.hp-hero-grid__row-bottom { grid-template-columns: repeat(2, 1fr); }
.hp-product-grid { grid-template-columns: repeat(3, 1fr); }
.hp-collection-grid { grid-template-columns: repeat(3, 1fr); }
.hp-footer__inner { grid-template-columns: repeat(2, 1fr); }
.hp-mega-menu__inner { grid-template-columns: 1fr; }
.hp-mega-menu__sidebar {
border-right: none; padding-right: 0;
border-bottom: 1px solid var(--hp-border); padding-bottom: 16px;
}
}
@media (max-width: 768px) {
:root { --hp-header-height: 60px; }
.hp-header__nav { display: none; }
.hp-header__mobile-toggle { display: flex; }
.hp-hero-grid__row-top { grid-template-columns: 1fr; }
.hp-hero-grid__row-bottom { grid-template-columns: repeat(2, 1fr); }
.hp-hero-card { min-height: 200px; }
.hp-hero-card__heading { font-size: 24px; }
.hp-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hp-product-page { grid-template-columns: 1fr; gap: 24px; }
.hp-product-page__gallery { position: static; }
.hp-collection-grid { grid-template-columns: repeat(3, 1fr); }
.hp-trust-bar { grid-template-columns: 1fr; }
.hp-reviews { grid-template-columns: 1fr; }
.hp-footer__inner { grid-template-columns: 1fr; gap: 24px; }
.hp-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
.hp-section__title { font-size: 22px; }
.hp-product-page__title { font-size: 22px; }
.hp-product-page__price { font-size: 26px; }
.hp-tabs {
overflow-x: auto; justify-content: flex-start;
flex-wrap: nowrap; padding-bottom: 4px;
}
}
@media (max-width: 480px) {
.hp-hero-grid { padding: 12px 16px; }
.hp-hero-grid__row-top,
.hp-hero-grid__row-bottom { gap: 10px; }
.hp-hero-card { min-height: 160px; }
.hp-hero-card__heading { font-size: 20px; }
.hp-section { padding: 24px 16px; }
.hp-collection-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ===================================================================
15. UTILITIES + ANIMATIONS
=================================================================== */
.hp-container { max-width: var(--hp-page-width); margin: 0 auto; padding: 0 24px; }
.hp-text-center { text-align: center; }
.hp-mb-0 { margin-bottom: 0; }
.hp-mb-sm { margin-bottom: 16px; }
.hp-mb-md { margin-bottom: 32px; }
.hp-mb-lg { margin-bottom: 48px; }
.hp-view-all {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600; color: var(--hp-sage);
text-decoration: none; margin-top: 24px;
transition: gap var(--hp-fast);
}
.hp-view-all:hover { gap: 10px; }
.hp-view-all svg { width: 16px; height: 16px; }
.hp-spinner {
width: 20px; height: 20px;
border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
border-radius: 50%; animation: hp-spin 0.6s linear infinite;
}
@keyframes hp-spin { to { transform: rotate(360deg); } }
.hp-divider {
max-width: var(--hp-page-width); margin: 0 auto;
height: 1px; background: var(--hp-border);
}
/* ===================================================================
16. THEME SECTION OVERRIDES — Trust Bar
=================================================================== */
.header__color-line,
.section-divider--rainbow,
.gradient-divider {
background: var(--hp-border) !important;
height: 1px !important;
border: 0 !important;
}
body .shopify-section .icon-banners,
body .shopify-section [class*="icon-banners"] {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 2.5rem 1rem !important;
}
body .icon-banners::before,
body .icon-banners::after { display: none !important; content: none !important; }
body .icon-banners .grid,
body .icon-banners > div > .grid {
gap: 14px !important;
padding: 0 !important;
}
body .icon-banners .banner,
body .icon-banners .banner__item,
body section[class*="icon-banners"] .grid > * {
background: #FFFFFF !important;
background-image: none !important;
border: 1px solid var(--hp-border-subtle) !important;
border-radius: var(--hp-radius-lg) !important;
padding: 1.75rem 1.25rem !important;
box-shadow: var(--hp-shadow-xs) !important;
transition: transform var(--hp-base), box-shadow var(--hp-base), border-color var(--hp-base) !important;
position: relative;
overflow: hidden;
}
body .icon-banners .banner:hover,
body .icon-banners .banner__item:hover {
transform: translateY(-3px) !important;
border-color: rgba(74, 93, 63, 0.2) !important;
box-shadow: var(--hp-shadow-md) !important;
}
body .icon-banners .banner::before,
body .icon-banners .banner__item::before {
content: '' !important;
display: block !important;
position: absolute !important;
top: 0; left: 0; bottom: 0;
width: 3px !important;
background: var(--hp-sage) !important;
transform: scaleY(0);
transform-origin: top;
transition: transform var(--hp-base) !important;
}
body .icon-banners .banner:hover::before,
body .icon-banners .banner__item:hover::before { transform: scaleY(1); }
body .icon-banners .banner__icon,
body .icon-banners__icon {
width: 52px !important;
height: 52px !important;
margin: 0 auto 14px !important;
background: var(--hp-surface) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
transition: all var(--hp-base) !important;
}
body .icon-banners .banner:hover .banner__icon,
body .icon-banners .banner__item:hover .banner__icon {
background: var(--hp-sage) !important;
transform: scale(1.05);
}
body .icon-banners .banner__icon svg,
body .icon-banners__icon svg {
width: 22px !important;
height: 22px !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
body .icon-banners .banner__icon svg,
body .icon-banners .banner__icon svg path,
body .icon-banners__icon svg,
body .icon-banners__icon svg path {
fill: var(--hp-sage) !important;
stroke: var(--hp-sage) !important;
color: var(--hp-sage) !important;
}
body .icon-banners .banner:hover .banner__icon svg path,
body .icon-banners .banner__item:hover .banner__icon svg path {
fill: #FFFFFF !important;
stroke: #FFFFFF !important;
}
body .icon-banners .banner__heading,
body .icon-banners__heading {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
margin: 0 0 6px !important;
letter-spacing: -0.01em !important;
}
body .icon-banners .banner__description,
body .icon-banners__description {
font-size: 12.5px !important;
color: var(--hp-text-secondary) !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* ===================================================================
17. THEME OVERRIDES — Featured Tabs / Slideshow / Reviews / Contact
=================================================================== */
.featured-collection-tabs__container {
display: flex !important;
justify-content: center;
flex-wrap: wrap;
gap: 8px !important;
padding: 0.5rem 1rem 1.5rem !important;
margin-bottom: 8px !important;
}
.featured-collection-tabs__item {
padding: 9px 20px !important;
border-radius: 999px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: var(--hp-text-secondary) !important;
background: transparent !important;
border: 1.5px solid var(--hp-border) !important;
transition: all var(--hp-fast) !important;
text-decoration: none !important;
margin: 0 !important;
}
.featured-collection-tabs__item:hover {
border-color: var(--hp-sage) !important;
color: var(--hp-sage) !important;
background: var(--hp-sage-soft) !important;
}
.featured-collection-tabs__item.animation-underline--active {
background: var(--hp-sage) !important;
border-color: var(--hp-sage) !important;
color: #FFFFFF !important;
}
.featured-collection-tabs__item .tabs__indicator { display: none !important; }
.image-banner,
.slideshow {
border-radius: var(--hp-radius-lg) !important;
overflow: hidden;
}
.slideshow__text-wrap a,
.slideshow .btn,
.image-banner__buttons a,
.image-banner__buttons .btn {
display: inline-block !important;
background: var(--hp-sage) !important;
color: #FFFFFF !important;
padding: 14px 32px !important;
border-radius: var(--hp-radius-sm) !important;
font-weight: 700 !important;
text-decoration: none !important;
border: none !important;
font-size: 14px !important;
letter-spacing: 0.05em !important;
text-transform: uppercase;
transition: background var(--hp-fast), transform var(--hp-fast) !important;
margin-top: 1rem;
}
.slideshow__text-wrap a:hover,
.slideshow .btn:hover,
.image-banner__buttons a:hover {
background: var(--hp-sage-dark) !important;
transform: translateY(-2px);
}
.chm-reviews {
background: #FFFFFF !important;
background-image: none !important;
border: 1px solid var(--hp-border-subtle) !important;
border-radius: var(--hp-radius-lg) !important;
padding: 32px 28px 28px !important;
transition: all var(--hp-base);
box-shadow: var(--hp-shadow-xs);
position: relative;
overflow: hidden;
}
.chm-reviews:hover {
border-color: rgba(74, 93, 63, 0.2) !important;
box-shadow: var(--hp-shadow-md);
transform: translateY(-3px);
}
.chm-reviews::before {
content: '\201C';
position: absolute;
top: 12px;
right: 24px;
font-size: 56px;
font-family: Georgia, serif;
color: rgba(74, 93, 63, 0.1);
line-height: 1;
pointer-events: none;
}
.chm-reviews::after {
content: '\2605\2605\2605\2605\2605';
display: block;
color: var(--hp-coral);
font-size: 14px;
letter-spacing: 2.5px;
margin-bottom: 14px;
}
.chm-reviews__heading {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
margin: 4px 0 10px !important;
}
.chm-reviews__description,
.chm-reviews__description p {
font-size: 14px !important;
line-height: 1.65 !important;
color: var(--hp-text-secondary) !important;
font-style: normal !important;
margin: 0 !important;
}
.chm-reviews__author {
font-size: 12.5px !important;
font-weight: 700 !important;
color: var(--hp-sage) !important;
padding-top: 14px !important;
margin-top: 14px !important;
border-top: 1px solid var(--hp-border-subtle) !important;
}
.text-columns-icons {
background: #FFFFFF !important;
background-image: none !important;
border: 1px solid var(--hp-border-subtle) !important;
border-radius: var(--hp-radius-lg) !important;
padding: 32px 28px !important;
transition: all var(--hp-base);
box-shadow: var(--hp-shadow-xs);
position: relative;
overflow: hidden;
max-width: 480px;
margin: 0 auto;
}
.text-columns-icons:hover {
border-color: rgba(74, 93, 63, 0.2) !important;
box-shadow: var(--hp-shadow-md);
transform: translateY(-3px);
}
.text-columns-icons::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--hp-sage);
}
.text-columns-img__heading {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
margin-bottom: 10px !important;
}
.text-columns-icons .section__richtext__editor,
.text-columns-icons .section__richtext__editor p {
font-size: 14px !important;
line-height: 1.7 !important;
color: var(--hp-text-secondary) !important;
}
.text-columns-icons .section__richtext__editor a {
color: var(--hp-sage) !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(74, 93, 63, 0.25);
}
.text-columns-img__icon { margin: 0 auto 14px !important; }
.text-columns-img__icon svg {
width: 44px !important;
height: 44px !important;
padding: 11px !important;
background: var(--hp-surface) !important;
border-radius: 50% !important;
}
.text-columns-img__icon svg,
.text-columns-img__icon svg path {
fill: var(--hp-sage) !important;
}
/* ===================================================================
18. THEME OVERRIDES — Headings, Product Cards, Buttons
=================================================================== */
.heading--mb .subheading,
.section-heading__subheading,
.subheading {
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
color: var(--hp-sage) !important;
margin-bottom: 8px !important;
}
.heading--mb h2 {
font-size: 28px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
letter-spacing: -0.02em;
line-height: 1.15;
}
.product-card {
border-radius: var(--hp-radius) !important;
overflow: hidden;
transition: transform var(--hp-base), box-shadow var(--hp-base) !important;
border: 1px solid transparent !important;
}
.product-card:hover {
transform: translateY(-4px);
border-color: var(--hp-border-subtle) !important;
box-shadow: var(--hp-shadow-md) !important;
}
.product-card .product-card__image-wrapper,
.product-card .product-card__image-holder {
background: var(--hp-surface) !important;
border-radius: var(--hp-radius) !important;
overflow: hidden;
}
.product-card .product-card__title,
.product-card .product-card__heading {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--hp-text) !important;
line-height: 1.35 !important;
margin-top: 8px !important;
}
.product-card .price__regular,
.product-card .price-item--regular {
color: var(--hp-text) !important;
font-weight: 700 !important;
}
.product-card .price--on-sale .price-item--sale,
.product-card .price-item--last {
color: var(--hp-coral) !important;
font-weight: 700 !important;
}
.product-card .badge {
font-size: 11px !important;
font-weight: 700 !important;
padding: 4px 10px !important;
border-radius: var(--hp-radius-sm) !important;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.product-card .badge:not(.badge--sold_out):not(.badge--featured) {
background: var(--hp-coral) !important;
color: #FFFFFF !important;
}
.product-card .badge--featured { background: var(--hp-sage) !important; color: #FFFFFF !important; }
.product-card .badge--sold_out { background: rgba(26, 31, 27, 0.85) !important; color: #FFFFFF !important; }
.product-card .btn--add-to-cart {
background: var(--hp-text) !important;
color: #FFFFFF !important;
border-color: var(--hp-text) !important;
border-radius: var(--hp-radius-sm) !important;
font-weight: 600 !important;
letter-spacing: 0.03em;
}
.product-card .btn--add-to-cart:hover {
background: var(--hp-sage) !important;
border-color: var(--hp-sage) !important;
}
.collection-list__item { transition: transform var(--hp-base); }
.collection-list__item:hover { transform: translateY(-4px); }
.collection-list__item .image-hover-scaling__image {
border-radius: var(--hp-radius-lg) !important;
overflow: hidden;
}
.section-background {
border-radius: var(--hp-radius-lg) !important;
}
/* Primary buttons → sage */
.btn--primary,
.btn--full,
button[name="add"]:not([disabled]),
.product-form__cart-submit:not([disabled]),
.shopify-payment-button__button--unbranded {
background: var(--hp-sage) !important;
color: #FFFFFF !important;
border-color: var(--hp-sage) !important;
border-radius: var(--hp-radius-sm) !important;
font-weight: 600 !important;
letter-spacing: 0.03em;
transition: background var(--hp-fast), transform var(--hp-fast) !important;
}
.btn--primary:hover,
.btn--full:hover,
button[name="add"]:not([disabled]):hover {
background: var(--hp-sage-dark) !important;
border-color: var(--hp-sage-dark) !important;
transform: translateY(-1px);
}
/* ===================================================================
19. THEME OVERRIDES — Product page (PDP)
=================================================================== */
.product-page-section .product__title {
color: var(--hp-text);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: .75rem !important;
}
.product-page-section .product__price .price-item--regular {
font-size: 1.8rem !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
}
.product-page-section .price--on-sale .price-item--sale {
color: var(--hp-coral) !important;
font-size: 1.8rem !important;
font-weight: 700 !important;
}
.product-form__container label {
border-radius: var(--hp-radius-sm) !important;
border: 1.5px solid var(--hp-border) !important;
transition: all var(--hp-fast) !important;
font-weight: 500;
}
.product-form__container input:checked + label {
border-color: var(--hp-sage) !important;
background: var(--hp-sage) !important;
color: #FFFFFF !important;
}
.product-form__submit {
background: var(--hp-sage) !important;
color: #FFFFFF !important;
border-color: var(--hp-sage) !important;
border-radius: var(--hp-radius-sm) !important;
font-weight: 700 !important;
padding: 1rem !important;
letter-spacing: 0.03em;
}
.product-form__submit:hover:not([disabled]) {
background: var(--hp-sage-dark) !important;
}
.product__text__container {
background: var(--hp-surface);
border: 1px solid var(--hp-border-subtle);
border-radius: var(--hp-radius-lg);
padding: 1.25rem 1.5rem !important;
margin-top: 1.5rem !important;
}
.product__text {
display: flex !important;
align-items: center !important;
gap: .85rem !important;
padding: .55rem 0 !important;
}
.product__text:not(:last-child) {
border-bottom: 1px solid var(--hp-border-subtle);
}
.product__text svg,
.product__text svg path {
width: 22px !important;
height: 22px !important;
fill: var(--hp-sage) !important;
}
.product__text__content {
font-size: .88rem !important;
color: var(--hp-text) !important;
font-weight: 500;
}
.inventory-block {
background: var(--hp-surface);
border: 1px solid var(--hp-border-subtle);
border-radius: var(--hp-radius-sm);
padding: .75rem 1rem !important;
margin-top: 1rem !important;
}
.inventory-block__hot { color: var(--hp-coral) !important; font-weight: 700 !important; }
.inventory-block__normal { color: var(--hp-sage) !important; font-weight: 600 !important; }
.progress-bar__fill { background: var(--hp-sage) !important; }
.thumbnail-slider [aria-current="true"] .thumbnail {
border: 2px solid var(--hp-sage) !important;
border-radius: var(--hp-radius-sm);
}
/* ===================================================================
20. THEME OVERRIDES — Footer dark mode + newsletter
=================================================================== */
footer.footer {
background: var(--hp-text) !important;
color: rgba(255, 255, 255, 0.85) !important;
padding-top: 3rem !important;
}
footer.footer .footer__heading {
color: #FFFFFF !important;
font-weight: 700 !important;
font-size: 14px !important;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1rem;
}
footer.footer .footer-block__content,
footer.footer .footer-block__content p,
footer.footer .footer-block__content a {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 14px;
line-height: 1.6;
}
footer.footer .footer-block__content a:hover { color: #FFFFFF !important; }
footer.footer .footer__menu a {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 14px;
}
footer.footer .footer__menu a:hover { color: #FFFFFF !important; }
footer.footer .footer__copyright,
footer.footer .copyright__content,
footer.footer .powered_by_link {
color: rgba(255, 255, 255, 0.5) !important;
font-size: 12px;
}
footer.footer .footer__content-line {
background: rgba(255, 255, 255, 0.15) !important;
}
footer.footer .footer-social__icons svg path {
fill: rgba(255, 255, 255, 0.7) !important;
transition: fill var(--hp-fast);
}
footer.footer .footer-social__icons a:hover svg path { fill: #FFFFFF !important; }
footer.footer .list-payment svg {
background: rgba(255, 255, 255, 0.95) !important;
border-radius: 4px;
padding: 2px;
}
footer.footer .footer-newsletter__box { background: transparent !important; }
footer.footer .footer-newsletter__box .field__input {
background: rgba(255, 255, 255, 0.95) !important;
color: var(--hp-text) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
border-radius: var(--hp-radius-sm) !important;
padding: 14px 18px !important;
}
footer.footer .footer-newsletter__box .field__button {
background: var(--hp-sage) !important;
border-radius: var(--hp-radius-sm) !important;
}
footer.footer .footer-newsletter__box .field__button svg path {
fill: #FFFFFF !important;
}
.shopify-section.section-newsletter,
.shopify-section [class*="section-newsletter"] {
background: var(--hp-sage) !important;
}
.shopify-section.section-newsletter .field__input {
background: #FFFFFF !important;
}
.shopify-section.section-newsletter .btn,
.shopify-section.section-newsletter button[type="submit"] {
background: var(--hp-text) !important;
color: #FFFFFF !important;
border-radius: var(--hp-radius-sm) !important;
}
.announcement-bar,
.utility-bar {
background: var(--hp-text) !important;
color: #FFFFFF !important;
}
.announcement-bar a, .utility-bar a { color: #FFFFFF !important; }
/* ===================================================================
21. WHATSAPP FLOATING BUTTON
=================================================================== */
.hp-wa-float {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
background: var(--hp-whatsapp);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
z-index: 999;
text-decoration: none;
transition: transform var(--hp-fast);
}
.hp-wa-float:hover { transform: scale(1.08); }
.hp-wa-float svg { width: 28px; height: 28px; fill: #FFFFFF; }
.template-cart .hp-wa-float,
.template-checkout .hp-wa-float { display: none; }
/* ===================================================================
22. 404 PAGE
=================================================================== */
.hp-404 {
max-width: 720px;
margin: 0 auto;
padding: 4rem 1.5rem;
text-align: center;
}
.hp-404__code {
font-family: var(--font-heading-family);
font-size: 5rem;
font-weight: 800;
color: var(--hp-sage);
line-height: 1;
margin: 0 0 .5rem;
letter-spacing: -0.04em;
}
.hp-404__title {
font-family: var(--font-heading-family);
font-size: 1.75rem;
font-weight: 700;
color: var(--hp-text);
margin: 0 0 1rem;
letter-spacing: -0.02em;
}
.hp-404__text { color: var(--hp-text-secondary); margin: 0 0 2rem; }
.hp-404__actions {
display: flex;
gap: .75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.hp-404__quick {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .6rem;
margin-top: 2rem;
}
.hp-404__quick a {
background: var(--hp-surface);
border: 1px solid var(--hp-border-subtle);
padding: .75rem .5rem;
border-radius: var(--hp-radius-sm);
font-size: .85rem;
color: var(--hp-text);
text-decoration: none;
font-weight: 600;
transition: all var(--hp-fast);
}
.hp-404__quick a:hover {
background: var(--hp-sage);
border-color: var(--hp-sage);
color: #FFFFFF;
transform: translateY(-2px);
}
/* ===================================================================
23. COUNTDOWN TIMER (PDP)
=================================================================== */
.product__countdown__box {
background: var(--hp-sage);
color: #FFFFFF;
border-radius: var(--hp-radius-lg);
padding: 1.25rem !important;
}
.product__countdown__box .countdown-timer_item {
background: rgba(255, 255, 255, 0.15) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
color: #FFFFFF !important;
}
.product__countdown__box .countdown-timer__item__days,
.product__countdown__box .countdown-timer__item__hours,
.product__countdown__box .countdown-timer__item__minutes,
.product__countdown__box .countdown-timer__item__seconds { color: #FFFFFF !important; }
.product__countdown__box .countdown-timer_item_colon path { fill: #FFFFFF !important; }
/* ===================================================================
24. SHOP BY PAL
=================================================================== */
.hp-shop-by-pal { padding: 3rem 1rem; max-width: 1340px; margin: 0 auto; }
.hp-shop-by-pal__inner { text-align: center; }
.hp-shop-by-pal__eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hp-sage);
margin: 0 0 8px;
}
.hp-shop-by-pal__title {
font-size: 28px;
font-weight: 700;
color: var(--hp-text);
margin: 0 0 2.5rem;
letter-spacing: -0.02em;
}
.hp-shop-by-pal__grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 16px;
max-width: 1100px;
margin: 0 auto;
}
.hp-shop-by-pal__item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--hp-text);
transition: transform var(--hp-base);
}
.hp-shop-by-pal__item:hover { transform: translateY(-4px); }
.hp-shop-by-pal__circle {
width: 100%;
aspect-ratio: 1;
background: var(--hp-surface);
border: 1px solid var(--hp-border-subtle);
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
transition: all var(--hp-base);
color: var(--hp-sage);
box-shadow: var(--hp-shadow-xs);
}
.hp-shop-by-pal__item:hover .hp-shop-by-pal__circle {
background: var(--hp-sage);
border-color: var(--hp-sage);
color: #FFFFFF;
box-shadow: var(--hp-shadow-md);
}
.hp-shop-by-pal__circle svg {
width: 50%;
height: 50%;
transition: transform var(--hp-base);
}
.hp-shop-by-pal__item:hover .hp-shop-by-pal__circle svg { transform: scale(1.1); }
.hp-shop-by-pal__circle img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hp-shop-by-pal__item:hover .hp-shop-by-pal__circle img { transform: scale(1.1); }
.hp-shop-by-pal__initial {
font-size: 28px;
font-weight: 700;
color: var(--hp-sage);
font-family: Georgia, serif;
transition: color var(--hp-base);
}
.hp-shop-by-pal__item:hover .hp-shop-by-pal__initial { color: #FFFFFF; }
.hp-shop-by-pal__label {
font-size: 13px;
font-weight: 600;
color: var(--hp-text);
margin: 0;
letter-spacing: -0.01em;
}
/* ===================================================================
25. MOBILE RESPONSIVE OVERRIDES
=================================================================== */
@media screen and (max-width: 749px) {
[class*="hp-hero-grid"] h1,
[class*="hp-hero-grid"] h2,
[class*="hp-hero-grid"] h3,
[class*="hp-hero-grid"] .top_card__heading,
[class*="hp-hero-grid"] .bottom_card__heading {
font-size: clamp(1.2rem, 5.5vw, 1.8rem) !important;
line-height: 1.15 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
padding-right: 0.5rem;
}
.image-banner__heading,
.slideshow__heading {
font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important;
}
/* Trust bar 2 columns on mobile */
body .icon-banners .grid,
body .icon-banners > div > .grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
body .icon-banners .banner,
body .icon-banners .banner__item {
padding: 1.25rem 0.85rem !important;
width: 100% !important;
max-width: none !important;
}
body .icon-banners .banner__icon { width: 40px !important; height: 40px !important; margin-bottom: 10px !important; }
body .icon-banners .banner__icon svg { width: 18px !important; height: 18px !important; }
body .icon-banners .banner__heading { font-size: 13px !important; }
body .icon-banners .banner__description { font-size: 11px !important; }
/* Tabs horizontal scroll */
.featured-collection-tabs__container {
overflow-x: auto !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
scrollbar-width: none !important;
}
.featured-collection-tabs__container::-webkit-scrollbar { display: none !important; }
.featured-collection-tabs__item { flex-shrink: 0 !important; padding: 7px 16px !important; font-size: 12.5px !important; }
/* Reviews tighten */
.chm-reviews { padding: 24px 22px 22px !important; }
.chm-reviews::before { font-size: 42px !important; top: 8px; right: 18px; }
.chm-reviews__heading { font-size: 15px !important; }
.chm-reviews__description,
.chm-reviews__description p { font-size: 13.5px !important; }
/* Contact / text columns */
.text-columns-icons { padding: 24px 22px !important; max-width: none !important; }
.text-columns-img__heading { font-size: 15.5px !important; }
/* Section headings */
.heading--mb h2 { font-size: 22px !important; }
.heading--mb .subheading { font-size: 11px !important; letter-spacing: 0.15em !important; }
/* WhatsApp button lift above sticky cart */
body { padding-bottom: 80px; }
.hp-wa-float {
width: 50px;
height: 50px;
right: 16px;
bottom: 92px !important;
}
/* 404 mobile */
.hp-404__code { font-size: 3.5rem; }
.hp-404__title { font-size: 1.3rem; }
.hp-404__quick { grid-template-columns: repeat(2, 1fr); }
/* Shop by Pal — horizontal scroll on mobile */
.hp-shop-by-pal { padding: 2rem 1rem; }
.hp-shop-by-pal__title { font-size: 22px; margin-bottom: 1.5rem; }
.hp-shop-by-pal__grid {
display: flex !important;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 4px 16px 8px;
margin: 0 -16px;
scrollbar-width: none;
}
.hp-shop-by-pal__grid::-webkit-scrollbar { display: none; }
.hp-shop-by-pal__item {
flex-shrink: 0;
width: 95px;
scroll-snap-align: start;
}
.hp-shop-by-pal__label { font-size: 12px; }
}
@media screen and (min-width: 750px) and (max-width: 1024px) {
body .icon-banners .grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.hp-shop-by-pal__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
/* ===================================================================
26. SUBTLE FADE-IN ON SCROLL INTO VIEW
=================================================================== */
@media (prefers-reduced-motion: no-preference) {
.icon-banners .banner,
.icon-banners .banner__item,
.chm-reviews,
.text-columns-icons,
.hp-shop-by-pal__item {
animation: hp-fade-in 0.5s var(--hp-ease) both;
}
@keyframes hp-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* ===================================================================
27. COLLECTION PAGE — premium polish
=================================================================== */
/* ===== Hide noisy vendor + product type labels ===== */
.product-card .product-card__meta,
.product-card .product-card__vendor,
.product-card .product-card__type {
display: none !important;
}
/* ===== Collection banner — clean centered title ===== */
.main-collection-banner,
.collection-hero,
.collection-banner {
padding: 3rem 1.5rem 1.5rem !important;
text-align: center;
background: transparent !important;
border: 0 !important;
}
.main-collection-banner h1,
.collection-hero__title,
.collection-banner__heading,
.collection__title {
font-size: clamp(28px, 4vw, 42px) !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
letter-spacing: -0.02em !important;
margin: 0 0 0.5rem !important;
}
.collection__count,
.collection-banner__count,
.collection__products-count {
font-size: 13px !important;
color: var(--hp-text-secondary) !important;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* ===== Toolbar — sort dropdown + count ===== */
.collection-toolbar,
.facets-container,
.collection__toolbar {
padding: 1rem 0 !important;
border-top: 1px solid var(--hp-border-subtle) !important;
border-bottom: 1px solid var(--hp-border-subtle) !important;
margin-bottom: 2rem !important;
}
.collection-toolbar select,
.facets__form select,
.collection__sort select,
[class*="sort"] select {
border: 1px solid var(--hp-border) !important;
border-radius: var(--hp-radius-sm) !important;
padding: 8px 32px 8px 14px !important;
font-size: 13px !important;
background: #FFFFFF !important;
color: var(--hp-text) !important;
font-weight: 500 !important;
cursor: pointer;
transition: border-color var(--hp-fast) !important;
}
.collection-toolbar select:hover,
.facets__form select:hover {
border-color: var(--hp-sage) !important;
}
/* ===== Filter sidebar (Availability, Price) ===== */
.facets,
.collection-filters,
[class*="facets-vertical"] {
padding-right: 1.5rem;
}
.facets__heading,
.facets__display,
.facets-vertical-form__heading,
.collection-filters__heading {
font-size: 14px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 14px 0 !important;
border-bottom: 1px solid var(--hp-border-subtle) !important;
margin-bottom: 12px !important;
}
.facets__price,
.facets__list label,
.facets-vertical-form label {
font-size: 13px !important;
color: var(--hp-text) !important;
padding: 6px 0 !important;
display: flex;
align-items: center;
gap: 8px;
}
.facets input[type="checkbox"] {
accent-color: var(--hp-sage) !important;
width: 16px;
height: 16px;
}
.facets input[type="number"],
.facets__price input {
border: 1px solid var(--hp-border) !important;
border-radius: var(--hp-radius-sm) !important;
padding: 8px 12px !important;
font-size: 13px !important;
background: #FFFFFF !important;
color: var(--hp-text) !important;
width: 100% !important;
}
.facets input[type="number"]:focus,
.facets__price input:focus {
outline: none;
border-color: var(--hp-sage) !important;
}
.facets__reset,
.facet__price-reset,
[class*="reset"] a {
color: var(--hp-sage) !important;
font-size: 12px !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(74, 93, 63, 0.3);
}
/* ===== Product grid — better spacing ===== */
.collection-product-grid,
.main-collection-product-grid .grid,
[class*="collection"] .product-card-list {
gap: 24px !important;
padding: 1.5rem 0 !important;
}
/* ===== Cleaner product card titles ===== */
.product-card .product-card__title,
.product-card .product-card__heading {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--hp-text) !important;
letter-spacing: -0.01em;
line-height: 1.35 !important;
margin: 8px 0 6px !important;
text-align: center;
}
/* Price layout — cleaner */
.product-card .price,
.product-card .price__container {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
margin: 4px 0 12px !important;
}
.product-card .price-item--regular,
.product-card .price__regular .price-item {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
}
.product-card .price-item--sale,
.product-card .price-item--last {
color: var(--hp-coral) !important;
font-size: 15px !important;
font-weight: 700 !important;
}
.product-card .price-item--regular[class*="compare"],
.product-card .price-item--compare-at {
font-size: 12px !important;
font-weight: 400 !important;
text-decoration: line-through;
color: var(--hp-text-tertiary) !important;
}
/* ===== Action buttons (Choose options / Add to cart / Sold out) ===== */
.product-card .btn,
.product-card button[type="submit"],
.product-card .product-card__btn,
.product-card .btn--add-to-cart,
.product-card .quick-add__submit {
background: var(--hp-sage) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: var(--hp-radius-sm) !important;
padding: 12px 18px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
width: 100% !important;
margin-top: 8px !important;
transition: background var(--hp-fast), transform var(--hp-fast) !important;
}
.product-card .btn:hover:not([disabled]),
.product-card button[type="submit"]:hover:not([disabled]),
.product-card .btn--add-to-cart:hover:not([disabled]) {
background: var(--hp-sage-dark) !important;
transform: translateY(-1px);
}
.product-card .btn[disabled],
.product-card button[disabled],
.product-card .btn--sold-out,
.product-card button[name="add"][disabled] {
background: rgba(26, 31, 27, 0.4) !important;
color: #FFFFFF !important;
cursor: not-allowed;
}
/* ===== Sold out / Sale badge on image ===== */
.product-card .badge,
.product-card .badge--sold_out,
.product-card .badge--sale {
position: absolute !important;
top: 12px !important;
left: 12px !important;
z-index: 3;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
padding: 5px 10px !important;
border-radius: 4px !important;
text-transform: uppercase !important;
}
/* ===== Pagination ===== */
.pagination,
.pagination-list,
.collection__pagination {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
padding: 2rem 0 3rem !important;
list-style: none;
}
.pagination a,
.pagination span,
.pagination-list a,
.pagination-list li,
.collection__pagination a {
width: 36px;
height: 36px;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--hp-text-secondary) !important;
background: transparent !important;
border: 1px solid var(--hp-border) !important;
text-decoration: none !important;
transition: all var(--hp-fast) !important;
}
.pagination a:hover,
.pagination-list a:hover {
border-color: var(--hp-sage) !important;
color: var(--hp-sage) !important;
}
.pagination .active a,
.pagination [aria-current="page"],
.pagination-list .active,
.pagination-list [aria-current="page"] {
background: var(--hp-sage) !important;
border-color: var(--hp-sage) !important;
color: #FFFFFF !important;
}
/* ===== Sale price strikethrough cleanup ===== */
.product-card del,
.product-card s,
.product-card .price-item--compare-at {
color: var(--hp-text-tertiary) !important;
font-weight: 400 !important;
margin-right: 4px;
}
/* ===== MOBILE responsive ===== */
@media screen and (max-width: 749px) {
.main-collection-banner,
.collection-hero,
.collection-banner {
padding: 2rem 1rem 1rem !important;
}
.main-collection-banner h1,
.collection__title {
font-size: 26px !important;
}
.collection-product-grid,
.main-collection-product-grid .grid {
gap: 12px !important;
grid-template-columns: repeat(2, 1fr) !important;
}
.facets,
.collection-filters {
padding-right: 0;
}
.product-card .product-card__title { font-size: 13px !important; }
.product-card .price-item--regular,
.product-card .price-item--sale { font-size: 14px !important; }
.product-card .btn,
.product-card .btn--add-to-cart { padding: 10px 12px !important; font-size: 12px !important; }
.pagination { padding: 1.5rem 0 2rem !important; }
.pagination a,
.pagination-list a {
width: 32px;
height: 32px;
font-size: 13px !important;
}
}
/* ===================================================================
28. COLLECTION PAGE — image consistency + mobile polish
=================================================================== */
/* Force ALL product images to be the same square shape */
.product-card .product-card__image-wrapper,
.product-card .product-card__image-holder,
.product-card .card__media,
.product-card .product-card__image,
.product-card a[class*="image"] {
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: auto !important;
overflow: hidden !important;
background: var(--hp-surface) !important;
border-radius: var(--hp-radius) !important;
position: relative;
}
.product-card img,
.product-card .product-card__image img,
.product-card picture img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block;
}
/* Whole card — consistent height with content aligned */
.product-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
padding: 0 !important;
}
.product-card__info,
.product-card__details,
.product-card .product-card__bottom {
padding: 12px 8px !important;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
}
/* Title — clamp to 2 lines max for consistent heights */
.product-card .product-card__title,
.product-card .product-card__heading {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 36px;
margin: 4px 0 6px !important;
}
/* Button always at bottom of card */
.product-card .btn,
.product-card .quick-add__submit,
.product-card .product-card__btn,
.product-card button[type="submit"] {
margin-top: auto !important;
}
/* ===== MOBILE — 2 col, tighter cards, side-by-side buttons ===== */
@media screen and (max-width: 749px) {
.collection-product-grid,
.main-collection-product-grid .grid,
[class*="collection"] .grid--product-card {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
padding: 1rem !important;
}
.product-card__info,
.product-card__details {
padding: 10px 6px !important;
}
.product-card .product-card__title {
font-size: 12.5px !important;
min-height: 32px;
}
.product-card .price-item--regular,
.product-card .price-item--sale {
font-size: 13px !important;
}
.product-card .btn,
.product-card .quick-add__submit,
.product-card .product-card__btn {
padding: 9px 8px !important;
font-size: 11.5px !important;
letter-spacing: 0 !important;
}
}
/* Tablet — 3 cols */
@media screen and (min-width: 750px) and (max-width: 1023px) {
.collection-product-grid,
.main-collection-product-grid .grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 18px !important;
}
}
/* Desktop — 4 cols (was probably 6 by default — looked too thin) */
@media screen and (min-width: 1024px) {
.collection-product-grid,
.main-collection-product-grid .grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 22px !important;
}
}
/* ===================================================================
29. UNIFIED FONTS + SYMMETRICAL BUTTONS
=================================================================== */
/* ===== Force consistent font across ALL elements ===== */
body,
button,
input,
textarea,
select,
optgroup,
.product-card,
.product-card *,
.collection-product-grid *,
.main-collection-product-grid *,
.facets *,
.pagination *,
.collection__title,
.product-card__title,
.product-card__heading,
.price,
.price *,
.btn,
[class*="btn"],
.heading--mb h2,
.subheading,
.collection-toolbar select {
font-family: var(--font-body-family, "Work Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
/* Headings use the heading font (still consistent) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.collection__title,
.main-collection-banner h1 {
font-family: var(--font-heading-family, "Work Sans"), -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* ===== Force consistent product card structure ===== */
.product-card {
display: flex !important;
flex-direction: column !important;
background: transparent !important;
text-align: center !important;
position: relative;
}
/* All product images — same square aspect */
.product-card .product-card__image-wrapper,
.product-card .product-card__image-holder,
.product-card .card__media,
.product-card a.product-card__link,
.product-card a[href*="/products/"] > div:first-child {
aspect-ratio: 1 / 1 !important;
width: 100% !important;
overflow: hidden !important;
background: var(--hp-surface) !important;
border-radius: var(--hp-radius) !important;
display: block !important;
margin: 0 !important;
}
.product-card img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Title — uniform 2-line max */
.product-card .product-card__title,
.product-card .product-card__heading,
.product-card a.product-card__heading {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--hp-text) !important;
line-height: 1.35 !important;
margin: 12px 4px 6px !important;
padding: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 38px !important;
text-decoration: none !important;
}
/* Price block — uniform height + alignment */
.product-card .price,
.product-card .price__container,
.product-card .product-card__price {
display: flex !important;
justify-content: center !important;
align-items: baseline !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 0 4px 12px !important;
min-height: 22px !important;
line-height: 1.2 !important;
}
.product-card .price *,
.product-card .price__container *,
.product-card .price-item {
font-size: 14px !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.product-card .price-item--regular,
.product-card .price__regular .price-item {
font-weight: 700 !important;
color: var(--hp-text) !important;
}
.product-card .price-item--sale,
.product-card .price-item--last {
font-weight: 700 !important;
color: var(--hp-coral) !important;
}
.product-card .price-item--compare-at,
.product-card del,
.product-card s {
font-weight: 400 !important;
font-size: 12px !important;
text-decoration: line-through !important;
color: var(--hp-text-tertiary) !important;
}
/* ===== SYMMETRICAL BUTTONS — same height, padding, font ===== */
.product-card .btn,
.product-card .quick-add__submit,
.product-card .product-card__btn,
.product-card button[type="submit"],
.product-card button[name="add"],
.product-card .btn--add-to-cart,
.product-card .btn--sold-out,
.product-card a.btn,
.product-card .product-form__submit {
/* Reset */
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
text-decoration: none !important;
border: none !important;
cursor: pointer;
/* Identical sizing for ALL buttons */
width: 100% !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 12px !important;
margin: auto 0 0 0 !important;
/* Type */
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
text-transform: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
/* Shape + color */
border-radius: var(--hp-radius-sm) !important;
background: var(--hp-sage) !important;
color: #FFFFFF !important;
transition: background var(--hp-fast), transform var(--hp-fast) !important;
}
.product-card .btn:hover:not([disabled]),
.product-card .quick-add__submit:hover:not([disabled]),
.product-card button[type="submit"]:hover:not([disabled]),
.product-card .btn--add-to-cart:hover:not([disabled]) {
background: var(--hp-sage-dark) !important;
transform: translateY(-1px);
}
.product-card .btn[disabled],
.product-card button[disabled],
.product-card .btn--sold-out,
.product-card button[name="add"][disabled] {
background: rgba(26, 31, 27, 0.35) !important;
color: #FFFFFF !important;
cursor: not-allowed !important;
transform: none !important;
}
/* Hide icon inside button (cart icon makes uneven width) */
.product-card .btn svg,
.product-card .quick-add__submit svg,
.product-card button[type="submit"] svg:not(.spinner) {
display: none !important;
}
/* Strip any "USD" text from breaking — handled by Shopify locales, but make it not overflow */
.product-card .price__regular,
.product-card .price__sale {
white-space: normal !important;
}
/* ===== MOBILE — keep symmetry, slightly shorter buttons ===== */
@media screen and (max-width: 749px) {
.product-card .product-card__title,
.product-card .product-card__heading {
font-size: 13px !important;
min-height: 34px !important;
margin: 10px 4px 4px !important;
}
.product-card .price *,
.product-card .price-item {
font-size: 13px !important;
}
.product-card .btn,
.product-card .quick-add__submit,
.product-card button[type="submit"],
.product-card .btn--add-to-cart,
.product-card .btn--sold-out {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
font-size: 12px !important;
padding: 0 8px !important;
}
}
/* ===================================================================
30. PRODUCT PAGE (PDP) — premium polish
=================================================================== */
/* ===== Layout container — better spacing ===== */
.product-page-section,
[id*="MainProduct"] {
padding: 2rem 1.5rem 4rem !important;
}
.product-page-section .grid,
.product-page-section > section > .grid {
gap: 3rem !important;
}
/* ===== Product gallery (left column) ===== */
.product-page-section .product__media-list,
.product-page-section .product__media-item {
background: var(--hp-surface) !important;
border-radius: var(--hp-radius-lg) !important;
overflow: hidden !important;
}
.product-page-section .thumbnail-slider {
margin-top: 12px !important;
}
.product-page-section .thumbnail-slider__list {
display: flex !important;
gap: 8px !important;
padding: 0 !important;
flex-wrap: wrap;
}
.product-page-section .thumbnail-slider__item .thumbnail {
width: 64px !important;
height: 64px !important;
border-radius: var(--hp-radius-sm) !important;
border: 2px solid transparent !important;
background: var(--hp-surface) !important;
overflow: hidden !important;
cursor: pointer !important;
padding: 0 !important;
transition: border-color var(--hp-fast) !important;
}
.product-page-section .thumbnail-slider__item .thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.product-page-section .thumbnail-slider__item .thumbnail[aria-current="true"],
.product-page-section .thumbnail-slider__item .thumbnail:hover {
border-color: var(--hp-sage) !important;
}
/* ===== Right column ===== */
.product-page-section .product__right-column {
padding: 0 !important;
}
/* ===== Sale badge — move + restyle ===== */
.product-page-section .badge__container {
display: inline-flex !important;
gap: 8px !important;
margin-bottom: 1rem !important;
}
.product-page-section .badge {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
padding: 5px 11px !important;
border-radius: 4px !important;
display: inline-block !important;
}
.product-page-section .badge:not(.badge--sold_out):not(.badge--featured) {
background: var(--hp-coral) !important;
color: #FFFFFF !important;
}
.product-page-section .badge--featured {
background: var(--hp-sage) !important;
color: #FFFFFF !important;
}
.product-page-section .badge--sold_out {
background: rgba(26, 31, 27, 0.85) !important;
color: #FFFFFF !important;
}
/* ===== Product title ===== */
.product-page-section .product__title {
font-size: clamp(28px, 3.5vw, 38px) !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
letter-spacing: -0.02em !important;
line-height: 1.15 !important;
margin: 0 0 12px !important;
}
/* ===== Price ===== */
.product-page-section .product__price {
margin: 0 0 8px !important;
}
.product-page-section .product__price .price {
display: flex !important;
align-items: baseline !important;
gap: 12px !important;
flex-wrap: wrap;
}
.product-page-section .product__price .price-item--regular,
.product-page-section .product__price .price-item--sale {
font-size: 28px !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
}
.product-page-section .product__price .price-item--regular {
color: var(--hp-text) !important;
}
.product-page-section .product__price .price--on-sale .price-item--sale,
.product-page-section .product__price .price-item--last {
color: var(--hp-coral) !important;
}
.product-page-section .product__price .price-item--compare-at,
.product-page-section .product__price s {
font-size: 17px !important;
font-weight: 400 !important;
text-decoration: line-through !important;
color: var(--hp-text-tertiary) !important;
margin-right: 4px;
}
/* ===== Tax / shipping notice ===== */
.product-page-section .product__tax,
.product-page-section .shipping_policy {
font-size: 12px !important;
color: var(--hp-text-tertiary) !important;
margin: 0 0 1.5rem !important;
font-weight: 400 !important;
}
.product-page-section .shipping_policy a {
color: var(--hp-sage) !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(74, 93, 63, 0.3);
}
/* ===== Variant picker (Color, Size, etc.) ===== */
.product-page-section .product-form__input {
margin: 0 0 1.25rem !important;
}
.product-page-section .variants-label {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--hp-text) !important;
margin-bottom: 10px !important;
display: block !important;
}
.product-page-section .variants-label__value {
font-weight: 400 !important;
color: var(--hp-text-secondary) !important;
margin-left: 4px;
}
/* Color image swatches */
.product-page-section .product-form__container {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
.product-page-section .product-form__item label,
.product-page-section .color__swatch {
border-radius: var(--hp-radius-sm) !important;
border: 2px solid var(--hp-border) !important;
padding: 4px !important;
cursor: pointer !important;
background: #FFFFFF !important;
transition: all var(--hp-fast) !important;
position: relative;
overflow: hidden;
}
.product-page-section .color__swatch--image {
width: 64px !important;
height: 64px !important;
border-radius: var(--hp-radius-sm) !important;
}
.product-page-section .color__swatch--image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 4px !important;
}
.product-page-section .product-form__item input:checked + label,
.product-page-section .product-form__item input:checked + .color__swatch {
border-color: var(--hp-sage) !important;
box-shadow: 0 0 0 2px rgba(74, 93, 63, 0.15);
}
.product-page-section .product-form__item label:hover {
border-color: var(--hp-sage-light) !important;
}
/* Text/button variants (Size, etc.) */
.product-page-section .product-form__item label:not(.color__swatch) {
padding: 10px 18px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--hp-text) !important;
background: #FFFFFF !important;
min-width: 50px;
text-align: center;
}
.product-page-section .product-form__item input:checked + label:not(.color__swatch) {
background: var(--hp-sage) !important;
color: #FFFFFF !important;
border-color: var(--hp-sage) !important;
}
/* ===== Quantity + Add to Cart row ===== */
.product-page-section .product__buttons {
margin-top: 1.5rem !important;
}
.product-page-section .product-form__add-to-cart {
display: flex !important;
gap: 12px !important;
align-items: stretch !important;
}
/* Quantity input */
.product-page-section .quantity,
.product-page-section quantity-input {
display: inline-flex !important;
align-items: center !important;
border: 1.5px solid var(--hp-border) !important;
border-radius: var(--hp-radius-sm) !important;
background: #FFFFFF !important;
overflow: hidden !important;
height: 52px !important;
flex-shrink: 0;
}
.product-page-section .quantity-label {
display: none !important;
}
.product-page-section .quantity__button {
width: 44px !important;
height: 100% !important;
background: transparent !important;
border: none !important;
color: var(--hp-text) !important;
cursor: pointer !important;
transition: background var(--hp-fast) !important;
}
.product-page-section .quantity__button:hover {
background: var(--hp-surface) !important;
}
.product-page-section .quantity__button svg {
width: 14px !important;
height: 14px !important;
}
.product-page-section .quantity__input {
width: 50px !important;
text-align: center !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--hp-text) !important;
background: transparent !important;
border: none !important;
outline: none !important;
height: 100% !important;
-moz-appearance: textfield;
}
.product-page-section .quantity__input::-webkit-outer-spin-button,
.product-page-section .quantity__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Add to Cart — sage primary */
.product-page-section .product-form__submit,
.product-page-section button[name="add"] {
flex: 1 !important;
background: var(--hp-sage) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: var(--hp-radius-sm) !important;
height: 52px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background var(--hp-fast), transform var(--hp-fast) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.product-page-section .product-form__submit:hover:not([disabled]),
.product-page-section button[name="add"]:hover:not([disabled]) {
background: var(--hp-sage-dark) !important;
transform: translateY(-1px);
}
.product-page-section .product-form__submit[disabled] {
background: rgba(26, 31, 27, 0.4) !important;
cursor: not-allowed !important;
}
.product-page-section .product-form__submit svg {
width: 18px !important;
height: 18px !important;
}
/* Buy It Now (dynamic checkout) — charcoal secondary, visually distinct from sage */
.product-page-section .shopify-payment-button {
margin-top: 10px !important;
}
.product-page-section .shopify-payment-button__button,
.product-page-section .shopify-payment-button__button--unbranded {
background: var(--hp-text) !important;
color: #FFFFFF !important;
border-radius: var(--hp-radius-sm) !important;
border: none !important;
height: 52px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
width: 100% !important;
transition: background var(--hp-fast), transform var(--hp-fast) !important;
}
.product-page-section .shopify-payment-button__button:hover {
background: #2C2C2A !important;
transform: translateY(-1px);
}
/* ===== Description ===== */
.product-page-section .ungroup-description-tab,
.product-page-section .product__description {
margin-top: 2rem !important;
padding-top: 1.5rem !important;
border-top: 1px solid var(--hp-border-subtle) !important;
}
.product-page-section .ungroup-description-tab__heading {
display: none !important;
}
.product-page-section .ungroup-description-tab .body2,
.product-page-section .ungroup-description-tab > div,
.product-page-section .product__description {
font-size: 14.5px !important;
line-height: 1.7 !important;
color: var(--hp-text-secondary) !important;
}
.product-page-section .ungroup-description-tab h2,
.product-page-section .ungroup-description-tab h3,
.product-page-section .ungroup-description-tab h4 {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
margin: 1.5rem 0 0.75rem !important;
letter-spacing: -0.01em !important;
}
.product-page-section .ungroup-description-tab ul {
padding-left: 1.25rem !important;
margin: 0.75rem 0 !important;
}
.product-page-section .ungroup-description-tab li {
margin-bottom: 8px !important;
line-height: 1.6 !important;
}
.product-page-section .ungroup-description-tab li::marker {
color: var(--hp-sage) !important;
}
.product-page-section .ungroup-description-tab strong {
color: var(--hp-text) !important;
font-weight: 700 !important;
}
/* ===== Share button — clean ===== */
.product-page-section .share-button__button,
.product-page-section share-button .btn-medium {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--hp-text-secondary) !important;
background: transparent !important;
border: 0 !important;
padding: 8px 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.product-page-section .share-button__button svg {
width: 16px !important;
height: 16px !important;
}
.product-page-section .share-button__button:hover {
color: var(--hp-sage) !important;
}
/* ===== "View full details" link — clean ===== */
.product-page-section .product__view-details {
display: none !important;
}
/* ===== MOBILE polish ===== */
@media screen and (max-width: 749px) {
.product-page-section,
[id*="MainProduct"] {
padding: 1.5rem 1rem 3rem !important;
}
.product-page-section .grid {
gap: 1.5rem !important;
}
.product-page-section .product__title {
font-size: 22px !important;
}
.product-page-section .product__price .price-item--regular,
.product-page-section .product__price .price-item--sale {
font-size: 22px !important;
}
.product-page-section .product__price .price-item--compare-at,
.product-page-section .product__price s {
font-size: 14px !important;
}
.product-page-section .color__swatch--image {
width: 54px !important;
height: 54px !important;
}
.product-page-section .product-form__add-to-cart {
flex-wrap: wrap !important;
gap: 8px !important;
}
.product-page-section .quantity {
height: 48px !important;
width: 100% !important;
justify-content: center;
}
.product-page-section .product-form__submit,
.product-page-section button[name="add"],
.product-page-section .shopify-payment-button__button {
height: 48px !important;
font-size: 13px !important;
width: 100% !important;
flex: none !important;
}
}
/* ===================================================================
31. CART PAGE + CART DRAWER — proper checkout button + upsell visibility
=================================================================== */
/* ===== CART PAGE — checkout button styling ===== */
.template-cart .cart__submit,
.template-cart button[name="checkout"],
.template-cart .cart__checkout,
.template-cart a[href*="/checkout"],
.template-cart input[name="checkout"],
[name="checkout"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
background: var(--hp-sage) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: var(--hp-radius-sm) !important;
height: 56px !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
cursor: pointer !important;
transition: background var(--hp-fast), transform var(--hp-fast) !important;
margin-top: 12px !important;
}
.template-cart .cart__submit:hover,
.template-cart button[name="checkout"]:hover,
.template-cart a[href*="/checkout"]:hover,
[name="checkout"]:hover {
background: var(--hp-sage-dark) !important;
transform: translateY(-1px);
}
/* Cart page subtotal block */
.template-cart .cart__footer,
.template-cart .cart-footer {
background: var(--hp-surface);
border: 1px solid var(--hp-border-subtle);
border-radius: var(--hp-radius-lg);
padding: 1.5rem !important;
margin-top: 2rem;
}
.template-cart .cart__subtotal,
.template-cart .cart-footer__subtotal-value,
.template-cart .totals__subtotal-value {
font-size: 24px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
}
/* Cart error message */
.template-cart .errors,
.template-cart .cart__error,
.cart__error-message {
background: rgba(196, 93, 62, 0.08) !important;
color: var(--hp-coral-dark) !important;
padding: 12px 16px !important;
border-radius: var(--hp-radius-sm) !important;
border-left: 3px solid var(--hp-coral) !important;
font-size: 13px !important;
margin: 12px 0 !important;
}
/* ===== CART DRAWER — make sure upsell is visible ===== */
.hp-cart-drawer,
cart-drawer,
.cart-drawer {
background: #FFFFFF !important;
}
/* Free shipping bar */
.hp-cart-drawer__free-shipping,
.free-shipping-bar,
[class*="free-shipping"] {
background: var(--hp-surface) !important;
color: var(--hp-text) !important;
padding: 12px 16px !important;
font-size: 13px !important;
font-weight: 600 !important;
}
.hp-cart-drawer__free-shipping .progress-bar__fill,
.free-shipping-bar .progress-bar__fill,
.progress-bar__fill {
background: var(--hp-sage) !important;
}
/* Cart drawer items */
.cart-drawer__items .cart-item,
.cart-drawer .cart__item,
.hp-cart-drawer__item {
padding: 14px 0 !important;
border-bottom: 1px solid var(--hp-border-subtle) !important;
}
/* ===== UPSELL section — force visible ===== */
.hp-cart-upsell,
.cart-upsell,
.cart-drawer__upsell,
cart-upsell,
[class*="cart-upsell"],
[class*="cart__recommended"],
[class*="related-products"] {
display: block !important;
background: var(--hp-surface) !important;
padding: 16px !important;
border-top: 1px solid var(--hp-border-subtle) !important;
border-bottom: 1px solid var(--hp-border-subtle) !important;
}
.hp-cart-upsell__title,
.cart-upsell__title,
[class*="cart-upsell"] .heading,
[class*="cart-upsell"] h3 {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 0 12px !important;
}
/* Upsell product cards */
.hp-cart-upsell__item,
[class*="cart-upsell"] [class*="item"] {
background: #FFFFFF !important;
border: 1px solid var(--hp-border-subtle) !important;
border-radius: var(--hp-radius-sm) !important;
overflow: hidden;
}
.hp-cart-upsell__add-btn,
[class*="cart-upsell"] button {
background: var(--hp-sage) !important;
color: #FFFFFF !important;
border-radius: 4px !important;
}
/* ===== Cart drawer checkout button ===== */
.cart-drawer__checkout,
.hp-cart-drawer__checkout-btn,
.cart-drawer button[name="checkout"],
cart-drawer button[name="checkout"] {
background: var(--hp-sage) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: var(--hp-radius-sm) !important;
height: 52px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
width: 100% !important;
cursor: pointer !important;
transition: background var(--hp-fast) !important;
}
.cart-drawer__checkout:hover,
.hp-cart-drawer__checkout-btn:hover {
background: var(--hp-sage-dark) !important;
}
/* Cart drawer subtotal */
.cart-drawer__subtotal,
.hp-cart-drawer__subtotal {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 16px 0 !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--hp-text) !important;
}
/* ===== Order special instructions textarea ===== */
.template-cart .cart__note textarea,
.template-cart textarea[name*="note"] {
background: var(--hp-surface) !important;
border: 1px solid var(--hp-border-subtle) !important;
border-radius: var(--hp-radius-sm) !important;
padding: 12px 14px !important;
font-size: 13px !important;
color: var(--hp-text) !important;
width: 100% !important;
resize: vertical;
}
/* ===================================================================
32. CART DRAWER UPSELL — Liquid Death style (FINAL — clean grid)
This block replaces ~940 lines of duplicate/conflicting upsell CSS
from earlier iterations. Uses high-specificity selectors so it
wins against any leftover [class*="upsell"] attribute selectors.
=================================================================== */
/* The whole upsell container inside the cart drawer */
.hp-cart-drawer .hp-ld-upsell,
.hp-ld-upsell {
background: #FAF7F2 !important;
padding: 16px 14px 14px !important;
margin: 0 !important;
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
position: relative !important;
}
.hp-cart-drawer .hp-ld-upsell__title,
.hp-ld-upsell__title {
font-family: var(--font-heading-family, sans-serif) !important;
font-size: 15px !important;
font-weight: 800 !important;
color: #1F2920 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin: 0 0 12px !important;
padding: 0 !important;
text-align: center !important;
background: transparent !important;
border: 0 !important;
}
/* THE GRID — 1 column mobile, 2 columns desktop. NOT a carousel. */
.hp-cart-drawer .hp-ld-upsell .hp-ld-upsell__grid,
.hp-cart-drawer .hp-ld-upsell__grid,
.hp-ld-upsell__grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-auto-flow: row !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
flex-direction: unset !important;
flex-wrap: unset !important;
flex: unset !important;
scroll-snap-type: none !important;
-webkit-overflow-scrolling: auto !important;
scrollbar-width: none !important;
transform: none !important;
background: transparent !important;
}
.hp-cart-drawer .hp-ld-upsell__grid::-webkit-scrollbar,
.hp-ld-upsell__grid::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
@media (min-width: 600px) {
.hp-cart-drawer .hp-ld-upsell .hp-ld-upsell__grid,
.hp-cart-drawer .hp-ld-upsell__grid,
.hp-ld-upsell__grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}
/* Card — horizontal row inside, NOT fixed width, NOT flex-shrink: 0 */
.hp-cart-drawer .hp-ld-upsell .hp-ld-upsell__card,
.hp-cart-drawer .hp-ld-upsell__card,
.hp-ld-upsell__card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
background: #FFFFFF !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 10px !important;
padding: 10px !important;
gap: 10px !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex-shrink: 1 !important;
flex-basis: auto !important;
scroll-snap-align: none !important;
overflow: visible !important;
transform: none !important;
box-shadow: none !important;
position: relative !important;
}
.hp-cart-drawer .hp-ld-upsell__card:hover,
.hp-ld-upsell__card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
transform: none !important;
}
/* Image — fixed 64x64 thumbnail on the left */
.hp-cart-drawer .hp-ld-upsell .hp-ld-upsell__img,
.hp-cart-drawer .hp-ld-upsell__img,
.hp-ld-upsell__img {
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
border-radius: 8px !important;
overflow: hidden !important;
background: #f3efe8 !important;
display: block !important;
padding: 0 !important;
aspect-ratio: auto !important;
}
.hp-cart-drawer .hp-ld-upsell__img img,
.hp-ld-upsell__img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
aspect-ratio: 1 / 1 !important;
}
/* Info column — fills remaining width */
.hp-cart-drawer .hp-ld-upsell .hp-ld-upsell__info,
.hp-cart-drawer .hp-ld-upsell__info,
.hp-ld-upsell__info {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
padding: 0 !important;
background: transparent !important;
}
/* Product name */
.hp-cart-drawer .hp-ld-upsell .hp-ld-upsell__name,
.hp-cart-drawer .hp-ld-upsell__name,
.hp-ld-upsell__name {
font-size: 13px !important;
font-weight: 600 !important;
color: #1F2920 !important;
line-height: 1.25 !important;
text-decoration: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
margin: 0 !important;
min-height: 0 !important;
text-transform: none !important;
}
/* Price */
.hp-cart-drawer .hp-ld-upsell .hp-ld-upsell__price,
.hp-cart-drawer .hp-ld-upsell__price,
.hp-ld-upsell__price {
font-size: 13px !important;
font-weight: 600 !important;
color: #1F2920 !important;
display: flex !important;
align-items: baseline !important;
gap: 6px !important;
margin: 0 !important;
}
.hp-ld-upsell__sale { color: #C45D3E !important; }
.hp-ld-upsell__was {
font-size: 11px !important;
font-weight: 400 !important;
text-decoration: line-through !important;
color: rgba(0, 0, 0, 0.4) !important;
}
/* ADD TO CART button — always visible, full width of info column */
.hp-cart-drawer .hp-ld-upsell .hp-ld-upsell__add,
.hp-cart-drawer .hp-ld-upsell__add,
.hp-ld-upsell__add {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 32px !important;
margin: 4px 0 0 !important;
padding: 0 10px !important;
background: #FFE994 !important;
color: #1F2920 !important;
border: none !important;
border-radius: 6px !important;
font-family: var(--font-heading-family, sans-serif) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
cursor: pointer !important;
line-height: 1.2 !important;
text-align: center !important;
transition: background 0.18s ease !important;
}
.hp-ld-upsell__add:hover:not(:disabled) { background: #FAD75A !important; }
.hp-ld-upsell__add:disabled { background: #999 !important; cursor: not-allowed !important; opacity: 0.6 !important; }
.hp-ld-upsell__add svg { display: none !important; }
/* ===================================================================
33. KILL ALL LEGACY CAROUSEL ARTIFACTS
=================================================================== */
/* Hide any swiper / slick / splide controls anywhere in the cart drawer */
.hp-cart-drawer .swiper-button-next,
.hp-cart-drawer .swiper-button-prev,
.hp-cart-drawer .swiper-pagination,
.hp-cart-drawer .swiper-scrollbar,
.hp-cart-drawer .slick-arrow,
.hp-cart-drawer .slick-dots,
.hp-cart-drawer .splide__arrows,
.hp-cart-drawer .splide__pagination,
.hp-cart-drawer .hp-upsell-arrow,
.hp-cart-drawer [class*="scroll-btn"],
.hp-cart-drawer [class*="nav-btn"],
.hp-ld-upsell .swiper-button-next,
.hp-ld-upsell .swiper-button-prev,
.hp-ld-upsell .swiper-pagination,
.hp-ld-upsell .swiper-scrollbar { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; }
/* Belt and braces — neutralize any [class*="upsell"] flex-row leftovers */
.hp-cart-drawer .hp-ld-upsell ul,
.hp-cart-drawer .hp-ld-upsell ol {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ===================================================================
34. CART DRAWER UPSELL — ALWAYS 2 cards stacked vertically
Cart drawer is always narrow, so screen-width media queries don't help.
These rules apply at ALL viewport widths.
REPLACES the previous "34. CART DRAWER LAYOUT" block.
=================================================================== */
/* Cart drawer = vertical flex container */
.hp-cart-drawer {
display: flex !important;
flex-direction: column !important;
}
.hp-cart-drawer__header,
.hp-cart-drawer #hp-delivery-bar {
flex: 0 0 auto !important;
}
/* Cart items — scrollable, takes remaining space */
.hp-cart-drawer__items,
.hp-cart-drawer #hp-cart-items {
flex: 1 1 0 !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* Upsell — always visible above footer, no internal scroll needed */
.hp-cart-drawer .hp-ld-upsell,
.hp-cart-drawer #hp-cart-upsell {
flex: 0 0 auto !important;
max-height: none !important;
overflow: visible !important;
padding: 12px 14px !important;
}
.hp-cart-drawer .hp-ld-upsell__title {
font-size: 13px !important;
margin: 0 0 10px !important;
}
/* ALWAYS 2 columns inside the cart drawer */
.hp-cart-drawer .hp-ld-upsell__grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
/* Hide cards 3+ inside the drawer — keep ONLY the first 2 */
.hp-cart-drawer .hp-ld-upsell__card:nth-child(n+3) {
display: none !important;
}
/* ALWAYS stack vertically inside the cart drawer: image top, info below */
.hp-cart-drawer .hp-ld-upsell__card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
padding: 10px !important;
gap: 8px !important;
width: auto !important;
min-width: 0 !important;
}
/* Image — full card width on top, square aspect */
.hp-cart-drawer .hp-ld-upsell__img {
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
display: block !important;
}
.hp-cart-drawer .hp-ld-upsell__img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Info column */
.hp-cart-drawer .hp-ld-upsell__info {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
flex: 1 1 auto !important;
}
.hp-cart-drawer .hp-ld-upsell__name {
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
-webkit-line-clamp: 2 !important;
min-height: 0 !important;
}
.hp-cart-drawer .hp-ld-upsell__price {
font-size: 12px !important;
font-weight: 600 !important;
white-space: nowrap !important;
margin: 0 !important;
}
/* ADD TO CART button — full-width inside card, single line text */
.hp-cart-drawer .hp-ld-upsell__add {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 30px !important;
padding: 0 6px !important;
margin-top: 4px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
white-space: nowrap !important;
line-height: 1 !important;
background: #FFE994 !important;
color: #1F2920 !important;
border: none !important;
border-radius: 5px !important;
cursor: pointer !important;
text-transform: uppercase !important;
}
/* Footer — pinned at bottom, NOT sticky */
.hp-cart-drawer__footer,
.hp-cart-drawer #hp-cart-footer {
flex: 0 0 auto !important;
position: static !important;
background: #FFFFFF !important;
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
padding: 12px 16px !important;
}
/* ===================================================================
36. TRUST BAR + PRODUCT CARD BUTTONS — tighten + align
Paste at the very end of assets/homepal-playone.css
=================================================================== */
/* ===== TRUST BAR — kill the huge gaps, inline icon + text ===== */
.shopify-section .icon-banners,
.shopify-section section[class*="icon-banners"],
.icon-banners {
padding: 28px 16px !important;
background: #FAF7F2 !important;
border-top: 1px solid rgba(31, 41, 32, 0.06) !important;
border-bottom: 1px solid rgba(31, 41, 32, 0.06) !important;
}
.icon-banners .grid,
.icon-banners .icon-banners__wrapper,
.icon-banners [class*="grid-columns"],
.icon-banners > .container,
.icon-banners > div:first-child {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 !important;
}
.icon-banners__banner,
.icon-banners [class*="banner"],
.icon-banners .grid > * {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
text-align: left !important;
gap: 12px !important;
padding: 8px 6px !important;
margin: 0 !important;
}
.icon-banners__banner svg,
.icon-banners [class*="banner"] svg,
.icon-banners img,
.icon-banners__icon {
width: 38px !important;
height: 38px !important;
flex: 0 0 38px !important;
color: #4A5D3F !important;
stroke: currentColor !important;
fill: none !important;
stroke-width: 1.8 !important;
margin: 0 !important;
padding: 0 !important;
}
.icon-banners__banner > div,
.icon-banners [class*="banner"] > div,
.icon-banners__banner-content {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
min-width: 0 !important;
text-align: left !important;
margin: 0 !important;
}
.icon-banners__banner .heading,
.icon-banners__banner h2,
.icon-banners__banner h3,
.icon-banners__banner h4,
.icon-banners [class*="banner"] [class*="heading"],
.icon-banners [class*="banner"] h2,
.icon-banners [class*="banner"] h3,
.icon-banners [class*="banner"] h4 {
font-size: 14px !important;
font-weight: 700 !important;
color: #1F2920 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.icon-banners__banner p,
.icon-banners__banner .rte,
.icon-banners__banner .rte p,
.icon-banners [class*="banner"] p,
.icon-banners [class*="banner"] .rte {
font-size: 12px !important;
color: rgba(31, 41, 32, 0.65) !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.35 !important;
font-weight: 400 !important;
}
@media (max-width: 749px) {
.icon-banners .grid,
.icon-banners .icon-banners__wrapper,
.icon-banners [class*="grid-columns"],
.icon-banners > .container,
.icon-banners > div:first-child {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px 18px !important;
}
.shopify-section .icon-banners,
.shopify-section section[class*="icon-banners"] { padding: 20px 14px !important; }
}
/* ===== PRODUCT CARDS — buttons aligned at bottom of every card ===== */
/* Make card itself a full-height flex column */
.featured-collection-tabs .card-wrapper,
.featured-collection-tabs .card,
.featured-collection-tabs .product-card,
.collection .card-wrapper,
.collection .card,
.collection .product-card,
.collection-product-grid .card-wrapper,
.collection-product-grid .card,
.main-collection-product-grid .card-wrapper,
.card-wrapper > .card,
[class*="card-product"] {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* Card content area fills available space */
.card__information,
.card-information,
.product-card__info,
.card__content,
.card-wrapper .card__information,
.card-wrapper .card-information,
[class*="card-product"] [class*="info"] {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
/* Buttons pushed to bottom of card via auto margin */
.card-wrapper .quick-add,
.card-wrapper .card__buttons,
.card-wrapper [class*="quick-add"],
.card-wrapper button[name="add"],
.card-wrapper a.btn,
.card-wrapper form[action*="/cart/add"],
.card-wrapper .product-form,
.card .quick-add,
.card button[name="add"],
.card a.btn,
.product-card .quick-add,
.product-card button[name="add"],
.product-card a.btn,
[class*="card-product"] .quick-add,
[class*="card-product"] button[name="add"],
[class*="card-product"] a.btn,
[class*="card-product"] form[action*="/cart/add"] {
margin-top: auto !important;
}
/* Uniform button styling */
.card-wrapper button[name="add"],
.card-wrapper a.btn--primary,
.card-wrapper a.product-form__submit,
.card-wrapper .quick-add__submit,
.card button[name="add"],
.card a.btn--primary,
.product-card button[name="add"],
.product-card a.btn--primary,
[class*="card-product"] button[name="add"],
[class*="card-product"] a.btn--primary {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 14px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: 6px !important;
line-height: 1 !important;
margin: 0 !important;
}
/* Equalize card heights across the grid row */
.collection-product-grid,
.product-grid,
.featured-collection-tabs .grid,
[class*="collection-product-grid"] .grid,
.main-collection-product-grid .grid {
align-items: stretch !important;
}
.collection-product-grid > *,
.product-grid > *,
.featured-collection-tabs .grid > *,
.main-collection-product-grid .grid > * {
height: 100% !important;
}
/* ===================================================================
37. POLISH OVERHAUL — buttons attached to cards, reviews fit,
filter sidebar fix, kill orphan info card, tighter rhythm
PASTE AT THE VERY END of assets/homepal-playone.css
=================================================================== */
/* ===== KILL the lonely "Fast & Reliable Delivery" block before footer ===== */
/* If you want to keep it, comment out this block. */
.shopify-section .text-columns-with-images:has([class*="delivery"]),
.shopify-section [class*="text-columns-with-images"] .blurb_icon:only-child,
.contact_info { display: none !important; }
/* ===== COLLECTION PAGE: product card buttons attached to cards ===== */
/* Stop the buttons from breaking into their own row. Pin them to the card. */
.collection .product-grid .grid__item,
.collection-product-grid .grid__item,
.main-collection-product-grid .grid__item,
.collection .product-grid > *,
.collection-product-grid > *,
.main-collection-product-grid > * {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
height: auto !important;
}
.collection .product-grid .grid__item > *,
.collection-product-grid .grid__item > *,
.main-collection-product-grid .grid__item > *,
.collection .card-wrapper,
.collection-product-grid .card-wrapper,
.main-collection-product-grid .card-wrapper {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* The card's information block grows to fill space */
.collection .card-wrapper .card__information,
.collection .card-wrapper .card-information,
.collection-product-grid .card__information,
.collection-product-grid .card-information,
.main-collection-product-grid .card__information,
.main-collection-product-grid .card-information,
.card-wrapper .card-information,
.card-wrapper .card__information {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
gap: 6px !important;
padding-top: 10px !important;
min-height: 0 !important;
}
/* TIGHTEN the gap between price and Add to cart — no more white void */
.card-wrapper .card-information > *,
.card-wrapper .card__information > * {
margin: 0 !important;
}
.card-wrapper .price,
.card-wrapper .card__price,
.card-wrapper [class*="price"] {
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
}
/* The button block sits at the bottom with a small fixed gap from price */
.card-wrapper .quick-add,
.card-wrapper .card__buttons,
.card-wrapper [class*="quick-add"],
.card-wrapper .product-form,
.card-wrapper button[name="add"],
.card-wrapper a.btn--primary,
.card-wrapper a.product-form__submit {
margin-top: 12px !important;
margin-bottom: 0 !important;
width: 100% !important;
}
.card-wrapper button[name="add"],
.card-wrapper a.btn--primary,
.card-wrapper .quick-add__submit,
.card-wrapper .product-form__submit {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 14px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: 6px !important;
line-height: 1 !important;
}
/* Make sure grid rows stretch so cards equalize */
.collection .product-grid,
.collection-product-grid,
.main-collection-product-grid {
align-items: stretch !important;
}
/* ===== REVIEWS — fit within container, no horizontal overflow ===== */
.shopify-section .reviews,
.shopify-section section[class*="reviews"] {
overflow: hidden !important;
}
.reviews .grid,
.reviews [class*="grid"]:not([class*="grid__item"]),
section[class*="reviews"] .grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 24px !important;
}
.reviews .grid__item,
.reviews [class*="review-item"],
section[class*="reviews"] .grid__item {
width: 100% !important;
max-width: none !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
@media (max-width: 900px) {
.reviews .grid,
.reviews [class*="grid"]:not([class*="grid__item"]),
section[class*="reviews"] .grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
}
/* ===== FILTER SIDEBAR — fix the yellow-on-cream broken styling ===== */
.collection .facets,
.collection .facets-wrapper,
.collection [class*="facet"] {
background: #ffffff !important;
border: none !important;
padding: 0 !important;
}
.collection .facets h2,
.collection .facets h3,
.collection .facets h4,
.collection .facets__heading,
.collection .facets [class*="heading"],
.collection .facets [class*="title"]:not(input) {
color: #1F2920 !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
background: transparent !important;
margin: 0 0 14px !important;
}
.collection .facets label,
.collection .facets [class*="label"],
.collection .facets [class*="checkbox"] {
color: #1F2920 !important;
background: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
}
.collection .facets a,
.collection .facets button {
color: #4A5D3F !important;
background: transparent !important;
}
.collection .facets input[type="checkbox"] {
accent-color: #4A5D3F !important;
}
.collection .facets input[type="text"],
.collection .facets input[type="number"] {
background: #ffffff !important;
color: #1F2920 !important;
border: 1px solid rgba(31,41,32,0.15) !important;
border-radius: 6px !important;
padding: 8px 12px !important;
font-size: 14px !important;
}
.collection .facets .reset,
.collection .facets [class*="reset"] {
color: #C45D3E !important;
font-weight: 600 !important;
text-decoration: underline !important;
}
/* Filter and sort button on mobile */
.collection .facets [class*="mobile"] button,
.collection [class*="filter-toggle"] {
background: #ffffff !important;
color: #1F2920 !important;
border: 1px solid rgba(31,41,32,0.15) !important;
border-radius: 8px !important;
padding: 12px 18px !important;
font-weight: 600 !important;
}
/* Mobile drawer filter background — kill the cream background bleed */
@media (max-width: 990px) {
.collection .facets,
.collection .facets-wrapper,
.collection [class*="facet-drawer"],
.collection [class*="filter-drawer"] {
background: #ffffff !important;
}
.collection .facets *,
.collection [class*="facet-drawer"] * {
color: #1F2920 !important;
}
.collection .facets h2,
.collection .facets h3,
.collection [class*="facet-drawer"] h2,
.collection [class*="facet-drawer"] h3 {
color: #1F2920 !important;
background: transparent !important;
}
}
/* ===== HEADER refinement — softer drop, tighter nav ===== */
.shopify-section .hp-header,
.hp-header {
box-shadow: 0 1px 0 rgba(31,41,32,0.06) !important;
}
/* ===== HERO — keep visible space contained, no max-content issues ===== */
.hp-homepage-hero {
overflow: hidden !important;
}
/* ===== GENERAL — section vertical rhythm ===== */
.shopify-section + .shopify-section {
margin-top: 0 !important;
}
.template-index .shopify-section {
padding-bottom: 0 !important;
}
/* ===================================================================
38. FILTER YELLOW TEXT + MEGA-MENU TRANSPARENT BG — final fix
PASTE AT THE END of assets/homepal-playone.css
=================================================================== */
/* ========== KILL YELLOW TEXT IN FILTERS (everywhere) ========== */
/* Force every text element inside any filter/facet panel to charcoal */
.collection .facets *,
.collection .facets-wrapper *,
.collection .facets-vertical *,
.collection .facets-horizontal *,
.collection [class*="facet"] *,
.collection [class*="filter"] *,
.collection facet-filters-form *,
.collection facets-form *,
[class*="facets__heading"],
[class*="facets__summary"],
[class*="facet-checkbox"],
[class*="filter-toggle"],
.facets__heading,
.facets__summary,
.facets__price,
.facets__display,
.facets details summary,
.facets__details,
.facets__legend,
.facets label,
.facets summary,
.facets h1,
.facets h2,
.facets h3,
.facets h4,
.facets h5,
.facets h6,
.facets__heading-with-count {
color: #1F2920 !important;
background-color: transparent !important;
text-shadow: none !important;
-webkit-text-fill-color: #1F2920 !important;
}
/* Headings (Availability, Price, Sort by, etc.) — bold dark */
.collection .facets h1,
.collection .facets h2,
.collection .facets h3,
.collection .facets h4,
.collection .facets summary,
.collection .facets__heading,
.collection .facets__summary,
.collection .facets details > summary,
.collection .facets-wrapper h1,
.collection .facets-wrapper h2,
.collection .facets-wrapper h3,
.collection .facets-wrapper h4,
.collection .facets-wrapper summary,
.collection [class*="facets__heading"] {
color: #1F2920 !important;
-webkit-text-fill-color: #1F2920 !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
background: transparent !important;
}
/* Mobile drawer / sheet — white background */
.collection .facets,
.collection .facets-wrapper,
.collection .mobile-facets,
.collection .mobile-facets__main,
.collection [class*="facet-drawer"],
.collection [class*="filter-drawer"],
.facets-mobile,
.menu-drawer__menu .facets {
background: #ffffff !important;
color: #1F2920 !important;
}
/* Reset facets links / buttons */
.collection .facets a,
.collection .facets button,
.collection .facets [class*="reset"],
.collection .facets__reset {
color: #4A5D3F !important;
-webkit-text-fill-color: #4A5D3F !important;
background: transparent !important;
}
/* Sort by dropdown */
.collection .sort-by,
.collection .facets__sort,
.collection [class*="sort"],
.collection select {
color: #1F2920 !important;
-webkit-text-fill-color: #1F2920 !important;
background: #ffffff !important;
border: 1px solid rgba(31,41,32,0.15) !important;
border-radius: 6px !important;
}
/* Hide any leftover cream/beige background bleeding into the filter sidebar */
.collection .facets > *,
.collection .facets-wrapper > * {
background-color: transparent !important;
}
.collection .facets-container,
.collection .facets-wrapper > div:first-child {
background: #ffffff !important;
}
/* ========== MEGA-MENU — SOLID WHITE BG, NO BLEEDING ========== */
/* The right "SHOP CATEGORIES" column was letting page colors leak through */
.hp-mega-menu,
.hp-header__nav-wrapper .hp-mega-menu,
[class*="mega-menu"],
.hp-header__submenu {
background: #ffffff !important;
box-shadow: 0 12px 32px rgba(31,41,32,0.12) !important;
border: 1px solid rgba(31,41,32,0.06) !important;
border-radius: 0 0 12px 12px !important;
}
.hp-mega-menu__inner,
[class*="mega-menu__inner"],
[class*="mega-menu"] > div {
background: #ffffff !important;
}
.hp-mega-menu__sidebar,
[class*="mega-menu__sidebar"] {
background: #FAF7F2 !important;
padding: 24px 20px !important;
}
.hp-mega-menu__sidebar-title,
.hp-mega-menu__categories-title {
color: #1F2920 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
margin-bottom: 14px !important;
}
.hp-mega-menu__grid {
background: #ffffff !important;
padding: 24px !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 18px !important;
}
.hp-mega-menu__cat-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-decoration: none !important;
color: #1F2920 !important;
gap: 10px !important;
background: transparent !important;
}
.hp-mega-menu__cat-img {
width: 72px !important;
height: 72px !important;
border-radius: 50% !important;
background: #FAF7F2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
border: 1px solid rgba(74,93,63,0.08) !important;
}
.hp-mega-menu__cat-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.hp-mega-menu__cat-name {
font-size: 12px !important;
font-weight: 600 !important;
color: #1F2920 !important;
text-align: center !important;
line-height: 1.2 !important;
}
/* Hide weird text overlays / labels on circles that bleed through */
.hp-mega-menu__cat-img::before,
.hp-mega-menu__cat-img::after,
.hp-mega-menu__cat-img [class*="label"] {
display: none !important;
}
/* ===================================================================
39. FORCE FIX — orphan delivery card + reviews overflow
PASTE AT THE END of assets/homepal-playone.css
=================================================================== */
/* ===== Hide the orphan "Fast & Reliable Delivery" card ===== */
/* Multiple selectors — one of them WILL catch it */
.shopify-section .text-columns-with-images,
.shopify-section section[class*="text-columns-with-images"],
.shopify-section[id*="contact_info"],
.shopify-section[id*="delivery"],
section.contact_info,
.contact-info,
.contact_info,
[id*="shopify-section-contact_info"],
[id*="shopify-section"][id*="contact"],
.template-index .text-columns-with-images-section {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
/* ===== REVIEWS — force 3-col grid, kill overflow, no 3rd-card cut off ===== */
.shopify-section[id*="reviews"],
.shopify-section section.reviews,
section.reviews,
.shopify-section[id*="reviews"] section {
overflow: hidden !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
.shopify-section[id*="reviews"] .grid,
.shopify-section[id*="reviews"] [class*="reviews__grid"],
.shopify-section[id*="reviews"] .swiper-wrapper,
section.reviews .grid,
section.reviews .swiper-wrapper,
section.reviews [class*="reviews__list"],
.reviews-section .grid,
.reviews-section .swiper-wrapper {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
max-width: 1280px !important;
margin: 0 auto !important;
width: 100% !important;
overflow: visible !important;
transform: none !important;
}
.shopify-section[id*="reviews"] .grid > *,
.shopify-section[id*="reviews"] .swiper-slide,
section.reviews .swiper-slide,
section.reviews .grid__item,
.reviews-section .grid__item,
.reviews-section .swiper-slide {
width: 100% !important;
max-width: none !important;
flex: 0 0 auto !important;
margin: 0 !important;
transform: none !important;
}
/* Hide any swiper arrows / pagination dots on reviews */
.shopify-section[id*="reviews"] .swiper-button-prev,
.shopify-section[id*="reviews"] .swiper-button-next,
.shopify-section[id*="reviews"] .swiper-pagination,
.shopify-section[id*="reviews"] .swiper-scrollbar,
section.reviews .swiper-button-prev,
section.reviews .swiper-button-next,
section.reviews .swiper-pagination,
section.reviews .swiper-scrollbar { display: none !important; }
@media (max-width: 900px) {
.shopify-section[id*="reviews"] .grid,
section.reviews .grid,
.reviews-section .grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
}
/* ===================================================================
40. KILL the white gap between price and Add to cart button
PASTE AT THE END of assets/homepal-playone.css
=================================================================== */
/* Override the previous margin-top:auto that was creating the void */
.card-wrapper .quick-add,
.card-wrapper .card__buttons,
.card-wrapper [class*="quick-add"],
.card-wrapper .product-form,
.card-wrapper button[name="add"],
.card-wrapper a.btn--primary,
.card-wrapper a.product-form__submit,
.card .quick-add,
.card button[name="add"],
.card a.btn,
.product-card .quick-add,
.product-card button[name="add"],
.product-card a.btn,
[class*="card-product"] .quick-add,
[class*="card-product"] button[name="add"],
[class*="card-product"] a.btn,
[class*="card-product"] form[action*="/cart/add"] {
margin-top: 10px !important;
margin-bottom: 0 !important;
}
/* DON'T let the info section expand to fill all available space */
.card-wrapper .card__information,
.card-wrapper .card-information,
.card-wrapper .card__content,
.collection-product-grid .card__information,
.collection-product-grid .card-information,
.main-collection-product-grid .card__information,
.main-collection-product-grid .card-information,
.collection .card-wrapper .card__information,
.featured-collection-tabs .card__information,
[class*="card-product"] [class*="info"] {
flex: 0 0 auto !important;
min-height: 0 !important;
gap: 6px !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* Title gets min-height so cards line up — short titles take same space as long ones */
.card-wrapper .card__heading,
.card-wrapper .card__title,
.card-wrapper [class*="card-title"],
.card-wrapper h3,
.collection .card-wrapper h3,
.featured-collection-tabs .card__heading,
.featured-collection-tabs h3,
[class*="card-product"] h3 {
min-height: 2.6em !important;
max-height: 2.6em !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
margin: 0 !important;
line-height: 1.3 !important;
}
/* Price stays compact, no extra margin */
.card-wrapper .price,
.card-wrapper .card__price,
.card-wrapper [class*="card-price"],
.collection .card-wrapper .price,
.featured-collection-tabs .price,
[class*="card-product"] .price {
margin: 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
}
/* The card itself uses grid-style stacking, not flex stretching */
.card-wrapper,
.card-wrapper > .card,
.collection .card-wrapper,
.featured-collection-tabs .card-wrapper,
.collection-product-grid .card-wrapper,
.main-collection-product-grid .card-wrapper,
[class*="card-product"] {
display: flex !important;
flex-direction: column !important;
height: auto !important;
}
/* The image keeps its natural square shape */
.card-wrapper .card__media,
.card-wrapper [class*="card-media"],
.card-wrapper .card__image-wrapper,
[class*="card-product"] [class*="media"] {
flex: 0 0 auto !important;
}
/* For grid rows to still equalize visually, use min-height on items via grid */
.collection .product-grid,
.collection-product-grid,
.main-collection-product-grid,
.featured-collection-tabs .grid {
align-items: stretch !important;
}
.collection .product-grid > *,
.collection-product-grid > *,
.main-collection-product-grid > *,
.featured-collection-tabs .grid > * {
display: flex !important;
flex-direction: column !important;
}/* ===================================================================
FINAL OVERHAUL — Product cards using CORRECT .product-card selectors
Targets the ACTUAL classes rendered by snippets/product-card.liquid
Works against base.css because cascade order favors this file.
ALL HOMEPAGE + COLLECTION PAGE CARDS UPGRADE AT ONCE.
=================================================================== */
/* ===== CARD ROOT — full height flex column, hover lift ===== */
.product-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
background: transparent !important;
border: none !important;
transition: transform 0.25s ease !important;
}
.product-card:hover {
transform: translateY(-4px) !important;
}
/* ===== IMAGE HOLDER — square cream backdrop, rounded ===== */
.product-card .product-card__image-holder {
position: relative !important;
background: #FAF7F2 !important;
border-radius: 14px !important;
overflow: hidden !important;
margin-bottom: 14px !important;
aspect-ratio: 1 / 1 !important;
}
/* Force ALL product images to square regardless of "auto" setting */
.product-card .product-card__image {
--aspect-ratio: 1 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
background: #FAF7F2 !important;
border-radius: 14px !important;
}
.product-card .product-card__image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.4s cubic-bezier(.2,.6,.2,1) !important;
}
.product-card:hover .product-card__image img {
transform: scale(1.05) !important;
}
/* Smooth fade between primary + secondary image on hover */
.product-card .product-card__image img:nth-child(2) {
position: absolute !important;
inset: 0 !important;
opacity: 0 !important;
transition: opacity 0.35s ease !important;
}
.product-card:hover .product-card__image img:nth-child(2) {
opacity: 1 !important;
}
/* ===== INFO BLOCK BELOW IMAGE ===== */
.product-card .product-card__container {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
gap: 6px !important;
padding: 0 2px !important;
text-align: left !important;
}
/* Center text when section uses center alignment */
.featured-collection-tabs--center .product-card .product-card__container {
text-align: center !important;
}
/* Title — 2-line clamp with uniform min-height */
.product-card .product-card__heading,
.product-card a.product-card__heading {
font-family: var(--font-body-family) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #1F2920 !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 2.7em !important;
max-height: 2.7em !important;
margin: 0 !important;
padding: 0 !important;
}
/* Vendor / meta — subtle small caps */
.product-card .product-card__meta {
font-family: var(--font-body-family) !important;
font-size: 11px !important;
font-weight: 600 !important;
color: rgba(31,41,32,0.5) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin: 0 !important;
}
/* ===== PRICE ===== */
.product-card .price,
.product-card .price__container {
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding: 0 !important;
}
.featured-collection-tabs--center .product-card .price,
.featured-collection-tabs--center .product-card .price__container {
justify-content: center !important;
}
.product-card .price__regular,
.product-card .price__main-color {
color: #1F2920 !important;
font-size: 14px !important;
font-weight: 700 !important;
}
.product-card .price__sale {
color: #C45D3E !important;
font-weight: 700 !important;
font-size: 14px !important;
}
.product-card .price s,
.product-card .price__compare {
color: rgba(31,41,32,0.4) !important;
font-weight: 400 !important;
font-size: 12px !important;
text-decoration: line-through !important;
}
/* ===== ADD TO CART / CHOOSE OPTIONS BUTTON — sage, full width, bottom ===== */
.product-card .btn--add-to-cart,
.product-card .quick-add__submit,
.product-card button[name="add"],
.product-card .product-form__submit {
width: 100% !important;
height: 44px !important;
min-height: 44px !important;
margin: 10px 0 0 0 !important;
padding: 0 14px !important;
background: #FFE994 !important;
color: #1F2920 !important;
border: none !important;
border-radius: 8px !important;
font-family: var(--font-body-family) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
line-height: 1 !important;
white-space: nowrap !important;
transition: background 0.2s ease, transform 0.15s ease !important;
}
.product-card .btn--add-to-cart:hover:not(:disabled),
.product-card .quick-add__submit:hover:not(:disabled) {
background: #FAD75A !important;
}
.product-card .btn--add-to-cart:active:not(:disabled) {
transform: translateY(1px) !important;
}
.product-card .btn--add-to-cart:disabled,
.product-card .quick-add__submit:disabled,
.product-card .btn--add-to-cart[aria-disabled="true"] {
background: #B8B8B8 !important;
color: #ffffff !important;
cursor: not-allowed !important;
}
/* Cart icon inside button — subtle white */
.product-card .btn--add-to-cart svg,
.product-card .quick-add__submit svg {
width: 14px !important;
height: 14px !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
/* Use the product-card__align-buttons class behavior — push button to bottom of card */
.product-card__align-buttons .product-card__container {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
.product-card__align-buttons .btn--add-to-cart,
.product-card__align-buttons .quick-add__submit,
.product-card__align-buttons .product-form,
.product-card__align-buttons modal-opener:has(.btn--add-to-cart) {
margin-top: auto !important;
}
/* ===== BADGES — pill shape, top-left of image ===== */
.product-card .badge__container {
position: absolute !important;
top: 12px !important;
left: 12px !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
align-items: flex-start !important;
pointer-events: none !important;
}
.product-card .badge__container .badge {
background: #C45D3E !important;
color: #ffffff !important;
padding: 4px 10px !important;
border-radius: 4px !important;
font-family: var(--font-body-family) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
display: inline-block !important;
border: none !important;
white-space: nowrap !important;
}
.product-card .badge__container .badge--sold_out {
background: #1F2920 !important;
color: #ffffff !important;
}
.product-card .badge__container .badge--featured {
background: #FFE994 !important;
color: #1F2920 !important;
}
/* ===== QUICK VIEW BUTTON — clean pill on hover ===== */
.product-card .btn-quickview,
.product-card .btn.btn-quickview {
position: absolute !important;
bottom: 12px !important;
left: 50% !important;
transform: translateX(-50%) translateY(8px) !important;
background: rgba(255,255,255,0.95) !important;
color: #1F2920 !important;
border: none !important;
border-radius: 999px !important;
padding: 9px 20px !important;
font-family: var(--font-body-family) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
opacity: 0 !important;
transition: all 0.25s cubic-bezier(.2,.6,.2,1) !important;
cursor: pointer !important;
box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
z-index: 3 !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.product-card:hover .btn-quickview {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
}
.product-card .btn-quickview svg {
width: 14px !important;
height: 14px !important;
}
.product-card .btn-quickview__text {
display: inline !important;
}
/* ===== VARIANTS / SWATCHES (color circles below image) ===== */
.product-card .product-card__variant-list {
display: flex !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.product-card .product-card__variant-item {
margin: 0 !important;
}
.product-card .product-card__variant-item__button {
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
border: 1px solid rgba(31,41,32,0.2) !important;
background: transparent !important;
padding: 0 !important;
cursor: pointer !important;
}
/* ===== GRID ROWS — equal card heights ===== */
.featured-collection-tabs .grid,
.featured-collection-tabs-content .grid {
align-items: stretch !important;
}
.featured-collection-tabs .grid > *,
.featured-collection-tabs-content .grid > * {
display: flex !important;
flex-direction: column !important;
}
/* ===== MOBILE — tighter cards, smaller padding ===== */
@media (max-width: 749px) {
.product-card .product-card__image-holder { margin-bottom: 10px !important; border-radius: 12px !important; }
.product-card .product-card__heading { font-size: 13px !important; min-height: 2.6em !important; max-height: 2.6em !important; }
.product-card .price__regular,
.product-card .price__main-color,
.product-card .price__sale { font-size: 13px !important; }
.product-card .btn--add-to-cart,
.product-card .quick-add__submit {
height: 38px !important;
min-height: 38px !important;
font-size: 11px !important;
border-radius: 6px !important;
}
.product-card .badge__container .badge {
font-size: 9px !important;
padding: 3px 7px !important;
}
.product-card .btn-quickview {
display: none !important; /* Quick view on mobile is awkward — hide */
}
}
/* ===================================================================
SECTION VERTICAL RHYTHM — clean spacing between homepage sections
=================================================================== */
.template-index #MainContent > section,
.template-index #MainContent > .shopify-section {
margin: 0 !important;
}
.template-index .shopify-section { padding-bottom: 0 !important; }
/* ===================================================================
FEATURED COLLECTION TABS — clean pill nav + better grid
=================================================================== */
.featured-collection-tabs__container__content {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
margin-bottom: 32px !important;
}
.featured-collection-tabs__item-main {
font-family: var(--font-body-family) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
color: #1F2920 !important;
background: #ffffff !important;
border: 1px solid rgba(31,41,32,0.15) !important;
border-radius: 999px !important;
padding: 9px 20px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.featured-collection-tabs__item-main:hover {
border-color: #FFE994 !important;
background: #F5F2EC !important;
}
.featured-collection-tabs__item-main.animation-underline--active,
.featured-collection-tabs__item-main[aria-selected="true"] {
background: #FFE994 !important;
border-color: #FFE994 !important;
color: #1F2920 !important;
}
.featured-collection-tabs .tabs__indicator { display: none !important; }
/* Section heading "TRENDING NOW" + subheading polish */
#featured-collection-bBV7CT,
[id^="featured-collection-"] .subheading {
font-family: var(--font-body-family) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #4A5D3F !important;
margin-bottom: 18px !important;
}
/* ===================================================================
FINAL FIX — kill the white void between price and Add to Cart button
Cards now have NATURAL height. Button sits 10px under price.
Buttons stay INSIDE their cards (no more overlapping next row).
PASTE AT THE END of assets/homepal-playone.css
=================================================================== */
/* ===== CARD — natural height, no forced 100% ===== */
.product-card,
.product-card.product-card__align-buttons {
height: auto !important;
min-height: 0 !important;
position: relative !important;
overflow: visible !important;
}
/* ===== CONTAINER below image — natural height, no flex stretching ===== */
.product-card .product-card__container,
.product-card__align-buttons .product-card__container {
display: flex !important;
flex-direction: column !important;
flex: 0 0 auto !important;
height: auto !important;
gap: 6px !important;
padding: 0 2px !important;
}
/* ===== KILL the margin-top: auto that was creating the void ===== */
.product-card .btn--add-to-cart,
.product-card .quick-add__submit,
.product-card .product-form,
.product-card modal-opener,
.product-card__align-buttons .btn--add-to-cart,
.product-card__align-buttons .quick-add__submit,
.product-card__align-buttons .product-form,
.product-card__align-buttons modal-opener {
margin-top: 10px !important;
margin-bottom: 0 !important;
display: block !important;
width: 100% !important;
position: relative !important;
}
/* ===== Modal-opener and product-form should not add extra space ===== */
.product-card modal-opener,
.product-card product-form {
display: block !important;
margin: 10px 0 0 0 !important;
padding: 0 !important;
}
.product-card .product-form__error-message-wrapper { display: none !important; }
.product-card .product-form__error-message-wrapper[hidden] { display: none !important; }
/* ===== Equal card heights — via grid parent's align-items: stretch ===== */
/* The grid parent stretches cards. Inside each card, content sits at top
naturally with no margin-top:auto void. */
.featured-collection-tabs .grid,
.featured-collection-tabs-content .grid,
.collection .product-grid,
.collection-product-grid,
.main-collection-product-grid {
align-items: stretch !important;
}
/* But cards themselves don't fill the stretched cell — content stays compact */
.featured-collection-tabs .grid > *,
.featured-collection-tabs-content .grid > *,
.collection .product-grid > *,
.collection-product-grid > *,
.main-collection-product-grid > * {
display: flex !important;
flex-direction: column !important;
height: auto !important;
}
/* The grid cell may stretch — but the card inside aligns top */
.featured-collection-tabs .grid > * > .product-card,
.collection .product-grid > * > .product-card,
.collection-product-grid > * > .product-card {
align-self: flex-start !important;
width: 100% !important;
}
/* ===== Title min-height ENSURES alignment of price/button across cards ===== */
/* This is the trick: titles all take 2 lines worth of space (even if 1 line text) */
.product-card .product-card__heading,
.product-card a.product-card__heading {
min-height: 2.7em !important;
max-height: 2.7em !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* ===== Mobile tweaks ===== */
@media (max-width: 749px) {
.product-card .product-card__heading,
.product-card a.product-card__heading {
min-height: 2.6em !important;
max-height: 2.6em !important;
}
.product-card .btn--add-to-cart,
.product-card .quick-add__submit {
margin-top: 8px !important;
}
}
/* ===================================================================
FILTER DRAWER FIX — mobile filter hugs content, no empty cream void
PASTE AT THE END of assets/homepal-playone.css
=================================================================== */
@media (max-width: 990px) {
/* The filter drawer/sheet — content-hug height, top-anchored */
.collection .facets,
.collection .facets-wrapper,
.collection .mobile-facets,
.collection .mobile-facets__main,
.collection [class*="facet-drawer"],
.collection [class*="filter-drawer"],
.facets-mobile,
.menu-drawer__menu .facets {
height: auto !important;
max-height: 90vh !important;
min-height: 0 !important;
overflow-y: auto !important;
background: #ffffff !important;
padding: 16px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
/* If the drawer is sliding in from left/right (typical pattern), kill the height stretch */
.collection .mobile-facets[open],
.collection .facets[open],
.collection .facets-wrapper[open] {
height: auto !important;
max-height: 90vh !important;
}
/* Internal padding tightening so content doesn't feel cramped */
.collection .facets > *,
.collection .facets-wrapper > * {
padding: 8px 0 !important;
margin: 0 !important;
border-bottom: 1px solid rgba(31,41,32,0.06) !important;
}
.collection .facets > *:last-child,
.collection .facets-wrapper > *:last-child {
border-bottom: none !important;
}
/* Each filter row (Availability, Price, Sort by) - proper spacing */
.collection .facets details,
.collection .facets-wrapper details {
padding: 12px 0 !important;
border-bottom: 1px solid rgba(31,41,32,0.06) !important;
}
.collection .facets details summary,
.collection .facets-wrapper details summary {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
cursor: pointer !important;
padding: 0 !important;
font-weight: 700 !important;
font-size: 15px !important;
}
/* Sort by select dropdown — clean styling */
.collection .facets select,
.collection .facets-wrapper select {
width: 100% !important;
padding: 10px 14px !important;
background: #ffffff !important;
border: 1px solid rgba(31,41,32,0.15) !important;
border-radius: 8px !important;
font-size: 14px !important;
color: #1F2920 !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 14px !important;
}
/* Apply / Close button at the bottom of the drawer */
.collection .facets [type="submit"],
.collection .facets__close-button,
.collection [class*="apply-filter"] {
width: 100% !important;
margin-top: 18px !important;
height: 48px !important;
background: #FFE994 !important;
color: #1F2920 !important;
border: none !important;
border-radius: 8px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
font-size: 13px !important;
cursor: pointer !important;
}
/* The cream overflow area is the parent — set it to white so no cream void */
.collection .menu-drawer,
.collection .menu-drawer__inner-container,
.collection [class*="drawer__content"] {
background: #ffffff !important;
}
/* If the drawer is a side panel taking full height, make the body collapse */
.collection .facets-mobile__inner,
.collection .facets__inner,
.collection .menu-drawer__navigation {
height: auto !important;
max-height: 90vh !important;
padding-bottom: 30px !important;
}
}
/* ===================================================================
FILTER UI OVERHAUL
1. "Filter and sort" looks like a real sage-green button
2. Mobile drawer height fits content (no empty cream void)
PASTE AT THE END of assets/homepal-playone.css
=================================================================== */
/* ===== "FILTER AND SORT" TRIGGER BUTTON ===== */
/* Aggressive selectors to catch whatever your theme renders it as */
.collection [class*="filter-toggle"],
.collection [data-filter-toggle],
.collection button[aria-controls*="facet"],
.collection button[aria-controls*="filter"],
.collection .facets__open-button,
.collection .mobile-facets__open,
.facets__open-button,
.collection .facets__toggle,
button.facets__open-button,
.facets__open,
.facets-toggle,
[class*="facet"][class*="toggle"],
[class*="facet"][class*="open"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: auto !important;
min-width: 200px !important;
padding: 12px 22px !important;
background: #FFE994 !important;
color: #1F2920 !important;
border: none !important;
border-radius: 8px !important;
font-family: var(--font-body-family) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background 0.18s ease !important;
box-shadow: 0 2px 6px rgba(74,93,63,0.18) !important;
}
.collection [class*="filter-toggle"]:hover,
.facets__open-button:hover { background: #FAD75A !important; }
/* Add a filter icon before the text using ::before */
.collection [class*="filter-toggle"]::before,
.facets__open-button::before,
.collection .mobile-facets__open::before,
.collection button[aria-controls*="facet"]::before {
content: "" !important;
display: inline-block !important;
width: 16px !important;
height: 16px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
/* The mobile filter row container */
@media (max-width: 990px) {
.collection .facets-container,
.collection [class*="facet"][class*="container"]:not([class*="drawer"]) {
background: #FAF7F2 !important;
padding: 14px 16px !important;
border-radius: 0 !important;
margin: 0 !important;
text-align: center !important;
}
.collection .facets-container [class*="filter-toggle"],
.collection [class*="facet-container"] button {
width: 100% !important;
min-width: 0 !important;
}
}
/* ===== MOBILE FILTER DRAWER — AGGRESSIVE HEIGHT FIX ===== */
@media (max-width: 990px) {
/* Drawer container — content hugged */
.collection .facets,
.collection .facets-wrapper,
.collection .mobile-facets,
.collection .mobile-facets__main,
.collection .mobile-facets__inner,
.collection [class*="facet-drawer"],
.collection [class*="filter-drawer"],
.collection [class*="facets-mobile"],
.menu-drawer[class*="facet"],
[class*="facets-drawer"],
facet-filters-form > .mobile-facets,
facets-form > .mobile-facets {
height: auto !important;
max-height: calc(100vh - 80px) !important;
min-height: 0 !important;
background: #ffffff !important;
overflow-y: auto !important;
padding: 20px 16px 24px !important;
box-sizing: border-box !important;
}
/* Force the form/wrapper inside to not stretch */
.collection .facets form,
.collection .facets-wrapper form,
.collection .mobile-facets form,
.collection .mobile-facets__main form,
.collection .facets__form {
height: auto !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
}
/* Each filter accordion row — clean styling */
.collection .facets details,
.collection .facets-wrapper details,
.collection .mobile-facets details {
background: #ffffff !important;
border: none !important;
border-bottom: 1px solid rgba(31,41,32,0.08) !important;
padding: 14px 0 !important;
margin: 0 !important;
}
.collection .facets details summary,
.collection .facets-wrapper details summary {
padding: 0 !important;
margin: 0 !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #1F2920 !important;
list-style: none !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
cursor: pointer !important;
}
.collection .facets details summary::after {
content: "+" !important;
font-size: 22px !important;
color: #4A5D3F !important;
font-weight: 300 !important;
}
.collection .facets details[open] summary::after {
content: "−" !important;
}
/* The Sort by section */
.collection .facets__sort,
.collection [class*="sort"] {
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(31,41,32,0.08) !important;
}
.collection .facets__sort label,
.collection [class*="sort"] label,
.collection .facets [class*="sort"]:first-child,
.collection .facets-wrapper [for*="sort"] {
display: block !important;
font-size: 12px !important;
font-weight: 600 !important;
color: rgba(31,41,32,0.6) !important;
margin-bottom: 6px !important;
letter-spacing: 0.04em !important;
}
.collection .facets__sort select,
.collection [class*="sort"] select,
.collection select[name*="sort"] {
width: 100% !important;
padding: 14px 16px !important;
background: #FAF7F2 !important;
border: 1px solid rgba(31,41,32,0.1) !important;
border-radius: 10px !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #1F2920 !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 14px !important;
padding-right: 40px !important;
}
/* "Show 4 products" / Apply button at the bottom of drawer */
.collection .facets [type="submit"],
.collection .facets__apply,
.collection .facets__close-button,
.collection .mobile-facets__footer button,
.collection [class*="apply"]:not([class*="apply-filter"]) {
width: 100% !important;
height: 52px !important;
margin-top: 24px !important;
background: #FFE994 !important;
color: #1F2920 !important;
border: none !important;
border-radius: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
font-size: 13px !important;
cursor: pointer !important;
box-shadow: 0 4px 12px rgba(74,93,63,0.2) !important;
}
/* Kill any parent that's forcing the cream background */
.collection .menu-drawer,
.collection .menu-drawer__inner-container,
.collection [class*="drawer__content"] {
background: #ffffff !important;
}
}
/* ===================================================================
FILTER SPACING — desktop gutter + mobile drawer compaction
PASTE AT THE END of assets/homepal-playone.css
=================================================================== */
/* ===== DESKTOP — more breathing room between filter and product grid ===== */
@media (min-width: 990px) {
/* The collection page typically uses a 2-column layout (filter | products) */
.collection .facets,
.collection .facets-wrapper,
.collection [class*="facets-vertical"],
.collection .facets-container--vertical {
padding-right: 32px !important;
margin-right: 24px !important;
border-right: 1px solid rgba(31,41,32,0.06) !important;
}
/* Push the product grid away from the filter sidebar */
.collection .product-grid,
.collection-product-grid,
.main-collection-product-grid,
.collection [class*="product-grid"],
.collection .grid--products {
padding-left: 16px !important;
}
/* The container that holds both — give a gap between them */
.collection [class*="facets-grid"],
.collection .collection-products-grid,
.collection .grid:has(.facets),
.collection .row:has(.facets-wrapper) {
gap: 40px !important;
column-gap: 40px !important;
}
}
/* ===== MOBILE — pull Apply buttons UP, kill the empty white void ===== */
@media (max-width: 990px) {
/* Drawer container — pure FLEX COLUMN with content-hug height */
.collection .facets,
.collection .facets-wrapper,
.collection .mobile-facets,
.collection .mobile-facets__main,
.collection .mobile-facets__inner,
.collection [class*="facet-drawer"],
.collection [class*="filter-drawer"],
.collection [class*="facets-mobile"],
.menu-drawer[class*="facet"],
[class*="facets-drawer"],
facet-filters-form > .mobile-facets,
facets-form > .mobile-facets {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
height: auto !important;
max-height: 85vh !important;
min-height: 0 !important;
background: #ffffff !important;
overflow-y: auto !important;
padding: 16px 16px 0 16px !important;
}
/* Form inside drawer — flex column too */
.collection .facets form,
.collection .facets-wrapper form,
.collection .mobile-facets form,
.collection .mobile-facets__main form,
.collection .facets__form {
display: flex !important;
flex-direction: column !important;
height: auto !important;
flex: 0 0 auto !important;
}
/* The mobile-facets__footer (Clear all + Apply) — pull UP to sit right under content */
.collection .mobile-facets__footer,
.collection .facets__footer,
.collection [class*="facet"][class*="footer"],
.collection [class*="drawer"] [class*="footer"] {
position: relative !important;
bottom: auto !important;
margin-top: 16px !important;
padding: 16px 0 24px 0 !important;
background: #ffffff !important;
border-top: 1px solid rgba(31,41,32,0.08) !important;
display: flex !important;
gap: 12px !important;
align-items: center !important;
justify-content: space-between !important;
flex: 0 0 auto !important;
}
/* Clear all link styling */
.collection .mobile-facets__footer a,
.collection .mobile-facets__footer button[type="reset"],
.collection [class*="clear"]:not([type="checkbox"]):not([class*="checkbox"]) {
color: #1F2920 !important;
font-weight: 700 !important;
text-decoration: underline !important;
font-size: 14px !important;
padding: 14px 0 !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
/* Apply button styling */
.collection .mobile-facets__footer button[type="submit"],
.collection .mobile-facets__footer [class*="apply"],
.collection .facets__footer button[type="submit"] {
flex: 1 !important;
max-width: 60% !important;
height: 48px !important;
background: #FFE994 !important;
color: #1F2920 !important;
border: none !important;
border-radius: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
font-size: 13px !important;
cursor: pointer !important;
box-shadow: 0 4px 12px rgba(74,93,63,0.2) !important;
}
/* Kill any spacer or empty growing area inside the drawer */
.collection [class*="facet"] [class*="spacer"],
.collection .mobile-facets__main > div:not([class]):empty,
.collection .mobile-facets__main > div[class=""]:empty,
.collection [class*="facet"] [aria-hidden="true"]:empty {
display: none !important;
flex: 0 !important;
height: 0 !important;
}
/* If a parent has flex-grow:1 making the void, kill it */
.collection .mobile-facets__main > *,
.collection .facets-wrapper > * {
flex-grow: 0 !important;
flex-shrink: 0 !important;
}
}
/* ===================================================================
MINION FILTER FIX — using CONFIRMED class names (no more .collection prefix)
PASTE AT THE END of assets/homepal-playone.css
=================================================================== */
/* ===== STICKY "FILTER AND SORT" TRIGGER BUTTON ===== */
/* The actual element is containing a .btn.btn--secondary */
sticky-filter-modal {
background: #FAF7F2 !important;
box-shadow: 0 4px 12px rgba(31,41,32,0.08) !important;
padding: 12px 16px !important;
}
sticky-filter-modal .btn,
sticky-filter-modal .btn--secondary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
height: 48px !important;
padding: 0 22px !important;
background: #FFE994 !important;
color: #1F2920 !important;
border: none !important;
border-radius: 10px !important;
font-family: var(--font-body-family) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
cursor: pointer !important;
box-shadow: 0 4px 12px rgba(74,93,63,0.2) !important;
transition: background 0.2s ease !important;
}
sticky-filter-modal .btn:hover,
sticky-filter-modal .btn--secondary:hover {
background: #FAD75A !important;
}
sticky-filter-modal .btn svg,
sticky-filter-modal .btn--secondary svg {
width: 16px !important;
height: 16px !important;
stroke: #ffffff !important;
fill: #ffffff !important;
}
sticky-filter-modal .btn span,
sticky-filter-modal .btn--secondary span {
color: #ffffff !important;
}
/* ===== MOBILE FACETS DRAWER — no more empty cream void ===== */
@media (max-width: 1024px) {
/* The drawer container — flex column, content-hug height */
.mobile-facets,
#mobile-facets {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
height: 100% !important;
max-height: 100vh !important;
background: #ffffff !important;
overflow: hidden !important;
padding: 0 !important;
}
/* Main scrollable area inside the drawer */
.mobile-facets__main,
.mobile-facets .facets__form,
#mobile-facets .facets__form {
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 16px 20px !important;
background: #ffffff !important;
min-height: 0 !important;
}
/* Each filter row — clean spacing */
.mobile-facets__item,
.mobile-facets .chm-toggle {
border-bottom: 1px solid rgba(31,41,32,0.08) !important;
padding: 14px 0 !important;
margin: 0 !important;
}
.mobile-facets__item:last-child,
.mobile-facets .chm-toggle:last-of-type {
border-bottom: none !important;
}
/* Filter heading (Availability, Price) — bold dark */
.mobile-facets__item summary,
.mobile-facets .chm-toggle__button,
.mobile-facets .chm-toggle summary {
padding: 0 !important;
margin: 0 !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #1F2920 !important;
cursor: pointer !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
list-style: none !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
/* Footer with Clear all + Apply — pull UP, sticky bottom of drawer */
.mobile-facets__footer {
flex: 0 0 auto !important;
display: flex !important;
gap: 12px !important;
justify-content: space-between !important;
align-items: center !important;
padding: 16px 20px !important;
background: #ffffff !important;
border-top: 1px solid rgba(31,41,32,0.1) !important;
box-shadow: 0 -4px 12px rgba(31,41,32,0.05) !important;
position: relative !important;
margin: 0 !important;
}
/* Clear all link */
.mobile-facets__footer a,
.mobile-facets__footer .underlined-link,
.mobile-facets__footer [class*="clear"] {
color: #1F2920 !important;
font-weight: 700 !important;
font-size: 13px !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
padding: 14px 8px !important;
background: transparent !important;
border: none !important;
}
/* Apply button — sage green pill */
.mobile-facets__footer .btn,
.mobile-facets__footer button[type="submit"],
.mobile-facets__footer noscript .btn {
flex: 1 !important;
max-width: 65% !important;
height: 48px !important;
background: #FFE994 !important;
color: #1F2920 !important;
border: none !important;
border-radius: 10px !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
cursor: pointer !important;
box-shadow: 0 4px 12px rgba(74,93,63,0.2) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.mobile-facets__footer .btn:hover {
background: #FAD75A !important;
}
/* Close button at top of drawer */
.mobile-facets__close {
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: rgba(31,41,32,0.06) !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
cursor: pointer !important;
}
.mobile-facets__close svg {
width: 18px !important;
height: 18px !important;
stroke: #1F2920 !important;
}
/* Drawer header (Filters title) */
.mobile-facets__header,
.mobile-facets__heading {
padding: 18px 20px !important;
border-bottom: 1px solid rgba(31,41,32,0.08) !important;
background: #ffffff !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #1F2920 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
/* Body class added when drawer is open — kill cream bleed */
body.fixed-position .mobile-facets,
body.overflow-hidden-tablet .mobile-facets {
background: #ffffff !important;
}
}
/* ===== DESKTOP — proper gutter between filter sidebar and product grid ===== */
@media (min-width: 1025px) {
/* The facet wrapper on desktop */
.facets-wrapper,
.facets__form#FacetFiltersForm,
toggle-component#FacetsWrapperDesktop {
padding-right: 24px !important;
margin-right: 12px !important;
border-right: 1px solid rgba(31,41,32,0.06) !important;
}
/* Push product grid away from the filter */
#ProductGridContainer {
padding-left: 16px !important;
}
/* Accordion (chm-toggle) styling on desktop */
.chm-toggle {
border-bottom: 1px solid rgba(31,41,32,0.06) !important;
padding: 16px 0 !important;
}
.chm-toggle__button {
padding: 0 !important;
cursor: pointer !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #1F2920 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.chm-toggle__content {
padding-top: 12px !important;
}
}
/* ===================================================================
HOMEPAGE POLISH + SCROLL ANIMATIONS (Caraway / Our Place vibe)
PASTE AT THE END of assets/homepal-playone.css
=================================================================== */
/* ===== SCROLL-TRIGGERED FADE-IN ===== */
.template-index #MainContent .shopify-section,
.template-collection #MainContent .shopify-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s cubic-bezier(.2,.6,.2,1), transform 0.7s cubic-bezier(.2,.6,.2,1);
}
.template-index #MainContent .shopify-section.is-visible,
.template-collection #MainContent .shopify-section.is-visible,
.template-index #MainContent .shopify-section:first-child {
opacity: 1;
transform: translateY(0);
}
/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.template-index #MainContent .shopify-section {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ===== SECTION RHYTHM — clean vertical spacing ===== */
.template-index #MainContent > .shopify-section {
margin: 0 !important;
}
.template-index #MainContent > .shopify-section + .shopify-section {
border-top: 1px solid rgba(31,41,32,0.04) !important;
}
/* ===== HERO REFINEMENT (Caraway-style bold typography) ===== */
.shopify-section .hp-homepage-hero h1,
.hp-homepage-hero h1 {
font-family: 'Inter', sans-serif !important;
font-size: clamp(36px, 6vw, 64px) !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -0.04em !important;
color: #1F2920 !important;
}
.hp-homepage-hero p {
font-size: 17px !important;
line-height: 1.55 !important;
max-width: 480px !important;
color: rgba(31,41,32,0.7) !important;
}
.hp-homepage-hero .btn,
.hp-homepage-hero a[role="button"],
.hp-homepage-hero a[href][class*="btn"] {
padding: 16px 32px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.hp-homepage-hero .btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(74,93,63,0.2) !important;
}
/* ===== PRODUCT CARD POLISH (Caraway-style depth) ===== */
.product-card {
border-radius: 16px !important;
overflow: visible !important;
transition: transform 0.3s cubic-bezier(.2,.6,.2,1) !important;
}
.product-card .product-card__image-holder {
border-radius: 16px !important;
background: #FAF7F2 !important;
position: relative !important;
overflow: hidden !important;
}
/* Bigger shadow on hover */
.product-card:hover {
transform: translateY(-6px) !important;
}
.product-card:hover .product-card__image-holder {
box-shadow: 0 18px 36px -12px rgba(31,41,32,0.18) !important;
}
/* Badge polish — pill shape, sage/coral */
.product-card .badge__container .badge {
border-radius: 999px !important;
padding: 5px 12px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
/* ===== FEATURED COLLECTION TABS — bigger header + pills ===== */
[id^="featured-collection-"] .subheading {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
color: #4A5D3F !important;
text-transform: uppercase !important;
margin-bottom: 16px !important;
}
.featured-collection-tabs__item-main {
padding: 12px 24px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
background: #ffffff !important;
border: 1.5px solid rgba(31,41,32,0.12) !important;
color: #1F2920 !important;
transition: all 0.2s ease !important;
}
.featured-collection-tabs__item-main:hover {
border-color: #FFE994 !important;
background: #FAF7F2 !important;
transform: translateY(-2px) !important;
}
.featured-collection-tabs__item-main.animation-underline--active,
.featured-collection-tabs__item-main[aria-selected="true"] {
background: #FFE994 !important;
border-color: #FFE994 !important;
color: #1F2920 !important;
box-shadow: 0 6px 16px rgba(74,93,63,0.25) !important;
}
/* ===== REVIEWS POLISH (clean cards on cream) ===== */
section[class*="reviews"] {
background: #FAF7F2 !important;
padding: 80px 24px !important;
}
section[class*="reviews"] [class*="review"] {
background: #ffffff !important;
border-radius: 16px !important;
padding: 28px !important;
border: none !important;
box-shadow: 0 4px 16px rgba(31,41,32,0.05) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
section[class*="reviews"] [class*="review"]:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 24px rgba(31,41,32,0.08) !important;
}
/* ===== TRUST BAR POLISH (cleaner pills) ===== */
.hp-trust-bar {
background: #FAF7F2 !important;
padding: 28px 16px !important;
}
.hp-trust-bar .hp-trust-bar__item div[style*="border-radius:50%"]:first-child {
background: #ffffff !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}
/* ===== SHOP BY PAL TILE POLISH (Caraway shadow + lift) ===== */
.hp-pal-tile {
border-radius: 18px !important;
transition: transform 0.3s cubic-bezier(.2,.6,.2,1), box-shadow 0.3s ease !important;
}
.hp-pal-tile:hover {
transform: translateY(-6px) !important;
box-shadow: 0 18px 36px -12px rgba(31,41,32,0.25) !important;
}
/* ===== GLOBAL TYPOGRAPHY UPGRADE (Caraway bold) ===== */
.template-index h2,
.template-index .h2 {
font-family: 'Inter', sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
line-height: 1.05 !important;
}
/* ===== SMOOTH SCROLL FOR ANCHOR LINKS ===== */
html { scroll-behavior: smooth; }
/* ===== JAVASCRIPT TRIGGER (gets added by inline script below) ===== */
/* No-op — the .is-visible class is toggled by the IntersectionObserver script */
/* ===================================================================
INLINE JS for scroll animations — paste this script tag into theme.liquid
right before :
===================================================================