@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&display=swap');
/* Heading font (@Cormorant Garamond by default) is enqueued dynamically by PHP so it can be swapped */

:root {
  --cg-bg:           #0e1a0e;
  --cg-card:         #162316;
  --cg-green-deep:   #1e3a1e;
  --cg-green-light:  #7ab87a;
  --cg-gold:         #c9a84c;
  --cg-gold-light:   #e8cc7a;
  --cg-cream:        #f5f0e8;
  --cg-muted:        #8a9488;
  --cg-gap:          14px;   /* legacy, kept for any 3rd-party refs */
  --cg-col-gap:      12px;   /* horizontal space between cards in a row */
  --cg-row-gap:      16px;   /* vertical space between rows */
  --cg-heading-font: 'Cormorant Garamond'; /* overridden by inline style when font is changed */
}

/* Background is transparent so Elementor controls it */
.cg-wrap {
  color: var(--cg-cream);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* ── SECTION HEADERS ──────────────────────── */
.cg-section-header { display:flex; align-items:flex-end; gap:32px; padding:56px 40px 28px; }
.cg-section-inner  { flex:0 0 auto; }
.cg-section-num    { display:block; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cg-gold); margin-bottom:8px; }
.cg-section-title  { font-family:var(--cg-heading-font),serif; font-weight:300; color:var(--cg-gold-light); line-height:1; margin:0; }
/* font-size and weight/style set via inline style from section data */
.cg-section-rule   { flex:1; height:1px; background:rgba(255,255,255,.08); margin-bottom:8px; }

/* ── GALLERY GRID ─────────────────────────── */
.cg-gallery { padding:20px 40px 80px; display:flex; flex-direction:column; gap:var(--cg-row-gap); }

/* Hero row stays a simple 1-column wrapper */
.cg-row.cg-1wide { display:grid; grid-template-columns:1fr; }

/* ── Mosaic section grid ────────────────────────────────────
   Each section is a 12-column grid. Cards carry their own
   grid-column / grid-row spans via inline style.
   grid-auto-rows must match CG_ROW_H in gallery.js (90px).  */
[id^="cg-section-"] {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 90px;
  gap: var(--cg-row-gap) var(--cg-col-gap);
}

/* ── CARD BASE ────────────────────────────── */
.cg-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--cg-card);
  transition: box-shadow .3s;
  cursor: pointer;
  min-width: 0;
  /* Fill the grid cell fully — grid-auto-rows controls height */
  min-height: 0;
}
.cg-card:hover { box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(201,168,76,.15); }

/* Size classes kept for hero wrapper only — section cards are sized by grid spans */
.cg-wide { aspect-ratio:16/7; }   /* hero wrapper */

.cg-card img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.25,.46,.45,.94), filter .4s;
  filter:brightness(.9) saturate(1.05);
}
.cg-card:hover img { transform:scale(1.04); filter:brightness(1) saturate(1.1); }

/* PLACEHOLDER */
.cg-placeholder {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, var(--cg-green-deep), #0e1a0e);
  color:var(--cg-muted); font-size:.75rem;
  text-align:center; padding:20px; line-height:1.5;
  border:1px dashed rgba(122,184,122,.2);
}
.cg-placeholder::before { content:'📷'; font-size:1.8rem; opacity:.4; }

/* OVERLAY */
.cg-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:40px 18px 16px;
  background:linear-gradient(transparent, rgba(0,0,0,.78));
  transform:translateY(6px); opacity:0;
  transition:opacity .3s, transform .3s;
}
.cg-card:hover .cg-overlay { opacity:1; transform:translateY(0); }
.cg-cat  { display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cg-gold-light); margin-bottom:3px; }
.cg-name { display:block; font-family:var(--cg-heading-font),serif; font-size:1rem; font-weight:300; color:var(--cg-cream); line-height:1.2; }

/* SHEEN */
.cg-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.06), transparent 60%);
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.cg-card:hover::after { opacity:1; }

