/*
 * EmaParaschivArt — Elite Wabi-Sabi & Japandi Fine Art Gallery Stylesheet
 * Architectural Principles: Organic minimalism, tactile textures, refined typography, responsive frame simulator.
 */

:root {
  /* 1. Palette & Surface Tokens (Wabi-Sabi / Japandi Luxury) */
  --bg-canvas: #FBF9F5;
  --bg-surface: #F2EFE9;
  --bg-card: #F7F5F0;
  --bg-stage: #EFECE6;
  
  --border-micro: #E6E2DD;
  --border-subtle: rgba(28, 27, 25, 0.08);
  --border-medium: rgba(28, 27, 25, 0.16);

  --text-ink: #1C1B19;
  --text-stone: #78736A;
  --text-taupe: #9E9990;
  --text-light: #B4AFA7;

  --accent-terracotta: #C86D51;
  --accent-bronze: #A88348;
  --accent-brass: #BCA05E;

  /* Wood & Finish Grain Tokens */
  --frame-oak: #C8A47E;
  --frame-walnut: #4A3B32;
  --frame-black: #1C1B19;
  --frame-white: #FAF9F6;
  --mat-board: #F7F5EE;

  /* 2. Typography Tokens */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* 3. Diffused Ambient Lighting (No harsh black drop-shadows) */
  --shadow-ambient: 0 20px 50px rgba(28, 27, 25, 0.08);
  --shadow-card: 0 4px 20px rgba(28, 27, 25, 0.04);
  --shadow-card-hover: 0 20px 50px rgba(28, 27, 25, 0.09);
  --shadow-modal: 0 30px 80px -20px rgba(28, 27, 25, 0.22);
  --shadow-frame: 0 20px 48px -12px rgba(28, 27, 25, 0.2), inset 0 1px 2px rgba(255,255,255,0.4);
  --shadow-tactile: 0 2px 8px rgba(28, 27, 25, 0.04);

  /* Radius & Motion */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 9999px;
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-morph: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-canvas);
  color: var(--text-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

/* ==========================================================
   TYPOGRAPHY HIERARCHY
   ========================================================== */
h1, h2, h3, h4, .serif-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--text-ink);
  text-wrap: balance;
}

.text-uppercase-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-stone);
  font-weight: 500;
}

/* ==========================================================
   SITE HEADER & NAVIGATION
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 249, 245, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-micro);
  transition: var(--transition-smooth);
}

.header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-wrapper {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: 0.12em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-ink);
  display: block;
  line-height: 0;
}

/* The logo's flourishes make it tall for its letters, so it needs more height than the old text did.
   Its pale taupe is close to the alabaster header, so it is darkened here only; the footer keeps the original. */
.brand-wordmark {
  display: block;
  height: 72px;
  width: auto;
  max-width: none;
  filter: brightness(0.72);
}

.brand-subtitle {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-stone);
  margin-top: -1px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-link {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-stone);
  font-weight: 500;
  position: relative;
  padding: 4px 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-ink);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text-ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.etsy-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-micro);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ink);
  background: rgba(255, 255, 255, 0.75);
  transition: var(--transition-smooth);
}

.etsy-badge-link:hover {
  background: #FFF;
  border-color: var(--text-ink);
  box-shadow: var(--shadow-tactile);
}

.cart-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--text-ink);
  color: #FAF8F5;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: var(--transition-smooth);
}

.cart-button:hover {
  background: #2E2D2B;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(28, 27, 25, 0.15);
}

.ema-cart-count {
  background: var(--accent-terracotta);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   HERO EDITORIAL SECTION
   ========================================================== */
.hero-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 70px 40px 40px;
}

.hero-quote-block {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 56px;
}

.hero-tagline {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-terracotta);
  font-weight: 600;
  margin-bottom: 20px;
}

.hero-heading {
  font-size: 52px;
  line-height: 1.15;
  font-weight: 300;
  margin-bottom: 24px;
  color: var(--text-ink);
  letter-spacing: -0.01em;
}

.hero-heading em {
  font-style: italic;
  font-family: var(--font-serif);
}

.hero-description {
  font-size: 16px;
  color: var(--text-stone);
  max-width: 660px;
  margin: 0 auto;
  font-weight: 300;
  line-height: 1.85;
  text-wrap: pretty;
}

