/* ==========================================================================
   Maison Char — shared stylesheet
   ========================================================================== */

:root {
  --gold: #ce8491;
  --gold-dark: #a86c76;
  --brand: #ce8491;
  --brand-dark: #a86c76;
  --logo-cream: #fee8d0;
  --cream: #faf7f2;
  --cream-dark: #f0e9df;
  --ink: #3a3436;
  --ink-soft: #6e6567;
  --line: #e4dcd0;
  --white: #ffffff;
  --danger: #a8453a;
  --radius: 2px;
  --shadow: 0 10px 30px rgba(43, 38, 34, 0.08);
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; color: var(--ink-soft); }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--brand);
  color: var(--logo-cream);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  position: sticky;
  top: 0;
  /* Needs to comfortably beat third-party embeds (e.g. the PayPal button
     iframe on checkout.html), which can render with their own stacking
     order that ignores the rest of the page — 50 wasn't high enough and
     let the PayPal buttons visually sit on top of the header while
     scrolling. Kept below .lightbox's z-index (200), which should always
     be the topmost layer on the page. */
  z-index: 150;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
}

.logo span { color: var(--gold); }

.logo-img {
  height: 72px;
  width: 72px;
  border-radius: 10px;
  display: block;
}

.footer-logo-img {
  height: 92px;
  width: 92px;
}

.main-nav {
  display: flex;
  gap: 22px;
  align-items: center;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--logo-cream);
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.main-nav a:hover, .main-nav a.active { color: var(--ink); opacity: 1; }

/* ---------- Shop nav dropdown ---------- */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-caret {
  display: inline-block;
  margin-left: 5px;
  font-size: 1.6em;
  line-height: 0.6;
  vertical-align: -0.12em;
  transition: transform 0.15s ease;
}

.nav-item:hover .nav-caret,
.nav-item.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 60;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav .nav-dropdown a {
  display: block;
  padding: 10px 20px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}

.main-nav .nav-dropdown a:hover,
.main-nav .nav-dropdown a.active {
  background: var(--cream-dark);
  color: var(--gold-dark);
  opacity: 1;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cart-link {
  position: relative;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-count {
  background: var(--ink);
  color: var(--logo-cream);
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 920px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a {
    width: 100%;
    padding: 14px 24px;
    border-top: 1px solid var(--line);
    /* The dropdown sits on a cream background (not the pink header bar),
       so it needs its own legible colours rather than the header's cream
       nav-link text. */
    color: var(--ink-soft);
    opacity: 1;
  }
  .main-nav a:hover, .main-nav a.active { color: var(--gold-dark); }
  .nav-toggle { display: block; }

  .nav-item {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-item > a {
    width: 100%;
    padding: 14px 24px;
    border-top: 1px solid var(--line);
  }
  .nav-dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    background: var(--cream-dark);
    padding: 0;
    min-width: 0;
  }
  .nav-item.open .nav-dropdown { display: block; }
  .main-nav .nav-dropdown a {
    padding: 12px 24px 12px 40px;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  color: var(--ink);
}

.btn-primary {
  background: var(--ink);
  color: var(--cream);
}

.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

.btn-outline:hover { background: var(--ink); color: var(--cream); }

.btn-gold {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}

.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

.btn-block { width: 100%; text-align: center; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Hero ---------- */
/* Shared by every page's intro section (home, about, custom) — plain
   cream-gradient background by default. The homepage additionally gets the
   `.hero-photo` modifier below, which layers a real photo behind the text. */
.hero {
  background: linear-gradient(135deg, var(--cream-dark), var(--cream));
  padding: 90px 0;
  text-align: center;
}

.hero .eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  max-width: 720px;
  margin: 0 auto 20px;
}

.hero p {
  max-width: 520px;
  margin: 0 auto 32px;
  font-size: 1.05rem;
}

/* Homepage-only: a real photo sits behind the hero text as a full-bleed
   background — a ::before layer for the photo and a ::after layer for a
   dark scrim on top of it, so the heading/copy/buttons stay readable over
   any part of the image. Both are behind the content via negative z-index;
   `isolation: isolate` keeps that stacking context contained to this
   section, and the plain `.hero .eyebrow/h1/p` colours above are
   overridden here for contrast against the photo. */
.hero-photo {
  position: relative;
  background: none;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
}

.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/hero-ring-pendant.jpg') center 40% / cover no-repeat;
  z-index: -2;
}

.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58, 52, 54, 0.6), rgba(58, 52, 54, 0.78));
  z-index: -1;
}

.hero-photo .eyebrow { color: var(--logo-cream); }

