/* quilt-corner.css — illustrated "Quilt Shop" storefront landing + themed
   category gallery pages (Sage 2026-07-04). Storybook look adapted from Mike's
   reference illustration: teal clapboard shop, string lights, hung signs, quilt
   squares as category backdrops. Each category page carries its own palette
   (set by a body theme class) rather than the site's brown/beige. */

/* ============================ shared tokens ============================ */
:root{
  --qc-cedar:#b07d43; --qc-cedar-dk:#875d2e; --qc-sign:#efe3c4;
  --qc-teal:#57a89e; --qc-teal-dk:#356b64; --qc-inkline:#3b2c22;
}

/* ============================ MAIN STOREFRONT ============================ */
.qc-store{ max-width:1240px; margin:0 auto; padding:20px 16px 48px; }
.qc-store__eyebrow{
  text-align:center; font-size:13px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--qc-teal-dk); font-weight:700; margin:4px 0 8px; font-family:var(--font-body);
}
.qc-store__dek{
  text-align:center; max-width:60ch; margin:0 auto 18px; font-size:17px; line-height:1.5;
  color:#5a4a3a; text-wrap:balance; font-family:var(--font-body);
}
.qc-scene{
  width:100%; height:auto; display:block; border-radius:16px;
  background:linear-gradient(#f3ead2,#eaddbe);
  box-shadow:0 18px 44px rgba(59,44,34,.22);
}
/* interactive category segments in the SVG */
.qc-scene a.cat{ cursor:pointer; outline:none; }
.qc-scene a.cat .lift{
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), filter .28s ease;
  transform-box:fill-box; transform-origin:center bottom;
}
.qc-scene a.cat:hover .lift,
.qc-scene a.cat:focus-visible .lift{ transform:translateY(-9px) scale(1.02);
  filter:drop-shadow(0 12px 14px rgba(59,44,34,.32)); }
