:root {
  --mint: #9CE3BC;
  --peach: #FFC2A8;
  --sky: #B8E2F7;
  --sun: #FFE066;
  --lav: #D8C7F2;
  --ink: #2A2A28;
  --white: #FFFFFF;
  --line: #ECECEA;
  --radius: 18px;
}

* { box-sizing: border-box; }
/* A `display` rule silently defeats the hidden attribute — this keeps
   hidden meaning hidden no matter what a component sets. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { width: min(1180px, 92vw); margin: 0 auto; }

/* Etsy comparison banner */
.etsy-banner {
  background: #F1641E; color: var(--white); border-bottom: 4px solid var(--ink);
  text-align: center; font-weight: 700; font-size: 14px; letter-spacing: .2px;
  padding: 10px 16px;
}

/* Header */
.site-header { border-bottom: 4px solid var(--ink); position: sticky; top: 0; background: var(--white); z-index: 20; }
.header-inner { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; flex-wrap: wrap; }
.brand {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: -0.5px; text-decoration: none; line-height: 1;
}
.brand span { color: var(--mint); -webkit-text-stroke: 1px var(--ink); margin-left: 6px; }
.brand-tag { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; opacity: .7; }

/* Hero */
.hero { background: var(--mint); border-bottom: 4px solid var(--ink); padding: clamp(40px, 7vw, 80px) 0; }
.hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(34px, 6.5vw, 68px);
  line-height: .98; margin: 0 0 16px; letter-spacing: -1.5px;
}
.hero .hl { background: var(--white); padding: 0 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero p { font-size: clamp(16px, 2vw, 20px); font-weight: 500; max-width: 620px; margin: 0; }
.hero-logo {
  display: block; height: auto; width: min(460px, 82vw);
  background: var(--white); border: 3px solid var(--ink); border-radius: 16px;
  padding: 16px 22px; box-shadow: 6px 6px 0 var(--ink); margin: 0 0 26px;
}

/* Category nav (sticky filter pills) */
.catnav { position: sticky; top: var(--header-h, 69px); z-index: 15; background: var(--white); border-bottom: 3px solid var(--ink); }
.catnav .pills { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; }
.pill {
  flex: 0 0 auto; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap;
}
.pill.active { background: var(--ink); color: var(--white); }

/* Category sections */
.cat-section { padding-top: 24px; }
.cat-head {
  font-family: 'Archivo Black', sans-serif; font-size: clamp(22px, 3.5vw, 32px);
  margin: 6px 0 0; display: flex; align-items: center; gap: 10px;
}
.cat-head .cat-count {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  background: var(--sun); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px;
}

/* Grid */
.grid {
  display: grid; gap: 16px; padding: 18px 0 24px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
@media (min-width: 620px) {
  .grid { gap: 22px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.loading { grid-column: 1 / -1; text-align: center; opacity: .6; padding: 60px 0; }
.card {
  border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden;
  background: var(--white); display: flex; flex-direction: column; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--ink); }
.card-img { aspect-ratio: 1 / 1; background: var(--line); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.card-price { font-family: 'Archivo Black', sans-serif; font-size: 18px; }
.card-cta { font-weight: 700; font-size: 13px; background: var(--sun); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 12px; }

/* Footer */
.site-footer { border-top: 4px solid var(--ink); background: var(--sky); padding: 32px 0; margin-top: 40px; }
.site-footer p { margin: 4px 0; font-weight: 500; }
.site-footer .fine { font-size: 13px; opacity: .7; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(42,42,40,.55); }
.modal-card {
  position: relative; background: var(--white); border: 4px solid var(--ink);
  border-radius: 22px; width: min(900px, 96vw); max-height: 92vh; overflow: auto;
}
.modal-close {
  position: absolute; top: 12px; right: 14px; z-index: 3; width: 38px; height: 38px;
  border-radius: 50%; border: 2px solid var(--ink); background: var(--peach);
  font-size: 22px; cursor: pointer; line-height: 1;
}
.modal-grid { display: grid; grid-template-columns: 1.1fr 1fr; }
@media (max-width: 720px) { .modal-grid { grid-template-columns: 1fr; } }
.modal-media { padding: 18px; }
#m-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 3px solid var(--ink); border-radius: 14px; background: var(--line); }
.thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.thumbs img { width: 54px; height: 54px; object-fit: cover; border: 2px solid var(--ink); border-radius: 8px; cursor: pointer; opacity: .75; }
.thumbs img.active { opacity: 1; outline: 2px solid var(--mint); }
.modal-info { padding: 22px 24px 26px; border-left: 3px solid var(--ink); }
@media (max-width: 720px) { .modal-info { border-left: none; border-top: 3px solid var(--ink); } }
.modal-info h2 { font-family: 'Archivo Black', sans-serif; font-size: 22px; line-height: 1.1; margin: 6px 0 8px; }
.price { font-family: 'Archivo Black', sans-serif; font-size: 26px; margin-bottom: 10px; }
.share-btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
  background: var(--sky); border: 2px solid var(--ink); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 16px;
}
.share-btn:hover { background: var(--mint); }
.variations .field select {
  width: 100%; border: 2px solid var(--ink); border-radius: 10px; padding: 10px;
  font: inherit; background: var(--white); cursor: pointer;
}
.desc { margin-bottom: 16px; }
.desc summary { font-weight: 700; cursor: pointer; }
.desc #m-desc { white-space: pre-wrap; font-size: 14px; line-height: 1.5; margin-top: 8px; opacity: .9; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field em { font-weight: 500; opacity: .6; font-style: normal; }
.field textarea, .field input[type=file] { width: 100%; border: 2px solid var(--ink); border-radius: 10px; padding: 10px; font: inherit; }
.file-status { display: block; font-size: 13px; margin-top: 6px; font-weight: 600; }
.qty-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.qty-row input { width: 70px; border: 2px solid var(--ink); border-radius: 10px; padding: 8px; font: inherit; }
.qty-row label { font-weight: 700; }
.buy-btn {
  width: 100%; font-family: 'Archivo Black', sans-serif; font-size: 18px;
  background: var(--sun); border: 3px solid var(--ink); border-radius: 12px;
  padding: 14px; cursor: pointer; transition: transform .1s ease, box-shadow .1s ease;
}
.buy-btn:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--ink); }
.buy-btn:disabled { opacity: .6; cursor: wait; }
.checkout-note { font-size: 12.5px; opacity: .7; margin: 12px 0 0; line-height: 1.4; }

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .header-inner { padding: 13px 0; }
  .brand-tag { display: none; }
  .hero { padding: 30px 0 34px; }
  .catnav .pills { padding: 10px 0; }
  .pill { font-size: 13px; padding: 7px 13px; }
  .cat-section { padding-top: 18px; }
  .card-title { font-size: 13.5px; }
  .card-body { padding: 12px 12px 14px; gap: 6px; }
  .card-price { font-size: 16px; }
  .card-cta { font-size: 11px; padding: 5px 9px; }
  .modal { padding: 0; }
  .modal-card { width: 100vw; max-height: 100vh; border-width: 0; border-radius: 0; }
  .modal-close { top: 8px; right: 10px; }
  .modal-media { padding: 14px 14px 0; }
  .modal-info { padding: 18px 16px 28px; }
}
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; }
  .card:active { transform: scale(.99); }
}