.hero-photo h1 { color: #fff; }

.hero-photo p { color: var(--cream); }

.hero-photo .btn-outline {
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}

/* ---------- Checkout flow breadcrumb (Cart / Checkout / Confirmation) ---------- */
.checkout-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.checkout-breadcrumb .cb-step {
  color: var(--ink-soft, #8a8285);
  letter-spacing: 0.02em;
}

.checkout-breadcrumb .cb-step.is-current {
  color: var(--gold-dark);
  font-weight: 600;
}

.checkout-breadcrumb .cb-step.is-done {
  color: var(--ink);
}

.checkout-breadcrumb .cb-sep {
  color: var(--ink-soft, #ccc2b8);
}


.section {
  padding: 72px 0;
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

.section-head .eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

/* ---------- Category tiles ---------- */
.categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 520px;
  margin: 0 auto;
}

.category-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 32px 16px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.category-card .icon { width: 56px; height: 56px; margin: 0 auto 14px; }

.category-card .icon.has-photo {
  width: 140px;
  height: 140px;
}

.category-card .icon.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.category-card h3 { font-size: 1.05rem; margin-bottom: 4px; }

.category-card span {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 480px) {
  .categories { grid-template-columns: 1fr; max-width: 280px; }
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

@media (max-width: 980px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

.shop-layout .product-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px) {
  .shop-layout .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .shop-layout .product-grid { grid-template-columns: 1fr; }
}

.product-card {
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.product-media {
  aspect-ratio: 1 / 1;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.product-media svg { width: 100%; height: 100%; }

/* A real photo fills the box edge-to-edge instead of sitting in the
   generated icons' padded "mat" — applied wherever a product has at least
   one photo (see getProductImages() in js/svg-icons.js). */
.product-media.has-photo,
.pd-media.has-photo,
.cart-item-thumb.has-photo {
  padding: 0;
}

.product-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.product-cat {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
}

.product-name { font-size: 1.02rem; font-family: var(--serif); }

.product-price {
  font-weight: 600;
  color: var(--ink);
  margin-top: auto;
  font-size: 1rem;
}

.product-body .btn { margin-top: 12px; }

/* ---------- Shop filters (faceted) ---------- */
.shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 44px;
  align-items: start;
}

.filter-panel {
  position: sticky;
  top: 96px;
}

.filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.filter-clear {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-dark);
  cursor: pointer;
}

.filter-group {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.filter-group:first-of-type { padding-top: 4px; }

.filter-group h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
  margin-bottom: 12px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
}

.filter-option input {
  accent-color: var(--gold-dark);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.filter-option:hover { color: var(--ink); }

.filter-toggle {
  display: none;
  width: 100%;
  margin-bottom: 20px;
}

.active-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.active-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 0.76rem;
  color: var(--ink);
}

.active-pill button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

.sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.results-count {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.sort-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.sort-select {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 7px 30px 7px 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a86c76' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Toolbar controls that only exist on phones (hidden on desktop). */
.filter-toggle,
.filter-close,
.filter-apply,
.filter-overlay { display: none; }

.filter-head-actions { display: flex; align-items: center; gap: 16px; }
.sort-controls { display: flex; align-items: center; gap: 12px; }
.no-scroll { overflow: hidden; }

@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; }

  /* One compact toolbar: [Filters] [Sort by ...], stuck under the header while
     scrolling the products, with the piece count just below it. The sort row
     is dissolved (display: contents) so its two parts can be ordered and the
     toolbar can stick within the whole results column. */
  .shop-results { display: flex; flex-direction: column; }
  .sort-row { display: contents; }
  .active-pills { order: 0; margin-bottom: 4px; }
  .active-pills:empty { display: none; }
  .sort-controls {
    order: 1;
    position: sticky;
    top: 65px;
    z-index: 100;
    gap: 10px;
    padding: 8px 0;
    background: var(--cream);
  }
  .results-count { order: 2; margin: 4px 0 14px; }
  #shop-grid { order: 3; }
  .filter-toggle {
    display: block;
    flex: 1;
    width: auto;
    margin: 0;
    height: 40px;
    padding: 0 12px;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .sort-select-wrap { flex: 1; min-width: 0; }
  .sort-select { flex: 1; min-width: 0; width: 100%; height: 40px; padding-top: 0; padding-bottom: 0; }
  .sort-label { white-space: nowrap; }

  /* Filters become a bottom drawer over the page. */
  .filter-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 180;
    display: block;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--white);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    padding: 0;
    margin: 0;
    box-shadow: 0 -12px 32px rgba(43, 38, 34, 0.18);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .filter-panel.open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
  }
  .filter-panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 16px 20px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
  }
  #filter-groups { padding: 4px 20px 0; }
  .filter-close {
    display: block;
    background: none;
    border: 0;
    padding: 0 2px;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
  }
  .filter-apply {
    display: block;
    position: sticky;
    bottom: 0;
    padding: 12px 20px 18px;
    background: var(--white);
    border-top: 1px solid var(--line);
  }
  .filter-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 170;
    background: rgba(43, 38, 34, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .filter-overlay.open { opacity: 1; pointer-events: auto; }
}

/* ---------- Theme showcase (The Maker's Pendant — homepage + picker) ---------- */
/* Column count matches PENDANT_THEMES.length (js/pendant.js) — currently
   3 (Relic, Sol, Tide) since Bloom was removed before launch. If Bloom (or
   any other theme) is added back, bump this to match, or the row will
   leave an empty trailing column instead of filling/centering evenly. */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .theme-grid { grid-template-columns: repeat(1, 1fr); }
}

.theme-card {
  position: relative;
  padding: 28px 18px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 2px solid transparent;
}

.theme-card:hover { transform: translateY(-4px); }

.theme-card.selected { border-color: var(--ink); box-shadow: var(--shadow); }

.theme-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 2px; position: relative; z-index: 2; }

.theme-card .meaning {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  position: relative;
  z-index: 2;
}

/* Real hand-drawn design sketch (see PENDANT_THEME_SKETCH in js/pendant.js),
   blended softly into the card's gradient as background texture — not a
   literal photo callout, just enough presence to connect these homepage
   tiles to the actual pendant frame shapes. Themes without a sketch just
   render the plain gradient, same as before. */
.theme-card .sketch {
  position: absolute;
  top: 0;
  right: -8%;
  width: 70%;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  filter: brightness(2.2);
  pointer-events: none;
}

/* Homepage tiles get their own sketch offset, independent of the
   configurator's picker cards below — tune this one without touching
   #theme-picker's. */
#theme-grid .sketch { right: -20%; }

/* The configurator's own picker cards had the sketch bleeding past the
   card edge and getting clipped by the card's overflow:hidden — pulled
   inward here so it stays fully visible. */
#theme-picker .sketch { right: 3%; }

.theme-card p { color: #fff; opacity: 0.9; font-size: 0.8rem; margin: 6px 0 0; }

.theme-sol    { background: linear-gradient(150deg, #e8b74b, #c17f2a); }
.theme-tide   { background: linear-gradient(150deg, #4f7ea8, #294b66); }
.theme-bloom  { background: linear-gradient(150deg, #d98fa8, #7a4a5c); }
.theme-relic  { background: linear-gradient(150deg, #a9a08c, #5c5648); }

/* ---------- Pendant configurator ---------- */
.pendant-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

@media (max-width: 900px) {
  .pendant-layout { grid-template-columns: 1fr; gap: 36px; }
}

.pendant-preview {
  background: var(--cream-dark);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.pendant-preview svg { width: 100%; height: 100%; max-width: 320px; }

.pendant-preview-sketch {
  width: 100%;
  height: 100%;
  max-width: 320px;
  object-fit: contain;
  cursor: zoom-in;
}

/* Some theme sketches (e.g. Relic) are photographed pencil drawings on
   plain white paper, so the source image is a hard-edged white rectangle
   sitting on the preview box's cream-dark background. This modifier adds a
   soft radial fade (mask, not a real crop) that blends that white edge away
   instead of leaving a visible box around the drawing — it dissolves into
   the surrounding panel rather than being cut into a shape. Sketches that
   are already isolated on a transparent background (e.g. Sol) skip this
   modifier and render as-is. */
.pendant-preview-sketch--vignette {
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at center, black 55%, transparent 92%);
  mask-image: radial-gradient(ellipse 62% 62% at center, black 55%, transparent 92%);
}

/* Wraps the sketch <img> + the engraving letter/number overlay together,
   so the text can be centred over the real artwork (see renderPreview()
   in maker-pendant.html) instead of falling back to the plain generated
   icon just because engraving was added. */
.pendant-preview-sketch-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
}

.pendant-preview-sketch-wrap .pendant-preview-sketch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.pendant-preview-engraving {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.6rem;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.pendant-preview-engraving--number {
  font-size: 4.4rem;
  /* Alex Brush (numbers) has very different internal font metrics from
     Dancing Script (letters) — a lot of empty space below the baseline
     for flourishes that letters don't have — so the same translateY(-50%)
     used for letters visually sits noticeably higher for numbers. This
     nudges it back down to compensate. Measured against a real preview
     screenshot (Tide, where the narrow opening made the gap obvious) at
     roughly a 9-10% of the preview-box-height discrepancy; if it's still
     off on any theme, adjust this one value rather than the per-theme
     PENDANT_ENGRAVING_POSITION table, which is correct for letters. */
  transform: translate(-50%, -7%);
}

.pendant-preview-col {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 96px;
}

@media (max-width: 900px) {
  .pendant-preview-col { position: static; }
}

.pendant-preview-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 14px;
  line-height: 1.5;
}

.pendant-preview-note a { color: var(--gold-dark); }

.config-block { margin-bottom: 32px; }

.config-block h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 14px;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

#metal-picker { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 520px) {
  #metal-picker { grid-template-columns: 1fr; }
}

.option-card {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
}

.option-card.selected { border-color: var(--ink); background: var(--cream-dark); }

.option-card .opt-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 3px; }
.option-card .opt-icon svg { width: 100%; height: 100%; }

.option-card .opt-sub { font-size: 0.76rem; color: var(--ink-soft); }

.symbol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.symbol-chip {
  padding: 10px;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  font-size: 0.82rem;
}

.symbol-chip.selected { border-color: var(--ink); background: var(--cream-dark); }

.config-block h4 .optional-tag {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink-soft);
}

/* Two small "alternate path" notes shown below the config blocks, above the
   price box: one pointing to the Bespoke process (in place of the old Fully
   Custom picker option), one pointing to the separate Chains category (in
   place of the configurator's old built-in chain add-on) — in that order.
   Share the same look; only the Bespoke note (which isn't the last one any
   more) needs a smaller bottom margin to sit closer to the note below it. */
.pendant-chain-note,
.pendant-bespoke-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: -8px;
  margin-bottom: 28px;
}

.pendant-bespoke-note { margin-bottom: 10px; }

.pendant-chain-note a,
.pendant-bespoke-note a { color: var(--gold-dark); }

.pendant-notes {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  background: var(--white);
}

.pendant-price-box {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 8px;
}

.pendant-price {
  font-size: 1.4rem;
  margin-bottom: 16px;
}

/* ---------- Custom / Commissions page ---------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}

@media (max-width: 900px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process-steps { grid-template-columns: 1fr; }
}

.process-step {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 20px 18px;
  position: relative;
}

.process-step .step-num {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold-dark);
  margin-bottom: 8px;
}

.process-step h4 { font-size: 0.92rem; margin-bottom: 4px; }
.process-step p { font-size: 0.82rem; margin: 0; }

.commission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 20px;
}

@media (max-width: 860px) {
  .commission-grid { grid-template-columns: 1fr; }
}

.commission-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.commission-card:hover { box-shadow: var(--shadow); }

.commission-read-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--gold-dark);
}

.commission-media {
  aspect-ratio: 4 / 3;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
}

.commission-media.has-photo {
  padding: 0;
}

.commission-media.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commission-body { padding: 22px 24px; }

.commission-body .eyebrow { margin-bottom: 6px; }

/* ---------- About page: pull-quote + signature ---------- */
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.4;
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink);
}

.signature-block {
  text-align: right;
  margin-top: 36px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
}

.signature-block .role {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 4px;
}

.philosophy-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 8px;
}

/* ---------- Studio Sample badge ---------- */
.sample-badge {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  margin-bottom: 6px;
}

/* Limited Edition uses the brand pink (a touch deeper than the accent pink so
   the white text stays easy to read), so it reads differently from the dark
   Studio Sample badge. */
.limited-badge {
  background: #94606a;
  color: #fff;
}

/* ---------- Sold Out badge + disabled state ---------- */
.sold-out-badge {
  display: inline-block;
  background: var(--ink-soft, #8a8285);
  color: var(--cream);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  margin-bottom: 6px;
  margin-left: 6px;
}

.product-media.is-sold-out {
  opacity: 0.55;
}

button.btn:disabled,
a.btn.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.price-strike {
  text-decoration: line-through;
  color: var(--ink-soft);
  font-weight: 400;
  margin-right: 8px;
  font-size: 0.9em;
}

.sample-note {
  background: var(--cream-dark);
  border: 1px solid var(--line);
  padding: 16px 18px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 20px;
}

.sample-note strong { color: var(--ink); }

.ooak-note {
  font-size: 0.78rem;
  color: var(--ink-soft, #8a8285);
  margin-top: 14px;
  line-height: 1.5;
}

.ooak-note strong { color: var(--ink-soft, #8a8285); font-weight: 600; }

/* ---------- Text links in page content ----------
   ONE style for every hyperlink in the body of a page (not the header, the
   footer, buttons or product/category cards): a pink underlined link. It
   applies automatically to links inside paragraphs and lists in a .section,
   to back-links, and to anything given the .text-link class (use that for a
   link that sits outside a <p>/<li>, e.g. inside a <div> or JS-built markup).
   To change how every body link looks, change it here only. */
.text-link,
.back-link,
.gem-table a,
.section p a:not(.btn),
.section li a:not(.btn) {
  color: var(--gold-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.text-link:hover,
.back-link:hover,
.gem-table a:hover,
.section p a:not(.btn):hover,
.section li a:not(.btn):hover {
  color: var(--ink);
}

/* ---------- Product detail ---------- */
.pd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: flex-start;
}

@media (max-width: 860px) {
  .pd-layout { grid-template-columns: 1fr; gap: 32px; }
}

.pd-media {
  background: var(--cream-dark);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.pd-media svg { width: 100%; height: 100%; }

.pd-media.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

/* ---------- Product photo carousel (product.html) ---------- */
.pd-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

.pd-carousel-arrow:hover { background: var(--white); }

.pd-carousel-prev { left: 14px; }
.pd-carousel-next { right: 14px; }

.pd-carousel-count {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(43, 38, 34, 0.7);
  color: var(--white);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 20px;
}

.pd-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.pd-thumb {
  width: 68px;
  height: 68px;
  padding: 0;
  border: 2px solid transparent;
  background: var(--cream-dark);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}

.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-thumb.active { border-color: var(--gold); }

/* ---------- Gallery page (gallery.html) ---------- */
/* ---------- Before/after wax-to-metal comparison grid (Lost Wax Casting page) ---------- */
.before-after-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 700px) {
  .before-after-grid { grid-template-columns: repeat(1, 1fr); max-width: 420px; margin: 0 auto; }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.gallery-tile {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream-dark);
}

.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Previous Creations (maker-pendant.html) ---------- */
/* Flexbox (not CSS Grid) is used deliberately here: with an odd number of
   cards, a grid's last row sits left-aligned with an empty trailing cell,
   but a flex row with justify-content: center automatically centers
   whatever's left on the final row — no JS or item-count logic needed,
   and it stays correct as cards are added or removed over time. */
.creation-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}

.creation-grid .creation-card {
  flex: 0 1 calc(33.333% - 16px);
}

@media (max-width: 640px) {
  .creation-grid .creation-card { flex: 0 1 calc(50% - 12px); }
}

.creation-card {
  text-align: center;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
}

.creation-card .icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
}

.creation-card .icon svg { width: 100%; height: 100%; }

/* A few Previous Creations cards use a real photo instead of the generated
   icon (see the `photo` field on PREVIOUS_CREATIONS in maker-pendant.html)
   — cropped in tight to the pendant, then framed as a circle (rather than
   the icons' square box) so it reads as a little product portrait, same
   click-to-zoom treatment as the rest of the site's real photos. */
.creation-card .icon.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  cursor: zoom-in;
}

.creation-card p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.pd-info .product-cat { margin-bottom: 8px; }

.pd-info h1 { font-size: 1.9rem; margin-bottom: 10px; }

.pd-price {
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 20px;
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
}

.qty-control button {
  background: none;
  border: none;
  width: 38px;
  height: 38px;
  font-size: 1rem;
  cursor: pointer;
}

.qty-control input {
  width: 42px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  height: 38px;
  font-size: 0.95rem;
}

.pd-meta {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.pd-meta div { margin-bottom: 6px; }

.added-msg {
  display: none;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--gold-dark);
}

/* ---------- Cart page ---------- */
.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding: 0 0 14px;
}

.cart-table td {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.cart-item-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cart-item-thumb {
  width: 70px;
  height: 70px;
  background: var(--cream-dark);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.cart-item-thumb.has-photo img { cursor: zoom-in; }

.remove-link {
  font-size: 0.75rem;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  background: none;
  border: none;
}

.cart-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
  align-items: start;
}

@media (max-width: 860px) {
  .cart-layout { grid-template-columns: 1fr; }
}

.summary-box {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 28px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 0.92rem;
}

.summary-row.total {
  font-size: 1.1rem;
  font-weight: 600;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 6px;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

.empty-state .icon { width: 64px; height: 64px; margin: 0 auto 20px; opacity: 0.5; }

/* ---------- Checkout ---------- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: start;
}

@media (max-width: 860px) {
  .checkout-layout { grid-template-columns: 1fr; }
}

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 0.95rem;
  font-family: var(--sans);
  color: var(--ink);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mini-cart {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 24px;
}

.mini-cart-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

#paypal-button-container {
  margin-top: 20px;
}

.paypal-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 14px;
  text-align: center;
}

.order-success {
  text-align: center;
  padding: 60px 24px;
}

.order-success .icon { width: 70px; height: 70px; margin: 0 auto 24px; color: var(--gold); }

/* ---------- About / Contact ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

.split .media-block {
  background: var(--cream-dark);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.split .media-block.has-photo { padding: 0; }

.split .media-block.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Commission detail pages (commission-cross.html,
   commission-suzie.html) — a small photo grid in place of the single
   media-block image, for pieces with more than one shot. Two tiles sit
   side by side; four wrap into a 2x2 grid. ---------- */
.commission-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.commission-photo-tile {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream-dark);
}

.commission-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

.back-link {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}

.commission-detail-meta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.commission-detail-meta div { margin-bottom: 8px; }

/* Wax progress photos inside a commission's "The Story" section
   (commission-suzie.html). Three portrait (4:5) shots side by side with a
   short caption under each; they stack into one centred column on phones.
   Click-to-zoom comes from the site-wide lightbox, so only the cursor is set. */
.commission-wax-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0 32px;
}

.commission-wax-steps figure { margin: 0; }

.commission-wax-steps img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  cursor: zoom-in;
  background: var(--cream-dark);
}

.commission-wax-steps figcaption {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Two-photo version (commission-cross.html): two columns, kept narrower so
   each photo stays roughly the same size as in the three-photo row. */
.commission-wax-steps--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .commission-wax-steps {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}

@media (max-width: 780px) {
  .value-grid { grid-template-columns: 1fr; }
}

.value-card {
  text-align: center;
  padding: 20px;
}

.value-card .icon { width: 44px; height: 44px; margin: 0 auto 14px; }

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-info .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
  margin-bottom: 4px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--cream-dark);
  padding: 56px 0 28px;
  margin-top: 80px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 40px;
  margin-bottom: 40px;
}

@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

.site-footer h4 {
  color: var(--white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.site-footer a {
  color: var(--cream-dark);
  opacity: 0.8;
  font-size: 0.88rem;
  display: block;
  margin-bottom: 10px;
}

.site-footer a:hover { opacity: 1; color: var(--gold); }

.site-footer .logo { color: var(--cream); margin-bottom: 12px; }

.site-footer p { color: var(--cream-dark); }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  color: var(--cream-dark);
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.social-link:hover { color: var(--gold); opacity: 1; }

.footer-bottom {
  border-top: 1px solid rgba(250,247,242,0.12);
  padding-top: 24px;
  font-size: 0.78rem;
  opacity: 0.6;
  text-align: center;
}

/* ---------- Alert banner (placeholder notice) ---------- */
.build-note {
  background: #fff8e6;
  border: 1px solid #e8d192;
  color: #6b5623;
  font-size: 0.82rem;
  padding: 12px 16px;
  text-align: center;
}

.build-note a { text-decoration: underline; }

/* ---------- FAQs ---------- */
.faq-list { max-width: 760px; margin: 0 auto; }

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.faq-item:first-child { border-top: 1px solid var(--line); }

.faq-item summary {
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 1.3rem;
  color: var(--gold-dark);
}
.faq-item[open] summary::after { content: '\2212'; }

.faq-item p { margin-top: 12px; margin-bottom: 0; font-size: 0.9rem; }
.faq-item p + p { margin-top: 8px; }

/* Lists inside an opened item (used by the Gemstone Guide's per-stone notes),
   and room for the sticky header when a table link scrolls to an item. */
.faq-item ul { margin: 10px 0 0 18px; font-size: 0.9rem; }
.faq-item li { margin-bottom: 4px; }
.faq-item[id] { scroll-margin-top: 110px; }

/* ---------- Lightbox (click-to-zoom on real product/gallery photos) ----------
   Delegated open/close logic lives in js/main.js — see the comment there for
   exactly which images qualify (real photos not already inside a link). */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 16, 17, 0.92);
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.open { display: flex; }

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}

body.lightbox-lock { overflow: hidden; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------- Gemstone care table (gemstone-guide.html) ----------
   Sized to fit the page column with no sideways scrolling: columns wrap on
   desktop, and on phones each row turns into a small stacked card with the
   column name shown beside each value. */
.gem-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 20px 0 24px;
}

.gem-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.gem-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .gem-table thead { display: none; }
  .gem-table, .gem-table tbody, .gem-table tr, .gem-table td { display: block; width: 100%; }
  .gem-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .gem-table td { border: 0; padding: 4px 0; }
  .gem-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
  }
  .gem-table td:first-child { font-size: 1rem; padding-bottom: 6px; }
  .gem-table td:first-child::before { display: none; }
}