.qc-scene .focusring{ opacity:0; }
.qc-scene a.cat:focus-visible .focusring{ opacity:1; }
.qc-scene .plaque{ transition:fill .2s ease; }
.qc-scene a.cat:hover .plaque,
.qc-scene a.cat:focus-visible .plaque{ fill:#fff; }
.qc-bulb{ transform-box:fill-box; transform-origin:center; animation:qc-tw 3.4s ease-in-out infinite; }
.qc-bulb:nth-child(3n){ animation-delay:-1.1s; }
.qc-bulb:nth-child(3n+1){ animation-delay:-2.2s; }
@keyframes qc-tw{ 0%,100%{opacity:1} 50%{opacity:.62} }

/* legend row beneath the scene */
.qc-legend{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:26px 2px 0; }
.qc-legend a{
  border-radius:12px; padding:13px; text-decoration:none; color:#2c2419;
  border:1.5px solid rgba(59,44,34,.14); box-shadow:0 4px 12px rgba(59,44,34,.12);
  transition:transform .18s ease, box-shadow .18s ease; display:block;
}
.qc-legend a:hover{ transform:translateY(-3px); box-shadow:0 9px 20px rgba(59,44,34,.2); }
.qc-legend h3{ margin:8px 0 3px; font-size:16px; font-family:var(--font-display); }
.qc-legend p{ margin:0; font-size:12.5px; line-height:1.4; color:#5a4a3a; font-family:var(--font-body); }
.qc-legend .sw{ display:flex; gap:4px; }
.qc-legend .sw span{ width:15px; height:15px; border-radius:3px; border:1px solid rgba(0,0,0,.12); }
@media(max-width:760px){ .qc-legend{ grid-template-columns:repeat(2,1fr); } }

/* ============================ CATEGORY PAGES ============================ */
/* Palette variables are set by the per-page theme class (below). */
.qc-cat{ --qc-bg:#f3ead2; --qc-bg2:#e6d7b6; --qc-accent:#356b64; --qc-ink:#3b2c22;
  --qc-p1:#d1495b; --qc-p2:#5b8ac9; --qc-p3:#7a9b57; --qc-p4:#e9a23b; }
body.qc-cat{ background:linear-gradient(160deg,var(--qc-bg),var(--qc-bg2)); }

.qc-hero{ position:relative; text-align:center; padding:8px 16px 20px; overflow:hidden; }
.qc-lights{ display:block; width:100%; max-width:1100px; height:44px; margin:0 auto; }
.qc-banner{ max-width:1100px; margin:2px auto 0; }
.qc-banner__sign{
  display:inline-block; background:var(--qc-sign); border:7px solid var(--qc-cedar);
  border-radius:14px; padding:12px 40px 14px; box-shadow:0 10px 24px rgba(59,44,34,.24);
  position:relative;
}
.qc-banner__sign::before,.qc-banner__sign::after{
  content:""; position:absolute; top:-30px; width:4px; height:26px; background:#463a2b;
}
.qc-banner__sign::before{ left:28%; } .qc-banner__sign::after{ right:28%; }
.qc-banner__title{
  margin:0; font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:clamp(30px,5vw,50px); color:var(--qc-ink); letter-spacing:.5px; line-height:1.05;
}
.qc-banner__sub{
  margin:12px auto 0; max-width:58ch; font-family:var(--font-body); font-size:16px;
  line-height:1.5; color:var(--qc-ink); opacity:.86; text-wrap:balance;
}
.qc-motifs{ display:flex; justify-content:center; gap:26px; margin:16px 0 4px; flex-wrap:wrap; }
.qc-motif{ width:96px; height:96px; filter:drop-shadow(0 6px 8px rgba(59,44,34,.22)); }
.qc-back{
  display:inline-block; margin:6px 0 0; font-family:var(--font-body); font-weight:600;
  font-size:14px; color:var(--qc-accent); text-decoration:none;
}
.qc-back:hover{ text-decoration:underline; }

/* gallery card */
.qc-gallery-wrap{ max-width:1120px; margin:14px auto 40px; padding:0 16px; }
.qc-gallery-card{
  background:rgba(255,255,255,.72); border:1.5px solid rgba(59,44,34,.14);
  border-radius:16px; padding:20px 18px 24px; box-shadow:0 10px 30px rgba(59,44,34,.14);
  backdrop-filter:saturate(1.05);
}
.qc-gallery-card h2{
  font-family:var(--font-display); font-size:22px; color:var(--qc-accent);
  margin:0 0 4px; text-align:center;
}
.qc-gallery-card .qc-count{ text-align:center; font-family:var(--font-body); font-size:13px;
  color:var(--qc-ink); opacity:.7; margin:0 0 14px; }

/* 1.5" (~144px) tiles, centered */
.qc-cat .sg-grid{
  display:grid; grid-template-columns:repeat(auto-fill, 144px); justify-content:center; gap:14px;
}
.qc-cat .sg-grid .gallery-thumb{
  border-radius:8px; border:3px solid #fff; box-shadow:0 4px 12px rgba(59,44,34,.2);
  background:var(--qc-sign);
}
.qc-cat .sg-grid .gallery-thumb:hover{ box-shadow:0 8px 20px rgba(59,44,34,.34); }
.qc-cat .sg-grid .gallery-thumb-caption{ background:#fff; color:#4a3f30; }
.qc-cat .gallery-empty{ text-align:center; font-family:var(--font-body); color:var(--qc-ink);
  opacity:.8; padding:30px 10px; font-style:italic; }
.qc-cat .sg-upload{ text-align:center; margin-bottom:14px; }
@media(max-width:520px){
  .qc-cat .sg-grid{ grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); }
}

/* ---- per-category palettes ---- */
body.qc-baby{ --qc-bg:#fdeef2; --qc-bg2:#f4d3e0; --qc-accent:#c65b86; --qc-ink:#6b4152;
  --qc-p1:#f6c9d6; --qc-p2:#cfe3f3; --qc-p3:#fbe8b8; --qc-p4:#b9d9c4; }
body.qc-wedding{ --qc-bg:#fbf7ef; --qc-bg2:#ecdfc6; --qc-accent:#a97e2c; --qc-ink:#6b5a3a;
  --qc-p1:#fbf7ee; --qc-p2:#e7d2a8; --qc-p3:#d9c9a6; --qc-p4:#b07d43; }
body.qc-nielsenhaven{ --qc-bg:#e7f2ef; --qc-bg2:#cbe2db; --qc-accent:#2f6a62; --qc-ink:#2c4a45;
  --qc-p1:#356b64; --qc-p2:#d1495b; --qc-p3:#e9a23b; --qc-p4:#f3ead1; }
body.qc-christmas{ --qc-bg:#eef4e9; --qc-bg2:#d8e7cf; --qc-accent:#1f7a4d; --qc-ink:#33402c;
  --qc-p1:#c0392b; --qc-p2:#1f7a4d; --qc-p3:#e0a92e; --qc-p4:#eef2e6; }
body.qc-personal{ --qc-bg:#fbeede; --qc-bg2:#f0d8ba; --qc-accent:#b5651d; --qc-ink:#5a4230;
  --qc-p1:#d1495b; --qc-p2:#5b8ac9; --qc-p3:#7a9b57; --qc-p4:#7d5ba6; }

@media(prefers-reduced-motion:reduce){ .qc-bulb{ animation:none; } .qc-scene a.cat .lift{ transition:none; } }

/* ============================ PER-QUILT DETAIL PAGE ============================
   /quilt-corner/quilt/?cat=<section>&item=<filename>
   Left 3/4 = quilter's reflections (top) + the quilt photo; right 1/4 = the
   reveal-on-demand member comment stream. Inherits the category palette from the
   body theme class (qc-cat qc-<section>). Classes are prefixed qcd- to avoid any
   collision with the storefront / category-gallery styles above. */
.qcd{ max-width:1240px; margin:0 auto; padding:14px 16px 60px; }

/* toolbar: back + prev/next + reveal-comments control */
.qcd-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 0 14px; }
.qcd-bar .qc-back{ margin:0; }
.qcd-nav{ display:flex; gap:8px; margin-left:auto; }
.qcd-nav a, .qcd-toggle{
  font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer;
  border-radius:999px; padding:8px 14px; text-decoration:none; border:1.5px solid transparent;
}
.qcd-nav a{ color:var(--qc-accent); border-color:rgba(59,44,34,.16); background:rgba(255,255,255,.6); }
.qcd-nav a:hover{ background:#fff; }
.qcd-nav a[aria-disabled="true"]{ opacity:.4; pointer-events:none; }
.qcd-toggle{
  display:inline-flex; align-items:center; gap:8px; border:none; color:#fff;
  background:var(--qc-accent); box-shadow:0 5px 14px rgba(59,44,34,.24);
}
.qcd-toggle .n{ background:rgba(255,255,255,.28); border-radius:999px; padding:1px 9px; font-size:.86em; }
.qcd-toggle.is-open{ background:var(--qc-cedar-dk); }

/* two-column stage; comments hidden until opened */
.qcd-main{ display:grid; grid-template-columns:1fr; gap:22px; align-items:start;
  transition:grid-template-columns .28s ease; }
.qcd-main.comments-open{ grid-template-columns:3fr 1fr; }
.qcd-main:not(.comments-open) .qcd-comments{ display:none; }
.qcd-stage{ min-width:0; }

/* reflections card */
.qcd-reflect{
  background:rgba(255,255,255,.74); border:1.5px solid rgba(59,44,34,.14); border-radius:16px;
  box-shadow:0 8px 24px rgba(59,44,34,.12); padding:18px 22px; margin:0 0 18px;
}
.qcd-reflect h2{
  font-family:var(--font-display); font-size:20px; color:var(--qc-accent); margin:0;
}
/* heading line: title left-justified, quilter-name pill right-justified */
.qcd-reflect-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap;
  padding-bottom:9px; margin-bottom:10px; border-bottom:2px dashed rgba(59,44,34,.18);  /* running-stitch rule */
}
.qcd-quilter{
  display:inline-flex; align-items:center; gap:8px; margin-left:auto;
  background:rgba(255,255,255,.72); border:1.5px solid rgba(59,44,34,.2); border-radius:999px;
  padding:6px 16px; font-family:var(--font-body); font-size:14px; color:var(--qc-ink); max-width:100%;
}
.qcd-quilter .qcd-quilter-label{ font-weight:700; color:var(--qc-accent); white-space:nowrap; }
/* the name value matches the "Quilter's reflections…" heading (display face, 20px, accent) */
.qcd-quilter .qcd-quilter-name{ font-family:var(--font-display); font-size:20px; line-height:1.1;
  color:var(--qc-accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qcd-quilter .qcd-quilter-empty{ font-style:italic; opacity:.6; }
.qcd-quilter.editable{ cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.qcd-quilter.editable:hover, .qcd-quilter.editable:focus-visible{ background:#fff; border-color:var(--qc-accent); outline:none; }
.qcd-quilter.editing{ padding:5px 8px 5px 14px; border-style:dashed; flex-wrap:wrap; }
.qcd-quilter-input{
  font-family:var(--font-body); font-size:14px; border:1.5px solid rgba(59,44,34,.25);
  border-radius:8px; padding:5px 10px; min-width:160px; background:#fffdf8; color:var(--qc-ink);
}
.qcd-quilter-input:focus{ outline:none; border-color:var(--qc-accent); }
@media(max-width:560px){ .qcd-quilter{ margin-left:0; } }

/* ---- post-upload "quilter's name?" pop-out (category pages) ---- */
.qcup-overlay{ position:fixed; inset:0; z-index:1200; background:rgba(40,30,15,.5);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.qcup-card{ background:var(--qc-bg,#fbf7ef); color:var(--qc-ink,#3b2c22); width:min(560px,100%);
  max-height:calc(100vh - 48px); overflow:auto; border-radius:16px; padding:22px 22px 20px;
  border:1.5px solid rgba(59,44,34,.18); box-shadow:0 18px 48px rgba(20,12,4,.4); }
.qcup-title{ font-family:var(--font-display); font-size:22px; color:var(--qc-accent); margin:0 0 4px; }
.qcup-sub{ font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--qc-ink); opacity:.82; margin:0 0 16px; }
.qcup-list{ display:flex; flex-direction:column; gap:12px; }
.qcup-row{ display:flex; gap:12px; align-items:center; }
.qcup-thumb{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:2px solid #fff;
  box-shadow:0 2px 8px rgba(59,44,34,.2); flex:0 0 auto; }
.qcup-fields{ flex:1; min-width:0; }
.qcup-cap{ font-family:var(--font-body); font-size:12.5px; color:var(--qc-ink); opacity:.72;
  margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qcup-input{ width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:15px;
  border:1.5px solid rgba(59,44,34,.22); border-radius:9px; padding:8px 11px; background:#fffdf8; color:var(--qc-ink); }
.qcup-input:focus{ outline:none; border-color:var(--qc-accent); }
.qcup-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.qcd-reflect .qcd-body{ font-family:var(--font-body); font-size:16.5px; line-height:1.7;
  color:var(--qc-ink); white-space:pre-wrap; min-height:3.4em; }
.qcd-reflect .qcd-body.empty{ min-height:0; font-style:italic; font-size:14.5px; opacity:.66; }
.qcd-reflect .qcd-editrow{ margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.qcd-reflect .qcd-byline{ font-size:12.5px; color:var(--qc-ink); opacity:.6; font-family:var(--font-body); }
.qcd-reflect textarea{
  width:100%; min-height:5em; font-family:var(--font-body); font-size:16px; line-height:1.6;
  border:1.5px solid rgba(59,44,34,.2); border-radius:10px; padding:11px 13px; resize:vertical; background:#fffdf8;
}
.qcd-hint{ font-family:var(--font-body); font-size:13px; font-style:italic; color:var(--qc-ink); opacity:.62; }

/* photo plate */
.qcd-photo{
  background:#fff; border:8px solid #fff; border-radius:12px; box-shadow:0 12px 34px rgba(59,44,34,.24);
  text-align:center; overflow:hidden;
}
.qcd-photo img{ width:100%; height:auto; max-height:74vh; object-fit:contain; display:block; margin:0 auto; border-radius:5px; }
.qcd-photo .qcd-cap{ font-family:var(--font-body); font-style:italic; font-size:14px;
  color:#5a4a3a; padding:12px 10px 4px; }
.qcd-photo.loading{ min-height:320px; display:flex; align-items:center; justify-content:center; }

/* buttons */
.qcd-btn{ font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer;
  border-radius:9px; padding:9px 16px; border:1.5px solid transparent; line-height:1.2; }
.qcd-btn-primary{ background:var(--qc-accent); color:#fff; }
.qcd-btn-primary:hover{ filter:brightness(.94); }
.qcd-btn-ghost{ background:transparent; color:var(--qc-accent); border-color:rgba(59,44,34,.2); }
.qcd-btn-ghost:hover{ background:rgba(255,255,255,.6); }
.qcd-btn-sm{ padding:7px 13px; font-size:13px; }

/* ---- comment stream ---- */
.qcd-comments{
  background:#fff; border:1.5px solid rgba(59,44,34,.14); border-radius:16px;
  box-shadow:0 10px 30px rgba(59,44,34,.16); display:flex; flex-direction:column;
  position:sticky; top:18px; max-height:calc(100vh - 36px);
}
.qcd-c-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(59,44,34,.12); }
.qcd-c-head h3{ margin:0; font-family:var(--font-display); font-size:17px; color:var(--qc-accent); margin-right:auto; }
.qcd-c-close{ background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:#8a7d6a; }
.qcd-composer{ padding:13px 16px; border-bottom:1px solid rgba(59,44,34,.1); }
.qcd-composer textarea{
  width:100%; min-height:3em; font-family:var(--font-body); font-size:15px; border:1.5px solid rgba(59,44,34,.2);
  border-radius:10px; padding:10px 12px; resize:vertical; background:#fffdf8;
}
.qcd-composer .row{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:9px; }
.qcd-note{ font-family:var(--font-body); font-size:13px; font-style:italic; color:#8a7d6a; }
.qcd-c-list{ overflow-y:auto; padding:6px 8px 14px; }
.qcd-c-empty{ font-family:var(--font-body); font-style:italic; color:#8a7d6a; text-align:center; padding:24px 16px; font-size:14.5px; }

.qcd-comment{ display:flex; gap:10px; padding:11px 12px 5px; }
.qcd-avatar{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; font-size:14px; font-family:var(--font-display); user-select:none; }
.qcd-avatar.sm{ width:29px; height:29px; font-size:12px; }
.qcd-c-main{ min-width:0; flex:1; }
.qcd-c-by{ font-family:var(--font-body); font-weight:700; font-size:14.5px; color:var(--qc-ink); }
.qcd-c-time{ font-family:var(--font-body); font-size:12px; color:#9a8f7b; margin-left:7px; }
.qcd-c-text{ font-family:var(--font-body); font-size:15px; line-height:1.55; margin:2px 0 5px; color:#2c2419;
  white-space:pre-wrap; overflow-wrap:anywhere; }
.qcd-c-actions{ display:flex; gap:15px; }
.qcd-c-actions button{ background:none; border:none; color:var(--qc-accent); cursor:pointer;
  font-family:var(--font-body); font-size:13px; font-weight:600; padding:0; }
.qcd-c-actions button:hover{ text-decoration:underline; }
.qcd-replies{ margin:6px 0 2px; padding-left:12px; border-left:2px solid rgba(59,44,34,.14); }
.qcd-replybox{ padding:6px 0 8px; }
.qcd-replybox textarea{ width:100%; min-height:2.4em; font-family:var(--font-body); font-size:14px;
  border:1.5px solid rgba(59,44,34,.2); border-radius:9px; padding:8px 11px; resize:vertical; background:#fffdf8; }
.qcd-replybox .row{ display:flex; gap:8px; margin-top:7px; }

/* mobile: comments become a bottom sheet, single column */
@media(max-width:860px){
  .qcd-main.comments-open{ grid-template-columns:1fr; }
  .qcd-toggle{ position:fixed; right:16px; bottom:16px; z-index:50; }
  .qcd-main.comments-open .qcd-comments{
    position:fixed; inset:auto 0 0 0; top:12vh; z-index:60; border-radius:18px 18px 0 0;
    max-height:88vh; box-shadow:0 -8px 30px rgba(59,44,34,.3);
  }
  .qcd-sheet-backdrop{ position:fixed; inset:0; background:rgba(40,30,15,.42); z-index:55; }
}
@media(min-width:861px){ .qcd-sheet-backdrop{ display:none; } }
.qcd-footnote{ text-align:center; font-family:var(--font-body); font-size:12.5px; font-style:italic;
  color:var(--qc-ink); opacity:.5; margin:26px 0 0; }

/* ── Feedback bubble anchor strip (Sage, 2026-07-19) ──
   .qc-store / .qc-hero wrap large decorative SVG scenes, so the bubble anchors
   to this small dedicated strip instead of the whole illustrated block. */
.qc-fb-anchor { min-height: 34px; margin: 4px 0 8px; }

/* Single-quilt detail page: the bubble joins the existing qcd-bar (back link +
   prev/next + comments toggle), pushed to the right via flex auto-margin. */
.qcd-bar .fb-bubble { position: static; margin-left: auto; }