/* ===========================================================================
   Direct-priced napkin page  (/printing/custom-napkins)
   =========================================================================== */
.np-hero { background: var(--sky); border-bottom: 4px solid var(--ink); padding: clamp(28px, 5vw, 56px) 0; }
.np-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.np-hero-media img { width: 100%; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); background: var(--white); display: block; }
.np-hero-media .thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; }
.np-hero-media .thumbs img { width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--ink); border-radius: 10px; cursor: pointer; box-shadow: none; opacity: .6; }
.np-hero-media .thumbs img.active { opacity: 1; box-shadow: 3px 3px 0 var(--ink); }
.np-back { display: inline-block; font-weight: 700; font-size: 14px; text-decoration: none; margin-bottom: 14px; }
.np-hero-copy h1 { font-family: 'Archivo Black', sans-serif; font-size: clamp(28px, 4.4vw, 46px); line-height: 1; letter-spacing: -1px; margin: 0 0 14px; }
.np-hero-copy p { font-size: 17px; font-weight: 500; margin: 0 0 16px; }
.np-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.np-points li { font-weight: 600; font-size: 15px; padding-left: 26px; position: relative; }
.np-points li::before { content: '✓'; position: absolute; left: 0; font-weight: 800; }

.np-main { padding: clamp(24px, 4vw, 44px) 0 60px; display: grid; gap: 22px; }
.np-card { border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); background: var(--white); padding: clamp(18px, 3vw, 30px); }
.np-card h2 { font-family: 'Archivo Black', sans-serif; font-size: clamp(20px, 2.6vw, 27px); margin: 0 0 6px; letter-spacing: -.5px; }
.np-sub { margin: 0 0 16px; font-size: 14px; opacity: .75; font-weight: 500; }
.np-field { display: block; margin: 0 0 16px; }
.np-field > label, .np-field > span:first-child { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.np-field em { font-weight: 500; opacity: .65; font-style: normal; }
.np-field input[type=text], .np-field input[type=email], .np-field input[type=number], .np-field select, .np-field textarea,
.np-builder input[type=number], .np-builder select, .np-builder textarea {
  width: 100%; font: inherit; font-weight: 500; padding: 11px 13px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--white); color: var(--ink);
}
.np-note { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; opacity: .75; }

