/* =================================================================
LA NOSTRA — Luxury Minimalist · Mafia Gothic
"Where shadows meet silence, and silence meets gold."
Master Stylesheet
================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Marcellus+SC&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
/* === MODERN GODFATHER PALETTE === */
--color-bg: #050505;
--color-bg-soft: #101011;
--color-bg-darker: #000000;
--color-bg-elevated: #1B1B1D;
--color-primary: #1B1B1D;
--color-secondary: #F0EEE9;
--color-secondary-soft: #d7d2ca;
--color-accent: #C19A5B;
--color-accent-bright:#d2b37a;
--color-accent-deep: #7A1923;
--color-accent-soft: rgba(193,154,91,0.14);
--color-blood: #7A1923;
--color-wine: #521018;
--color-text: #F0EEE9;
--color-text-muted: #A7A7A7;
--color-text-dim: #7f7f82;
--color-text-on-dark: #F0EEE9;
--color-text-on-dark-muted: #A7A7A7;
--color-line: rgba(167,167,167,0.28);
--color-line-soft: rgba(167,167,167,0.16);
--color-line-gold: rgba(193,154,91,0.28);
--color-success: #4a7c4a;
--color-warning: #b48a2c;
--color-danger: #8b2a2a;
--color-info: #4a6b8a;
/* === TYPOGRAPHY === */
--font-display: 'Cinzel', 'Marcellus SC', serif;
--font-serif: 'Marcellus SC', Georgia, serif;
--font-gothic: 'Cinzel', 'Marcellus SC', serif;
--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
/* Spacing scale */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.25rem;
--s-6: 1.5rem;
--s-8: 2rem;
--s-10: 2.5rem;
--s-12: 3rem;
--s-16: 4rem;
--s-20: 5rem;
--s-24: 6rem;
--s-32: 8rem;
/* Layout */
--container-xl: 1400px;
--container-lg: 1200px;
--header-height: 84px;
--topbar-height: 36px;
/* === DRAMATIC SHADOWS === */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
--shadow-sm: 0 4px 12px rgba(0,0,0,0.5);
--shadow-md: 0 12px 32px rgba(0,0,0,0.6);
--shadow-lg: 0 24px 64px rgba(0,0,0,0.7);
--shadow-gold: 0 0 40px rgba(201,169,97,0.25);
--shadow-gold-sm: 0 0 20px rgba(201,169,97,0.15);
/* === ELEGANT EASING === */
--t-fast: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
--t-base: 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
--t-slow: 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
--t-elegant: 1100ms cubic-bezier(0.65, 0, 0.35, 1);
--t-smooth: 1400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.7;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
margin: 0;
position: relative;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image:
radial-gradient(circle at 20% 30%, rgba(201,169,97,0.04) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(201,169,97,0.03) 0%, transparent 40%);
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
mix-blend-mode: overlay;
}
img { max-width: 100%; height: auto; display: block; }
a {
color: inherit;
text-decoration: none;
transition: color var(--t-fast);
}
a:hover { color: var(--color-accent-bright); }
::selection {
background: var(--color-accent);
color: var(--color-bg);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--color-accent-deep), var(--color-accent));
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-bright); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.18;
margin: 0 0 1rem;
color: var(--color-primary);
}
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
p { margin: 0 0 1rem; }
em { font-style: italic; color: var(--color-accent-deep); }
::selection {
background: var(--color-primary);
color: var(--color-secondary);
}
.container {
width: 100%;
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 1.5rem;
}
.theme-luxury {
background: var(--color-secondary);
color: var(--color-text);
}
.muted { color: var(--color-text-muted); }
.small { font-size: 0.8125rem; }
.tag {
display: inline-block;
padding: 4px 10px;
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--color-secondary-deep);
color: var(--color-primary);
}
.box {
background: var(--color-secondary-deep);
padding: var(--s-6);
border-left: 2px solid var(--color-accent);
}
@media (max-width: 767.98px) {
.container { padding: 0 1rem; }
}
/* ====== Typography helpers ====== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-sans);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.4em;
color: var(--color-accent-deep);
font-weight: 500;
margin-bottom: 1rem;
}
.eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: var(--color-accent-deep);
}
.eyebrow-gold { color: var(--color-accent); }
.section-head {
text-align: center;
margin-bottom: 4rem;
}
.section-head .eyebrow { justify-content: center; }
.section-h {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.15;
margin-bottom: 1rem;
font-style: italic;
}
.section-h-light { color: var(--color-text-on-dark); }
.section-sub {
color: var(--color-text-muted);
max-width: 580px;
margin: 0 auto;
font-size: 0.9375rem;
line-height: 1.7;
}
.section-sub-light { color: var(--color-text-on-dark-muted); }
.section-light { background: var(--color-secondary); }
.section-dark { background: var(--color-primary); color: var(--color-text-on-dark); }
.section-cta { padding: 5rem 0; text-align: center; }
/* ====== Buttons ====== */
.btn-luxe-light,
.btn-luxe-line,
.btn-luxe-solid,
.btn-luxe-outline-light,
.btn-luxe-outline {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
padding: 1rem 2rem;
border-radius: 0;
border: 1px solid transparent;
transition: all var(--t-base);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
line-height: 1;
text-decoration: none;
}
.btn-luxe-solid {
background: var(--color-primary);
color: var(--color-secondary);
border-color: var(--color-primary);
}
.btn-luxe-solid:hover {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-luxe-line {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-luxe-line:hover {
background: var(--color-primary);
color: var(--color-secondary);
}
.btn-luxe-light {
background: var(--color-secondary);
color: var(--color-primary);
border-color: var(--color-secondary);
}
.btn-luxe-light:hover {
background: transparent;
color: var(--color-secondary);
border-color: var(--color-secondary);
}
.btn-luxe-outline-light {
background: transparent;
color: var(--color-secondary);
border-color: rgba(245, 241, 234, 0.5);
}
.btn-luxe-outline-light:hover {
background: var(--color-secondary);
color: var(--color-primary);
border-color: var(--color-secondary);
}
.btn-full { width: 100%; }
.btn-lg { padding: 1.2rem 2.5rem; font-size: 0.8125rem; }
.link-luxe {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-primary);
border-bottom: 1px solid var(--color-primary);
padding-bottom: 4px;
font-weight: 500;
transition: all var(--t-base);
}
.link-luxe:hover {
color: var(--color-accent-deep);
border-bottom-color: var(--color-accent-deep);
}
.link-luxe i { transition: transform var(--t-base); }
.link-luxe:hover i { transform: translateX(4px); }
/* ====== Header / Navigation ====== */
.site-header {
background: var(--color-secondary);
border-bottom: 1px solid var(--color-line);
position: sticky;
top: 0;
z-index: 100;
transition: all var(--t-base);
}
.announce-bar {
background: var(--color-primary);
color: var(--color-secondary);
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
padding: 0.6rem 0;
overflow: hidden;
position: relative;
}
.announce-track {
display: flex;
gap: 3rem;
animation: marquee 50s linear infinite;
white-space: nowrap;
will-change: transform;
}
.announce-track span {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.announce-track span::after {
content: '✦';
color: var(--color-accent);
margin-left: 0.6rem;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.header-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
min-height: var(--header-height);
padding: 0 var(--s-6);
gap: var(--s-6);
}
.primary-nav {
display: flex;
align-items: center;
gap: var(--s-8);
}
.nav-link {
font-size: 0.75rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-primary);
font-weight: 500;
padding: 0.5rem 0;
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: var(--color-accent);
transition: width var(--t-base);
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.brand {
font-family: var(--font-serif);
font-size: 1.6rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-primary);
font-weight: 500;
text-align: center;
line-height: 1;
display: block;
}
.brand-mark {
font-family: var(--font-sans);
font-size: 0.55rem;
letter-spacing: 0.5em;
color: var(--color-accent-deep);
margin-top: 6px;
display: block;
}
.header-actions {
display: flex;
align-items: center;
gap: var(--s-4);
justify-content: flex-end;
}
.header-icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--color-primary);
cursor: pointer;
position: relative;
transition: color var(--t-fast);
font-size: 1.05rem;
}
.header-icon:hover { color: var(--color-accent-deep); }
.count-badge {
position: absolute;
top: 4px;
right: 4px;
background: var(--color-accent);
color: var(--color-primary);
font-size: 0.625rem;
font-weight: 600;
min-width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.mobile-toggle {
display: none;
background: none;
border: 0;
color: var(--color-primary);
cursor: pointer;
font-size: 1.4rem;
}
@media (max-width: 991.98px) {
.header-row { grid-template-columns: auto 1fr auto; }
.primary-nav { display: none; }
.mobile-toggle { display: inline-flex; }
}
.mobile-nav {
position: fixed;
top: 0;
left: -100%;
width: 320px;
max-width: 90vw;
height: 100vh;
background: var(--color-secondary);
padding: 5rem 2rem 2rem;
transition: left var(--t-base);
z-index: 1050;
overflow-y: auto;
}
.mobile-nav.is-open { left: 0; }
.mobile-nav a {
display: block;
padding: 1rem 0;
border-bottom: 1px solid var(--color-line-soft);
font-size: 0.8125rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-primary);
}
.mobile-nav a:hover { color: var(--color-accent-deep); }
/* ====== Hero / Luxury Hero ====== */
.luxury-hero {
position: relative;
overflow: hidden;
background: var(--color-primary);
}
.hero-slider {
position: relative;
height: calc(100vh - var(--header-height) - var(--topbar-height));
min-height: 640px;
max-height: 920px;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1200ms ease, visibility 1200ms ease;
}
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.08);
transition: transform 8s ease;
}
.hero-slide.active .hero-image { transform: scale(1); }
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.25) 50%, rgba(10, 10, 10, 0.05) 100%);
}
.hero-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--color-secondary);
max-width: var(--container-xl);
margin: 0 auto;
padding: 3rem 1.5rem;
}
.hero-eyebrow {
color: var(--color-accent);
letter-spacing: 0.5em;
font-size: 0.6875rem;
text-transform: uppercase;
margin-bottom: 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-sans);
font-weight: 500;
}
.hero-eyebrow::before {
content: '';
width: 48px;
height: 1px;
background: var(--color-accent);
}
.hero-title {
color: var(--color-secondary);
font-size: clamp(2.5rem, 6.5vw, 5rem);
line-height: 1.04;
margin-bottom: 1.5rem;
max-width: 800px;
font-weight: 400;
}
.hero-title em {
font-style: italic;
color: var(--color-accent);
}
.hero-subtitle {
color: var(--color-text-on-dark-muted);
font-size: 1rem;
max-width: 540px;
margin-bottom: 2.5rem;
line-height: 1.7;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-controls {
position: absolute;
bottom: 3rem;
right: 3rem;
z-index: 5;
display: flex;
gap: 1rem;
align-items: center;
}
.hero-prev,
.hero-next {
width: 48px;
height: 48px;
border: 1px solid rgba(245, 241, 234, 0.3);
background: transparent;
color: var(--color-secondary);
cursor: pointer;
transition: all var(--t-base);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.hero-prev:hover,
.hero-next:hover {
background: var(--color-secondary);
color: var(--color-primary);
border-color: var(--color-secondary);
}
.hero-dots {
display: flex;
gap: 0.5rem;
align-items: center;
padding: 0 1rem;
}
.hero-dot {
width: 32px;
height: 1px;
background: rgba(245, 241, 234, 0.35);
cursor: pointer;
transition: all var(--t-base);
}
.hero-dot.active {
background: var(--color-accent);
width: 56px;
}
.hero-scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: var(--color-text-on-dark-muted);
font-size: 0.625rem;
letter-spacing: 0.4em;
text-transform: uppercase;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.scroll-line {
width: 1px;
height: 32px;
background: linear-gradient(to bottom, var(--color-accent) 0%, transparent 100%);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.4; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.2); }
}
@media (max-width: 767.98px) {
.hero-slider { min-height: 560px; height: 80vh; }
.hero-controls { right: 1.5rem; bottom: 1.5rem; }
.hero-prev, .hero-next { width: 40px; height: 40px; }
.hero-title { font-size: 2.25rem; }
.hero-scroll-indicator { display: none; }
}
/* ====== Brand Story ====== */
.brand-story {
padding: var(--s-32) 0;
background: var(--color-secondary);
}
.story-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--s-20);
align-items: center;
}
.story-text {
max-width: 620px;
}
.story-h {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.15;
margin-bottom: 1.5rem;
font-style: italic;
}
.story-p {
font-size: 1rem;
line-height: 1.85;
color: var(--color-text);
margin-bottom: 1.5rem;
}
.story-numbers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-6);
padding-left: var(--s-8);
border-left: 1px solid var(--color-line);
}
.num-item {
text-align: center;
padding: var(--s-6) 0;
}
.num {
display: block;
font-family: var(--font-serif);
font-size: 3rem;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
font-weight: 400;
}
.num-label {
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-text-muted);
}
@media (max-width: 767.98px) {
.story-grid { grid-template-columns: 1fr; gap: var(--s-12); }
.story-numbers { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-line); padding-top: var(--s-6); }
.num { font-size: 2.25rem; }
}
/* ====== Collections Section ====== */
.collections-section {
padding: var(--s-24) 0;
background: var(--color-secondary-soft);
}
.collections-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.collection-card {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
background: var(--color-primary);
color: var(--color-secondary);
display: block;
}
.coll-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform var(--t-slow);
}
.collection-card:hover .coll-img { transform: scale(1.06); }
.coll-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 10, 10, 0.1) 0%, rgba(10, 10, 10, 0.7) 100%);
}
.coll-content {
position: relative;
z-index: 2;
padding: var(--s-8);
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: center;
}
.coll-eyebrow {
color: var(--color-accent);
font-size: 0.6875rem;
letter-spacing: 0.4em;
text-transform: uppercase;
margin-bottom: 0.75rem;
display: inline-flex;
justify-content: center;
gap: 0.5rem;
}
.coll-eyebrow::before,
.coll-eyebrow::after {
content: '';
width: 28px;
height: 1px;
background: var(--color-accent);
}
.coll-name {
color: var(--color-secondary);
font-size: 2rem;
margin: 0.5rem 0;
font-style: italic;
}
.coll-sub {
color: var(--color-text-on-dark-muted);
font-size: 0.8125rem;
margin-bottom: 1.5rem;
}
.coll-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--color-secondary);
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
transition: color var(--t-fast);
}
.collection-card:hover .coll-link { color: var(--color-accent); }
.coll-link i { transition: transform var(--t-base); }
.collection-card:hover .coll-link i { transform: translateX(4px); }
@media (max-width: 767.98px) {
.collections-grid { grid-template-columns: 1fr; }
.collection-card { aspect-ratio: 4 / 5; }
}
/* ====== Product Section ====== */
.product-section {
padding: var(--s-24) 0;
}
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-6) var(--s-4);
}
.product-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.product-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991.98px) {
.product-grid, .product-grid-4 { grid-template-columns: repeat(2, 1fr); }
.product-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.product-grid, .product-grid-3, .product-grid-4 { grid-template-columns: 1fr; }
}
/* ====== Product Card ====== */
.product-card {
position: relative;
background: transparent;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.pc-media {
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.pc-img-front,
.pc-img-back {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity var(--t-base), transform var(--t-base);
}
.pc-img-back {
opacity: 0;
}
.product-card:hover .pc-img-front { opacity: 0; }
.product-card:hover .pc-img-back { opacity: 1; transform: scale(1.04); }
.pc-badges {
position: absolute;
top: var(--s-4);
left: var(--s-4);
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 3;
}
.pc-badge {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 5px 10px;
background: var(--color-secondary);
color: var(--color-primary);
}
.pc-badge-sale { background: var(--color-accent); color: var(--color-primary); }
.pc-badge-best { background: var(--color-primary); color: var(--color-secondary); }
.pc-wishlist {
position: absolute;
top: var(--s-4);
right: var(--s-4);
width: 38px;
height: 38px;
background: rgba(245, 241, 234, 0.9);
border: none;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--t-fast);
z-index: 3;
color: var(--color-primary);
}
.pc-wishlist:hover,
.pc-wishlist.active {
background: var(--color-primary);
color: var(--color-accent);
}
.pc-quick {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: var(--color-primary);
color: var(--color-secondary);
padding: 0.85rem;
text-align: center;
font-size: 0.6875rem;
letter-spacing: 0.28em;
text-transform: uppercase;
transform: translateY(100%);
transition: transform var(--t-base);
border: none;
width: 100%;
cursor: pointer;
}
.product-card:hover .pc-quick { transform: translateY(0); }
.pc-body {
padding: var(--s-4) 0 0;
text-align: center;
}
.pc-collection {
font-size: 0.6875rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-accent-deep);
margin-bottom: 0.5rem;
}
.pc-name {
font-family: var(--font-serif);
font-size: 1rem;
margin-bottom: 0.5rem;
color: var(--color-primary);
font-weight: 500;
}
.pc-name a:hover { color: var(--color-accent-deep); }
.pc-price {
font-size: 0.875rem;
color: var(--color-text);
font-weight: 500;
}
.pc-old {
text-decoration: line-through;
color: var(--color-text-muted);
margin-left: 0.5rem;
font-weight: 400;
}
.pc-now { color: var(--color-primary); }
.color-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--color-line);
display: inline-block;
margin: 0 2px;
}
/* ====== Editorial Split ====== */
.editorial-split {
background: var(--color-primary);
color: var(--color-text-on-dark);
overflow: hidden;
}
.editorial-banner {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 540px;
}
.editorial-image {
background-size: cover;
background-position: center;
}
.editorial-content {
padding: var(--s-20) var(--s-16);
display: flex;
flex-direction: column;
justify-content: center;
}
.editorial-content .eyebrow { color: var(--color-accent); }
.editorial-content h2 {
color: var(--color-secondary);
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1.5rem;
line-height: 1.1;
}
.editorial-content p {
color: var(--color-text-on-dark-muted);
max-width: 480px;
margin-bottom: 2rem;
}
@media (max-width: 991.98px) {
.editorial-banner { grid-template-columns: 1fr; }
.editorial-image { min-height: 320px; }
.editorial-content { padding: var(--s-12) var(--s-6); }
}
/* ====== Instagram Section ====== */
.instagram-section {
padding: var(--s-24) 0 var(--s-12);
background: var(--color-secondary);
}
.instagram-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2px;
}
.ig-item {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--color-secondary-deep);
display: block;
}
.ig-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-slow);
}
.ig-item:hover img { transform: scale(1.08); }
.ig-item::after {
content: '';
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.45);
opacity: 0;
transition: opacity var(--t-base);
}
.ig-item:hover::after { opacity: 1; }
.ig-icon {
position: absolute;
inset: 0;
margin: auto;
width: 32px;
height: 32px;
color: var(--color-secondary);
font-size: 1.5rem;
z-index: 2;
opacity: 0;
transition: opacity var(--t-base);
display: flex;
align-items: center;
justify-content: center;
}
.ig-item:hover .ig-icon { opacity: 1; }
@media (max-width: 767.98px) {
.instagram-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ====== Testimonials ====== */
.testimonials-section {
padding: var(--s-24) 0;
background: var(--color-secondary-soft);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
margin-top: var(--s-12);
}
.testimonial-card {
background: var(--color-secondary);
padding: var(--s-8);
text-align: center;
border: 1px solid var(--color-line);
transition: all var(--t-base);
}
.testimonial-card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
}
.t-stars {
color: var(--color-accent);
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.t-text {
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
line-height: 1.7;
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.t-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 0.25rem;
}
.t-role {
font-size: 0.6875rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-accent-deep);
}
.t-author {
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-accent-deep);
font-weight: 500;
}
@media (max-width: 991.98px) {
.testimonials-grid { grid-template-columns: 1fr; }
}
/* ====== Journal / Blog ====== */
.journal-section {
padding: var(--s-24) 0;
background: var(--color-secondary);
}
.journal-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--s-8);
}
.journal-feature {
margin-bottom: var(--s-12);
}
.journal-feature .jf-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
margin-bottom: var(--s-5);
}
.jf-body .journal-meta {
margin-bottom: 1rem;
}
.journal-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.25;
margin-bottom: 1rem;
font-style: italic;
}
.jf-date {
font-size: 0.75rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.75rem;
display: block;
}
.journal-meta {
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-accent-deep);
margin-bottom: 0.75rem;
}
.journal-excerpt {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: 1.5rem;
}
.journal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-6);
}
.journal-card {
background: transparent;
text-decoration: none;
color: inherit;
}
.journal-img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
margin-bottom: var(--s-4);
transition: transform var(--t-slow);
}
.journal-card:hover .journal-img { transform: scale(1.04); }
.journal-list {
display: flex;
flex-direction: column;
gap: var(--s-6);
}
.jcat-list {
list-style: none;
padding: 0;
margin: 0;
}
.jcat-list li {
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-line-soft);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8125rem;
}
.jcat-list a:hover { color: var(--color-accent-deep); }
@media (max-width: 991.98px) {
.journal-layout { grid-template-columns: 1fr; }
.journal-grid { grid-template-columns: 1fr; }
}
/* ====== Footer ====== */
.site-footer {
background: var(--color-primary);
color: var(--color-text-on-dark);
padding: var(--s-24) 0 var(--s-8);
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.footer-newsletter {
text-align: center;
padding-bottom: var(--s-16);
border-bottom: 1px solid rgba(245, 241, 234, 0.08);
margin-bottom: var(--s-16);
}
.footer-newsletter h3 {
color: var(--color-secondary);
font-size: 2.25rem;
margin-bottom: 0.75rem;
font-style: italic;
}
.footer-sub {
color: var(--color-text-on-dark-muted);
max-width: 520px;
margin: 0 auto var(--s-8);
}
.newsletter-form {
max-width: 480px;
margin: 0 auto;
display: flex;
border: 1px solid rgba(245, 241, 234, 0.2);
}
.newsletter-form input {
flex: 1;
background: transparent;
border: 0;
padding: 1rem 1.5rem;
color: var(--color-secondary);
font-family: var(--font-sans);
font-size: 0.8125rem;
outline: none;
}
.newsletter-form input::placeholder { color: var(--color-text-on-dark-muted); }
.newsletter-form button {
background: var(--color-accent);
color: var(--color-primary);
border: 0;
padding: 0 var(--s-6);
font-size: 0.6875rem;
letter-spacing: 0.28em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--t-fast);
font-weight: 500;
}
.newsletter-form button:hover { background: var(--color-accent-deep); }
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--s-12);
margin-bottom: var(--s-16);
}
.f-col h5 {
color: var(--color-secondary);
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
margin-bottom: var(--s-5);
font-weight: 600;
}
.f-col ul { list-style: none; padding: 0; margin: 0; }
.f-col li {
margin-bottom: 0.75rem;
font-size: 0.8125rem;
color: var(--color-text-on-dark-muted);
}
.f-col li a:hover { color: var(--color-accent); }
.f-brand {
font-family: var(--font-serif);
font-size: 1.6rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: var(--s-4);
}
.f-desc {
color: var(--color-text-on-dark-muted);
font-size: 0.8125rem;
line-height: 1.7;
margin-bottom: var(--s-6);
max-width: 320px;
}
.f-socials {
display: flex;
gap: 0.75rem;
}
.f-socials a {
width: 38px;
height: 38px;
border: 1px solid rgba(245, 241, 234, 0.18);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
transition: all var(--t-fast);
}
.f-socials a:hover {
background: var(--color-accent);
color: var(--color-primary);
border-color: var(--color-accent);
}
.footer-bottom {
border-top: 1px solid rgba(245, 241, 234, 0.08);
padding-top: var(--s-6);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--s-4);
font-size: 0.6875rem;
color: var(--color-text-on-dark-muted);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.footer-tag { color: var(--color-text-on-dark-muted); }
@media (max-width: 991.98px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .footer-grid { grid-template-columns: 1fr; } }
/* ====== WhatsApp FAB ====== */
.wa-float {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 56px;
height: 56px;
background: #25d366;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
box-shadow: var(--shadow-md);
z-index: 99;
transition: all var(--t-base);
}
.wa-float:hover {
transform: translateY(-4px) scale(1.05);
color: #fff;
background: #20bd5a;
}
/* ====== Page Header / Hero ====== */
.page-header {
background: var(--color-secondary-deep);
padding: var(--s-16) 0;
text-align: center;
border-bottom: 1px solid var(--color-line);
}
.page-h {
font-size: clamp(2.25rem, 5vw, 3.5rem);
margin-bottom: 0.75rem;
font-style: italic;
}
.page-sub {
color: var(--color-text-muted);
max-width: 580px;
margin: 0 auto;
}
.breadcrumb-bar {
background: var(--color-secondary);
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-line);
font-size: 0.6875rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.breadcrumb-luxe a:hover { color: var(--color-accent-deep); }
/* ====== Shop Page ====== */
.shop-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--s-8);
padding: var(--s-12) 0;
}
@media (max-width: 991.98px) {
.shop-layout { grid-template-columns: 1fr; gap: var(--s-6); }
}
.shop-sidebar {
position: sticky;
top: calc(var(--header-height) + 20px);
align-self: start;
max-height: calc(100vh - var(--header-height) - 40px);
overflow-y: auto;
}
.shop-filter-toggle {
display: none;
background: var(--color-primary);
color: var(--color-secondary);
border: 0;
padding: 0.75rem 1.5rem;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
width: 100%;
margin-bottom: 1rem;
}
@media (max-width: 991.98px) {
.shop-filter-toggle { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.filter-panel { display: none; }
.filter-panel.is-open { display: block; }
}
.filter-panel {
padding: var(--s-4) 0;
}
.filter-group {
border-bottom: 1px solid var(--color-line);
padding: var(--s-5) 0;
}
.filter-group:first-child { padding-top: 0; }
.filter-group h5 {
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: var(--s-4);
color: var(--color-primary);
}
.filter-list {
list-style: none;
padding: 0;
margin: 0;
}
.filter-list li a {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 0.8125rem;
color: var(--color-text);
transition: color var(--t-fast);
}
.filter-list li a:hover,
.filter-list li a.active {
color: var(--color-accent-deep);
font-weight: 600;
}
.filter-list li a span { color: var(--color-text-muted); font-size: 0.75rem; }
.f-input {
width: 100%;
border: 1px solid var(--color-line);
background: transparent;
padding: 0.6rem 0.85rem;
font-size: 0.8125rem;
font-family: var(--font-sans);
color: var(--color-primary);
outline: none;
transition: border-color var(--t-fast);
}
.f-input:focus { border-color: var(--color-primary); }
.color-swatches {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.swatch {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
position: relative;
transition: border-color var(--t-fast);
}
.swatch:hover,
.swatch input:checked + span {
border-color: var(--color-accent);
}
.size-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.size-btn {
min-width: 44px;
height: 38px;
padding: 0 0.75rem;
border: 1px solid var(--color-line);
background: transparent;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
color: var(--color-primary);
cursor: pointer;
transition: all var(--t-fast);
letter-spacing: 0.08em;
display: inline-flex;
align-items: center;
justify-content: center;
}
.size-btn:hover,
.size-btn input:checked + span {
border-color: var(--color-primary);
}
.price-range {
display: flex;
gap: 0.5rem;
align-items: center;
}
.price-range input { flex: 1; }
.shop-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: var(--s-6);
margin-bottom: var(--s-8);
border-bottom: 1px solid var(--color-line);
flex-wrap: wrap;
gap: var(--s-4);
}
.result-count {
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.sort-select {
border: 1px solid var(--color-line);
background: transparent;
padding: 0.6rem 1rem;
font-size: 0.8125rem;
color: var(--color-primary);
font-family: var(--font-sans);
cursor: pointer;
}
.empty-state {
text-align: center;
padding: var(--s-20) var(--s-4);
grid-column: 1 / -1;
}
.empty-state i {
font-size: 3.5rem;
color: var(--color-accent);
margin-bottom: 1.5rem;
display: block;
}
.empty-state h3 { margin-bottom: 0.75rem; }
.empty-state p { color: var(--color-text-muted); margin-bottom: 1.5rem; }
.luxury-pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: var(--s-16);
}
.lp-link {
min-width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-line);
color: var(--color-primary);
font-size: 0.75rem;
transition: all var(--t-fast);
text-decoration: none;
}
.lp-link:hover {
background: var(--color-primary);
color: var(--color-secondary);
}
.lp-link.active {
background: var(--color-primary);
color: var(--color-secondary);
border-color: var(--color-primary);
}
/* ============================================
PRODUCT DETAIL
============================================ */
.product-detail {
padding: var(--s-12) 0 var(--s-20);
}
.pd-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-12);
align-items: start;
}
@media (max-width: 991px) {
.pd-layout { grid-template-columns: 1fr; gap: var(--s-8); }
}
.product-gallery {
position: sticky;
top: 100px;
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--s-4);
}
@media (max-width: 767px) {
.product-gallery { grid-template-columns: 1fr; }
}
.pg-thumbs {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 600px;
overflow-y: auto;
}
@media (max-width: 767px) {
.pg-thumbs { flex-direction: row; max-height: none; }
}
.pg-thumb {
width: 80px;
height: 100px;
border: 1px solid var(--color-line);
cursor: pointer;
overflow: hidden;
transition: border-color var(--t-fast);
background: var(--color-bg-soft);
}
.pg-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pg-thumb:hover,
.pg-thumb.active {
border-color: var(--color-primary);
}
.pg-main {
position: relative;
background: var(--color-bg-soft);
aspect-ratio: 1 / 1;
overflow: hidden;
}
.pg-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--t-base);
}
.pg-slide.active { opacity: 1; }
.pg-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pg-zoom-hint {
position: absolute;
bottom: 1rem;
right: 1rem;
background: rgba(255, 255, 255, 0.9);
padding: 0.5rem 0.75rem;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 0.4rem;
}
.product-info {
padding-left: var(--s-4);
}
@media (max-width: 991px) {
.product-info { padding-left: 0; }
}
.pi-collection {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.75rem;
display: block;
}
.pi-name {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.1;
margin-bottom: 1rem;
color: var(--color-primary);
}
.pi-rating {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.pi-rating .stars { color: var(--color-accent); font-size: 0.85rem; letter-spacing: 2px; }
.pi-rating .review-count { font-size: 0.8rem; color: var(--color-text-muted); }
.pi-price {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-line);
}
.pi-price .now {
font-family: var(--font-serif);
font-size: 1.75rem;
color: var(--color-primary);
}
.pi-price .old {
font-size: 1rem;
color: var(--color-text-muted);
text-decoration: line-through;
}
.pi-price .discount {
background: var(--color-primary);
color: var(--color-secondary);
font-size: 0.65rem;
padding: 0.2rem 0.5rem;
letter-spacing: 0.1em;
}
.pi-desc {
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 2rem;
}
.variant-group {
margin-bottom: 1.5rem;
}
.variant-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0.75rem;
color: var(--color-primary);
}
.size-guide-link {
color: var(--color-text-muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.color-swatches {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.color-swatches .swatch {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--color-line);
cursor: pointer;
transition: all var(--t-fast);
position: relative;
}
.color-swatches .swatch.active {
box-shadow: 0 0 0 2px var(--color-secondary), 0 0 0 3px var(--color-primary);
}
.size-buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.size-btn {
min-width: 44px;
height: 44px;
padding: 0 0.75rem;
border: 1px solid var(--color-line);
background: transparent;
color: var(--color-primary);
font-size: 0.85rem;
cursor: pointer;
transition: all var(--t-fast);
}
.size-btn:hover { border-color: var(--color-primary); }
.size-btn.active {
background: var(--color-primary);
color: var(--color-secondary);
border-color: var(--color-primary);
}
.size-btn.disabled {
color: var(--color-text-muted);
text-decoration: line-through;
cursor: not-allowed;
}
.qty-control {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-line);
height: 48px;
}
.qty-btn {
width: 40px;
height: 100%;
background: transparent;
border: none;
color: var(--color-primary);
cursor: pointer;
font-size: 1rem;
transition: background var(--t-fast);
}
.qty-btn:hover { background: var(--color-bg-soft); }
.qty-input {
width: 50px;
height: 100%;
border: none;
text-align: center;
font-size: 0.9rem;
background: transparent;
color: var(--color-primary);
-moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pi-actions {
display: flex;
gap: 0.75rem;
margin-bottom: 2rem;
}
.pi-actions .btn-luxe-solid { flex: 1; }
.pi-meta {
border-top: 1px solid var(--color-line);
padding-top: 1.5rem;
font-size: 0.8rem;
color: var(--color-text-muted);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pi-meta-row { display: flex; gap: 0.5rem; }
.pi-meta-row strong { color: var(--color-primary); font-weight: 500; min-width: 80px; }
/* Product Accordion */
.product-accordion {
margin-top: var(--s-12);
border-top: 1px solid var(--color-line);
}
.accordion-item {
border-bottom: 1px solid var(--color-line);
}
.accordion-head {
width: 100%;
background: transparent;
border: none;
padding: 1.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--color-primary);
cursor: pointer;
}
.accordion-head i { transition: transform var(--t-base); }
.accordion-item.open .accordion-head i { transform: rotate(180deg); }
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height var(--t-base);
}
.accordion-item.open .accordion-body { max-height: 1000px; }
.accordion-body-inner {
padding: 0 0 1.5rem;
color: var(--color-text-muted);
line-height: 1.7;
}
.size-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
.size-table th,
.size-table td {
border: 1px solid var(--color-line);
padding: 0.75rem;
text-align: center;
font-size: 0.85rem;
}
.size-table th {
background: var(--color-bg-soft);
font-weight: 500;
letter-spacing: 0.1em;
}
#sizeGuideModal .modal-dialog {
max-width: 760px;
z-index: 12010 !important;
}
#sizeGuideModal,
#sizeGuideModal .modal-dialog,
#sizeGuideModal .modal-content.luxury-modal,
#sizeGuideModal .modal-header,
#sizeGuideModal .modal-body {
opacity: 1 !important;
}
#sizeGuideModal {
background: rgba(8, 8, 10, 0.24);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#sizeGuideModal.show {
display: block;
}
#sizeGuideModal .modal-content.luxury-modal {
z-index: 12020 !important;
border-radius: 24px;
overflow: hidden;
background: #0f1013 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.size-guide-header {
align-items: start;
padding: 1.1rem 1.2rem;
}
.size-guide-heading {
display: grid;
gap: 0.22rem;
}
.size-guide-header .eyebrow {
margin: 0;
color: rgba(255,255,255,0.55) !important;
}
.size-guide-header .eyebrow::before {
display: none;
}
.size-guide-header .modal-title {
margin: 0;
font-size: 1.08rem;
font-weight: 700 !important;
}
.size-guide-body {
padding: 1.2rem !important;
background: #0f1013;
}
.size-guide-content {
color: rgba(255,255,255,0.9);
}
.size-guide-content > :first-child {
margin-top: 0;
}
.size-guide-content > :last-child {
margin-bottom: 0;
}
.size-guide-table-wrap {
overflow-x: auto;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
}
#sizeGuideModal .size-table {
margin-top: 0;
min-width: 560px;
}
#sizeGuideModal .size-table th,
#sizeGuideModal .size-table td {
border-color: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.88);
padding: 0.85rem 0.95rem;
}
#sizeGuideModal .size-table th {
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.68);
font-size: 0.72rem;
font-weight: 700;
}
#sizeGuideModal .btn-close {
opacity: 0.9;
filter: none;
}
#sizeGuideModal .btn-close:focus {
box-shadow: none;
}
/* Rating input */
.rating-input {
display: inline-flex;
flex-direction: row-reverse;
gap: 0.25rem;
}
.rating-input input { display: none; }
.rating-input label {
font-size: 1.5rem;
color: var(--color-line);
cursor: pointer;
transition: color var(--t-fast);
}
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
color: var(--color-accent);
}
/* ============================================
REVIEWS
============================================ */
.reviews-section {
padding: var(--s-16) 0;
border-top: 1px solid var(--color-line);
}
.reviews-summary {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--s-8);
margin-bottom: var(--s-10);
padding-bottom: var(--s-8);
border-bottom: 1px solid var(--color-line);
}
@media (max-width: 767px) {
.reviews-summary { grid-template-columns: 1fr; }
}
.rs-score {
text-align: center;
padding: var(--s-4);
background: var(--color-bg-soft);
}
.rs-num {
font-family: var(--font-serif);
font-size: 3.5rem;
line-height: 1;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.rs-stars {
color: var(--color-accent);
margin-bottom: 0.5rem;
letter-spacing: 3px;
}
.rs-count {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.rs-dist { display: flex; flex-direction: column; gap: 0.5rem; }
.rs-row {
display: grid;
grid-template-columns: 50px 1fr 50px;
align-items: center;
gap: 1rem;
font-size: 0.8rem;
}
.rs-row .bar {
height: 8px;
background: var(--color-line);
overflow: hidden;
}
.rs-row .bar-fill {
height: 100%;
background: var(--color-accent);
}
.rs-list {
display: flex;
flex-direction: column;
gap: var(--s-6);
margin-bottom: var(--s-8);
}
.review-card {
padding: var(--s-6);
background: var(--color-bg-soft);
border-left: 3px solid var(--color-accent);
}
.rv-head {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 1rem;
}
.rv-stars { color: var(--color-accent); letter-spacing: 2px; font-size: 0.85rem; }
.rv-title {
font-family: var(--font-serif);
font-size: 1.1rem;
margin: 0.5rem 0;
color: var(--color-primary);
}
.rv-text {
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 1rem;
}
.rv-author {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
}
.rv-date {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-left: 0.75rem;
}
.review-form-wrap {
background: var(--color-bg-soft);
padding: var(--s-8);
margin-top: var(--s-6);
}
.review-form h3 {
font-family: var(--font-serif);
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.review-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 600px) {
.review-form .form-row { grid-template-columns: 1fr; }
}
/* ============================================
CART DRAWER & PAGE
============================================ */
.cart-drawer {
position: fixed;
top: 0;
right: 0;
width: 440px;
max-width: 100vw;
height: 100vh;
background: var(--color-secondary);
z-index: 9999;
box-shadow: -10px 0 40px rgba(0,0,0,0.15);
transform: translateX(100%);
transition: transform var(--t-base);
display: flex;
flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: opacity var(--t-base), visibility var(--t-base);
z-index: 9998;
}
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-head {
padding: 1.5rem;
border-bottom: 1px solid var(--color-line);
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-head h3 {
font-family: var(--font-serif);
font-size: 1.3rem;
margin: 0;
}
.cart-close {
background: transparent;
border: none;
font-size: 1.25rem;
color: var(--color-primary);
cursor: pointer;
width: 36px;
height: 36px;
}
.cart-items {
flex: 1;
overflow-y: auto;
padding: 1rem 1.5rem;
}
.cart-item {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 1rem;
padding: 1.25rem 0;
border-bottom: 1px solid var(--color-line);
}
.ci-img {
width: 80px;
height: 100px;
background: var(--color-bg-soft);
overflow: hidden;
}
.ci-img img { width: 100%; height: 100%; object-fit: cover; }
.ci-body { display: flex; flex-direction: column; gap: 0.25rem; }
.ci-name {
font-family: var(--font-serif);
font-size: 0.95rem;
color: var(--color-primary);
text-decoration: none;
}
.ci-meta {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.ci-sku {
font-size: 0.7rem;
color: var(--color-text-muted);
letter-spacing: 0.05em;
}
.ci-price {
font-size: 0.9rem;
color: var(--color-primary);
font-weight: 500;
}
.ci-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-line);
height: 28px;
margin-top: 0.5rem;
}
.ci-qty button {
width: 28px;
height: 100%;
background: transparent;
border: none;
color: var(--color-primary);
cursor: pointer;
}
.ci-qty .val {
min-width: 28px;
text-align: center;
font-size: 0.8rem;
}
.ci-remove {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 0.25rem;
align-self: start;
transition: color var(--t-fast);
}
.ci-remove:hover { color: #c0392b; }
.cart-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--color-text-muted);
}
.cart-empty i {
font-size: 3rem;
color: var(--color-accent);
margin-bottom: 1rem;
display: block;
}
.cart-foot {
padding: 1.5rem;
border-top: 1px solid var(--color-line);
background: var(--color-bg-soft);
}
.cart-subtotal {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
font-size: 1rem;
color: var(--color-primary);
}
.cart-subtotal strong {
font-family: var(--font-serif);
font-size: 1.3rem;
}
.cart-actions-row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Cart page */
.cart-section { padding: var(--s-12) 0 var(--s-20); }
.cart-table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--s-8);
}
.cart-table th {
text-align: left;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 1rem;
border-bottom: 1px solid var(--color-line);
color: var(--color-primary);
}
.cart-table td {
padding: 1.5rem 1rem;
border-bottom: 1px solid var(--color-line);
vertical-align: middle;
}
.cart-loading {
text-align: center;
padding: 4rem 1rem;
color: var(--color-text-muted);
}
/* ============================================
CHECKOUT
============================================ */
.checkout-grid {
display: grid;
grid-template-columns: 1fr 420px;
gap: var(--s-10);
padding: var(--s-10) 0;
}
@media (max-width: 991px) {
.checkout-grid { grid-template-columns: 1fr; }
}
.checkout-head {
margin-bottom: var(--s-6);
}
.checkout-head h1 {
font-family: var(--font-serif);
font-size: 2rem;
margin-bottom: 0.5rem;
}
.checkout-head p {
color: var(--color-text-muted);
font-size: 0.9rem;
}
.checkout-left { min-width: 0; }
.checkout-right { position: sticky; top: 100px; align-self: start; }
.co-block {
margin-bottom: var(--s-6);
padding: var(--s-6);
background: var(--color-bg-soft);
}
.co-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.co-head h3 {
font-family: var(--font-serif);
font-size: 1.15rem;
margin: 0;
}
.co-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (max-width: 600px) {
.co-grid { grid-template-columns: 1fr; }
}
.co-grid-2 { grid-template-columns: 1fr 1fr; }
.co-item.full { grid-column: 1 / -1; }
.co-title {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 1rem 0 0.5rem;
}
.co-items {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
max-height: 320px;
overflow-y: auto;
}
.co-signin {
text-align: center;
margin-bottom: var(--s-4);
padding: 1rem;
background: var(--color-secondary);
border: 1px dashed var(--color-line);
font-size: 0.9rem;
}
.co-signin a {
color: var(--color-primary);
text-decoration: underline;
margin-left: 0.25rem;
}
.co-summary {
padding: var(--s-6);
background: var(--color-bg-soft);
}
.courier-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
.courier-tab {
padding: 1rem 0.5rem;
border: 1px solid var(--color-line);
background: transparent;
text-align: center;
cursor: pointer;
transition: all var(--t-fast);
}
.courier-tab.active {
background: var(--color-primary);
color: var(--color-secondary);
border-color: var(--color-primary);
}
.courier-tab .ct-name {
font-size: 0.85rem;
font-weight: 500;
display: block;
}
.courier-tab .ct-eta {
font-size: 0.7rem;
color: var(--color-text-muted);
display: block;
margin-top: 0.25rem;
}
.courier-tab.active .ct-eta { color: var(--color-secondary); opacity: 0.7; }
.courier-tab .ct-price {
font-family: var(--font-serif);
font-size: 0.95rem;
margin-top: 0.5rem;
display: block;
}
.payment-methods {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pm {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--color-line);
cursor: pointer;
transition: border-color var(--t-fast);
background: transparent;
text-align: left;
width: 100%;
}
.pm:hover { border-color: var(--color-primary); }
.pm input { margin: 0; accent-color: var(--color-primary); }
.pm.active { border-color: var(--color-primary); background: var(--color-secondary); }
.pm-info { flex: 1; }
.pm-name { font-size: 0.9rem; font-weight: 500; display: block; }
.pm-desc { font-size: 0.75rem; color: var(--color-text-muted); display: block; margin-top: 0.2rem; }
.pm-icon { font-size: 1.25rem; color: var(--color-primary); }
.ck-secure {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-muted);
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.voucher-applied {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--color-secondary);
border: 1px dashed var(--color-accent);
margin-bottom: 0.75rem;
}
.v-tag {
background: var(--color-accent);
color: var(--color-primary);
padding: 0.2rem 0.5rem;
font-size: 0.7rem;
letter-spacing: 0.1em;
font-weight: 600;
}
.v-name { flex: 1; font-size: 0.85rem; }
.v-remove {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
}
.voucher-form {
display: flex;
gap: 0.5rem;
}
.voucher-form input {
flex: 1;
padding: 0.75rem;
border: 1px solid var(--color-line);
font-size: 0.85rem;
background: transparent;
}
.co-summary h3 {
font-family: var(--font-serif);
font-size: 1.15rem;
margin-bottom: 1.5rem;
}
.os-row {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 0.9rem;
}
.os-row.total {
border-top: 1px solid var(--color-line);
margin-top: 0.75rem;
padding-top: 1rem;
font-size: 1.05rem;
}
.os-row.total strong {
font-family: var(--font-serif);
font-size: 1.3rem;
}
.os-divider {
height: 1px;
background: var(--color-line);
margin: 0.75rem 0;
}
/* ============================================
ACCOUNT
============================================ */
.account-layout {
padding: var(--s-10) 0 var(--s-20);
}
.account-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--s-10);
}
@media (max-width: 991px) {
.account-grid { grid-template-columns: 1fr; }
}
.account-sidebar {
background: var(--color-bg-soft);
padding: var(--s-6);
height: fit-content;
position: sticky;
top: 100px;
}
.acc-avatar {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: var(--s-6);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--color-line);
}
.acc-avatar-img {
width: 60px;
height: 60px;
background: var(--color-primary);
color: var(--color-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 1.5rem;
}
.acc-user-name {
font-family: var(--font-serif);
font-size: 1.1rem;
margin: 0 0 0.2rem;
}
.acc-user-email {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.acc-nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.acc-nav a {
padding: 0.75rem 1rem;
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.05em;
border-left: 2px solid transparent;
transition: all var(--t-fast);
display: flex;
align-items: center;
gap: 0.75rem;
}
.acc-nav a:hover { color: var(--color-primary); background: var(--color-secondary); }
.acc-nav a.active {
color: var(--color-primary);
border-left-color: var(--color-primary);
background: var(--color-secondary);
font-weight: 500;
}
.acc-nav a i { width: 16px; }
.account-main { min-width: 0; }
.acc-head {
margin-bottom: var(--s-6);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--color-line);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.acc-head h1 {
font-family: var(--font-serif);
font-size: 1.75rem;
margin: 0;
}
.acc-block {
background: var(--color-bg-soft);
padding: var(--s-6);
margin-bottom: var(--s-4);
}
.acc-block h3 {
font-family: var(--font-serif);
font-size: 1.15rem;
margin-bottom: 1.5rem;
}
.acc-form {
display: grid;
gap: 1rem;
}
.acc-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 600px) {
.acc-form .form-row { grid-template-columns: 1fr; }
}
.acc-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: var(--s-6);
}
.acc-stat {
background: var(--color-bg-soft);
padding: var(--s-6);
text-align: center;
}
.acc-stat-val {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--color-primary);
display: block;
}
.acc-stat-label {
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: 0.5rem;
display: block;
}
.acc-orders {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.acc-order-row {
display: grid;
grid-template-columns: 1fr 120px 100px 80px;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--color-secondary);
border: 1px solid var(--color-line);
transition: border-color var(--t-fast);
text-decoration: none;
color: inherit;
}
@media (max-width: 767px) {
.acc-order-row { grid-template-columns: 1fr; gap: 0.5rem; }
}
.acc-order-row:hover { border-color: var(--color-primary); }
.aor-num {
font-size: 0.85rem;
color: var(--color-primary);
}
.aor-date { font-size: 0.75rem; color: var(--color-text-muted); }
.aor-status {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
text-align: center;
}
.aor-status.pending { background: #fdf6e3; color: #8b6b00; }
.aor-status.paid { background: #e8f5e9; color: #2e7d32; }
.aor-status.shipped { background: #e3f2fd; color: #1565c0; }
.aor-status.done { background: #e8f5e9; color: #2e7d32; }
.aor-status.cancel { background: #fce4ec; color: #c2185b; }
.aor-total {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--color-primary);
text-align: right;
}
.acc-addresses {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.acc-addr-card {
padding: 1.25rem;
background: var(--color-secondary);
border: 1px solid var(--color-line);
}
.addr-toggle {
background: transparent;
border: none;
color: var(--color-primary);
cursor: pointer;
font-size: 0.8rem;
text-decoration: underline;
padding: 0;
}
.addr-card .addr-name { font-weight: 500; }
.addr-card .addr-detail { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.25rem; line-height: 1.6; }
.saved-addresses { margin-top: 1rem; }
/* Dashboard grid (admin) */
.dash-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-bottom: var(--s-8);
}
.ds-card {
background: var(--color-bg-soft);
padding: var(--s-6);
display: flex;
align-items: center;
gap: 1rem;
}
.ds-icon {
width: 50px;
height: 50px;
background: var(--color-primary);
color: var(--color-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.ds-val {
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--color-primary);
display: block;
line-height: 1;
}
.ds-label {
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: 0.5rem;
display: block;
}
.ds-body { font-size: 0.85rem; color: var(--color-text-muted); }
/* ============================================
ORDER DETAIL
============================================ */
.order-detail { padding: var(--s-10) 0 var(--s-20); }
.od-head {
display: flex;
justify-content: space-between;
align-items: start;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: var(--s-8);
padding-bottom: var(--s-6);
border-bottom: 1px solid var(--color-line);
}
.od-head h1 {
font-family: var(--font-serif);
font-size: 2rem;
margin-bottom: 0.5rem;
}
.od-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.od-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin-bottom: var(--s-8);
padding: var(--s-6);
background: var(--color-bg-soft);
}
.od-info-item .label {
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.5rem;
}
.od-info-item .val {
font-size: 0.95rem;
color: var(--color-primary);
}
.od-items {
background: var(--color-bg-soft);
padding: var(--s-6);
margin-bottom: var(--s-6);
}
.od-item {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--color-line);
align-items: center;
}
.od-item:last-child { border-bottom: none; }
.odi-img {
width: 80px;
height: 100px;
background: var(--color-secondary);
overflow: hidden;
}
.odi-img img { width: 100%; height: 100%; object-fit: cover; }
.odi-body { display: flex; flex-direction: column; gap: 0.25rem; }
.odi-name { font-family: var(--font-serif); font-size: 1rem; color: var(--color-primary); }
.odi-meta { font-size: 0.8rem; color: var(--color-text-muted); }
.odi-price {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--color-primary);
text-align: right;
}
.od-totals {
background: var(--color-bg-soft);
padding: var(--s-6);
}
.od-timeline {
background: var(--color-bg-soft);
padding: var(--s-6);
margin-top: var(--s-6);
}
.tl-step {
display: grid;
grid-template-columns: 24px 1fr;
gap: 1rem;
padding: 1rem 0;
position: relative;
}
.tl-step::before {
content: '';
position: absolute;
left: 11px;
top: 1rem;
bottom: -1rem;
width: 2px;
background: var(--color-line);
}
.tl-step:last-child::before { display: none; }
.tl-dot {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-line);
color: var(--color-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
z-index: 1;
position: relative;
}
.tl-step.done .tl-dot { background: var(--color-accent); }
.tl-step.active .tl-dot {
background: var(--color-primary);
box-shadow: 0 0 0 4px rgba(28, 28, 28, 0.1);
}
.tl-label {
font-size: 0.9rem;
color: var(--color-primary);
margin-bottom: 0.2rem;
}
.tl-step.pending .tl-label { color: var(--color-text-muted); }
.tl-time {
font-size: 0.75rem;
color: var(--color-text-muted);
}
/* Order list (smaller cards) */
.order-summary {
background: var(--color-bg-soft);
padding: var(--s-6);
}
.order-list { display: flex; flex-direction: column; gap: 0.75rem; }
.order-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 1rem;
padding: 1rem;
background: var(--color-secondary);
border: 1px solid var(--color-line);
align-items: center;
text-decoration: none;
color: inherit;
}
@media (max-width: 767px) {
.order-row { grid-template-columns: 1fr 1fr; }
}
.or-num { font-size: 0.85rem; color: var(--color-primary); font-weight: 500; }
.or-status {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
text-align: center;
justify-self: start;
}
.or-total { font-family: var(--font-serif); font-size: 0.95rem; color: var(--color-primary); text-align: right; }
.os-perks {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1rem 0;
}
.perk {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.perk i { color: var(--color-accent); width: 16px; }
.os-voucher {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.os-note {
font-size: 0.8rem;
color: var(--color-text-muted);
padding: 0.75rem;
background: var(--color-secondary);
border-left: 2px solid var(--color-accent);
margin-top: 1rem;
line-height: 1.6;
}
/* ============================================
AUTH PAGES
============================================ */
.auth-page { min-height: calc(100vh - 80px); }
.auth-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: calc(100vh - 80px);
}
@media (max-width: 991px) {
.auth-split { grid-template-columns: 1fr; }
.auth-visual { display: none; }
}
.auth-visual {
position: relative;
background: var(--color-bg-soft);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-12);
}
.auth-visual-overlay {
text-align: center;
color: var(--color-secondary);
background: rgba(0,0,0,0.4);
padding: var(--s-12);
max-width: 480px;
}
.auth-form {
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-12) var(--s-6);
}
.auth-form-wrap {
width: 100%;
max-width: 420px;
}
.auth-form-inner { width: 100%; }
.auth-brand {
font-family: var(--font-serif);
font-size: 1.5rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--s-8);
text-align: center;
display: block;
}
.auth-h {
font-family: var(--font-serif);
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--color-primary);
}
.auth-sub {
color: var(--color-text-muted);
margin-bottom: var(--s-8);
font-size: 0.95rem;
}
.auth-quote {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.5rem;
line-height: 1.4;
margin-bottom: 1.5rem;
}
.auth-quote-by {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.8;
}
.auth-footer {
margin-top: var(--s-6);
text-align: center;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.auth-footer a {
color: var(--color-primary);
text-decoration: underline;
margin-left: 0.25rem;
}
.auth-alert {
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.85rem;
border-left: 3px solid;
}
.auth-alert-error {
background: #fce4ec;
color: #c2185b;
border-color: #c2185b;
}
.auth-alert-success {
background: #e8f5e9;
color: #2e7d32;
border-color: #2e7d32;
}
/* ============================================
SUCCESS PAGE
============================================ */
.success-section {
padding: var(--s-20) 0;
text-align: center;
}
.success-wrap { max-width: 600px; margin: 0 auto; padding: 0 var(--s-4); }
.success-icon {
width: 80px;
height: 80px;
background: var(--color-accent);
color: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto var(--s-6);
}
.success-info {
margin-bottom: var(--s-8);
}
.success-info h1 {
font-family: var(--font-serif);
font-size: 2.25rem;
margin-bottom: 1rem;
}
.success-info p {
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 0.5rem;
}
.success-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================
TRACKING
============================================ */
.track-form { padding: var(--s-12) 0; }
.track-form-wrap {
max-width: 600px;
margin: 0 auto;
text-align: center;
padding: 0 var(--s-4);
}
.track-form-wrap h1 {
font-family: var(--font-serif);
font-size: 2rem;
margin-bottom: 1rem;
}
.track-form-wrap p {
color: var(--color-text-muted);
margin-bottom: var(--s-6);
}
.track-show {
max-width: 800px;
margin: 0 auto;
padding: var(--s-8) var(--s-4);
}
.track-info {
background: var(--color-bg-soft);
padding: var(--s-6);
margin-bottom: var(--s-6);
}
.track-history {
background: var(--color-bg-soft);
padding: var(--s-6);
}
.th-item {
display: grid;
grid-template-columns: 140px 1fr;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--color-line);
}
.th-item:last-child { border-bottom: none; }
.th-time {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.th-city {
font-size: 0.95rem;
color: var(--color-primary);
font-weight: 500;
margin-bottom: 0.25rem;
}
.th-desc {
font-size: 0.85rem;
color: var(--color-text-muted);
}
/* ============================================
ABOUT & CONTACT
============================================ */
.about-section {
padding: var(--s-12) 0;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-10);
align-items: center;
}
@media (max-width: 991px) {
.about-grid { grid-template-columns: 1fr; }
}
.about-text { max-width: 500px; }
.about-h {
font-family: var(--font-serif);
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--color-primary);
}
.about-text p {
color: var(--color-text-muted);
line-height: 1.8;
margin-bottom: 1rem;
}
.about-image {
aspect-ratio: 4 / 5;
background: var(--color-bg-soft);
overflow: hidden;
}
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--s-6);
margin-top: var(--s-12);
}
.about-value {
text-align: center;
padding: var(--s-6);
}
.about-value i {
font-size: 2rem;
color: var(--color-accent);
margin-bottom: 1rem;
display: block;
}
.about-value h4 {
font-family: var(--font-serif);
margin-bottom: 0.5rem;
}
.about-value p {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.6;
}
.contact-section { padding: var(--s-12) 0; }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--s-10);
}
@media (max-width: 991px) {
.contact-grid { grid-template-columns: 1fr; }
}
.contact-info { padding-right: var(--s-6); }
.contact-info h1 {
font-family: var(--font-serif);
font-size: 2.25rem;
margin-bottom: 1rem;
}
.contact-info p {
color: var(--color-text-muted);
margin-bottom: var(--s-6);
line-height: 1.7;
}
.contact-info ul {
list-style: none;
padding: 0;
margin: 0;
}
.contact-info ul li {
display: flex;
align-items: start;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-line);
}
.contact-info ul li i {
color: var(--color-accent);
width: 20px;
margin-top: 0.2rem;
}
.contact-info ul li span {
font-size: 0.9rem;
color: var(--color-text-muted);
}
.contact-info ul li strong {
display: block;
color: var(--color-primary);
margin-bottom: 0.2rem;
font-weight: 500;
}
.contact-form-wrap {
background: var(--color-bg-soft);
padding: var(--s-8);
}
/* ============================================
ADMIN PANEL
============================================ */
.admin-body {
background: var(--color-bg-soft);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.admin-wrap {
display: flex;
flex: 1;
min-height: calc(100vh - 60px);
}
.admin-sidebar {
width: 240px;
background: var(--color-primary);
color: var(--color-secondary);
flex-shrink: 0;
display: flex;
flex-direction: column;
}
@media (max-width: 991px) {
.admin-sidebar { position: fixed; left: -240px; top: 60px; bottom: 0; z-index: 100; transition: left var(--t-base); }
.admin-sidebar.open { left: 0; }
.admin-main { width: 100%; }
}
.sb-brand {
padding: 1.5rem;
font-family: var(--font-serif);
font-size: 1.2rem;
letter-spacing: 0.2em;
text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sb-nav {
flex: 1;
padding: 1rem 0;
overflow-y: auto;
}
.sb-nav a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 0.85rem;
transition: all var(--t-fast);
border-left: 3px solid transparent;
}
.sb-nav a:hover { background: rgba(255,255,255,0.05); color: var(--color-secondary); }
.sb-nav a.active {
background: rgba(255,255,255,0.08);
color: var(--color-secondary);
border-left-color: var(--color-accent);
}
.sb-nav i { width: 18px; text-align: center; }
.admin-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.admin-topbar {
height: 60px;
background: var(--color-secondary);
border-bottom: 1px solid var(--color-line);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--s-6);
}
.admin-topbar h1 {
font-family: var(--font-serif);
font-size: 1.25rem;
margin: 0;
}
.adm-toggle {
background: transparent;
border: none;
color: var(--color-primary);
cursor: pointer;
font-size: 1.25rem;
margin-right: 1rem;
display: none;
}
@media (max-width: 991px) {
.adm-toggle { display: inline-block; }
}
.admin-content {
padding: var(--s-6);
flex: 1;
}
.adm-card {
background: var(--color-secondary);
padding: var(--s-6);
border: 1px solid var(--color-line);
margin-bottom: var(--s-4);
}
.adm-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--color-line);
}
.adm-card-head h3 {
font-family: var(--font-serif);
font-size: 1.1rem;
margin: 0;
}
.adm-table {
width: 100%;
border-collapse: collapse;
}
.adm-table th,
.adm-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--color-line);
font-size: 0.85rem;
}
.adm-table th {
background: var(--color-bg-soft);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.adm-table tr:hover td { background: var(--color-bg-soft); }
.adm-badge {
display: inline-block;
padding: 0.2rem 0.5rem;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.adm-badge.success { background: #e8f5e9; color: #2e7d32; }
.adm-badge.warn { background: #fdf6e3; color: #8b6b00; }
.adm-badge.danger { background: #fce4ec; color: #c2185b; }
.adm-badge.info { background: #e3f2fd; color: #1565c0; }
.adm-actions {
display: flex;
gap: 0.4rem;
}
.adm-actions a,
.adm-actions button {
padding: 0.4rem 0.6rem;
border: 1px solid var(--color-line);
background: transparent;
color: var(--color-primary);
font-size: 0.75rem;
cursor: pointer;
text-decoration: none;
transition: all var(--t-fast);
}
.adm-actions a:hover,
.adm-actions button:hover {
background: var(--color-primary);
color: var(--color-secondary);
}
.adm-actions .danger { color: #c2185b; border-color: #c2185b; }
.adm-actions .danger:hover { background: #c2185b; color: white; }
.adm-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 600px) {
.adm-form-row { grid-template-columns: 1fr; }
}
.adm-form-row.full { grid-template-columns: 1fr; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 767px) {
.container { padding: 0 var(--s-4); }
:root {
--s-4: 1rem;
--s-6: 1.25rem;
--s-8: 1.5rem;
--s-10: 2rem;
--s-12: 2.5rem;
}
.hero-title { font-size: 2rem; }
.section-h { font-size: 1.75rem; }
.pi-name { font-size: 1.5rem; }
}
@media (max-width: 480px) {
.header-row { gap: 0.5rem; }
.nav-link { display: none; }
.header-actions .header-icon:not(.mobile-search):not(.header-cart):not(.mobile-toggle) { display: none !important; }
}
/* ============================================
SITE MAIN & GLOBAL UTILITIES
============================================ */
.site-main { min-height: 60vh; }
.theme-luxury { background: var(--color-secondary); color: var(--color-primary); }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 2rem; padding-bottom: 2rem; }
.py-3 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.text-muted { color: var(--color-text-muted) !important; }
.small { font-size: 0.85rem; }
.muted { color: var(--color-text-muted); }
.fade { transition: opacity var(--t-base); }
.position-relative { position: relative !important; }
/* ============================================
ANNOUNCEMENT BAR
============================================ */
.announce-bar {
background: var(--color-primary);
color: var(--color-secondary);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.6rem 0;
overflow: hidden;
position: relative;
}
.announce-track {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
white-space: nowrap;
animation: marquee 35s linear infinite;
}
.announce-track .dot { opacity: 0.5; font-size: 1.2em; }
.announce-track strong { color: var(--color-accent); font-weight: 500; }
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ============================================
HEADER POLISH
============================================ */
.site-header {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-line);
position: sticky;
top: 0;
z-index: 1000;
transition: all var(--t-base);
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.04); }
.brand-mark {
font-family: var(--font-serif);
font-size: 1.4rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
.brand-mark.small { font-size: 1rem; }
.header-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
gap: 1rem;
}
.primary-nav {
display: flex;
align-items: center;
gap: 2.25rem;
flex: 1;
justify-content: center;
}
.nav-link {
color: var(--color-primary);
text-decoration: none;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
position: relative;
padding: 0.5rem 0;
transition: color var(--t-fast);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: var(--color-accent);
transition: all var(--t-base);
transform: translateX(-50%);
}
.nav-link:hover { color: var(--color-accent); }
.nav-link:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-icon {
width: 40px;
height: 40px;
background: transparent;
border: none;
color: var(--color-primary);
font-size: 1.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--t-fast);
text-decoration: none;
position: relative;
}
.header-icon:hover { color: var(--color-accent); }
.count-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 18px;
height: 18px;
background: var(--color-accent);
color: var(--color-primary);
font-size: 0.65rem;
font-weight: 600;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
}
/* ============================================
MOBILE MENU OFFCANVAS
============================================ */
.luxury-offcanvas {
background: var(--color-secondary) !important;
border: none !important;
box-shadow: 10px 0 40px rgba(0,0,0,0.15);
}
.luxury-offcanvas .offcanvas-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-line);
display: flex;
align-items: center;
justify-content: space-between;
}
.luxury-offcanvas .offcanvas-body { padding: 1.5rem; }
.luxury-offcanvas .btn-close {
background: transparent;
border: 1px solid var(--color-line);
width: 36px;
height: 36px;
border-radius: 0;
opacity: 1;
font-size: 0.9rem;
color: var(--color-primary);
}
.luxury-offcanvas .btn-close:hover { background: var(--color-bg-soft); }
.mobile-nav { display: flex; flex-direction: column; }
.m-link {
padding: 0.9rem 0;
color: var(--color-primary);
text-decoration: none;
font-family: var(--font-serif);
font-size: 1.3rem;
border-bottom: 1px solid var(--color-line);
transition: all var(--t-fast);
display: block;
}
.m-link:hover { padding-left: 0.5rem; color: var(--color-accent); }
.m-divider { height: 1px; background: var(--color-line); margin: 0.75rem 0; }
/* ============================================
SEARCH OFFCANVAS
============================================ */
.luxury-search {
background: var(--color-secondary) !important;
height: 100vh !important;
border: none !important;
}
.luxury-search .offcanvas-body {
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 1rem;
}
.search-form-luxe { width: 100%; max-width: 700px; margin: 0 auto; text-align: center; }
.search-eyebrow {
display: block;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 1.5rem;
}
.search-input-luxe {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid var(--color-primary);
font-family: var(--font-serif);
font-size: 2.5rem;
color: var(--color-primary);
padding: 0.5rem 0;
outline: none;
text-align: center;
}
.search-input-luxe::placeholder { color: var(--color-text-muted); }
.search-hint {
display: block;
margin-top: 1.5rem;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* ============================================
HERO POLISH
============================================ */
.luxury-hero {
position: relative;
height: calc(100vh - 60px);
min-height: 600px;
overflow: hidden;
background: var(--color-primary);
}
.hero-slider { position: relative; height: 100%; }
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-image { position: absolute; inset: 0; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.7) 100%);
}
.hero-content {
position: relative;
z-index: 2;
color: var(--color-secondary);
max-width: 720px;
padding-top: 4rem;
}
.hero-eyebrow {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.4em;
text-transform: uppercase;
margin-bottom: 1.25rem;
color: var(--color-accent);
opacity: 0.95;
}
.hero-title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 1.05;
font-weight: 400;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.hero-subtitle {
font-size: clamp(0.95rem, 1.5vw, 1.15rem);
line-height: 1.7;
margin-bottom: 2.5rem;
opacity: 0.95;
max-width: 520px;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-controls {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 2rem;
z-index: 3;
color: var(--color-secondary);
}
.hero-prev,
.hero-next {
width: 48px;
height: 48px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.3);
color: var(--color-secondary);
cursor: pointer;
transition: all var(--t-fast);
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-prev:hover,
.hero-next:hover {
background: rgba(255,255,255,0.2);
border-color: var(--color-accent);
}
.hero-dots { display: flex; gap: 0.5rem; }
.hero-dot {
width: 32px;
height: 2px;
background: rgba(255,255,255,0.4);
cursor: pointer;
transition: all var(--t-base);
}
.hero-dot.active { background: var(--color-accent); width: 48px; }
.hero-scroll-indicator {
position: absolute;
bottom: 1.5rem;
right: 2rem;
color: var(--color-secondary);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0.8;
}
.scroll-line {
width: 1px;
height: 40px;
background: rgba(255,255,255,0.4);
position: relative;
overflow: hidden;
}
.scroll-line::after {
content: '';
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 50%;
background: var(--color-accent);
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0% { top: -50%; }
100% { top: 100%; }
}
@media (max-width: 767px) {
.hero-controls { bottom: 1.5rem; gap: 1rem; }
.hero-scroll-indicator { display: none; }
.luxury-hero { height: 85vh; min-height: 500px; }
.hero-actions { gap: 0.75rem; }
}
/* ============================================
PRODUCT DETAIL (v2)
============================================ */
.product-detail { padding: var(--s-12) 0; }
.breadcrumb-bar {
background: var(--color-bg-soft);
padding: 1rem 0;
border-bottom: 1px solid var(--color-line);
}
.breadcrumb-luxe {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.50rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.breadcrumb-luxe a {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--t-fast);
}
.breadcrumb-luxe a:hover { color: var(--color-primary); }
.breadcrumb-luxe i { font-size: 0.65rem; opacity: 0.5; }
.breadcrumb-luxe .active { color: var(--color-primary); }
.product-gallery { gap: var(--s-4); }
.p-name {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
line-height: 1.1;
margin: 0.75rem 0 1rem;
color: var(--color-primary);
font-weight: 400;
}
.p-meta {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.85rem;
color: var(--color-text-muted);
flex-wrap: wrap;
}
.p-rating {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: inherit;
text-decoration: none;
}
.p-rating strong { color: var(--color-secondary); }
.p-rating .stars { color: var(--color-accent); letter-spacing: 2px; }
.p-rating-count { color: var(--color-text-muted); text-decoration: underline; }
.p-sku { font-size: 0.8rem; }
.p-price {
display: flex;
align-items: baseline;
gap: 0.85rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-line);
}
.p-price .p-now {
font-family: var(--font-serif);
font-size: 1.85rem;
color: var(--color-primary);
}
.p-price .p-old {
font-size: 1.05rem;
color: var(--color-text-muted);
text-decoration: line-through;
}
.p-short {
color: var(--color-text-muted);
line-height: 1.8;
margin-bottom: 2rem;
font-size: 0.95rem;
}
.p-variants { margin-bottom: 1rem; }
.p-variants .variant-group { margin-bottom: 1.5rem; }
.p-variants .variant-group label {
display: block;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0.75rem;
color: var(--color-primary);
}
.color-options { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.color-option {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.85rem;
border: 1px solid var(--color-line);
cursor: pointer;
transition: all var(--t-fast);
background: var(--color-secondary);
}
.color-option input { display: none; }
.color-option:has(input:checked) {
border-color: var(--color-primary);
background: var(--color-bg-soft);
}
.color-dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid var(--color-line);
flex-shrink: 0;
}
.color-name { font-size: 0.8rem; color: var(--color-primary); }
.size-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.shipping-options { margin-top: 1rem; }
.size-guide-link {
color: var(--color-text-muted);
text-decoration: underline;
text-underline-offset: 3px;
font-size: 0.7rem;
}
.p-stock {
margin: 1rem 0;
font-size: 0.85rem;
color: var(--color-accent);
}
.p-stock.in-stock { color: #2e7d32; }
.p-stock.low-stock { color: #8b6b00; }
.p-stock.out-stock { color: #c2185b; }
.p-actions {
display: flex;
gap: 0.75rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.p-wishlist-btn {
width: 56px;
height: 56px;
border: 1px solid var(--color-line);
background: transparent;
color: var(--color-primary);
font-size: 1.2rem;
cursor: pointer;
transition: all var(--t-fast);
display: inline-flex;
align-items: center;
justify-content: center;
}
.p-wishlist-btn:hover { border-color: var(--color-primary); color: var(--color-accent); }
.p-wishlist-btn.active,
.p-wishlist-btn.is-active { background: var(--color-accent); color: var(--color-primary); border-color: var(--color-accent); }
.product-detail,
.reviews-section {
background: #ffffff !important;
}
.product-detail .p-summary-card,
.product-detail .p-purchase-card,
.product-detail .pg-main {
background: transparent !important;
box-shadow: none !important;
border-color: rgba(17,17,20,0.12) !important;
}
.product-detail .p-summary-card,
.product-detail .p-purchase-card {
border-width: 0 0 1px 0 !important;
border-style: solid !important;
border-radius: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.product-detail .product-info {
gap: 1.25rem !important;
}
.product-detail .p-name,
.product-detail .p-meta,
.product-detail .p-short,
.product-detail .p-saving-note,
.product-detail .p-stat-card small,
.product-detail .p-stat-card strong,
.product-detail .p-highlight-pill span,
.product-detail .variant-group label,
.product-detail .p-stock,
.product-detail .acc-item > summary,
.product-detail .acc-content,
.product-detail .acc-content p,
.reviews-section,
.reviews-section .section-h,
.reviews-section .review-card,
.reviews-section .rv-title,
.reviews-section .rv-text,
.reviews-section .rv-author,
.reviews-section .rs-num,
.reviews-section .rs-count {
color: #111114 !important;
}
.product-detail .p-rating-count,
.product-detail .p-sku,
.product-detail .p-short,
.product-detail .acc-content,
.reviews-section .rv-date,
.reviews-section .rs-count {
color: rgba(17,17,20,0.7) !important;
}
.product-detail .p-price .p-now {
color: #111114 !important;
}
.product-detail .p-price .p-old {
color: rgba(17,17,20,0.55) !important;
}
.product-detail .p-flag {
background: transparent !important;
border-color: rgba(17,17,20,0.14) !important;
color: rgba(17,17,20,0.76) !important;
}
.product-detail .p-flag-sale,
.product-detail .p-flag-auction {
background: rgba(17,17,20,0.04) !important;
border-color: rgba(17,17,20,0.18) !important;
color: rgba(17,17,20,0.86) !important;
}
.product-detail .p-perks {
background: transparent !important;
border-left: 2px solid rgba(17,17,20,0.18) !important;
}
.product-detail .perk i {
color: rgba(17,17,20,0.78) !important;
}
.product-detail .p-actions {
display: grid;
grid-template-columns: 1fr 1fr 56px;
gap: 0.75rem;
align-items: stretch;
margin: 1.25rem 0 1.1rem;
}
.product-detail .p-actions .btn-luxe-solid,
.product-detail .p-actions .btn-luxe-line {
width: 100%;
min-height: 56px;
padding: 0.9rem 1.1rem;
border-radius: 16px !important;
font-weight: 600;
letter-spacing: 0.02em;
}
.product-detail .p-actions .btn-luxe-solid {
background: #111114 !important;
border-color: #111114 !important;
color: #ffffff !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}
.product-detail .p-actions .btn-luxe-solid:hover {
background: #2b2b31 !important;
border-color: #2b2b31 !important;
box-shadow: 0 18px 46px rgba(0,0,0,0.16);
}
.product-detail .p-actions .btn-luxe-line {
background: #ffffff !important;
border-color: rgba(17,17,20,0.38) !important;
color: #111114 !important;
}
.product-detail .p-actions .btn-luxe-line:hover {
background: #111114 !important;
border-color: #111114 !important;
color: #ffffff !important;
}
.product-detail .p-actions button:disabled,
.product-detail .p-actions .btn-luxe-solid:disabled,
.product-detail .p-actions .btn-luxe-line:disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none !important;
}
.product-detail .buy-now {
min-width: 0;
}
.product-detail .p-wishlist-btn:hover {
border-color: rgba(17,17,20,0.38) !important;
color: rgba(17,17,20,0.92) !important;
background: rgba(17,17,20,0.04) !important;
}
@media (max-width: 480px) {
.product-detail .p-actions {
grid-template-columns: 1fr;
}
.product-detail .p-wishlist-btn {
width: 100%;
border-radius: 16px !important;
}
}
.reviews-section .review-card,
.reviews-section .review-form-wrap,
.reviews-section .review-locked-card {
background: transparent !important;
box-shadow: none !important;
border: 1px solid rgba(17,17,20,0.12) !important;
}
.product-detail .qty-control {
display: grid;
grid-template-columns: 56px 72px 56px;
align-items: center;
height: 56px;
border-radius: 16px;
border: 1px solid rgba(17,17,20,0.18) !important;
background: rgba(255,255,255,0.9) !important;
overflow: hidden;
}
.product-detail .qty-btn {
width: 100%;
height: 56px;
border: 0;
background: transparent;
color: #111114 !important;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: background 180ms ease, color 180ms ease;
}
.product-detail .qty-btn:hover {
background: rgba(17,17,20,0.05) !important;
}
.product-detail #qtyInput {
width: 100%;
height: 56px;
border: 0;
background: transparent;
text-align: center;
color: #111114 !important;
font-size: 1rem;
font-weight: 650;
letter-spacing: 0.02em;
outline: none;
-moz-appearance: textfield;
}
.product-detail #qtyInput::-webkit-outer-spin-button,
.product-detail #qtyInput::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.product-detail #qtyInput:focus {
box-shadow: inset 0 0 0 2px rgba(17,17,20,0.18);
}
.modal-backdrop {
pointer-events: auto;
z-index: 10990 !important;
}
.modal-backdrop.show {
z-index: 10990 !important;
}
.modal,
.modal.show {
z-index: 11000 !important;
}
.modal-dialog {
position: relative;
z-index: 11010 !important;
}
body.modal-open::before,
body.modal-open::after {
opacity: 0 !important;
}
.buy-now { flex: 0 0 auto; min-width: 140px; }
.p-perks {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 1.5rem 0;
padding: 1.25rem;
background: var(--color-bg-soft);
}
/* Product Accordion (v2) */
.product-accordion { margin-top: var(--s-8); }
.acc-item { border-bottom: 1px solid var(--color-line); }
.acc-item > summary {
cursor: pointer;
padding: 1.5rem 0;
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--color-primary);
list-style: none;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
transition: color var(--t-fast);
}
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-item > summary::after {
content: '+';
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--color-primary);
transition: transform var(--t-base);
}
.acc-item[open] > summary::after { transform: rotate(45deg); }
.acc-item > summary:hover { color: var(--color-accent); }
.acc-content {
padding: 0 0 1.5rem;
color: var(--color-text-muted);
line-height: 1.8;
}
.acc-content p { margin-bottom: 0.75rem; }
.acc-content table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.acc-content th, .acc-content td { border: 1px solid var(--color-line); padding: 0.5rem; text-align: center; font-size: 0.85rem; }
.acc-content th { background: var(--color-bg-soft); }
/* ============================================
CART PAGE V2
============================================ */
.cart-section { padding: var(--s-12) 0; }
.cart-items { margin-bottom: var(--s-6); }
.cart-item {
display: grid;
grid-template-columns: 100px 1fr 40px;
gap: 1.25rem;
padding: 1.5rem 0;
border-bottom: 1px solid var(--color-line);
align-items: start;
}
.ci-img {
width: 100px;
height: 130px;
background: var(--color-bg-soft);
overflow: hidden;
display: block;
text-decoration: none;
}
.ci-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base); }
.ci-img:hover img { transform: scale(1.05); }
.ci-body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ci-name {
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--color-primary);
text-decoration: none;
line-height: 1.3;
display: block;
}
.ci-name:hover { color: var(--color-accent); }
.ci-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.ci-sku { font-size: 0.75rem; }
.ci-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.ci-qty.qty-control {
height: 38px;
border: 1px solid var(--color-line);
}
.ci-qty input {
width: 40px;
height: 100%;
border: none;
text-align: center;
font-size: 0.85rem;
background: transparent;
color: var(--color-primary);
}
.ci-price {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--color-primary);
font-weight: 500;
}
.ci-remove {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 0.5rem;
transition: color var(--t-fast);
align-self: start;
}
.ci-remove:hover { color: #c0392b; }
.cart-actions-row {
margin-top: var(--s-6);
padding-top: var(--s-4);
border-top: 1px solid var(--color-line);
}
.order-summary {
background: var(--color-bg-soft);
padding: var(--s-6);
position: sticky;
top: 120px;
}
.os-title {
font-family: var(--font-serif);
font-size: 1.25rem;
margin-bottom: var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--color-line);
font-weight: 400;
}
.os-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.6rem 0;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.os-row strong { color: var(--color-primary); font-weight: 500; }
.os-total {
border-top: 1px solid var(--color-line);
margin-top: 0.75rem;
padding-top: 1rem;
font-size: 1.05rem;
}
.os-total strong {
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--color-primary);
}
.os-voucher { margin: 1rem 0; }
.os-divider { height: 1px; background: var(--color-line); margin: 1rem 0; }
.os-note {
font-size: 0.75rem;
color: var(--color-text-muted);
line-height: 1.6;
padding: 0.75rem;
background: var(--color-secondary);
border-left: 2px solid var(--color-accent);
margin: 1rem 0;
}
.os-perks {
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid var(--color-line);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.perk {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.perk i { color: var(--color-accent); width: 16px; flex-shrink: 0; }
.voucher-form { display: flex; gap: 0.5rem; }
.voucher-form input { flex: 1; }
.voucher-form button { white-space: nowrap; }
.voucher-applied {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--color-secondary);
border: 1px dashed var(--color-accent);
margin-bottom: 0.75rem;
}
.v-tag {
background: var(--color-accent);
color: var(--color-primary);
padding: 0.2rem 0.5rem;
font-size: 0.7rem;
letter-spacing: 0.1em;
font-weight: 600;
}
.v-name { flex: 1; font-size: 0.85rem; color: var(--color-primary); }
.v-remove {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 0.25rem;
}
/* ============================================
CHECKOUT PAGE
============================================ */
.checkout-section { padding: var(--s-10) 0 var(--s-20); }
.checkout-head { margin-bottom: var(--s-8); }
.checkout-grid {
display: grid;
grid-template-columns: 1fr 420px;
gap: var(--s-8);
align-items: start;
}
@media (max-width: 991px) {
.checkout-grid { grid-template-columns: 1fr; }
.checkout-right { position: static; }
}
.checkout-left { min-width: 0; }
.checkout-right { position: sticky; top: 120px; }
.co-block {
margin-bottom: var(--s-5);
padding: var(--s-6);
background: var(--color-bg-soft);
}
.co-title {
font-family: var(--font-serif);
font-size: 1.15rem;
margin-bottom: var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--color-line);
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 400;
}
.co-title span {
font-family: var(--font-serif);
color: var(--color-accent);
font-size: 0.95rem;
}
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.co-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) {
.co-grid, .co-grid-2 { grid-template-columns: 1fr; }
}
.co-item {
display: grid;
grid-template-columns: 70px 1fr auto;
gap: 1rem;
padding: 0.75rem 0;
align-items: center;
border-bottom: 1px solid var(--color-line);
}
.co-item:last-child { border-bottom: none; }
.coi-img {
position: relative;
width: 70px;
height: 80px;
background: var(--color-secondary);
overflow: hidden;
border: 1px solid var(--color-line);
}
.coi-img img { width: 100%; height: 100%; object-fit: cover; }
.coi-qty {
position: absolute;
top: -8px;
right: -8px;
background: var(--color-primary);
color: var(--color-secondary);
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 600;
}
.coi-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.coi-name {
font-size: 0.9rem;
color: var(--color-primary);
font-family: var(--font-serif);
line-height: 1.3;
}
.coi-meta { font-size: 0.75rem; color: var(--color-text-muted); }
.coi-price {
font-family: var(--font-serif);
font-size: 0.95rem;
color: var(--color-primary);
text-align: right;
}
.co-items { display: flex; flex-direction: column; margin-bottom: var(--s-4); }
.co-summary {
background: var(--color-bg-soft);
padding: var(--s-6);
}
.co-signin {
text-align: center;
margin-top: var(--s-4);
padding: 0.85rem;
background: var(--color-secondary);
border: 1px dashed var(--color-line);
font-size: 0.85rem;
color: var(--color-text-muted);
}
.co-signin a { color: var(--color-primary); text-decoration: underline; margin-left: 0.25rem; }
/* Address cards */
.saved-addresses {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.addr-card {
display: grid;
grid-template-columns: 24px 1fr;
gap: 0.75rem;
padding: 1.25rem;
border: 1px solid var(--color-line);
background: var(--color-secondary);
cursor: pointer;
transition: all var(--t-fast);
}
.addr-card:has(input:checked) {
border-color: var(--color-primary);
background: var(--color-bg-soft);
}
.addr-card input {
margin-top: 0.2rem;
accent-color: var(--color-primary);
}
.addr-card strong { color: var(--color-primary); margin-right: 0.5rem; }
.addr-card p { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.25rem; line-height: 1.6; }
.addr-toggle { margin: 1rem 0; font-size: 0.85rem; }
.addr-toggle a { color: var(--color-primary); text-decoration: underline; }
/* Courier tabs */
.courier-tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.courier-tab {
padding: 1rem 0.5rem;
border: 1px solid var(--color-line);
background: var(--color-secondary);
text-align: center;
cursor: pointer;
transition: all var(--t-fast);
display: block;
}
.courier-tab input { display: none; }
.courier-tab:has(input:checked),
.courier-tab.active {
background: var(--color-primary);
color: var(--color-secondary);
border-color: var(--color-primary);
}
.courier-tab span { font-size: 0.85rem; font-weight: 500; }
.payment-hint {
color: var(--color-text-muted);
font-size: 0.85rem;
margin-bottom: 1rem;
}
.payment-methods {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pm {
display: inline-block;
padding: 0.6rem 0.9rem;
border: 1px solid var(--color-line);
background: var(--color-secondary);
font-size: 0.8rem;
color: var(--color-primary);
letter-spacing: 0.05em;
}
.ck-secure {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-muted);
padding: 1rem 0 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
letter-spacing: 0.1em;
}
.ck-secure i { color: var(--color-accent); }
/* ============================================
ACCOUNT V2
============================================ */
.account-layout { padding: var(--s-10) 0; }
.account-main { min-width: 0; }
.account-sidebar {
background: var(--color-bg-soft);
padding: var(--s-6);
height: fit-content;
position: sticky;
top: 120px;
}
.acc-user {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: var(--s-6);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--color-line);
}
.acc-avatar {
width: 56px;
height: 56px;
background: var(--color-primary);
color: var(--color-secondary);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 1.4rem;
flex-shrink: 0;
}
.acc-user strong {
display: block;
color: var(--color-primary);
font-family: var(--font-serif);
font-size: 1rem;
}
.acc-user span {
display: block;
color: var(--color-text-muted);
font-size: 0.8rem;
}
.acc-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.acc-nav a {
padding: 0.85rem 1rem;
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.05em;
border-left: 2px solid transparent;
transition: all var(--t-fast);
display: flex;
align-items: center;
gap: 0.75rem;
}
.acc-nav a:hover { color: var(--color-primary); background: var(--color-secondary); }
.acc-nav a.active {
color: var(--color-primary);
border-left-color: var(--color-primary);
background: var(--color-secondary);
font-weight: 500;
}
.acc-nav a i { width: 16px; text-align: center; }
.acc-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--s-6);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--color-line);
flex-wrap: wrap;
gap: 1rem;
}
.acc-head h1,
.acc-head h2 {
font-family: var(--font-serif);
margin: 0;
font-weight: 400;
}
.acc-head h1 { font-size: 1.75rem; }
.acc-head h2 { font-size: 1.4rem; }
.acc-block {
background: var(--color-bg-soft);
padding: var(--s-6);
margin-bottom: var(--s-4);
}
.acc-block h2 {
font-family: var(--font-serif);
font-size: 1.2rem;
margin-bottom: var(--s-4);
font-weight: 400;
}
.acc-block h3 {
font-family: var(--font-serif);
font-size: 1.15rem;
margin-bottom: var(--s-4);
font-weight: 400;
}
.acc-form { display: grid; gap: 1rem; }
.acc-form .form-row { margin-bottom: 0; }
.acc-orders { display: flex; flex-direction: column; gap: 0.75rem; }
.acc-order-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--color-secondary);
border: 1px solid var(--color-line);
text-decoration: none;
color: inherit;
transition: all var(--t-fast);
}
.acc-order-row:hover { border-color: var(--color-primary); transform: translateX(4px); }
.acc-order-row strong { color: var(--color-primary); }
.acc-order-row .muted { color: var(--color-text-muted); font-size: 0.8rem; }
.acc-addresses {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.acc-addr-card {
padding: 1.25rem;
background: var(--color-secondary);
border: 1px solid var(--color-line);
}
.acc-addr-card strong { color: var(--color-primary); display: block; margin-bottom: 0.5rem; }
.acc-addr-card p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0.25rem 0; line-height: 1.5; }
.acc-stat {
background: var(--color-bg-soft);
padding: var(--s-6);
text-align: center;
}
.acc-stat-val {
display: block;
font-family: var(--font-serif);
font-size: 2.25rem;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.acc-stat-label {
display: block;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Status pills */
.status {
display: inline-block;
padding: 0.25rem 0.65rem;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500;
background: var(--color-bg-soft);
color: var(--color-text-muted);
}
.status-pending,
.status-waiting_payment,
.status-unpaid { background: #fdf6e3; color: #8b6b00; }
.status-paid,
.status-processing,
.status-packed { background: #e3f2fd; color: #1565c0; }
.status-shipped { background: #e8eaf6; color: #283593; }
.status-delivered,
.status-completed,
.status-done { background: #e8f5e9; color: #2e7d32; }
.status-cancelled,
.status-cancel,
.status-failed { background: #fce4ec; color: #c2185b; }
.status-refunded { background: #f3e5f5; color: #6a1b9a; }
.status-pill {
display: inline-block;
padding: 0.3rem 0.7rem;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
background: var(--color-bg-soft);
color: var(--color-text-muted);
}
.order-list { display: flex; flex-direction: column; gap: 0.75rem; }
.order-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--color-secondary);
border: 1px solid var(--color-line);
text-decoration: none;
color: inherit;
transition: all var(--t-fast);
}
.order-row:hover { border-color: var(--color-primary); transform: translateX(4px); }
.or-num strong { color: var(--color-primary); display: block; }
.or-num span { font-size: 0.75rem; color: var(--color-text-muted); }
.or-status { display: flex; flex-direction: column; gap: 0.3rem; }
.or-status .muted { font-size: 0.7rem; }
.or-total strong { font-family: var(--font-serif); font-size: 1rem; color: var(--color-primary); }
.or-total .link-luxe { font-size: 0.75rem; display: block; margin-top: 0.25rem; }
/* ============================================
ORDER DETAIL V2
============================================ */
.order-detail { padding: var(--s-8) 0; }
.od-head {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: var(--s-8);
padding-bottom: var(--s-6);
border-bottom: 1px solid var(--color-line);
}
.od-head .eyebrow { display: block; margin-bottom: 0.5rem; }
.od-head strong { color: var(--color-primary); }
.od-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: var(--s-6);
}
.od-items {
background: var(--color-bg-soft);
padding: var(--s-6);
margin-bottom: var(--s-5);
}
.od-items h3 {
font-family: var(--font-serif);
font-size: 1.15rem;
margin-bottom: var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--color-line);
font-weight: 400;
}
.od-item {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--color-line);
align-items: center;
}
.od-item:last-child { border-bottom: none; }
.odi-img {
width: 80px;
height: 100px;
background: var(--color-secondary);
overflow: hidden;
}
.odi-img img { width: 100%; height: 100%; object-fit: cover; }
.odi-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.odi-body strong { color: var(--color-primary); font-family: var(--font-serif); font-size: 1rem; }
.odi-body span { font-size: 0.85rem; color: var(--color-text-muted); }
.odi-body .muted { font-size: 0.8rem; }
.odi-price {
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--color-primary);
text-align: right;
}
.od-totals {
background: var(--color-bg-soft);
padding: var(--s-6);
margin-bottom: var(--s-5);
}
.od-timeline {
background: var(--color-bg-soft);
padding: var(--s-6);
}
.od-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s-6);
padding: var(--s-6);
background: var(--color-bg-soft);
margin-bottom: var(--s-5);
}
.od-info-grid h4 {
font-family: var(--font-serif);
font-size: 1rem;
margin-bottom: 0.75rem;
font-weight: 400;
}
.od-info-grid p { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; }
.od-info-grid p strong { color: var(--color-primary); }
.tl-step {
display: grid;
grid-template-columns: 24px 1fr;
gap: 1rem;
padding: 0.85rem 0;
position: relative;
}
.tl-step:not(:last-child)::after {
content: '';
position: absolute;
left: 11px;
top: 28px;
bottom: -5px;
width: 2px;
background: var(--color-line);
}
.tl-step.done:not(:last-child)::after { background: var(--color-accent); }
.tl-dot {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-line);
color: var(--color-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
z-index: 1;
position: relative;
}
.tl-step.done .tl-dot { background: var(--color-accent); }
.tl-step.active .tl-dot {
background: var(--color-primary);
box-shadow: 0 0 0 4px rgba(28,28,28,0.1);
}
.tl-label {
font-size: 0.9rem;
color: black;
align-self: center;
}
/* ============================================
JOURNAL & BLOG
============================================ */
.journal-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--s-10);
padding: var(--s-10) 0;
}
@media (max-width: 991px) {
.journal-layout { grid-template-columns: 1fr; gap: var(--s-8); }
}
.journal-main { min-width: 0; }
.journal-aside {
position: sticky;
top: 120px;
height: fit-content;
}
.journal-aside h3 {
font-family: var(--font-serif);
font-size: 1rem;
margin-bottom: var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--color-line);
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 400;
}
.jcat-list { list-style: none; padding: 0; margin: 0; }
.jcat-list li { border-bottom: 1px solid var(--color-line); }
.jcat-list a {
display: block;
padding: 0.85rem 0;
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.85rem;
transition: color var(--t-fast);
}
.jcat-list a:hover { color: var(--color-primary); padding-left: 0.5rem; }
.journal-list { display: flex; flex-direction: column; gap: var(--s-8); }
.journal-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-8);
align-items: center;
text-decoration: none;
color: inherit;
padding-bottom: var(--s-8);
border-bottom: 1px solid var(--color-line);
transition: all var(--t-base);
}
.journal-feature:hover { opacity: 0.9; }
@media (max-width: 767px) {
.journal-feature { grid-template-columns: 1fr; gap: var(--s-4); }
}
.jf-img {
aspect-ratio: 4/3;
background: var(--color-bg-soft);
overflow: hidden;
}
.jf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.journal-feature:hover .jf-img img { transform: scale(1.05); }
.jf-body { display: flex; flex-direction: column; gap: 0.75rem; }
.jf-date { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); }
.journal-feature h2 { font-family: var(--font-serif); font-size: 1.75rem; line-height: 1.2; margin: 0; }
.journal-feature p { color: var(--color-text-muted); line-height: 1.7; margin: 0; }
.j-date {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
display: block;
margin-bottom: 0.5rem;
}
.article-header {
text-align: center;
max-width: 720px;
margin: var(--s-10) auto var(--s-8);
padding: 0 var(--s-4);
}
.article-header .eyebrow { display: block; margin-bottom: 1rem; color: var(--color-text-muted); }
.article-h {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.15;
margin-bottom: 1.5rem;
color: var(--color-primary);
font-weight: 400;
}
.article-excerpt {
color: var(--color-text-muted);
font-size: 1.1rem;
line-height: 1.7;
font-family: var(--font-serif);
font-style: italic;
}
.article-hero-img {
aspect-ratio: 21/9;
max-width: 1100px;
margin: 0 auto var(--s-10);
overflow: hidden;
background: var(--color-bg-soft);
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-body {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--s-4) var(--s-12);
color: var(--color-primary);
line-height: 1.85;
font-size: 1rem;
}
.article-body h2,
.article-body h3 {
font-family: var(--font-serif);
margin: 2.5rem 0 1rem;
font-weight: 400;
}
.article-body h2 { font-size: 1.75rem; }
.article-body h3 { font-size: 1.35rem; }
.article-body p { margin-bottom: 1.25rem; }
.article-body img { max-width: 100%; height: auto; margin: 1.5rem 0; }
.article-body blockquote {
border-left: 3px solid var(--color-accent);
padding: 1rem 1.5rem;
margin: 2rem 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 1.2rem;
color: var(--color-text-muted);
}
.article-related {
max-width: 1100px;
margin: 0 auto;
padding: var(--s-10) var(--s-4);
border-top: 1px solid var(--color-line);
}
.article-related h3 {
font-family: var(--font-serif);
font-size: 1.5rem;
margin-bottom: var(--s-6);
text-align: center;
font-weight: 400;
}
/* ============================================
ABOUT PAGE
============================================ */
.about-section { padding: var(--s-12) 0; }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-12);
align-items: center;
}
@media (max-width: 991px) {
.about-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}
.about-text { max-width: 540px; }
.about-h {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
margin-bottom: 1.5rem;
color: var(--color-primary);
line-height: 1.15;
font-weight: 400;
}
.about-text p {
color: var(--color-text-muted);
line-height: 1.85;
margin-bottom: 1.25rem;
font-size: 0.95rem;
}
.about-image {
aspect-ratio: 4/5;
background: var(--color-bg-soft);
overflow: hidden;
}
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--s-6);
margin-top: var(--s-12);
}
.value-item {
text-align: center;
padding: var(--s-6);
background: var(--color-bg-soft);
transition: all var(--t-base);
}
.value-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.value-item h3 {
font-family: var(--font-serif);
font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--color-primary);
font-weight: 400;
}
.value-item p {
color: var(--color-text-muted);
line-height: 1.7;
font-size: 0.9rem;
margin: 0;
}
/* ============================================
CONTACT PAGE
============================================ */
.contact-section { padding: var(--s-10) 0 var(--s-20); }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: var(--s-10);
}
@media (max-width: 991px) {
.contact-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}
.ci-h {
font-family: var(--font-serif);
font-size: 1.5rem;
margin-bottom: var(--s-4);
color: var(--color-primary);
font-weight: 400;
}
.contact-info p {
color: var(--color-text-muted);
margin-bottom: var(--s-6);
line-height: 1.7;
}
.ci-item {
display: grid;
grid-template-columns: 40px 1fr;
gap: 1rem;
padding: 1.25rem 0;
border-bottom: 1px solid var(--color-line);
align-items: start;
}
.ci-item i {
color: var(--color-accent);
font-size: 1.2rem;
margin-top: 0.15rem;
}
.ci-item strong {
display: block;
color: var(--color-primary);
margin-bottom: 0.3rem;
font-size: 0.9rem;
font-weight: 500;
}
.ci-item p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }
.ci-item a { color: var(--color-primary); text-decoration: underline; }
.contact-form-wrap {
background: var(--color-bg-soft);
padding: var(--s-8);
}
.contact-form { display: grid; gap: 1rem; }
.contact-form .form-row { margin: 0; }
.empty-text { color: var(--color-text-muted); line-height: 1.7; }
.empty-text a { color: var(--color-primary); text-decoration: underline; }
/* ============================================
TRACKING PAGE
============================================ */
.track-form-wrap {
max-width: 600px;
margin: var(--s-10) auto;
padding: 0 var(--s-4);
}
.track-form { display: flex; flex-direction: column; gap: 1rem; }
.track-show { padding: var(--s-8) 0; }
.track-info {
background: var(--color-bg-soft);
padding: var(--s-6);
margin-bottom: var(--s-6);
}
.track-info h2 {
font-family: var(--font-serif);
font-size: 1.4rem;
margin-bottom: 1rem;
font-weight: 400;
}
.track-info p { color: var(--color-text-muted); margin-bottom: 0.5rem; }
.track-info p strong { color: var(--color-primary); }
.track-history {
background: var(--color-bg-soft);
padding: var(--s-6);
}
.th-item {
display: grid;
grid-template-columns: 180px 1fr 140px;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--color-line);
align-items: center;
}
@media (max-width: 600px) {
.th-item { grid-template-columns: 1fr; gap: 0.3rem; }
.th-city { text-align: left; }
}
.th-item:last-child { border-bottom: none; }
.th-item.delivered { background: var(--color-secondary); padding: 1rem; margin: 0.5rem 0; }
.th-time { font-size: 0.8rem; color: var(--color-text-muted); letter-spacing: 0.05em; }
.th-city { font-size: 0.95rem; color: var(--color-primary); font-weight: 500; text-align: right; }
.th-desc { font-size: 0.85rem; color: var(--color-text-muted); }
/* ============================================
PAGE HEADER POLISH
============================================ */
.page-header {
background: var(--color-bg-soft);
padding: var(--s-12) 0;
text-align: center;
border-bottom: 1px solid var(--color-line);
}
.page-header .eyebrow { display: block; margin-bottom: 1rem; }
.page-h {
font-family: var(--font-serif);
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.1;
margin-bottom: 1rem;
color: var(--color-primary);
font-weight: 400;
}
.page-sub {
color: var(--color-text-muted);
font-size: 1rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
/* ============================================
MODAL & TOAST
============================================ */
.modal-content.luxury-modal {
position: relative;
z-index: 11020 !important;
border: none;
border-radius: 0;
background: var(--color-secondary);
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.luxury-modal .modal-header {
border-bottom: 1px solid var(--color-line);
padding: 1.25rem 1.5rem;
}
.luxury-modal .modal-title {
font-family: var(--font-serif);
color: var(--color-primary);
font-size: 1.2rem;
font-weight: 400;
}
.luxury-modal .modal-body { padding: 1.5rem; }
.luxury-modal .modal-footer {
border-top: 1px solid var(--color-line);
padding: 1rem 1.5rem;
}
.auth-gate-modal {
border: 1px solid rgba(17,17,20,0.08);
border-radius: 24px;
background: #ffffff;
box-shadow: 0 28px 70px rgba(0,0,0,0.12);
}
.auth-gate-modal .modal-body {
position: relative;
padding: 1.35rem;
display: grid;
gap: 0.8rem;
}
.auth-gate-close {
position: absolute;
top: 0.9rem;
right: 0.9rem;
}
.auth-gate-modal .eyebrow {
margin: 0;
}
.auth-gate-modal .eyebrow::before {
display: none;
}
.auth-gate-modal h3 {
margin: 0;
padding-right: 2.2rem;
color: #111114;
font-family: var(--font-sans) !important;
font-size: 1.2rem;
font-weight: 800;
line-height: 1.25;
}
.auth-gate-modal p {
margin: 0;
color: rgba(17,17,20,0.62);
line-height: 1.7;
}
.auth-gate-actions {
display: grid;
gap: 0.65rem;
margin-top: 0.35rem;
}
.toast-container {
position: fixed;
top: 100px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 0.5rem;
pointer-events: none;
}
.toast-luxe {
background: var(--color-primary);
color: var(--color-secondary);
padding: 0.85rem 1.25rem;
font-size: 0.85rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
min-width: 280px;
pointer-events: auto;
border-left: 3px solid var(--color-accent);
animation: slideInRight var(--t-base);
}
@keyframes slideInRight {
from { transform: translateX(120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* ============================================
CART DRAWER (offcanvas variant)
============================================ */
.cart-drawer.luxury-offcanvas {
width: 440px !important;
max-width: 100vw;
}
.cart-drawer .offcanvas-header { padding: 1.5rem; }
.cart-drawer .offcanvas-body { padding: 0; }
.cart-drawer .offcanvas-footer {
padding: 1.5rem;
border-top: 1px solid var(--color-line);
background: var(--color-bg-soft);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cart-loading {
text-align: center;
padding: 3rem 1rem;
color: var(--color-text-muted);
}
/* ============================================
FORM POLISH
============================================ */
.form-row { margin-bottom: 1rem; }
.form-row label {
display: block;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.4rem;
font-weight: 500;
}
.form-row.form-flex {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.form-hint {
font-size: 0.8rem;
color: var(--color-text-muted);
margin: 0.75rem 0;
line-height: 1.5;
}
.form-hint a { color: var(--color-primary); text-decoration: underline; }
.f-input {
width: 100%;
padding: 0.85rem 1rem;
border: 1px solid var(--color-line);
background: var(--color-secondary);
color: var(--color-primary);
font-size: 0.9rem;
font-family: var(--font-sans);
outline: none;
transition: border-color var(--t-fast);
border-radius: 0;
}
.f-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(28,28,28,0.05);
}
.f-input::placeholder { color: var(--color-text-muted); }
select.f-input {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
textarea.f-input { resize: vertical; min-height: 80px; }
.check-luxe {
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem !important;
color: var(--color-text-muted) !important;
cursor: pointer;
text-transform: none !important;
letter-spacing: 0 !important;
}
.check-luxe input { accent-color: var(--color-primary); }
.form-actions {
margin-top: var(--s-6);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
/* ============================================
SECTION POLISH
============================================ */
.section-light { background: var(--color-bg-soft); }
.section-dark {
background: var(--color-primary);
color: var(--color-secondary);
}
.section-dark .eyebrow { color: var(--color-accent); }
.section-dark .section-h { color: var(--color-secondary); }
.section-dark .section-sub { color: rgba(255,255,255,0.7); }
.eyebrow {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 1rem;
}
.eyebrow-gold { color: var(--color-accent); }
.section-head {
text-align: center;
margin-bottom: var(--s-10);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.section-h {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1.15;
margin-bottom: 1rem;
color: var(--color-primary);
font-weight: 400;
}
.section-h em { color: var(--color-accent); font-style: italic; }
.section-h-light { color: var(--color-secondary); }
.section-sub {
color: var(--color-text-muted);
line-height: 1.7;
font-size: 0.95rem;
max-width: 560px;
margin: 0 auto;
}
.section-cta {
text-align: center;
margin-top: var(--s-10);
}
.tag {
display: inline-block;
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
padding: 0.25rem 0.6rem;
background: var(--color-bg-soft);
margin-right: 0.4rem;
}
.box { display: block; }
.empty-cell {
text-align: center;
padding: 4rem 1rem !important;
color: var(--color-text-muted);
}
.empty-cell p { margin-top: 0.5rem; }
/* ============================================
FOOTER POLISH
============================================ */
.site-footer {
background: var(--color-primary);
color: var(--color-secondary);
padding: var(--s-16) 0 var(--s-6);
margin-top: var(--s-20);
}
.footer-newsletter {
text-align: center;
max-width: 600px;
margin: 0 auto var(--s-12);
padding-bottom: var(--s-12);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-newsletter .eyebrow {
color: var(--color-accent);
display: block;
margin-bottom: 1rem;
}
.footer-h {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3vw, 2.25rem);
line-height: 1.15;
margin-bottom: 1rem;
color: var(--color-secondary);
font-weight: 400;
}
.footer-h em { color: var(--color-accent); font-style: italic; }
.footer-tag {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
padding: 0.3rem 0.7rem;
border: 1px solid var(--color-line);
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.footer-sub {
color: rgba(255,255,255,0.7);
margin-bottom: var(--s-6);
line-height: 1.7;
}
.newsletter-form {
display: flex;
max-width: 480px;
margin: 0 auto;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.newsletter-form input {
flex: 1;
background: transparent;
border: none;
padding: 1rem 0;
color: var(--color-secondary);
font-size: 0.95rem;
outline: none;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form button {
background: transparent;
border: none;
color: var(--color-accent);
padding: 1rem 1rem;
cursor: pointer;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: color var(--t-fast);
}
.newsletter-form button:hover { color: var(--color-secondary); }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--s-8);
margin-bottom: var(--s-10);
}
@media (max-width: 767px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-grid .f-col:first-child { grid-column: 1 / -1; }
}
.f-col h4 {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: var(--s-4);
color: var(--color-secondary);
font-weight: 500;
}
.f-col ul { list-style: none; padding: 0; margin: 0; }
.f-col ul li { margin-bottom: 0.65rem; }
.f-col ul li a {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 0.85rem;
transition: color var(--t-fast);
}
.f-col ul li a:hover { color: var(--color-accent); }
.f-brand {
font-family: var(--font-serif);
font-size: 1.5rem;
letter-spacing: 0.3em;
color: var(--color-secondary);
display: block;
margin-bottom: 1rem;
}
.f-desc {
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
line-height: 1.7;
margin-bottom: var(--s-4);
}
.f-socials { display: flex; gap: 0.75rem; }
.f-socials a {
width: 40px;
height: 40px;
border: 1px solid rgba(255,255,255,0.2);
color: var(--color-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all var(--t-fast);
}
.f-socials a:hover {
background: var(--color-accent);
color: var(--color-primary);
border-color: var(--color-accent);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--s-6);
border-top: 1px solid rgba(255,255,255,0.1);
flex-wrap: wrap;
gap: 1rem;
color: rgba(255,255,255,0.6);
font-size: 0.8rem;
}
.footer-bottom em { color: var(--color-accent); font-style: italic; }
/* ============================================
WHATSAPP FAB POLISH
============================================ */
.wa-float {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
background: #25d366;
color: white;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(37,211,102,0.35);
z-index: 999;
transition: all var(--t-base);
text-decoration: none;
}
.wa-float:hover {
transform: scale(1.08);
box-shadow: 0 12px 32px rgba(37,211,102,0.5);
}
@media (max-width: 767px) {
.wa-float { width: 50px; height: 50px; bottom: 16px; right: 16px; }
.wa-float svg { width: 24px; height: 24px; }
}
/* ============================================
BUTTON POLISH (final pass)
============================================ */
.btn-luxe-solid {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: var(--color-primary);
color: var(--color-secondary);
text-decoration: none;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid var(--color-primary);
cursor: pointer;
transition: all var(--t-base);
border-radius: 0;
font-weight: 500;
}
.btn-luxe-solid:hover {
background: var(--color-accent);
color: var(--color-primary);
border-color: var(--color-accent);
}
.btn-luxe-line {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.95rem 1.85rem;
background: transparent;
color: var(--color-primary);
text-decoration: none;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid var(--color-primary);
cursor: pointer;
transition: all var(--t-base);
border-radius: 0;
font-weight: 500;
}
.btn-luxe-line:hover {
background: var(--color-primary);
color: var(--color-secondary);
}
.btn-luxe-light {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: var(--color-secondary);
color: var(--color-primary);
text-decoration: none;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid var(--color-secondary);
cursor: pointer;
transition: all var(--t-base);
font-weight: 500;
}
.btn-luxe-light:hover {
background: var(--color-accent);
color: var(--color-primary);
border-color: var(--color-accent);
}
.btn-luxe-outline-light {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: transparent;
color: var(--color-secondary);
text-decoration: none;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid var(--color-secondary);
cursor: pointer;
transition: all var(--t-base);
font-weight: 500;
}
.btn-luxe-outline-light:hover {
background: var(--color-secondary);
color: var(--color-primary);
}
.btn-full { width: 100%; }
.btn-lg { padding: 1.1rem 2.25rem; font-size: 0.85rem; }
.link-luxe {
color: var(--color-primary);
text-decoration: none;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
border-bottom: 1px solid var(--color-primary);
padding-bottom: 2px;
transition: all var(--t-fast);
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.link-luxe:hover {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
gap: 0.7rem;
}
.link-luxe i { font-size: 0.85em; transition: transform var(--t-fast); }
.link-luxe:hover i { transform: translateX(2px); }
/* ============================================
AUTH PAGE
============================================ */
.auth-page { min-height: calc(100vh - 80px); }
.auth-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: calc(100vh - 80px);
}
@media (max-width: 991px) {
.auth-split { grid-template-columns: 1fr; }
.auth-visual { display: none; }
}
.auth-split.single { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
.auth-visual {
position: relative;
background: var(--color-bg-soft);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-12);
}
.auth-visual-overlay {
text-align: center;
color: var(--color-secondary);
background: rgba(0,0,0,0.4);
padding: var(--s-12);
max-width: 480px;
width: 100%;
}
.auth-brand {
font-family: var(--font-serif);
font-size: 1.5rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: var(--s-8);
text-align: center;
display: block;
text-decoration: none;
}
.auth-quote {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.5rem;
line-height: 1.4;
margin-bottom: 1.5rem;
}
.auth-quote-by {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.8;
}
.auth-form-wrap {
width: 100%;
max-width: 420px;
margin: 0 auto;
padding: var(--s-12) var(--s-6);
display: flex;
align-items: center;
min-height: 100%;
}
.auth-form-inner { width: 100%; }
.auth-h {
font-family: var(--font-serif);
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--color-primary);
font-weight: 400;
}
.auth-sub {
color: var(--color-text-muted);
margin-bottom: var(--s-8);
font-size: 0.95rem;
}
.auth-form { display: grid; gap: 1rem; }
.auth-footer {
margin-top: var(--s-6);
text-align: center;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.auth-footer a { color: var(--color-primary); text-decoration: underline; margin-left: 0.25rem; }
.auth-alert {
padding: 0.85rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.85rem;
border-left: 3px solid;
}
.auth-alert-error { background: #fce4ec; color: #c2185b; border-color: #c2185b; }
.auth-alert-success { background: #e8f5e9; color: #2e7d32; border-color: #2e7d32; }
/* ============================================
SUCCESS PAGE
============================================ */
.success-section {
padding: var(--s-20) 0;
text-align: center;
}
.success-wrap {
max-width: 600px;
margin: 0 auto;
padding: var(--s-8) var(--s-4);
}
.success-icon {
width: 80px;
height: 80px;
background: var(--color-accent);
color: var(--color-primary);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin: 0 auto var(--s-6);
}
.success-info { margin-bottom: var(--s-8); }
.success-info h1 {
font-family: var(--font-serif);
font-size: 2.25rem;
margin-bottom: 1rem;
font-weight: 400;
}
.success-info p {
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 0.5rem;
}
.success-info strong { color: var(--color-primary); }
.success-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: var(--s-6);
}
/* ============================================
REVIEWS POLISH
============================================ */
.reviews-section {
padding: var(--s-12) 0;
border-top: 1px solid var(--color-line);
}
.reviews-summary {
display: grid;
grid-template-columns: 240px 1fr;
gap: var(--s-8);
margin-bottom: var(--s-10);
padding-bottom: var(--s-8);
border-bottom: 1px solid var(--color-line);
}
@media (max-width: 767px) {
.reviews-summary { grid-template-columns: 1fr; }
}
.rs-score {
text-align: center;
padding: var(--s-6);
background: var(--color-bg-soft);
}
.rs-num {
font-family: var(--font-serif);
font-size: 3.5rem;
line-height: 1;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.rs-stars {
color: var(--color-accent);
margin-bottom: 0.5rem;
letter-spacing: 3px;
}
.rs-count {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.rs-list { display: flex; flex-direction: column; gap: var(--s-4); }
.review-card {
padding: var(--s-5);
background: var(--color-bg-soft);
border-left: 3px solid var(--color-accent);
}
.rv-head {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 1rem;
}
.rv-stars { color: var(--color-accent); letter-spacing: 2px; font-size: 0.85rem; }
.rv-date { font-size: 0.75rem; color: var(--color-text-muted); }
.rv-title {
font-family: var(--font-serif);
font-size: 1.1rem;
margin: 0.5rem 0;
color: var(--color-primary);
font-weight: 400;
}
.rv-text { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 1rem; }
.rv-author { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); }
.review-form-wrap {
background: var(--color-bg-soft);
padding: var(--s-8);
margin-top: var(--s-6);
}
.review-form h3 {
font-family: var(--font-serif);
font-size: 1.5rem;
margin-bottom: 1.5rem;
font-weight: 400;
}
.review-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 600px) {
.review-form .form-row { grid-template-columns: 1fr; }
}
.rating-input {
display: inline-flex;
flex-direction: row-reverse;
gap: 0.25rem;
}
.rating-input input { display: none; }
.rating-input label {
font-size: 1.5rem;
color: var(--color-line);
cursor: pointer;
transition: color var(--t-fast);
}
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
color: var(--color-accent);
}
.rating-stars { display: inline-flex; gap: 0.25rem; }
.rating-stars label { cursor: pointer; padding: 0.25rem; }
.rating-stars input:checked ~ label i { color: var(--color-accent); }
/* ============================================
COLLECTIONS POLISH
============================================ */
.collections-section { padding: var(--s-16) 0; }
.collections-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
height: 600px;
}
@media (max-width: 991px) {
.collections-grid { grid-template-columns: 1fr; height: auto; }
}
.collection-card {
position: relative;
overflow: hidden;
background: var(--color-bg-soft);
text-decoration: none;
color: inherit;
transition: all var(--t-base);
}
.collection-card.coll-0,
.collection-card.coll-1 {
grid-row: span 2;
}
.coll-img { position: absolute; inset: 0; }
.coll-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s ease;
}
.collection-card:hover .coll-img img { transform: scale(1.06); }
.coll-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
transition: opacity var(--t-base);
}
.collection-card:hover .coll-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%); }
.coll-content {
position: absolute;
inset: auto 2rem 2rem 2rem;
color: var(--color-secondary);
z-index: 2;
}
.coll-eyebrow {
display: block;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 0.5rem;
}
.coll-name {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 2.5vw, 2.25rem);
line-height: 1.1;
margin-bottom: 0.5rem;
color: var(--color-secondary);
font-weight: 400;
}
.coll-sub {
font-size: 0.9rem;
opacity: 0.85;
margin-bottom: 1rem;
line-height: 1.5;
}
.coll-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
transition: gap var(--t-fast);
}
.collection-card:hover .coll-link { gap: 0.85rem; }
/* ============================================
EDITORIAL SPLIT
============================================ */
.editorial-banner { padding: 0; }
.editorial-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 600px;
}
@media (max-width: 991px) {
.editorial-split { grid-template-columns: 1fr; }
}
.editorial-image {
background-size: cover;
background-position: center;
min-height: 400px;
}
.editorial-content {
background: var(--color-bg-soft);
padding: var(--s-12);
display: flex;
flex-direction: column;
justify-content: center;
}
.editorial-content h2 {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.15;
margin-bottom: 1.5rem;
color: var(--color-primary);
font-weight: 400;
}
.editorial-content p {
color: var(--color-text-muted);
line-height: 1.8;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
/* ============================================
BRAND STORY POLISH
============================================ */
.brand-story { padding: var(--s-20) 0; }
.story-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--s-12);
align-items: center;
}
@media (max-width: 991px) {
.story-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}
.story-h {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.1;
margin-bottom: var(--s-6);
color: var(--color-primary);
font-weight: 400;
}
.story-h em { color: var(--color-accent); font-style: italic; }
.story-p {
color: var(--color-text-muted);
line-height: 1.85;
margin-bottom: 1.25rem;
font-size: 1rem;
}
.story-numbers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-6);
}
.num-item {
text-align: center;
padding: var(--s-6);
background: var(--color-bg-soft);
border: 1px solid var(--color-line);
}
.num {
display: block;
font-family: var(--font-serif);
font-size: 2.5rem;
color: var(--color-accent);
line-height: 1;
margin-bottom: 0.5rem;
}
.num-label {
display: block;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* ============================================
INSTAGRAM & TESTIMONIALS
============================================ */
.instagram-section { padding: var(--s-16) 0; }
.instagram-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
}
@media (max-width: 767px) {
.instagram-grid { grid-template-columns: repeat(3, 1fr); }
}
.ig-item {
position: relative;
aspect-ratio: 1;
overflow: hidden;
display: block;
}
.ig-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.ig-item:hover img { transform: scale(1.08); }
.ig-icon {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: opacity var(--t-base);
}
.ig-item:hover .ig-icon { opacity: 1; }
.testimonials-section { padding: var(--s-16) 0; }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--s-6);
}
.testimonial-card {
padding: var(--s-6);
background: var(--color-bg-soft);
border-top: 2px solid var(--color-accent);
}
.t-stars {
color: var(--color-accent);
margin-bottom: 1rem;
letter-spacing: 3px;
font-size: 0.9rem;
}
.t-text {
color: var(--color-text-muted);
line-height: 1.8;
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
margin-bottom: 1.5rem;
}
.t-author { display: flex; flex-direction: column; gap: 0.2rem; }
.t-name { font-weight: 500; color: var(--color-primary); }
.t-role { font-size: 0.8rem; color: var(--color-text-muted); letter-spacing: 0.05em; }
/* ============================================
QTY CONTROL
============================================ */
.qty-control {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-line);
height: 48px;
}
.qty-btn {
width: 40px;
height: 100%;
background: transparent;
border: none;
color: var(--color-primary);
cursor: pointer;
font-size: 1rem;
transition: background var(--t-fast);
}
.qty-btn:hover { background: var(--color-bg-soft); }
.qty-input {
width: 50px;
height: 100%;
border: none;
text-align: center;
font-size: 0.9rem;
background: transparent;
color: var(--color-primary);
-moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ============================================
PRODUCT DETAIL V2 SUPPLEMENT
============================================ */
.shipping-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.5rem;
}
.shipping-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--color-line);
background: var(--color-secondary);
cursor: pointer;
transition: all var(--t-fast);
}
.shipping-option:has(input:checked) {
border-color: var(--color-primary);
background: var(--color-bg-soft);
}
.shipping-option input { accent-color: var(--color-primary); }
.shipping-option strong {
display: block;
color: var(--color-primary);
font-size: 0.85rem;
}
.shipping-option span {
font-size: 0.75rem;
color: var(--color-text-muted);
}
/* ============================================
FILTERS POLISH
============================================ */
.coll-0 {
grid-row: span 2;
}
.coll-1 {
grid-row: span 2;
}
/* ============================================
HEADER DROPDOWN (if any)
============================================ */
.header-dropdown {
position: relative;
}
.header-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--color-secondary);
box-shadow: 0 12px 32px rgba(0,0,0,0.1);
min-width: 200px;
padding: 1rem 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all var(--t-fast);
z-index: 100;
}
.header-dropdown:hover .header-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.header-dropdown-menu a {
display: block;
padding: 0.5rem 1.25rem;
color: var(--color-primary);
text-decoration: none;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background var(--t-fast);
}
.header-dropdown-menu a:hover { background: var(--color-bg-soft); }
/* ============================================
ANIMATIONS POLISH
============================================ */
.fade-in-up {
animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================
RESPONSIVE POLISH
============================================ */
@media (max-width: 991px) {
.auth-visual { min-height: 300px; }
}
@media (max-width: 767px) {
:root {
--s-4: 1rem;
--s-6: 1.25rem;
--s-8: 1.5rem;
--s-10: 2rem;
--s-12: 2.5rem;
}
.container { padding: 0 var(--s-4); }
.hero-title { font-size: 2.25rem; }
.section-h { font-size: 1.85rem; }
.page-h { font-size: 1.85rem; }
.p-name { font-size: 1.5rem; }
.auth-h { font-size: 1.5rem; }
.checkout-grid,
.account-grid,
.pd-layout {
gap: var(--s-6);
}
.nav-link { display: none; }
.header-actions .header-icon:not(.mobile-search):not(.header-cart):not(.mobile-toggle) { display: none !important; }
}
@media (max-width: 480px) {
.hero-title { font-size: 1.85rem; }
.section-h { font-size: 1.5rem; }
.od-head { grid-template-columns: 1fr; }
.acc-order-row { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* ============================================
PRINT POLISH
============================================ */
@media print {
.site-header,
.site-footer,
.wa-float,
.hero-controls,
.luxury-offcanvas {
display: none !important;
}
body { background: white; color: black; }
a { color: black; text-decoration: underline; }
}
/* =================================================================
███╗ ███╗ █████╗ ███████╗██╗ █████╗ ██████╗ ██████╗ ████████╗██╗ ██╗██╗ ██████╗
MAFIA GOTHIC LUXURY · COMPONENT OVERRIDES
================================================================= */
:root {
--shadow-gold: 0 0 40px rgba(201,169,97,0.25);
--shadow-gold-sm: 0 0 20px rgba(201,169,97,0.15);
}
/* === SECTION DIVIDERS / ORNAMENTS === */
.divider-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin: var(--s-12) auto;
max-width: 320px;
color: var(--color-accent);
}
.divider-ornament::before,
.divider-ornament::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-accent-deep), transparent);
}
.divider-ornament span {
font-family: var(--font-gothic);
font-size: 1rem;
letter-spacing: 0.6em;
}
.divider-roman {
text-align: center;
font-family: var(--font-gothic);
color: var(--color-accent);
font-size: 0.85rem;
letter-spacing: 0.5em;
margin: var(--s-10) 0;
position: relative;
}
.divider-roman::before,
.divider-roman::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 80px);
height: 1px;
background: var(--color-line);
}
.divider-roman::before { left: 0; }
.divider-roman::after { right: 0; }
.section-divider {
position: relative;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-accent-deep) 20%,
var(--color-accent) 50%,
var(--color-accent-deep) 80%,
transparent 100%);
margin: var(--s-16) 0;
opacity: 0.5;
}
/* === TOP ANNOUNCE BAR === */
.announce-bar {
background: var(--color-bg-darker) !important;
color: var(--color-accent) !important;
font-family: var(--font-gothic) !important;
font-size: 0.65rem !important;
letter-spacing: 0.4em !important;
text-transform: uppercase !important;
padding: 0.75rem 0 !important;
overflow: hidden;
position: relative;
border-bottom: 1px solid var(--color-line);
}
.announce-bar::before,
.announce-bar::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.announce-bar::before {
left: 0;
background: linear-gradient(90deg, var(--color-bg-darker), transparent);
}
.announce-bar::after {
right: 0;
background: linear-gradient(270deg, var(--color-bg-darker), transparent);
}
.announce-track {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
white-space: nowrap;
animation: marquee 45s linear infinite;
padding: 0 3rem;
}
.announce-track .dot {
color: var(--color-blood);
font-size: 0.5rem;
animation: pulse 2s ease-in-out infinite;
}
.announce-track strong {
color: var(--color-secondary);
font-weight: 500;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes pulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
/* === HEADER === */
.site-header {
background: rgba(10,10,10,0.85) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 1px solid var(--color-line) !important;
position: sticky;
top: 0;
z-index: 1000;
transition: all var(--t-base);
}
.site-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 1px;
background: var(--color-accent);
transition: width var(--t-elegant);
}
.site-header.scrolled::after { width: 100%; }
.site-header.scrolled { background: rgba(10,10,10,0.95) !important; }
.brand-mark {
font-family: var(--font-display) !important;
font-size: 1.5rem !important;
letter-spacing: 0.35em !important;
color: var(--color-secondary) !important;
text-decoration: none;
font-weight: 400 !important;
position: relative;
display: inline-block;
}
.brand-mark::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--color-accent);
transition: width var(--t-elegant);
}
.brand-mark:hover { color: var(--color-accent) !important; }
.brand-mark:hover::after { width: 100%; }
.brand-mark.small { font-size: 1.1rem !important; }
.header-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 0;
gap: 1rem;
}
.primary-nav {
display: flex;
align-items: center;
gap: 2.5rem;
flex: 1;
justify-content: center;
}
.nav-link {
color: var(--color-secondary) !important;
font-family: var(--font-gothic) !important;
font-size: 0.72rem !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
position: relative;
padding: 0.5rem 0;
transition: color var(--t-fast);
font-weight: 400;
}
.nav-link::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
background: var(--color-accent);
border-radius: 50%;
opacity: 0;
transition: all var(--t-fast);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: var(--color-accent);
transition: all var(--t-elegant);
transform: translateX(-50%);
}
.nav-link:hover { color: var(--color-accent) !important; }
.nav-link:hover::before { opacity: 1; top: -8px; }
.nav-link:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 0.25rem; }
.header-icon {
color: var(--color-secondary) !important;
background: transparent !important;
width: 44px;
height: 44px;
border: none;
font-size: 1.05rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--t-fast);
text-decoration: none;
position: relative;
}
.header-icon::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid transparent;
transition: all var(--t-fast);
}
.header-icon:hover { color: var(--color-accent) !important; transform: translateY(-1px); }
.header-icon:hover::before { inset: 6px; border-color: var(--color-accent); }
.count-badge {
background: var(--color-accent) !important;
color: var(--color-bg) !important;
font-family: var(--font-mono) !important;
border: 1px solid var(--color-bg);
}
/* === MOBILE NAV === */
.luxury-offcanvas {
background: var(--color-bg) !important;
border: none !important;
box-shadow: -20px 0 60px rgba(0,0,0,0.7);
color: var(--color-secondary) !important;
}
.luxury-offcanvas .offcanvas-header {
padding: 1.5rem;
border-bottom: 1px solid var(--color-line);
}
.luxury-offcanvas .btn-close {
background: transparent !important;
border: 1px solid var(--color-accent) !important;
width: 40px;
height: 40px;
border-radius: 0;
opacity: 1 !important;
color: var(--color-accent) !important;
position: relative;
}
.luxury-offcanvas .btn-close::before,
.luxury-offcanvas .btn-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 1px;
background: var(--color-accent);
}
.luxury-offcanvas .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.luxury-offcanvas .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.luxury-offcanvas .btn-close:hover { background: var(--color-accent) !important; }
.luxury-offcanvas .btn-close:hover::before,
.luxury-offcanvas .btn-close:hover::after { background: var(--color-bg); }
.mobile-nav { display: flex; flex-direction: column; }
.m-link {
padding: 1.25rem 0 !important;
color: var(--color-secondary) !important;
font-family: var(--font-display) !important;
font-size: 1.1rem !important;
border-bottom: 1px solid var(--color-line);
transition: all var(--t-base);
display: block;
letter-spacing: 0.05em;
}
.m-link:hover { padding-left: 1rem; color: var(--color-accent) !important; border-bottom-color: var(--color-accent); }
.m-divider { height: 1px; background: var(--color-line); margin: 0.75rem 0; }
/* === HERO (Mafia Cathedral) === */
.luxury-hero {
position: relative;
height: 100vh;
min-height: 700px;
overflow: hidden;
background: var(--color-bg-darker) !important;
}
.hero-slider { position: relative; height: 100%; }
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-image { position: absolute; inset: 0; overflow: hidden; }
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: grayscale(0.2) contrast(1.08) brightness(0.65);
animation: heroZoom 16s ease-out infinite alternate;
}
@keyframes heroZoom {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.2) 30%, rgba(10,10,10,0.85) 100%),
linear-gradient(90deg, rgba(10,10,10,0.7) 0%, transparent 50%);
}
.hero-overlay::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(201,169,97,0.02) 2px, rgba(201,169,97,0.02) 3px);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 3;
color: var(--color-secondary);
max-width: 920px;
padding: 0 var(--s-6);
}
.hero-eyebrow {
display: inline-flex !important;
align-items: center;
gap: 1rem;
font-family: var(--font-gothic) !important;
font-size: 0.7rem !important;
letter-spacing: 0.5em !important;
text-transform: uppercase !important;
margin-bottom: 2rem;
color: var(--color-accent) !important;
opacity: 1;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content: '';
width: 40px;
height: 1px;
background: var(--color-accent);
}
.hero-title {
font-family: var(--font-display) !important;
font-size: clamp(3rem, 8vw, 7rem) !important;
line-height: 0.95 !important;
font-weight: 400 !important;
margin-bottom: 2rem;
letter-spacing: 0.01em;
color: var(--color-secondary) !important;
text-shadow: 0 4px 40px rgba(0,0,0,0.6);
}
.hero-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
color: var(--color-accent-bright);
display: block;
}
.hero-subtitle {
font-family: var(--font-serif) !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
line-height: 1.7 !important;
margin-bottom: 3rem;
color: rgba(244,237,224,0.85);
max-width: 560px;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-controls {
position: absolute;
right: 2.5rem;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 1rem;
z-index: 4;
}
.hero-dots { display: flex; flex-direction: column; gap: 0.75rem; }
.hero-dot {
font-family: var(--font-gothic);
font-size: 0.7rem;
color: rgba(244,237,224,0.4);
cursor: pointer;
transition: all var(--t-base);
padding: 0.25rem 0;
text-align: center;
letter-spacing: 0.3em;
width: 40px;
border-left: 1px solid rgba(244,237,224,0.2);
padding-left: 1rem;
}
.hero-dot:hover { color: var(--color-secondary); border-color: var(--color-accent); }
.hero-dot.active { color: var(--color-accent); border-color: var(--color-accent); }
.hero-prev,
.hero-next {
position: absolute;
bottom: 3rem;
width: 50px;
height: 50px;
background: transparent !important;
border: 1px solid rgba(244,237,224,0.3) !important;
color: var(--color-secondary) !important;
cursor: pointer;
transition: all var(--t-base);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
font-family: var(--font-gothic);
letter-spacing: 0.1em;
}
.hero-prev { left: 2.5rem; }
.hero-next { right: 2.5rem; }
.hero-prev:hover,
.hero-next:hover {
background: var(--color-accent) !important;
color: var(--color-bg) !important;
border-color: var(--color-accent) !important;
box-shadow: var(--shadow-gold);
}
.hero-scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: var(--color-secondary);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
font-family: var(--font-gothic);
font-size: 0.6rem;
letter-spacing: 0.5em;
text-transform: uppercase;
opacity: 0.7;
}
.scroll-line {
width: 1px;
height: 60px;
background: rgba(244,237,224,0.2);
position: relative;
overflow: hidden;
}
.scroll-line::after {
content: '';
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 50%;
background: var(--color-accent);
animation: scrollLine 2.5s ease-in-out infinite;
}
@keyframes scrollLine {
0% { top: -50%; }
100% { top: 100%; }
}
@media (max-width: 991px) {
.hero-controls { right: 1rem; gap: 0.75rem; }
.hero-prev, .hero-next { width: 44px; height: 44px; bottom: 1.5rem; }
.hero-prev { left: 1rem; }
.hero-next { right: 1rem; }
.luxury-hero { height: 90vh; min-height: 600px; }
}
/* === BUTTONS (Gothic Luxury) === */
.btn-luxe-solid {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.15rem 2.5rem !important;
background: var(--color-accent) !important;
color: var(--color-bg) !important;
font-family: var(--font-gothic) !important;
font-size: 0.72rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
border: 1px solid var(--color-accent) !important;
border-radius: 0;
font-weight: 500;
position: relative;
overflow: hidden;
transition: all var(--t-elegant);
}
.btn-luxe-solid::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-secondary);
transform: translateX(-101%);
transition: transform var(--t-elegant);
z-index: 0;
}
.btn-luxe-solid > * { position: relative; z-index: 1; }
.btn-luxe-solid:hover::before { transform: translateX(0); }
.btn-luxe-solid:hover {
box-shadow: var(--shadow-gold);
border-color: var(--color-secondary) !important;
}
.btn-luxe-line {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.15rem 2.5rem !important;
background: transparent !important;
color: var(--color-accent) !important;
font-family: var(--font-gothic) !important;
font-size: 0.72rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
border: 1px solid var(--color-accent) !important;
border-radius: 0;
font-weight: 500;
position: relative;
overflow: hidden;
transition: all var(--t-elegant);
}
.btn-luxe-line::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--t-elegant);
z-index: 0;
}
.btn-luxe-line > * { position: relative; z-index: 1; }
.btn-luxe-line:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-luxe-line:hover { color: var(--color-bg) !important; }
.btn-luxe-light {
background: var(--color-secondary) !important;
color: var(--color-bg) !important;
border: 1px solid var(--color-secondary) !important;
padding: 1.15rem 2.5rem !important;
font-family: var(--font-gothic) !important;
font-size: 0.72rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
}
.btn-luxe-light:hover {
background: var(--color-accent) !important;
border-color: var(--color-accent) !important;
}
.btn-luxe-outline-light {
background: transparent !important;
color: var(--color-secondary) !important;
border: 1px solid var(--color-secondary) !important;
padding: 1.15rem 2.5rem !important;
font-family: var(--font-gothic) !important;
font-size: 0.72rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
}
.btn-luxe-outline-light:hover {
background: var(--color-secondary) !important;
color: var(--color-bg) !important;
}
.btn-full { width: 100%; }
.btn-lg { padding: 1.35rem 3rem !important; font-size: 0.82rem !important; }
.link-luxe {
color: var(--color-secondary) !important;
font-family: var(--font-gothic) !important;
font-size: 0.72rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
border-bottom: 1px solid var(--color-accent) !important;
padding: 0.3rem 0 0.45rem !important;
transition: all var(--t-elegant);
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-weight: 400;
}
.link-luxe:hover {
color: var(--color-accent-bright) !important;
border-bottom-color: var(--color-accent-bright) !important;
gap: 1rem;
}
.link-luxe i { font-size: 0.85em; transition: transform var(--t-elegant); }
.link-luxe:hover i { transform: translateX(4px); }
/* === EYEBROW + SECTION HEADS === */
.eyebrow {
display: inline-flex !important;
align-items: center;
gap: 0.85rem !important;
font-family: var(--font-gothic) !important;
font-size: 0.7rem !important;
letter-spacing: 0.4em !important;
text-transform: uppercase !important;
color: var(--color-accent) !important;
margin-bottom: 1.5rem;
font-weight: 500;
}
.eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: var(--color-accent);
}
.section-head {
text-align: center;
margin-bottom: var(--s-16);
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::after {
content: '';
width: 28px;
height: 1px;
background: var(--color-accent);
}
.section-h {
font-family: var(--font-display) !important;
font-size: clamp(2.25rem, 5vw, 4rem) !important;
line-height: 1 !important;
margin-bottom: 1.5rem;
color: var(--color-secondary) !important;
font-weight: 400;
letter-spacing: 0.005em;
}
.section-h em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
color: var(--color-accent);
}
.section-sub {
color: var(--color-text-muted) !important;
font-family: var(--font-serif) !important;
font-style: italic !important;
font-weight: 300 !important;
line-height: 1.8 !important;
font-size: 1.1rem !important;
max-width: 580px;
margin: 0 auto;
}
.section-cta {
text-align: center;
margin-top: var(--s-12);
}
/* === SECTION BACKGROUNDS === */
.section-light { background: var(--color-bg-soft) !important; color: var(--color-secondary) !important; }
.section-dark { background: var(--color-bg-darker) !important; color: var(--color-secondary) !important; }
.section-void { background: var(--color-bg) !important; color: var(--color-secondary) !important; }
.section-noir {
background:
radial-gradient(ellipse at top, rgba(201,169,97,0.06) 0%, transparent 50%),
var(--color-bg-darker) !important;
color: var(--color-secondary);
}
/* === COLLECTIONS (Cathedral Style) === */
.collections-section {
padding: var(--s-24) 0;
background: var(--color-bg);
}
.collections-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--color-line);
height: 720px;
}
@media (max-width: 991px) {
.collections-grid { grid-template-columns: 1fr; height: auto; }
}
.collection-card {
position: relative;
overflow: hidden;
background: var(--color-bg-soft);
text-decoration: none;
color: inherit;
transition: all var(--t-elegant);
isolation: isolate;
}
.collection-card.coll-0,
.collection-card.coll-1 {
grid-row: span 2;
}
.coll-img {
position: absolute;
inset: 0;
overflow: hidden;
}
.coll-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.4) contrast(1.1) brightness(0.7);
transition: all 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.collection-card:hover .coll-img img {
transform: scale(1.08);
filter: grayscale(0) contrast(1.05) brightness(0.85);
}
.coll-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.85) 100%);
transition: background var(--t-elegant);
}
.collection-card:hover .coll-overlay {
background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.95) 100%);
}
.coll-overlay::after {
content: '';
position: absolute;
top: 1.5rem;
left: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
border: 1px solid var(--color-accent);
opacity: 0;
transform: scale(0.95);
transition: all var(--t-elegant);
}
.collection-card:hover .coll-overlay::after { opacity: 0.5; transform: scale(1); }
.coll-content {
position: absolute;
inset: auto 2.5rem 2.5rem 2.5rem;
color: var(--color-secondary);
z-index: 3;
}
.coll-eyebrow {
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
font-family: var(--font-gothic) !important;
font-size: 0.65rem !important;
letter-spacing: 0.4em !important;
text-transform: uppercase !important;
color: var(--color-accent) !important;
margin-bottom: 0.75rem;
}
.coll-eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: var(--color-accent);
}
.coll-name {
font-family: var(--font-display) !important;
font-size: clamp(2rem, 3vw, 2.75rem) !important;
line-height: 1 !important;
margin-bottom: 0.75rem;
color: var(--color-secondary) !important;
font-weight: 400;
letter-spacing: 0.02em;
}
.coll-sub {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: 0.95rem;
color: rgba(244,237,224,0.7);
margin-bottom: 1.5rem;
line-height: 1.5;
opacity: 0;
transform: translateY(10px);
transition: all var(--t-elegant);
}
.collection-card:hover .coll-sub { opacity: 1; transform: translateY(0); }
.coll-link {
display: inline-flex !important;
align-items: center;
gap: 0.75rem;
font-family: var(--font-gothic) !important;
font-size: 0.7rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
color: var(--color-accent) !important;
}
.coll-link::after {
content: '';
width: 30px;
height: 1px;
background: var(--color-accent);
transition: width var(--t-elegant);
}
.collection-card:hover .coll-link { gap: 1rem; }
.collection-card:hover .coll-link::after { width: 50px; }
/* === PRODUCT CARDS (Mafia Style) === */
.product-card {
display: block;
text-decoration: none;
color: inherit;
transition: all var(--t-elegant);
position: relative;
}
.pc-media {
position: relative;
aspect-ratio: 3 / 4;
background: var(--color-bg-elevated);
overflow: hidden;
margin-bottom: 1.25rem;
border: 1px solid transparent;
transition: all var(--t-elegant);
}
.product-card:hover .pc-media {
border-color: var(--color-accent-deep);
box-shadow: var(--shadow-gold-sm);
}
.pc-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.9) contrast(1.05);
transition: all var(--t-elegant);
}
.product-card:hover .pc-img {
transform: scale(1.05);
filter: brightness(1) contrast(1.05);
}
.pc-badges {
position: absolute;
top: 1rem;
left: 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
z-index: 3;
}
.pc-badge {
background: var(--color-bg-darker);
color: var(--color-accent);
padding: 0.35rem 0.75rem;
font-family: var(--font-gothic);
font-size: 0.6rem;
letter-spacing: 0.25em;
text-transform: uppercase;
font-weight: 500;
border: 1px solid var(--color-accent-deep);
}
.pc-badge-sale {
background: var(--color-blood);
color: var(--color-secondary);
border-color: var(--color-blood);
}
.pc-wishlist {
position: absolute;
top: 1rem;
right: 1rem;
width: 42px;
height: 42px;
background: rgba(10,10,10,0.7);
backdrop-filter: blur(8px);
border: 1px solid var(--color-line);
color: var(--color-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(-4px);
transition: all var(--t-base);
z-index: 3;
}
.product-card:hover .pc-wishlist { opacity: 1; transform: translateY(0); }
.pc-wishlist:hover { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.pc-wishlist.active { opacity: 1; color: var(--color-accent); border-color: var(--color-accent); }
.pc-quick {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(10,10,10,0.95);
backdrop-filter: blur(12px);
color: var(--color-accent);
padding: 1rem;
text-align: center;
font-family: var(--font-gothic);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
transform: translateY(100%);
transition: transform var(--t-elegant);
z-index: 3;
border-top: 1px solid var(--color-accent);
}
.product-card:hover .pc-quick { transform: translateY(0); }
.pc-body {
padding: 0 0.25rem;
text-align: center;
}
.pc-collection {
font-family: var(--font-gothic);
font-size: 0.65rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 0.5rem;
display: block;
}
.pc-name {
font-family: var(--font-serif) !important;
font-size: 1.05rem !important;
line-height: 1.3;
color: var(--color-secondary) !important;
margin: 0 0 0.65rem;
font-weight: 400 !important;
font-style: italic;
transition: color var(--t-base);
}
.product-card:hover .pc-name { color: var(--color-accent); }
.pc-price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.6rem;
font-family: var(--font-mono);
}
.pc-now {
color: var(--color-accent) !important;
font-size: 0.95rem;
letter-spacing: 0.05em;
}
.pc-old {
font-size: 0.8rem;
color: var(--color-text-dim);
text-decoration: line-through;
}
.color-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid var(--color-line);
}
.product-grid {
display: grid;
gap: var(--s-10);
}
.product-grid-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) {
.product-grid-3, .product-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.product-grid-3, .product-grid-4 { grid-template-columns: 1fr; }
}
/* === BRAND STORY === */
.brand-story {
padding: var(--s-24) 0;
position: relative;
background: var(--color-bg);
}
.brand-story::before {
content: 'NOSTRA';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-size: clamp(8rem, 22vw, 20rem);
color: rgba(201,169,97,0.025);
letter-spacing: 0.2em;
pointer-events: none;
z-index: 0;
white-space: nowrap;
}
.story-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--s-16);
align-items: center;
position: relative;
z-index: 2;
}
@media (max-width: 991px) { .story-grid { grid-template-columns: 1fr; gap: var(--s-10); } }
.story-h {
font-family: var(--font-display) !important;
font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
line-height: 1 !important;
margin-bottom: var(--s-8);
color: var(--color-secondary) !important;
font-weight: 400;
letter-spacing: 0.005em;
}
.story-h em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
color: var(--color-accent);
}
.story-p {
color: var(--color-text-muted);
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
line-height: 1.9;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.story-numbers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-6);
}
.num-item {
text-align: center;
padding: var(--s-8) var(--s-6);
background: rgba(28,28,28,0.6);
border: 1px solid var(--color-line);
transition: all var(--t-base);
backdrop-filter: blur(8px);
}
.num-item:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: var(--shadow-gold-sm);
}
.num {
display: block;
font-family: var(--font-display);
font-size: 3.5rem;
color: var(--color-accent);
line-height: 1;
margin-bottom: 0.75rem;
}
.num-label {
display: block;
font-family: var(--font-gothic);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* === EDITORIAL SPLIT === */
.editorial-banner {
position: relative;
overflow: hidden;
}
.editorial-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
background: var(--color-bg-darker);
}
@media (max-width: 991px) { .editorial-split { grid-template-columns: 1fr; } }
.editorial-image {
background-size: cover;
background-position: center;
min-height: 500px;
position: relative;
overflow: hidden;
filter: grayscale(0.25) contrast(1.05) brightness(0.85);
}
.editorial-image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 60%, rgba(10,10,10,0.4) 100%);
}
.editorial-content {
padding: var(--s-16);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--color-bg-darker);
position: relative;
}
.editorial-content::before {
content: '';
position: absolute;
top: 2rem;
left: 2rem;
bottom: 2rem;
width: 1px;
background: var(--color-accent);
opacity: 0.4;
}
.editorial-content h2 {
font-family: var(--font-display);
font-size: clamp(2.25rem, 4vw, 3.5rem);
line-height: 1;
margin-bottom: 2rem;
color: var(--color-secondary);
font-weight: 400;
padding-left: 2rem;
}
.editorial-content h2 em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
color: var(--color-accent);
}
.editorial-content p {
color: var(--color-text-muted);
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
line-height: 1.9;
margin-bottom: 2rem;
font-size: 1.05rem;
padding-left: 2rem;
}
.editorial-content > * { padding-left: 2rem; position: relative; z-index: 2; }
/* === TESTIMONIALS === */
.testimonials-section {
padding: var(--s-24) 0;
background:
radial-gradient(ellipse at center, rgba(201,169,97,0.05) 0%, transparent 60%),
var(--color-bg);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--s-8);
}
.testimonial-card {
padding: var(--s-8) !important;
background: rgba(28,28,28,0.5) !important;
border: 1px solid var(--color-line) !important;
border-top: 2px solid var(--color-accent) !important;
position: relative;
transition: all var(--t-elegant);
backdrop-filter: blur(8px);
}
.testimonial-card::before {
content: '"';
position: absolute;
top: -10px;
right: var(--s-6);
font-family: var(--font-display);
font-size: 5rem;
color: var(--color-accent);
opacity: 0.3;
line-height: 1;
}
.testimonial-card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: var(--shadow-gold-sm);
}
.t-stars {
color: var(--color-accent) !important;
margin-bottom: 1.5rem;
letter-spacing: 4px;
font-size: 0.85rem;
}
.t-text {
color: var(--color-text-muted) !important;
line-height: 1.9;
font-family: var(--font-serif) !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: 1rem !important;
margin-bottom: 2rem;
}
.t-author {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-line);
}
.t-name {
font-family: var(--font-gothic) !important;
font-size: 0.78rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
color: var(--color-secondary) !important;
font-weight: 500;
}
.t-role {
font-family: var(--font-serif) !important;
font-style: italic !important;
font-size: 0.85rem;
color: var(--color-text-muted);
}
/* === INSTAGRAM === */
.instagram-section { padding: var(--s-20) 0; }
.instagram-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px;
background: var(--color-line);
}
@media (max-width: 767px) {
.instagram-grid { grid-template-columns: repeat(3, 1fr); }
}
.ig-item {
position: relative;
aspect-ratio: 1;
overflow: hidden;
display: block;
background: var(--color-bg-soft);
}
.ig-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) brightness(0.7);
transition: all var(--t-elegant);
}
.ig-item:hover img {
transform: scale(1.1);
filter: grayscale(0) brightness(1);
}
.ig-icon {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
font-size: 1.5rem;
background: rgba(10,10,10,0.6);
opacity: 0;
transition: opacity var(--t-base);
}
.ig-item:hover .ig-icon { opacity: 1; }
/* === JOURNAL === */
.journal-section { padding: var(--s-20) 0; background: var(--color-bg); }
.journal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-8);
}
@media (max-width: 991px) { .journal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .journal-grid { grid-template-columns: 1fr; } }
.journal-card {
text-decoration: none;
color: inherit;
transition: all var(--t-base);
display: block;
}
.journal-img {
aspect-ratio: 4/5;
overflow: hidden;
margin-bottom: 1.5rem;
background: var(--color-bg-elevated);
position: relative;
border: 1px solid transparent;
transition: all var(--t-base);
}
.journal-img::after {
content: '';
position: absolute;
inset: 1rem;
border: 1px solid var(--color-accent);
opacity: 0;
transition: opacity var(--t-base);
pointer-events: none;
}
.journal-card:hover .journal-img { border-color: var(--color-accent-deep); }
.journal-card:hover .journal-img::after { opacity: 0.5; }
.journal-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.4) brightness(0.9);
transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.journal-card:hover .journal-img img {
transform: scale(1.06);
filter: grayscale(0) brightness(1);
}
.jcat-list { list-style: none; padding: 0; margin: 0; }
.jcat-list li { border-bottom: 1px solid var(--color-line); }
.jcat-list a {
display: block;
padding: 1rem 0;
color: var(--color-text-muted);
text-decoration: none;
font-family: var(--font-gothic);
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
transition: all var(--t-base);
}
.jcat-list a:hover { color: var(--color-accent); padding-left: 1rem; }
.jcat-list a.active { color: var(--color-accent); }
.journal-meta {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 0.75rem;
font-family: var(--font-gothic);
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-accent);
}
.journal-title {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.4rem;
line-height: 1.3;
color: var(--color-secondary);
margin: 0 0 1rem;
transition: color var(--t-base);
}
.journal-card:hover .journal-title { color: var(--color-accent); }
.journal-excerpt {
color: var(--color-text-muted);
font-family: var(--font-serif);
font-style: italic;
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
.j-date {
font-family: var(--font-gothic);
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* === FOOTER === */
.site-footer {
background: var(--color-bg-darker) !important;
color: var(--color-secondary) !important;
padding: var(--s-20) 0 var(--s-8) !important;
margin-top: var(--s-24);
position: relative;
border-top: 1px solid var(--color-line);
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 240px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.footer-newsletter {
text-align: center;
max-width: 600px;
margin: 0 auto var(--s-16);
padding-bottom: var(--s-12);
border-bottom: 1px solid var(--color-line);
}
.footer-h {
font-family: var(--font-display) !important;
font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
line-height: 1.05 !important;
margin-bottom: 1rem;
color: var(--color-secondary) !important;
font-weight: 400;
}
.footer-h em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
color: var(--color-accent);
}
.footer-sub {
color: var(--color-text-muted);
font-family: var(--font-serif);
font-style: italic;
margin-bottom: var(--s-6);
line-height: 1.7;
}
.newsletter-form {
display: flex;
max-width: 480px;
margin: 0 auto;
border-bottom: 1px solid var(--color-accent-deep);
padding-bottom: 0.5rem;
transition: border-color var(--t-base);
}
.newsletter-form:focus-within { border-color: var(--color-accent-bright); }
.newsletter-form input {
flex: 1;
background: transparent;
border: none;
padding: 0.75rem 0;
color: var(--color-secondary);
font-size: 0.9rem;
font-family: var(--font-serif);
font-style: italic;
outline: none;
}
.newsletter-form input::placeholder { color: var(--color-text-dim); font-style: italic; }
.newsletter-form button {
background: transparent;
border: none;
color: var(--color-accent);
padding: 0.75rem 1rem;
cursor: pointer;
font-family: var(--font-gothic);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
transition: color var(--t-fast);
}
.newsletter-form button:hover { color: var(--color-accent-bright); }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--s-10);
margin-bottom: var(--s-12);
}
@media (max-width: 767px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.footer-grid .f-col:first-child { grid-column: 1 / -1; }
}
.f-col h4 {
font-family: var(--font-gothic) !important;
font-size: 0.7rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
margin-bottom: var(--s-5);
color: var(--color-accent) !important;
font-weight: 500;
}
.f-col ul { list-style: none; padding: 0; margin: 0; }
.f-col ul li { margin-bottom: 0.75rem; }
.f-col ul li a {
color: var(--color-text-muted) !important;
text-decoration: none;
font-size: 0.9rem;
transition: color var(--t-fast);
}
.f-col ul li a:hover { color: var(--color-accent) !important; }
.f-brand {
font-family: var(--font-display) !important;
font-size: 1.75rem !important;
letter-spacing: 0.35em !important;
color: var(--color-secondary) !important;
display: block;
margin-bottom: 1.5rem;
}
.f-desc {
color: var(--color-text-muted);
font-family: var(--font-serif);
font-style: italic;
font-size: 0.95rem;
line-height: 1.8;
margin-bottom: var(--s-5);
max-width: 380px;
}
.f-socials { display: flex; gap: 0.5rem; }
.f-socials a {
width: 44px;
height: 44px;
border: 1px solid var(--color-line);
color: var(--color-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all var(--t-base);
}
.f-socials a:hover {
background: var(--color-accent);
color: var(--color-bg);
border-color: var(--color-accent);
transform: translateY(-2px);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--s-6);
border-top: 1px solid var(--color-line);
flex-wrap: wrap;
gap: 1rem;
color: var(--color-text-dim);
font-size: 0.8rem;
}
.footer-bottom em {
color: var(--color-accent);
font-style: italic;
font-family: var(--font-serif);
}
/* === WHATSAPP FAB === */
.wa-float {
background: #25d366 !important;
border-radius: 0 !important;
border: 2px solid var(--color-bg) !important;
box-shadow: 0 8px 32px rgba(37,211,102,0.4);
}
.wa-float::before {
content: '';
position: absolute;
inset: -4px;
border: 1px solid #25d366;
animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.4); opacity: 0; }
}
/* === PAGE HEADER === */
.page-header {
background: var(--color-bg-darker) !important;
padding: var(--s-16) 0 !important;
border-bottom: 1px solid var(--color-line) !important;
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(201,169,97,0.08) 0%, transparent 60%);
pointer-events: none;
}
.page-h {
font-family: var(--font-display) !important;
font-size: clamp(2.5rem, 5vw, 4rem) !important;
line-height: 1 !important;
margin-bottom: 1.25rem;
color: black !important;
font-weight: 400;
position: relative;
}
.page-sub {
color: var(--color-text-muted) !important;
font-family: var(--font-serif) !important;
font-style: italic !important;
font-size: 1.1rem !important;
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
/* === BREADCRUMB === */
.breadcrumb-bar {
background: var(--color-bg-soft) !important;
border-bottom: 1px solid var(--color-line) !important;
}
.breadcrumb-luxe {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-gothic) !important;
font-size: 0.5rem !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
color: var(--color-text-muted) !important;
}
.breadcrumb-luxe a {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--t-fast);
}
.breadcrumb-luxe a:hover { color: var(--color-accent); }
.breadcrumb-luxe i { font-size: 0.6rem; color: var(--color-accent); }
.breadcrumb-luxe .active { color: var(--color-accent); }
/* === PRODUCT DETAIL === */
.product-detail { padding: var(--s-16) 0 var(--s-24); background: var(--color-bg); }
.product-detail > .container {
max-width: 1360px;
}
.product-detail .row {
--bs-gutter-x: 1.35rem;
--bs-gutter-y: 1.35rem;
align-items: start;
}
.pd-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--s-16);
align-items: start;
}
@media (max-width: 991px) { .pd-layout { grid-template-columns: 1fr; gap: var(--s-8); } }
.product-gallery {
position: sticky;
top: 120px;
display: grid;
grid-template-columns: 88px 1fr;
gap: 1.1rem;
}
@media (max-width: 767px) { .product-gallery { grid-template-columns: 1fr; } }
.pg-thumbs { display: flex; flex-direction: column; gap: 0.5rem; }
.pg-thumb {
width: 88px;
height: 88px;
border: 1px solid var(--color-line);
cursor: pointer;
overflow: hidden;
transition: all var(--t-base);
background: var(--color-bg-elevated);
border-radius: 16px;
}
.pg-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
transition: all var(--t-base);
}
.pg-thumb:hover, .pg-thumb.active { border-color: var(--color-accent); }
.pg-thumb.active img { filter: brightness(1); }
.pg-main {
background: var(--color-bg-elevated);
border: 1px solid var(--color-line);
border-radius: 22px;
overflow: hidden;
}
.p-name {
font-family: var(--font-display) !important;
font-size: clamp(2rem, 3.6vw, 2.85rem) !important;
line-height: 1.06 !important;
letter-spacing: 0.01em;
margin: 0.85rem 0 1.1rem;
color: var(--color-secondary) !important;
font-weight: 400;
}
.p-meta {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
font-family: var(--font-gothic) !important;
font-size: 0.72rem !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
color: var(--color-text-muted);
flex-wrap: wrap;
}
.p-rating strong { color: var(--color-secondary) !important; }
.p-rating .stars { color: var(--color-accent); }
.p-rating-count { color: var(--color-text-muted) !important; text-decoration: underline; }
.p-price {
border-bottom: 1px solid var(--color-line) !important;
}
.p-price .p-now {
font-family: var(--font-display);
font-size: 2rem;
color: var(--color-accent);
}
.p-price .p-old {
font-family: var(--font-mono);
color: var(--color-text-dim);
}
.p-short {
color: var(--color-text-muted);
font-family: inherit;
font-style: normal;
line-height: 1.82;
margin-bottom: 1.35rem;
font-size: 0.98rem;
max-width: 58ch;
}
.variant-label {
font-family: var(--font-gothic) !important;
font-size: 0.7rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
color: var(--color-accent) !important;
}
.color-option {
background: transparent !important;
border: 1px solid var(--color-line) !important;
color: var(--color-secondary) !important;
font-family: var(--font-gothic) !important;
font-size: 0.7rem !important;
letter-spacing: 0.2em !important;
}
.color-option:has(input:checked) {
border-color: var(--color-accent) !important;
background: var(--color-accent-soft) !important;
}
.color-option:hover { border-color: var(--color-accent); }
.size-btn {
min-width: 56px;
height: 50px;
background: transparent !important;
color: var(--color-secondary) !important;
border: 1px solid var(--color-line) !important;
font-family: var(--font-mono) !important;
}
.size-btn:hover { border-color: var(--color-accent) !important; color: var(--color-accent) !important; }
.size-btn.active { background: var(--color-accent) !important; color: var(--color-bg) !important; border-color: var(--color-accent) !important; }
.p-wishlist-btn {
background: transparent !important;
color: var(--color-secondary) !important;
border: 1px solid var(--color-line) !important;
}
.p-wishlist-btn:hover { border-color: var(--color-accent) !important; color: var(--color-accent) !important; background: var(--color-accent-soft) !important; }
.p-perks {
background: var(--color-bg-elevated) !important;
border-left: 2px solid var(--color-accent) !important;
}
.product-accordion { border-top: 1px solid var(--color-line) !important; }
.acc-item { border-bottom: 1px solid var(--color-line) !important; }
.acc-item > summary {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
}
.acc-item > summary::after { color: var(--color-accent) !important; }
.acc-item > summary:hover { color: var(--color-accent) !important; }
.acc-content {
color: var(--color-text-muted) !important;
font-family: inherit !important;
font-style: normal !important;
line-height: 1.8;
}
.acc-content p:last-child {
margin-bottom: 0;
}
.product-info {
display: grid;
gap: 1.15rem;
}
.p-summary-card,
.p-purchase-card {
border: 1px solid var(--color-line);
background: rgba(12, 12, 13, 0.72);
backdrop-filter: blur(14px);
border-radius: 22px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}
.p-summary-card {
padding: clamp(1.1rem, 2vw, 1.5rem);
}
.p-purchase-card {
padding: clamp(1rem, 2vw, 1.35rem);
}
.p-topline {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
margin-bottom: 0.6rem;
}
.p-flags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.p-flag {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.7rem;
border: 1px solid var(--color-line);
background: rgba(255,255,255,0.03);
color: var(--color-text-muted);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.p-flag-sale,
.p-flag-auction {
color: var(--color-accent);
border-color: rgba(193,154,91,0.35);
background: rgba(193,154,91,0.1);
}
.p-flag-stock.in-stock {
color: #8acb96;
border-color: rgba(138,203,150,0.28);
}
.p-flag-stock.low-stock {
color: #e7ba5b;
border-color: rgba(231,186,91,0.28);
}
.p-flag-stock.out-stock {
color: #df7187;
border-color: rgba(223,113,135,0.28);
}
.p-meta {
margin-bottom: 0.9rem;
}
.p-rating-muted {
opacity: 0.8;
}
.p-price {
display: flex;
align-items: baseline;
gap: 0.85rem;
margin-bottom: 0.7rem;
padding-bottom: 1.05rem;
}
.p-saving-note {
margin-bottom: 1rem;
color: var(--color-accent);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.p-short {
margin-bottom: 1.25rem;
}
.p-stat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
margin-bottom: 1rem;
}
.p-stat-card {
display: grid;
gap: 0.4rem;
padding: 0.95rem;
border: 1px solid var(--color-line);
background: rgba(255,255,255,0.03);
border-radius: 16px;
}
.p-stat-card small {
color: var(--color-text-muted);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.p-stat-card strong {
color: var(--color-secondary);
font-size: 0.95rem;
line-height: 1.45;
}
.p-highlight-strip {
display: flex;
gap: 0.65rem;
flex-wrap: wrap;
}
.p-highlight-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--color-line);
background: rgba(255,255,255,0.03);
color: var(--color-text-muted);
font-size: 0.82rem;
border-radius: 999px;
}
.p-highlight-pill i {
color: var(--color-accent);
}
.p-buy-grid {
display: grid;
grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
gap: 1rem;
align-items: end;
}
.variant-group label {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.8rem;
color: var(--color-text-muted);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.variant-group label span {
color: var(--color-secondary);
font-size: 0.8rem;
letter-spacing: 0.02em;
text-transform: none;
}
.color-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.7rem;
}
.color-option {
min-height: 52px;
justify-content: flex-start;
border-radius: 14px;
}
.color-name {
font-size: 0.78rem;
letter-spacing: 0.04em;
}
.size-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
gap: 0.6rem;
}
.variant-group-stock .p-stock {
display: flex;
align-items: center;
min-height: 50px;
padding: 0.8rem 0.95rem;
border: 1px solid var(--color-line);
background: rgba(255,255,255,0.02);
font-size: 0.92rem;
margin: 0;
border-radius: 14px;
}
.p-actions {
align-items: stretch;
margin-top: 1.25rem;
}
.p-actions .btn-luxe-solid,
.p-actions .btn-luxe-line {
min-height: 56px;
border-radius: 14px;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
padding-inline: 1.2rem;
justify-content: center;
}
.p-actions .btn-luxe-solid i {
margin-left: 0.35rem;
}
.buy-now {
min-width: 168px;
}
.p-wishlist-btn {
border-radius: 14px;
min-width: 56px;
}
.p-perks {
display: grid;
gap: 0.65rem;
padding: 1rem;
margin-top: 0.75rem;
border-radius: 18px;
}
.perk {
display: flex;
align-items: start;
gap: 0.65rem;
}
.perk i {
color: var(--color-accent);
margin-top: 0.15rem;
}
.product-accordion {
margin-top: 0.25rem;
}
.reviews-section .section-head,
.product-section .section-head {
margin-bottom: 1.5rem;
}
.reviews-summary {
align-items: start;
}
.review-card,
.review-form-wrap {
border: 1px solid var(--color-line);
}
.reviews-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.78fr);
gap: 1.25rem;
align-items: start;
}
.reviews-main,
.reviews-side {
min-width: 0;
}
.reviews-side {
position: sticky;
top: 110px;
}
.review-form-wrap,
.review-locked-card,
.reviews-empty {
padding: 1.2rem;
background: rgba(28,28,28,0.5);
border: 1px solid var(--color-line);
backdrop-filter: blur(8px);
border-radius: 22px;
}
.review-gate-head {
display: grid;
gap: 0.55rem;
margin-bottom: 1rem;
}
.review-gate-head p,
.review-locked-card p,
.reviews-empty p {
color: var(--color-text-muted);
margin: 0;
line-height: 1.7;
}
.review-gate-head h3,
.review-locked-card h3 {
margin: 0;
font-family: var(--font-display);
color: var(--color-secondary);
}
.review-gate-badge {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 0.4rem 0.7rem;
border: 1px solid rgba(193,154,91,0.35);
background: rgba(193,154,91,0.12);
color: var(--color-accent);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.review-gate-muted {
border-color: var(--color-line);
background: rgba(255,255,255,0.03);
color: var(--color-text-muted);
}
.reviews-empty {
display: grid;
gap: 0.5rem;
}
.reviews-empty strong {
color: var(--color-secondary);
font-family: var(--font-display);
}
.rv-meta {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
}
.rv-author {
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
}
.rv-badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.55rem;
border: 1px solid rgba(193,154,91,0.28);
background: rgba(193,154,91,0.1);
color: var(--color-accent);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.review-locked-card {
display: grid;
gap: 0.75rem;
}
.review-card {
border-radius: 18px;
padding: 1rem 1.05rem !important;
}
.rs-score {
border-radius: 18px;
}
.reviews-section .section-head,
.product-section .section-head {
text-align: left;
}
.reviews-section .section-head .eyebrow,
.product-section .section-head .eyebrow {
justify-content: flex-start;
}
.review-locked-card .btn-luxe-line,
.review-form-wrap .btn-luxe-solid {
width: 100%;
justify-content: center;
}
@media (max-width: 991px) {
.product-info {
margin-top: 1rem;
}
.p-topline {
display: grid;
}
.p-flags {
justify-content: flex-start;
}
.p-buy-grid {
grid-template-columns: 1fr;
}
.p-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.reviews-layout {
grid-template-columns: 1fr;
}
.reviews-side {
position: static;
top: auto;
}
}
@media (max-width: 767px) {
.product-gallery {
grid-template-columns: 1fr;
}
.pg-thumbs {
order: 2;
flex-direction: row;
overflow-x: auto;
padding-bottom: 0.25rem;
}
.pg-thumb {
width: 72px;
min-width: 72px;
height: 72px;
}
.pg-zoom-hint {
display: none;
}
.p-name {
margin-bottom: 1rem;
}
.p-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.p-actions {
display: grid;
grid-template-columns: 1fr 1fr auto;
}
.reviews-summary {
gap: 0.9rem;
}
.review-form-wrap,
.review-locked-card,
.reviews-empty {
padding: 1rem;
}
}
@media (max-width: 560px) {
.p-stat-grid {
grid-template-columns: 1fr;
}
.p-actions {
grid-template-columns: 1fr;
}
.p-wishlist-btn {
width: 100%;
min-height: 52px;
}
}
/* === CART / CHECKOUT / ACCOUNT === */
.cart-section,
.checkout-section,
.account-layout,
.order-detail,
.track-form-wrap,
.success-section,
.contact-section,
.about-section {
padding-top: var(--s-12) !important;
background: var(--color-bg);
}
.co-block,
.acc-block,
.order-summary,
.cart-items,
.od-items,
.od-info-grid,
.od-timeline,
.od-totals,
.track-info,
.track-history {
background: rgba(28,28,28,0.5) !important;
border: 1px solid var(--color-line) !important;
backdrop-filter: blur(8px);
}
.cart-item {
border-bottom: 1px solid var(--color-line) !important;
}
.ci-img {
background: var(--color-bg-elevated) !important;
border: 1px solid var(--color-line);
}
.ci-name {
color: var(--color-secondary) !important;
font-family: var(--font-serif) !important;
font-style: italic !important;
}
.ci-meta, .ci-sku { color: var(--color-text-muted) !important; }
.ci-price { color: var(--color-accent) !important; font-family: var(--font-mono) !important; }
.ci-qty.qty-control,
.qty-control {
border-color: var(--color-line) !important;
background: transparent !important;
}
.qty-btn { color: var(--color-secondary) !important; }
.qty-btn:hover { background: var(--color-accent-soft) !important; }
.qty-input { color: var(--color-secondary) !important; }
.co-title,
.acc-head h1,
.acc-head h2,
.acc-block h2,
.acc-block h3,
.od-items h3,
.track-info h2 {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
font-weight: 400 !important;
border-color: var(--color-line) !important;
}
.f-input {
background: rgba(10,10,10,0.6) !important;
border: 1px solid var(--color-line) !important;
color: var(--color-secondary) !important;
font-family: var(--font-sans) !important;
}
.f-input:focus {
border-color: var(--color-accent) !important;
box-shadow: 0 0 0 3px rgba(201,169,97,0.15) !important;
}
.f-input::placeholder { color: var(--color-text-dim) !important; }
select.f-input {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9A961' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.form-row label {
font-family: var(--font-gothic) !important;
font-size: 0.7rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
color: var(--color-accent) !important;
}
.acc-avatar {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%) !important;
color: var(--color-bg) !important;
}
.acc-user strong { color: var(--color-secondary) !important; }
.acc-user span { color: var(--color-text-muted) !important; }
.acc-nav a {
color: var(--color-text-muted) !important;
border-color: transparent !important;
}
.acc-nav a:hover { color: var(--color-accent) !important; background: rgba(201,169,97,0.08) !important; }
.acc-nav a.active {
color: var(--color-accent) !important;
border-left-color: var(--color-accent) !important;
background: rgba(201,169,97,0.08) !important;
}
.acc-order-row,
.order-row {
background: rgba(10,10,10,0.4) !important;
border: 1px solid var(--color-line) !important;
}
.acc-order-row:hover,
.order-row:hover {
border-color: var(--color-accent) !important;
background: rgba(201,169,97,0.05) !important;
}
.acc-order-row strong { color: var(--color-secondary) !important; }
.os-title {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
border-bottom: 1px solid var(--color-line) !important;
}
.os-row strong { color: var(--color-secondary) !important; }
.os-total strong { color: var(--color-accent) !important; }
.status {
background: rgba(10,10,10,0.6) !important;
border: 1px solid var(--color-line);
}
.status-pending, .status-waiting_payment, .status-unpaid {
background: rgba(180,138,44,0.15) !important; color: var(--color-accent) !important; border-color: var(--color-accent-deep);
}
.status-paid, .status-processing, .status-packed {
background: rgba(74,107,138,0.15) !important; color: #87a4c1 !important; border-color: #4a6b8a;
}
.status-shipped {
background: rgba(74,107,138,0.25) !important; color: #87a4c1 !important; border-color: #4a6b8a;
}
.status-delivered, .status-completed, .status-done {
background: rgba(74,124,74,0.15) !important; color: #87b087 !important; border-color: #4a7c4a;
}
.status-cancelled, .status-cancel, .status-failed {
background: rgba(139,42,42,0.2) !important; color: #d4888a !important; border-color: #8b2a2a;
}
.courier-tab {
background: rgba(10,10,10,0.4) !important;
border: 1px solid var(--color-line) !important;
color: var(--color-secondary) !important;
}
.courier-tab:has(input:checked),
.courier-tab.active {
background: var(--color-accent) !important;
color: var(--color-bg) !important;
border-color: var(--color-accent) !important;
}
.addr-card {
background: rgba(10,10,10,0.4) !important;
border: 1px solid var(--color-line) !important;
color: var(--color-secondary) !important;
}
.addr-card:has(input:checked) {
border-color: var(--color-accent) !important;
background: rgba(201,169,97,0.08) !important;
}
.pm {
background: rgba(10,10,10,0.4) !important;
border: 1px solid var(--color-line) !important;
color: var(--color-secondary) !important;
}
.modal-content.luxury-modal {
background: var(--color-bg-darker) !important;
border: 1px solid var(--color-line) !important;
box-shadow: 0 20px 80px rgba(0,0,0,0.8) !important;
}
.luxury-modal .modal-title {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
}
.luxury-modal .modal-header,
.luxury-modal .modal-footer { border-color: var(--color-line) !important; }
.toast-luxe {
background: var(--color-bg-darker) !important;
color: var(--color-secondary) !important;
border: 1px solid var(--color-accent) !important;
border-left: 3px solid var(--color-accent) !important;
}
/* === SUCCESS PAGE === */
.success-section { text-align: center; background: var(--color-bg-darker); }
.success-icon {
background: var(--color-accent) !important;
color: var(--color-bg) !important;
border-radius: 0 !important;
width: 100px !important;
height: 100px !important;
font-size: 3rem !important;
}
.success-info h1 {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
font-weight: 400 !important;
}
.success-info p { color: var(--color-text-muted) !important; font-family: var(--font-serif) !important; font-style: italic !important; }
.success-info strong { color: var(--color-accent) !important; }
/* === AUTH PAGES === */
.auth-page { background: var(--color-bg); }
.auth-split { background: var(--color-bg-darker); }
.auth-visual { filter: grayscale(0.4) brightness(0.7); }
.auth-visual-overlay {
background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.8) 100%);
}
.auth-brand {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
letter-spacing: 0.35em !important;
}
.auth-quote {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
}
.auth-quote-by {
font-family: var(--font-gothic) !important;
color: var(--color-accent) !important;
letter-spacing: 0.4em !important;
}
.auth-h {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
font-weight: 400 !important;
}
.auth-sub { color: var(--color-text-muted) !important; font-family: var(--font-serif) !important; font-style: italic !important; }
.auth-footer { color: var(--color-text-muted) !important; }
.auth-footer a { color: var(--color-accent) !important; }
/* === REVIEWS === */
.reviews-section { border-top: 1px solid var(--color-line) !important; }
.rs-score { background: rgba(28,28,28,0.5) !important; border: 1px solid var(--color-line) !important; }
.rs-num {
font-family: var(--font-display) !important;
color: var(--color-accent) !important;
}
.rs-stars { color: var(--color-accent) !important; }
.rs-count { color: var(--color-text-muted) !important; }
.review-card {
background: rgba(28,28,28,0.5) !important;
border-left: 3px solid var(--color-accent) !important;
}
.rv-title {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
font-weight: 400 !important;
}
.review-form-wrap { background: rgba(28,28,28,0.5) !important; }
.review-form h3 {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
font-weight: 400 !important;
}
.rating-input label { color: var(--color-line) !important; }
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
color: var(--color-accent) !important;
}
/* === ABOUT === */
.about-section { background: var(--color-bg); }
.about-h {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
}
.about-text p {
color: var(--color-text-muted) !important;
font-family: var(--font-serif) !important;
font-style: italic !important;
}
.about-image {
background: var(--color-bg-elevated) !important;
filter: grayscale(0.3) contrast(1.05);
}
.value-item {
background: rgba(28,28,28,0.5) !important;
border: 1px solid var(--color-line) !important;
}
.value-item h3 {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
font-weight: 400 !important;
}
.value-item p {
color: var(--color-text-muted) !important;
font-family: var(--font-serif) !important;
font-style: italic !important;
}
/* === CONTACT === */
.contact-section { background: var(--color-bg); }
.contact-form-wrap { background: rgba(28,28,28,0.5) !important; border: 1px solid var(--color-line) !important; }
.ci-h {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
font-weight: 400 !important;
}
.ci-item { border-color: var(--color-line) !important; }
.ci-item i { color: var(--color-accent) !important; }
.ci-item strong { color: var(--color-primary) !important; }
.ci-item p { color: var(--color-text-muted) !important; }
/* === TRACKING === */
.track-form-wrap { background: var(--color-bg-darker) !important; }
.track-info h2 {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
font-weight: 400 !important;
}
.track-info p { color: var(--color-text-muted) !important; }
.track-info p strong { color: var(--color-secondary) !important; }
.th-item { border-color: var(--color-line) !important; }
.th-item.delivered { background: rgba(201,169,97,0.08) !important; }
.th-time { color: var(--color-text-muted) !important; font-family: var(--font-mono) !important; }
.th-city { color: var(--color-accent) !important; font-family: var(--font-gothic) !important; }
.th-desc { color: var(--color-text-muted) !important; }
/* === ORDER DETAIL === */
.od-head { border-color: var(--color-line) !important; }
.od-head .eyebrow { color: var(--color-accent) !important; }
.od-head strong { color: var(--color-secondary) !important; }
.odi-img { background: var(--color-bg-elevated) !important; }
.odi-body strong { color: var(--color-secondary) !important; font-family: var(--font-serif) !important; font-style: italic !important; }
.odi-price { color: var(--color-accent) !important; font-family: var(--font-mono) !important; }
.tl-step::after { background: var(--color-line) !important; }
.tl-dot { background: var(--color-line) !important; }
.tl-step.done .tl-dot { background: var(--color-accent) !important; }
.tl-step.active .tl-dot {
background: var(--color-secondary) !important;
box-shadow: 0 0 0 4px rgba(201,169,97,0.2) !important;
}
.tl-label { color: black !important; }
/* === SHOP / FILTER === */
.shop-layout { background: var(--color-bg); }
.filter-panel {
background: rgba(28,28,28,0.5) !important;
border: 1px solid var(--color-line) !important;
}
.filter-group { border-color: var(--color-line) !important; }
.filter-group h4 {
font-family: var(--font-gothic) !important;
color: var(--color-accent) !important;
letter-spacing: 0.3em !important;
}
.filter-list a { color: var(--color-text-muted) !important; }
.filter-list a:hover { background: rgba(201,169,97,0.08) !important; color: var(--color-accent) !important; }
.filter-list a.active {
background: rgba(201,169,97,0.1) !important;
color: var(--color-accent) !important;
}
.color-swatches .swatch { border-color: var(--color-line) !important; }
.color-swatches .swatch:has(input:checked) {
border-color: var(--color-accent) !important;
box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-accent) !important;
}
.size-btn { background: transparent !important; color: var(--color-secondary) !important; }
.size-btn:has(input:checked) {
background: var(--color-accent) !important;
color: var(--color-bg) !important;
border-color: var(--color-accent) !important;
}
.shop-toolbar { border-color: var(--color-line) !important; }
.result-count { color: var(--color-text-muted) !important; font-family: var(--font-gothic) !important; font-size: 0.7rem !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; }
.sort-select {
background: rgba(10,10,10,0.6) !important;
color: var(--color-secondary) !important;
border-color: var(--color-line) !important;
}
.sort-select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9A961' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.empty-state i { color: var(--color-accent) !important; }
.empty-state h3 { font-family: var(--font-display) !important; color: var(--color-secondary) !important; font-weight: 400 !important; }
.empty-state p { color: var(--color-text-muted) !important; font-family: var(--font-serif) !important; font-style: italic !important; }
.luxury-pagination .lp-link {
border-color: var(--color-line) !important;
color: var(--color-secondary) !important;
font-family: var(--font-mono) !important;
}
.luxury-pagination .lp-link:hover {
background: var(--color-accent) !important;
color: var(--color-bg) !important;
border-color: var(--color-accent) !important;
}
.luxury-pagination .lp-link.active {
background: var(--color-accent) !important;
color: var(--color-bg) !important;
border-color: var(--color-accent) !important;
}
/* === BLOG === */
.article-header .eyebrow { color: var(--color-accent) !important; }
.article-h {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
font-weight: 400 !important;
}
.article-excerpt {
color: var(--color-text-muted) !important;
font-family: var(--font-serif) !important;
font-style: italic !important;
}
.article-hero-img {
background: var(--color-bg-elevated) !important;
border: 1px solid var(--color-line);
}
.article-body {
color: var(--color-secondary) !important;
font-family: var(--font-serif) !important;
line-height: 1.9 !important;
}
.article-body h2,
.article-body h3 {
font-family: var(--font-display) !important;
color: var(--color-secondary) !important;
}
.article-body blockquote {
border-left: 3px solid var(--color-accent) !important;
color: var(--color-text-muted) !important;
}
/* =================================================================
SCROLL ANIMATIONS
================================================================= */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-left {
opacity: 0;
transform: translateX(-60px);
transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-left.is-visible {
opacity: 1;
transform: translateX(0);
}
.reveal-right {
opacity: 0;
transform: translateX(60px);
transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-right.is-visible {
opacity: 1;
transform: translateX(0);
}
.reveal-scale {
opacity: 0;
transform: scale(0.95);
transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-scale.is-visible {
opacity: 1;
transform: scale(1);
}
.reveal-clip {
clip-path: inset(0 0 100% 0);
transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.reveal-clip.is-visible {
clip-path: inset(0 0 0 0);
}
.stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.stagger.is-visible > * {
opacity: 1;
transform: translateY(0);
}
.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
.text-reveal-mask {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
.text-reveal-mask > span {
display: inline-block;
transform: translateY(110%);
transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-visible .text-reveal-mask > span,
.text-reveal-mask.is-visible > span {
transform: translateY(0);
}
.is-visible .text-reveal-mask:nth-child(1) > span { transition-delay: 0ms; }
.is-visible .text-reveal-mask:nth-child(2) > span { transition-delay: 100ms; }
.is-visible .text-reveal-mask:nth-child(3) > span { transition-delay: 200ms; }
/* Glitch text */
.glitch {
position: relative;
display: inline-block;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.glitch::before {
left: 2px;
text-shadow: -2px 0 var(--color-blood);
clip-path: inset(0 0 0 0);
animation: glitchTop 3s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: 2px 0 var(--color-accent);
animation: glitchBottom 2.5s infinite linear alternate-reverse;
}
@keyframes glitchTop {
0%, 100% { clip-path: inset(0 0 80% 0); }
20% { clip-path: inset(0 0 20% 0); }
40% { clip-path: inset(0 0 60% 0); }
60% { clip-path: inset(0 0 10% 0); }
80% { clip-path: inset(0 0 70% 0); }
}
@keyframes glitchBottom {
0%, 100% { clip-path: inset(80% 0 0 0); }
20% { clip-path: inset(20% 0 0 0); }
40% { clip-path: inset(60% 0 0 0); }
60% { clip-path: inset(10% 0 0 0); }
80% { clip-path: inset(70% 0 0 0); }
}
/* Magnetic button effect */
.magnetic {
transition: transform var(--t-base);
}
/* Image noise hover */
.img-noise {
position: relative;
overflow: hidden;
}
.img-noise::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0;
mix-blend-mode: overlay;
z-index: 1;
transition: opacity var(--t-base);
}
.img-noise:hover::before { opacity: 0.5; }
/* === RESPONSIVE === */
@media (max-width: 767px) {
.hero-controls { gap: 0.5rem; right: 0.5rem; }
.hero-prev, .hero-next { bottom: 1rem; width: 40px; height: 40px; }
.hero-prev { left: 0.5rem; }
.hero-next { right: 0.5rem; }
.luxury-hero { height: 85vh; min-height: 540px; }
}
@media (max-width: 480px) {
:root {
--s-4: 1rem;
--s-6: 1.25rem;
--s-8: 1.5rem;
--s-10: 2rem;
--s-12: 2.5rem;
}
}
/* Respect reduced motion */
@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, .reveal-left, .reveal-right, .reveal-scale, .reveal-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
/* =================================================================
ENHANCEMENT LAYER — new components for round 2
================================================================= */
/* === LUXURY CLOSE BUTTON (gold X) === */
.btn-close-luxe {
width: 44px;
height: 44px;
background: transparent !important;
border: 1px solid var(--color-accent) !important;
border-radius: 0 !important;
position: relative;
cursor: pointer;
transition: all var(--t-base);
padding: 0;
opacity: 1;
flex-shrink: 0;
}
.btn-close-luxe span {
position: absolute;
top: 50%;
left: 50%;
width: 22px;
height: 1.5px;
background: var(--color-accent);
transition: background var(--t-base);
}
.btn-close-luxe span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.btn-close-luxe span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close-luxe:hover {
background: var(--color-accent) !important;
transform: rotate(90deg);
box-shadow: var(--shadow-gold-sm);
}
.btn-close-luxe:hover span { background: var(--color-bg-darker); }
/* === HERO SCANLINE OVERLAY === */
.hero-scanline {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
background-image: repeating-linear-gradient(
0deg,
rgba(201,169,97,0.03) 0px,
rgba(201,169,97,0.03) 1px,
transparent 1px,
transparent 4px
);
mix-blend-mode: overlay;
opacity: 0.5;
}
/* === HERO ROMAN NUMERAL SIDEBAR === */
.hero-roman {
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
z-index: 4;
pointer-events: none;
color: var(--color-accent);
font-family: var(--font-gothic);
font-size: 0.65rem;
letter-spacing: 0.4em;
text-transform: uppercase;
writing-mode: vertical-rl;
}
.hero-roman-line {
width: 1px;
height: 60px;
background: var(--color-accent);
opacity: 0.5;
}
@media (max-width: 991px) { .hero-roman { display: none; } }
/* === HERO DATA-ANIM ANIMATIONS === */
.hero-slide [data-anim] {
opacity: 0;
transform: translateY(40px);
transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-slide.active [data-anim] {
opacity: 1;
transform: translateY(0);
}
.hero-slide.active [data-anim]:nth-of-type(1) { transition-delay: 200ms; }
.hero-slide.active [data-anim]:nth-of-type(2) { transition-delay: 400ms; }
.hero-slide.active [data-anim]:nth-of-type(3) { transition-delay: 600ms; }
.hero-slide.active [data-anim]:nth-of-type(4) { transition-delay: 800ms; }
.hero-slide:not(.active) [data-anim] {
transform: translateY(-20px);
}
/* === ANNOUNCE PULSE === */
.announce-pulse {
position: absolute;
top: 50%;
left: 0.5rem;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--color-accent);
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 0 0 rgba(201,169,97,0.6);
animation: announcePulse 2s infinite;
}
.announce-bar { position: relative; }
@keyframes announcePulse {
0% { box-shadow: 0 0 0 0 rgba(201,169,97,0.6); }
70% { box-shadow: 0 0 0 8px rgba(201,169,97,0); }
100% { box-shadow: 0 0 0 0 rgba(201,169,97,0); }
}
/* === TESTIMONIAL QUOTE MARK === */
.t-quote {
position: absolute;
top: -1rem;
left: 1.5rem;
font-family: var(--font-display);
font-size: 8rem;
line-height: 1;
color: var(--color-accent);
opacity: 0.18;
pointer-events: none;
z-index: 0;
}
.testimonial-card {
position: relative;
}
/* === ARCHIVE SECTION === */
.archive-section {
padding: var(--s-24) 0;
}
.archive-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
margin-top: var(--s-10);
}
@media (max-width: 991px) {
.archive-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.archive-grid { grid-template-columns: repeat(2, 1fr); }
}
.archive-card {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--color-bg-elevated);
border: 1px solid var(--color-line);
text-decoration: none;
color: inherit;
transition: all var(--t-elegant);
display: block;
}
.archive-card:nth-child(even) { transform: translateY(2rem); }
@media (max-width: 991px) {
.archive-card:nth-child(even) { transform: none; }
}
.archive-card img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.6) contrast(1.05) brightness(0.85);
transition: all 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-card:hover {
border-color: var(--color-accent);
transform: translateY(-0.5rem) !important;
box-shadow: var(--shadow-gold-sm);
}
.archive-card:hover img {
transform: scale(1.08);
filter: grayscale(0) contrast(1.05) brightness(1);
}
.archive-label {
position: absolute;
top: 1rem;
left: 1rem;
font-family: var(--font-gothic);
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-secondary);
background: rgba(10,10,10,0.7);
backdrop-filter: blur(8px);
padding: 0.4rem 0.75rem;
border: 1px solid var(--color-accent-deep);
z-index: 2;
transition: all var(--t-base);
}
.archive-card:hover .archive-label {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* === ABOUT GALLERY === */
.about-gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
margin-top: var(--s-16);
}
@media (max-width: 767px) {
.about-gallery { grid-template-columns: 1fr; }
}
.ag-item {
aspect-ratio: 1;
overflow: hidden;
background: var(--color-bg-elevated);
border: 1px solid var(--color-line);
position: relative;
}
.ag-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.4) contrast(1.05);
transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ag-item:hover img {
transform: scale(1.06);
filter: grayscale(0) contrast(1.05);
}
.ag-item:hover {
border-color: var(--color-accent);
}
/* === CURSOR GLOW === */
.cursor-glow {
position: fixed;
top: 0;
left: 0;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(201,169,97,0.12) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 9998;
mix-blend-mode: screen;
will-change: transform;
}
@media (max-width: 1024px), (pointer: coarse) {
.cursor-glow { display: none; }
}
/* === ENHANCED ANNOUNCE BAR (Marquee) === */
.announce-bar {
overflow: hidden !important;
position: relative;
background: linear-gradient(90deg, var(--color-bg-darker), var(--color-bg-soft), var(--color-bg-darker)) !important;
border-bottom: 1px solid var(--color-line) !important;
padding: 0.65rem 0 !important;
}
.announce-track {
display: flex !important;
align-items: center;
gap: 2rem;
white-space: nowrap;
animation: marquee 45s linear infinite;
will-change: transform;
}
.announce-track:hover { animation-play-state: paused; }
.announce-track .dot { color: var(--color-accent) !important; padding: 0 0.5rem; }
.announce-track strong { color: var(--color-accent) !important; font-family: var(--font-mono); letter-spacing: 0.1em; }
.announce-track span:not(.dot) {
color: var(--color-secondary) !important;
font-family: var(--font-gothic) !important;
font-size: 0.7rem !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
}
/* =================================================================
FINAL RESPONSIVE + BRAND REFINEMENT
================================================================= */
.site-header.is-scrolled,
.site-header.scrolled {
background: rgba(10,10,10,0.95) !important;
}
.site-header.is-scrolled::after,
.site-header.scrolled::after {
width: 100%;
}
.site-main {
min-height: 60vh;
overflow: clip;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.9rem;
text-decoration: none;
min-width: 0;
}
.brand-emblem,
.footer-brand-emblem {
width: 92px;
height: 92px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
transition: transform var(--t-base);
}
.brand-logo,
.footer-brand-logo,
.auth-brand-logo {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.brand-lockup,
.footer-brand-copy,
.auth-brand-copy {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.brand-submark,
.footer-brand-note,
.auth-brand-tag {
font-family: var(--font-gothic);
font-size: 0.58rem;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--color-accent);
opacity: 0.9;
}
.brand:hover .brand-emblem,
.footer-brand:hover .footer-brand-emblem,
.auth-brand:hover .auth-brand-logo {
transform: translateY(-2px) scale(1.02);
}
.brand:hover .brand-emblem,
.footer-brand:hover .footer-brand-emblem {
transform: translateY(-2px) scale(1.02);
}
.brand-mark {
line-height: 1;
}
.brand-submark {
margin-top: 0.3rem;
}
.brand-mobile .brand-emblem {
width: 72px;
height: 72px;
}
.brand-mobile .brand-submark {
margin-top: 0.2rem;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 1rem;
text-decoration: none;
margin-bottom: 1.5rem;
}
.footer-brand-emblem {
width: 72px;
height: 72px;
padding: 0.45rem;
}
.footer-brand-note {
margin-top: 0.35rem;
}
.f-brand {
margin-bottom: 0 !important;
line-height: 1;
}
.footer-newsletter {
max-width: 760px;
}
.newsletter-form {
align-items: center;
gap: 0.75rem;
}
.footer-bottom {
align-items: center;
}
.auth-split {
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
}
.auth-visual {
position: relative;
overflow: hidden;
}
.auth-visual::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(201,169,97,0.06), transparent 34%);
pointer-events: none;
}
.auth-visual-overlay {
border: 1px solid rgba(201,169,97,0.24);
backdrop-filter: blur(10px);
}
.auth-brand {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
text-decoration: none;
margin-bottom: var(--s-8);
}
.auth-brand-logo {
width: 76px;
height: 76px;
padding: 0.45rem;
animation: logoFloat 5s ease-in-out infinite;
}
.auth-brand-name {
font-family: var(--font-display);
font-size: 1.6rem;
letter-spacing: 0.35em;
color: var(--color-secondary);
line-height: 1;
}
.auth-brand-tag {
margin-top: 0.45rem;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.auth-form-wrap {
max-width: 500px;
}
.auth-form-inner {
width: 100%;
}
.page-actions,
.section-cta {
gap: 0.75rem;
}
@media (max-width: 1199px) {
.primary-nav {
gap: 1.2rem;
}
.nav-link {
font-size: 0.66rem !important;
letter-spacing: 0.22em !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.header-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
}
.primary-nav {
display: flex !important;
justify-content: center;
gap: 0.85rem;
min-width: 0;
}
.nav-link {
font-size: 0.58rem !important;
letter-spacing: 0.16em !important;
}
.header-actions {
gap: 0.15rem;
}
.header-actions a[href$="/account"],
.header-actions a[href$="/wishlist"] {
display: none !important;
}
}
@media (max-width: 991px) {
.header-row {
padding: 0.9rem 0;
}
.brand-submark {
display: none;
}
.announce-track span:not(.dot) {
font-size: 0.62rem !important;
letter-spacing: 0.24em !important;
}
.auth-split {
grid-template-columns: 1fr;
min-height: auto;
}
.auth-visual {
display: flex !important;
min-height: 280px;
padding: var(--s-8);
}
.auth-visual-overlay {
padding: var(--s-8);
}
.auth-form-wrap {
max-width: 620px;
padding: var(--s-8) var(--s-5);
}
.footer-bottom {
justify-content: center;
text-align: center;
}
}
@media (max-width: 767px) {
.header-row {
gap: 0.5rem;
}
.brand {
gap: 0.65rem;
}
.brand-emblem {
width: 76px;
height: 76px;
padding: 0;
}
.brand-mark {
font-size: 1rem !important;
letter-spacing: 0.24em !important;
}
.header-actions {
gap: 0.2rem;
}
.header-actions .header-icon:not(.mobile-search):not(.header-cart):not(.mobile-toggle) {
display: none !important;
}
.header-actions .mobile-search,
.header-actions .header-cart,
.header-actions .mobile-toggle {
display: inline-flex !important;
}
.primary-nav {
display: none !important;
}
.header-icon {
width: 40px;
height: 40px;
}
.newsletter-form {
flex-direction: column;
align-items: stretch;
border: 1px solid var(--color-line);
padding: 0.5rem 0.75rem;
gap: 0;
}
.newsletter-form input {
padding: 0.8rem 0;
}
.newsletter-form button {
width: 100%;
justify-content: center;
border-top: 1px solid var(--color-line);
margin-top: 0.25rem;
padding: 0.95rem 0.25rem;
}
.footer-brand {
align-items: center;
}
.footer-brand-emblem {
width: 72px;
height: 72px;
}
.f-brand {
font-size: 1.25rem !important;
letter-spacing: 0.24em !important;
}
.auth-brand {
gap: 0.75rem;
}
.auth-brand-logo {
width: 62px;
height: 62px;
}
.auth-brand-name {
font-size: 1.15rem;
letter-spacing: 0.22em;
}
.auth-quote {
font-size: 1.15rem;
margin-bottom: 1rem;
}
}
@media (max-width: 575px) {
.announce-bar {
padding: 0.55rem 0 !important;
}
.brand-mark {
font-size: 0.92rem !important;
letter-spacing: 0.18em !important;
}
.brand-emblem {
width: 64px;
height: 64px;
}
.count-badge {
min-width: 16px;
height: 16px;
font-size: 0.55rem !important;
top: 5px !important;
right: 5px !important;
}
.footer-grid {
grid-template-columns: 1fr !important;
}
.footer-grid .f-col:first-child {
grid-column: auto !important;
}
.auth-visual {
min-height: 220px;
padding: var(--s-6);
}
.auth-visual-overlay {
padding: var(--s-6);
}
.auth-form-wrap {
padding: var(--s-7) var(--s-4);
}
}
.size-btn.is-disabled {
opacity: 0.35;
cursor: not-allowed;
text-decoration: line-through;
}
/* === MOBILE MENU FIX === */
.luxury-offcanvas .offcanvas-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
overflow-y: auto;
}
.luxury-offcanvas .mobile-nav {
position: static !important;
top: auto !important;
left: auto !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
transition: none !important;
z-index: auto !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
}
.luxury-offcanvas .mobile-nav.is-open {
left: auto !important;
}
.luxury-offcanvas .mobile-nav .m-link,
.luxury-offcanvas .mobile-nav a {
position: relative;
opacity: 1 !important;
visibility: visible !important;
}
/* === SHOP PAGE REFINEMENT === */
.shop-layout {
display: block !important;
padding: var(--s-10) 0 var(--s-14) !important;
background: var(--color-bg) !important;
}
.shop-shell {
display: grid;
grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
gap: clamp(1.25rem, 2vw, 2rem);
align-items: start;
}
.shop-shell > * {
min-width: 0;
}
.shop-main {
min-width: 0;
}
.shop-page-header {
padding-bottom: var(--s-10) !important;
}
.shop-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
gap: var(--s-10);
align-items: center;
}
.shop-page-sub {
max-width: 720px;
}
.shop-hero-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: var(--s-8);
}
.shop-meta-card {
padding: 1rem 1.1rem;
border: 1px solid var(--color-line);
background: rgba(20,20,20,0.46);
backdrop-filter: blur(10px);
}
.shop-meta-label {
display: block;
margin-bottom: 0.65rem;
font-family: var(--font-gothic);
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.shop-meta-card strong {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 400;
color: var(--color-secondary);
}
.shop-hero-visual {
justify-self: end;
width: 100%;
}
.shop-hero-frame {
position: relative;
overflow: hidden;
min-height: 480px;
border: 1px solid rgba(201,169,97,0.26);
background: #111;
}
.shop-hero-frame::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10,10,10,0.02), rgba(10,10,10,0.4));
pointer-events: none;
}
.shop-hero-frame img {
width: 100%;
height: 100%;
min-height: 480px;
object-fit: cover;
display: block;
filter: grayscale(0.18) contrast(1.04);
}
.shop-hero-stamp {
position: absolute;
left: 1.15rem;
bottom: 1.15rem;
z-index: 2;
padding: 0.55rem 0.8rem;
border: 1px solid rgba(201,169,97,0.32);
background: rgba(10,10,10,0.62);
color: var(--color-secondary);
font-family: var(--font-gothic);
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
}
.shop-active-bar {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem;
align-items: center;
padding: 1rem 1.1rem;
border: 1px solid var(--color-line);
background: rgba(20,20,20,0.46);
margin-bottom: var(--s-8);
}
.shop-active-copy p {
margin: 0.4rem 0 0;
color: var(--color-text-muted);
}
.shop-active-chips {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.shop-chip {
display: inline-flex;
gap: 0.5rem;
align-items: center;
padding: 0.6rem 0.85rem;
border: 1px solid rgba(201,169,97,0.22);
background: rgba(201,169,97,0.08);
color: var(--color-secondary);
font-size: 0.8rem;
}
.shop-chip small {
font-family: var(--font-gothic);
font-size: 0.58rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-accent);
}
.shop-active-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
justify-content: flex-end;
}
.shop-sidebar {
padding-right: 0.25rem;
min-width: 0;
}
.filter-panel {
padding: 1.1rem 1.15rem !important;
backdrop-filter: blur(12px);
}
.shop-search-field {
position: relative;
}
.shop-search-field i {
position: absolute;
top: 50%;
left: 0.95rem;
transform: translateY(-50%);
color: var(--color-accent);
font-size: 0.85rem;
pointer-events: none;
}
.shop-search-field .f-input {
padding-left: 2.5rem !important;
}
.filter-list li + li {
margin-top: 0.2rem;
}
.filter-list li a {
padding: 0.75rem 0.8rem !important;
border: 1px solid transparent;
}
.filter-list li a span {
font-family: var(--font-mono);
}
.swatch input,
.size-btn input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.swatch span {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.14);
}
.size-buttons {
gap: 0.65rem;
}
.size-btn {
position: relative;
overflow: hidden;
}
.size-btn span {
position: relative;
z-index: 1;
}
.price-range {
gap: 0.7rem;
}
.price-range span {
color: var(--color-accent);
}
.shop-filter-actions {
display: grid;
gap: 0.75rem;
margin-top: var(--s-6);
}
.shop-toolbar {
display: flex;
justify-content: space-between;
align-items: end;
gap: 1rem;
}
.shop-toolbar-copy {
display: grid;
gap: 0.35rem;
min-width: 0;
}
.shop-toolbar-note {
margin: 0;
color: var(--color-text-muted);
font-family: var(--font-serif);
font-style: italic;
}
.shop-toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
justify-content: flex-end;
}
.shop-sort-wrap {
display: grid;
gap: 0.45rem;
min-width: 0;
}
.shop-sort-wrap span {
font-family: var(--font-gothic);
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.shop-filter-toggle-inline {
margin-bottom: 0;
width: auto;
padding-inline: 1rem;
}
.shop-results-shell {
padding: 0.25rem 0 0;
min-width: 0;
}
.shop-results-shell .product-card {
height: 100%;
}
.shop-results-shell .product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 1.6vw, 1.5rem);
}
.shop-empty-state {
border: 1px solid var(--color-line);
background: rgba(20,20,20,0.42);
}
.shop-empty-actions {
display: inline-flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
@media (min-width: 992px) {
.shop-shell {
grid-template-columns: clamp(220px, 18vw, 250px) minmax(0, 1fr);
gap: clamp(1.5rem, 2.2vw, 2.25rem);
}
.shop-sidebar {
position: sticky;
top: calc(var(--header-height) + 16px);
max-height: none;
overflow: visible;
}
.filter-panel {
padding: 1rem !important;
}
.filter-group {
padding: 0.95rem 0;
}
.shop-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.shop-sort-wrap,
.sort-select {
min-width: 220px;
}
}
@media (min-width: 992px) and (max-width: 1279px) {
.shop-hero-grid {
grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
gap: var(--s-8);
}
.shop-results-shell .product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1199px) {
.shop-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
}
.shop-hero-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.shop-layout {
padding: var(--s-8) 0 var(--s-12) !important;
}
.shop-shell,
.shop-hero-grid,
.shop-active-bar {
grid-template-columns: 1fr;
}
.shop-hero-visual {
justify-self: stretch;
}
.shop-hero-frame,
.shop-hero-frame img {
min-height: 360px;
}
.shop-sidebar {
position: static;
top: auto;
max-height: none;
overflow: visible;
padding-right: 0;
width: 100%;
}
.filter-panel {
display: none;
margin-top: 0.85rem;
}
.filter-panel.is-open {
display: block !important;
}
.shop-toolbar-copy,
.shop-toolbar-actions,
.shop-active-copy,
.shop-active-chips,
.shop-active-actions {
width: 100%;
}
.shop-toolbar-actions,
.shop-active-actions {
justify-content: flex-start;
}
.shop-results-shell .product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.shop-page-header {
padding-bottom: var(--s-8) !important;
}
.shop-layout {
padding: var(--s-7) 0 var(--s-10) !important;
}
.shop-hero-meta {
grid-template-columns: 1fr;
}
.shop-meta-card strong {
font-size: 1.1rem;
}
.shop-toolbar {
align-items: stretch;
}
.shop-toolbar-actions,
.shop-active-actions,
.shop-empty-actions {
width: 100%;
}
.shop-toolbar-actions {
display: grid;
grid-template-columns: 1fr;
}
.shop-toolbar-actions > *,
.shop-active-actions > * {
flex: 1 1 100%;
}
.shop-sort-wrap {
width: 100%;
}
.sort-select {
width: 100%;
}
.shop-hero-frame,
.shop-hero-frame img {
min-height: 300px;
}
.shop-active-bar,
.filter-panel,
.shop-empty-state {
padding-left: 0.9rem !important;
padding-right: 0.9rem !important;
}
.shop-results-shell .product-grid {
gap: 1rem;
}
}
@media (max-width: 575px) {
.shop-hero-grid {
gap: var(--s-7);
}
.shop-hero-frame,
.shop-hero-frame img {
min-height: 240px;
}
.shop-toolbar-copy {
gap: 0.5rem;
}
.shop-active-chips {
gap: 0.5rem;
}
.shop-chip {
width: 100%;
justify-content: space-between;
}
.shop-active-actions,
.shop-empty-actions {
display: grid;
grid-template-columns: 1fr;
}
.shop-results-shell .product-grid {
grid-template-columns: 1fr;
}
}
/* === MODERN GODFATHER OVERRIDE === */
body {
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: 0.01em;
background:
radial-gradient(circle at top, rgba(193,154,91,0.04) 0%, transparent 28%),
linear-gradient(180deg, rgba(27,27,29,0.2) 0%, rgba(5,5,5,0) 18%),
var(--color-bg);
}
body::before {
background-image:
radial-gradient(circle at 18% 20%, rgba(167,167,167,0.06) 0%, transparent 36%),
radial-gradient(circle at 82% 12%, rgba(193,154,91,0.04) 0%, transparent 24%),
radial-gradient(circle at 78% 78%, rgba(122,25,35,0.05) 0%, transparent 28%);
}
body::after {
opacity: 0.14;
mix-blend-mode: soft-light;
}
a:hover {
color: var(--color-accent-deep);
}
::selection {
background: var(--color-accent);
color: var(--color-bg);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.03em;
color: var(--color-text);
}
.page-h,
.section-h,
.footer-h,
.auth-h {
font-family: var(--font-display) !important;
font-style: normal !important;
font-weight: 600 !important;
letter-spacing: -0.035em !important;
}
.page-sub,
.section-sub,
.auth-sub,
.shop-toolbar-note,
.footer-sub {
font-family: var(--font-sans) !important;
font-style: normal !important;
color: var(--color-text-muted) !important;
}
.eyebrow,
.search-eyebrow,
.result-count,
.shop-meta-label,
.brand-submark,
.footer-brand-note,
.auth-brand-tag {
font-family: var(--font-sans) !important;
color: var(--color-text-muted) !important;
letter-spacing: 0.32em !important;
font-weight: 700 !important;
}
.eyebrow::before,
.nav-link::after,
.shop-meta-card,
.filter-panel,
.shop-active-bar,
.shop-empty-state,
.shop-toolbar,
.newsletter-form,
.luxury-offcanvas .offcanvas-header,
.cart-drawer .offcanvas-footer {
border-color: var(--color-line) !important;
}
.eyebrow::before {
background: var(--color-line) !important;
}
.site-header {
background: linear-gradient(90deg, rgba(5,5,5,0.96), rgba(27,27,29,0.92), rgba(5,5,5,0.96)) !important;
border-bottom: 1px solid var(--color-line) !important;
backdrop-filter: blur(18px);
}
.announce-bar {
background: #050505 !important;
color: var(--color-text-muted) !important;
border-bottom: 1px solid var(--color-line-soft);
}
.brand,
.nav-link,
.header-icon,
.mobile-toggle,
.mobile-nav a,
.search-input-luxe,
.link-luxe {
color: var(--color-secondary) !important;
}
.brand-mark,
.search-hint,
.page-sub,
.f-desc,
.f-col li a,
.breadcrumb-luxe,
.auth-footer {
color: var(--color-text-muted) !important;
}
.header-icon:hover,
.mobile-nav a:hover,
.link-luxe:hover,
.f-col li a:hover,
.breadcrumb-luxe a:hover,
.pc-name a:hover,
.jcat-list a:hover {
color: var(--color-accent-deep) !important;
}
.count-badge,
.btn-luxe-solid,
.newsletter-form button,
.f-socials a:hover {
background: var(--color-accent-deep) !important;
color: var(--color-secondary) !important;
border-color: var(--color-accent-deep) !important;
}
.btn-luxe-solid:hover,
.newsletter-form button:hover {
background: rgba(122,25,35,0.12) !important;
color: var(--color-secondary) !important;
border-color: var(--color-accent-deep) !important;
box-shadow: 0 12px 30px rgba(122,25,35,0.18);
}
.btn-luxe-line,
.btn-luxe-outline-light,
.btn-luxe-outline {
background: rgba(5,5,5,0.35) !important;
color: var(--color-secondary) !important;
border-color: var(--color-line) !important;
}
.btn-luxe-line:hover,
.btn-luxe-outline-light:hover,
.btn-luxe-outline:hover {
background: var(--color-accent-deep) !important;
color: var(--color-secondary) !important;
border-color: var(--color-accent-deep) !important;
}
.link-luxe {
border-bottom-color: var(--color-line) !important;
}
.link-luxe:hover {
border-bottom-color: var(--color-accent-deep) !important;
}
.luxury-offcanvas,
.luxury-search .offcanvas-body,
.cart-drawer.luxury-offcanvas,
.mobile-nav {
background: var(--color-bg) !important;
color: var(--color-secondary) !important;
}
.search-input-luxe,
.newsletter-form input,
.f-input,
.sort-select {
border-color: var(--color-line) !important;
color: var(--color-secondary) !important;
}
.search-input-luxe:focus,
.newsletter-form:focus-within,
.f-input:focus,
.sort-select:focus {
border-color: var(--color-accent) !important;
box-shadow: 0 0 0 1px rgba(193,154,91,0.18);
}
/* === HOMEPAGE CONVERSION REDESIGN === */
.home-bg-panel {
position: relative;
overflow: hidden;
}
.home-bg-panel > .container {
position: relative;
z-index: 1;
}
.home-bg-panel::before {
content: '';
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.18;
transform: scale(1.03);
pointer-events: none;
}
.home-bg-panel::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.home-bg-featured::before {
background-image: url('../images/image-lanostra-02.png');
background-position: center top;
opacity: 0.1;
}
.home-bg-featured::after {
background: linear-gradient(180deg, rgba(5,5,5,0.92) 0%, rgba(16,16,17,0.86) 100%);
}
.home-bg-trust::before {
background-image: url('../images/image-lanostra-03.png');
opacity: 0.08;
}
.home-bg-trust::after {
background: linear-gradient(180deg, rgba(16,16,17,0.94) 0%, rgba(16,16,17,0.88) 100%);
}
.home-bg-collection::before {
background-image: url('../images/image-lanostra-05.png');
opacity: 0.12;
}
.home-bg-collection::after {
background: linear-gradient(180deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.82) 100%);
}
.home-bg-proof::before {
background-image: url('../images/image-lanostra-06.png');
opacity: 0.09;
}
.home-bg-proof::after {
background: linear-gradient(180deg, rgba(16,16,17,0.95) 0%, rgba(16,16,17,0.9) 100%);
}
.home-bg-cta::before {
background-image: url('../images/image-lanostra-01.png');
background-position: center bottom;
opacity: 0.08;
}
.home-bg-cta::after {
background: linear-gradient(180deg, rgba(5,5,5,0.88) 0%, rgba(27,27,29,0.95) 100%);
}
.home-trust-strip,
.home-quick-collections,
.home-category-pills,
.home-sales-proof,
.home-final-cta {
padding: var(--s-16) 0;
}
.home-trust-strip {
background: var(--color-bg-soft);
}
.home-trust-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.home-trust-card,
.home-proof-card,
.home-final-cta-box {
border: 1px solid var(--color-line);
background: rgba(27,27,29,0.62);
}
.home-trust-card {
padding: 1.25rem;
}
.home-trust-card h3 {
margin-bottom: 0.65rem;
font-size: 1.35rem;
}
.home-trust-card p {
margin: 0;
color: var(--color-text-muted);
}
.home-quick-collections {
background: var(--color-bg);
}
.home-collection-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.home-collection-card {
display: grid;
min-width: 0;
border: 1px solid var(--color-line);
background: rgba(27,27,29,0.52);
overflow: hidden;
transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.home-collection-card:hover {
transform: translateY(-4px);
border-color: rgba(122,25,35,0.75);
box-shadow: 0 18px 42px rgba(0,0,0,0.24);
}
.home-collection-image {
aspect-ratio: 4 / 4.7;
overflow: hidden;
}
.home-collection-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-base);
}
.home-collection-card:hover .home-collection-image img {
transform: scale(1.04);
}
.home-collection-body {
display: grid;
gap: 0.8rem;
padding: 1.15rem;
}
.home-collection-kicker,
.home-category-pill small {
color: var(--color-text-muted);
font-size: 0.68rem;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 700;
}
.home-collection-body h3 {
margin: 0;
font-size: 1.6rem;
}
.home-collection-body p {
margin: 0;
color: var(--color-text-muted);
}
.home-category-pills {
padding-top: 0;
background: var(--color-bg);
}
.home-category-grid {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
justify-content: center;
}
.home-category-pill {
display: inline-grid;
gap: 0.45rem;
min-width: 180px;
padding: 1rem 1.1rem;
border: 1px solid var(--color-line);
background: rgba(27,27,29,0.44);
transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.home-category-pill:hover {
transform: translateY(-3px);
border-color: rgba(122,25,35,0.74);
background: rgba(122,25,35,0.12);
}
.home-category-name {
color: var(--color-secondary);
font-family: var(--font-gothic);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.86rem;
}
.home-featured-products,
.home-best-sellers {
background: transparent;
}
.home-event-strip {
padding: clamp(1rem, 3vw, 1.5rem) 0 0;
}
.home-event-grid {
display: grid;
gap: 1rem;
}
.home-event-slider {
display: grid;
gap: 0.85rem;
}
.hes-viewport {
overflow: hidden;
border-radius: 0;
}
.hes-track {
display: flex;
width: 100%;
will-change: transform;
transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hes-slide {
flex: 0 0 100%;
min-width: 100%;
}
.hes-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
}
.hes-dot {
width: 26px;
height: 4px;
border-radius: 999px;
border: 1px solid rgba(17,17,20,0.18);
background: rgba(17,17,20,0.12);
padding: 0;
cursor: pointer;
transition: background 220ms ease, border-color 220ms ease, width 220ms ease;
}
.hes-dot.active {
width: 38px;
border-color: rgba(181,139,84,0.55);
background: rgba(181,139,84,0.32);
}
.home-event-banner {
display: block;
overflow: hidden;
border: 1px solid var(--color-line);
background: rgba(16,16,17,0.82);
}
.home-event-banner img {
display: block;
width: 100%;
height: auto;
aspect-ratio: auto;
object-fit: contain;
}
.home-event-cta {
margin-top: 0.95rem;
display: flex;
justify-content: center;
}
.home-product-feed {
padding: clamp(1.25rem, 3vw, 2rem) 0 var(--s-16);
}
.home-sales-proof {
background: var(--color-bg-soft);
}
.home-proof-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.home-proof-card {
padding: 1.35rem;
}
.home-proof-text {
color: var(--color-secondary);
line-height: 1.8;
margin: 1rem 0 1.2rem;
}
.home-proof-author {
display: grid;
gap: 0.2rem;
}
.home-proof-author span {
color: var(--color-text-muted);
font-size: 0.88rem;
}
.home-final-cta {
background: linear-gradient(180deg, rgba(5,5,5,0.8) 0%, rgba(27,27,29,0.94) 100%);
}
.home-final-cta-box {
padding: clamp(1.5rem, 4vw, 3rem);
text-align: center;
}
.home-final-actions {
display: flex;
justify-content: center;
gap: 0.9rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
@media (max-width: 1199px) {
.home-collection-grid,
.home-trust-grid,
.home-proof-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.home-collection-grid,
.home-trust-grid,
.home-proof-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.home-final-actions {
display: grid;
grid-template-columns: 1fr;
}
.home-event-banner img {
height: auto;
aspect-ratio: auto;
}
.home-category-grid {
display: grid;
grid-template-columns: 1fr;
}
.home-category-pill {
min-width: 0;
}
.home-bg-panel::before {
opacity: 0.08;
}
}
/* === AUCTION EXPERIENCE === */
.pc-badge-auction {
background: rgba(122,25,35,0.92);
border-color: rgba(122,25,35,0.92);
color: var(--color-secondary);
}
.pc-auction-meta {
display: flex;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.8rem;
color: var(--color-text-muted);
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.auction-panel {
display: grid;
gap: 1rem;
padding: 1.25rem;
border: 1px solid var(--color-line);
background: rgba(27,27,29,0.7);
}
.auction-panel-head {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.auction-kicker,
.auction-status {
color: var(--color-text-muted);
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 700;
}
.auction-price-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.auction-price-row > div {
padding: 1rem;
border: 1px solid var(--color-line);
background: rgba(5,5,5,0.36);
}
.auction-price-row small {
display: block;
margin-bottom: 0.5rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.18em;
}
.auction-price-row strong {
font-size: clamp(1.2rem, 2vw, 1.8rem);
font-family: var(--font-display);
color: var(--color-secondary);
}
.auction-note {
margin: 0;
color: var(--color-text-muted);
}
.auction-bid-form {
display: grid;
gap: 0.8rem;
}
.auction-bid-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
}
.p-perks-auction {
margin-top: 0;
}
.auction-page {
padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4.5rem, 8vw, 6rem);
background: var(--color-bg);
}
.auction-empty {
display: grid;
grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
gap: clamp(1.25rem, 4vw, 2.5rem);
align-items: center;
padding: clamp(1.1rem, 3vw, 1.6rem) 0;
}
.auction-empty-media {
display: flex;
justify-content: center;
}
.auction-lock {
position: relative;
width: clamp(220px, 30vw, 320px);
aspect-ratio: 1 / 1;
border-radius: 28px;
border: 1px solid rgba(17,17,20,0.12);
background:
radial-gradient(circle at top left, rgba(0,0,0,0.035) 0%, transparent 55%),
linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
box-shadow: 0 26px 70px rgba(0,0,0,0.10);
overflow: hidden;
}
.auction-lock i {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: clamp(5.5rem, 10vw, 8.5rem);
color: rgba(17,17,20,0.92);
z-index: 1;
}
.auction-lock-overlay {
position: absolute;
inset: -40px;
background:
radial-gradient(circle at 35% 35%, rgba(210,32,48,0.28) 0%, transparent 46%),
linear-gradient(135deg, rgba(210,32,48,0.35), rgba(210,32,48,0.06) 62%, transparent);
mix-blend-mode: multiply;
pointer-events: none;
transform: rotate(-6deg);
}
.auction-empty-copy {
max-width: 46rem;
}
.auction-empty-announce {
display: inline-flex;
align-items: center;
padding: 0.55rem 0.85rem;
border-radius: 999px;
border: 1px solid rgba(210,32,48,0.22);
background: rgba(210,32,48,0.08);
color: rgba(17,17,20,0.88);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.auction-empty-title {
margin: 1.1rem 0 0.75rem;
font-family: var(--font-display);
font-weight: 400;
color: rgba(17,17,20,0.95);
font-size: clamp(2.3rem, 4.4vw, 3.6rem);
line-height: 1.02;
}
.auction-empty-sub {
margin: 0;
color: rgba(17,17,20,0.72);
line-height: 1.85;
max-width: 42rem;
}
.auction-empty-actions {
margin-top: 1.35rem;
display: flex;
gap: 0.85rem;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.auction-price-row,
.auction-bid-row {
grid-template-columns: 1fr;
}
.auction-empty {
grid-template-columns: 1fr;
text-align: center;
}
.auction-empty-actions {
justify-content: center;
}
}
/* =================================================================
MODERN LUXURY OVERRIDES
================================================================= */
:root {
--radius-xs: 12px;
--radius-sm: 18px;
--radius-md: 26px;
--radius-lg: 38px;
--surface-veil: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
}
body.theme-luxury {
background: white;
}
body.theme-luxury::before {
background-image:
radial-gradient(circle at 12% 18%, rgba(193,154,91,0.08) 0%, transparent 36%),
radial-gradient(circle at 88% 20%, rgba(122,25,35,0.10) 0%, transparent 28%),
radial-gradient(circle at 70% 72%, rgba(193,154,91,0.05) 0%, transparent 32%);
}
.site-main {
position: relative;
z-index: 2;
}
.page-header {
position: relative;
overflow: hidden;
padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
background:
linear-gradient(135deg, rgba(193,154,91,0.14) 0%, rgba(193,154,91,0.03) 20%, rgba(6,6,6,0.92) 56%, rgba(122,25,35,0.16) 100%);
}
.page-header::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(193,154,91,0.56), transparent);
}
.page-header .page-h {
max-width: 11ch;
line-height: 0.95;
letter-spacing: -0.04em;
text-wrap: balance;
}
.page-header .page-sub,
.history-lead {
max-width: 62ch;
}
.section-kicker,
.history-signature-kicker {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 1rem;
color: var(--color-accent);
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 700;
}
.section-kicker::before,
.history-signature-kicker::before {
content: '';
width: 2.5rem;
height: 1px;
background: rgba(193,154,91,0.6);
}
.btn-luxe-solid,
.btn-luxe-line,
.btn-luxe-light,
.btn-luxe-outline-light,
.btn-luxe-outline {
border-radius: 999px !important;
box-shadow: 0 12px 36px rgba(0,0,0,0.18);
}
.btn-luxe-solid {
background: linear-gradient(135deg, #f0d7a2 0%, #c19a5b 45%, #9e7740 100%) !important;
border-color: rgba(255,255,255,0.18) !important;
color: #0a0a0a !important;
}
.btn-luxe-line,
.btn-luxe-outline-light,
.btn-luxe-outline {
border-color: rgba(193,154,91,0.4) !important;
background: rgba(255,255,255,0.02) !important;
backdrop-filter: blur(10px);
}
.link-luxe {
color: var(--color-secondary) !important;
}
.link-luxe:hover {
color: var(--color-accent-bright) !important;
}
.home-event-banner,
.product-card,
.p-summary-card,
.p-purchase-card,
.acc-block,
.account-sidebar,
.wishlist-card,
.cart-card,
.checkout-card,
.shop-toolbar,
.filter-panel,
.track-card,
.contact-card,
.auction-panel,
.order-summary,
.or-card,
.review-card,
.review-form-wrap,
.review-locked-card {
border-radius: var(--radius-md) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
background:
linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%),
rgba(14,14,15,0.86) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 24px 60px rgba(0,0,0,0.28);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.home-event-banner {
border-radius: 0px !important;
}
.product-card {
overflow: hidden;
transform: translateY(0);
transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.product-card:hover {
transform: translateY(-8px);
border-color: rgba(193,154,91,0.36) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 32px 80px rgba(0,0,0,0.38);
}
.pc-media {
background:
radial-gradient(circle at top, rgba(193,154,91,0.08) 0%, transparent 40%),
linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.16) 100%);
}
.pc-body {
padding: 1.25rem 1.25rem 1.35rem;
}
.pc-name {
font-size: clamp(1.05rem, 1.5vw, 1.22rem);
letter-spacing: -0.02em;
}
.pc-collection,
.pc-price,
.pc-auction-meta {
position: relative;
z-index: 1;
}
.section-cta {
padding: clamp(3rem, 6vw, 5rem) 0 0;
}
.account-layout,
.shop-results-shell,
.checkout-layout,
.cart-layout {
align-items: start;
}
.acc-block,
.filter-panel,
.shop-toolbar {
padding: clamp(1.15rem, 3vw, 1.6rem);
}
.acc-order-row {
border-radius: calc(var(--radius-sm) - 4px);
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
}
.acc-order-row:hover {
border-color: rgba(193,154,91,0.32);
background: rgba(193,154,91,0.06);
}
.site-footer {
position: relative;
margin-top: clamp(4rem, 8vw, 7rem);
background:
radial-gradient(circle at top, rgba(193,154,91,0.10) 0%, transparent 35%),
linear-gradient(180deg, rgba(15,15,16,0.92) 0%, rgba(8,8,8,0.98) 100%);
border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.page-header-history {
padding-bottom: clamp(3rem, 5vw, 4.75rem);
}
.history-hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: stretch;
}
.history-hero-copy,
.history-hero-panel,
.history-story-card,
.history-manifesto,
.history-value-card,
.history-quote {
position: relative;
border-radius: var(--radius-lg);
border: 1px solid rgba(255,255,255,0.08);
background:
linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.012) 100%),
rgba(10,10,11,0.78);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 28px 80px rgba(0,0,0,0.26);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.history-hero-copy {
padding: clamp(2rem, 5vw, 4rem);
}
.history-lead {
margin-top: 1.35rem;
color: var(--color-secondary-soft);
font-size: clamp(1rem, 1.9vw, 1.12rem);
line-height: 1.9;
}
.history-hero-actions {
display: flex;
gap: 0.9rem;
flex-wrap: wrap;
margin-top: 2rem;
}
.history-hero-panel {
display: grid;
gap: 1rem;
padding: clamp(1.25rem, 3vw, 1.8rem);
}
.history-signature {
padding: 1.2rem 1.25rem;
border-radius: calc(var(--radius-md) - 6px);
border: 1px solid rgba(193,154,91,0.18);
background: linear-gradient(180deg, rgba(193,154,91,0.10) 0%, rgba(255,255,255,0.02) 100%);
}
.history-signature strong {
display: block;
margin-bottom: 0.6rem;
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.65rem);
color: var(--color-secondary);
}
.history-signature p {
margin: 0;
color: var(--color-secondary-soft);
}
.history-pillars {
display: grid;
gap: 0.85rem;
}
.history-pillar {
display: grid;
gap: 0.28rem;
padding: 1rem 1.1rem;
border-radius: calc(var(--radius-md) - 10px);
border: 1px solid rgba(255,255,255,0.07);
background: rgba(255,255,255,0.02);
}
.history-pillar span,
.history-value-index {
color: var(--color-accent);
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 700;
}
.history-pillar strong {
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--color-secondary);
}
.history-pillar small {
color: var(--color-text-muted);
line-height: 1.7;
}
.history-story-section {
padding-top: clamp(2rem, 4vw, 3rem);
}
.history-story-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
gap: clamp(1.5rem, 4vw, 2.5rem);
align-items: stretch;
}
.history-story-card {
padding: clamp(1.6rem, 4vw, 2.4rem);
}
.history-story-card p:last-child {
margin-bottom: 0;
}
.history-story-visual {
position: relative;
min-height: 100%;
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 28px 80px rgba(0,0,0,0.28);
}
.history-story-visual img {
width: 100%;
height: 100%;
min-height: 440px;
object-fit: cover;
display: block;
filter: saturate(0.92) contrast(1.04);
}
.history-story-visual::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(8,8,8,0.05) 0%, rgba(8,8,8,0.72) 100%);
}
.history-visual-caption {
position: absolute;
left: 1.25rem;
right: 1.25rem;
bottom: 1.25rem;
z-index: 2;
padding: 1rem 1.1rem;
border-radius: calc(var(--radius-sm) - 4px);
background: rgba(10,10,11,0.58);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
}
.history-visual-caption span {
display: block;
margin-bottom: 0.3rem;
color: var(--color-accent);
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.history-visual-caption strong {
font-family: var(--font-display);
font-size: clamp(1rem, 1.8vw, 1.3rem);
}
.history-values {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.history-value-card {
padding: 1.4rem 1.25rem;
}
.history-value-card h3 {
margin: 0.65rem 0 0.55rem;
font-size: 1.3rem;
}
.history-value-card p {
margin: 0;
color: var(--color-text-muted);
}
.history-manifesto {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
gap: clamp(1.25rem, 3vw, 2rem);
margin-top: clamp(1.5rem, 4vw, 2.5rem);
padding: clamp(1.5rem, 4vw, 2.2rem);
}
.history-manifesto h2 {
margin-bottom: 1rem;
max-width: 16ch;
}
.history-manifesto-copy p:last-child {
margin-bottom: 0;
}
.history-quote {
display: grid;
align-content: center;
gap: 1rem;
padding: clamp(1.4rem, 4vw, 2rem);
background:
linear-gradient(180deg, rgba(193,154,91,0.14) 0%, rgba(255,255,255,0.02) 100%),
rgba(11,11,11,0.9);
}
.history-quote p {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.1rem);
line-height: 1.28;
color: var(--color-secondary);
}
.history-quote span {
color: var(--color-text-muted);
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.75rem;
}
.history-gallery {
margin-top: clamp(1.5rem, 4vw, 2.4rem);
}
.history-gallery .ag-item {
overflow: hidden;
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 22px 48px rgba(0,0,0,0.22);
}
.history-gallery .ag-item img {
transition: transform var(--t-base), filter var(--t-base);
}
.history-gallery .ag-item:hover img {
transform: scale(1.04);
filter: saturate(1.02);
}
@media (max-width: 1199px) {
.history-hero,
.history-story-grid,
.history-manifesto,
.history-values {
grid-template-columns: 1fr 1fr;
}
.history-values {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.history-hero,
.history-story-grid,
.history-manifesto,
.history-values {
grid-template-columns: 1fr;
}
.history-hero-copy,
.history-hero-panel,
.history-story-card,
.history-manifesto,
.history-quote {
border-radius: var(--radius-md);
}
.history-hero-actions {
display: grid;
grid-template-columns: 1fr;
}
.history-story-visual img {
min-height: 340px;
}
.page-header .page-h {
max-width: none;
}
}
/* =================================================================
HISTORY PAGE REFINED
================================================================= */
.page-header-history {
position: relative;
padding-top: clamp(3.75rem, 7vw, 6rem);
padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
overflow: hidden;
}
.page-header-history::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at top left, rgba(181,139,84,0.14), transparent 34%),
radial-gradient(circle at bottom right, rgba(17,17,20,0.08), transparent 30%),
linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
pointer-events: none;
}
.page-header-history .container,
.history-story-section .container {
position: relative;
z-index: 1;
}
.history-hero {
grid-template-columns: minmax(0, 1.18fr) minmax(330px, 0.82fr);
gap: clamp(1.4rem, 4vw, 2.4rem);
}
.history-hero-copy,
.history-hero-panel,
.history-story-card,
.history-manifesto,
.history-value-card,
.history-quote,
.history-journey,
.history-statement-card,
.history-closing {
border: 1px solid rgba(17,17,20,0.08);
background:
linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,249,251,0.98) 100%);
box-shadow:
0 24px 80px rgba(17,17,20,0.07),
inset 0 1px 0 rgba(255,255,255,0.88);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.history-hero-copy {
padding: clamp(2rem, 5vw, 4rem);
}
.history-kicker-row {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1.2rem;
}
.history-kicker-line {
flex: 0 0 72px;
height: 1px;
background: linear-gradient(90deg, rgba(181,139,84,0.65), rgba(181,139,84,0));
}
.history-kicker-note {
color: rgba(17,17,20,0.55);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.page-header-history .page-h {
max-width: 11ch;
margin-bottom: 0.8rem;
color: #15171c;
font-size: clamp(3.2rem, 8vw, 6.2rem);
line-height: 0.9;
}
.page-header-history .page-sub {
color: rgba(17,17,20,0.66);
font-size: clamp(1.02rem, 2vw, 1.22rem);
letter-spacing: 0.08em;
}
.history-lead {
max-width: 42rem;
color: rgba(17,17,20,0.78);
font-size: clamp(1rem, 1.9vw, 1.16rem);
line-height: 1.95;
}
.history-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-top: 1.4rem;
}
.history-hero-tags span {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0.58rem 0.95rem;
border-radius: 999px;
border: 1px solid rgba(181,139,84,0.18);
background: rgba(181,139,84,0.08);
color: rgba(17,17,20,0.8);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.history-hero-actions {
margin-top: 1.7rem;
}
.history-hero-band {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
margin-top: 1.8rem;
}
.history-band-item {
padding: 1rem 1rem 1.05rem;
border-radius: 20px;
border: 1px solid rgba(17,17,20,0.08);
background: linear-gradient(180deg, #ffffff, #f7f8fa);
}
.history-band-item span {
display: block;
margin-bottom: 0.4rem;
color: rgba(17,17,20,0.5);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.history-band-item strong {
color: #15171c;
font-size: 0.95rem;
line-height: 1.55;
}
.history-hero-panel {
gap: 1rem;
padding: 1.2rem;
}
.history-signature {
border: 1px solid rgba(181,139,84,0.2);
background: linear-gradient(180deg, rgba(181,139,84,0.12) 0%, rgba(255,255,255,0.96) 100%);
}
.history-signature strong,
.history-pillar strong,
.history-visual-caption strong,
.history-value-card h3,
.history-manifesto h2,
.history-journey-head h2,
.history-journey-step h3,
.history-closing h2 {
color: #15171c;
}
.history-signature p,
.history-pillar small,
.history-value-card p,
.history-journey-head p,
.history-journey-step p,
.history-closing p,
.history-story-card p {
color: rgba(17,17,20,0.72);
}
.history-panel-quote {
padding: 1.1rem 1.15rem;
border-radius: 22px;
background: #16181d;
border: 1px solid rgba(17,17,20,0.1);
}
.history-panel-quote p {
margin: 0;
color: #ffffff;
font-family: var(--font-display);
font-size: clamp(1.15rem, 2vw, 1.45rem);
line-height: 1.45;
}
.history-panel-quote span {
display: inline-block;
margin-top: 0.85rem;
color: rgba(255,255,255,0.6);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.history-pillar {
border: 1px solid rgba(17,17,20,0.08);
background: rgba(255,255,255,0.86);
}
.history-panel-footer {
padding-top: 0.15rem;
}
.history-panel-seal {
display: grid;
gap: 0.22rem;
padding: 1rem 1.05rem;
border-top: 1px solid rgba(17,17,20,0.08);
}
.history-panel-seal small {
color: rgba(17,17,20,0.48);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.history-panel-seal strong {
color: #15171c;
font-family: var(--font-display);
font-size: 1.12rem;
}
.history-story-section {
padding-top: clamp(2rem, 4vw, 3.2rem);
padding-bottom: clamp(4rem, 7vw, 6rem);
background:
radial-gradient(circle at top left, rgba(181,139,84,0.07), transparent 25%),
linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
}
.history-story-grid {
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.96fr);
gap: clamp(1.5rem, 4vw, 2.2rem);
}
.history-story-card {
padding: clamp(1.8rem, 4vw, 2.5rem);
}
.history-story-card .about-h {
margin-bottom: 1rem;
color: #15171c;
max-width: 13ch;
}
.history-story-visual {
border: 1px solid rgba(17,17,20,0.08);
box-shadow: 0 26px 65px rgba(17,17,20,0.1);
}
.history-story-visual::before {
content: '';
position: absolute;
inset: 18px;
border: 1px solid rgba(255,255,255,0.22);
border-radius: calc(var(--radius-lg) - 8px);
z-index: 1;
pointer-events: none;
}
.history-story-visual::after {
background: linear-gradient(180deg, rgba(10,10,10,0.02) 8%, rgba(10,10,10,0.74) 100%);
}
.history-visual-caption {
background: rgba(255,255,255,0.84);
border: 1px solid rgba(255,255,255,0.46);
backdrop-filter: blur(14px);
}
.history-visual-caption span {
color: rgba(17,17,20,0.48);
}
.history-statement-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: clamp(1.35rem, 4vw, 2rem);
}
.history-statement-card {
padding: 1.35rem 1.25rem;
}
.history-statement-label {
display: inline-flex;
margin-bottom: 0.75rem;
color: var(--color-accent);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.history-statement-card strong {
display: block;
margin-bottom: 0.55rem;
color: #15171c;
font-size: 1.08rem;
}
.history-statement-card p {
margin: 0;
color: rgba(17,17,20,0.68);
line-height: 1.72;
}
.history-values {
gap: 1rem;
margin-top: clamp(1.25rem, 4vw, 2rem);
}
.history-value-card {
padding: 1.45rem 1.3rem;
}
.history-value-card h3 {
font-size: 1.42rem;
}
.history-journey {
margin-top: clamp(1.4rem, 4vw, 2.2rem);
padding: clamp(1.5rem, 4vw, 2.2rem);
}
.history-journey-head {
max-width: 52rem;
}
.history-journey-head h2 {
margin-bottom: 0.85rem;
max-width: 15ch;
}
.history-journey-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.4rem;
}
.history-journey-step {
padding: 1.25rem 1.1rem;
border-radius: 22px;
border: 1px solid rgba(17,17,20,0.08);
background: #ffffff;
}
.history-journey-step span {
display: inline-flex;
margin-bottom: 0.65rem;
color: var(--color-accent);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.history-journey-step h3 {
margin-bottom: 0.55rem;
font-size: 1.15rem;
}
.history-manifesto {
grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
margin-top: clamp(1.5rem, 4vw, 2.4rem);
padding: clamp(1.7rem, 4vw, 2.4rem);
}
.history-manifesto h2 {
max-width: 15ch;
}
.history-quote {
background:
linear-gradient(180deg, rgba(181,139,84,0.15) 0%, rgba(248,249,251,0.94) 100%);
border: 1px solid rgba(181,139,84,0.2);
}
.history-quote p {
color: #15171c;
font-size: clamp(1.55rem, 3vw, 2.2rem);
}
.history-quote span {
color: rgba(17,17,20,0.55);
}
.history-gallery {
margin-top: clamp(1.5rem, 4vw, 2.4rem);
}
.history-gallery .ag-item {
border: 1px solid rgba(17,17,20,0.08);
box-shadow: 0 24px 54px rgba(17,17,20,0.1);
}
.history-closing {
display: grid;
grid-template-columns: minmax(0, 1.15fr) auto;
gap: 1.25rem;
align-items: center;
margin-top: clamp(1.5rem, 4vw, 2.4rem);
padding: clamp(1.5rem, 4vw, 2.1rem);
}
.history-closing-copy {
max-width: 42rem;
}
.history-closing h2 {
margin-bottom: 0.75rem;
max-width: 15ch;
}
.history-closing-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.8rem;
}
@media (max-width: 1199px) {
.history-hero-band,
.history-statement-strip,
.history-journey-grid {
grid-template-columns: 1fr 1fr;
}
.history-closing {
grid-template-columns: 1fr;
}
.history-closing-actions {
justify-content: flex-start;
}
}
@media (max-width: 767px) {
.history-kicker-row {
flex-wrap: wrap;
gap: 0.65rem;
}
.history-kicker-line {
flex-basis: 48px;
}
.history-hero-band,
.history-statement-strip,
.history-journey-grid {
grid-template-columns: 1fr;
}
.history-hero-copy,
.history-hero-panel,
.history-story-card,
.history-manifesto,
.history-quote,
.history-journey,
.history-closing {
padding: 1.3rem;
}
.history-story-card .about-h,
.history-journey-head h2,
.history-manifesto h2,
.history-closing h2 {
max-width: none;
}
}
.history-text-hero {
position: relative;
padding-top: clamp(3.75rem, 7vw, 6rem);
padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(181,139,84,0.12), transparent 34%),
radial-gradient(circle at bottom right, rgba(17,17,20,0.08), transparent 30%),
linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}
.history-text-hero-inner {
max-width: 62rem;
}
.history-text-hero .page-h {
max-width: 12ch;
margin-bottom: 0.8rem;
color: #15171c;
font-size: clamp(3.1rem, 8vw, 6.1rem);
line-height: 0.92;
font-family: var(--font-display) !important;
font-weight: 400;
}
.history-text-hero .text-reveal-mask,
.history-text-hero .text-reveal-mask > span,
.history-text-hero .text-reveal-mask.is-visible > span,
.history-text-hero .is-visible .text-reveal-mask > span {
font-family: var(--font-display) !important;
color: #5b5b5b;
}
.history-text-hero .page-sub {
color: rgba(17,17,20,0.64);
font-size: clamp(1.02rem, 2vw, 1.22rem);
letter-spacing: 0.08em;
}
.history-text-hero .history-lead {
margin-top: 1.1rem;
max-width: 46rem;
color: rgba(17,17,20,0.78);
font-size: clamp(1rem, 1.9vw, 1.16rem);
line-height: 1.95;
}
.history-text-body {
padding: clamp(2.5rem, 6vw, 4.25rem) 0 clamp(4.25rem, 8vw, 6rem);
background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
}
.history-prose {
max-width: 62rem;
}
.history-kicker {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.85rem;
color: rgba(17,17,20,0.52);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.history-kicker::after {
content: '';
width: 64px;
height: 1px;
background: linear-gradient(90deg, rgba(181,139,84,0.65), rgba(181,139,84,0));
}
.history-h {
margin: 0 0 0.9rem;
font-family: var(--font-display);
font-weight: 400;
color: #15171c;
font-size: clamp(1.85rem, 3.2vw, 2.7rem);
line-height: 1.08;
max-width: 20ch;
}
.history-block {
padding: clamp(1.1rem, 2vw, 1.5rem) 0;
}
.history-block p {
margin: 0 0 1rem;
color: rgba(17,17,20,0.74);
line-height: 1.9;
font-size: 1.02rem;
}
.history-block p:last-child {
margin-bottom: 0;
}
.history-divider {
height: 1px;
width: 100%;
background: rgba(17,17,20,0.1);
}
.history-quote-block {
margin: 1.8rem 0;
padding: 1.45rem 1.35rem;
border-radius: 18px;
border: 1px solid rgba(181,139,84,0.22);
background: linear-gradient(180deg, rgba(181,139,84,0.14) 0%, rgba(255,255,255,0.96) 100%);
}
.history-quote-block p {
margin: 0;
color: #15171c;
font-family: var(--font-display);
font-size: clamp(1.35rem, 2.8vw, 2rem);
line-height: 1.35;
}
.history-quote-block span {
display: inline-block;
margin-top: 0.9rem;
color: rgba(17,17,20,0.56);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.history-list {
list-style: none;
padding: 0;
margin: 1.1rem 0 0;
display: grid;
gap: 0.9rem;
}
.history-list li {
display: grid;
gap: 0.25rem;
padding: 1rem 1.05rem;
border-radius: 16px;
border: 1px solid rgba(17,17,20,0.08);
background: rgba(255,255,255,0.9);
box-shadow: 0 18px 45px rgba(17,17,20,0.06);
}
.history-list li strong {
color: #15171c;
font-size: 1.05rem;
}
.history-list li span {
color: rgba(17,17,20,0.7);
line-height: 1.7;
}
@media (max-width: 767px) {
.history-text-hero .page-h,
.history-h {
max-width: none;
}
.history-quote-block {
padding: 1.2rem 1.1rem;
}
}
/* =================================================================
ANNOUNCE BAR REFINEMENT
================================================================= */
.announce-bar {
position: relative;
overflow: hidden !important;
padding: 0.58rem 0 !important;
background:
linear-gradient(90deg, rgba(7,7,7,0.98) 0%, rgba(18,18,18,0.96) 45%, rgba(7,7,7,0.98) 100%) !important;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(193,154,91,0.16) !important;
}
.announce-bar::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(193,154,91,0.08), transparent);
opacity: 0.8;
}
.announce-track {
display: flex !important;
align-items: center;
gap: 1.1rem;
min-width: max-content;
padding-inline: 1.5rem;
white-space: nowrap;
animation: marquee 26s linear infinite;
will-change: transform;
}
.announce-track:hover {
animation-play-state: paused;
}
.announce-track span:not(.dot) {
display: inline-flex;
align-items: center;
color: rgba(240,238,233,0.88) !important;
font-family: var(--font-sans) !important;
font-size: 0.72rem !important;
font-weight: 600;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
}
.announce-track .dot {
color: var(--color-accent) !important;
padding: 0 0.2rem;
font-size: 0.95rem;
opacity: 0.9;
}
.announce-track strong {
color: var(--color-accent-bright) !important;
font-family: var(--font-gothic) !important;
letter-spacing: 0.18em;
font-weight: 700;
}
.announce-pulse {
right: 1rem;
width: 7px;
height: 7px;
background: var(--color-accent);
box-shadow: 0 0 0 0 rgba(193,154,91,0.45);
}
@media (max-width: 767px) {
.announce-bar {
padding: 0.5rem 0 !important;
}
.announce-track {
gap: 0.9rem;
animation-duration: 21s;
padding-inline: 1rem;
}
.announce-track span:not(.dot) {
font-size: 0.64rem !important;
letter-spacing: 0.12em !important;
}
}
/* =================================================================
LOGIN FORM REFINEMENT
================================================================= */
.auth-login-shell {
display: grid;
gap: 1.35rem;
}
.auth-login-head {
display: grid;
gap: 0.55rem;
}
.auth-login-card {
position: relative;
display: grid;
gap: 1.2rem;
padding: clamp(1.2rem, 2vw, 1.6rem);
border: 1px solid rgba(193,154,91,0.18);
border-radius: 28px;
background:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
rgba(13,13,14,0.9);
box-shadow: 0 24px 60px rgba(0,0,0,0.28);
overflow: hidden;
}
.auth-login-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(193,154,91,0.45), transparent);
pointer-events: none;
}
.auth-login-card-head {
display: grid;
gap: 0.35rem;
}
.auth-login-kicker {
color: var(--color-accent);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.auth-login-card-head strong {
color: var(--color-secondary);
font-size: 1rem;
line-height: 1.55;
font-weight: 600;
}
.auth-login-form {
gap: 1rem;
}
.auth-login-form .form-row {
margin-bottom: 0;
}
.auth-login-form .form-row label {
margin-bottom: 0.45rem;
color: rgba(240,238,233,0.88);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.auth-input-wrap {
position: relative;
}
.auth-input-wrap i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-accent);
font-size: 0.95rem;
opacity: 0.9;
pointer-events: none;
}
.auth-login-form .f-input {
min-height: 54px;
padding-left: 2.8rem !important;
border-radius: 18px;
border: 1px solid rgba(193,154,91,0.14) !important;
background: rgba(255,255,255,0.03) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.auth-login-form .f-input:focus {
border-color: rgba(193,154,91,0.38) !important;
box-shadow: 0 0 0 4px rgba(193,154,91,0.08);
}
.auth-form-meta {
align-items: center;
gap: 0.75rem;
}
.auth-login-form .btn-luxe-solid {
min-height: 54px;
border-radius: 18px;
letter-spacing: 0.18em;
}
.auth-login-benefits {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.auth-login-benefit {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.95rem 1rem;
border-radius: 20px;
border: 1px solid rgba(193,154,91,0.12);
background: rgba(255,255,255,0.025);
color: var(--color-text-muted);
}
.auth-login-benefit i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
background: rgba(193,154,91,0.12);
color: var(--color-accent);
font-size: 1rem;
flex: 0 0 auto;
}
.auth-login-benefit span {
color: rgba(240,238,233,0.82);
font-size: 0.88rem;
line-height: 1.45;
}
@media (max-width: 991px) {
.auth-login-benefits {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.auth-login-card {
border-radius: 22px;
padding: 1rem;
}
.auth-login-form .f-input,
.auth-login-form .btn-luxe-solid {
min-height: 50px;
}
}
/* =================================================================
LOGIN PAGE REDESIGN
================================================================= */
.auth-login-layout {
grid-template-columns: 1fr !important;
max-width: 1180px;
margin: 0 auto;
min-height: auto;
background:
radial-gradient(circle at top, rgba(193,154,91,0.12), transparent 34%),
linear-gradient(180deg, rgba(10,10,11,0.98), rgba(16,16,18,0.96));
border: 1px solid rgba(193,154,91,0.12);
border-radius: 36px;
overflow: hidden;
box-shadow: 0 34px 90px rgba(0,0,0,0.36);
}
.auth-login-wrap {
max-width: 100% !important;
padding: clamp(1.25rem, 3vw, 2.5rem);
}
.auth-login-shell {
max-width: 980px;
margin: 0 auto;
gap: 1.6rem;
}
.auth-login-brand {
justify-content: flex-start;
margin-bottom: 0;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(193,154,91,0.12);
}
.auth-login-banner {
position: relative;
border: 1px solid var(--color-line);
border-radius: 14px;
overflow: hidden;
background: var(--color-bg-soft);
}
.auth-login-banner img {
display: block;
width: 100%;
height: auto;
}
.auth-login-banner-meta {
position: absolute;
left: 0.85rem;
right: 0.85rem;
bottom: 0.85rem;
display: grid;
gap: 0.25rem;
padding: 0.75rem 0.85rem;
border-radius: 12px;
background: rgba(255,255,255,0.82);
border: 1px solid rgba(17,17,20,0.12);
backdrop-filter: blur(10px);
}
.auth-login-banner-meta strong {
color: rgba(0,0,0,0.92);
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: -0.01em;
}
.auth-login-banner-meta span {
color: rgba(17,17,20,0.72);
font-size: 0.9rem;
line-height: 1.45;
}
.auth-login-stage {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.88fr);
gap: 1.6rem;
align-items: start;
}
.auth-login-pill-row {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
grid-column: 1 / -1;
}
.auth-login-pill {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0.55rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(193,154,91,0.14);
background: rgba(255,255,255,0.03);
color: rgba(240,238,233,0.74);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.auth-login-head {
align-content: start;
padding-top: 0.3rem;
}
.auth-login-head .auth-h {
font-size: clamp(2.3rem, 4vw, 3.8rem);
line-height: 0.95;
margin: 0;
color: #3f434c !important;
}
.auth-login-head .auth-sub {
max-width: 32rem;
font-size: 1rem;
line-height: 1.75;
}
.auth-alert {
grid-column: 1 / -1;
}
.auth-login-card {
gap: 1.3rem;
align-self: start;
}
.auth-login-note {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.85rem 0.95rem;
border-radius: 18px;
background: rgba(193,154,91,0.06);
border: 1px solid rgba(193,154,91,0.1);
color: rgba(240,238,233,0.76);
font-size: 0.88rem;
line-height: 1.6;
}
.auth-login-note i {
color: var(--color-accent);
font-size: 1rem;
margin-top: 0.15rem;
}
.auth-login-benefits {
grid-column: 1 / 2;
align-self: end;
grid-template-columns: 1fr;
gap: 0.85rem;
}
.auth-login-benefit {
padding: 1rem 1.05rem;
}
.auth-footer {
grid-column: 1 / -1;
margin-top: 0.25rem;
padding-top: 1rem;
border-top: 1px solid rgba(193,154,91,0.1);
}
.auth-alert-info {
background: #eef3ff;
color: #3158a5;
border-color: #3158a5;
}
.auth-register-layout {
max-width: 1240px;
}
.auth-register-wrap {
padding: 1.6rem;
}
.auth-register-shell {
display: grid;
gap: 1.25rem;
}
.auth-register-stage {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.92fr);
gap: 1.6rem;
align-items: start;
}
.auth-register-copy {
display: grid;
gap: 1rem;
align-content: start;
padding-top: 0.35rem;
}
.auth-register-copy .auth-h {
margin: 0;
color: #2f333b !important;
}
.auth-register-copy .auth-sub {
max-width: 34rem;
margin: 0;
line-height: 1.8;
}
.auth-register-benefits {
grid-template-columns: 1fr;
}
.auth-register-card {
gap: 1.15rem;
}
.auth-register-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.auth-register-form .form-row {
margin: 0;
}
.auth-register-form .form-row--full {
grid-column: 1 / -1;
}
.auth-register-form label {
display: inline-block;
margin-bottom: 0.45rem;
color: rgba(17,17,20,0.84);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.auth-register-form .f-input {
min-height: 56px;
padding-left: 2.8rem !important;
border-radius: 18px;
border: 1px solid rgba(17,17,20,0.12) !important;
background: #ffffff !important;
color: #111114 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.auth-register-form .f-input:focus {
border-color: rgba(181,139,84,0.45) !important;
box-shadow: 0 0 0 4px rgba(181,139,84,0.1);
}
.auth-field-error {
display: block;
margin-top: 0.45rem;
color: #b42318;
font-size: 0.85rem;
line-height: 1.45;
}
.auth-register-note {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.95rem 1rem;
border-radius: 18px;
background: rgba(181,139,84,0.08);
border: 1px solid rgba(181,139,84,0.14);
color: rgba(17,17,20,0.78);
font-size: 0.92rem;
line-height: 1.7;
}
.auth-register-note i {
color: var(--color-accent);
font-size: 1rem;
margin-top: 0.2rem;
}
.auth-register-note-soft {
background: rgba(17,17,20,0.04);
border-color: rgba(17,17,20,0.08);
}
.auth-register-panel {
display: grid;
gap: 0.35rem;
padding: 1.15rem 1.2rem;
border-radius: 22px;
border: 1px solid rgba(17,17,20,0.1);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,247,249,0.96));
box-shadow: 0 16px 40px rgba(0,0,0,0.05);
}
.auth-register-panel-kicker {
color: rgba(17,17,20,0.54);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.auth-register-panel strong {
color: #111114;
font-size: 1.02rem;
}
.auth-register-panel p {
margin: 0;
color: rgba(17,17,20,0.68);
line-height: 1.65;
}
.auth-register-otp-layout {
max-width: 1120px;
}
.auth-register-otp-stage {
grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.9fr);
}
.auth-register-otp-card {
align-self: start;
}
.auth-otp-form {
grid-template-columns: 1fr;
}
.auth-otp-input {
min-height: 60px;
padding-left: 1.2rem !important;
text-align: center;
letter-spacing: 0.45em;
font-size: 1.32rem;
font-weight: 700;
}
.auth-otp-resend-form {
margin-top: -0.15rem;
}
.auth-otp-resend-form .btn-luxe-line {
min-height: 54px;
border-radius: 18px;
}
@media (max-width: 991px) {
.auth-login-layout {
border-radius: 28px;
}
.auth-login-stage {
grid-template-columns: 1fr;
}
.auth-login-banner {
border-radius: 12px;
}
.auth-login-head .auth-sub {
max-width: none;
}
.auth-login-benefits {
grid-column: 1 / -1;
}
.auth-register-stage,
.auth-register-otp-stage {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.auth-login-layout {
border-radius: 22px;
}
.auth-login-wrap {
padding: 1rem;
}
.auth-login-brand {
padding-bottom: 0.85rem;
}
.auth-login-stage {
gap: 1rem;
}
.auth-login-pill-row {
gap: 0.5rem;
}
.auth-login-pill {
min-height: 30px;
padding: 0.45rem 0.75rem;
font-size: 0.62rem;
letter-spacing: 0.1em;
}
.auth-login-head .auth-h {
font-size: 2rem;
}
.auth-login-head .auth-sub {
font-size: 0.94rem;
line-height: 1.65;
}
.auth-form-meta {
align-items: flex-start;
}
.auth-register-wrap {
padding: 1rem;
}
.auth-register-form {
grid-template-columns: 1fr;
}
.auth-otp-input {
font-size: 1.1rem;
letter-spacing: 0.32em;
}
}
/* =================================================================
LIGHT THEME — WHITE / GREY / BLACK (DOMINAN PUTIH)
================================================================= */
:root {
--color-bg: #ffffff;
--color-bg-soft: #f6f7f9;
--color-bg-darker: #eef0f3;
--color-bg-elevated: #ffffff;
--color-primary: #111114;
--color-secondary: #ffffff;
--color-secondary-soft: #f2f3f5;
--color-accent: #b58b54;
--color-accent-bright:#d1b07a;
--color-accent-deep: #111114;
--color-accent-soft: rgba(181,139,84,0.12);
--color-blood: #111114;
--color-wine: #2b2b31;
--color-text: #111114;
--color-text-muted: #4f515a;
--color-text-dim: #7e808a;
--color-text-on-dark: #ffffff;
--color-text-on-dark-muted: rgba(255,255,255,0.78);
--color-line: rgba(17,17,20,0.12);
--color-line-soft: rgba(17,17,20,0.08);
--color-line-gold: rgba(181,139,84,0.22);
--shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
--shadow-sm: 0 6px 18px rgba(0,0,0,0.08);
--shadow-md: 0 14px 38px rgba(0,0,0,0.1);
--shadow-lg: 0 26px 70px rgba(0,0,0,0.12);
--shadow-gold: 0 0 40px rgba(0,0,0,0.06);
--shadow-gold-sm: 0 0 20px rgba(0,0,0,0.05);
}
body::before {
background-image:
radial-gradient(circle at 20% 30%, rgba(0,0,0,0.035) 0%, transparent 42%),
radial-gradient(circle at 80% 70%, rgba(0,0,0,0.03) 0%, transparent 42%);
}
body::after {
opacity: 0.1;
mix-blend-mode: multiply;
}
a:hover { color: var(--color-primary); }
.eyebrow,
.search-eyebrow,
.result-count,
.shop-meta-label,
.brand-submark,
.footer-brand-note,
.auth-brand-tag {
color: var(--color-text-dim) !important;
}
.eyebrow::before {
background: var(--color-line) !important;
}
.site-header {
background: rgba(255,255,255,0.88) !important;
border-bottom: 1px solid var(--color-line) !important;
backdrop-filter: blur(14px);
}
.brand,
.nav-link,
.header-icon,
.mobile-toggle,
.mobile-nav a,
.search-input-luxe,
.link-luxe {
color: var(--color-text) !important;
}
.announce-bar {
background: #ffffff !important;
border-top: 1px solid var(--color-line-soft) !important;
border-bottom: 1px solid var(--color-line) !important;
}
.announce-bar::before {
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
}
.announce-track span:not(.dot) {
color: rgba(17,17,20,0.78) !important;
}
.announce-track .dot {
color: var(--color-accent) !important;
}
.announce-track strong {
color: rgba(0,0,0,0.92) !important;
}
.link-luxe {
color: rgba(17,17,20,0.86) !important;
}
.link-luxe:hover {
color: rgba(181,139,84,0.92) !important;
}
.announce-pulse {
background: var(--color-accent);
box-shadow: 0 0 0 0 rgba(181,139,84,0.18);
}
.btn-luxe-solid,
.count-badge {
background: #111114 !important;
color: #ffffff !important;
border-color: #111114 !important;
}
.btn-luxe-solid:hover {
background: #2b2b31 !important;
border-color: #2b2b31 !important;
box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}
.btn-luxe-line {
border-color: rgba(17,17,20,0.34) !important;
color: #111114 !important;
}
.btn-luxe-line:hover {
background: #111114 !important;
color: #ffffff !important;
border-color: #111114 !important;
}
.f-input,
.search-input-luxe {
background: #ffffff !important;
border-color: var(--color-line) !important;
color: var(--color-text) !important;
}
.f-input::placeholder,
.search-input-luxe::placeholder {
color: rgba(17,17,20,0.46) !important;
}
.home-event-banner,
.product-card,
.acc-block,
.account-sidebar,
.wishlist-card,
.cart-card,
.checkout-card,
.shop-toolbar,
.filter-panel,
.track-card,
.contact-card,
.auction-panel,
.order-summary,
.or-card,
.review-card,
.review-form-wrap,
.review-locked-card {
border: 1px solid rgba(17,17,20,0.12) !important;
background: #ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 20px 55px rgba(0,0,0,0.08) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.product-gallery {
position: sticky;
}
@media (max-width: 991px) {
.product-gallery {
position: static;
top: auto;
}
}
.p-name {
color: var(--color-text) !important;
}
.p-meta,
.p-rating-count,
.p-sku {
color: var(--color-text-muted) !important;
}
.p-rating strong {
color: rgba(0,0,0,0.92) !important;
}
.p-price {
border-bottom: 1px solid var(--color-line) !important;
}
.p-price .p-old {
color: rgba(17,17,20,0.5) !important;
}
.p-price .p-now {
color: rgba(181,139,84,0.92) !important;
}
.p-flag {
background: rgba(17,17,20,0.03) !important;
color: rgba(17,17,20,0.7) !important;
border-color: rgba(17,17,20,0.12) !important;
}
.p-flag-sale,
.p-flag-auction {
background: rgba(181,139,84,0.1) !important;
color: rgba(17,17,20,0.86) !important;
border-color: rgba(181,139,84,0.25) !important;
}
.p-wishlist-btn {
color: rgba(17,17,20,0.86) !important;
border-color: rgba(17,17,20,0.18) !important;
background: rgba(255,255,255,0.7) !important;
}
.p-wishlist-btn.is-active,
.p-wishlist-btn.active {
background: #111114 !important;
color: #ffffff !important;
border-color: #111114 !important;
}
.pc-media {
background:
radial-gradient(circle at top, rgba(0,0,0,0.04) 0%, transparent 46%),
linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.06) 100%) !important;
}
.muted,
.breadcrumb-luxe,
.footer-sub,
.footer-tag,
.page-sub,
.shop-toolbar-note {
color: var(--color-text-muted) !important;
}
.site-footer {
background: #ffffff !important;
color: var(--color-text) !important;
border-top: 1px solid var(--color-line);
}
.site-footer::before {
background: linear-gradient(90deg, transparent, rgba(181,139,84,0.35), transparent) !important;
}
.f-col li a {
color: rgba(17,17,20,0.72) !important;
}
.f-col li a:hover {
color: rgba(0,0,0,0.92) !important;
}
.footer-bottom {
border-top: 1px solid var(--color-line-soft) !important;
color: var(--color-text-muted) !important;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
gap: 1rem;
margin-top: 1.35rem;
padding-top: 1rem;
font-size: 0.82rem;
line-height: 1.5;
}
.footer-bottom em {
color: rgba(181,139,84,0.92) !important;
font-style: normal;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.footer-bottom p {
margin: 0;
}
.footer-bottom p:nth-child(2) {
text-align: center;
}
.footer-bottom p:last-child {
text-align: right;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.74rem;
color: rgba(17,17,20,0.5);
}
@media (max-width: 767.98px) {
.footer-bottom {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 0.45rem;
}
.footer-bottom p:nth-child(2),
.footer-bottom p:last-child {
text-align: center;
}
}
/* =================================================================
PRODUCT GALLERY THUMB ACTIVE OVERLAY
================================================================= */
.pg-thumbs {
gap: 0.75rem !important;
}
.pg-thumb {
position: relative;
isolation: isolate;
width: 92px;
height: 92px;
padding: 0;
border: 1px solid rgba(17,17,20,0.10) !important;
border-radius: 18px;
background: #f6f6f6 !important;
box-shadow: none;
transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.pg-thumb::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(17,17,20,0.08), rgba(17,17,20,0.18));
opacity: 0;
transition: opacity var(--t-base);
pointer-events: none;
z-index: 1;
}
.pg-thumb::after {
content: none;
}
.pg-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
filter: none;
transform: scale(1);
transition: transform var(--t-base), filter var(--t-base), opacity var(--t-base);
}
.pg-thumb:hover {
transform: translateY(-2px);
border-color: rgba(17,17,20,0.18) !important;
}
.pg-thumb:hover::before {
opacity: 0;
}
.pg-thumb:hover img {
transform: scale(1.03);
filter: none;
}
.pg-thumb.active,
.pg-thumb[aria-current="true"] {
border-color: rgba(181,139,84,0.88) !important;
box-shadow: 0 0 0 3px rgba(181,139,84,0.16);
transform: translateY(0);
}
.pg-thumb.active::before,
.pg-thumb[aria-current="true"]::before {
opacity: 0.22;
}
.pg-thumb.active img,
.pg-thumb[aria-current="true"] img {
filter: brightness(0.94) saturate(1.02);
transform: scale(1.04);
}
/* =================================================================
CHECKOUT ORDER DETAIL REFINEMENT
================================================================= */
.shipping-option-card {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
padding: 1rem;
border: 1px solid rgba(17,17,20,0.12);
border-radius: 16px;
background: #ffffff;
cursor: pointer;
transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.shipping-option-card:has(input:checked) {
border-color: rgba(181,139,84,0.58);
background: rgba(181,139,84,0.06);
box-shadow: 0 12px 28px rgba(0,0,0,0.05);
}
.shipping-option-card:hover {
transform: translateY(-1px);
border-color: rgba(17,17,20,0.2);
}
.shipping-option-card input {
margin: 0;
accent-color: #111114;
}
.shipping-option-copy {
display: grid;
gap: 0.18rem;
}
.shipping-option-copy strong {
color: #111114;
font-size: 0.92rem;
}
.shipping-option-copy span,
.shipping-option-copy small,
#shippingSummaryNote {
color: rgba(17,17,20,0.6);
}
.success-info p,
.od-info-grid p {
word-break: break-word;
}
/* =================================================================
PRODUCT VARIANT OPTIONS REFINEMENT
================================================================= */
.product-detail .color-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
gap: 0.75rem;
}
.product-detail .color-option {
position: relative;
display: flex;
align-items: center;
gap: 0.8rem;
min-height: 58px;
padding: 0.9rem 1rem;
border: 1px solid rgba(17,17,20,0.14) !important;
border-radius: 16px;
background: #ffffff !important;
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.9rem !important;
font-weight: 500;
letter-spacing: 0 !important;
text-transform: none !important;
cursor: pointer;
transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base), background var(--t-base);
}
.product-detail .color-option:hover {
transform: translateY(-1px);
border-color: rgba(17,17,20,0.28) !important;
box-shadow: 0 10px 22px rgba(0,0,0,0.05);
}
.product-detail .color-option input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.product-detail .color-option:has(input:checked) {
border-color: #111114 !important;
background: rgba(17,17,20,0.03) !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.06);
}
.product-detail .color-option:has(input:checked)::after {
content: 'Selected';
position: absolute;
top: 0.55rem;
right: 0.7rem;
font-size: 0.64rem;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(17,17,20,0.5);
}
.product-detail .color-dot {
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid rgba(17,17,20,0.16);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
flex-shrink: 0;
}
.product-detail .color-option:has(input:checked) .color-dot {
box-shadow:
0 0 0 4px rgba(17,17,20,0.08),
inset 0 0 0 1px rgba(255,255,255,0.65);
}
.product-detail .color-name {
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.92rem !important;
font-weight: 600;
letter-spacing: 0 !important;
line-height: 1.2;
}
.product-detail .size-options {
display: grid;
grid-template-columns: 1fr;
gap: 0.45rem;
}
.product-detail .variant-group.is-required .size-options {
padding: 0.35rem;
border-radius: 16px;
background: rgba(185, 28, 28, 0.04);
}
.product-detail .size-btn.variant-card {
min-width: 0;
width: 100%;
min-height: 0;
height: auto;
padding: 0.7rem 0.85rem;
border-radius: 12px;
border: 1px solid rgba(17,17,20,0.1) !important;
background: #ffffff !important;
color: #111114 !important;
font-family: var(--font-sans) !important;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
letter-spacing: 0 !important;
box-shadow: none !important;
}
.product-detail .size-btn.variant-card:hover {
transform: none;
border-color: rgba(17,17,20,0.2) !important;
color: #111114 !important;
box-shadow: none !important;
}
.product-detail .size-btn.variant-card.active {
background: #111114 !important;
color: #ffffff !important;
border-color: #111114 !important;
box-shadow: none !important;
}
.product-detail .variant-group.is-required .size-btn.variant-card:not(.active) {
border-color: rgba(185, 28, 28, 0.28) !important;
}
.product-detail .variant-card-main {
display: block;
width: 100%;
position: static;
z-index: auto;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.35;
color: inherit;
}
.product-detail .size-btn.variant-card.is-disabled {
opacity: 0.45;
background: rgba(17,17,20,0.025) !important;
border-style: dashed !important;
box-shadow: none !important;
}
@media (max-width: 767px) {
#sizeGuideModal .modal-dialog {
margin: 1rem;
}
.size-guide-header,
.size-guide-body {
padding: 1rem !important;
}
#sizeGuideModal .size-table {
min-width: 520px;
}
.product-detail .color-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-detail .color-option {
min-height: 54px;
padding: 0.8rem 0.85rem;
}
.product-detail .color-option:has(input:checked)::after {
display: none;
}
.product-detail .size-btn.variant-card {
padding: 0.68rem 0.8rem;
}
}
.account-layout .page-h,
.account-main .page-h,
.account-sidebar ~ .account-main .page-h,
body:has(.account-layout) .page-header .page-h {
color: #111114 !important;
}
.f-socials a {
color: rgba(17,17,20,0.9) !important;
border-color: rgba(17,17,20,0.18) !important;
}
.f-socials a:hover {
background: rgba(17,17,20,0.08) !important;
color: rgba(0,0,0,0.92) !important;
border-color: rgba(181,139,84,0.45) !important;
}
/* =================================================================
ACCOUNT PAGE REFINEMENT
================================================================= */
.account-page-header {
background:
radial-gradient(circle at top left, rgba(181,139,84,0.12), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
border-bottom: 1px solid rgba(17,17,20,0.08) !important;
}
.account-page-header::before,
.account-page-header::after {
display: none !important;
}
.account-page-header .container {
max-width: 1180px;
}
.account-page-header .eyebrow {
color: rgba(17,17,20,0.54) !important;
letter-spacing: 0.22em !important;
}
.account-page-header .page-h {
color: #111114 !important;
margin-bottom: 0.85rem;
}
.account-page-header .page-sub {
max-width: 680px;
color: rgba(17,17,20,0.64) !important;
font-family: var(--font-sans) !important;
font-style: normal !important;
font-size: 1rem !important;
line-height: 1.7;
}
.account-shell {
padding-top: clamp(2rem, 5vw, 3rem) !important;
padding-bottom: clamp(3rem, 6vw, 4rem) !important;
}
.account-layout {
display: grid;
grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
gap: clamp(1rem, 3vw, 1.75rem);
align-items: start;
}
.account-sidebar {
position: sticky;
top: 118px;
padding: 1.25rem !important;
border-radius: 22px !important;
}
.acc-user {
align-items: center;
gap: 0.95rem;
padding-bottom: 1rem;
margin-bottom: 0.95rem;
border-bottom: 1px solid rgba(17,17,20,0.08);
}
.acc-avatar {
width: 54px;
height: 54px;
border-radius: 16px;
background: #111114 !important;
color: #ffffff !important;
font-family: var(--font-sans) !important;
font-size: 1.15rem;
font-weight: 700;
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.acc-user strong {
display: block;
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.98rem;
}
.acc-user span {
color: rgba(17,17,20,0.58) !important;
font-size: 0.82rem;
}
.acc-nav {
gap: 0.35rem;
}
.acc-nav a {
min-height: 46px;
padding: 0.8rem 0.95rem;
border-radius: 14px;
color: rgba(17,17,20,0.78) !important;
font-family: var(--font-sans) !important;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0 !important;
text-transform: none !important;
transition: background var(--t-base), color var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.acc-nav a i {
color: inherit;
opacity: 0.8;
}
.acc-nav a:hover {
background: rgba(17,17,20,0.05) !important;
color: #111114 !important;
transform: translateX(2px);
}
.acc-nav a.active {
background: #111114 !important;
color: #ffffff !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.14);
}
.account-main {
display: grid;
gap: 1rem;
}
.account-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.acc-stat {
padding: 1.2rem 1.15rem !important;
border-radius: 20px;
border: 1px solid rgba(17,17,20,0.08);
background:
radial-gradient(circle at top right, rgba(181,139,84,0.08), transparent 38%),
#ffffff;
box-shadow: 0 16px 38px rgba(0,0,0,0.06);
}
.acc-stat-val {
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: clamp(1.65rem, 3vw, 2rem) !important;
font-weight: 700;
letter-spacing: -0.03em;
}
.acc-stat-label {
color: rgba(17,17,20,0.56) !important;
font-family: var(--font-sans) !important;
font-size: 0.84rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.acc-block,
.order-detail,
.empty-state {
border-radius: 22px !important;
border: 1px solid rgba(17,17,20,0.1) !important;
background: #ffffff !important;
box-shadow: 0 20px 48px rgba(0,0,0,0.07) !important;
}
.acc-block,
.order-detail {
padding: clamp(1.2rem, 3vw, 1.55rem) !important;
}
.acc-head {
align-items: center;
gap: 1rem;
padding-bottom: 0.9rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(17,17,20,0.08);
}
.acc-head h2,
.acc-block h2,
.od-items h3 {
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 1.12rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
}
.acc-orders,
.order-list {
gap: 0.85rem;
}
.acc-order-row,
.order-row {
align-items: center;
min-height: 86px;
padding: 1rem 1.05rem;
border: 1px solid rgba(17,17,20,0.08) !important;
border-radius: 18px;
background: #ffffff !important;
box-shadow: none !important;
transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base), background var(--t-base);
}
.acc-order-row:hover,
.order-row:hover {
transform: translateY(-2px);
border-color: rgba(17,17,20,0.18) !important;
background: rgba(17,17,20,0.02) !important;
box-shadow: 0 14px 30px rgba(0,0,0,0.05) !important;
}
.acc-order-row strong,
.order-row strong,
.or-num strong,
.or-total strong,
.odi-body strong,
.odi-price {
color: #111114 !important;
}
.or-num span,
.acc-order-row .muted,
.or-status .muted,
.empty-text,
.acc-addr-card p {
color: rgba(17,17,20,0.56) !important;
}
.empty-state {
display: grid;
gap: 0.7rem;
place-items: start;
padding: 1.4rem 1.35rem !important;
}
.empty-state h3 {
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 1.12rem !important;
font-weight: 700 !important;
}
.empty-state p {
color: rgba(17,17,20,0.58) !important;
font-family: var(--font-sans) !important;
font-style: normal !important;
margin-bottom: 0.2rem;
}
.acc-form {
gap: 1rem;
}
.acc-form label {
margin-bottom: 0.45rem;
color: rgba(17,17,20,0.72);
font-family: var(--font-sans) !important;
font-size: 0.88rem;
font-weight: 600;
}
.acc-form .f-input,
.acc-form select.f-input,
.acc-form textarea.f-input {
min-height: 52px;
border-radius: 14px;
}
.acc-form .f-input[readonly] {
background: rgba(17,17,20,0.04) !important;
color: rgba(17,17,20,0.74) !important;
cursor: not-allowed;
}
.form-help {
display: block;
margin-top: 0.45rem;
color: rgba(17,17,20,0.54);
font-size: 0.8rem;
line-height: 1.5;
}
.acc-addresses {
gap: 0.85rem;
}
.acc-addr-card {
padding: 1rem 1.05rem;
border: 1px solid rgba(17,17,20,0.08);
border-radius: 18px;
background: rgba(17,17,20,0.02);
}
.acc-addr-card strong {
color: #111114 !important;
font-family: var(--font-sans) !important;
font-weight: 700;
}
.order-detail {
display: grid;
gap: 1rem;
}
.od-head,
.od-items,
.od-timeline,
.od-totals,
.od-info-grid {
border: 1px solid rgba(17,17,20,0.08) !important;
border-radius: 18px;
background: rgba(17,17,20,0.02) !important;
padding: 1rem !important;
}
.od-head {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.od-head .eyebrow {
color: rgba(17,17,20,0.5) !important;
letter-spacing: 0.1em !important;
}
.od-head strong {
color: #111114 !important;
font-family: var(--font-sans) !important;
}
.od-item {
padding: 0.95rem 0;
}
.odi-img img {
border-radius: 14px;
}
.od-timeline {
gap: 0.8rem;
}
.tl-step .tl-label {
color: rgba(17,17,20,0.62);
font-family: var(--font-sans) !important;
font-size: 0.82rem;
}
.tl-step.done .tl-label {
color: #111114;
}
.od-info-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.od-info-grid > div {
padding: 0.95rem 1rem;
border: 1px solid rgba(17,17,20,0.08);
border-radius: 16px;
background: #ffffff;
}
.od-info-grid h4 {
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.96rem !important;
font-weight: 700 !important;
margin-bottom: 0.55rem;
}
.od-info-grid p,
.od-info-grid p strong {
color: #111114 !important;
}
.od-info-grid p {
line-height: 1.7;
}
.od-info-grid .muted {
color: rgba(17,17,20,0.56) !important;
}
.od-actions {
gap: 0.75rem;
}
@media (max-width: 991px) {
.account-layout {
grid-template-columns: 1fr;
}
.account-sidebar {
position: static;
top: auto;
}
.account-grid,
.od-head,
.od-info-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.account-page-header .page-sub {
font-size: 0.94rem !important;
}
.acc-order-row,
.order-row {
padding: 0.95rem;
}
}
/* =================================================================
HEADER DARK STATE FIX
================================================================= */
.site-header.is-scrolled .brand,
.site-header.scrolled .brand,
.site-header.is-scrolled .nav-link,
.site-header.scrolled .nav-link,
.site-header.is-scrolled .header-icon,
.site-header.scrolled .header-icon,
.site-header.is-scrolled .mobile-toggle,
.site-header.scrolled .mobile-toggle,
.site-header.is-scrolled .brand-mark,
.site-header.scrolled .brand-mark,
.site-header.is-scrolled .brand-submark,
.site-header.scrolled .brand-submark,
.site-header.is-scrolled .header-row,
.site-header.scrolled .header-row {
color: #ffffff !important;
}
.site-header.is-scrolled .header-icon i,
.site-header.scrolled .header-icon i,
.site-header.is-scrolled .mobile-toggle i,
.site-header.scrolled .mobile-toggle i {
color: #ffffff !important;
}
/* =================================================================
CHECKOUT PAGE REFINEMENT
================================================================= */
.checkout-section {
padding-top: clamp(2.25rem, 5vw, 3.5rem) !important;
padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
background:
radial-gradient(circle at top left, rgba(181,139,84,0.08), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
}
.checkout-section .container {
max-width: 1240px;
}
.checkout-head {
display: grid;
gap: 0.55rem;
margin-bottom: clamp(1.5rem, 4vw, 2.2rem) !important;
}
.checkout-head .eyebrow {
color: rgba(17,17,20,0.56) !important;
letter-spacing: 0.22em !important;
}
.checkout-head .page-h {
color: #111114 !important;
margin: 0;
}
.checkout-head-sub {
max-width: 720px;
margin: 0;
color: rgba(17,17,20,0.62);
font-family: var(--font-sans) !important;
font-size: 1rem;
line-height: 1.7;
}
.checkout-grid {
grid-template-columns: minmax(0, 1.1fr) minmax(340px, 420px) !important;
gap: clamp(1rem, 3vw, 1.6rem) !important;
}
.checkout-left,
.checkout-right {
min-width: 0;
}
.checkout-right {
top: 112px !important;
}
.co-block,
.co-summary {
border-radius: 24px !important;
border: 1px solid rgba(17,17,20,0.1) !important;
background: #ffffff !important;
box-shadow: 0 22px 54px rgba(0,0,0,0.07) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.co-block {
margin-bottom: 1rem !important;
padding: clamp(1.15rem, 3vw, 1.5rem) !important;
}
.co-title {
align-items: center;
gap: 0.85rem;
margin-bottom: 1rem !important;
padding-bottom: 0.95rem !important;
border-bottom: 1px solid rgba(17,17,20,0.08) !important;
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
}
.co-title span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(17,17,20,0.05);
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.84rem !important;
font-weight: 700;
}
.co-grid,
.co-grid-2 {
gap: 0.95rem !important;
}
.checkout-section .form-row label {
margin-bottom: 0.45rem;
color: rgba(17,17,20,0.72);
font-family: var(--font-sans) !important;
font-size: 0.88rem;
font-weight: 600;
}
.checkout-section .f-input,
.checkout-section select.f-input,
.checkout-section textarea.f-input {
min-height: 52px;
border-radius: 14px;
background: #ffffff !important;
border: 1px solid rgba(17,17,20,0.12) !important;
color: #111114 !important;
box-shadow: none !important;
}
.checkout-section textarea.f-input {
min-height: 104px;
}
.checkout-section .f-input:focus {
border-color: rgba(17,17,20,0.32) !important;
box-shadow: 0 0 0 4px rgba(17,17,20,0.06) !important;
}
.checkout-section .f-input::placeholder {
color: rgba(17,17,20,0.42) !important;
}
.co-signin {
text-align: left !important;
margin-top: 1rem !important;
padding: 0.95rem 1rem !important;
border-radius: 14px;
border: 1px dashed rgba(17,17,20,0.16) !important;
background: rgba(17,17,20,0.03) !important;
color: rgba(17,17,20,0.62) !important;
}
.co-signin a,
.addr-toggle a {
color: #111114 !important;
font-weight: 600;
text-decoration: none !important;
}
.saved-addresses {
display: grid;
gap: 0.85rem !important;
}
.address-block-intro,
.acc-panel-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.address-block-intro strong,
.address-form-head strong,
.acc-panel-head h3 {
color: #111114 !important;
font-family: var(--font-sans) !important;
}
.address-block-intro p,
.address-form-head p,
.acc-panel-head p,
.address-selection-note,
.address-field-note,
.acc-block-sub {
margin: 0.25rem 0 0;
color: rgba(17,17,20,0.58) !important;
font-size: 0.88rem;
line-height: 1.6;
}
.address-form-shell {
gap: 1rem;
}
.address-form-head {
display: grid;
gap: 0.2rem;
padding: 0.95rem 1rem;
border-radius: 16px;
border: 1px solid rgba(17,17,20,0.08) !important;
background: rgba(17,17,20,0.03) !important;
}
.address-form-head-inline {
display: flex;
align-items: center;
min-height: 52px;
padding: 0.75rem 0.9rem;
}
.address-form-head-inline p {
margin: 0;
font-size: 0.82rem;
}
.address-form-top {
align-items: start;
}
.address-location-grid {
align-items: end;
}
.address-field-note {
margin-top: -0.1rem;
}
.shipping-helper-note {
margin: 0 0 0.9rem;
color: rgba(17,17,20,0.58) !important;
font-size: 0.88rem;
line-height: 1.6;
}
.addr-card {
grid-template-columns: 20px minmax(0, 1fr) !important;
gap: 0.9rem !important;
padding: 1rem 1.05rem !important;
border-radius: 18px;
border: 1px solid rgba(17,17,20,0.1) !important;
background: #ffffff !important;
box-shadow: none !important;
}
.addr-card:hover {
border-color: rgba(17,17,20,0.2) !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.05) !important;
}
.addr-card:has(input:checked) {
border-color: #111114 !important;
background: rgba(17,17,20,0.03) !important;
box-shadow: 0 16px 30px rgba(0,0,0,0.05) !important;
}
.addr-card input {
margin-top: 0.2rem;
accent-color: #111114;
}
.addr-card strong {
display: block;
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.96rem;
font-weight: 700;
}
.addr-card span,
.addr-card p,
.addr-toggle,
.payment-hint,
#shippingSummaryNote {
color: rgba(17,17,20,0.58) !important;
}
.addr-card p {
margin-bottom: 0;
}
.addr-toggle {
margin: 0.95rem 0 0 !important;
}
.courier-tabs {
grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)) !important;
gap: 0.65rem !important;
margin-bottom: 1rem !important;
}
.courier-tab {
padding: 0.9rem 0.6rem !important;
border-radius: 16px;
border: 1px solid rgba(17,17,20,0.1) !important;
background: #ffffff !important;
color: #111114 !important;
box-shadow: none !important;
}
.courier-tab span {
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.84rem !important;
font-weight: 600;
}
.courier-tab:hover {
border-color: rgba(17,17,20,0.22) !important;
}
.courier-tab:has(input:checked),
.courier-tab.active {
background: #111114 !important;
color: #ffffff !important;
border-color: #111114 !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.14);
}
.courier-tab:has(input:checked) span,
.courier-tab.active span {
color: #ffffff !important;
}
.shipping-options {
display: grid;
gap: 0.75rem;
}
.shipping-option-card {
padding: 1rem 1.05rem !important;
border: 1px solid rgba(17,17,20,0.1) !important;
border-radius: 18px !important;
box-shadow: none !important;
}
.shipping-option-card:has(input:checked) {
border-color: #111114 !important;
background: rgba(17,17,20,0.03) !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.05) !important;
}
.shipping-option-copy strong,
.shipping-option-card > strong {
color: #111114 !important;
}
.payment-hint {
margin-bottom: 0.95rem !important;
font-size: 0.9rem !important;
}
.payment-category-list {
display: grid;
gap: 1rem;
}
.payment-featured {
margin-bottom: 1rem;
}
.payment-group {
display: grid;
gap: 0.8rem;
border: 1px solid rgba(17,17,20,0.1) !important;
border-radius: 18px;
background: #ffffff !important;
overflow: hidden;
}
.payment-group[open] {
border-color: rgba(17,17,20,0.18) !important;
box-shadow: 0 16px 30px rgba(0,0,0,0.04);
}
.payment-group-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1rem 0.9rem;
cursor: pointer;
list-style: none;
}
.payment-group-head::-webkit-details-marker {
display: none;
}
.payment-group-head-featured {
padding: 0 0 0.7rem;
cursor: default;
}
.payment-group-head h3 {
margin: 0;
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.94rem !important;
font-weight: 700 !important;
}
.payment-group-head p {
margin: 0.22rem 0 0;
color: rgba(17,17,20,0.56) !important;
font-size: 0.82rem !important;
line-height: 1.5;
}
.payment-group-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 56px;
min-height: 34px;
padding: 0.35rem 0.8rem;
border-radius: 999px;
background: rgba(17,17,20,0.05);
color: #111114;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
}
.payment-group[open] .payment-group-toggle {
background: #111114;
color: #ffffff;
}
.payment-method-list {
display: grid;
gap: 0.75rem;
padding: 0 1rem 1rem;
}
.payment-method-option {
display: block;
cursor: pointer;
}
.payment-method-option-featured {
display: block;
}
.payment-method-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.payment-method-radio {
display: grid;
grid-template-columns: 108px minmax(0, 1fr);
align-items: center;
gap: 0.9rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid rgba(17,17,20,0.1) !important;
background: #ffffff !important;
transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.payment-method-logo-stack {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.payment-method-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 88px;
height: 52px;
padding: 0.45rem 0.6rem;
border-radius: 14px;
border: 1px solid rgba(17,17,20,0.1);
background: #ffffff;
}
.payment-method-logo-stack.is-bank {
width: 132px;
}
.payment-method-logo.is-bank {
width: 132px;
height: 42px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.payment-method-logo-stack.is-bank .payment-method-logo img {
object-position: left center;
}
.payment-method-logo-stack.is-wallet .payment-method-logo,
.payment-method-logo-stack.is-qris .payment-method-logo,
.payment-method-logo-stack.is-retail .payment-method-logo {
width: 96px;
}
.payment-method-logo-stack.is-card {
width: auto;
}
.payment-method-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.payment-method-logo-stack.is-multi .payment-method-logo {
width: 48px;
height: 36px;
padding: 0.35rem 0.45rem;
border-radius: 12px;
}
.payment-method-logo-fallback {
color: #111114;
font-family: var(--font-sans) !important;
font-size: 0.84rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.payment-method-copy {
display: grid;
gap: 0.18rem;
min-width: 0;
}
.payment-method-copy strong {
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.95rem !important;
font-weight: 700;
}
.payment-method-copy small {
color: rgba(17,17,20,0.56) !important;
font-size: 0.82rem !important;
line-height: 1.5;
}
.pm {
padding: 0.62rem 0.82rem !important;
border-radius: 999px;
border: 1px solid rgba(17,17,20,0.12) !important;
background: #ffffff !important;
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 0.78rem !important;
font-weight: 600;
letter-spacing: 0 !important;
}
.payment-method-option:hover .payment-method-radio {
border-color: rgba(17,17,20,0.2) !important;
box-shadow: 0 14px 26px rgba(0,0,0,0.04);
}
.payment-method-option-featured .payment-method-radio {
border-color: rgba(17,17,20,0.14) !important;
background: linear-gradient(180deg, rgba(17,17,20,0.02), rgba(17,17,20,0.05)) !important;
}
.payment-method-option:has(input:checked) .payment-method-radio {
border-color: #111114 !important;
background: rgba(17,17,20,0.04) !important;
box-shadow: 0 14px 26px rgba(0,0,0,0.04);
}
.payment-method-option:has(input:checked) .payment-method-logo {
border-color: #111114;
background: #ffffff;
box-shadow: inset 0 0 0 1px rgba(17,17,20,0.03);
}
.payment-method-option:has(input:checked) .payment-method-logo.is-bank {
border-color: transparent;
background: transparent;
box-shadow: none;
}
.payment-selection-note {
margin: 0.95rem 0 0;
color: rgba(17,17,20,0.58);
font-size: 0.88rem;
}
.co-summary {
padding: 1.2rem 1.2rem 1.1rem !important;
}
.co-summary-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.95rem;
margin-bottom: 0.95rem;
border-bottom: 1px solid rgba(17,17,20,0.08);
}
.os-title {
margin: 0;
color: #111114 !important;
font-family: var(--font-sans) !important;
font-size: 1.12rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
}
.co-summary-sub {
margin: 0.3rem 0 0;
color: rgba(17,17,20,0.56);
font-size: 0.86rem;
}
.co-items {
gap: 0.85rem;
margin-bottom: 1rem !important;
}
.co-item {
grid-template-columns: 72px minmax(0, 1fr) auto !important;
gap: 0.9rem !important;
padding: 0.9rem 0 !important;
border-bottom: 1px solid rgba(17,17,20,0.08) !important;
}
.coi-img {
width: 72px !important;
height: 84px !important;
border-radius: 16px;
background: rgba(17,17,20,0.04) !important;
border: 1px solid rgba(17,17,20,0.08) !important;
}
.coi-qty {
top: 0.35rem !important;
right: 0.35rem !important;
width: 22px !important;
height: 22px !important;
background: #111114 !important;
color: #ffffff !important;
border: 2px solid #ffffff;
}
.coi-name,
.coi-price {
color: #111114 !important;
font-family: var(--font-sans) !important;
}
.coi-name {
font-size: 0.94rem !important;
font-weight: 700;
}
.coi-meta {
color: rgba(17,17,20,0.54) !important;
font-size: 0.8rem !important;
}
.coi-price {
font-size: 0.95rem !important;
font-weight: 700;
}
.os-divider {
height: 1px;
margin: 0.1rem 0 0.95rem;
background: rgba(17,17,20,0.08);
}
.os-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0;
color: rgba(17,17,20,0.7);
}
.os-row strong {
color: #111114 !important;
}
.os-total {
margin-top: 0.45rem;
padding-top: 0.9rem;
border-top: 1px solid rgba(17,17,20,0.08);
}
.os-total span,
.os-total strong {
color: #111114 !important;
font-size: 1.02rem;
font-weight: 700;
}
.co-summary .btn-luxe-solid {
margin-top: 0.95rem;
min-height: 56px;
border-radius: 18px;
}
.ck-secure {
padding-top: 0.95rem !important;
color: rgba(17,17,20,0.54) !important;
letter-spacing: 0.05em !important;
}
@media (max-width: 991px) {
.checkout-grid {
grid-template-columns: 1fr !important;
}
.checkout-right {
position: static !important;
top: auto !important;
}
}
@media (max-width: 767px) {
.checkout-section .container {
padding-left: 1rem;
padding-right: 1rem;
}
.co-block,
.co-summary {
border-radius: 20px !important;
}
.courier-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.shipping-option-card {
grid-template-columns: 20px minmax(0, 1fr) !important;
}
.shipping-option-card > strong {
grid-column: 2;
justify-self: start;
margin-top: -0.15rem;
}
}
.co-check-stack {
display: grid;
gap: 0.55rem;
min-height: 52px;
align-content: center;
}
.checkout-section .check-luxe,
.acc-address-editor .check-luxe {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: rgba(17,17,20,0.72);
font-family: var(--font-sans) !important;
font-size: 0.88rem;
font-weight: 500;
}
.checkout-section .check-luxe input,
.acc-address-editor .check-luxe input {
accent-color: #111114;
}
.acc-address-manager {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 1rem;
margin-top: 1rem;
}
.acc-address-editor,
.acc-address-listing {
display: grid;
gap: 0.95rem;
}
.acc-address-editor h3 {
margin: 0;
color: #111114;
font-family: var(--font-sans) !important;
font-size: 1rem;
font-weight: 700;
}
.acc-address-count {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0.45rem 0.8rem;
border-radius: 999px;
border: 1px solid rgba(17,17,20,0.08) !important;
background: rgba(17,17,20,0.03) !important;
color: #111114;
font-size: 0.78rem;
font-weight: 700;
}
.acc-address-form-actions {
display: flex;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
}
.acc-address-listing .empty-text {
margin: 0;
}
.acc-addresses {
display: grid;
gap: 0.85rem;
}
.acc-addr-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.5rem;
}
.acc-default-badge {
display: inline-flex;
align-items: center;
margin-left: 0.45rem;
padding: 0.26rem 0.55rem;
border-radius: 999px;
background: rgba(17,17,20,0.08);
color: #111114;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.acc-addr-actions {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.acc-addr-actions form {
margin: 0;
}
.btn-luxe-line.btn-sm {
min-height: 38px;
padding: 0.55rem 0.85rem;
border-radius: 12px;
font-size: 0.8rem;
}
@media (max-width: 991px) {
.acc-address-manager {
grid-template-columns: 1fr;
}
.payment-method-radio {
grid-template-columns: 1fr;
justify-items: start;
}
}
/* =================================================================
SHOP GRID — 2 PRODUCTS PER ROW
================================================================= */
.shop-results-shell .product-grid.product-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 360px) {
.shop-results-shell .product-grid.product-grid-2 {
grid-template-columns: 1fr !important;
}
}
/* =================================================================
LIGHT THEME FIX — SIZE BUTTONS (TEXT HARUS TERLIHAT)
================================================================= */
.size-btn {
color: rgba(17,17,20,0.88) !important;
border-color: rgba(17,17,20,0.18) !important;
background: rgba(255,255,255,0.7) !important;
}
.size-btn:hover {
border-color: rgba(181,139,84,0.55) !important;
color: rgba(0,0,0,0.92) !important;
}
.size-btn input:checked + span,
.size-btn:has(input:checked) {
background: #111114 !important;
color: #ffffff !important;
border-color: #111114 !important;
}
.auth-login-layout {
background:
radial-gradient(circle at top, rgba(0,0,0,0.05), transparent 38%),
linear-gradient(180deg, #ffffff, #f6f7f9) !important;
border: 1px solid rgba(17,17,20,0.12) !important;
box-shadow: 0 34px 90px rgba(0,0,0,0.1) !important;
}
.auth-login-pill {
background: rgba(0,0,0,0.03) !important;
border-color: rgba(17,17,20,0.12) !important;
color: rgba(17,17,20,0.68) !important;
}
.auth-login-card {
background: #ffffff !important;
border-color: rgba(17,17,20,0.12) !important;
box-shadow: 0 24px 60px rgba(0,0,0,0.09) !important;
}
.auth-login-card::before {
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.18), transparent) !important;
}
.auth-login-kicker {
color: rgba(17,17,20,0.82) !important;
}
.auth-login-card-head strong {
color: rgba(0,0,0,0.92) !important;
}
.auth-login-note {
background: rgba(0,0,0,0.03) !important;
border-color: rgba(17,17,20,0.1) !important;
color: rgba(17,17,20,0.72) !important;
}
.auth-login-benefit {
background: rgba(0,0,0,0.02) !important;
border-color: rgba(17,17,20,0.1) !important;
}
.auth-login-benefit i {
background: rgba(0,0,0,0.06) !important;
color: rgba(17,17,20,0.9) !important;
}
.auth-login-benefit span {
color: rgba(17,17,20,0.78) !important;
}
/* =================================================================
SHOP — SIMPLE PRODUCT CARD (MARKETPLACE-LIKE)
================================================================= */
.shop-results-shell .product-grid {
gap: 1.25rem;
}
.shop-results-shell .product-card {
border-radius: 12px !important;
overflow: hidden;
background: #ffffff !important;
border: 1px solid rgba(17,17,20,0.12) !important;
box-shadow: 0 18px 45px rgba(0,0,0,0.08) !important;
transform: none !important;
}
.shop-results-shell .product-card:hover {
transform: none !important;
border-color: rgba(181,139,84,0.35) !important;
box-shadow: 0 22px 58px rgba(0,0,0,0.1) !important;
}
.shop-results-shell .pc-media {
aspect-ratio: 1 / 1;
background: #f4f5f7 !important;
}
.shop-results-shell .pc-img-front {
opacity: 1 !important;
transform: none !important;
object-fit: cover !important;
padding: 0;
}
.shop-results-shell .pc-img-back,
.shop-results-shell .pc-badges,
.shop-results-shell .pc-wishlist,
.shop-results-shell .pc-quick {
display: none !important;
}
.shop-results-shell .pc-body {
padding: 1rem 1rem 1.1rem;
text-align: left;
}
.shop-results-shell .pc-collection {
color: rgba(17,17,20,0.68) !important;
font-family: var(--font-sans) !important;
font-size: 0.74rem;
letter-spacing: 0.24em;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.shop-results-shell .pc-name {
font-family: var(--font-sans) !important;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.01em;
color: rgba(0,0,0,0.92) !important;
margin-bottom: 0.65rem;
}
.shop-results-shell .pc-price {
font-family: var(--font-mono) !important;
color: rgba(17,17,20,0.78) !important;
font-size: 0.92rem;
font-weight: 500;
}
.shop-results-shell .pc-now {
color: rgba(17,17,20,0.78) !important;
}
@media (max-width: 480px) {
.shop-results-shell .product-grid {
gap: 1rem;
}
.shop-results-shell .product-card {
border-radius: 10px !important;
}
.shop-results-shell .pc-body {
padding: 0.95rem 0.95rem 1.05rem;
}
.shop-results-shell .pc-name {
font-size: 1rem;
}
}
/* =================================================================
ACCOUNT / CART / SUCCESS REFINEMENT
================================================================= */
.mobile-menu-actions {
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.mobile-cart-shortcut {
position: relative;
}
.order-row {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(170px, 0.8fr) minmax(170px, auto);
gap: 1rem;
align-items: stretch;
padding: 1.15rem 1.2rem !important;
border-radius: 26px !important;
background:
radial-gradient(circle at top left, rgba(181,139,84,0.08), transparent 32%),
linear-gradient(180deg, #ffffff 0%, #fafafc 100%) !important;
}
.or-main {
display: grid;
gap: 0.85rem;
min-width: 0;
}
.or-topline {
display: flex;
justify-content: space-between;
align-items: start;
gap: 0.85rem;
}
.or-order-chip {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0.35rem 0.7rem;
border-radius: 999px;
background: rgba(17,17,20,0.04);
color: rgba(17,17,20,0.66);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
.or-preview-group {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.8rem;
align-items: center;
padding: 0.8rem;
border-radius: 20px;
background: rgba(17,17,20,0.03);
border: 1px solid rgba(17,17,20,0.06);
}
.or-preview-strip {
display: flex;
align-items: center;
gap: 0.45rem;
}
.or-preview-thumb {
width: 48px;
height: 60px;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(17,17,20,0.08);
background: rgba(17,17,20,0.04);
flex: 0 0 auto;
}
.or-preview-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.or-preview-copy {
display: grid;
gap: 0.2rem;
min-width: 0;
}
.or-preview-copy strong,
.or-preview-copy span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.or-preview-copy span {
font-size: 0.84rem;
color: rgba(17,17,20,0.56);
}
.or-preview-fallback {
padding: 0.8rem 0.9rem;
border-radius: 18px;
background: rgba(17,17,20,0.03);
border: 1px dashed rgba(17,17,20,0.12);
color: rgba(17,17,20,0.56);
font-size: 0.86rem;
}
.or-status,
.or-total {
align-self: stretch;
padding: 0.9rem 0.95rem;
border-radius: 20px;
border: 1px solid rgba(17,17,20,0.06);
background: rgba(17,17,20,0.025);
}
.or-status {
display: grid;
align-content: center;
gap: 0.55rem;
justify-items: start;
}
.or-status-meta {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0.35rem 0.7rem;
border-radius: 999px;
background: rgba(17,17,20,0.05);
color: rgba(17,17,20,0.62);
font-size: 0.78rem;
font-weight: 600;
}
.or-total {
display: grid;
align-content: center;
justify-items: end;
gap: 0.35rem;
text-align: right;
}
.or-total-label {
color: rgba(17,17,20,0.5);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
}
.or-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: rgba(17,17,20,0.7);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.order-detail-shell {
padding-top: clamp(0.9rem, 2vw, 1.25rem) !important;
}
.order-detail-layout {
grid-template-columns: minmax(0, 1fr) !important;
}
.order-detail-main {
max-width: 100%;
}
.order-detail-page {
gap: 0.9rem;
}
.od-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.od-order-id {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0.4rem 0.75rem;
border-radius: 999px;
background: rgba(17,17,20,0.04);
border: 1px solid rgba(17,17,20,0.08);
color: #111114;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.od-back-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: rgba(17,17,20,0.68);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.od-hero-card,
.od-summary-card,
.od-quick-card,
.od-info-card,
.success-hero-card,
.success-panel,
.cart-page-intro,
.cart-items-card,
.cart-summary-card {
border: 1px solid rgba(17,17,20,0.08) !important;
border-radius: 24px;
background: #ffffff !important;
box-shadow: 0 18px 45px rgba(0,0,0,0.04);
}
.od-hero-card {
display: grid;
grid-template-columns: 1fr;
gap: 0.7rem;
padding: 0.85rem 0.95rem !important;
border-radius: 18px !important;
background: #ffffff !important;
box-shadow: none !important;
}
.od-hero-main {
display: grid;
gap: 0.5rem;
}
.od-hero-main h2,
.cart-page-intro h2,
.success-copy h1 {
margin: 0;
color: #111114 !important;
line-height: 1.15;
}
.od-hero-copy,
.success-note,
.cart-page-intro p {
margin: 0;
color: rgba(17,17,20,0.62);
line-height: 1.75;
}
.od-badge-row {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0;
}
.od-inline-pill {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0.35rem 0.68rem;
border-radius: 999px;
background: rgba(17,17,20,0.05);
color: #111114;
font-size: 0.74rem;
font-weight: 600;
}
.od-hero-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.5rem;
}
.od-meta-tile,
.success-stat,
.cart-page-stat {
padding: 0.85rem 0.9rem;
border-radius: 16px;
border: 1px solid rgba(17,17,20,0.08);
background: rgba(17,17,20,0.03);
display: grid;
gap: 0.22rem;
}
.od-meta-tile strong,
.success-stat strong,
.cart-page-stat strong {
color: #111114;
font-family: var(--font-sans) !important;
font-size: 1rem;
}
.od-meta-tile {
padding: 0.7rem 0.75rem;
border-radius: 12px;
background: rgba(17,17,20,0.02);
}
.od-meta-tile .eyebrow {
margin-bottom: 0.28rem;
font-size: 0.62rem;
letter-spacing: 0.14em;
}
.od-meta-tile .eyebrow::before {
display: none;
}
.od-meta-tile strong {
font-size: 0.88rem;
line-height: 1.35;
}
.od-section-head,
.success-section-head,
.cart-block-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.od-section-head h3,
.success-section-head h3,
.cart-block-head h3 {
margin: 0.15rem 0 0;
color: #111114 !important;
}
.od-section-head p,
.success-section-head p,
.cart-block-head p {
margin: 0;
color: rgba(17,17,20,0.54);
font-size: 0.88rem;
}
.od-content-grid,
.success-content-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
gap: 0.9rem;
}
.od-main-stack,
.od-side-stack {
display: grid;
gap: 0.9rem;
}
.od-summary-card,
.od-quick-card,
.success-panel,
.cart-summary-card,
.cart-items-card {
padding: clamp(0.9rem, 2.4vw, 1.15rem) !important;
}
.od-quick-card h4 {
margin: 0.2rem 0 0;
color: #111114 !important;
}
.od-quick-card p {
margin: 0.75rem 0 0;
color: rgba(17,17,20,0.62);
line-height: 1.7;
}
.od-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.8rem;
}
.od-info-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
border: none !important;
padding: 0 !important;
background: transparent !important;
}
.od-info-card {
padding: 0.95rem 0.9rem;
}
.od-info-card h4 {
margin-bottom: 0.45rem;
font-size: 1rem;
}
.od-info-card p {
margin: 0;
line-height: 1.65;
font-size: 0.9rem;
}
.od-items {
padding: clamp(0.95rem, 2.6vw, 1.15rem) !important;
}
.od-item {
display: grid;
grid-template-columns: 86px minmax(0, 1fr) auto;
gap: 0.85rem;
align-items: center;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(17,17,20,0.08);
}
.od-item:last-child,
.success-item:last-child,
.cart-item:last-child {
border-bottom: none;
}
.odi-img {
width: 78px;
height: 94px;
border-radius: 16px;
overflow: hidden;
}
.odi-body {
display: grid;
gap: 0.16rem;
}
.odi-body span {
font-size: 0.86rem;
}
.odi-price {
font-family: var(--font-sans) !important;
font-weight: 700;
font-size: 0.95rem;
}
.od-timeline {
padding: 0.95rem 1rem !important;
}
.tl-step {
gap: 0.7rem;
padding: 0.55rem 0;
}
.tl-label {
font-size: 0.9rem;
}
.od-summary-card .os-row {
padding: 0.62rem 0;
}
.od-summary-card .os-total {
margin-top: 0.55rem;
padding-top: 0.85rem;
}
.od-quick-card p {
margin: 0.55rem 0 0;
line-height: 1.6;
font-size: 0.9rem;
}
.success-section {
padding: clamp(2.2rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 4.5rem);
background:
radial-gradient(circle at top left, rgba(181,139,84,0.08), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
}
.success-shell {
display: grid;
gap: 1rem;
}
.success-wrap {
display: grid;
gap: 1rem;
}
.success-hero-card {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.95fr);
gap: 1.1rem;
align-items: start;
padding: clamp(1.05rem, 3vw, 1.45rem);
}
.success-hero-main {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.9rem;
align-items: start;
}
.success-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(180deg, rgba(41,160,94,0.16), rgba(41,160,94,0.07));
color: #1f7b47;
font-size: 1.7rem;
}
.success-copy {
display: grid;
gap: 0.45rem;
}
.success-copy h1 {
font-size: clamp(1.9rem, 4vw, 2.5rem);
}
.success-copy .eyebrow {
margin-bottom: 0.5rem;
}
.success-copy p,
.success-info p {
margin: 0;
color: rgba(17,17,20,0.62);
line-height: 1.75;
}
.success-stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
align-self: stretch;
}
.success-panel-secondary {
background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%) !important;
}
.success-section-pill {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(17,17,20,0.05);
color: rgba(17,17,20,0.66);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
}
.success-mini-info {
display: grid;
gap: 0.7rem;
margin-top: 1rem;
}
.success-mini-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-size: 0.92rem;
}
.success-item-list {
display: grid;
gap: 0.9rem;
}
.success-item {
display: grid;
grid-template-columns: 68px minmax(0, 1fr) auto;
gap: 0.85rem;
align-items: center;
padding-bottom: 0.9rem;
border-bottom: 1px solid rgba(17,17,20,0.08);
}
.success-item-image {
width: 68px;
height: 82px;
border-radius: 16px;
overflow: hidden;
background: rgba(17,17,20,0.04);
}
.success-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.success-item-copy {
display: grid;
gap: 0.2rem;
}
.success-item-copy strong {
color: #111114 !important;
}
.success-item-copy span {
color: rgba(17,17,20,0.56);
font-size: 0.84rem;
}
.success-item-price {
color: #111114;
font-weight: 700;
}
.success-info {
display: none;
}
.cart-page-shell {
display: grid;
gap: 1rem;
}
.cart-page-intro {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 0.9rem;
padding: 0.85rem 1rem !important;
}
.cart-page-intro > div:first-child {
display: grid;
gap: 0.15rem;
}
.cart-page-title {
margin: 0;
color: #111114 !important;
font-size: clamp(1.45rem, 3vw, 1.9rem);
line-height: 1.05;
font-weight: 700;
}
.cart-page-intro .eyebrow {
margin-bottom: 0;
color: #111114 !important;
font-size: 0.82rem;
letter-spacing: 0.18em;
}
.cart-page-intro .eyebrow::before {
display: none;
}
.cart-items-card {
padding: 1rem !important;
}
.cart-item {
grid-template-columns: 108px minmax(0, 1fr) auto;
gap: 1rem;
align-items: start;
padding: 1rem;
margin-bottom: 0.85rem;
border: 1px solid rgba(17,17,20,0.08);
border-radius: 20px;
background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.cart-item:hover {
border-color: rgba(17,17,20,0.14);
box-shadow: 0 16px 32px rgba(17,17,20,0.05);
transform: translateY(-1px);
}
.cart-item:last-child {
margin-bottom: 0;
}
.ci-img {
width: 108px;
height: 132px;
border-radius: 18px;
overflow: hidden;
background: rgba(17,17,20,0.04);
}
.ci-body {
display: grid;
gap: 0.65rem;
min-width: 0;
padding-top: 0.1rem;
}
.ci-meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.ci-name {
font-family: var(--font-sans) !important;
font-size: 1.02rem;
font-weight: 700;
color: #111114 !important;
}
.ci-meta span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0.3rem 0.65rem;
border-radius: 999px;
background: rgba(17,17,20,0.05);
color: rgba(17,17,20,0.64);
}
.ci-price {
font-family: var(--font-sans) !important;
font-size: 1rem;
font-weight: 700;
}
.ci-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.ci-qty.qty-control {
gap: 0.35rem;
padding: 0.2rem;
border-radius: 999px;
border: 1px solid rgba(17,17,20,0.08);
background: #fff;
}
.ci-qty input {
width: 54px;
height: 38px;
border: 0;
background: transparent;
text-align: center;
font-weight: 600;
color: #111114;
}
.ci-qty input:focus {
outline: none;
}
.ci-remove {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
align-self: center;
border: 1px solid rgba(220, 38, 38, 0.12);
border-radius: 999px;
background: rgba(220, 38, 38, 0.06);
color: #dc2626 !important;
transition: all var(--t-elegant);
}
.ci-remove:hover {
background: #dc2626;
border-color: #dc2626;
color: #fff !important;
}
.cart-actions-row-premium {
margin-top: 0;
padding-top: 0.2rem;
border-top: none;
}
.cart-summary-card {
top: 112px !important;
padding: 1rem !important;
}
.cart-page-stat {
min-width: 74px;
min-height: 42px;
padding: 0.45rem 0.7rem !important;
border-radius: 999px;
background: rgba(17,17,20,0.04) !important;
border: 1px solid rgba(17,17,20,0.08) !important;
justify-items: center;
text-align: center;
}
.cart-page-stat .eyebrow {
margin-bottom: 0;
font-size: 0.62rem;
letter-spacing: 0.16em;
color: rgba(17,17,20,0.48) !important;
}
.cart-page-stat .eyebrow::before {
display: none;
}
.cart-page-stat strong {
font-size: 0.95rem;
line-height: 1.05;
}
.cart-summary-card .os-title {
margin: 0;
padding: 0;
border: none;
font-family: var(--font-sans) !important;
font-size: 1.15rem;
font-weight: 700 !important;
color: #111114 !important;
}
.cart-summary-card .os-row {
padding: 0.7rem 0;
}
.cart-summary-card .os-total {
margin-top: 0.8rem;
padding-top: 1rem;
}
.cart-summary-card .os-note {
margin: 0.85rem 0 1.1rem;
color: rgba(17,17,20,0.58);
line-height: 1.7;
}
.cart-block-head {
margin-bottom: 0.95rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid rgba(17,17,20,0.08);
}
.track-page {
padding-top: 1rem !important;
padding-bottom: 2.5rem !important;
}
.track-show {
max-width: 1120px;
margin: 0 auto;
display: grid;
gap: 0.95rem;
padding: 0 !important;
}
.track-summary-card,
.track-panel {
border: 1px solid rgba(17,17,20,0.08) !important;
border-radius: 22px;
background: #ffffff !important;
box-shadow: 0 18px 42px rgba(0,0,0,0.04);
}
.track-summary-card {
padding: 0.9rem 0.95rem;
display: grid;
gap: 0.75rem;
}
.track-topline,
.track-summary-head,
.track-panel-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.9rem;
}
.track-topline {
align-items: center;
padding-bottom: 0.15rem;
}
.track-summary-copy,
.track-meta-card,
.track-item-copy {
display: grid;
gap: 0.22rem;
}
.track-back-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: rgba(17,17,20,0.62);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.track-page-chip,
.track-summary-copy .eyebrow,
.track-meta-label {
margin-bottom: 0;
color: rgba(17,17,20,0.5) !important;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.track-page-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0.25rem 0.55rem;
border-radius: 999px;
background: rgba(17,17,20,0.04);
border: 1px solid rgba(17,17,20,0.08);
}
.track-summary-copy .eyebrow::before,
.track-meta-label::before {
display: none;
}
.track-order-number {
color: #111114;
font-family: var(--font-sans) !important;
font-size: 1.02rem;
font-weight: 800;
line-height: 1.25;
}
.track-status-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.45rem;
}
.track-pill,
.track-panel-chip {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0.35rem 0.68rem;
border-radius: 999px;
background: rgba(17,17,20,0.05);
border: 1px solid rgba(17,17,20,0.08);
color: rgba(17,17,20,0.68);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
white-space: nowrap;
}
.track-meta-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.55rem;
}
.product-related-shell {
display: grid;
gap: 1.5rem;
}
.product-related-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.product-related-copy {
display: grid;
gap: 0.25rem;
}
.product-related-copy .eyebrow {
margin: 0;
}
.product-related-copy .section-h {
margin: 0;
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-style: normal;
}
.product-related-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0.7rem 1rem;
border: 1px solid var(--color-line);
border-radius: 999px;
color: var(--color-secondary);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
transition: all var(--t-elegant);
}
.product-related-link:hover {
border-color: var(--color-accent);
color: var(--color-accent);
transform: translateY(-1px);
}
.product-related-grid {
gap: 1.5rem 1rem;
}
.product-related-grid .product-card {
padding: 0.2rem;
}
.product-related-grid .pc-media {
border-radius: 20px;
overflow: hidden;
background: rgba(255,255,255,0.03);
}
.product-related-grid .pc-body {
padding: 0.25rem 0.35rem 0;
}
.product-related-grid .pc-collection {
color: rgba(255,255,255,0.52);
letter-spacing: 0.24em;
margin-bottom: 0.4rem;
}
.product-related-grid .pc-name {
margin-bottom: 0.35rem;
font-size: 1.02rem;
}
.product-related-grid .pc-price {
color: rgba(255,255,255,0.82);
}
@media (max-width: 767px) {
.product-related-head {
align-items: start;
flex-direction: column;
}
.product-related-link {
min-height: 38px;
padding: 0.6rem 0.9rem;
}
.product-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem 0.9rem;
}
.product-related-grid .pc-name {
font-size: 0.94rem;
}
}
.track-meta-card {
padding: 0.72rem 0.75rem;
border-radius: 14px;
background: rgba(17,17,20,0.025);
border: 1px solid rgba(17,17,20,0.06);
}
.track-meta-card strong,
.track-item-copy strong,
.track-item-price,
.track-panel-head h3,
.th-desc {
color: #111114 !important;
}
.track-meta-card strong {
font-size: 0.94rem;
line-height: 1.35;
}
.track-meta-card span:not(.track-meta-label),
.track-item-copy span,
.th-time,
.track-empty-state span {
color: rgba(17,17,20,0.58) !important;
font-size: 0.84rem;
}
.track-content-grid {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
gap: 0.95rem;
}
.track-panel {
padding: 0.95rem 1rem;
display: grid;
gap: 0.8rem;
}
.track-panel-head h3 {
margin: 0;
font-family: var(--font-sans) !important;
font-size: 1.02rem;
font-weight: 700 !important;
}
.track-item-list,
.track-history-list {
display: grid;
gap: 0.8rem;
}
.track-item {
display: grid;
grid-template-columns: 74px minmax(0, 1fr) auto;
gap: 0.85rem;
align-items: center;
padding: 0.72rem;
border-radius: 16px;
background: rgba(17,17,20,0.02);
border: 1px solid rgba(17,17,20,0.06);
}
.track-item-image {
width: 74px;
height: 90px;
overflow: hidden;
border-radius: 14px;
background: rgba(17,17,20,0.04);
}
.track-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.track-item-price {
font-size: 0.92rem;
font-weight: 700;
text-align: right;
}
.th-item {
display: grid;
gap: 0.28rem;
padding: 0.75rem 0.8rem;
border-radius: 14px;
border: 1px solid rgba(17,17,20,0.08) !important;
background: rgba(17,17,20,0.02) !important;
}
.th-item.delivered {
background: rgba(49,130,82,0.08) !important;
border-color: rgba(49,130,82,0.14) !important;
}
.th-time {
font-family: var(--font-sans) !important;
font-weight: 700;
}
.th-city {
color: rgba(17,17,20,0.46) !important;
font-size: 0.8rem;
font-weight: 600;
}
.track-empty-state {
display: grid;
gap: 0.35rem;
padding: 1rem;
border-radius: 18px;
border: 1px dashed rgba(17,17,20,0.12);
background: rgba(17,17,20,0.02);
}
.track-empty-state strong {
color: #111114;
}
@media (max-width: 991px) {
.order-row,
.od-hero-card,
.od-content-grid,
.success-hero-card,
.success-content-grid,
.cart-page-intro {
grid-template-columns: 1fr;
}
.track-meta-grid,
.track-content-grid {
grid-template-columns: 1fr;
}
.or-status,
.or-total {
justify-self: start;
width: 100%;
}
.od-hero-meta,
.success-stat-grid,
.od-info-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.cart-page-intro {
align-items: center;
flex-direction: row;
}
.od-topline {
align-items: start;
flex-direction: column;
}
.order-row,
.od-item,
.success-item,
.cart-item,
.track-item {
grid-template-columns: 1fr;
}
.or-topline,
.or-preview-group,
.success-hero-main {
grid-template-columns: 1fr;
}
.or-preview-strip {
order: 2;
}
.or-preview-copy {
order: 3;
}
.or-total,
.odi-price,
.success-item-price,
.ci-price,
.track-item-price {
justify-self: start;
}
.or-order-chip,
.success-section-pill {
justify-self: start;
}
.or-total {
text-align: left;
justify-items: start;
}
.cart-page-intro,
.success-hero-card {
align-items: start;
}
.cart-page-intro {
align-items: center;
}
.track-summary-head,
.track-topline,
.track-panel-head,
.track-status-row {
align-items: start;
flex-direction: column;
}
.track-status-row {
justify-content: start;
}
.track-item-price {
text-align: left;
}
}