/* ---------- Reviews page (reviews.html) ----------
   Typed review cards as the main content, with an optional row of message
   screenshots underneath. Anything marked .is-placeholder is dummy content
   that should be replaced or deleted before the page goes live. */
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.review-card {
  position: relative;
  margin: 0;
  padding: 28px 28px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.review-card blockquote {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

.review-card figcaption {
  margin-top: auto;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.review-card figcaption strong { color: var(--ink); font-weight: 600; }

.review-shots {
  column-count: 2;
  column-gap: 20px;
}

.review-shot {
  position: relative;
  margin: 0 0 20px;
  break-inside: avoid;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.review-shot img { width: 100%; height: auto; display: block; cursor: zoom-in; }

/* Empty screenshot frame (only used if you add a placeholder back). */
.review-shot.is-placeholder {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-placeholder { border-style: dashed; }

.placeholder-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--cream-dark);
  color: var(--gold-dark);
}

@media (max-width: 760px) {
  .review-grid { grid-template-columns: 1fr; }
  .review-shots { column-count: 1; }
}

/* ---------- "Added to cart" popup (js/main.js) ---------- */
.cart-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  width: min(340px, calc(100vw - 32px));
  z-index: 160;
  padding: 18px 18px 16px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: cartPopupIn 0.2s ease;
}

/* Little pointer up towards the cart icon. */
.cart-popup::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 34px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
}

@keyframes cartPopupIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.cart-popup-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.cart-popup-title {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}

.cart-popup-item { display: flex; gap: 12px; align-items: center; }

.cart-popup-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  background: var(--cream-dark);
  overflow: hidden;
}

