/* ================================================================
SHHEK — Shared Design System
Premium Movement & Lifestyle Brand
v2.2 — Polish Pass: Spacing, Typography, Interactions, Mobile
================================================================ */
/* Performance: preconnect to Google Fonts */
/* Add these to every page :
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');
/* ================================================================
1. DESIGN TOKENS
================================================================ */
:root {
/* Brand Palette - Restored to Original */
--ivory: #FBF9F8;
--warm-beige: #F2EBE7;
--sand: #E8DCD6;
--clay: #F3C5BA; /* The signature blush pink */
--espresso: #1B1A19; /* Crisp, dark charcoal/black */
--charcoal: #4A4644; /* Darkened for better contrast */
--white: #FFFFFF;
/* Semantic Aliases */
--clr-bg: var(--ivory);
--clr-surface: var(--warm-beige);
--clr-text: var(--espresso);
--clr-muted: var(--charcoal);
--clr-accent: var(--clay);
--clr-border: rgba(75, 71, 68, 0.12);
--clr-border-light: rgba(75, 71, 68, 0.06);
--overlay: rgba(42, 37, 34, 0.55);
/* Typography */
--ff-head: 'Playfair Display', Georgia, serif;
--ff-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Font Scale — FIX #11: minimum 12px (0.75rem) for all interactive labels */
--fs-2xs: 0.65rem;
--fs-xs: 0.75rem; /* raised from 0.72rem → 12px minimum for WCAG AA */
--fs-sm: 0.8125rem; /* raised from 0.82rem → 13px */
--fs-base: 0.9375rem;
--fs-md: 1.05rem;
--fs-lg: 1.3rem;
--fs-xl: 1.7rem;
--fs-2xl: 2.2rem;
--fs-3xl: 3rem;
--fs-4xl: 3.8rem;
/* Spacing — tighter vertical rhythm, generous breathing room */
--sp-2xs: 0.25rem;
--sp-xs: 0.5rem;
--sp-sm: 0.75rem;
--sp-md: 1rem;
--sp-lg: 1.5rem;
--sp-xl: 2rem;
--sp-2xl: 3rem;
--sp-3xl: 5rem; /* raised from 4.5rem — sections need more vertical breathing */
--sp-4xl: 7rem; /* raised from 6rem — hero and major sections */
/* Layout */
--max-w: 1380px;
--gutter: clamp(1.25rem, 4vw, 2.75rem); /* slightly wider gutter for luxury breathing */
--header-h: 68px;
--announce-h: 36px;
/* Radius */
--r-xs: 3px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 24px;
--r-full: 999px;
/* Shadows */
--sh-xs: 0 1px 3px rgba(0,0,0,0.05);
--sh-sm: 0 2px 8px rgba(0,0,0,0.06);
--sh-md: 0 6px 24px rgba(0,0,0,0.09);
--sh-lg: 0 16px 48px rgba(0,0,0,0.12);
--sh-xl: 0 24px 64px rgba(0,0,0,0.15);
/* Easing */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in: cubic-bezier(0.65, 0, 0.35, 1);
--t-fast: 160ms;
--t-normal: 300ms;
--t-slow: 550ms;
--t-xslow: 800ms;
}
/* ================================================================
2. RESET & BASE
================================================================ */
*, *::before, *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Custom Premium Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--ivory);
}
::-webkit-scrollbar-thumb {
background: rgba(75, 71, 68, 0.4);
border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--charcoal);
}
body {
font-family: var(--ff-body);
font-size: var(--fs-base);
color: var(--clr-text);
background: var(--clr-bg);
line-height: 1.7; /* raised from 1.65 for better readability */
overflow-x: hidden;
letter-spacing: 0.005em; /* micro-tracking for Inter at body size */
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; object-fit: cover; }
button { font-family: inherit; cursor: pointer; border: none; background: none; outline: none; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--sand); color: var(--espresso); }
/* FIX #14: Keyboard focus-visible ring system */
*:focus { outline: none; }
*:focus-visible {
outline: 2px solid var(--clay);
outline-offset: 3px;
border-radius: 3px;
}
button:focus-visible,
a:focus-visible { border-radius: var(--r-sm); }
/* FIX #22: scroll-margin-top for all anchor sections (accounts for sticky header) */
[id] {
scroll-margin-top: calc(var(--header-h) + var(--announce-h) + 0.5rem);
}
/* ================================================================
3. UTILITIES
================================================================ */
.container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
}
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Section overlines and headings — consistent hierarchy */
.shhek-label,
.section-label {
display: inline-block;
font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--charcoal); margin-bottom: var(--sp-md);
}
.section-title {
font-family: var(--ff-head);
font-size: clamp(1.8rem, 3.5vw, 3rem);
font-weight: 400;
color: var(--espresso);
line-height: 1.08; /* tightened from 1.1 for editorial feel */
margin-bottom: 0.75rem; /* raised from 0.5rem */
letter-spacing: -0.01em; /* negative tracking for Playfair at display sizes */
}
/* Shared buttons — proper touch targets + press feedback */
.btn-primary, .btn-outline, .btn-ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font-family: var(--ff-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 1rem 2.4rem; /* raised from 0.9rem 2.2rem for better touch targets */
min-height: 48px; /* WCAG 2.5.8 minimum touch target */
border-radius: var(--r-full);
border: 1.5px solid transparent;
cursor: pointer;
transition: all var(--t-normal) var(--ease);
white-space: nowrap;
-webkit-tap-highlight-color: transparent; /* cleaner mobile tap */
}
.btn-primary {
background: var(--espresso); color: var(--white); border-color: var(--espresso);
}
.btn-primary:hover {
background: var(--charcoal); border-color: var(--charcoal);
transform: scale(1.02) translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.btn-primary:active { transform: translateY(0) scale(0.97); box-shadow: none; }
.btn-outline {
background: transparent; color: var(--espresso); border-color: var(--espresso);
}
.btn-outline:hover {
background: var(--espresso); color: var(--white);
transform: scale(1.02) translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.btn-outline:active { transform: translateY(0) scale(0.97); }
.btn-ghost {
background: transparent; color: var(--clr-muted); border-color: var(--clr-border);
}
.btn-ghost:hover { border-color: var(--espresso); color: var(--espresso); }
.btn-ghost:active { transform: scale(0.98); }
/* ================================================================
4. SCROLL REVEAL
================================================================ */
.reveal {
opacity: 0;
transform: translateY(30px) scale(0.98);
transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }
/* FIX #17: Above-the-fold elements must never be hidden — override for hero content */
.hero__feature-content .section-label,
.hero__feature-content h1,
.hero__feature-content p,
.hero__feature-btns {
opacity: 1 !important;
transform: none !important;
}
/* ================================================================
5. PAGE LOADER
================================================================ */
.page-loader {
position: fixed; inset: 0; z-index: 9999;
background: #F6F2EE;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.8s ease-out, visibility 0.8s;
}
.page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner {
display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.loader-monogram {
width: 90px; height: auto;
opacity: 0; transform: scale(0.95);
animation: monogramReveal 1.2s ease-out forwards;
}
.loader-monogram-inner {
width: 60px; height: auto;
opacity: 0.15;
}
.loader-line-wrap {
width: 100px; height: 1px;
background: rgba(42,37,34,0.1);
overflow: hidden; border-radius: 2px;
opacity: 0;
animation: fadeReveal 0.4s 0.3s ease-out forwards;
}
.loader-line {
width: 100%; height: 100%;
background: var(--espresso);
transform: scaleX(0); transform-origin: left;
animation: lineLoad 1.2s 0.3s ease-out forwards;
}
@keyframes monogramReveal {
to { opacity: 1; transform: scale(1); }
}
@keyframes fadeReveal {
to { opacity: 1; }
}
@keyframes lineLoad {
to { transform: scaleX(1); }
}
/* ================================================================
6. PAGE TRANSITION BAR
================================================================ */
#page-progress {
position: fixed; top: 0; left: 0; z-index: 10001;
height: 2px;
background: var(--clay);
width: 0%;
transition: width 0.3s var(--ease);
pointer-events: none;
}
/* ================================================================
7. ANNOUNCEMENT BAR
================================================================ */
.announcement-bar {
background: var(--espresso);
color: rgba(255,255,255,0.8);
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.1em;
text-align: center;
padding: 0.55rem var(--gutter);
position: relative;
z-index: 60;
height: var(--announce-h);
display: flex; align-items: center; justify-content: center;
/* FIX #16: use height + overflow to allow transition, not display:none */
overflow: hidden;
transition: height var(--t-normal) var(--ease), padding var(--t-normal) var(--ease), opacity var(--t-normal) var(--ease);
}
.announcement-bar a {
color: var(--sand);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--t-fast) var(--ease);
}
.announcement-bar a:hover { color: var(--white); }
.announcement-bar__close {
position: absolute; right: var(--gutter);
top: 50%; transform: translateY(-50%);
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.5);
cursor: pointer;
transition: color var(--t-fast) var(--ease);
font-size: 16px; line-height: 1;
border-radius: var(--r-sm);
}
.announcement-bar__close:hover { color: var(--white); }
/* FIX #16: dismissed uses height:0 not display:none so layout recalculates properly */
.announcement-bar.dismissed {
height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
pointer-events: none;
}
/* ================================================================
8. UNIFIED HEADER
================================================================ */
.shhek-header {
position: sticky;
top: 0;
z-index: 80;
background: rgba(246,242,238,0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--clr-border);
height: var(--header-h);
display: flex;
align-items: center;
transform: translateY(0);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--t-normal) var(--ease),
background var(--t-normal) var(--ease);
}
.shhek-header.scrolled { box-shadow: var(--sh-md); }
.shhek-header--hidden { transform: translateY(-100%); }
.shhek-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-lg);
}
/* Logo */
.shhek-header .logo {
display: flex; align-items: center; flex-shrink: 0;
transition: opacity var(--t-fast) var(--ease);
}
.shhek-header .logo:hover { opacity: 0.75; }
.shhek-header .logo img { height: 24px; width: auto; }
/* Nav links — improved spacing and underline animation */
.shhek-nav {
display: flex;
align-items: center;
gap: clamp(var(--sp-lg), 2.5vw, var(--sp-2xl)); /* responsive gap */
}
.shhek-nav a {
position: relative;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--clr-muted);
padding: 0.35rem 0; /* raised from 0.25rem for better click area */
transition: color var(--t-normal) var(--ease);
}
.shhek-nav a::after {
content: '';
position: absolute;
bottom: -3px; left: 0; /* moved down 1px for breathing */
width: 0; height: 1.5px; /* slightly thicker for visibility */
background: var(--clay); /* use accent color for underline, not espresso */
transition: width var(--t-normal) var(--ease);
}
.shhek-nav a:hover,
.shhek-nav a.active { color: var(--espresso); }
.shhek-nav a:hover::after,
.shhek-nav a.active::after { width: 100%; }
/* Header actions — proper touch targets */
/* Desktop Nav */
.shhek-nav { display: none; }
@media (min-width: 992px) {
.shhek-nav { display: flex; gap: 2.5rem; align-items: center; }
.shhek-nav > a, .nav-item > a {
font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--espresso); text-decoration: none;
padding: 0.5rem 0; position: relative;
}
.shhek-nav > a::after, .nav-item > a::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 0%; height: 1.5px; background: var(--espresso);
transition: width var(--t-normal) var(--ease);
}
.shhek-nav > a:hover::after, .shhek-nav > a.active::after, .nav-item:hover > a::after { width: 100%; }
/* Mega Menu */
.nav-item { height: 100%; display: flex; align-items: center; }
.mega-menu {
position: absolute; top: 100%; left: 0; right: 0; width: 100%;
background: var(--white);
box-shadow: 0 20px 50px rgba(42,37,34,0.08);
opacity: 0; visibility: hidden; pointer-events: none;
transition: all var(--t-normal) var(--ease);
border-top: 1px solid rgba(75, 71, 68, 0.1);
z-index: 100;
}
.nav-item:hover .mega-menu {
opacity: 1; visibility: visible; pointer-events: auto;
}
/* FIX: Mega menu hide while moving mouse */
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.mega-menu:hover {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mega-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -25px;
height: 25px;
background: transparent;
}
.mega-menu__inner {
display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 4rem; padding: 3rem var(--gutter);
max-width: var(--max-w); margin: 0 auto; width: 100%;
}
.mega-menu__col { display: flex; flex-direction: column; gap: 1.25rem; }
.mega-menu__col h4 { font-family: var(--ff-head); font-size: 1.2rem; font-weight: 400; color: var(--espresso); border-bottom: 1px solid rgba(75, 71, 68, 0.1); padding-bottom: 0.5rem; margin-bottom: 0.25rem; }
.mega-menu__col a { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-muted); text-decoration: none; transition: color var(--t-fast) var(--ease); padding: 0 !important; }
.mega-menu__col a:hover { color: var(--espresso); padding-left: 0 !important; }
.mega-menu__col a::after { display: none !important; }
.mega-menu__promo { position: relative; border-radius: 8px; overflow: hidden; height: 100%; min-height: 200px; display: flex; align-items: flex-end; padding: 1.5rem; }
.mega-menu__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--t-slow) var(--ease); }
.mega-menu__promo:hover img { transform: scale(1.05); }
.mega-menu__promo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); z-index: 1; }
.promo-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.5rem; }
.promo-content span { font-family: var(--ff-head); font-size: 1.2rem; color: var(--white); }
.promo-content a { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
}
.shhek-header__actions {
display: flex;
align-items: center;
gap: 0.35rem; /* raised from 0.25rem */
flex-shrink: 0;
}
.shhek-header__icon {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; /* raised from 40px — WCAG touch target */
border-radius: var(--r-full);
color: var(--espresso);
position: relative;
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.shhek-header__icon svg {
width: 20px; height: 20px;
stroke: currentColor; fill: none;
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.shhek-header__icon:hover { background: var(--warm-beige); }
.shhek-header__icon:active { transform: scale(0.92); }
/* FIX #1 & #19: Cart badge — only hide via opacity/scale, always present in DOM */
.shhek-header__icon .cart-badge {
position: absolute;
top: 2px; right: 2px;
min-width: 17px; height: 17px;
background: var(--espresso);
color: var(--white);
font-size: var(--fs-xs); font-weight: 700;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--ivory);
line-height: 1;
transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.cart-badge[data-count="0"],
.cart-badge:empty {
transform: scale(0);
opacity: 0;
}
@keyframes badgePop { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
.cart-badge.pop { animation: badgePop 0.3s var(--ease) forwards; }
/* Hamburger (mobile) — 44px touch target */
.shhek-hamburger {
display: none;
flex-direction: column; gap: 5px;
width: 44px; height: 44px; /* raised from 38px — WCAG touch target */
align-items: center; justify-content: center;
border-radius: var(--r-full);
cursor: pointer;
transition: background var(--t-fast) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.shhek-hamburger:hover { background: var(--warm-beige); }
.shhek-hamburger:active { background: var(--sand); }
.shhek-hamburger span {
display: block;
width: 22px; height: 1.5px;
background: var(--espresso);
border-radius: 2px;
transition: all var(--t-normal) var(--ease);
}
.shhek-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.shhek-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.shhek-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* FIX #21: Mobile nav — use visibility+opacity for animatable transition (not display) */
.shhek-mobile-nav {
position: fixed;
top: var(--header-h);
left: 0; right: 0;
background: var(--white);
border-bottom: 1px solid var(--clr-border);
box-shadow: var(--sh-md);
padding: var(--sp-lg) var(--gutter);
z-index: 78;
flex-direction: column;
gap: 0;
/* Replaced display:none/flex with visibility+opacity for smooth animation */
display: flex;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity var(--t-normal) var(--ease),
transform var(--t-normal) var(--ease),
visibility 0s var(--t-normal);
}
.shhek-mobile-nav.open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
transition: opacity var(--t-normal) var(--ease),
transform var(--t-normal) var(--ease),
visibility 0s 0s;
}
.shhek-mobile-nav a {
padding: 1.1rem 0; /* raised from 0.9rem — taller touch rows on mobile */
font-size: var(--fs-base); /* raised from var(--fs-sm) — easier to read on phone */
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-muted);
border-bottom: 1px solid var(--clr-border-light);
transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.shhek-mobile-nav a:hover,
.shhek-mobile-nav a.active { color: var(--espresso); padding-left: 0.75rem; background: rgba(232,222,211,0.15); }
.shhek-mobile-nav a:last-child { border-bottom: none; }
.mobile-nav-accordion {
display: flex; flex-direction: column;
border-bottom: 1px solid var(--clr-border-light);
}
.mobile-nav-accordion:last-child { border-bottom: none; }
.mobile-accordion-btn {
display: flex; align-items: center; justify-content: space-between;
width: 100%; background: none; border: none; padding: 1.1rem 0;
font-family: inherit; font-size: var(--fs-base); font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-muted);
cursor: pointer; transition: color var(--t-fast) var(--ease);
}
.mobile-accordion-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--t-fast) var(--ease); }
.mobile-accordion-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-accordion-btn[aria-expanded="true"] { color: var(--espresso); }
.mobile-accordion-content {
display: flex; flex-direction: column;
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height var(--t-normal) var(--ease), opacity var(--t-normal) var(--ease);
}
.mobile-accordion-btn[aria-expanded="true"] + .mobile-accordion-content {
max-height: 400px; opacity: 1; padding-bottom: 1rem;
}
.mobile-accordion-content a {
padding: 0.75rem 0 0.75rem 1rem; font-size: var(--fs-sm);
border-bottom: none; text-transform: none; letter-spacing: normal; font-weight: 500;
}
.mobile-accordion-content a:hover { padding-left: 1.5rem; background: transparent; }
/* ================================================================
9. TRUST STRIP
================================================================ */
.trust-strip {
background: var(--warm-beige);
border-bottom: 1px solid var(--clr-border);
padding: 0.75rem var(--gutter);
}
.trust-strip__inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2xl);
flex-wrap: wrap;
}
.trust-strip__item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--charcoal);
white-space: nowrap;
}
.trust-strip__item svg {
width: 15px; height: 15px;
stroke: var(--charcoal); fill: none;
stroke-width: 1.5; stroke-linecap: round;
flex-shrink: 0;
}
/* ================================================================
9.5 PRESS STRIP
================================================================ */
.press-strip {
padding: var(--sp-2xl) 0;
background: var(--white);
border-bottom: 1px solid var(--clr-border-light);
text-align: center;
}
.press-strip__title {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--clr-muted);
margin-bottom: var(--sp-lg);
font-weight: 600;
}
.press-strip__logos {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(2rem, 6vw, 5rem);
flex-wrap: wrap;
opacity: 0.6;
color: var(--espresso);
}
.press-strip__logos span {
display: inline-block;
line-height: 1;
}
/* ================================================================
10. BREADCRUMB
================================================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem; /* raised from 0.4rem */
padding: 1.25rem 0; /* raised from 1rem — more space above/below */
font-size: var(--fs-xs);
color: var(--clr-muted);
letter-spacing: 0.06em;
}
.breadcrumb a {
color: var(--clr-muted);
transition: color var(--t-fast) var(--ease);
padding: 0.2rem 0; /* slight padding for larger click area */
}
.breadcrumb a:hover { color: var(--espresso); }
.breadcrumb__sep {
color: rgba(75, 71, 68, 0.6);
font-size: var(--fs-xs);
user-select: none;
}
.breadcrumb__current { color: var(--espresso); font-weight: 500; }
/* ============================================================
11. SEARCH OVERLAY (Predictive)
============================================================ */
.search-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(20, 18, 17, 0.65);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 15vh;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-normal) var(--ease);
overflow: hidden;
}
.search-overlay::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 90vw;
height: 90vw;
max-width: 900px;
max-height: 900px;
transform: translate(-50%, -50%);
background: url('images/monogram.png') no-repeat center center;
background-size: contain;
opacity: 0.05;
filter: invert(1);
pointer-events: none;
z-index: 0;
}
.search-overlay.open {
opacity: 1;
pointer-events: all;
}
.search-overlay__close {
position: absolute; top: 2rem; right: 3rem;
background: none; border: none; color: var(--white);
font-size: 3rem; font-weight: 300; cursor: pointer; line-height: 1;
transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
opacity: 0.7;
}
.search-overlay__close:hover { transform: scale(1.05) rotate(90deg); opacity: 1; }
.search-overlay__inner {
width: 100%;
max-width: 800px;
padding: 0 var(--gutter);
transform: translateY(-30px);
transition: transform var(--t-normal) var(--ease);
}
.search-overlay.open .search-overlay__inner { transform: translateY(0); }
.search-overlay__label {
display: block;
margin-bottom: 1.5rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.search-overlay__form {
display: flex;
align-items: center;
gap: 1.5rem;
border-bottom: 2px solid rgba(255,255,255,0.2);
padding-bottom: 1.5rem;
transition: border-color var(--t-fast) var(--ease);
}
.search-overlay__form:focus-within { border-color: var(--white); }
.search-overlay__input {
flex: 1; background: none; border: none; outline: none;
font-family: var(--ff-head); font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 300; color: var(--white); caret-color: var(--white);
letter-spacing: -0.01em;
}
.search-overlay__input::placeholder { color: rgba(255,255,255,0.3); font-weight: 300; }
.search-overlay__submit {
background: none; border: none; cursor: pointer; color: var(--white); padding: 0; opacity: 0.7; transition: opacity var(--t-fast) var(--ease);
}
.search-overlay__submit:hover { opacity: 1; }
.search-overlay__submit svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.search-overlay__results {
margin-top: 3.5rem;
width: 100%;
}
.search-overlay__suggestions-label {
font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: rgba(255,255,255,0.5);
margin-bottom: 1.5rem; display: block;
}
.search-overlay__tags {
display: flex; flex-wrap: wrap; gap: 1rem;
}
.search-overlay__tag {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
color: var(--white); font-size: 0.95rem; font-weight: 400;
padding: 0.8rem 1.75rem; border-radius: 40px; cursor: pointer;
transition: all var(--t-fast) var(--ease);
letter-spacing: 0.02em;
}
.search-overlay__tag:hover { background: var(--white); color: var(--charcoal); border-color: var(--white); transform: translateY(-2px); }
.predictive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
.predictive-item {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1rem;
background: rgba(255,255,255,0.03);
border-radius: 8px;
text-decoration: none;
transition: background var(--t-fast) var(--ease);
}
.predictive-item:hover {
background: rgba(255,255,255,0.08);
}
.predictive-item__img {
width: 60px;
height: 76px;
object-fit: cover;
border-radius: 4px;
}
.predictive-item__info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.predictive-item__name {
font-family: var(--ff-head);
font-size: 1.2rem;
font-weight: 400;
color: var(--white);
}
.predictive-item__price {
font-family: var(--ff-body);
font-size: var(--fs-sm);
color: rgba(255,255,255,0.6);
}
.search-overlay__form {
display: flex;
align-items: center;
gap: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding-bottom: 1rem;
transition: border-color var(--t-fast) var(--ease);
}
.search-overlay__form:focus-within { border-color: var(--white); }
.search-overlay__input {
flex: 1; background: none; border: none; outline: none;
font-family: var(--ff-head); font-size: 2rem;
font-weight: 300; color: var(--white); caret-color: var(--white);
}
.search-overlay__input::placeholder { color: rgba(255,255,255,0.25); }
.search-overlay__submit {
color: rgba(255,255,255,0.5);
border-radius: var(--r-full);
border: 1px solid rgba(255,255,255,0.15);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
font-size: 20px;
}
.search-overlay__close:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
.search-overlay__suggestions {
margin-top: var(--sp-xl);
}
.search-overlay__suggestions-label {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: var(--sp-md);
display: block;
}
.search-overlay__tags {
display: flex; flex-wrap: wrap; gap: var(--sp-sm);
}
.search-overlay__tag {
padding: 0.5rem 1.1rem;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-full);
font-size: var(--fs-xs);
color: rgba(255,255,255,0.65);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.search-overlay__tag:hover {
background: rgba(255,255,255,0.15);
color: var(--white);
border-color: rgba(255,255,255,0.3);
}
/* ================================================================
12. QUICK VIEW MODAL
================================================================ */
.modal-backdrop {
position: fixed; inset: 0; z-index: 150;
background: rgba(42,37,34,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0; pointer-events: none;
transition: opacity var(--t-normal) var(--ease);
display: flex; align-items: center; justify-content: center;
padding: var(--sp-xl);
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }
.modal {
background: var(--white);
border-radius: var(--r-xl);
width: 100%;
max-width: 880px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--sh-xl);
transform: translateY(24px) scale(0.97);
transition: transform var(--t-normal) var(--ease);
position: relative;
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal__close {
position: absolute; top: var(--sp-lg); right: var(--sp-lg);
width: 36px; height: 36px;
background: var(--warm-beige);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
z-index: 2;
font-size: 18px; color: var(--espresso);
}
.modal__close:hover { background: var(--sand); transform: scale(1.05); }
/* Quick View Layout */
.quickview {
display: grid;
grid-template-columns: 1fr 1fr;
}
.quickview__gallery {
background: var(--warm-beige);
border-radius: var(--r-xl) 0 0 var(--r-xl);
overflow: hidden;
aspect-ratio: 3/4;
}
.quickview__gallery img {
width: 100%; height: 100%; object-fit: cover;
}
.quickview__info {
padding: var(--sp-2xl);
display: flex; flex-direction: column; gap: var(--sp-md);
}
.quickview__category {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--clr-accent);
}
.quickview__title {
font-family: var(--ff-head);
font-size: var(--fs-xl);
font-weight: 400;
color: var(--espresso);
line-height: 1.2;
}
.quickview__price {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--espresso);
}
.quickview__rating {
display: flex; align-items: center; gap: 0.5rem;
}
.quickview__stars { display: flex; gap: 2px; }
.quickview__stars svg {
width: 13px; height: 13px;
fill: var(--clay); stroke: none;
}
.quickview__rating-count {
font-size: var(--fs-xs);
color: var(--clr-muted);
}
.quickview__option-label {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--espresso);
margin-bottom: 0.5rem;
display: block;
}
.quickview__colors {
display: flex; gap: 0.5rem;
}
.quickview__color {
width: 24px; height: 24px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: all var(--t-fast) var(--ease);
outline-offset: 2px;
}
.quickview__color.active,
.quickview__color:hover { outline: 2px solid var(--espresso); }
.quickview__sizes {
display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.quickview__sz {
min-width: 44px; height: 36px;
border: 1.5px solid var(--clr-border);
border-radius: var(--r-sm);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--clr-muted);
cursor: pointer;
padding: 0 0.75rem;
transition: all var(--t-fast) var(--ease);
}
.quickview__sz:hover { border-color: var(--espresso); color: var(--espresso); }
.quickview__sz.active { background: var(--espresso); color: var(--white); border-color: var(--espresso); }
.quickview__sz.sold-out { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.quickview__actions { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: auto; }
.quickview__add-btn {
width: 100%;
padding: 1rem;
background: var(--espresso);
color: var(--white);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: var(--r-full);
cursor: pointer;
border: none;
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.quickview__add-btn:hover { background: var(--charcoal); transform: translateY(-1px); }
.quickview__view-link {
text-align: center;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-muted);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--t-fast) var(--ease);
}
.quickview__view-link:hover { color: var(--espresso); }
/* ================================================================
13. SIZE GUIDE MODAL
================================================================ */
.size-guide-modal .modal { max-width: 600px; }
.size-guide__inner { padding: var(--sp-2xl); }
.size-guide__title {
font-family: var(--ff-head);
font-size: var(--fs-xl);
font-weight: 400;
color: var(--espresso);
margin-bottom: 0.5rem;
}
.size-guide__sub {
font-size: var(--fs-sm);
color: var(--clr-muted);
margin-bottom: var(--sp-xl);
line-height: 1.6;
}
.size-guide__table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.size-guide__table th {
background: var(--warm-beige);
padding: 0.75rem 1rem;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--espresso);
text-align: left;
border-bottom: 1px solid var(--clr-border);
}
.size-guide__table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--clr-border-light);
color: var(--clr-muted);
}
.size-guide__table tr:last-child td { border-bottom: none; }
.size-guide__tip {
margin-top: var(--sp-lg);
padding: var(--sp-md);
background: var(--warm-beige);
border-radius: var(--r-md);
font-size: var(--fs-xs);
color: var(--clr-muted);
line-height: 1.6;
}
.size-guide__tip strong { color: var(--espresso); }
/* ================================================================
14. TOAST NOTIFICATION
================================================================ */
.toast-container {
position: fixed;
bottom: var(--sp-xl);
right: var(--sp-xl);
z-index: 300;
display: flex;
flex-direction: column;
gap: var(--sp-sm);
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: var(--sp-sm);
padding: 0.85rem 1.25rem;
background: var(--espresso);
color: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--sh-lg);
font-size: var(--fs-sm);
font-weight: 500;
min-width: 240px;
max-width: 340px;
pointer-events: all;
transform: translateX(120%);
transition: transform var(--t-normal) var(--ease);
}
.toast.show { transform: translateX(0); }
.toast.hide { transform: translateX(120%); }
.toast--success { background: #2d5a27; }
.toast--error { background: #7a2020; }
.toast--info { background: var(--espresso); }
.toast__icon {
width: 18px; height: 18px; flex-shrink: 0;
stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round;
}
/* ================================================================
15. WISHLIST HEART ANIMATION
================================================================ */
.wishlist-btn {
position: relative;
cursor: pointer;
transition: transform var(--t-fast) var(--ease);
}
.wishlist-btn:hover { transform: scale(1.15); }
.wishlist-btn.active svg { fill: #e8526e; stroke: #e8526e; }
.wishlist-btn svg {
stroke: currentColor; fill: none;
transition: fill var(--t-fast) var(--ease), stroke var(--t-fast) var(--ease);
}
/* ================================================================
16. SKELETON SCREENS
================================================================ */
@keyframes shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.skeleton {
background: linear-gradient(90deg,
var(--warm-beige) 25%,
var(--sand) 50%,
var(--warm-beige) 75%
);
background-size: 800px 100%;
animation: shimmer 1.6s infinite;
border-radius: var(--r-sm);
}
.skeleton-img { aspect-ratio: 3/4; border-radius: var(--r-md); }
.skeleton-text { height: 1em; margin: 0.4rem 0; }
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
/* ================================================================
17. PRODUCT CARD — shared across shop/collection/home
================================================================ */
.pc {
position: relative;
cursor: pointer;
transition: transform var(--t-normal) var(--ease); /* subtle lift on entire card */
}
.pc:hover { transform: translateY(-3px); }
.pc__img-wrap {
position: relative;
border-radius: 2px; /* Sharper corners for luxury editorial feel */
overflow: hidden;
aspect-ratio: 3/4;
background: var(--warm-beige);
margin-bottom: var(--sp-md);
box-shadow: none; /* Removed shadow for cleaner look */
transition: transform var(--t-normal) var(--ease);
}
.pc:hover .pc__img-wrap { transform: translateY(-3px); }
.pc__img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--t-xslow) var(--ease); /* slower, more cinematic */
}
.pc:hover .pc__img-wrap img { transform: scale(1.05); }
.pc__badge {
position: absolute; top: 0.85rem; left: 0.85rem;
font-size: 9px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
background: var(--espresso); color: var(--white);
padding: 0.35rem 0.75rem;
border-radius: 2px; z-index: 2;
}
.pc__badge--new { background: var(--clay); color: var(--espresso); }
.pc__badge--limited { background: var(--charcoal); }
.pc__badge--sale { background: #7a2020; }
.pc__wish {
position: absolute; top: 0.85rem; right: 0.85rem;
width: 32px; height: 32px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
z-index: 2;
cursor: pointer;
transition: all var(--t-fast) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.pc__wish svg { width: 16px; height: 16px; stroke: var(--charcoal); fill: none; stroke-width: 1.5; transition: all var(--t-fast) var(--ease); }
.pc__wish:hover { transform: scale(1.12); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.pc__wish:active { transform: scale(0.95); }
.pc__wish.active svg { fill: #e8526e; stroke: #e8526e; }
/* Hover actions — bottom bar on product cards */
.pc__hover-actions {
position: absolute; bottom: 0; left: 0; right: 0;
display: flex; gap: 0;
transform: translateY(100%);
transition: transform var(--t-normal) var(--ease);
z-index: 2;
/* Image wrapper handles overflow cropping now */
}
.pc:hover .pc__hover-actions { transform: translateY(0); }
.pc__quick-view {
flex: 1;
padding: 0.9rem; /* raised from 0.8rem */
background: rgba(246,242,238,0.97);
backdrop-filter: blur(8px);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--espresso);
text-align: center;
cursor: pointer;
border: none;
border-right: 1px solid var(--clr-border);
transition: background var(--t-fast) var(--ease);
}
.pc__quick-view:hover { background: var(--white); }
.pc__quick-view:active { background: var(--warm-beige); }
.pc__add {
flex: 1;
padding: 0.9rem; /* raised from 0.8rem */
background: rgba(42,37,34,0.92);
backdrop-filter: blur(8px);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--white);
text-align: center;
cursor: pointer;
border: none;
transition: background var(--t-fast) var(--ease);
}
.pc__add:hover { background: var(--espresso); }
.pc__add:active { background: var(--charcoal); }
/* Add to Bag success state */
.pc__add.added {
background: #2d5a27;
pointer-events: none;
}
.pc__info {
display: flex; flex-direction: column; gap: 0.35rem;
padding: 0 0.1rem;
}
.pc__name {
font-family: var(--ff-heading); /* Elevated serif typography */
font-size: 1.15rem; /* Larger, more prominent */
font-style: italic;
font-weight: 400;
color: var(--charcoal);
line-height: 1.2;
}
.pc__sub {
font-size: var(--fs-xs);
color: var(--clr-muted);
letter-spacing: 0.05em; /* raised from 0.04em */
margin-top: 0.1rem;
}
.pc__price {
font-size: var(--fs-sm);
font-weight: 700;
color: var(--espresso);
margin-top: 0.25rem; /* raised from 0.2rem */
letter-spacing: 0.02em;
}
.pc__colors { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.pc__color-dot {
width: 14px; height: 14px; /* raised from 13px */
border-radius: 50%;
border: 1.5px solid rgba(0,0,0,0.1);
cursor: pointer;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pc__color-dot:hover {
transform: scale(1.3);
box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--espresso);
}
/* Star ratings on product cards */
.pc__rating {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.15rem;
}
.pc__stars {
display: flex;
gap: 1px;
}
.pc__stars svg {
width: 12px; height: 12px; /* raised from 11px for legibility */
fill: var(--clay);
stroke: none;
}
.pc__rating-count {
font-size: var(--fs-xs);
color: var(--clr-muted);
letter-spacing: 0.04em;
}
/* ================================================================
13.5 WELCOME MODAL (Lead Gen)
================================================================ */
.welcome-modal .modal {
max-width: 800px;
padding: 0;
display: flex;
overflow: hidden;
background: var(--ivory);
}
.welcome-modal__img {
width: 45%;
object-fit: cover;
display: none;
}
@media (min-width: 768px) {
.welcome-modal__img { display: block; }
}
.welcome-modal__content {
flex: 1;
padding: clamp(2rem, 5vw, 4rem);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.welcome-modal__content::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 200px; height: 200px;
transform: translate(-50%, -50%);
background: url('images/monogram.png') no-repeat center center;
background-size: contain;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
.welcome-modal__content > * {
position: relative;
z-index: 1;
}
.welcome-modal__title {
font-family: var(--ff-head);
font-size: clamp(2rem, 4vw, 2.8rem);
color: var(--espresso);
font-weight: 300;
line-height: 1.1;
margin-bottom: 1rem;
}
.welcome-modal__desc {
font-size: var(--fs-sm);
color: var(--clr-muted);
margin-bottom: 2rem;
line-height: 1.6;
}
.welcome-modal__form {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
}
.welcome-modal__form input {
width: 100%;
padding: 1rem;
background: var(--white);
border: 1px solid var(--clr-border);
font-family: var(--ff-body);
font-size: var(--fs-sm);
}
.welcome-modal__form input:focus {
outline: none;
border-color: var(--espresso);
}
.welcome-modal__form button {
width: 100%;
padding: 1rem;
}
.welcome-modal__close-text {
margin-top: 1.5rem;
background: none;
border: none;
font-size: 10px; /* Kept small intentionally for 'no thanks' */
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--clr-muted);
text-decoration: underline;
cursor: pointer;
}
.welcome-modal__close-text:hover { color: var(--espresso); }
/* ================================================================
18. UNIFIED FOOTER
================================================================ */
.shhek-footer {
background: var(--espresso);
color: rgba(255,255,255,0.7);
padding-top: var(--sp-4xl);
position: relative;
overflow: hidden;
}
.shhek-footer::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80vw;
height: 80vw;
max-width: 800px;
max-height: 800px;
transform: translate(-50%, -50%);
background: url('images/monogram.png') no-repeat center center;
background-size: contain;
opacity: 0.03;
filter: invert(1);
pointer-events: none;
z-index: 0;
}
.shhek-footer .container {
position: relative;
z-index: 1;
}
.shhek-footer__top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: var(--sp-2xl);
padding-bottom: var(--sp-3xl);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.shhek-footer__brand .logo { margin-bottom: var(--sp-lg); display: block; }
.shhek-footer__brand .logo img { filter: brightness(0) invert(1); height: 24px; width: auto; }
.shhek-footer__brand p {
font-size: var(--fs-sm);
line-height: 1.7;
color: rgba(255,255,255,0.5);
max-width: 30ch;
}
.shhek-footer__col h4 {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--white);
margin-bottom: var(--sp-lg);
}
.shhek-footer__col ul { display: flex; flex-direction: column; gap: 0.8rem; }
.shhek-footer__col a {
font-size: var(--fs-sm); color: rgba(255,255,255,0.55);
transition: color var(--t-fast) var(--ease);
}
.shhek-footer__col a:hover { color: var(--white); }
.shhek-footer__newsletter p {
font-size: var(--fs-sm); color: rgba(255,255,255,0.55); line-height: 1.6;
max-width: 35ch; margin-bottom: var(--sp-lg);
}
.shhek-footer__form {
display: flex; align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.25);
padding-bottom: 0.5rem;
transition: border-color var(--t-fast) var(--ease);
}
.shhek-footer__form:focus-within { border-color: var(--white); }
.shhek-footer__form input {
flex: 1; min-width: 0;
background: transparent; border: none; outline: none;
color: var(--white); font-size: var(--fs-sm);
padding: 0;
}
.shhek-footer__form input::placeholder { color: rgba(255,255,255,0.3); }
.shhek-footer__form button {
background: transparent; border: none; padding: 0; margin-left: 1rem;
color: var(--white); font-size: 1.2rem; line-height: 1;
cursor: pointer; opacity: 0.5; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.shhek-footer__form button:hover { opacity: 1; transform: translateX(3px); }
.shhek-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-xl) 0;
font-size: 11px;
color: rgba(255,255,255,0.35);
letter-spacing: 0.05em;
}
.shhek-footer__bottom-left { display: flex; align-items: center; gap: var(--sp-xl); }
.shhek-footer__social { display: flex; gap: var(--sp-sm); }
.shhek-footer__social a {
color: rgba(255,255,255,0.35);
transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
display: flex; align-items: center; justify-content: center;
}
.shhek-footer__social a svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.shhek-footer__social a:hover { color: var(--white); transform: translateY(-2px); }
.shhek-footer__payments { display: flex; gap: var(--sp-xs); align-items: center; }
.shhek-footer__pay-badge {
padding: 0.2rem 0.4rem;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 2px;
font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
color: rgba(255,255,255,0.35);
}
.shhek-footer__bottom-right { display: flex; align-items: center; gap: var(--sp-xl); }
.shhek-footer__bottom-links { display: flex; gap: var(--sp-lg); }
.shhek-footer__bottom-links a { color: rgba(255,255,255,0.35); transition: color var(--t-fast) var(--ease); }
.shhek-footer__bottom-links a:hover { color: var(--white); }
.shhek-footer__signoff img {
width: 28px; height: auto; opacity: 0.7; filter: invert(1);
}
/* ================================================================
19. RECENTLY VIEWED
================================================================ */
.recently-viewed {
padding: var(--sp-3xl) 0;
background: var(--white);
border-top: 1px solid var(--clr-border);
}
.recently-viewed__header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--sp-xl);
}
.recently-viewed__title {
font-family: var(--ff-head);
font-size: var(--fs-lg);
font-weight: 400;
color: var(--espresso);
}
.recently-viewed__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-md);
}
/* ================================================================
20. RESPONSIVE
================================================================ */
@media (max-width: 1024px) {
.shhek-footer__top { grid-template-columns: 1fr 1fr 1fr; }
.shhek-footer__brand { grid-column: 1 / -1; }
.recently-viewed__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
:root {
--header-h: 60px;
--sp-3xl: 4rem; /* tighten major sections on mobile */
--sp-4xl: 5rem;
}
.shhek-nav { display: none; }
.shhek-hamburger { display: flex; }
.trust-strip__inner { gap: var(--sp-lg); }
.trust-strip__item:nth-child(n+3) { display: none; }
.shhek-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
.shhek-footer__brand { grid-column: 1 / -1; }
.shhek-footer__bottom { flex-direction: column; text-align: center; }
.shhek-footer__bottom-links { justify-content: center; }
.modal-backdrop { padding: var(--sp-sm); align-items: flex-end; }
.modal { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; }
.quickview { grid-template-columns: 1fr; }
.quickview__gallery { border-radius: var(--r-xl) var(--r-xl) 0 0; aspect-ratio: 4/3; }
.quickview__info { padding: var(--sp-xl); } /* tighter on mobile */
.recently-viewed__grid { grid-template-columns: repeat(2, 1fr); }
.toast-container { bottom: var(--sp-md); right: var(--sp-md); left: var(--sp-md); }
.toast { max-width: 100%; font-size: var(--fs-xs); }
.search-overlay { padding-top: 8vh; }
.search-overlay__input { font-size: var(--fs-lg); }
.search-overlay__close { top: var(--sp-md); right: var(--sp-md); }
/* Better mobile product card info */
.pc__info { gap: 0.25rem; }
.pc__name { font-size: var(--fs-base); }
.pc:hover { transform: none; } /* disable lift on touch devices */
.pc__img-wrap { border-radius: var(--r-md); }
}
@media (max-width: 480px) {
.shhek-footer__top { grid-template-columns: 1fr; }
.recently-viewed__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
.trust-strip__item:nth-child(n+2) { display: none; }
.breadcrumb { padding: 1rem 0; font-size: var(--fs-2xs); }
.section-label { font-size: var(--fs-2xs); margin-bottom: 0.5rem; }
.section-title { font-size: clamp(1.4rem, 5vw, 2rem); }
}
/* ================================================================
21. PREFERS-REDUCED-MOTION (FIX #24)
================================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.marquee { animation: none !important; }
}
/* ========================================================= */
/* AUTH DRAWER STYLES
/* ========================================================= */
.shhek-auth-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(27, 26, 25, 0.6);
backdrop-filter: blur(4px);
z-index: 1000;
opacity: 0; visibility: hidden;
transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.shhek-auth-overlay.active { opacity: 1; visibility: visible; }
.shhek-auth-drawer {
position: fixed; top: 0; right: 0;
width: 100%; max-width: 420px; height: 100%;
background: var(--ivory);
z-index: 1001;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
display: flex; flex-direction: column;
box-shadow: -10px 0 40px rgba(0,0,0,0.05);
}
.shhek-auth-drawer.active { transform: translateX(0); }
.shhek-auth-drawer__header {
display: flex; justify-content: space-between; align-items: center;
padding: var(--sp-lg) var(--sp-xl);
border-bottom: 1px solid rgba(27,26,25,0.08);
}
.shhek-auth-drawer__header h3 {
font-family: var(--ff-heading);
font-size: var(--fs-lg);
font-weight: 400;
color: var(--charcoal);
margin: 0;
}
.shhek-auth-drawer__close {
font-size: 2rem; line-height: 1;
color: var(--charcoal); opacity: 0.6;
padding: 0; margin: 0; background: transparent; border: none; cursor: pointer;
transition: opacity 0.3s ease;
}
.shhek-auth-drawer__close:hover { opacity: 1; }
.shhek-auth-drawer__content {
padding: var(--sp-xl);
overflow-y: auto;
flex: 1;
}
.shhek-auth-form {
display: flex; flex-direction: column; gap: var(--sp-lg);
}
.shhek-form-group {
display: flex; flex-direction: column; gap: var(--sp-xs);
}
.shhek-form-group label {
font-family: var(--ff-body);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--charcoal);
}
.shhek-form-group input {
font-family: var(--ff-body);
font-size: var(--fs-base);
padding: var(--sp-sm) 0;
border: none;
border-bottom: 1px solid rgba(27, 26, 25, 0.4);
background: transparent;
color: var(--charcoal);
transition: border-color 0.3s ease;
}
.shhek-form-group input:focus {
outline: none;
border-bottom-color: var(--clay);
}
.shhek-form-group input::placeholder { color: rgba(27, 26, 25, 0.6); }
.shhek-auth-forgot {
text-align: right; margin-top: -0.5rem;
}
.shhek-auth-forgot a {
font-size: var(--fs-xs); color: rgba(27,26,25,0.6);
text-decoration: underline; transition: color 0.3s ease;
}
.shhek-auth-forgot a:hover { color: var(--clay); }
.shhek-auth-toggle {
margin-top: var(--sp-xl);
text-align: center;
font-size: var(--fs-sm);
color: rgba(27,26,25,0.6);
padding-top: var(--sp-lg);
border-top: 1px solid rgba(27,26,25,0.08);
}
.shhek-auth-toggle button {
display: inline-block; margin-left: var(--sp-xs);
color: var(--charcoal); font-weight: 600;
background: none; border: none; padding: 0; cursor: pointer;
text-decoration: underline; text-underline-offset: 4px;
transition: color 0.3s ease;
}
.shhek-auth-toggle button:hover { color: var(--clay); }
/* ========================================================= */
/* ACCOUNT DASHBOARD STYLES
/* ========================================================= */
.shhek-account-layout {
padding-top: calc(var(--header-height) + var(--sp-2xl));
padding-bottom: var(--sp-3xl);
}
.shhek-account-grid {
display: grid;
grid-template-columns: 250px 1fr;
gap: var(--sp-3xl);
align-items: start;
}
@media (max-width: 900px) {
.shhek-account-grid {
grid-template-columns: 1fr;
gap: var(--sp-2xl);
}
}
/* Sidebar Nav */
.shhek-account-nav ul {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 1.25rem;
}
.shhek-account-nav a {
font-family: var(--ff-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--charcoal);
opacity: 0.5;
text-transform: uppercase;
position: relative;
transition: all 0.3s ease;
display: inline-block;
padding-left: 14px;
}
.shhek-account-nav a:hover {
opacity: 0.8;
}
.shhek-account-nav a.active {
opacity: 1;
font-weight: 700;
color: var(--charcoal);
}
.shhek-account-nav a.active::before {
content: ">";
position: absolute;
left: 0;
font-weight: 400;
}
/* Main Content Area */
.shhek-account-content-header {
margin-bottom: var(--sp-xl);
}
.shhek-account-content-header h2 {
font-family: var(--ff-heading);
font-size: var(--fs-xl);
font-weight: 400;
color: var(--charcoal);
margin: 0;
}
.shhek-account-empty-state {
text-align: center;
padding: var(--sp-3xl) 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.shhek-account-empty-state h3 {
font-family: var(--ff-heading);
font-size: var(--fs-lg);
font-weight: 400;
color: var(--charcoal);
margin-bottom: var(--sp-sm);
}
.shhek-account-empty-state p {
font-family: var(--ff-body);
font-size: var(--fs-sm);
color: rgba(27,26,25,0.7);
line-height: 1.6;
margin-bottom: var(--sp-lg);
}
.shhek-account-empty-state .shhek-btn {
min-width: 200px;
}
/* Account Forms */
.shhek-account-form {
display: flex; flex-direction: column; gap: 1.5rem;
max-width: 600px;
}
.shhek-account-form .form-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.shhek-subheading {
font-family: var(--ff-heading);
font-size: 1.25rem;
font-weight: 400;
color: var(--charcoal);
border-bottom: 1px solid rgba(27,26,25,0.1);
padding-bottom: 0.5rem;
}
/* VIP Card */
.shhek-vip-card {
background: var(--charcoal);
color: var(--ivory);
padding: 3rem 2rem;
display: flex; justify-content: space-between;
border-radius: 4px;
}
.shhek-vip-tier span, .shhek-vip-points span {
font-family: var(--ff-body);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.6;
}
.shhek-vip-tier h3, .shhek-vip-points h3 {
font-family: var(--ff-heading);
font-size: 2rem;
font-weight: 400;
margin: 0.5rem 0 0 0;
color: var(--sand);
}
.shhek-vip-points { text-align: right; }
/* Address Cards */
.shhek-address-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem;
}
.shhek-address-card {
border: 1px solid rgba(27,26,25,0.1);
padding: 1.5rem;
position: relative;
display: flex; flex-direction: column;
}
.shhek-address-card.default {
border-color: var(--charcoal);
}
.shhek-address-card .badge {
position: absolute; top: 1.5rem; right: 1.5rem;
background: var(--charcoal); color: var(--ivory);
font-size: 0.65rem; padding: 0.2rem 0.5rem; letter-spacing: 0.1em;
}
.shhek-address-card h4 {
font-family: var(--ff-heading); font-size: 1.25rem; margin: 0 0 1rem 0; font-weight: 400;
}
.shhek-address-card p {
font-family: var(--ff-body); font-size: 0.85rem; color: rgba(27,26,25,0.7); line-height: 1.6; margin: 0 0 1.5rem 0;
}
.shhek-address-actions {
margin-top: auto; display: flex; gap: 1rem;
}
.shhek-address-actions a {
font-size: 0.75rem; text-decoration: underline; color: var(--charcoal); opacity: 0.6; transition: opacity 0.3s;
}
.shhek-address-actions a:hover { opacity: 1; }
.shhek-address-card.add-new {
border: 1px dashed rgba(27,26,25,0.3);
display: flex; align-items: center; justify-content: center;
min-height: 200px;
background: transparent;
}
.shhek-add-address-btn {
font-family: var(--ff-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; color: var(--charcoal);
opacity: 0.6; transition: opacity 0.3s;
}
.shhek-add-address-btn:hover { opacity: 1; }
.shhek-wishlist-empty {
text-align: center; padding: 4rem 0;
}
.shhek-wishlist-empty h3 {
font-family: var(--ff-heading); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.5rem;
}
.shhek-wishlist-empty p {
font-family: var(--ff-body); color: rgba(27,26,25,0.7); margin-bottom: 2rem;
}
/* ========================================================= */
/* COLLECTION COLLAGE HERO
/* ========================================================= */
.collage-hero {
position: relative;
background-color: #f6f5f3; /* A very soft ivory/grey */
padding: calc(var(--header-height) + 4rem) 2rem 6rem 2rem;
overflow: hidden;
min-height: 80vh;
display: flex;
align-items: center;
}
.collage-grid {
display: grid;
grid-template-columns: 1.2fr 2fr 1fr;
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
align-items: start; /* Fix: align to top so we can manually stagger */
position: relative;
width: 100%;
}
.collage-left img {
width: 100%;
height: 800px; /* Fix: Make it the tallest anchor image */
object-fit: cover;
}
.collage-center {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem; /* Fix: push down slightly from the very top */
}
.collage-title-wrap {
text-align: left;
width: 100%;
margin-bottom: 2rem;
padding-left: 1rem;
}
.collage-title {
font-family: var(--ff-heading);
font-size: 3.5rem;
font-style: italic;
font-weight: 400;
color: var(--charcoal);
margin: 0 0 0.25rem 0;
line-height: 1.1;
}
.collage-subtitle {
font-family: var(--ff-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--charcoal);
text-transform: uppercase;
}
.collage-center-img-wrap {
position: relative;
width: 100%;
border: 8px solid var(--white);
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.collage-center-img-wrap img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
/* Rotating Stamp Badge */
.collage-stamp {
position: absolute;
bottom: -40px;
right: -40px;
width: 120px;
height: 120px;
z-index: 10;
animation: rotateStamp 20s linear infinite;
background: transparent; /* Fix: transparent background */
border-radius: 50%;
}
@keyframes rotateStamp {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.collage-stamp svg {
width: 100%;
height: 100%;
}
.stamp-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--ff-body);
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--clay);
text-transform: lowercase;
}
.collage-right {
margin-top: 8rem; /* Fix: staggered below the left image's top edge */
}
.collage-right img {
width: 100%;
height: 500px;
object-fit: cover;
}
.collage-action {
/* Fix: Button is now inline below the third image, not absolute to the screen */
margin-top: 1.5rem;
}
.collage-btn {
background: var(--charcoal) !important;
color: var(--ivory) !important;
border-radius: 0;
padding: 1rem 2rem;
font-size: 0.75rem;
letter-spacing: 0.1em;
}
/* Responsive Stacking */
@media (max-width: 1000px) {
.collage-grid {
grid-template-columns: 1fr;
gap: 4rem;
}
.collage-left img, .collage-right img, .collage-center-img-wrap img {
height: auto;
aspect-ratio: 3/4;
}
.collage-center-img-wrap img {
aspect-ratio: 4/3;
}
.collage-right {
transform: translateY(0);
}
.collage-action {
position: static;
display: flex;
justify-content: center;
margin-top: 3rem;
}
.collage-stamp {
bottom: -20px; right: -20px;
width: 90px; height: 90px;
}
}
/* ========================================================= */
/* SHOPPABLE UGC CAROUSEL
/* ========================================================= */
.ugc-carousel-section {
background-color: #f6f5f3;
padding: 5rem 0;
overflow: hidden;
}
.ugc-carousel-header {
text-align: center;
margin-bottom: 2.5rem;
}
.ugc-carousel-title {
font-family: var(--ff-heading);
font-size: 1.75rem;
font-weight: 400;
margin: 0;
color: var(--charcoal);
letter-spacing: 0.05em;
}
.ugc-carousel-subtitle {
font-family: var(--ff-body);
font-size: 0.85rem;
color: var(--charcoal);
opacity: 0.6;
margin-top: 0.5rem;
}
.ugc-carousel-wrapper {
position: relative;
max-width: 1400px;
margin: 0 auto;
padding: 0 4rem;
}
.ugc-carousel-track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE */
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
}
.ugc-carousel-track::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.ugc-item-new {
flex: 0 0 calc(20% - 1.2rem);
min-width: 280px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
}
.ugc-image-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.ugc-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.ugc-image-wrap:hover img {
transform: scale(1.02);
}
.ugc-handle {
font-family: var(--ff-body);
font-size: 0.75rem;
color: var(--charcoal);
opacity: 0.5;
margin-top: 0.75rem;
}
/* Shoppable Hotspots */
.ugc-hotspot {
position: absolute;
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
cursor: pointer;
transition: transform 0.3s ease;
z-index: 10;
}
.ugc-hotspot span {
color: var(--charcoal);
font-size: 14px;
font-weight: 600;
line-height: 1;
}
.ugc-hotspot:hover {
transform: translate(-50%, -50%) scale(1.1);
background: white;
}
.ugc-hotspot.pulse::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
z-index: -1;
animation: pulseHotspot 2s infinite;
}
@keyframes pulseHotspot {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(2.5); opacity: 0; }
}
/* Navigation Arrows */
.ugc-nav-btn {
position: absolute;
top: 40%;
transform: translateY(-50%);
width: 44px; height: 44px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
z-index: 20;
opacity: 0.8;
transition: all 0.3s ease;
}
.ugc-nav-btn:hover {
opacity: 1;
background: white;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.ugc-nav-btn svg { width: 20px; height: 20px; stroke: var(--charcoal); }
.ugc-nav-prev { left: 1rem; }
.ugc-nav-next { right: 1rem; }
@media (max-width: 1200px) {
.ugc-item-new { flex: 0 0 calc(25% - 1.125rem); }
}
@media (max-width: 900px) {
.ugc-item-new { flex: 0 0 calc(33.333% - 1rem); }
.ugc-nav-btn { display: none; } /* Hide arrows on mobile, users can swipe */
.ugc-carousel-wrapper { padding: 0 1rem; }
}
@media (max-width: 600px) {
.ugc-item-new { flex: 0 0 calc(60% - 1rem); }
}
/* ============================================================
MINI-CART
============================================================ */
.mini-cart-overlay {
position: fixed; inset: 0; z-index: 100;
background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
opacity: 0; pointer-events: none;
transition: opacity 0.4s ease;
}
.mini-cart-overlay.visible { opacity: 1; pointer-events: auto; }
.mini-cart {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
width: 100%; max-width: 420px;
background: var(--white);
box-shadow: -10px 0 30px rgba(0,0,0,0.1);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mini-cart.visible { transform: translateX(0); }
.mini-cart__header {
display: flex; align-items: center; justify-content: space-between;
padding: 1.5rem 2rem; border-bottom: 1px solid var(--clr-border);
}
.mini-cart__header h2 { font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 400; color: var(--espresso); }
.mini-cart__close {
background: transparent; border: none; cursor: pointer;
color: var(--espresso); padding: 0.5rem; margin-right: -0.5rem;
transition: transform var(--t-fast) var(--ease);
}
.mini-cart__close:hover { transform: scale(1.1); }
.mini-cart__close svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.mini-cart__body {
flex: 1; overflow-y: auto; padding: 2rem;
display: flex; flex-direction: column; gap: 1.5rem;
}
.mini-cart__empty {
text-align: center; margin: auto;
color: var(--clr-muted); font-size: var(--fs-md);
}
.mini-cart__empty::before {
content: '';
display: block;
width: 50px;
height: 50px;
margin: 0 auto 1.5rem;
background: url('images/monogram.png') no-repeat center center;
background-size: contain;
opacity: 0.15;
}
.mini-cart-item {
display: flex; gap: 1rem; padding-bottom: 1.5rem;
border-bottom: 1px solid var(--clr-border);
}
.mini-cart-item img { width: 80px; height: 100px; object-fit: cover; border-radius: 4px; }
.mini-cart-item__info { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.mini-cart-item__name { font-family: var(--ff-head); font-size: var(--fs-md); color: var(--espresso); }
.mini-cart-item__variant { font-size: var(--fs-xs); color: var(--clr-muted); }
.mini-cart-item__price { font-size: var(--fs-sm); font-weight: 700; color: var(--espresso); margin-top: auto; }
.mini-cart-item__remove {
font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--clr-muted); text-decoration: underline; background: none; border: none; cursor: pointer;
padding: 0; align-self: flex-start; transition: color var(--t-fast) var(--ease);
}
.mini-cart-item__remove:hover { color: #d35454; }
.mini-cart__footer {
padding: 2rem; background: var(--warm-beige);
border-top: 1px solid var(--clr-border);
}
.mini-cart__subtotal {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--ff-head); font-size: var(--fs-lg); color: var(--espresso);
margin-bottom: 0.5rem;
}
.mini-cart__tax { font-size: var(--fs-xs); color: var(--clr-muted); margin-bottom: 1.5rem; }
.mini-cart__checkout-btn {
display: flex; align-items: center; justify-content: center;
width: 100%; padding: 1.25rem; background: var(--espresso); color: var(--white);
border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
transition: all var(--t-normal) var(--ease);
}
.mini-cart__checkout-btn:hover { background: var(--charcoal); box-shadow: var(--sh-md); transform: translateY(-2px); }