.np-qty-row { display: flex; gap: 14px; align-items: center; }
.np-qty-row input[type=range] { flex: 1; accent-color: var(--ink); height: 28px; }
.np-qty-row input[type=number] { width: 108px; flex: 0 0 auto; font-weight: 700; text-align: center; }
.np-tierbtns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.np-tier { font: inherit; font-weight: 700; font-size: 13px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.np-tier.active { background: var(--ink); color: var(--white); }
.np-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.np-nudge { background: var(--sun); border: 3px solid var(--ink); border-radius: 14px; padding: 13px 16px; margin: 4px 0 18px; font-weight: 500; font-size: 15px; }
.np-nudge-btn { font: inherit; font-weight: 700; font-size: 13px; background: var(--ink); color: var(--white); border: none; border-radius: 999px; padding: 6px 14px; margin-left: 8px; cursor: pointer; }

.np-price { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 16px 0; margin: 4px 0 10px; }
.np-unit { font-family: 'Archivo Black', sans-serif; font-size: clamp(30px, 5vw, 46px); letter-spacing: -1.5px; }
.np-unit-label { font-weight: 600; font-size: 14px; opacity: .7; margin-left: 6px; }
.np-price-total { text-align: right; }
.np-total-label { display: block; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; opacity: .6; }
.np-total { font-family: 'Archivo Black', sans-serif; font-size: clamp(22px, 3.4vw, 32px); letter-spacing: -1px; }
.np-etsy { margin: 12px 0 0; font-weight: 700; font-size: 15px; background: var(--mint); border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; display: inline-block; }
.np-etsy:empty { display: none; }
.np-etsy s { font-weight: 500; opacity: .75; }
.np-savings { margin: 10px 0 18px; font-weight: 600; font-size: 14px; }
.np-buy { width: 100%; }
.np-over { background: var(--lav); border: 3px solid var(--ink); border-radius: 14px; padding: 16px; }
.np-over p { margin: 0 0 10px; font-weight: 500; }
.np-quote-btn { display: inline-block; font-weight: 700; background: var(--ink); color: var(--white); text-decoration: none; border-radius: 999px; padding: 9px 18px; }

.np-table-wrap { overflow-x: auto; }
.np-table { width: 100%; border-collapse: collapse; font-weight: 500; }
.np-table th, .np-table td { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.np-table th { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; }
.np-table tr[data-qty] { cursor: pointer; }
.np-table tr[data-qty]:hover td { background: var(--line); }
.np-table tr.active td { background: var(--sun); font-weight: 700; }
.np-etsy-col { opacity: .6; font-weight: 500; }
.np-list, .np-steps { margin: 0; padding-left: 22px; display: grid; gap: 9px; font-weight: 500; }
.np-faq { border-top: 2px solid var(--line); padding: 12px 0; }
.np-faq summary { font-weight: 700; cursor: pointer; }
.np-faq p { margin: 10px 0 0; font-weight: 500; }

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

/* ===========================================================================
   Customer quote page  (/q/<ref>)
   =========================================================================== */
.q-main { padding: clamp(26px, 5vw, 54px) 0 60px; }
.q-head { margin-bottom: 26px; }
.q-ref { display: inline-block; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; background: var(--sun); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.q-head h1 { font-family: 'Archivo Black', sans-serif; font-size: clamp(28px, 5vw, 46px); line-height: 1; letter-spacing: -1.5px; margin: 0 0 8px; }
.q-company { font-weight: 600; opacity: .7; margin: 0 0 12px; }
.q-intro { font-size: 17px; font-weight: 500; max-width: 62ch; margin: 0; white-space: pre-wrap; }
.q-banner { border: 3px solid var(--ink); border-radius: 14px; padding: 13px 16px; font-weight: 600; margin-bottom: 20px; background: var(--peach); }
.q-banner-info { background: var(--sky); }

.q-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 24px; }
.q-card { border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); background: var(--white); overflow: hidden; display: flex; flex-direction: column; }
.q-card-img { aspect-ratio: 4/3; background: var(--line); }
.q-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.q-badge { align-self: flex-start; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; background: var(--mint); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 11px; }
.q-card h2 { font-family: 'Archivo Black', sans-serif; font-size: 21px; letter-spacing: -.5px; margin: 0; }
.q-spec { font-size: 14px; font-weight: 500; opacity: .75; margin: 0; }
.q-note { font-size: 14px; font-weight: 500; margin: 0; }
.q-prices { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 2px solid var(--line); padding-top: 12px; margin-top: auto; }
.q-unit b { font-family: 'Archivo Black', sans-serif; font-size: 22px; letter-spacing: -.5px; }
.q-unit span { font-size: 13px; font-weight: 600; opacity: .7; }
.q-total b { font-family: 'Archivo Black', sans-serif; font-size: 24px; letter-spacing: -.5px; }
.q-prices s { opacity: .5; font-weight: 600; }
.q-pick { width: 100%; margin-top: 4px; }
.q-fine { font-size: 13px; font-weight: 500; opacity: .7; margin: 6px 0; }
.q-error h1 { font-family: 'Archivo Black', sans-serif; font-size: 30px; }

/* ===========================================================================
   Quote builder  (/admin)  — private
   =========================================================================== */
.ad-main { padding: clamp(24px, 4vw, 44px) 0 70px; display: grid; gap: 20px; }
.ad-gate { max-width: 460px; }
.ad-gate h1 { font-family: 'Archivo Black', sans-serif; font-size: 28px; margin: 0 0 4px; }
.ad-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.ad-top h1 { font-family: 'Archivo Black', sans-serif; font-size: clamp(24px, 3.4vw, 34px); margin: 0; letter-spacing: -1px; }
.ad-top h2 { margin: 0; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ad-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 500; margin: 6px 0 16px; }
.ad-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ink); }
.ad-opt { border: 2px solid var(--ink); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: #FCFCFB; }
.ad-opt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ad-remove { font: inherit; font-weight: 700; font-size: 13px; background: none; border: none; text-decoration: underline; cursor: pointer; opacity: .7; }
.ad-preview { margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--line); font-size: 14px; font-weight: 500; }
.ad-warn { color: #A33; font-weight: 700; }
.ad-error { color: #A33; font-weight: 700; margin: 10px 0 0; }
.ad-result { margin-top: 18px; border-top: 3px solid var(--ink); padding-top: 16px; }
.ad-linkrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ad-linkrow input { flex: 1; min-width: 240px; font: inherit; font-weight: 600; padding: 11px 13px; border: 2px solid var(--ink); border-radius: 12px; }
.ad-linkrow .pill { text-decoration: none; display: inline-flex; align-items: center; }
.ad-recent-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 2px solid var(--line); padding: 11px 0; }
.ad-recent-row.expired { opacity: .5; }
.ad-recent-row .pill { text-decoration: none; }
.ad-recent-meta { font-size: 13px; font-weight: 500; opacity: .7; margin-top: 3px; }

/* ---- quote page: photos, design picker, lightbox ---- */
.q-section { margin-bottom: 30px; }
.q-section h2 { font-family: 'Archivo Black', sans-serif; font-size: clamp(19px, 2.4vw, 25px); letter-spacing: -.5px; margin: 0 0 4px; }
.q-section-sub { font-size: 14px; font-weight: 500; opacity: .7; margin: 0 0 14px; }

.q-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.q-shot { margin: 0; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 4px 4px 0 var(--ink); cursor: zoom-in; }
/* `cover` cropped the artwork out of its own photo — the whole point of these
   is that the customer can see the design, so nothing is cut off. */
.q-shot img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; background: var(--white); }
.q-shot figcaption { padding: 9px 12px; font-size: 13px; font-weight: 700; border-top: 2px solid var(--ink); }