/* Category Filter Bar */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-micro);
}

.filter-chip {
  padding: 8px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-micro);
  background: transparent;
  color: var(--text-stone);
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: var(--transition-smooth);
  font-family: var(--font-sans);
  font-weight: 400;
}

.filter-chip:hover {
  border-color: var(--text-stone);
  color: var(--text-ink);
  background: rgba(255, 255, 255, 0.5);
}

.filter-chip.active {
  background: var(--text-ink);
  color: #FAF8F5;
  border-color: var(--text-ink);
  box-shadow: 0 2px 8px rgba(28, 27, 25, 0.12);
}

.gallery-stats {
  text-align: center;
  font-size: 11px;
  color: var(--text-stone);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 40px;
}

/* ==========================================================
   IMMERSIVE FULL-BLEED GALLERY GRID & ARTWORK CARDS
   ========================================================== */
/* Form controls do not inherit type by default. */
button {
  font-family: inherit;
}

.gallery-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  background-color: var(--bg-canvas);
  scroll-margin-top: 122px;
}

/* Breathable masonry: each work keeps its own proportions. */
.artworks-grid {
  column-count: 3;
  column-gap: 64px;
  margin-bottom: 100px;
}

.artwork-card {
  position: relative;
  break-inside: avoid;
  margin-bottom: 64px;
}

@media (max-width: 1100px) {
  .artworks-grid {
    column-count: 2;
  }
}

@media (max-width: 700px) {
  .artworks-grid {
    column-count: 1;
    column-gap: 32px;
  }

  .artwork-card {
    margin-bottom: 32px;
  }
}

.artwork-media-wrap {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.artwork-thumbnail-container {
  position: relative;
  transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1), background-color 0.7s ease;
}

.artwork-card:hover .artwork-thumbnail-container {
  transform: scale(1.03);
}

/* Separate rules: a browser without :has() must keep the hover states above. */
.artwork-card:has(:focus-visible) .artwork-thumbnail-container {
  transform: scale(1.03);
}

.artwork-card.is-room-view .artwork-thumbnail-container {
  transform: scale(1.03);
}

.artwork-img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.7s cubic-bezier(0, 0, 0.2, 1), filter 0.7s cubic-bezier(0, 0, 0.2, 1);
}

/* Curtain reveal: lazy images resolve from a soft blur instead of snapping in. */
.artwork-thumbnail-container.is-curtained {
  background-color: var(--bg-surface);
}

.artwork-thumbnail-container.is-curtained .artwork-img {
  opacity: 0;
  filter: blur(14px);
}

/* In-room crossfade, built on first hover by gallery-animations.js. */
.artwork-room-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.artwork-card:hover .artwork-room-preview.is-ready {
  opacity: 1;
}

.artwork-card:has(:focus-visible) .artwork-room-preview.is-ready {
  opacity: 1;
}

.artwork-card.is-room-view .artwork-room-preview.is-ready {
  opacity: 1;
}

.artwork-room-stage {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 1200 / 896;
}

.artwork-room-stage.is-wide {
  left: 0;
  width: 100%;
  height: auto;
}

.artwork-room-photo {
  display: block;
  width: 100%;
  height: 100%;
}

.artwork-room-art {
  position: absolute;
  height: auto;
  box-shadow: 0 10px 24px -6px rgba(28, 27, 25, 0.35);
}

.artwork-card-actions {
  position: absolute;
  bottom: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: var(--transition-smooth);
  pointer-events: none;
}

.artwork-card:hover .artwork-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.artwork-card:has(:focus-visible) .artwork-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.btn-quick-config {
  width: 100%;
  max-width: 240px;
  padding: 10px 18px;
  background: rgba(251, 249, 245, 0.94);
  backdrop-filter: blur(10px);
  color: var(--text-ink);
  border: 1px solid var(--border-micro);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-align: center;
  box-shadow: 0 4px 16px rgba(28, 27, 25, 0.08);
}

.btn-quick-config:hover {
  background: var(--text-ink);
  color: #FAF8F5;
  border-color: var(--text-ink);
  box-shadow: 0 6px 20px rgba(28, 27, 25, 0.2);
}

.artwork-title {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.025em;
  color: var(--text-ink);
}

