/* ============================================
Moroccan Art Hub — Moroccan Artisanal E-commerce
Palette: Rich Black, Gold (dominant), Terracotta (secondary), Ivory
============================================ */
:root {
--terracotta: #C0623A;
--terracotta-dark: #94472A;
--terracotta-light: #D78360;
--black: #0D0D0D;
--black-deep: #050505;
--black-soft: #1A1814;
--gold: #C9973B;
--gold-light: #E8C67A;
--gold-dark: #8E6920;
--ivory: #FAF4E8;
--ivory-warm: #F2EAD3;
--ivory-deep: #E8DDC2;
--charcoal: #1A1614;
--font-heading: 'Cinzel', 'Times New Roman', serif;
--font-body: 'Cormorant Garamond', Georgia, serif;
--shadow-soft: 0 4px 20px rgba(13, 13, 13, 0.18);
--shadow-medium: 0 8px 32px rgba(13, 13, 13, 0.32);
--shadow-deep: 0 16px 48px rgba(13, 13, 13, 0.45);
/* Horseshoe arch SVG mask — used by .arch-frame and .arch-image */
--arch-mask: url("data:image/svg+xml;utf8,");
}
/* ===== Reset ===== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
color: var(--charcoal);
background-color: var(--ivory);
overflow-x: hidden;
}
img {
max-width: 100%;
display: block;
}
ul {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
button {
font-family: inherit;
background: none;
border: none;
cursor: pointer;
color: inherit;
}
/* ===== Announcement Bar — fixed thin strip over hero ===== */
.announcement-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 101;
background-color: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--ivory);
text-align: center;
padding: 6px 20px;
font-size: 12px;
line-height: 1.5;
letter-spacing: 1px;
border-bottom: 1px solid rgba(201, 151, 59, 0.18);
}
.announcement-bar p {
font-style: italic;
margin: 0;
}
/* ===== Decorative ornament band (replaces the announcement bar) =====
Visually continuous with the header — same dark base, no seam between them. */
.ornament-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 101;
height: 30px;
background-color: #0D0D0D;
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
pointer-events: none;
/* No bottom border — the header sits flush directly below */
}
.ornament-bar .ornament-line {
flex: 0 1 220px;
height: 1px;
background: linear-gradient(to right, transparent, rgba(201, 151, 59, 0.5) 50%, transparent);
}
.ornament-bar .ornament-line.right {
background: linear-gradient(to left, transparent, rgba(201, 151, 59, 0.5) 50%, transparent);
}
.ornament-bar .ornament-star {
font-size: 13px;
opacity: 0.85;
line-height: 1;
}
.ornament-bar .ornament-star.center {
font-size: 15px;
opacity: 1;
color: var(--gold-soft, #E8C67A);
}
.ornament-bar .ornament-diamond {
width: 4px;
height: 4px;
background-color: rgba(201, 151, 59, 0.6);
transform: rotate(45deg);
flex-shrink: 0;
}
@media (max-width: 640px) {
/* Keep height at 30px so the header (top: 30px) sits flush. Just tighten the gap and shorten the lines. */
.ornament-bar { gap: 8px; }
.ornament-bar .ornament-line { flex: 0 1 60px; }
}
/* ===== Header / Navigation — fixed dark overlay on hero ===== */
.site-header {
position: fixed;
top: 30px; /* directly below announcement bar */
left: 0;
right: 0;
z-index: 100;
background-color: rgba(13, 13, 13, 0.55);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: none;
}
.header-pattern-top {
height: 3px;
background:
linear-gradient(90deg,
var(--terracotta) 0%,
var(--gold) 25%,
var(--gold-light) 50%,
var(--gold) 75%,
var(--terracotta) 100%);
}
.navbar {
padding: 8px 0;
border-bottom: 1px solid rgba(201, 151, 59, 0.12);
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
color: var(--ivory);
letter-spacing: 2px;
}
.logo-mark {
color: var(--gold);
font-size: 20px;
}
.logo-text {
text-transform: uppercase;
}
.nav-menu {
display: flex;
gap: 36px;
flex: 1;
justify-content: center;
}
.nav-link {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ivory);
position: relative;
padding: 4px 0;
}
.nav-link::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background-color: var(--gold);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link:hover,
.nav-link.active {
color: var(--gold);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-actions {
display: flex;
align-items: center;
gap: 18px;
}
.icon-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--ivory);
transition: all 0.3s ease;
}
.icon-btn:hover {
background-color: rgba(201, 151, 59, 0.18);
color: var(--gold);
}
.icon-svg {
width: 18px;
height: 18px;
display: block;
stroke: currentColor;
fill: none;
transition: fill 0.3s ease;
}
/* Filled heart when on wishlist page */
.wishlist-btn.active-page .icon-svg {
fill: currentColor;
color: var(--terracotta);
}
.cart-btn {
position: relative;
}
.cart-count,
.wishlist-count {
position: absolute;
top: 2px;
right: 2px;
background-color: var(--terracotta);
color: var(--ivory);
font-family: var(--font-heading);
font-size: 11px;
font-weight: 600;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.wishlist-btn {
position: relative;
text-decoration: none;
}
/* Hamburger menu toggle (mobile only) */
.nav-toggle {
display: none;
background: none;
border: none;
width: 34px;
height: 34px;
cursor: pointer;
padding: 0;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
transition: opacity 0.2s ease;
}
.nav-toggle span {
display: block;
width: 20px;
height: 1.5px;
background-color: var(--ivory);
transition: all 0.3s ease;
}
.nav-toggle.is-active span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle.is-active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.is-active span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
/* Mobile nav backdrop */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(13, 13, 13, 0.55);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 94;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.nav-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
/* ===== Buttons ===== */
.btn {
display: inline-block;
padding: 16px 38px;
font-family: var(--font-heading);
font-size: 13px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
border: 1px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-primary {
background-color: var(--terracotta);
color: var(--ivory);
border-color: var(--terracotta);
}
.btn-primary:hover {
background-color: var(--terracotta-dark);
border-color: var(--terracotta-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.btn-outline-gold {
background-color: transparent;
color: var(--gold);
border-color: var(--gold);
}
.btn-outline-gold:hover {
background-color: var(--gold);
color: var(--black-deep);
}
/* ===== HERO with Horseshoe Arch ===== */
.hero {
position: relative;
background:
linear-gradient(135deg,
rgba(13, 13, 13, 0.95) 0%,
rgba(5, 5, 5, 0.98) 100%);
color: var(--ivory);
overflow: hidden;
height: 100vh;
min-height: 640px;
padding: 92px 30px 30px;
display: flex;
flex-direction: column;
}
.hero-bg-pattern {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px 80px;
background-repeat: repeat;
opacity: 0.6;
pointer-events: none;
}
.hero-container {
position: relative;
flex: 1;
width: 100%;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 50px;
align-items: center;
z-index: 2;
min-height: 0;
}
.hero-text {
max-width: 540px;
}
.hero-eyebrow {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 5px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 18px;
}
.hero-title {
font-family: var(--font-heading);
font-size: clamp(34px, 4.4vw, 54px);
font-weight: 500;
line-height: 1.1;
letter-spacing: 2px;
margin-bottom: 20px;
color: var(--ivory);
}
.hero-tagline {
font-size: 19px;
font-style: italic;
font-weight: 300;
line-height: 1.55;
color: var(--ivory-warm);
margin-bottom: 28px;
max-width: 480px;
}
/* --- Bab Agnaou-inspired pointed horseshoe arch facade --- */
.hero-arch {
position: relative;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
min-height: 0;
}
.hero-facade {
display: block;
height: min(calc(100vh - 290px), 560px);
width: auto;
max-width: 100%;
overflow: visible;
filter:
drop-shadow(0 0 50px rgba(201, 151, 59, 0.32))
drop-shadow(0 0 100px rgba(201, 151, 59, 0.16))
drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}
/* ===== Hero arch product carousel ===== */
.hero-arch-link {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
text-decoration: none;
color: inherit;
cursor: pointer;
outline: none;
}
.hero-arch-link:focus-visible {
outline: 2px solid var(--gold-light);
outline-offset: 12px;
border-radius: 4px;
}
.hero-product-image {
transition: opacity 0.6s ease;
}
.hero-product-caption {
text-align: center;
margin-top: 12px;
padding: 0 20px;
transition: opacity 0.3s ease;
min-height: 92px;
}
.caption-origin {
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 4px;
}
.caption-name {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 500;
letter-spacing: 1.5px;
color: var(--ivory);
margin-bottom: 4px;
}
.caption-price {
font-size: 16px;
color: var(--gold-light);
margin-bottom: 8px;
font-style: italic;
}
.caption-cta {
display: inline-block;
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
border-bottom: 1px solid var(--gold);
padding-bottom: 2px;
transition: all 0.3s ease;
}
.hero-arch-link:hover .caption-cta {
color: var(--gold-light);
border-bottom-color: var(--gold-light);
letter-spacing: 4px;
}
.hero-product-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 8px;
}
.hero-product-dots .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: rgba(201, 151, 59, 0.3);
cursor: pointer;
padding: 0;
border: none;
transition: all 0.3s ease;
}
.hero-product-dots .dot:hover {
background-color: var(--gold-light);
}
.hero-product-dots .dot.active {
background-color: var(--gold);
transform: scale(1.4);
}
/* Placeholder label (fallback when no image) */
.placeholder-label {
position: relative;
z-index: 2;
font-family: var(--font-heading);
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--ivory);
opacity: 0.9;
padding: 10px 22px;
border: 1px solid rgba(250, 244, 232, 0.45);
}
/* Card images (collection + featured) */
.collection-image img,
.featured-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: transform 0.6s ease;
}
.collection-card:hover .collection-image img,
.featured-card:hover .featured-image img {
transform: scale(1.06);
}
/* Mute the zellige pattern when a real image is present so the photo reads clearly */
.collection-image:has(img)::before,
.featured-image:has(img)::before {
opacity: 0.18;
z-index: 2;
mix-blend-mode: overlay;
}
/* ===== Section Divider (geometric ornament) ===== */
.section-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 24px 40px;
background-color: var(--ivory);
}
.divider-line {
flex: 1;
max-width: 220px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.divider-cluster {
display: inline-flex;
align-items: center;
gap: 14px;
}
.divider-diamond {
width: 8px;
height: 8px;
background-color: var(--gold);
transform: rotate(45deg);
}
.divider-star {
color: var(--gold);
font-size: 22px;
line-height: 1;
}
/* ===== Section Header (shared) ===== */
.section-header {
text-align: center;
margin-bottom: 50px;
padding: 0 20px;
}
.ornament {
display: inline-block;
color: var(--gold);
font-size: 24px;
margin-bottom: 18px;
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(32px, 4vw, 48px);
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--black);
margin-bottom: 16px;
}
.section-subtitle {
font-size: 20px;
font-style: italic;
color: var(--charcoal);
opacity: 0.75;
margin-bottom: 24px;
}
.title-underline {
width: 80px;
height: 1px;
background-color: var(--gold);
margin: 0 auto;
position: relative;
}
.title-underline::before,
.title-underline::after {
content: '';
position: absolute;
top: 50%;
width: 6px;
height: 6px;
background-color: var(--gold);
transform: translateY(-50%) rotate(45deg);
}
.title-underline::before { left: -10px; }
.title-underline::after { right: -10px; }
/* ===== Collections (6 cards) ===== */
.collections {
padding: 80px 40px;
background-color: var(--ivory);
}
.collection-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.collection-card {
background-color: var(--ivory-warm);
border: 1px solid var(--ivory-deep);
overflow: hidden;
transition: all 0.4s ease;
cursor: pointer;
}
.collection-image {
position: relative;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.collection-image::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60px 60px;
z-index: 1;
}
/* Per-category background gradients */
.collection-card[data-cat="ceramics"] .collection-image { background: linear-gradient(135deg, var(--black) 0%, var(--black-deep) 100%); }
.collection-card[data-cat="rugs"] .collection-image { background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-dark) 100%); }
.collection-card[data-cat="lamps"] .collection-image { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); }
.collection-card[data-cat="leather"] .collection-image { background: linear-gradient(135deg, var(--terracotta-dark) 0%, var(--charcoal) 100%); }
.collection-card[data-cat="jewelry"] .collection-image { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--black) 100%); }
.collection-card[data-cat="textiles"] .collection-image { background: linear-gradient(135deg, var(--terracotta-light) 0%, var(--gold) 100%); }
.collection-image .placeholder-label {
z-index: 2;
}
/* Hover overlay */
.collection-overlay {
position: absolute;
inset: 0;
background-color: rgba(5, 5, 5, 0.82);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 3;
}
.overlay-action {
font-family: var(--font-heading);
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
padding: 14px 28px;
border: 1px solid var(--gold);
transform: translateY(10px);
transition: transform 0.4s ease;
}
.collection-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-deep);
border-color: var(--gold);
}
.collection-card:hover .collection-overlay {
opacity: 1;
}
.collection-card:hover .overlay-action {
transform: translateY(0);
}
.collection-body {
padding: 26px 24px 30px;
text-align: center;
}
.collection-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--black);
margin-bottom: 10px;
}
.collection-desc {
font-style: italic;
font-size: 17px;
color: var(--charcoal);
opacity: 0.75;
}
/* ===== Homepage Showcase — animated promo grid ===== */
.showcase {
padding: 80px 40px;
background-color: var(--ivory);
}
.showcase-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1.5fr;
grid-template-rows: 560px;
gap: 20px;
}
.promo-mid {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 20px;
min-height: 0;
}
/* A rotator is the clipped window the two stacked tiles slide through. */
.promo-rotator {
position: relative;
overflow: hidden;
min-height: 0;
}
/* A single tile. Static slots are block-level; tiles inside a rotator are
absolutely stacked so they can slide over one another. */
.promo-tile {
position: relative;
display: block;
height: 100%;
overflow: hidden;
background-color: var(--black);
border: 1px solid var(--gold);
color: var(--ivory);
isolation: isolate;
}
.promo-rotator .promo-tile {
position: absolute;
inset: 0;
}
.promo-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.promo-tile:hover .promo-img {
transform: scale(1.06);
}
/* Dark + gold veil so the type stays legible over any photo. */
.promo-veil {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(5, 5, 5, 0.88) 0%, rgba(5, 5, 5, 0.28) 45%, rgba(5, 5, 5, 0.05) 75%),
radial-gradient(120% 90% at 50% 100%, rgba(201, 151, 59, 0.20), transparent 70%);
z-index: 1;
}
.promo-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 30px 32px;
}
.promo-eyebrow {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: 8px;
}
.promo-name {
font-family: var(--font-heading);
font-weight: 500;
letter-spacing: 1.5px;
line-height: 1.2;
color: var(--ivory);
margin-bottom: 8px;
}
.promo-price {
font-family: var(--font-body);
font-size: 20px;
font-style: italic;
color: var(--ivory-warm);
margin-bottom: 16px;
}
.promo-cta {
display: inline-block;
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold);
padding-bottom: 4px;
border-bottom: 1px solid rgba(201, 151, 59, 0.5);
transition: color 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease;
}
.promo-tile:hover .promo-cta {
color: var(--gold-light);
border-color: var(--gold-light);
letter-spacing: 3.5px;
}
/* The big feature tile carries a larger title. */
.promo-feature .promo-name { font-size: 34px; }
.promo-tall .promo-name { font-size: 28px; }
.promo-rotator .promo-name { font-size: 22px; }
.promo-rotator .promo-content { padding: 22px 26px; }
/* ----- Slide animation (one tile rises, the other falls) ----- */
.promo-rotator .promo-tile {
transition: transform 0.75s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.75s ease;
}
.promo-tile.is-current { transform: translateY(0); opacity: 1; }
.promo-tile.enter-up { transform: translateY(100%); opacity: 0; } /* waits below, slides up in */
.promo-tile.enter-down { transform: translateY(-100%); opacity: 0; } /* waits above, slides down in */
.promo-tile.leave-up { transform: translateY(-100%); opacity: 0; } /* exits upward */
.promo-tile.leave-down { transform: translateY(100%); opacity: 0; } /* exits downward */
@media (prefers-reduced-motion: reduce) {
.promo-img,
.promo-rotator .promo-tile { transition: none; }
.promo-tile:hover .promo-img { transform: none; }
}
/* ----- Showcase as the top hero (replaces the arch) -----
Dark band under the translucent fixed header; the grid fills the viewport. */
.showcase.showcase--hero {
padding: 92px 0 0; /* full-bleed sides; top clears the fixed ornament bar + header */
background:
linear-gradient(135deg, var(--ivory) 0%, var(--ivory-warm) 55%, var(--ivory-deep) 100%);
}
.showcase--hero .showcase-grid {
max-width: none; /* span the full viewport width, edge to edge */
gap: 0; /* tiles flush against each other, no space */
height: calc(100vh - 92px); /* fill the screen below the header */
min-height: 520px;
grid-template-rows: 1fr; /* single row; the middle column splits itself in two */
}
.showcase--hero .promo-mid {
gap: 0; /* the two middle tiles touch too */
}
/* ===== Scroll-reveal — sections fade + rise as they enter the viewport =====
JS adds `.reveal` to targets, then `.is-visible` when they scroll in.
(Class is only added by JS, so non-JS / reduced-motion users see everything.) */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ===== Featured Products (3 cards) ===== */
.featured {
padding: 80px 40px;
background-color: var(--ivory-warm);
}
.featured-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
}
.featured-card {
background-color: var(--ivory);
position: relative;
transition: all 0.4s ease;
border: 1px solid transparent;
display: flex;
flex-direction: column;
}
.featured-card:hover {
border-color: var(--gold);
box-shadow: var(--shadow-medium);
transform: translateY(-4px);
}
.featured-badge {
position: absolute;
top: 16px;
left: 16px;
background-color: var(--terracotta);
color: var(--ivory);
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 14px;
z-index: 2;
}
.featured-badge-limited {
background-color: var(--black);
}
.featured-image {
position: relative;
height: 340px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.featured-image::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px 80px;
z-index: 1;
}
.featured-image .placeholder-label {
z-index: 2;
}
.featured-image[data-pattern="product-1"] { background: linear-gradient(160deg, var(--terracotta-light) 0%, var(--terracotta) 100%); }
.featured-image[data-pattern="product-2"] { background: linear-gradient(160deg, var(--gold) 0%, var(--gold-dark) 100%); }
.featured-image[data-pattern="product-3"] { background: linear-gradient(160deg, var(--black) 0%, var(--black-deep) 100%); }
.featured-body {
padding: 26px 26px 30px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
}
.featured-origin {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-dark);
}
.featured-name {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 500;
letter-spacing: 1px;
color: var(--black);
margin-bottom: 4px;
}
.featured-price {
font-size: 24px;
font-weight: 500;
color: var(--terracotta);
margin-bottom: 18px;
}
.btn-add-cart {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: auto;
padding: 13px 28px;
background-color: transparent;
color: var(--black);
border: 1px solid var(--black);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.btn-add-cart .cart-plus {
font-size: 16px;
line-height: 1;
}
.btn-add-cart:hover {
background-color: var(--black);
color: var(--gold);
border-color: var(--black);
}
/* ===== Story of the Craft ===== */
.story {
background: linear-gradient(180deg, var(--ivory-warm) 0%, var(--ivory-deep) 100%);
color: var(--charcoal);
padding: 90px 40px;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.story-pattern-left,
.story-pattern-right {
position: absolute;
top: 0;
bottom: 0;
width: 220px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px 80px;
background-repeat: repeat;
}
.story-pattern-left { left: 0; }
.story-pattern-right { right: 0; }
.story-content {
max-width: 760px;
position: relative;
z-index: 2;
}
.story-ornament {
display: inline-block;
color: var(--gold);
font-size: 26px;
margin-bottom: 18px;
}
.story-eyebrow {
font-family: var(--font-heading);
font-size: 13px;
letter-spacing: 5px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 16px;
}
.story-title {
font-family: var(--font-heading);
font-size: clamp(34px, 4.5vw, 52px);
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--black);
margin-bottom: 24px;
}
.story-underline {
width: 80px;
height: 1px;
background-color: var(--gold);
margin: 0 auto 36px;
position: relative;
}
.story-underline::before,
.story-underline::after {
content: '';
position: absolute;
top: 50%;
width: 6px;
height: 6px;
background-color: var(--gold);
transform: translateY(-50%) rotate(45deg);
}
.story-underline::before { left: -10px; }
.story-underline::after { right: -10px; }
.story-text {
font-size: 21px;
font-style: italic;
font-weight: 300;
line-height: 1.65;
color: var(--charcoal);
margin-bottom: 24px;
}
.story-text + .story-text {
margin-bottom: 40px;
}
/* "Meet the Artisans" button — readable gold on the cream story background */
.story .btn-outline-gold {
color: var(--gold-dark);
border-color: var(--gold);
}
.story .btn-outline-gold:hover {
background-color: var(--gold);
color: var(--black-deep);
border-color: var(--gold);
}
/* ===== Footer ===== */
.site-footer {
background-color: var(--black-deep);
color: var(--ivory-warm);
position: relative;
}
.footer-pattern-top {
height: 6px;
background:
linear-gradient(90deg,
var(--terracotta) 0%,
var(--gold) 25%,
var(--ivory) 50%,
var(--gold) 75%,
var(--terracotta) 100%);
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
padding: 80px 40px 60px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
gap: 50px;
}
.footer-brand .footer-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-size: 22px;
font-weight: 600;
letter-spacing: 2px;
color: var(--ivory);
margin-bottom: 18px;
}
.footer-brand .footer-logo .logo-mark {
color: var(--terracotta-light);
}
.footer-brand .footer-logo .logo-text {
text-transform: uppercase;
}
.footer-tagline {
font-style: italic;
line-height: 1.6;
margin-bottom: 24px;
opacity: 0.85;
}
.social-links {
display: flex;
gap: 12px;
}
.social-link {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gold-dark);
color: var(--gold);
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.social-link:hover {
background-color: var(--gold);
color: var(--black-deep);
border-color: var(--gold);
}
/* Footer contact mini-list — phone / WhatsApp / email under the social icons */
.footer-contact-mini {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-body);
font-size: 14px;
}
.footer-mini-link {
color: var(--ivory);
opacity: 0.78;
text-decoration: none;
transition: color 0.25s ease, opacity 0.25s ease;
}
.footer-mini-link:hover {
color: var(--gold-light);
opacity: 1;
}
.is-rtl .footer-contact-mini { direction: ltr; text-align: right; }
.footer-heading {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 22px;
position: relative;
padding-bottom: 14px;
}
.footer-heading::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 30px;
height: 1px;
background-color: var(--terracotta);
}
.footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a {
font-size: 17px;
opacity: 0.8;
transition: all 0.3s ease;
}
.footer-links a:hover {
color: var(--gold-light);
opacity: 1;
padding-left: 6px;
}
.newsletter-text {
font-style: italic;
line-height: 1.6;
margin-bottom: 18px;
opacity: 0.85;
font-size: 17px;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.newsletter-input {
background-color: transparent;
border: 1px solid var(--gold-dark);
color: var(--ivory);
padding: 12px 16px;
font-family: var(--font-body);
font-size: 16px;
transition: all 0.3s ease;
}
.newsletter-input::placeholder {
color: var(--ivory-warm);
opacity: 0.5;
font-style: italic;
}
.newsletter-input:focus {
outline: none;
border-color: var(--gold);
background-color: rgba(201, 151, 59, 0.05);
}
.newsletter-btn {
background-color: var(--terracotta);
color: var(--ivory);
padding: 12px 24px;
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.newsletter-btn:hover {
background-color: var(--terracotta-dark);
}
.footer-bottom {
border-top: 1px solid rgba(201, 151, 59, 0.2);
}
.footer-bottom-pattern {
height: 1px;
background:
repeating-linear-gradient(90deg,
var(--gold) 0px,
var(--gold) 8px,
transparent 8px,
transparent 16px);
opacity: 0.4;
}
.footer-bottom-content {
max-width: 1400px;
margin: 0 auto;
padding: 24px 40px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 15px;
opacity: 0.7;
}
.legal-links {
display: flex;
gap: 24px;
}
.legal-links a:hover {
color: var(--gold-light);
}
/* ============================================
COLLECTIONS PAGE — page hero, filters, product grid
============================================ */
/* ===== Page Hero (subpage banner) ===== */
.page-hero {
position: relative;
background:
linear-gradient(135deg,
rgba(13, 13, 13, 0.95) 0%,
rgba(5, 5, 5, 0.98) 100%);
color: var(--ivory);
padding: 140px 40px 80px;
text-align: center;
overflow: hidden;
}
.page-hero-pattern {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60px 60px;
opacity: 0.35;
pointer-events: none;
}
.page-hero-content {
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 auto;
}
.page-hero-eyebrow {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 5px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 16px;
}
.page-hero-title {
font-family: var(--font-heading);
font-size: clamp(36px, 5vw, 60px);
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--ivory);
margin-bottom: 22px;
}
.page-hero-underline {
width: 80px;
height: 1px;
background-color: var(--gold);
margin: 0 auto 24px;
position: relative;
}
.page-hero-underline::before,
.page-hero-underline::after {
content: '';
position: absolute;
top: 50%;
width: 6px;
height: 6px;
background-color: var(--gold);
transform: translateY(-50%) rotate(45deg);
}
.page-hero-underline::before { left: -10px; }
.page-hero-underline::after { right: -10px; }
.page-hero-subtitle {
font-size: 19px;
font-style: italic;
line-height: 1.55;
color: var(--ivory-warm);
max-width: 580px;
margin: 0 auto;
}
/* ===== Category Filter Bar (sticky below nav) ===== */
.filter-bar {
position: sticky;
top: 84px; /* clears fixed announcement + navbar */
z-index: 50;
background-color: var(--ivory);
padding: 32px 40px 22px;
border-bottom: 1px solid var(--ivory-deep);
box-shadow: 0 2px 12px rgba(13, 13, 13, 0.04);
}
.filter-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.filter-pill {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--black);
background-color: transparent;
border: 1px solid var(--gold-dark);
padding: 10px 22px;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-pill:hover {
color: var(--gold);
border-color: var(--gold);
background-color: rgba(201, 151, 59, 0.06);
}
.filter-pill.active {
color: var(--ivory);
background-color: var(--terracotta);
border-color: var(--terracotta);
}
.filter-pill.active:hover {
background-color: var(--terracotta-dark);
border-color: var(--terracotta-dark);
}
.filter-meta {
max-width: 1200px;
margin: 18px auto 0;
text-align: center;
}
.filter-count {
font-family: var(--font-body);
font-style: italic;
font-size: 15px;
color: var(--charcoal);
opacity: 0.7;
letter-spacing: 1px;
}
/* ===== Shop Grid (3 columns of product cards) ===== */
.shop-grid {
padding: 60px 40px 100px;
background-color: var(--ivory);
}
.product-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
}
.product-card {
background-color: var(--ivory-warm);
border: 1px solid transparent;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
border-color: var(--gold);
}
.product-card-image {
position: relative;
height: 340px;
overflow: hidden;
background-color: var(--ivory-deep);
}
.product-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
z-index: 1;
}
.product-card:hover .product-card-image img {
transform: scale(1.08);
}
/* Badge (New / Limited / Bestseller) */
.card-badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
background-color: var(--terracotta);
color: var(--ivory);
font-family: var(--font-heading);
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 12px;
}
.card-badge-limited {
background-color: var(--black);
color: var(--gold);
}
.card-badge-best {
background-color: var(--gold-dark);
color: var(--ivory);
}
/* Wishlist heart button (top right of image) */
.wishlist-heart {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: rgba(13, 13, 13, 0.55);
color: var(--ivory);
border: 1px solid rgba(201, 151, 59, 0.45);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
font-size: 16px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.wishlist-heart:hover {
background-color: var(--terracotta);
color: var(--ivory);
border-color: var(--terracotta);
transform: scale(1.08);
}
.wishlist-heart.active {
background-color: var(--terracotta);
color: var(--ivory);
border-color: var(--terracotta);
}
.wishlist-heart.active:hover {
background-color: var(--terracotta-dark);
}
/* Card body */
.product-card-body {
padding: 22px 22px 26px;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.product-card-body .product-origin {
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-dark);
margin-bottom: 8px;
}
.product-card-body .product-name {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
color: var(--black);
margin-bottom: 10px;
line-height: 1.3;
}
.product-card-body .product-price {
font-size: 19px;
color: var(--terracotta);
font-weight: 500;
font-style: italic;
margin-bottom: 18px;
}
.btn-add-cart-card {
margin-top: auto;
padding: 11px 26px;
background-color: transparent;
color: var(--black);
border: 1px solid var(--black);
font-family: var(--font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
transition: all 0.3s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-add-cart-card:hover {
background-color: var(--black);
color: var(--gold);
border-color: var(--black);
}
.btn-add-cart-card .cart-plus {
font-size: 14px;
line-height: 1;
}
/* Anchor variant — used on cards whose product has variants (must pick one on the PDP) */
a.btn-add-cart-card {
text-decoration: none;
justify-content: center;
}
.btn-choose-options {
color: var(--terracotta);
border-color: var(--terracotta);
}
.btn-choose-options:hover {
background-color: var(--terracotta);
color: var(--ivory);
border-color: var(--terracotta);
}
.btn-choose-options .cart-plus {
font-size: 16px;
transform: translateY(-1px);
}
/* Empty state when filter has no matches */
.grid-empty {
text-align: center;
font-style: italic;
font-size: 18px;
color: var(--charcoal);
opacity: 0.6;
padding: 60px 20px;
}
/* ============================================
PRODUCT DETAIL PAGE (PDP)
============================================ */
.pdp-breadcrumb {
padding: 110px 40px 16px;
background-color: var(--ivory);
}
.breadcrumb-container {
max-width: 1280px;
margin: 0 auto;
font-family: var(--font-body);
font-size: 14px;
color: var(--charcoal);
opacity: 0.75;
letter-spacing: 0.5px;
}
.breadcrumb-container a {
color: var(--charcoal);
transition: color 0.2s ease;
}
.breadcrumb-container a:hover {
color: var(--terracotta);
}
.breadcrumb-sep {
margin: 0 8px;
color: var(--gold-dark);
}
.breadcrumb-current {
color: var(--terracotta);
font-style: italic;
}
/* ===== Main PDP layout ===== */
.pdp-main {
background-color: var(--ivory);
padding: 30px 40px 80px;
}
.pdp-container {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 60px;
align-items: start;
}
/* ===== Gallery (left) ===== */
.pdp-gallery {
position: sticky;
top: 100px;
}
.pdp-main-image {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background-color: var(--ivory-deep);
margin-bottom: 14px;
}
.pdp-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
.pdp-tag {
position: absolute;
top: 18px;
left: 18px;
z-index: 2;
background-color: var(--gold);
color: var(--black);
font-family: var(--font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
padding: 7px 14px;
box-shadow: 0 4px 14px rgba(13, 13, 13, 0.3);
}
.pdp-thumbnails {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.pdp-thumb {
position: relative;
aspect-ratio: 4 / 5;
background-color: var(--ivory-deep);
border: 2px solid transparent;
cursor: pointer;
padding: 0;
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.pdp-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pdp-thumb:hover {
transform: translateY(-2px);
}
.pdp-thumb.active {
border-color: var(--gold);
}
/* ===== Product Info (right) ===== */
.pdp-info {
padding-top: 8px;
}
.pdp-origin-eyebrow {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold-dark);
margin-bottom: 14px;
}
.pdp-name {
font-family: var(--font-heading);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 500;
letter-spacing: 2px;
line-height: 1.15;
color: var(--black);
margin-bottom: 16px;
}
.pdp-underline {
width: 60px;
height: 1px;
background-color: var(--gold);
margin: 0 0 22px;
position: relative;
}
.pdp-underline::after {
content: '';
position: absolute;
top: 50%;
left: -8px;
width: 5px;
height: 5px;
background-color: var(--gold);
transform: translateY(-50%) rotate(45deg);
}
.pdp-price {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 500;
letter-spacing: 1.5px;
color: var(--terracotta);
margin-bottom: 28px;
}
.pdp-description {
font-size: 18px;
font-style: italic;
line-height: 1.65;
color: var(--charcoal);
margin-bottom: 32px;
max-width: 540px;
}
/* ===== Actions row (qty + add to cart + wishlist) ===== */
.pdp-actions {
display: flex;
align-items: stretch;
gap: 12px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.qty-control {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--black);
background-color: var(--ivory);
}
.qty-btn {
width: 44px;
background: transparent;
border: none;
font-family: var(--font-heading);
font-size: 18px;
color: var(--black);
cursor: pointer;
transition: all 0.2s ease;
}
.qty-btn:hover {
background-color: var(--black);
color: var(--gold);
}
.qty-control input {
width: 50px;
text-align: center;
border: none;
background: transparent;
font-family: var(--font-heading);
font-size: 15px;
color: var(--black);
-moz-appearance: textfield;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pdp-add-cart {
flex: 1;
min-width: 220px;
background-color: var(--terracotta);
color: var(--ivory);
border: 1px solid var(--terracotta);
font-family: var(--font-heading);
font-size: 13px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
padding: 14px 30px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.pdp-add-cart:hover {
background-color: var(--terracotta-dark);
border-color: var(--terracotta-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.pdp-add-cart .cart-plus {
font-size: 17px;
line-height: 1;
}
.pdp-wishlist {
width: 50px;
background-color: transparent;
color: var(--black);
border: 1px solid var(--black);
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pdp-wishlist:hover {
background-color: var(--terracotta);
color: var(--ivory);
border-color: var(--terracotta);
}
.pdp-wishlist.active {
background-color: var(--terracotta);
color: var(--ivory);
border-color: var(--terracotta);
}
/* ===== Details (Materials / Dimensions / Care / Shipping) ===== */
.pdp-details {
border-top: 1px solid var(--ivory-deep);
padding-top: 22px;
margin: 0;
}
.pdp-detail-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 18px;
padding: 14px 0;
border-bottom: 1px solid var(--ivory-deep);
}
.pdp-detail-row dt {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0;
}
.pdp-detail-row dd {
font-size: 16px;
line-height: 1.5;
color: var(--charcoal);
margin: 0;
}
/* ===== Related products ===== */
.pdp-related {
padding: 70px 40px 90px;
background-color: var(--ivory-warm);
}
.pdp-related-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.related-card {
display: block;
text-decoration: none;
color: inherit;
background-color: var(--ivory);
border: 1px solid transparent;
overflow: hidden;
transition: all 0.4s ease;
}
.related-card:hover {
border-color: var(--gold);
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
}
.related-image {
position: relative;
height: 320px;
overflow: hidden;
background-color: var(--ivory-deep);
}
.related-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.related-card:hover .related-image img {
transform: scale(1.08);
}
.related-body {
padding: 22px 22px 26px;
text-align: center;
}
.related-origin {
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-dark);
margin-bottom: 8px;
}
.related-name {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 500;
letter-spacing: 1px;
color: var(--black);
margin-bottom: 8px;
line-height: 1.3;
}
.related-price {
font-size: 17px;
color: var(--terracotta);
font-style: italic;
font-weight: 500;
}
/* ===== Toast notification ===== */
.toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translate(-50%, 30px);
z-index: 200;
background-color: var(--black);
color: var(--ivory);
padding: 14px 28px;
border: 1px solid var(--gold);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: 15px;
letter-spacing: 0.5px;
opacity: 0;
transition: all 0.35s ease;
pointer-events: none;
}
.toast.toast-show {
transform: translate(-50%, 0);
opacity: 1;
}
.toast-icon {
color: var(--gold);
font-size: 18px;
}
/* ============================================
WISHLIST PAGE
============================================ */
.wishlist-section {
background-color: var(--ivory);
padding: 60px 40px 100px;
min-height: 50vh;
}
.wishlist-container {
max-width: 1280px;
margin: 0 auto;
}
.wishlist-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.wishlist-card {
background-color: var(--ivory-warm);
border: 1px solid transparent;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
.wishlist-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
border-color: var(--gold);
}
.wishlist-card-image {
position: relative;
display: block;
height: 320px;
overflow: hidden;
background-color: var(--ivory-deep);
}
.wishlist-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.wishlist-card:hover .wishlist-card-image img {
transform: scale(1.07);
}
.wishlist-remove {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: rgba(13, 13, 13, 0.65);
color: var(--ivory);
border: 1px solid rgba(201, 151, 59, 0.4);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.wishlist-remove:hover {
background-color: var(--terracotta);
border-color: var(--terracotta);
transform: rotate(90deg);
}
.wishlist-card-body {
padding: 22px 22px 24px;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.wishlist-card-origin {
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-dark);
margin-bottom: 8px;
}
.wishlist-card-name {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 500;
letter-spacing: 1px;
color: var(--black);
line-height: 1.3;
margin-bottom: 8px;
}
.wishlist-card-name a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.wishlist-card-name a:hover {
color: var(--terracotta);
}
.wishlist-card-price {
font-size: 18px;
color: var(--terracotta);
font-style: italic;
font-weight: 500;
margin-bottom: 16px;
}
.wishlist-add-cart {
margin-top: auto;
padding: 11px 24px;
background-color: transparent;
color: var(--black);
border: 1px solid var(--black);
font-family: var(--font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
transition: all 0.3s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
.wishlist-add-cart:hover {
background-color: var(--black);
color: var(--gold);
}
.wishlist-add-cart .cart-plus { font-size: 14px; }
/* Empty state */
.wishlist-empty {
text-align: center;
padding: 80px 20px;
max-width: 520px;
margin: 0 auto;
}
.wishlist-empty-ornament {
display: inline-block;
color: var(--gold);
font-size: 36px;
margin-bottom: 22px;
}
.wishlist-empty-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--black);
margin-bottom: 12px;
}
.wishlist-empty-text {
font-style: italic;
font-size: 18px;
color: var(--charcoal);
opacity: 0.7;
margin-bottom: 28px;
}
.wishlist-empty-cta {
display: inline-block;
padding: 14px 32px;
background-color: var(--terracotta);
color: var(--ivory);
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.wishlist-empty-cta:hover {
background-color: var(--terracotta-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
/* Marker for nav heart icon when on wishlist page */
.wishlist-btn.active-page {
color: var(--terracotta);
}
/* ============================================
ARTISANS PAGE — editorial profiles
============================================ */
/* Intro paragraph after page hero */
.artisan-intro {
background-color: var(--ivory);
padding: 70px 40px 50px;
text-align: center;
}
.artisan-intro-content {
max-width: 720px;
margin: 0 auto;
}
.artisan-intro-ornament {
display: inline-block;
color: var(--gold);
font-size: 22px;
margin-bottom: 18px;
}
.artisan-intro-text {
font-size: 19px;
line-height: 1.65;
color: var(--charcoal);
margin-bottom: 16px;
}
.artisan-intro-italic {
font-style: italic;
color: var(--terracotta);
font-size: 20px;
margin-bottom: 0;
}
/* List of artisan rows (alternating left/right) */
.artisan-list {
background-color: var(--ivory);
padding: 30px 40px 80px;
}
.artisan-row {
max-width: 1180px;
margin: 0 auto 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.artisan-row:last-child {
margin-bottom: 30px;
}
/* Flip every other row */
.artisan-row:nth-child(even) .artisan-image {
order: 2;
}
.artisan-row:nth-child(even) .artisan-content {
order: 1;
}
.artisan-image {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background-color: var(--ivory-deep);
}
.artisan-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.artisan-row:hover .artisan-image img {
transform: scale(1.04);
}
.artisan-tag {
position: absolute;
top: 18px;
left: 18px;
z-index: 2;
background-color: var(--gold);
color: var(--black);
font-family: var(--font-heading);
font-size: 10px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
padding: 7px 14px;
box-shadow: 0 4px 14px rgba(13, 13, 13, 0.3);
}
/* Content side */
.artisan-content {
padding: 0 8px;
}
.artisan-craft {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--gold-dark);
margin-bottom: 14px;
}
.artisan-name {
font-family: var(--font-heading);
font-size: clamp(28px, 3.2vw, 38px);
font-weight: 500;
letter-spacing: 2px;
line-height: 1.15;
color: var(--black);
margin-bottom: 10px;
}
.artisan-location {
font-size: 16px;
font-style: italic;
color: var(--charcoal);
opacity: 0.75;
letter-spacing: 0.5px;
margin-bottom: 26px;
}
/* Stats: years + generation */
.artisan-stats {
display: flex;
gap: 36px;
margin-bottom: 26px;
padding: 18px 0;
border-top: 1px solid var(--ivory-deep);
border-bottom: 1px solid var(--ivory-deep);
}
.artisan-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.artisan-stat-num {
font-family: var(--font-heading);
font-size: 30px;
font-weight: 500;
color: var(--terracotta);
line-height: 1;
letter-spacing: 1px;
}
.artisan-stat-label {
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--charcoal);
opacity: 0.7;
}
.artisan-bio {
font-size: 18px;
line-height: 1.65;
color: var(--charcoal);
margin-bottom: 26px;
}
/* Quote block */
.artisan-quote {
position: relative;
margin: 0 0 28px;
padding: 6px 0 6px 24px;
border-left: 2px solid var(--gold);
font-family: var(--font-body);
font-size: 22px;
font-style: italic;
line-height: 1.45;
color: var(--terracotta-dark);
}
.artisan-quote .quote-mark {
color: var(--gold);
font-style: normal;
font-weight: 500;
}
/* CTA link to category */
.artisan-link {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--terracotta);
border-bottom: 1px solid var(--terracotta);
padding-bottom: 3px;
transition: all 0.3s ease;
display: inline-block;
}
.artisan-link:hover {
color: var(--terracotta-dark);
border-bottom-color: var(--terracotta-dark);
letter-spacing: 4px;
}
/* Closing CTA section (dark, like story banner) */
.artisan-closing {
background-color: var(--black-deep);
color: var(--ivory);
padding: 90px 40px;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.artisan-closing-content {
max-width: 740px;
position: relative;
z-index: 2;
}
.artisan-closing-title {
font-family: var(--font-heading);
font-size: clamp(30px, 4vw, 44px);
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--ivory);
margin: 18px 0 22px;
}
.artisan-closing-text {
font-size: 19px;
font-style: italic;
font-weight: 300;
line-height: 1.65;
color: var(--ivory-warm);
margin-bottom: 20px;
}
.artisan-closing-text + .artisan-closing-text {
margin-bottom: 36px;
}
/* ============================================
CONTACT PAGE
============================================ */
.contact-main {
background-color: var(--ivory);
padding: 70px 40px 100px;
}
.contact-container {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 60px;
align-items: start;
}
/* Info aside */
.contact-info {
background-color: var(--black-deep);
color: var(--ivory);
padding: 40px 36px 36px;
position: relative;
overflow: hidden;
}
.contact-info::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px 80px;
opacity: 0.4;
pointer-events: none;
}
.contact-info > * { position: relative; z-index: 2; }
.contact-info-title {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ivory);
margin: 0 0 14px;
}
.contact-info-intro {
font-size: 17px;
font-style: italic;
line-height: 1.6;
color: var(--ivory-warm);
opacity: 0.9;
margin: 0 0 30px;
}
.contact-info-list {
list-style: none;
padding: 0;
margin: 0 0 30px;
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-info-list li {
display: flex;
gap: 16px;
}
.contact-info-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background-color: rgba(201, 151, 59, 0.15);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-info-icon svg {
width: 18px;
height: 18px;
}
.contact-info-label {
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 4px;
}
.contact-info-list a,
.contact-info-list p {
color: var(--ivory);
margin: 0;
font-size: 16px;
line-height: 1.4;
text-decoration: none;
transition: color 0.2s ease;
}
.contact-info-list a:hover { color: var(--gold-light); }
.contact-info-ornament {
text-align: center;
color: var(--gold);
font-size: 24px;
opacity: 0.6;
padding-top: 20px;
border-top: 1px solid rgba(201, 151, 59, 0.2);
}
/* Form column */
.contact-form-wrap {
background-color: var(--ivory-warm);
border: 1px solid var(--ivory-deep);
padding: 40px 38px 36px;
}
.contact-form-head {
margin-bottom: 26px;
}
.contact-eyebrow {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 10px;
}
.contact-form-title {
font-family: var(--font-heading);
font-size: clamp(26px, 3vw, 34px);
font-weight: 500;
letter-spacing: 2px;
color: var(--black);
margin: 0;
}
.contact-form textarea {
padding: 12px 14px;
border: 1px solid var(--ivory-deep);
background-color: var(--ivory);
color: var(--charcoal);
font-family: var(--font-body);
font-size: 16px;
transition: all 0.2s ease;
resize: vertical;
min-height: 130px;
}
.contact-form textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201, 151, 59, 0.15);
}
.contact-success {
text-align: center;
padding: 30px 10px;
}
/* ============================================
CHECKOUT PAGE
============================================ */
.checkout-main {
background-color: var(--ivory);
padding: 30px 40px 100px;
min-height: 60vh;
}
.checkout-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 50px;
align-items: start;
}
.checkout-form {
padding-top: 8px;
}
.checkout-section-header {
margin-bottom: 28px;
}
.checkout-eyebrow {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
}
.checkout-title {
font-family: var(--font-heading);
font-size: clamp(28px, 3.4vw, 38px);
font-weight: 500;
letter-spacing: 2px;
color: var(--black);
margin: 0;
}
.checkout-fieldset {
background-color: var(--ivory-warm);
border: 1px solid var(--ivory-deep);
padding: 26px 26px 22px;
margin-bottom: 18px;
}
.checkout-fieldset-title {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--black);
margin: 0 0 4px;
}
.checkout-fieldset-sub {
font-size: 15px;
font-style: italic;
color: var(--charcoal);
opacity: 0.7;
margin: 0 0 18px;
}
.checkout-field {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 14px;
}
.checkout-field:last-child { margin-bottom: 0; }
.checkout-field > span {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold-dark);
}
.checkout-field input,
.checkout-field select {
padding: 12px 14px;
border: 1px solid var(--ivory-deep);
background-color: var(--ivory);
color: var(--charcoal);
font-family: var(--font-body);
font-size: 16px;
transition: all 0.2s ease;
}
.checkout-field input:focus,
.checkout-field select:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201, 151, 59, 0.15);
}
.checkout-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.checkout-row .checkout-field { margin-bottom: 0; }
/* Payment options */
.checkout-payments {
display: grid;
gap: 10px;
}
.checkout-payment-option {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background-color: var(--ivory);
border: 1px solid var(--ivory-deep);
cursor: pointer;
transition: all 0.2s ease;
}
.checkout-payment-option:hover:not(.is-disabled) {
border-color: var(--gold);
background-color: rgba(201, 151, 59, 0.04);
}
.checkout-payment-option input[type="radio"] {
margin-top: 4px;
accent-color: var(--terracotta);
}
.checkout-payment-option input[type="radio"]:checked ~ .checkout-payment-text .checkout-payment-label {
color: var(--terracotta);
}
.checkout-payment-option:has(input:checked) {
border-color: var(--terracotta);
background-color: rgba(192, 98, 58, 0.05);
}
.checkout-payment-option.is-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.checkout-payment-icon {
width: 40px;
height: 40px;
border-radius: 8px;
background-color: var(--ivory-deep);
color: var(--charcoal);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.checkout-payment-icon svg {
width: 22px;
height: 22px;
}
.checkout-payment-text {
flex: 1;
}
.checkout-payment-label {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
color: var(--black);
margin: 0 0 3px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.checkout-payment-soon {
background-color: var(--gold-dark);
color: var(--ivory);
font-size: 9px;
font-weight: 600;
letter-spacing: 1.5px;
padding: 3px 8px;
border-radius: 3px;
text-transform: uppercase;
}
.checkout-payment-desc {
font-size: 13px;
color: var(--charcoal);
opacity: 0.7;
margin: 0;
font-style: italic;
}
/* Bank transfer details */
.checkout-payment-details {
margin-top: 18px;
}
.checkout-bank-info {
background-color: var(--ivory);
border: 1px dashed var(--gold-dark);
padding: 22px 24px;
}
.checkout-bank-eyebrow {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 10px;
}
.checkout-bank-info p {
font-size: 15px;
margin: 0 0 14px;
color: var(--charcoal);
line-height: 1.5;
}
.checkout-bank-dl {
display: grid;
gap: 8px;
margin: 0 0 6px;
}
.checkout-bank-dl > div {
display: grid;
grid-template-columns: 130px 1fr;
gap: 14px;
padding: 8px 0;
border-bottom: 1px solid var(--ivory-deep);
}
.checkout-bank-dl > div:last-child { border-bottom: none; }
.checkout-bank-dl dt {
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold-dark);
}
.checkout-bank-dl dd {
margin: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
color: var(--charcoal);
word-break: break-all;
}
.checkout-bank-note {
font-size: 13px !important;
font-style: italic;
color: var(--charcoal) !important;
opacity: 0.7;
margin: 12px 0 0 !important;
}
/* Submit + secure note */
.checkout-submit-btn {
width: 100%;
margin-top: 6px;
padding: 17px 30px;
background-color: var(--terracotta);
color: var(--ivory);
border: 1px solid var(--terracotta);
font-family: var(--font-heading);
font-size: 13px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.checkout-submit-btn:hover {
background-color: var(--terracotta-dark);
border-color: var(--terracotta-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.checkout-submit-btn svg {
width: 17px;
height: 17px;
}
.checkout-secure-note {
text-align: center;
font-size: 13px;
color: var(--charcoal);
opacity: 0.6;
font-style: italic;
margin: 14px 0 0;
}
/* Summary */
.checkout-summary {
background-color: var(--ivory-warm);
border: 1px solid var(--ivory-deep);
padding: 24px 26px;
position: sticky;
top: 100px;
}
.checkout-summary-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--ivory-deep);
}
.checkout-summary-title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--black);
margin: 0;
}
.checkout-edit-link {
background: none;
border: none;
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--terracotta);
cursor: pointer;
padding: 0;
}
.checkout-edit-link:hover { color: var(--terracotta-dark); }
.checkout-items {
list-style: none;
padding: 0;
margin: 0 0 18px;
}
.checkout-item {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 12px;
padding: 12px 0;
border-bottom: 1px dashed var(--ivory-deep);
align-items: center;
}
.checkout-item:last-child { border-bottom: none; }
.checkout-item-thumb {
position: relative;
width: 64px;
height: 72px;
overflow: hidden;
background-color: var(--ivory-deep);
}
.checkout-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.checkout-item-qty {
position: absolute;
top: -7px;
right: -7px;
background-color: var(--terracotta);
color: var(--ivory);
font-family: var(--font-heading);
font-size: 11px;
font-weight: 600;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--ivory-warm);
}
.checkout-item-info { min-width: 0; }
.checkout-item-name {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 500;
color: var(--black);
margin: 0 0 3px;
line-height: 1.3;
}
.checkout-item-origin {
font-size: 12px;
font-style: italic;
color: var(--charcoal);
opacity: 0.7;
margin: 0;
}
.checkout-item-line {
font-family: var(--font-heading);
font-size: 15px;
color: var(--terracotta);
margin: 0;
font-weight: 500;
}
.checkout-totals {
padding-top: 14px;
border-top: 1px solid var(--ivory-deep);
}
.checkout-total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 14px;
color: var(--charcoal);
}
.checkout-total-row.checkout-total-grand {
border-top: 1px solid var(--ivory-deep);
padding-top: 14px;
margin-top: 10px;
font-family: var(--font-heading);
font-size: 18px;
color: var(--black);
letter-spacing: 1px;
}
.checkout-total-row.checkout-total-grand span:last-child {
color: var(--terracotta);
font-size: 22px;
}
/* Success & empty states */
.checkout-success-card {
max-width: 600px;
margin: 40px auto 60px;
text-align: center;
background-color: var(--ivory-warm);
border: 1px solid var(--ivory-deep);
padding: 60px 40px;
}
.checkout-success-ornament {
color: var(--gold);
font-size: 32px;
margin-bottom: 18px;
}
.checkout-success-eyebrow {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 14px;
}
.checkout-success-title {
font-family: var(--font-heading);
font-size: clamp(36px, 5vw, 50px);
font-weight: 500;
letter-spacing: 3px;
color: var(--black);
margin: 0 0 18px;
}
.checkout-success-sub {
font-size: 19px;
font-style: italic;
color: var(--charcoal);
margin: 0 0 22px;
}
.checkout-success-message {
font-size: 16px;
color: var(--charcoal);
line-height: 1.6;
margin: 0 0 26px;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.checkout-success-payment {
margin: 0 0 30px;
text-align: left;
}
.checkout-success-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================
CART DRAWER (slide-out + backdrop)
============================================ */
.cart-backdrop {
position: fixed;
inset: 0;
background: rgba(13, 13, 13, 0.55);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 198;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.cart-backdrop.cart-backdrop-show {
opacity: 1;
pointer-events: auto;
}
.cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 460px;
background-color: var(--ivory);
color: var(--charcoal);
z-index: 199;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
box-shadow: -16px 0 40px rgba(0, 0, 0, 0.25);
}
.cart-drawer.cart-drawer-open {
transform: translateX(0);
}
/* Header */
.cart-drawer-header {
padding: 26px 28px 20px;
border-bottom: 1px solid var(--ivory-deep);
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-shrink: 0;
background-color: var(--ivory);
}
.cart-drawer-eyebrow {
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 6px;
}
.cart-drawer-title {
font-family: var(--font-heading);
font-size: 26px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--black);
margin: 0;
}
.cart-drawer-close {
background: none;
border: 1px solid var(--ivory-deep);
border-radius: 50%;
width: 36px;
height: 36px;
font-size: 22px;
line-height: 1;
color: var(--charcoal);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
}
.cart-drawer-close:hover {
background-color: var(--terracotta);
color: var(--ivory);
border-color: var(--terracotta);
transform: rotate(90deg);
}
/* Scrollable body */
.cart-drawer-body {
flex: 1;
overflow-y: auto;
padding: 8px 28px;
}
.cart-drawer-body::-webkit-scrollbar {
width: 6px;
}
.cart-drawer-body::-webkit-scrollbar-thumb {
background: var(--gold-dark);
border-radius: 3px;
}
/* Empty state */
.cart-empty {
padding: 70px 20px;
text-align: center;
}
.cart-empty-ornament {
font-size: 32px;
color: var(--gold);
display: block;
margin-bottom: 18px;
}
.cart-empty-title {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--black);
margin-bottom: 10px;
}
.cart-empty-text {
font-style: italic;
color: var(--charcoal);
opacity: 0.7;
margin-bottom: 26px;
}
.cart-empty-cta {
display: inline-block;
padding: 12px 30px;
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-dark);
border: 1px solid var(--gold-dark);
text-decoration: none;
transition: all 0.3s ease;
}
.cart-empty-cta:hover {
background-color: var(--gold-dark);
color: var(--ivory);
}
/* Cart line item */
.cart-item {
display: grid;
grid-template-columns: 90px 1fr;
gap: 16px;
padding: 22px 0;
border-bottom: 1px solid var(--ivory-deep);
}
.cart-item:last-child {
border-bottom: none;
}
.cart-item-image {
display: block;
width: 90px;
height: 110px;
overflow: hidden;
background-color: var(--ivory-deep);
}
.cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.cart-item-image:hover img {
transform: scale(1.06);
}
.cart-item-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.cart-item-origin {
font-family: var(--font-heading);
font-size: 9px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0 0 4px;
}
.cart-item-name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
line-height: 1.3;
color: var(--black);
margin: 0 0 6px;
}
.cart-item-name a {
color: inherit;
transition: color 0.2s ease;
text-decoration: none;
}
.cart-item-name a:hover {
color: var(--terracotta);
}
.cart-item-price {
font-size: 13px;
color: var(--charcoal);
margin: 0 0 auto;
padding-bottom: 12px;
}
.cart-item-line {
color: var(--terracotta);
font-weight: 500;
}
.cart-item-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.cart-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--ivory-deep);
background: var(--ivory);
}
.cart-qty-btn {
width: 28px;
height: 28px;
background: transparent;
border: none;
color: var(--black);
font-family: var(--font-heading);
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}
.cart-qty-btn:hover {
background-color: var(--black);
color: var(--gold);
}
.cart-qty-val {
min-width: 28px;
text-align: center;
font-family: var(--font-heading);
font-size: 13px;
color: var(--black);
}
.cart-item-remove {
background: none;
border: none;
font-family: var(--font-body);
font-size: 12px;
font-style: italic;
color: var(--charcoal);
opacity: 0.6;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
padding: 0;
transition: all 0.2s ease;
}
.cart-item-remove:hover {
color: var(--terracotta);
opacity: 1;
}
/* Footer (subtotal + checkout) */
.cart-drawer-footer {
padding: 22px 28px 26px;
border-top: 1px solid var(--ivory-deep);
background-color: var(--ivory-warm);
flex-shrink: 0;
}
.cart-drawer-footer:empty {
display: none;
}
.cart-totals {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.cart-totals-label {
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--black);
}
.cart-subtotal {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 500;
color: var(--terracotta);
letter-spacing: 1px;
}
.cart-shipping-note {
font-size: 13px;
font-style: italic;
color: var(--charcoal);
opacity: 0.7;
margin: 0 0 18px;
}
.cart-checkout-btn {
width: 100%;
padding: 15px 28px;
background-color: var(--terracotta);
color: var(--ivory);
border: 1px solid var(--terracotta);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 12px;
}
.cart-checkout-btn:hover {
background-color: var(--terracotta-dark);
border-color: var(--terracotta-dark);
}
.cart-continue-link {
background: none;
border: none;
width: 100%;
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--charcoal);
cursor: pointer;
padding: 8px 0;
transition: color 0.2s ease;
}
.cart-continue-link:hover {
color: var(--terracotta);
}
/* Lock body scroll when drawer open */
body.cart-drawer-active {
overflow: hidden;
}
/* Mobile */
@media (max-width: 500px) {
.cart-drawer {
max-width: 100%;
}
.cart-drawer-header { padding: 22px 20px 16px; }
.cart-drawer-body { padding: 8px 20px; }
.cart-drawer-footer { padding: 18px 20px 22px; }
.cart-item {
grid-template-columns: 80px 1fr;
gap: 14px;
}
.cart-item-image {
width: 80px;
height: 100px;
}
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1100px) {
/* Below desktop: relax 100vh so stacked hero can breathe */
.hero {
height: auto;
min-height: auto;
padding: 96px 30px 70px;
}
.hero-container {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.hero-text {
max-width: 720px;
margin: 0 auto;
order: 2;
}
.hero-arch {
order: 1;
width: 100%;
}
.hero-facade {
height: auto;
width: 100%;
max-width: 380px;
margin: 0 auto;
}
.hero-tagline {
margin-left: auto;
margin-right: auto;
}
.collection-grid {
grid-template-columns: repeat(2, 1fr);
}
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
.page-hero {
padding: 130px 30px 60px;
}
.filter-bar {
padding: 24px 20px 18px;
}
/* PDP — stack gallery & info */
.pdp-container {
grid-template-columns: 1fr;
gap: 36px;
}
.pdp-gallery {
position: static;
max-width: 600px;
margin: 0 auto;
}
.pdp-related-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Wishlist grid — 2 cols on tablet */
.wishlist-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Artisan rows — stack image above content, normalize order */
.artisan-row {
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: 60px;
max-width: 640px;
}
.artisan-row:nth-child(even) .artisan-image,
.artisan-row:nth-child(even) .artisan-content {
order: initial;
}
.artisan-content {
padding: 0;
}
.footer-content {
grid-template-columns: 1fr 1fr 1fr;
}
.footer-brand,
.footer-newsletter {
grid-column: span 3;
}
/* Showcase promo grid — stack to one column; give each tile an explicit
height because the rotator's tiles are absolutely positioned. */
.showcase-grid {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 16px;
}
/* Hero variant: drop the viewport-fill height so tiles can stack freely. */
.showcase--hero .showcase-grid {
height: auto;
max-height: none;
min-height: 0;
grid-template-rows: none;
}
.promo-feature,
.promo-tall {
height: 360px;
}
.promo-mid {
grid-template-rows: 260px 260px;
gap: 16px;
}
.promo-feature .promo-name { font-size: 30px; }
}
@media (max-width: 900px) {
/* Hamburger appears */
.nav-toggle {
display: flex;
}
/* Nav menu becomes a slide-in drawer from the right
Uses explicit height instead of bottom:0 because .site-header's
backdrop-filter creates a containing block — bottom:0 would resolve
to the bottom of the header (~50px tall) and clip most items. */
.nav-menu {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
flex: none;
position: fixed;
top: 0;
right: 0;
width: 85vw;
max-width: 360px;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
background-color: var(--black);
padding: 110px 32px 40px;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 95;
box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
border-left: 1px solid rgba(201, 151, 59, 0.2);
overflow-y: auto;
}
.nav-menu.is-open {
transform: translateX(0);
}
.nav-menu li {
padding: 20px 0;
border-bottom: 1px solid rgba(201, 151, 59, 0.12);
text-align: left;
flex-shrink: 0;
width: 100%;
}
.nav-menu .nav-link {
font-size: 18px;
letter-spacing: 2.5px;
font-weight: 500;
padding: 6px 0;
display: block;
color: var(--ivory);
transition: color 0.25s ease, padding-left 0.25s ease;
}
.nav-menu .nav-link:hover,
.nav-menu .nav-link.active {
color: var(--gold);
padding-left: 6px;
}
.nav-menu .nav-link.active {
position: relative;
}
.nav-menu .nav-link.active::before {
content: "\2724";
color: var(--gold);
margin-right: 10px;
font-size: 14px;
position: absolute;
left: -22px;
top: 50%;
transform: translateY(-50%);
}
.nav-menu .nav-link::after {
display: none;
}
.nav-container {
padding: 0 20px;
}
.hero {
padding: 90px 20px 60px;
}
.hero-facade {
max-width: 320px;
}
.collections,
.featured,
.story {
padding: 80px 20px;
}
.featured-grid {
grid-template-columns: 1fr;
max-width: 480px;
}
.story-pattern-left,
.story-pattern-right {
width: 100px;
opacity: 0.6;
}
.footer-content {
grid-template-columns: 1fr 1fr;
padding: 60px 20px 40px;
gap: 40px;
}
.footer-brand,
.footer-newsletter {
grid-column: span 2;
}
.section-divider {
padding: 28px 20px;
}
.divider-line {
max-width: 120px;
}
}
@media (max-width: 600px) {
body {
font-size: 16px;
}
.hero-tagline,
.story-text {
font-size: 18px;
}
.showcase {
padding: 60px 20px;
}
.promo-feature,
.promo-tall {
height: 300px;
}
.promo-mid {
grid-template-rows: 220px 220px;
}
.promo-feature .promo-name { font-size: 26px; }
.promo-content { padding: 24px 22px; }
.collection-grid {
grid-template-columns: 1fr;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.product-grid {
grid-template-columns: 1fr;
max-width: 420px;
margin-left: auto;
margin-right: auto;
gap: 28px;
}
.page-hero {
padding: 120px 20px 50px;
}
.filter-pill {
font-size: 11px;
padding: 8px 16px;
}
.shop-grid {
padding: 40px 20px 70px;
}
/* PDP — mobile */
.pdp-breadcrumb {
padding: 100px 20px 12px;
font-size: 12px;
}
.pdp-main {
padding: 20px 20px 60px;
}
/* Wishlist — single column */
.wishlist-section { padding: 40px 20px 70px; }
.wishlist-grid {
grid-template-columns: 1fr;
max-width: 420px;
margin: 0 auto;
gap: 26px;
}
/* Artisans — mobile */
.artisan-intro {
padding: 50px 20px 36px;
}
.artisan-intro-text { font-size: 17px; }
.artisan-list { padding: 20px 20px 60px; }
.artisan-row { margin-bottom: 50px; }
.artisan-stats { gap: 24px; }
.artisan-stat-num { font-size: 26px; }
.artisan-bio { font-size: 17px; }
.artisan-quote { font-size: 19px; padding-left: 18px; }
.artisan-closing { padding: 70px 20px; }
.artisan-closing-text { font-size: 17px; }
.pdp-related {
padding: 50px 20px 70px;
}
.pdp-related-grid {
grid-template-columns: 1fr;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.pdp-actions {
gap: 10px;
}
.pdp-add-cart {
min-width: 0;
flex: 1 1 100%;
order: 3;
}
.pdp-detail-row {
grid-template-columns: 120px 1fr;
}
.hero-facade {
max-width: 280px;
}
.arch-column-left { left: -14px; }
.arch-column-right { right: -14px; }
.footer-content {
grid-template-columns: 1fr;
}
.footer-brand,
.footer-newsletter {
grid-column: span 1;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.divider-line {
max-width: 60px;
}
}
/* ============================================
RESPONSIVE POLISH — universal hardening
============================================ */
/* iOS / touch quality-of-life */
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(201, 151, 59, 0.18);
}
button, a, .icon-btn, .filter-pill, .nav-toggle {
touch-action: manipulation;
}
/* Prevent iOS Safari from zooming on focus when font-size < 16px */
input, select, textarea {
font-size: max(16px, 1rem);
}
/* Hard guard against horizontal overflow */
html, body {
max-width: 100%;
overflow-x: hidden;
}
img, svg, video {
max-width: 100%;
height: auto;
}
/* Make all images that should fill containers do so cleanly */
.collection-image img,
.featured-image img,
.product-card-image img,
.related-image img,
.wishlist-card-image img,
.artisan-image img,
.cart-item-image img,
.pdp-main-image img {
height: 100%;
}
/* Long product names / words don't overflow tight cards */
.product-name, .featured-name, .collection-title, .related-name,
.wishlist-card-name, .cart-item-name, .pdp-name, .artisan-name {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
/* Smooth, contained scroll on drawers (prevent body scroll-chaining on iOS) */
.cart-drawer-body, .nav-menu {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* ===== Large desktop (1400px+) ===== */
@media (min-width: 1400px) {
.nav-container, .hero-container, .product-grid, .pdp-container,
.pdp-related-grid, .footer-content, .footer-bottom-content,
.collection-grid, .artisan-row, .wishlist-grid {
margin-left: auto;
margin-right: auto;
}
}
/* ===== Tablet refinement (900–1100px) — keep 3 cols for featured on tablet ===== */
@media (max-width: 1100px) and (min-width: 720px) {
.featured-grid {
grid-template-columns: repeat(3, 1fr);
max-width: 100%;
gap: 24px;
}
}
/* ===== Small phone (≤ 480px) — tight spacing, hide non-functional search ===== */
@media (max-width: 480px) {
/* Keep icon-btn at default 36px — bumping to 40px overflows on 320px viewports */
.nav-actions {
gap: 4px;
}
.nav-container {
gap: 10px;
padding: 0 14px;
}
/* Hide the non-functional search icon on small phones to make room */
.nav-actions > button[aria-label="Search"] {
display: none;
}
.logo {
font-size: 16px;
letter-spacing: 1.5px;
}
.logo-mark {
font-size: 17px;
}
.announcement-bar {
font-size: 11px;
padding: 6px 14px;
letter-spacing: 0.5px;
}
/* Filter pills become a horizontal-scroll row instead of wrapping */
.filter-container {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
padding: 4px 4px 8px;
margin: 0 -4px;
scrollbar-width: none;
}
.filter-container::-webkit-scrollbar {
display: none;
}
.filter-pill {
flex-shrink: 0;
}
/* Hero typography one notch smaller for very narrow screens */
.hero-eyebrow { font-size: 10px; letter-spacing: 4px; }
.hero-title { letter-spacing: 1.5px; }
.hero-tagline { font-size: 17px; }
/* Caption + dots tighter under arch */
.caption-name { font-size: 16px; }
.caption-price { font-size: 15px; }
/* Buttons fill width on tiny screens for easier tapping */
.btn {
padding: 14px 26px;
letter-spacing: 2.5px;
}
.hero-actions .btn,
.btn-add-cart-card,
.btn-add-cart,
.wishlist-add-cart,
.pdp-add-cart {
width: 100%;
justify-content: center;
}
/* Cart drawer — bigger touch targets */
.cart-qty-btn {
width: 36px;
height: 36px;
}
.cart-qty-val {
min-width: 32px;
font-size: 14px;
}
.cart-drawer-close {
width: 40px;
height: 40px;
}
.cart-drawer-header { padding: 18px 18px 14px; }
.cart-drawer-body { padding: 6px 18px; }
.cart-drawer-footer { padding: 16px 18px 20px; }
/* PDP — stack qty + wishlist + add to cart in a clearer order */
.pdp-detail-row {
grid-template-columns: 1fr;
gap: 4px;
padding: 12px 0;
}
.pdp-detail-row dt {
opacity: 0.85;
}
.pdp-thumbnails {
gap: 8px;
}
/* Featured product card padding */
.featured-body {
padding: 20px 18px 24px;
}
/* Page-hero on subpages */
.page-hero {
padding: 108px 16px 36px;
}
.page-hero-title {
letter-spacing: 3px;
}
.page-hero-subtitle {
font-size: 16px;
}
/* Artisans on tiny screens */
.artisan-stats {
gap: 18px;
}
.artisan-stat-num {
font-size: 24px;
}
/* Bigger tap area for carousel dots without changing the dot itself */
.hero-product-dots .dot {
padding: 6px;
background-clip: content-box;
}
/* Wishlist heart on cards a bit bigger */
.wishlist-heart {
width: 40px;
height: 40px;
}
}
/* ===== Landscape phones (short viewport) — relax hero ===== */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 900px) {
.hero {
height: auto;
min-height: auto;
padding: 84px 24px 40px;
}
.hero-container {
grid-template-columns: 1.1fr 1fr;
gap: 28px;
text-align: left;
}
.hero-text {
order: 0;
max-width: 100%;
}
.hero-arch {
order: 0;
}
.hero-facade {
height: auto;
max-width: 280px;
}
.hero-tagline {
margin-left: 0;
margin-right: 0;
}
.hero-title {
font-size: clamp(28px, 4vw, 40px);
}
}
/* ===== Reduced motion preferences ===== */
@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;
}
}
/* ============================================
Product variants picker + short description + specs + cart variant line
============================================ */
.pdp-short-desc {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.55;
color: var(--terracotta-dark, #8C3E20);
font-style: italic;
margin: -8px 0 22px;
max-width: 540px;
letter-spacing: 0.2px;
}
.pdp-variants {
margin: 0 0 28px;
padding: 18px 20px;
border: 1px solid var(--ivory-deep);
background-color: rgba(250, 244, 232, 0.55);
}
.pdp-variants-label {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0 0 12px;
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.pdp-variant-current {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--charcoal);
font-style: italic;
}
.pdp-variant-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pdp-variant-pill {
font-family: var(--font-body);
font-size: 14px;
line-height: 1;
color: var(--charcoal);
background-color: var(--ivory);
border: 1px solid var(--black);
padding: 10px 16px;
cursor: pointer;
transition: all 0.2s ease;
}
.pdp-variant-pill:hover {
background-color: var(--black);
color: var(--gold);
}
.pdp-variant-pill.is-active {
background-color: var(--terracotta);
color: var(--ivory);
border-color: var(--terracotta);
}
.pdp-variant-pill.is-sold-out {
opacity: 0.45;
cursor: not-allowed;
text-decoration: line-through;
}
.pdp-variant-pill.is-sold-out:hover {
background-color: var(--ivory);
color: var(--charcoal);
}
.pdp-variant-stock {
margin: 10px 0 0;
font-size: 13px;
font-style: italic;
color: var(--terracotta-dark, #8C3E20);
}
.pdp-add-cart:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ===== Cart drawer & checkout: variant label sub-line ===== */
.cart-item-variant,
.checkout-item-variant {
margin: 2px 0 4px;
font-size: 12px;
color: var(--gold-dark, #B57F1F);
letter-spacing: 0.6px;
text-transform: uppercase;
font-family: var(--font-heading);
font-weight: 500;
}
/* ============================================
Patron Reviews — homepage section + review submission page
============================================ */
/* ===== Homepage section ===== */
.reviews-section {
padding: 80px 40px 100px;
background-color: var(--ivory-warm, #F4ECDD);
}
.reviews-grid {
max-width: 1180px;
margin: 40px auto 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 26px;
}
.reviews-empty {
text-align: center;
color: var(--charcoal);
font-style: italic;
grid-column: 1 / -1;
opacity: 0.7;
}
.review-summary-avg {
color: var(--gold-dark);
font-weight: 600;
letter-spacing: 1px;
}
.review-card {
background-color: var(--ivory);
border: 1px solid var(--ivory-deep);
padding: 26px 26px 22px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.review-card::before {
content: '\201C'; /* big opening quote ornament */
position: absolute;
top: -10px;
right: 18px;
font-family: Georgia, serif;
font-size: 80px;
color: var(--gold);
opacity: 0.18;
line-height: 1;
}
.review-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium, 0 10px 30px rgba(0,0,0,0.08));
}
.review-card-stars {
display: flex;
gap: 2px;
}
.review-star {
color: var(--ivory-deep);
font-size: 18px;
line-height: 1;
}
.review-star.is-on {
color: var(--gold);
}
.review-card-title {
margin: 0;
font-family: var(--font-heading);
font-size: 17px;
font-weight: 500;
letter-spacing: 0.4px;
color: var(--black);
}
.review-card-body {
margin: 0;
font-size: 15px;
line-height: 1.65;
color: var(--charcoal);
font-style: italic;
}
.review-card-author {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--ivory-deep);
display: flex;
align-items: center;
gap: 12px;
}
.review-card-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background-color: var(--terracotta);
color: var(--ivory);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 13px;
letter-spacing: 1px;
font-weight: 500;
}
.review-card-name {
margin: 0;
font-size: 14px;
font-weight: 500;
color: var(--black);
}
.review-card-date {
margin: 1px 0 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--gold-dark);
}
/* ===== Review submission page ===== */
.review-page {
background-color: var(--ivory-warm, #F4ECDD);
padding: 60px 24px 100px;
min-height: 70vh;
}
.review-container {
max-width: 680px;
margin: 0 auto;
background-color: var(--ivory);
border: 1px solid var(--ivory-deep);
padding: 48px 44px 44px;
position: relative;
}
.review-hero {
text-align: center;
margin-bottom: 36px;
}
.review-eyebrow {
display: inline-block;
color: var(--gold-dark);
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 14px;
}
.review-title {
font-family: var(--font-heading);
font-size: clamp(28px, 4vw, 38px);
color: var(--black);
margin: 0 0 14px;
letter-spacing: 1.5px;
}
.review-sub {
margin: 12px 0 0;
font-size: 14px;
color: var(--charcoal);
letter-spacing: 0.4px;
}
.review-state {
text-align: center;
padding: 28px 12px;
}
.review-state-bad {
color: var(--terracotta-dark, #8C3E20);
font-style: italic;
font-size: 16px;
line-height: 1.6;
}
.review-form {
display: flex;
flex-direction: column;
gap: 22px;
}
.review-field-label {
margin: 0 0 -10px;
color: var(--gold-dark);
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
}
.rating-stars {
display: flex;
gap: 6px;
justify-content: flex-start;
}
.rating-star {
width: 48px;
height: 48px;
background: transparent;
border: none;
cursor: pointer;
color: var(--ivory-deep);
font-size: 38px;
line-height: 1;
padding: 0;
transition: transform 0.15s ease, color 0.15s ease;
}
.rating-star:hover {
transform: scale(1.1);
}
.rating-star.is-on {
color: var(--gold);
}
.rating-hint {
margin: -8px 0 0;
font-size: 13px;
font-style: italic;
color: var(--charcoal);
min-height: 18px;
}
.review-input-label {
display: flex;
flex-direction: column;
gap: 6px;
}
.review-input-label > span {
font-family: var(--font-heading);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-dark);
}
.review-input-label > span em {
font-style: italic;
text-transform: none;
letter-spacing: 0;
color: var(--charcoal);
opacity: 0.7;
font-size: 11px;
margin-left: 6px;
}
.review-input-label input,
.review-input-label textarea {
width: 100%;
padding: 12px 14px;
font-family: var(--font-body, Georgia, serif);
font-size: 15px;
color: var(--black);
background-color: var(--ivory-warm, #F4ECDD);
border: 1px solid var(--ivory-deep);
border-radius: 0;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.review-input-label input:focus,
.review-input-label textarea:focus {
outline: none;
border-color: var(--terracotta);
}
.review-input-label textarea {
resize: vertical;
min-height: 130px;
line-height: 1.6;
}
.review-error {
color: var(--terracotta-dark, #8C3E20);
font-size: 13px;
font-style: italic;
margin: -8px 0 0;
}
.review-submit {
align-self: flex-start;
background-color: var(--terracotta);
color: var(--ivory);
border: 1px solid var(--terracotta);
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
padding: 14px 32px;
cursor: pointer;
transition: all 0.25s ease;
}
.review-submit:hover {
background-color: var(--terracotta-dark, #8C3E20);
border-color: var(--terracotta-dark, #8C3E20);
}
.review-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.review-meta {
margin: 0;
font-size: 12px;
color: var(--charcoal);
opacity: 0.7;
}
/* Success state */
.review-success {
text-align: center;
padding: 24px 8px 12px;
}
.review-success-ornament {
font-size: 36px;
color: var(--gold);
display: block;
margin-bottom: 14px;
}
.review-success-title {
font-family: var(--font-heading);
font-size: 28px;
color: var(--black);
margin: 0 0 14px;
letter-spacing: 1.5px;
}
.review-success-text {
color: var(--charcoal);
font-size: 15px;
line-height: 1.7;
max-width: 480px;
margin: 0 auto 26px;
}
.review-success-cta {
display: inline-block;
background-color: var(--black);
color: var(--gold);
padding: 13px 28px;
text-decoration: none;
font-family: var(--font-heading);
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
border: 1px solid var(--black);
transition: all 0.25s ease;
}
.review-success-cta:hover {
background-color: transparent;
color: var(--black);
}
@media (max-width: 600px) {
.review-container { padding: 32px 22px 28px; }
.rating-star { width: 40px; height: 40px; font-size: 32px; }
.reviews-section { padding: 60px 22px 80px; }
}
/* ============================================
Product video (YouTube / Vimeo embed)
============================================ */
/* The 16:9 iframe container — kept as a utility for any inline use */
.pdp-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background-color: #000;
}
.pdp-video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* ===== Video lightbox modal (full-page overlay opened from the gallery thumb) ===== */
/* The [hidden] attribute MUST win over our display:flex below. UA [hidden]{display:none}
has lower specificity than .pdp-video-modal, so we restate it explicitly. */
.pdp-video-modal[hidden] {
display: none !important;
}
.pdp-video-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
transition: opacity 0.22s ease;
}
.pdp-video-modal.is-open {
opacity: 1;
}
.pdp-video-modal-backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
background-color: rgba(13, 13, 13, 0.9);
cursor: zoom-out;
padding: 0;
}
.pdp-video-modal-frame {
position: relative;
width: 100%;
max-width: 1100px;
aspect-ratio: 16 / 9;
background-color: #000;
border: 2px solid var(--gold);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
z-index: 1;
}
.pdp-video-modal-stage {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.pdp-video-modal-stage iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.pdp-video-modal-close {
position: absolute;
top: -52px;
right: 0;
width: 42px;
height: 42px;
background-color: transparent;
color: var(--ivory);
border: 1px solid var(--gold);
font-size: 26px;
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
z-index: 2;
}
.pdp-video-modal-close:hover {
background-color: var(--gold);
color: var(--black);
}
/* Lock background scroll while the lightbox is open */
body.pdp-video-open {
overflow: hidden;
}
@media (max-width: 720px) {
.pdp-video-modal { padding: 12px; }
.pdp-video-modal-close { top: 8px; right: 8px; }
}
/* Video thumbnail (last tile in the strip) — image with a centered play glyph */
.pdp-thumb-video {
position: relative;
}
.pdp-thumb-video img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pdp-thumb-video-fallback {
width: 100%;
height: 100%;
background-color: var(--black);
color: var(--ivory);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
}
.pdp-thumb-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--ivory);
font-size: 22px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
background-color: rgba(13, 13, 13, 0.32);
transition: background-color 0.2s ease;
pointer-events: none;
}
.pdp-thumb-video:hover .pdp-thumb-play,
.pdp-thumb-video.active .pdp-thumb-play {
background-color: rgba(192, 98, 58, 0.55); /* terracotta tint on hover/active */
}