.q-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.q-design {
  font: inherit; text-align: left; padding: 0; color: inherit;
  border: 3px solid var(--ink); border-radius: 14px; overflow: hidden;
  background: var(--white); box-shadow: 4px 4px 0 var(--ink);
  display: flex; flex-direction: column;
}
.q-design.chosen { background: var(--mint); box-shadow: 4px 4px 0 var(--ink), inset 0 0 0 3px var(--ink); }
.q-design-img { display: block; position: relative; cursor: zoom-in; }
.q-design-img img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--white); display: block; border-bottom: 2px solid var(--ink); }
.q-design-body { display: block; padding: 10px 12px; }
.q-design-body b { display: block; font-size: 15px; }
.q-design-note { display: block; font-size: 13px; font-weight: 500; opacity: .75; margin-top: 3px; }
.q-design-tick {
  display: block; width: 100%; font: inherit; padding: 10px 12px; cursor: pointer;
  border: 0; border-top: 2px solid var(--ink); background: var(--white); color: inherit;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
}
.q-design.chosen .q-design-tick { background: var(--ink); color: var(--white); }

/* A picture that opens should look like one. */
.q-shot-img { display: block; position: relative; cursor: zoom-in; }
.q-zoom-hint {
  position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 2px solid var(--ink); border-radius: 8px;
  font-size: 13px; font-weight: 700; line-height: 1; pointer-events: none;
}
.q-needs .q-designs { outline: 3px dashed #A33; outline-offset: 6px; border-radius: 14px; }
.q-design-warn { color: #A33; font-weight: 700; margin: 0 0 12px; }

.q-lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(20,20,18,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 5vw; }
.q-lightbox img { max-width: 100%; max-height: 78vh; border: 3px solid var(--white); border-radius: 12px; background: var(--white); }
.q-lightbox p { color: var(--white); font-weight: 600; margin: 0; }
.q-lightbox-close { position: absolute; top: 16px; right: 20px; font-size: 34px; line-height: 1; background: none; border: none; color: var(--white); cursor: pointer; }

/* ---- admin: uploaded thumbnails ---- */
.ad-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.ad-thumb { border: 2px solid var(--ink); border-radius: 12px; padding: 10px; display: grid; gap: 7px; background: #FCFCFB; }
.ad-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; border: 2px solid var(--ink); background: var(--white); }
.ad-thumb input { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 9px; border: 2px solid var(--ink); border-radius: 9px; width: 100%; }
.ad-thumb .ad-remove { justify-self: start; }
.ad-optimg { width: 90px; margin-top: 8px; border: 2px solid var(--ink); border-radius: 9px; display: block; }
.ad-recent-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.ad-recent-actions .pill { cursor: pointer; }

/* ---- proof approval, inline on each image ---- */
.q-production { background: var(--sky); border: 3px solid var(--ink); border-radius: 14px; padding: 12px 16px; font-weight: 600; font-size: 15px; margin: 0 0 18px; }
.q-shot.is-approved { background: var(--mint); }
.q-shot-actions { display: grid; gap: 8px; padding: 10px 12px 12px; border-top: 2px solid var(--ink); }
.q-shot-actions textarea {
  width: 100%; font: inherit; font-weight: 500; font-size: 14px; padding: 8px 10px;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); resize: vertical;
}
.q-approve {
  font: inherit; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; width: 100%;
}
.q-shot.is-approved .q-approve { background: var(--ink); color: var(--white); }
.q-approve[disabled] { opacity: .6; cursor: default; }
.q-submit-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.q-submit { width: auto; }
.q-submit[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.q-submit-bar.is-ready .q-submit { box-shadow: 4px 4px 0 var(--ink); }
.q-submit-status { font-size: 14px; font-weight: 600; }
.q-submit-status.is-ok { color: #2A6B47; }



/* ===========================================================================
   Quote page on a phone
   ---------------------------------------------------------------------------
   Full-bleed square images stacked one per screen turned a three-proof quote
   into six screens of scrolling before the price was even visible. Two up, with
   the image capped by viewport height rather than by aspect ratio, keeps the
   whole quote skimmable in a couple of flicks.
   =========================================================================== */
@media (max-width: 720px) {
  .q-main { padding: 20px 0 40px; }
  .q-section { margin-bottom: 22px; }
  .q-head h1 { font-size: clamp(24px, 7vw, 32px); }
  .q-intro { font-size: 15px; }

  .q-gallery, .q-designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .q-shot, .q-design, .q-card { box-shadow: 3px 3px 0 var(--ink); border-width: 2px; }
  .q-shot img { aspect-ratio: auto; height: 26vh; object-fit: contain; }
  .q-shot figcaption { padding: 6px 8px; font-size: 11.5px; line-height: 1.25; }
  .q-shot-actions { padding: 8px; gap: 6px; }
  .q-shot-actions textarea { font-size: 13px; padding: 6px 8px; }
  .q-approve { font-size: 11px; padding: 7px 8px; letter-spacing: .3px; }

  .q-design-img img { aspect-ratio: auto; height: 22vh; }
  .q-zoom-hint { width: 22px; height: 22px; font-size: 11px; right: 6px; bottom: 6px; }
  .q-design-body { padding: 8px; }
  .q-design-body b { font-size: 13.5px; }
  .q-design-tick { padding: 6px 8px; font-size: 11px; }

  .q-production { font-size: 13.5px; padding: 10px 12px; margin-bottom: 14px; }
  .q-options { grid-template-columns: 1fr; gap: 12px; }
  .q-card-img { aspect-ratio: 16/9; }
  .q-card-body { padding: 12px; gap: 6px; }
  .q-card h2 { font-size: 18px; }
  .q-spec { font-size: 12.5px; }

  /* The one control they came here to press should not need hunting for. */
  .q-submit-bar {
    position: sticky; bottom: 0; z-index: 10;
    background: var(--white); border-top: 2px solid var(--ink);
    margin: 12px -4vw 0; padding: 10px 4vw calc(10px + env(safe-area-inset-bottom));
    flex-direction: column; align-items: stretch; gap: 6px;
  }
  .q-submit { width: 100%; }
  .q-submit-status { font-size: 13px; text-align: center; }
  .q-submit-bar:has(.q-submit[disabled]) { position: static; border-top: 0; background: none; padding-bottom: 0; }
}

@media (max-width: 400px) {
  .q-gallery, .q-designs { grid-template-columns: 1fr; }
  .q-shot img { height: 34vh; }
}