.artwork-categories {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #78736A;
  font-weight: 500;
}

.artwork-pricing-tiers {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: var(--text-ink);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   INTERACTIVE FRAME CONFIGURATOR ISLAND & MODAL
   ========================================================== */
.configurator-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.configurator-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 25, 0.45);
  backdrop-filter: blur(12px);
}

.configurator-modal-content {
  position: relative;
  z-index: 2;
  background: var(--bg-canvas);
  border: 1px solid var(--border-micro);
  border-radius: var(--radius-lg);
  max-width: 1160px;
  width: 95%;
  height: min(700px, 92vh);
  overflow: hidden;
  box-shadow: var(--shadow-modal);
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: minmax(0, 1fr);
}

.btn-close-modal {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-micro);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--text-stone);
  cursor: pointer;
  z-index: 10;
  transition: var(--transition-smooth);
}

.btn-close-modal:hover {
  background: #FFF;
  color: var(--text-ink);
  border-color: var(--text-ink);
}

/* Configurator Preview Stage */
.configurator-stage {
  background: var(--bg-surface);
  padding: 64px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  container-type: size;
}

/* Floating View Toggle Capsule */
.stage-view-toggles {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(250, 247, 242, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-micro);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 16px rgba(28, 27, 25, 0.05);
  z-index: 5;
}

.view-toggle-btn {
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-stone);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.view-toggle-btn.active {
  background: var(--text-ink);
  color: #FAF8F5;
  box-shadow: 0 2px 8px rgba(28, 27, 25, 0.15);
}