/* ── VIDEO CARDS ──────────────────────────── */
.cg-video {
  position:relative; overflow:hidden; border-radius:6px;
  background:#0e1a0e; min-width:0; min-height:0; cursor:pointer;
}
/* Thumbnail image fills the card exactly like a photo card */
.cg-video img {
  transition: transform .6s cubic-bezier(.25,.46,.45,.94), filter .4s;
  filter: brightness(.88) saturate(1.05);
}
.cg-video:hover img { transform:scale(1.04); filter:brightness(1) saturate(1.1); }

/* ── YouTube play button ─────────────────── */
.cg-yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: rgba(200,0,0,.88);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .2s, background .2s;
}
/* Triangle arrow */
.cg-yt-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 20px;
  border-color: transparent transparent transparent #fff;
}
.cg-video:hover .cg-yt-play {
  background: rgba(255,0,0,1);
  transform: translate(-50%, -50%) scale(1.12);
}

/* ── Self-hosted MP4 play button (gold) ──── */
.cg-mp4-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: rgba(201,168,76,.85);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .2s, background .2s;
}
.cg-mp4-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 20px;
  border-color: transparent transparent transparent #fff;
}
.cg-video:hover .cg-mp4-play {
  background: rgba(232,204,122,1);
  transform: translate(-50%, -50%) scale(1.12);
}
.cg-vid-label { position:absolute; bottom:0; left:0; right:0; padding:30px 18px 14px; background:linear-gradient(transparent,rgba(0,0,0,.8)); pointer-events:none; z-index:2; transition:opacity .3s; }
.cg-video:hover .cg-vid-label { opacity:0; }

/* Inline iframe (used only for hero-section wide video cards) */
.cg-video iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border: none;
  transform: translate(-50%, -50%);
}

/* ── HERO VIDEO ───────────────────────────── */
.cg-hero-video {
  position:relative; overflow:hidden; border-radius:6px;
  background:var(--cg-green-deep);
  width:100%; height:100%; min-height:0;   /* fills grid cell; grid-row span controls height */
}
.cg-hero-video video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ── LIGHTBOX ─────────────────────────────── */
#cg-lb { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.93); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; opacity:0; pointer-events:none; transition:opacity .3s; }
#cg-lb.cg-open { opacity:1; pointer-events:all; }

/* Photo mode */
#cg-lb img     { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:4px; display:none; }
#cg-lb.cg-lb-photo img { display:block; }

/* YouTube mode */
#cg-lb-yt { display:none; width:min(70vw,860px); aspect-ratio:16/9; }
#cg-lb.cg-lb-yt #cg-lb-yt { display:block; }
#cg-lb-frame { width:100%; height:100%; border:none; border-radius:4px; }

/* Self-hosted video mode */
#cg-lb-vid { display:none; width:min(70vw,900px); }
#cg-lb.cg-lb-vid #cg-lb-vid { display:block; }
#cg-lb-vid-el { width:100%; max-height:80vh; border-radius:4px; background:#000; display:block; }

.cg-lb-x { position:absolute; top:20px; right:28px; font-size:2rem; color:var(--cg-cream); opacity:.5; cursor:pointer; transition:opacity .2s; z-index:1; }
.cg-lb-x:hover { opacity:1; }
.cg-lb-info { text-align:center; }
#cg-lb-cat  { display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cg-gold-light); margin-bottom:4px; }
#cg-lb-name { font-family:var(--cg-heading-font),serif; font-size:1.2rem; font-weight:300; color:var(--cg-cream); }

/* ── FOOTER ───────────────────────────────── */
.cg-footer { text-align:center; padding:60px 40px; border-top:1px solid rgba(255,255,255,.06); color:var(--cg-muted); font-size:.75rem; letter-spacing:.1em; }
.cg-footer a { color:var(--cg-green-light); text-decoration:none; }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width:1200px) {
  .cg-gallery        { padding:20px 28px 80px; }
  .cg-section-header { padding:48px 28px 24px; }
}

/* ── Tablet / smaller-than-laptop: 2 cards per row, equal size ── */
@media (max-width:1024px) {
  :root { --cg-col-gap: 10px; --cg-row-gap: 10px; }
  .cg-gallery        { padding:16px 20px 60px; }
  .cg-section-header { padding:40px 20px 20px; }
  [id^="cg-section-"] {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }
  /* Force every card/video/hero to exactly one cell — overrides all inline spans */
  [id^="cg-section-"] > .cg-card,
  [id^="cg-section-"] > .cg-video,
  [id^="cg-section-"] > .cg-hero-video {
    grid-column: span 1 !important;
    grid-row:    span 1 !important;
  }
}

