:root {
  --ink: #222222;
  --muted: #7c7772;
  --line: #dedad5;
  --surface: #fffdfb;
  --page: #f5f3ef;
  --brand: #222222;
  --brand-dark: #000000;
  --accent: #8f7f64;
  --soft: #ece8e1;
  --heading-font: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --body-font: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --button-radius: 3px;
  --blue: #56514b;
  --shadow: 0 8px 24px rgba(34, 34, 34, 0.07);
}

body {
  background: var(--page);
  color: var(--ink);
}

.site-header {
  background: rgba(245, 243, 239, 0.92);
  backdrop-filter: blur(18px);
}

.header-inner {
  min-height: 66px;
}

.logo {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.18em;
}

.nav {
  gap: 20px;
}

.nav a,
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-search {
  background: #fffdfb;
  border-radius: 3px;
  min-width: min(260px, 24vw);
}

.hero,
.homepage-hero-section {
  background:
    linear-gradient(90deg, rgba(24, 24, 22, 0.7), rgba(24, 24, 22, 0.12)),
    var(--hero-image, url("../images/pendant-light.png")) center / cover;
}

.hero-inner {
  min-height: 580px;
}

.hero h1,
.section-heading h2,
.collection-hero h1,
.product-detail-content h1 {
  font-weight: 560;
  letter-spacing: 0;
}

.hero .eyebrow {
  color: #ebe4d5;
}

.primary-button,
.checkout-button,
.cart-button,
.secondary-button,
.wishlist-button,
.add-to-cart {
  border-radius: 3px;
  min-height: 40px;
  padding: 10px 14px;
}

.primary-button,
.checkout-button,
.cart-button,
.add-to-cart {
  background: var(--ink);
  color: #ffffff;
}

.primary-button:hover,
.checkout-button:hover,
.add-to-cart:hover {
  background: var(--accent);
}

.secondary-button,
.wishlist-button,
.product-card,
.collection-card,
.product-detail-media,
.product-detail-content,
.checkout-card,
.account-panel,
.wishlist-panel,
.search-panel,
.order-summary,
.checkout-form-panel {
  background: rgba(255, 253, 251, 0.96);
  border-color: var(--line);
  border-radius: 3px;
}

.product-card,
.collection-card,
.review-card,
.delivery-option {
  box-shadow: none;
}

.product-card:hover,
.collection-card:hover {
  border-color: #c7c1b8;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.product-image,
.collection-card img,
.product-detail-media {
  background: var(--soft);
}

.product-badge {
  background: rgba(34, 34, 34, 0.94);
  border-radius: 3px;
  color: #ffffff;
}

.site-footer {
  background: var(--ink);
  color: var(--page);
}