/* Real-Time Studio Frame Visualizer */
.artwork-frame-visualizer {
  /* One studio pixel: the largest size (345 × 510 with its frame) always fits the stage. */
  --studio-unit: min(0.96px, calc(100cqh / 510), calc(100cqw / 345));
  position: relative;
  flex: none;
  max-width: 92%;
  transition: var(--transition-morph);
  box-shadow: var(--shadow-frame);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Hardwood Frame Moldings with Realistic Multi-Layer Grain Gradients */
.artwork-frame-visualizer.frame-oak {
  background-color: var(--frame-oak);
  border: 16px solid var(--frame-oak);
  border-image: linear-gradient(135deg, #e4cbb4 0%, #be9368 35%, #d8b894 70%, #9a734e 100%) 16;
  box-shadow: 0 24px 56px -12px rgba(28, 27, 25, 0.22), inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.25);
}

.artwork-frame-visualizer.frame-walnut {
  background-color: var(--frame-walnut);
  border: 16px solid var(--frame-walnut);
  border-image: linear-gradient(135deg, #6b5549 0%, #382921 35%, #5a4437 70%, #2b1f19 100%) 16;
  box-shadow: 0 24px 56px -12px rgba(28, 27, 25, 0.32), inset 0 2px 4px rgba(255,255,255,0.25), inset 0 -2px 4px rgba(0,0,0,0.45);
}

.artwork-frame-visualizer.frame-black {
  background-color: var(--frame-black);
  border: 16px solid var(--frame-black);
  border-image: linear-gradient(135deg, #2e2c2b 0%, #151413 35%, #242322 70%, #111110 100%) 16;
  box-shadow: 0 24px 56px -12px rgba(28, 27, 25, 0.35), inset 0 1px 2px rgba(255,255,255,0.18);
}

.artwork-frame-visualizer.frame-white {
  background-color: var(--frame-white);
  border: 16px solid var(--frame-white);
  border-image: linear-gradient(135deg, #ffffff 0%, #ede9e3 35%, #faf9f6 70%, #dedbd4 100%) 16;
  box-shadow: 0 20px 48px -12px rgba(28, 27, 25, 0.14), inset 0 2px 4px rgba(255,255,255,0.8), inset 0 -1px 3px rgba(0,0,0,0.08);
}

.artwork-frame-visualizer.frame-brass {
  border: 14px solid var(--accent-brass);
  border-image: linear-gradient(135deg, #f7e4a8 0%, #b8933b 35%, #fcebb5 70%, #8f6c1e 100%) 14;
  box-shadow: 0 24px 56px -12px rgba(28, 27, 25, 0.28), inset 0 2px 4px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.35);
}

.artwork-frame-visualizer.frame-none {
  border: none;
  box-shadow: 0 16px 40px -10px rgba(28, 27, 25, 0.18);
}

/* Archival Passe-Partout Mat */
.mat-board-layer {
  width: 100%;
  overflow: hidden;
  padding: 24px;
  background-color: var(--mat-board);
  box-shadow: inset 0 2px 5px rgba(28, 27, 25, 0.1), inset 0 0 1px rgba(28, 27, 25, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.mat-board-layer.no-mat {
  padding: 0;
  box-shadow: none;
}

.framed-artwork-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mat-board-layer:not(.no-mat) .framed-artwork-image {
  box-shadow: 0 1px 4px rgba(28, 27, 25, 0.12);
}

/* ==========================================================
   IN-ROOM WALL SCALE SIMULATOR (183CM BED DATUM)
   ========================================================== */
/* The photo covers the whole stage like object-fit: cover, but stays one 1200 / 896 box,
   so a percentage of #wallStage is still a fixed physical distance. */
.room-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}

.wall-scale-stage {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: max(100cqw, calc(100cqh * 1200 / 896));
  aspect-ratio: 1200 / 896;
  transform: translateX(-50%);
  background: #EBE7DE url('../images/japandi-bedroom-wall.jpg') center bottom / cover no-repeat;
}

.wall-scale-stage.active {
  display: block;
  animation: stageFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes stageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.wall-ruler-metric {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-stone);
  background: rgba(250, 247, 242, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-micro);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(28, 27, 25, 0.06);
  z-index: 5;
  white-space: nowrap;
}

/* gallery-interactions.css sets label type with !important; the pill must share the row with the toggle. */
.configurator-stage .wall-ruler-metric {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

.wall-sofa-silhouette {
  display: none;
}

.wall-artwork-scaler {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 22px 48px -8px rgba(28, 27, 25, 0.45), 0 6px 16px rgba(28, 27, 25, 0.22);
  overflow: hidden;
  border-radius: 1px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wall-artwork-mat-inner {
  width: 100%;
  flex: none;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAF8F5;
  box-shadow: inset 0 1px 3px rgba(28, 27, 25, 0.12);
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.wall-artwork-mat-inner.no-mat {
  padding: 0;
  box-shadow: none;
}

.wall-artwork-scaler img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================
   CONFIGURATOR CONTROLS SIDEBAR & TACTILE SELECTION CARDS
   ========================================================== */
.configurator-controls {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--bg-canvas);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.config-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.config-craft-badge {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(184, 93, 67, 0.1);
  color: #A34E37;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.frame-upsell {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-micro);
  border-radius: var(--radius-sm);
  background: var(--bg-stage);
  color: var(--text-ink);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.frame-upsell:hover {
  border-color: var(--text-ink);
}

.frame-upsell[hidden] {
  display: none;
}

.config-header {
  border-bottom: 1px solid var(--border-micro);
  padding-bottom: 18px;
}

.config-product-title {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.2;
  margin-top: 4px;
  margin-bottom: 8px;
  color: var(--text-ink);
}

.config-price-display {
  font-size: 26px;
  font-weight: 500;
  color: var(--text-ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.config-price-note {
  font-size: 12px;
  color: var(--text-stone);
  font-weight: 400;
}

.config-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-selection-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-ink);
}

/* Tactile Selection Cards with Ring Highlights */
.pills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.pill-btn {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-micro);
  background: var(--bg-card);
  color: var(--text-ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pill-btn:hover {
  border-color: var(--text-stone);
  background: #FFF;
  transform: translateY(-1px);
}

.pill-btn.active {
  border-color: var(--text-ink);
  box-shadow: 0 0 0 1px var(--text-ink), 0 4px 12px rgba(28, 27, 25, 0.05);
  background: #FFF;
  color: var(--text-ink);
}

.pill-subtext {
  font-size: 10px;
  color: var(--text-stone);
}

/* Wood Finish Swatches */
.frame-swatches {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.swatch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}

.swatch-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  box-shadow: 0 2px 6px rgba(28, 27, 25, 0.15);
}

.swatch-btn:hover .swatch-circle {
  transform: scale(1.06);
}

.swatch-btn.active .swatch-circle {
  box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--text-ink);
  transform: scale(1.08);
}

.swatch-fill {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}

.swatch-fill.oak { background: linear-gradient(135deg, #e4cbb4 0%, #be9368 50%, #a87d52 100%); }
.swatch-fill.walnut { background: linear-gradient(135deg, #6b5549 0%, #382921 50%, #2d211a 100%); }
.swatch-fill.black { background: linear-gradient(135deg, #2e2c2b 0%, #151413 50%, #242322 100%); }
.swatch-fill.white { background: linear-gradient(135deg, #ffffff 0%, #ede9e3 50%, #dedbd4 100%); border: 1px solid #D5D1C8; }
.swatch-fill.brass { background: linear-gradient(135deg, #f7e4a8 0%, #b8933b 50%, #8f6c1e 100%); }
.swatch-fill.none { background: repeating-linear-gradient(45deg, #eee, #eee 3px, #fff 3px, #fff 6px); }

.swatch-label {
  font-size: 11px;
  color: var(--text-stone);
}

/* Mat Toggle Switch */
.mat-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-micro);
}

.switch-label {
  font-size: 13px;
  color: var(--text-ink);
}

.switch-input {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--text-ink);
}

/* Action Area */
.config-action-row {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.btn-add-curation {
  width: 100%;
  padding: 17px;
  background: var(--text-ink);
  color: #FAF8F5;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.btn-add-curation:hover {
  background: #2E2D2B;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(28, 27, 25, 0.18);
}

.btn-add-curation.loading {
  opacity: 0.8;
  animation: buttonPulse 1.2s infinite ease-in-out;
  pointer-events: none;
}

@keyframes buttonPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.99); }
}

.craftsmanship-callouts {
  font-size: 11px;
  color: var(--text-stone);
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.5;
}

.callout-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ==========================================================
   ARCHIVAL SHOPPING BAG DRAWER (SLIDE-OUT MANIFEST)
   ========================================================== */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.cart-drawer-overlay.active {
  visibility: visible;
  opacity: 1;
}

.cart-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 25, 0.32);
  backdrop-filter: blur(8px);
}

.cart-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 90vw;
  background: var(--bg-canvas);
  box-shadow: -12px 0 40px rgba(28, 27, 25, 0.15);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.cart-drawer-overlay.active .cart-drawer-panel {
  transform: translateX(0);
}

.cart-drawer-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border-micro);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-drawer-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--text-ink);
  margin-top: 2px;
}

.btn-close-drawer {
  background: none;
  border: 1px solid var(--border-micro);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--text-stone);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-close-drawer:hover {
  background: #FFF;
  color: var(--text-ink);
  border-color: var(--text-ink);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.cart-drawer-empty {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.empty-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-stone);
  margin-bottom: 6px;
}

.empty-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
}

.empty-text {
  font-size: 13px;
  color: var(--text-stone);
  max-width: 260px;
  line-height: 1.6;
}

.btn-drawer-explore {
  margin-top: 12px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-micro);
  background: var(--text-ink);
  color: #FAF8F5;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-drawer-explore:hover {
  background: #333;
}

.cart-drawer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cart-drawer-item {
  display: flex;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-micro);
}

.cart-item-thumb {
  width: 72px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-stage);
  flex-shrink: 0;
}

.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-item-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-ink);
}

.cart-item-specs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-stone);
  margin-top: 4px;
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
}

.cart-item-price {
  font-weight: 600;
  color: var(--text-ink);
  font-variant-numeric: tabular-nums;
}

.btn-remove-item {
  background: none;
  border: none;
  color: var(--accent-terracotta);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}

.cart-drawer-footer {
  padding: 24px 28px 28px;
  border-top: 1px solid var(--border-micro);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
}

.subtotal-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-stone);
}