/* ── Phone: 1 card per row ── */
@media (max-width:600px) {
  :root { --cg-col-gap: 6px; --cg-row-gap: 8px; }
  .cg-gallery        { padding:10px 12px 48px; }
  .cg-section-header { padding:32px 12px 16px; }
  [id^="cg-section-"] {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }
  /* Already forced to span 1 by the 1024px rule above — no change needed for grid-column */
}

@media (max-width:400px) {
  .cg-gallery        { padding:8px 10px 40px; }
  .cg-section-header { padding:28px 10px 14px; }
  [id^="cg-section-"] { grid-auto-rows: 200px; }
}


/* ══════════════════════════════════════════════════════════
   ADMIN FRONTEND EDIT UI
   All selectors are scoped to .cg-admin-mode so nothing
   appears for regular visitors.
══════════════════════════════════════════════════════════ */

/* ── Admin mode badge ─────────────────────── */
.cg-admin-badge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  background: rgba(14,26,14,.92);
  border: 1px solid var(--cg-gold);
  color: var(--cg-gold);
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ── Edit bar strip ───────────────────────── */
.cg-edit-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
  z-index: 20;
  opacity: .72;
  transition: opacity .2s;
  pointer-events: auto;
}
.cg-card:hover  .cg-edit-bar,
.cg-video:hover .cg-edit-bar,
.cg-hero-video:hover .cg-edit-bar { opacity: 1; }

/* ── Edit bar buttons ─────────────────────── */
.cg-eb-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--cg-cream);
  border-radius: 3px;
  padding: 0 8px;
  height: 24px;
  font-size: 11px;
  font-family: 'Jost', sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}
.cg-eb-btn:hover       { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); }
.cg-eb-btn:disabled    { opacity: .4; cursor: not-allowed; }
.cg-eb-btn.cg-eb-del   { color: #f5a5a5; }
.cg-eb-btn.cg-eb-del:hover { background: rgba(200,60,60,.45); border-color: rgba(200,60,60,.6); color: #fff; }

/* Size dropdown removed — resize via corner drag handle */

.cg-eb-spacer { flex: 1; min-width: 0; }

/* ── Focal-point popup — rendered on <body> so overflow:hidden never clips it ── */
.cg-focal-popup {
  /* position is set to fixed via JS */
  width: 248px;
  background: rgba(14,26,14,.97);
  border: 1px solid rgba(201,168,76,.45);
  border-radius: 8px;
  padding: 12px;
  z-index: 100000;        /* above lightbox (99999) */
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 32px rgba(0,0,0,.6);
}
.cg-fp-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--cg-gold);
  text-align: center;
  margin-bottom: 8px;
}
.cg-fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.cg-fp-btn {
  height: 28px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--cg-cream);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cg-fp-btn:hover  { background: rgba(201,168,76,.25); border-color: var(--cg-gold); }
.cg-fp-btn.active { background: var(--cg-gold); color: #0e1a0e; border-color: var(--cg-gold); font-weight: 700; }

/* Separator between presets and fine-tune */
.cg-fp-sep {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 10px 0 7px;
}
.cg-fp-ft-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--cg-muted);
  margin-bottom: 6px;
}

/* 2-D drag pad */
.cg-fp-pad {
  position: relative;
  width: 100%;
  height: 120px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  cursor: crosshair;
  overflow: hidden;
  /* subtle grid lines at thirds to echo the 3×3 preset layout */
  background-color: rgba(255,255,255,.04);
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
  margin-bottom: 6px;
}

/* Draggable dot */
.cg-fp-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cg-gold);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left .12s ease, top .12s ease; /* smooth snap to presets; removed during drag by JS */
}

/* X / Y coordinate readout */
.cg-fp-coords {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--cg-muted);
  letter-spacing: .04em;
}
.cg-fp-coords strong {
  color: var(--cg-cream);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  display: inline-block;
  text-align: right;
}