.cart-popup-thumb > * { width: 100%; height: 100%; display: block; }
.cart-popup-info { min-width: 0; font-size: 0.85rem; }
.cart-popup-name { font-family: var(--serif); font-size: 0.98rem; line-height: 1.3; }
.cart-popup-option { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.4; }
.cart-popup-price { font-weight: 600; margin-top: 2px; }
.cart-popup-count { margin-top: 12px; font-size: 0.78rem; color: var(--ink-soft); }
.cart-popup-actions { display: flex; gap: 10px; margin-top: 12px; }
.cart-popup-actions .btn { flex: 1; padding: 11px 8px; text-align: center; font-size: 0.72rem; }

.cart-count.bump { animation: cartBump 0.4s ease; }
@keyframes cartBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- Phones: a more compact header and tighter page spacing ---------- */
@media (max-width: 640px) {
  .site-header .container { padding-top: 8px; padding-bottom: 8px; }
  .logo-img { height: 48px; width: 48px; border-radius: 8px; }
  .section { padding: 44px 0; }
  .hero { padding: 56px 0; }
  .section-head { margin-bottom: 26px; }
  .cart-popup { right: 12px; }
  .cart-popup::before { right: 64px; }
}

@media (max-width: 640px) {
  /* Shop page: keep the title short so the products start sooner. */
  .shop-intro { padding-top: 26px; }
  .shop-intro .section-head { margin-bottom: 8px; }
  .shop-intro .section-head h1 { font-size: 1.9rem; margin-bottom: 0; }
  .shop-section { padding-top: 6px; }

  /* Free-shipping bar: a shorter message that fits on one line. */
  .announce { font-size: 0.7rem; letter-spacing: 0.05em; padding: 8px 10px; }
  .announce-full { display: none; }
}