.subtotal-amount {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-ink);
  font-variant-numeric: tabular-nums;
}

.cart-drawer-note {
  font-size: 11px;
  color: var(--text-stone);
  line-height: 1.5;
}

.btn-checkout-drawer {
  width: 100%;
  padding: 16px;
  background: var(--text-ink);
  color: #FAF8F5;
  border-radius: var(--radius-sm);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition-smooth);
}

.btn-checkout-drawer:hover {
  background: var(--accent-terracotta);
  box-shadow: 0 4px 16px rgba(200, 109, 81, 0.25);
  transform: translateY(-1px);
}

.btn-view-cart-link {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-stone);
}

.btn-view-cart-link:hover {
  color: var(--text-ink);
  text-decoration: underline;
}

/* ==========================================================
   CRAFTSMANSHIP & ATELIER PHILOSOPHY SECTION
   ========================================================== */
.craftsmanship-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-micro);
  border-bottom: 1px solid var(--border-micro);
  padding: 90px 40px;
}

.craftsmanship-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px;
}

.craft-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.craft-number {
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--accent-terracotta);
}

.craft-title {
  font-size: 19px;
  font-weight: 500;
}

.craft-body {
  font-size: 14px;
  color: var(--text-stone);
  line-height: 1.8;
  text-wrap: pretty;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
  background: #141312;
  color: #C8C4BC;
  padding: 90px 40px 40px;
  font-size: 13px;
}