/* ── Add Photo button ─────────────────────── */
.cg-add-wrap {
  padding: 14px 0 6px;
}
.cg-add-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 2px dashed rgba(122,184,122,.3);
  border-radius: 6px;
  color: var(--cg-muted);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.cg-add-btn:hover {
  border-color: var(--cg-green-light);
  background: rgba(122,184,122,.06);
  color: var(--cg-green-light);
}

/* ── Add Photo panel ──────────────────────── */
.cg-add-panel {
  background: var(--cg-card);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 8px;
  margin-top: 6px;
  overflow: hidden;
}
.cg-ap-inner { padding: 20px 22px 22px; }
.cg-ap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.cg-ap-header span {
  font-family: var(--cg-heading-font), serif;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--cg-cream);
}
.cg-ap-header button {
  background: none;
  border: none;
  color: var(--cg-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color .15s;
}
.cg-ap-header button:hover { color: var(--cg-cream); }

/* Thumbnail picker area */
.cg-ap-thumb {
  border: 2px dashed rgba(122,184,122,.3);
  border-radius: 6px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .2s, background .2s;
  color: var(--cg-muted);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}
.cg-ap-thumb:hover {
  border-color: var(--cg-green-light);
  background: rgba(122,184,122,.05);
  color: var(--cg-cream);
}
.cg-ap-thumb img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  margin: 0;
}

/* Inputs */
.cg-ap-inner input[type="text"],
.cg-ap-inner input[type="url"],
.cg-ap-inner select {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  color: var(--cg-cream);
  padding: 9px 11px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  margin-bottom: 10px;
  box-sizing: border-box;
  transition: border-color .15s;
}
.cg-ap-inner input[type="text"]:focus,
.cg-ap-inner input[type="url"]:focus,
.cg-ap-inner select:focus {
  outline: none;
  border-color: rgba(201,168,76,.5);
}
.cg-ap-inner input::placeholder { color: var(--cg-muted); }
.cg-ap-inner select option       { background: #162316; }

/* Submit button */
.cg-add-submit {
  background: var(--cg-gold);
  border: none;
  border-radius: 4px;
  color: #0e1a0e;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 10px 22px;
  cursor: pointer;
  transition: background .2s;
  margin-top: 4px;
}
.cg-add-submit:hover    { background: var(--cg-gold-light); }
.cg-add-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── Responsive: hide edit bar text on small screens ─ */
@media (max-width: 600px) {
  .cg-eb-btn { padding: 0 5px; font-size: 10px; }
  .cg-add-wrap { padding: 10px 0 4px; }
  .cg-resize-handle { width: 22px; height: 22px; font-size: 8px; }
}

/* Duplicate button accent */
.cg-eb-btn.cg-eb-dup { color: #a8d8a8; }
.cg-eb-btn.cg-eb-dup:hover { background: rgba(100,200,100,.25); border-color: rgba(100,200,100,.5); color: #fff; }

/* ── Card corner resize handle ─────────────────────────────
   Bottom-right corner of every card in admin mode.
   Drag to change col-span (horizontal) and row-span (vertical). */
.cg-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: var(--cg-gold);
  color: #0e1a0e;
  font-size: 9px;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: nwse-resize;
  z-index: 30;
  border-radius: 6px 0 6px 0;
  opacity: 0;
  transition: opacity .2s;
  user-select: none;
  letter-spacing: 0;
  line-height: 1;
}
.cg-card:hover   .cg-resize-handle,
.cg-video:hover  .cg-resize-handle,
.cg-hero-video:hover .cg-resize-handle { opacity: .9; }
.cg-resize-handle:hover             { opacity: 1 !important; background: var(--cg-gold-light); }
.cg-resize-handle.cg-rh-active      { opacity: 1 !important; background: var(--cg-gold-light); }

/* Span indicator in edit bar */
.cg-eb-span-info {
  font-size: 10px;
  color: var(--cg-gold-light);
  font-family: 'Jost', monospace;
  letter-spacing: .02em;
  padding: 0 4px;
  flex-shrink: 0;
}

/* ── Gallery spacing settings panel ──────────────────────── */
.cg-gap-btn {
  position: fixed;
  bottom: 52px;
  left: 20px;
  z-index: 9999;
  background: rgba(14,26,14,.92);
  border: 1px solid var(--cg-gold);
  color: var(--cg-gold);
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .2s;
}
.cg-gap-btn:hover { background: rgba(30,58,30,.95); }

.cg-gap-panel {
  position: fixed;
  bottom: 84px;
  left: 20px;
  z-index: 9999;
  width: 240px;
  background: rgba(14,26,14,.97);
  border: 1px solid rgba(201,168,76,.45);
  border-radius: 10px;
  padding: 14px 16px 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 32px rgba(0,0,0,.6);
  display: none;
}
.cg-gap-panel.open { display: block; }
.cg-gp-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--cg-gold);
  margin-bottom: 12px;
  text-align: center;
}
.cg-gp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cg-gp-row label {
  flex: 0 0 80px;
  font-size: 11px;
  color: var(--cg-muted);
  font-family: 'Jost', sans-serif;
}
.cg-gp-row input[type=range] {
  flex: 1;
  accent-color: var(--cg-gold);
  cursor: pointer;
}
.cg-sp-val {
  flex: 0 0 32px;
  font-size: 11px;
  color: var(--cg-cream);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cg-gp-save {
  display: block;
  width: 100%;
  background: var(--cg-gold);
  border: none;
  border-radius: 4px;
  color: #0e1a0e;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 8px;
  cursor: pointer;
  transition: background .15s;
  margin-top: 4px;
}
.cg-gp-save:hover { background: var(--cg-gold-light); }

/* ── Section header edit button ───────────────────────────── */
.cg-sh-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 12px;
}
.cg-sh-move-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--cg-cream);
  font-size: .8rem;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  transition: background .15s, border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-sh-move-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