.announce-short { display: none; }
@media (max-width: 640px) { .announce-short { display: inline; } }

/* Cart: reminder that a one-of-a-kind piece can't have its quantity raised. */
.single-note {
  margin-top: 6px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--gold-dark);
}

/* ---------- Cart on phones ----------
   The four-column table doesn't fit a phone, so each row becomes a small
   card: the item on top, then quantity on the left and the line total on the
   right, then Remove. (Without this the table ran off the right edge and
   dragged the order summary with it.) */
@media (max-width: 640px) {
  .cart-layout > div { min-width: 0; }
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody { display: block; width: 100%; }
  .cart-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .cart-table td { display: block; padding: 0; border: 0; }
  .cart-table td:nth-child(1) { grid-column: 1 / -1; }
  .cart-table td:nth-child(2) { display: none; }
  .cart-table td:nth-child(3) { grid-column: 1; }
  .cart-table td:nth-child(4) { grid-column: 2; justify-self: end; font-weight: 600; }
  .cart-table td:nth-child(5) { grid-column: 1 / -1; }
  .summary-box { padding: 22px 20px; }
}

/* ---------- Care & gemstone graphics (product-care.html, gemstone-guide.html) ---------- */
.icon-svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* "In Brief": three icon cards */
.care-brief {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0 28px;
}
.care-brief-item {
  padding: 20px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  text-align: center;
}
.care-brief-item p { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.55; }
.care-brief-icon,
.avoid-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cream-dark);
  color: var(--gold-dark);
  flex-shrink: 0;
}
.care-brief-icon .icon-svg { width: 28px; height: 28px; }
.avoid-icon .icon-svg { width: 26px; height: 26px; }