.footer-container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 64px;
  margin-bottom: 70px;
}

.footer-brand-title {
  font-family: var(--font-serif);
  font-size: 30px;
  color: #FAF8F5;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.footer-wordmark {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
}

.footer-desc {
  max-width: 320px;
  color: #8C8880;
  line-height: 1.75;
}

.footer-col-title {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FAF8F5;
  font-weight: 600;
  margin-bottom: 22px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a:hover {
  color: #FAF8F5;
}

.footer-bottom {
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6B6760;
  font-size: 12px;
}

/* ==========================================================
   RESPONSIVE LAYOUT
   ========================================================== */
@media (max-width: 900px) {
  .header-container { padding: 8px 16px; gap: 10px; }
  .header-nav { display: none; }
  .brand-title { font-size: 18px; letter-spacing: 0.08em; white-space: nowrap; }
  .brand-wordmark { height: 46px; }
  .brand-subtitle { display: none; }
  .header-actions { gap: 8px; }
  .etsy-badge-link { padding: 6px 10px; font-size: 10px; white-space: nowrap; }
  .etsy-badge-link svg { width: 12px; height: 12px; }
  .cart-button { padding: 6px 12px; font-size: 10px; }

  .craftsmanship-container { grid-template-columns: 1fr; gap: 36px; }
  .footer-container { grid-template-columns: 1fr; gap: 40px; }
  .hero-heading { font-size: 34px; }
  .hero-section { padding: 44px 16px 24px; }
  .gallery-container { padding: 0 16px; }
  .cart-drawer-panel { width: 100%; max-width: 100vw; }
}

/* Below lg the preview stays locked to the top while only the controls scroll. */
@media (max-width: 1023px) {
  .configurator-modal-content {
    grid-template-columns: 1fr;
    grid-template-rows: 44vh 56vh;
    grid-template-rows: 44dvh 56dvh;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border: none;
    border-radius: 0;
  }
  .configurator-stage {
    padding: 58px 16px 12px;
    border-bottom: 1px solid var(--border-micro);
  }
  .btn-close-modal {
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.92);
    width: 34px;
    height: 34px;
    font-size: 20px;
  }
  .stage-view-toggles {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 64px);
  }
  .view-toggle-btn {
    font-size: 10px;
    padding: 5px 10px;
    white-space: nowrap;
  }
  .wall-ruler-metric {
    top: 54px;
    left: 12px;
    right: auto;
    padding: 3px 9px;
  }
  .configurator-stage .wall-ruler-metric {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
  }
  .configurator-stage:not(.is-room) .wall-ruler-metric {
    display: none;
  }
  .configurator-controls {
    padding: 22px 20px 36px;
  }
}

@media (max-width: 480px) {
  .view-toggle-btn {
    font-size: 9px;
    padding: 5px 8px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 360px), (max-height: 700px) and (max-width: 1023px) {
  .metric-prefix {
    display: none;
  }
}

/* On the shortest phones the top corner would touch the largest frame. */
@media (max-height: 700px) and (max-width: 1023px) {
  .wall-ruler-metric {
    top: auto;
    bottom: 10px;
  }
}

/* The header overflows below this width, so Etsy keeps only its icon. */
@media (max-width: 360px) {
  .etsy-badge-link {
    gap: 0;
    font-size: 0;
  }
}