.cg-sh-edit-btn {
  background: none;
  border: 1px solid rgba(201,168,76,.35);
  color: var(--cg-gold);
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  margin-left: 12px;
}
.cg-sh-edit-btn:hover { background: rgba(201,168,76,.12); border-color: var(--cg-gold); }

/* ── Section header edit panel ────────────────────────────── */
.cg-sh-edit-panel {
  background: rgba(14,26,14,.96);
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 0 0 10px 10px;
  padding: 16px 20px 14px;
  margin-top: -2px;
  backdrop-filter: blur(8px);
}
.cg-shep-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  margin-bottom: 12px;
}
.cg-shep-f { display: flex; flex-direction: column; gap: 4px; }
.cg-shep-lg { flex: 1 1 160px; }
.cg-shep-f label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--cg-muted);
  font-family: 'Jost', sans-serif;
}
.cg-shep-num,
.cg-shep-before,
.cg-shep-em {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  color: var(--cg-cream);
  padding: 7px 10px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  transition: border-color .15s;
  box-sizing: border-box;
}
.cg-shep-num   { width: 52px; }
.cg-shep-before { width: 90px; }
.cg-shep-em    { width: 100%; }
.cg-shep-num:focus, .cg-shep-before:focus, .cg-shep-em:focus {
  outline: none;
  border-color: rgba(201,168,76,.5);
}
.cg-shep-styles { display: flex; gap: 4px; }
.cg-shep-sbtn {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  background: rgba(255,255,255,.07);
  color: var(--cg-cream);
  font-family: Georgia, serif;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cg-shep-italic { font-style: italic; }
.cg-shep-bold   { font-weight: 700; }
.cg-shep-sbtn.active { background: var(--cg-gold); color: #0e1a0e; border-color: var(--cg-gold); }
.cg-shep-sbtn:hover:not(.active) { background: rgba(255,255,255,.15); }

.cg-shep-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cg-shep-save {
  background: var(--cg-gold); border: none; border-radius: 4px;
  color: #0e1a0e; font-family: 'Jost', sans-serif; font-size: 12px;
  font-weight: 500; padding: 7px 18px; cursor: pointer; transition: background .15s;
}
.cg-shep-save:hover { background: var(--cg-gold-light); }
.cg-shep-cancel {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px; color: var(--cg-cream); font-family: 'Jost', sans-serif;
  font-size: 12px; padding: 7px 14px; cursor: pointer; transition: background .15s;
}
.cg-shep-cancel:hover { background: rgba(255,255,255,.18); }
.cg-shep-del {
  margin-left: auto; background: none; border: none;
  color: #f5a5a5; font-family: 'Jost', sans-serif; font-size: 12px;
  cursor: pointer; padding: 4px 0; transition: color .15s;
}
.cg-shep-del:hover { color: #fff; }

/* ── Add New Section button + panel ──────────────────────── */
.cg-add-section-wrap { padding: 24px 0 8px; }
.cg-add-section-btn {
  display: block; width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 2px dashed rgba(201,168,76,.3);
  border-radius: 6px;
  color: var(--cg-gold);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.cg-add-section-btn:hover {
  border-color: var(--cg-gold);
  background: rgba(201,168,76,.06);
}
.cg-add-section-panel {
  background: var(--cg-card);
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 8px;
}
.cg-asp-title {
  font-family: var(--cg-heading-font), serif;
  font-size: 1.1rem; font-weight: 300;
  color: var(--cg-cream); margin-bottom: 12px;
}
.cg-asp-em, .cg-asp-before {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; color: var(--cg-cream);
  padding: 9px 12px; font-family: 'Jost', sans-serif;
  font-size: 13px; font-weight: 300;
  margin-bottom: 8px; transition: border-color .15s;
}
.cg-asp-em:focus, .cg-asp-before:focus { outline: none; border-color: rgba(201,168,76,.5); }
.cg-asp-em::placeholder, .cg-asp-before::placeholder { color: var(--cg-muted); }
.cg-asp-actions { display: flex; gap: 8px; margin-top: 4px; }
.cg-asp-add {
  background: var(--cg-gold); border: none; border-radius: 4px;
  color: #0e1a0e; font-family: 'Jost', sans-serif; font-size: 13px;
  font-weight: 500; padding: 9px 22px; cursor: pointer; transition: background .2s;
}
.cg-asp-add:hover { background: var(--cg-gold-light); }
.cg-asp-add:disabled { opacity: .5; cursor: not-allowed; }
.cg-asp-cancel {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px; color: var(--cg-cream); font-family: 'Jost', sans-serif;
  font-size: 13px; padding: 9px 16px; cursor: pointer; transition: background .2s;
}
.cg-asp-cancel:hover { background: rgba(255,255,255,.18); }

/* ── Label / Name edit popup ──────────────────────────────── */
.cg-label-popup {
  /* position set to fixed via JS */
  background: rgba(14,26,14,.97);
  border: 1px solid rgba(201,168,76,.45);
  border-radius: 8px;
  padding: 14px;
  z-index: 100000;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 32px rgba(0,0,0,.6);
  width: 250px;
}
.cg-lp-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--cg-gold);
  text-align: center;
  margin-bottom: 10px;
}
.cg-lp-lbl {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--cg-muted);
  margin-bottom: 4px;
}
.cg-lp-cat,
.cg-lp-name {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  color: var(--cg-cream);
  padding: 7px 10px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  margin-bottom: 8px;
  box-sizing: border-box;
  transition: border-color .15s;
}
.cg-lp-cat:focus,
.cg-lp-name:focus {
  outline: none;
  border-color: rgba(201,168,76,.5);
}
.cg-lp-cat::placeholder,
.cg-lp-name::placeholder { color: rgba(138,148,136,.8); }
.cg-lp-section {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  color: var(--cg-cream);
  padding: 7px 10px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  margin-bottom: 8px;
  box-sizing: border-box;
  cursor: pointer;
}
.cg-lp-section:focus { outline: none; border-color: rgba(201,168,76,.5); }
.cg-lp-section option { background: #162316; color: var(--cg-cream); }
.cg-lp-note {
  font-size: 10px;
  color: var(--cg-gold-light);
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 4px;
  padding: 5px 8px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.cg-lp-btns {
  display: flex;
  gap: 6px;
}
.cg-lp-save {
  flex: 1;
  background: var(--cg-gold);
  border: none;
  border-radius: 4px;
  color: #0e1a0e;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 7px 10px;
  cursor: pointer;
  transition: background .15s;
}
.cg-lp-save:hover { background: var(--cg-gold-light); }
.cg-lp-cancel {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  color: var(--cg-cream);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background .15s;
}
.cg-lp-cancel:hover { background: rgba(255,255,255,.2); }