/* Things to avoid: a compact icon row under Everyday Care */
.avoid-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 8px 0 26px;
}
.avoid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* Mohs scale range chart */
.mohs-chart { margin: 22px 0 30px; }
.mohs-head,
.mohs-row { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: center; }
.mohs-head { margin-bottom: 4px; }
.mohs-axis { position: relative; height: 34px; }
.mohs-axis > span {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.mohs-axis > .mohs-dust-tag {
  bottom: auto;
  top: 0;
  left: 40%;
  padding: 2px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-dark);
  background: var(--cream-dark);
}
.mohs-name { line-height: 1.25; }
.mohs-name strong { display: block; font-size: 0.9rem; font-weight: 600; }
.mohs-name small { font-size: 0.74rem; color: var(--ink-soft); }
.mohs-row { padding: 7px 0; }
.mohs-track {
  position: relative;
  height: 20px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
/* the softer-than-dust zone (5 to 7) is shaded, with a dashed line at 7 */
.mohs-track::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  width: 40%;
  background: rgba(168, 108, 118, 0.08);
}
.mohs-track::after {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 40%;
  border-left: 1.5px dashed var(--gold-dark);
}
.mohs-range,
.mohs-dot {
  position: absolute;
  z-index: 1;
  top: 3px;
  height: 14px;
  background: var(--gold);
  border-radius: 7px;
}
.mohs-dot { width: 14px; margin-left: -7px; border-radius: 50%; background: var(--gold-dark); }
.mohs-chart figcaption { margin-top: 10px; font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }

/* Icons beside the text in the gemstone care table */
.cell-icon { display: flex; gap: 8px; align-items: flex-start; }
.cell-icon .icon-svg { width: 18px; height: 18px; margin-top: 1px; color: var(--gold-dark); }

/* A photo beside the opening paragraph of a stone's section */
.stone-intro { display: flex; gap: 18px; align-items: flex-start; margin-top: 12px; }
.stone-photo {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  cursor: zoom-in;
  background: var(--cream-dark);
}
.faq-item .stone-shown { margin-top: 8px; font-size: 0.8rem; color: var(--ink-soft); }

@media (max-width: 640px) {
  .care-brief { grid-template-columns: 1fr; }
  .care-brief-item { display: flex; gap: 14px; align-items: center; text-align: left; padding: 14px 16px; }
  .care-brief-item p { margin: 0; }
  .avoid-strip { grid-template-columns: repeat(2, 1fr); }
  .mohs-head, .mohs-row { grid-template-columns: 78px 1fr; column-gap: 10px; }
  .mohs-axis > .mohs-dust-tag { left: 40%; font-size: 0.6rem; padding: 2px 5px; }
  .stone-photo { flex-basis: 76px; width: 76px; height: 76px; }
  .stone-intro { gap: 14px; }
}

/* Cart: "Clear cart" link under the items, and its one-step confirmation. */
.cart-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.cart-clear-text { font-size: 0.85rem; color: var(--ink-soft); }
.cart-clear-btn { padding: 9px 16px; font-size: 0.72rem; }
@media (max-width: 640px) {
  .cart-clear { justify-content: flex-start; }
  .cart-clear-text { flex-basis: 100%; }
}

/* Small labels inside a gemstone's collapsed section */
.stone-sub {
  margin: 18px 0 4px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Space between the last collapsed item and the note that follows a list of them */
.faq-list + p { margin-top: 22px; }

/* Homepage hero: the two buttons are always the same width — side by side on
   desktop, stacked on phones. */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hero-buttons .btn {
  flex: 0 0 250px;
  width: 250px;
  margin: 0;
  text-align: center;
}
@media (max-width: 640px) {
  .hero-buttons { flex-direction: column; align-items: center; }
  .hero-buttons .btn { flex: none; width: 100%; max-width: 300px; }
}

/* ---------- Loose gemstones (enquiry only) ---------- */
.price-label { font-size: 0.8rem; font-weight: 400; letter-spacing: 0.04em; color: var(--ink-soft); }

.enquiry-panel {
  margin: 8px 0 22px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--line);
}
.enquiry-panel h4 { margin: 0 0 8px; }
.enquiry-panel p { margin: 0 0 16px; font-size: 0.9rem; }
.enquiry-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.enquiry-actions .btn { flex: 1 1 200px; text-align: center; }

/* "Placeholder" tag — for listings that still need real details or photos. */
.placeholder-badge { background: transparent; color: var(--gold-dark); border: 1px dashed var(--gold-dark); }

.gem-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 8px; }
.gem-step { padding: 20px; background: var(--white); border: 1px solid var(--line); }
.gem-step strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 1.02rem; }
.gem-step p { margin: 0; font-size: 0.88rem; }
@media (max-width: 640px) { .gem-steps { grid-template-columns: 1fr; } }

/* A 3:4 portrait photo in a split layout (About page): a comfortable size,
   centred in its column, and never taller than a phone screen. */
.split .media-block.media-portrait {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 420px;
  justify-self: end;
}
@media (max-width: 860px) {
  .split .media-block.media-portrait { max-width: 340px; justify-self: center; }
}

/* Round photo of the piece at the top of a review card */
.review-photo {
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  cursor: zoom-in;
  background: var(--cream-dark);
}

/* Review card footer: who/what/where/when on the left, a round photo of the piece on the right */
.review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
}
.review-foot figcaption { margin-top: 0; flex: 1; line-height: 1.5; }
.review-card blockquote { margin-bottom: 16px; }
.review-card { padding: 26px 26px 20px; }

