:root {
  /* Lighter weight scale for an elegant, airy look. If your font doesn't include 200, the browser will synthesize — test and adjust if needed. */
  /* Use 300 as the light headline target (safe across many fonts) */
  --weight-light: 200;
  --weight-regular: 200;
  --weight-medium: 400;
  --weight-bold: 600;
  --weight-black: 700;

  /* Slight, neutral background tweaks to harmonize content surfaces */
  --background-color: #FBFBFA; /* creamy off-white */
  --content-bg: #FFFFFF; /* keep content panels clean and bright */

  /* Text palette (so lighter weights don't read faint) */
  --text-color-dark: #0f1724; /* nearly black but warmer */
  --text-color-primary: #1f2937; /* main body text */
  --text-color-secondary: #6b7280; /* muted text */

  /* Accent & CTA */
  --accent-color: #6b4c3a; /* warm, earthy accent */
  --cta-bg: var(--accent-color);
  --cta-color: #ffffff;
}

/* Global body adjustments */
/* Neutral button baseline for submit and option links */
.submit-button,
.drawer-option-link {
  font-weight: var(--weight-medium);
  color: var(--text-color-dark); /* Dark font */
}

/* Active (click) state */
.submit-button:active,
.drawer-option-link:active {
  color: var(--text-color-secondary); /* Lighten font color on click */
}

/* Focus styles for accessibility */
button:focus,
.drawer-option-link:focus,
.submit-button:focus {
  outline: 3px solid rgba(99,102,241,0.12);
  outline-offset: 2px;
}

/* Make subheads a touch lighter for visual hierarchy */
h4, h5, h6 {
  font-weight: var(--weight-light);
}

/* Listing title and CTAs on the listing page */
.purchase-button-wrapper .listing-title {
  font-weight: var(--weight-light);
  margin-bottom: 0.25rem;
}

/* Specific rule to ensure the main purchase button is right-aligned */
.purchase-action-btn {
    margin-left: auto;
}

/* Price / summary emphasis */
.option-price,
#total-amount {
  font-weight: var(--weight-bold);
  font-size: 1.125rem;
  color: var(--text-color-dark);
}

/* Product gallery image safety */
.product-gallery-section .product-gallery-main-viewer img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Soften content frame and standardize card surfaces */
.content-frame {
  max-width: 980px; /* slightly wider for breathing room */
  background: var(--content-bg);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(15,23,36,0.06);
}

.card {
  background: var(--content-bg);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(15,23,36,0.04);
  border: 1px solid rgba(15,23,36,0.03);
}

/* Product gallery thumbnails: spacing and active state */
.product-gallery-thumbnails {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  overflow-x: auto;
}

.product-gallery-thumbnails .thumbnail-item {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  border: 1px solid rgba(15,23,36,0.04);
  background: #fff;
}

.product-gallery-thumbnails .thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-gallery-thumbnails .thumbnail-item.active,
.product-gallery-thumbnails .thumbnail-item:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 18px rgba(15,23,36,0.08);
  border-color: rgba(107,76,58,0.15);
}

/* Make the main viewer image slightly rounded */
.product-gallery-section .product-gallery-main-viewer img {
  border-radius: 10px;
}

/* SCOPED: Make grids more fluid/responsive, but only on the fabrication page to prevent conflicts. */
.page-fabrication .content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

/* Purchase drawer surface refinements */
.purchase-drawer {
  background: var(--content-bg);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -12px 40px rgba(15,23,36,0.12);
  padding: 18px;
}

/* Drawer Title: Use Avril Fatface for consistency with other major headings */
.drawer-title {
    font-family: 'Avril Fatface', sans-serif;
    font-size: clamp(1.4rem, 1.2rem + 2vw, 2rem); /* Responsive size */
    font-weight: var(--weight-light);
    line-height: 1.1;
    color: var(--text-color-dark);
}

/* Drawer Excerpt/Description: Use serif for readability with a slightly larger size */
.drawer-excerpt, .drawer-body .text-body {
    font-family: 'Source Serif Pro', serif;
    font-size: 1.05rem;
    line-height: 1.65;
}
/* Drawer header subtitle and notes */
.drawer-header-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.drawer-subtitle {
  font-size: 0.9rem;
  color: var(--text-color-secondary);
  margin-top: 6px;
  margin-bottom: 8px;
}
.drawer-note {
  font-size: 0.95rem;
  color: var(--text-color-primary);
  background: rgba(15,23,36,0.02);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.drawer-footer {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-color-secondary);
  text-align: center;
}

/* Make close button minimal: only the × character visible, no heavy container */
.drawer-close-btn {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-color-primary);
  padding: 0;
  margin: 0;
  box-shadow: none;
  cursor: pointer;
}
.drawer-close-btn:hover { color: var(--text-color-dark); }

/* Small helper to make headings breathe more when light-weight */
.site-title, h1 {
  letter-spacing: -0.01em;
}

/* Utility classes for quick, targeted overrides */
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.text-strong { font-weight: var(--weight-medium) !important; }
.mt-tight { margin-top: calc(var(--space-xs) / 2) !important; }
.mb-loose { margin-bottom: var(--space-md) !important; }

/* Small-screen readability safeguard: boost body weight on tiny screens */
@media (max-width: 480px) {
  body, p { font-weight: 400; }
}

/* Improve paragraph rhythm for reading on larger screens */
@media (min-width: 520px) {
  p.paragraph, .text-block p { line-height: 1.65; font-size: 1rem; }
}

/* Ensure popover and inline small UI remain legible */
.inline-nav-popover { font-size: 15px; line-height: 1.45; }

/* --- Micro-typography and spacing refinements (desktop & mobile) --- */
html { font-size: 16px; }
body {
  font-family: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  color: var(--text-color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading scale: light, editorial feel */
h1 {
  font-family: 'Avril', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(1.6rem, 1.4rem + 2.6vw, 2.6rem);
  line-height: 1.05;
  margin-bottom: 0.45rem;
}
h2 {
  font-family: 'Avril', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(1.25rem, 1.1rem + 1.8vw, 1.6rem);
  line-height: 1.12;
  margin-bottom: 0.5rem;
}
h3 { font-weight: 200; font-size: 1.05rem; line-height:1.2; margin-bottom:0.5rem; }

/* Section header spacing */
.section-header { margin-bottom: 1.1rem; }
.section-title { margin-top: 0; margin-bottom: 0.35rem; }
.section-subtitle { margin-top: 0; margin-bottom: 0.75rem; color: var(--text-color-secondary); }

/* Paragraph rhythm */
p, .paragraph { margin-bottom: 1.05rem; font-size: 1rem; }

/* Tighten image related spacing inside text flow */
.text-block { margin-bottom: 1.2rem; }
.image-container-link { display: block; margin: 1rem 0; }

/* See-also smaller, lighter */
.inline-see-also { font-size: 13px; color: var(--text-color-secondary); margin-top: 6px; }

/* Mobile adjustments: increase base size slightly for legibility, keep headings readable */
@media (max-width: 520px) {
  html { font-size: 16px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.125rem; }
  p, .paragraph { font-size: 1rem; line-height: 1.5; }
  .section-header { margin-bottom: 0.8rem; }
}