/* ---------- Discount code (cart + checkout + confirmation) ---------- */
.summary-row.discount-row { color: var(--gold-dark); }
.discount-box { margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.discount-label { display: block; margin-bottom: 6px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.discount-form { display: flex; gap: 8px; }
.discount-form input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: inherit;
  font-size: 0.9rem;
  text-transform: uppercase;
}
.discount-form .btn { padding: 11px 18px; font-size: 0.72rem; }
.discount-msg { margin: 8px 0 0; font-size: 0.8rem; min-height: 1.1em; color: var(--ink-soft); }
.discount-msg.is-error { color: #a13a3a; }
.discount-applied { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; font-size: 0.82rem; line-height: 1.5; color: var(--ink); }

/* Free-shipping bar: the longer message needs about 880px to fit on one line,
   so anything narrower gets the short version. */
@media (max-width: 880px) {
  .announce { font-size: 0.7rem; letter-spacing: 0.05em; padding: 8px 10px; }
  .announce-full { display: none; }
  .announce-short { display: inline; }
}

/* ---------- One-of-a-kind pieces: a plain "1" instead of quantity boxes ---------- */
.qty-static { display: inline-block; min-width: 42px; text-align: center; font-size: 0.95rem; color: var(--ink); }

/* ---------- Currency label: every headline price and total says AUD ---------- */
.pd-price::after,
.pendant-price::after,
.summary-row.total span:last-child::after {
  content: " AUD";
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* Cart table: keep the headers and the quantity boxes from crowding each other.
   Below 1100px the order summary drops under the table, so the table gets the
   full width and never runs off the edge. */
.cart-table th { padding-right: 16px; white-space: nowrap; }
.cart-table th:nth-child(3), .cart-table td:nth-child(3) { width: 140px; }
.cart-table td:nth-child(2), .cart-table td:nth-child(4) { white-space: nowrap; }
@media (max-width: 1100px) { .cart-layout { grid-template-columns: 1fr; } }

/* Cart on phones: the table headers are hidden, so each quantity says "Qty" itself */
.qty-label { display: none; }
@media (max-width: 640px) {
  .cart-table td:nth-child(3) { width: auto; }
  .qty-cell { display: flex; align-items: center; gap: 12px; }
  .qty-label { display: inline; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
  .qty-static { min-width: 0; font-size: 1rem; }
}

/* ==========================================================================
   The Maker's Pendant: gemstone choice, "Your pendant" summary, and a pinned
   preview on phones
   ========================================================================== */

/* Small round stone picture (a photo, or a soft colour swatch until there is one) */
.gem-thumb {
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(43, 38, 34, 0.12);
  vertical-align: middle;
}

.gem-step-label {
  margin-bottom: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.gem-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gem-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
}
.gem-choice.selected { border-color: var(--ink); background: var(--cream-dark); }
.gem-choice:focus-visible, .symbol-chip:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.gem-choice-title { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.gem-choice-sub { margin-top: 2px; font-size: 0.78rem; line-height: 1.4; color: var(--ink-soft); }
.symbol-chip .gem-thumb { margin-right: 8px; vertical-align: -2px; }
.gem-note { margin: 14px 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--ink-soft); }

/* "Your pendant" summary */
.pendant-summary {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
}
.ps-eyebrow { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 4px; }
.ps-title { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.ps-line { margin-top: 6px; font-size: 0.88rem; color: var(--ink); }
.ps-muted { color: var(--ink-soft); }
.ps-small { font-size: 0.74rem; line-height: 1.4; color: var(--ink-soft); }
.ps-gem { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ps-price { margin-top: 10px; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.ps-cur { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-soft); }

/* The engraving lettering scales with the preview, so it still fits when the
   preview is shrunk to a small pinned card on phones. */
.pendant-preview-sketch-wrap { container-type: inline-size; }
.pendant-preview-engraving { font-size: 23cqw; }
.pendant-preview-engraving--number { font-size: 22cqw; }

.pendant-preview-note--bottom { display: none; }

/* Phones and small tablets: the preview is pinned just under the header while
   the customer scrolls through the options, so every choice can be seen taking
   effect without scrolling back up. */
@media (max-width: 900px) {
  .pendant-layout { display: block; }
  .pendant-preview-col {
    position: sticky;
    top: var(--hdr, 66px);
    z-index: 30;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin: 0 -24px 26px;
    padding: 10px 24px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 14px rgba(43, 38, 34, 0.06);
  }
  .pendant-preview { width: 108px; flex: 0 0 108px; padding: 8px; }
  .pendant-summary { flex: 1; min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; }
  .ps-title { font-size: 0.98rem; }
  .ps-line { margin-top: 3px; font-size: 0.82rem; }
  .ps-price { margin-top: 6px; }
  .pendant-preview-col > .pendant-preview-note { display: none; }
  .pendant-preview-note--bottom { display: block; margin: 0 0 12px; }
  .pendant-summary .ps-small { display: none; }   /* the note under the options says the same, and this keeps the pinned card short */
}
@media (max-width: 480px) {
  .gem-choice-grid { grid-template-columns: 1fr; }
}

/* Private draft review of unfinished gemstone listings */
.draft-banner {
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 12px 16px;
  background: #fff7e0;
  border: 1px dashed #c9a23a;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
}

.pd-price.no-price::after { content: none; }
.pd-price.no-price { font-size: 1.1rem; color: var(--ink-soft); }

/* Homepage headline: each sentence stays whole, so on narrow screens it breaks between them */
.hero h1 .hl { display: inline-block; }

/* The Maker's Pendant: a friendly invitation to play */
.pendant-play-invite {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--gold-dark);
}

.option-card { position: relative; }