/* ============================================================
   Custom printing page (custom-printing.html, generate-custom-printing-page.py): slim hero, the designer
   STUDIO (.cp-*; js/designer/app.js fills it) and the content cards below it. The flat print-area editor itself
   is css/designer.css (.pd-*). Loaded after css/style.css and css/pages.css; reuses their tokens (--clr-*,
   --font-*, --space-*, --radius-*, --shadow-*, --pg-*).
   Studio layout (spec v3 §1), sized to the viewport:
     >= 1000 px  top bar (brand, title, undo/redo, tour, focus, Share, qty + estimate, Add to inquiry) over
                 rail | panel (one at a time, beside the rail) | settings bar (fixed strip) above the canvas.
                 The canvas holds the big view (3D or flat) and the other one as the corner preview; the pill
                 (3D | Flat, Front / Back / Spin / Reset or zoom) sits at its bottom. Focus mode: fixed over all.
     < 1000 px   condensed top bar, the canvas (one view, the switch), the settings strip and the order row
                 above the bottom tab bar (the rail); panels open as bottom sheets.
   ============================================================ */
/* Slim hero: crumbs, H1 and a one-line lead beside "Start designing". */
.cp-hero { padding: calc(var(--header-h) + 14px) 0 18px; text-align: left; }
.cp-hero__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; max-width: 1280px; }
.cp-hero__text { flex: 1 1 520px; min-width: 0; }
.cp-hero .page-hero__crumbs ol { margin-bottom: 8px; padding: 3px 12px; font-size: .75rem; }
.cp-hero .page-hero__title { margin-bottom: 4px; font-size: clamp(1.25rem, 2.3vw, 1.875rem); }
.cp-hero .page-hero__lead { max-width: none; margin: 0; font-size: .9375rem; line-height: 1.5; }
.cp-start { flex: none; min-height: 48px; padding: 0 26px; font-weight: 700; }
@media (max-width: 640px) {
  .cp-hero { padding: calc(var(--header-h) + 10px) 0 14px; }
  .cp-hero .page-hero__lead { font-size: .875rem; }
  .cp-start { width: 100%; justify-content: center; }
}

.cp-designer {
  scroll-margin-top: var(--header-h);
  --cp-canvas: #eef2f6;
  --cp-rail-w: 80px;
  --cp-panel-w: 340px;
  --cp-tab-h: 64px;
  --cp-top-h: 56px;
  --cp-set-h: 52px;
  --cp-prev-w: 240px;
  --cp-sel: #2563eb;
  background: var(--cp-canvas);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}
.cp-app [hidden] { display: none !important; }
.cp-nojs-wrap { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.js .cp-nojs-wrap { display: none; }

/* Without JavaScript: the note and WhatsApp link instead of the designer. */
.cp-nojs {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.cp-nojs p { margin: 0 0 var(--space-4); color: var(--clr-text-2); line-height: 1.65; }
html:not(.js) .cp-app { display: none; }

/* style.css clips sideways overflow with overflow-x: hidden on html AND body, which makes body a scroll
   container that never scrolls, so position: sticky never sticks. On this page clip instead (no scroll
   container; same "no horizontal scroll"). Inline overflow: hidden (cart / modal scroll lock) still wins. */
html:has(.cp-app), html:has(.cp-app) body { overflow-x: clip; }

/* Visually hidden (screen readers only): the live region and the file inputs inside their labels. */
.cp-sr, .cp-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cp-ico { flex: none; display: block; }
.cp-hint { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--clr-text-muted); }
.cp-sub { margin: var(--space-2) 0 0; font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-text-muted); }
.cp-empty { margin: 0; padding: 12px 14px; border: 1.5px dashed var(--clr-border); border-radius: var(--radius-lg); font-size: .8125rem; line-height: 1.5; color: var(--clr-text-muted); }
.cp-app .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.cp-app button:focus-visible, .cp-app a:focus-visible, .cp-app select:focus-visible, .cp-app label:focus-within {
  outline: 3px solid rgba(212,160,23,.65);
  outline-offset: 2px;
}
.cp-app--error { display: block; padding: var(--space-6); }
.cp-app:focus { outline: none; }        /* focused by "Start designing" (a container, not a control) */

/* ---------- Rail (desktop: left column; phones: bottom tab bar) ---------- */
.cp-rail {
  display: flex;
  gap: 4px;
  background: #fff;
}
.cp-rail__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 60px;
  padding: 6px 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--clr-text-2);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cp-rail__btn .cp-ico { width: 24px; height: 24px; padding: 0; }
.cp-rail__btn:hover { background: var(--clr-surface-2); color: var(--clr-primary); }
.cp-rail__btn.is-active { background: var(--pg-gold-soft); color: var(--clr-primary); box-shadow: inset 0 0 0 1.5px var(--pg-gold-line); }
.cp-rail__btn.is-active .cp-ico { color: var(--pg-gold-ink); }

/* ---------- Panels ---------- */
.cp-panels { min-width: 0; background: #fff; }
.cp-panel__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 18px 16px 10px 20px;
  background: #fff;
}
.cp-panel__grip { display: none; }
.cp-panel__title { flex: 1; min-width: 0; margin: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; line-height: 1.3; color: var(--clr-primary); }
.cp-panel__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
}
.cp-panel__close:hover { background: var(--clr-surface-2); color: var(--clr-primary); }
@media (pointer: coarse) { .cp-panel__close { width: 44px; height: 44px; } }
.cp-panel__body { display: grid; gap: var(--space-3); padding: 4px 20px 24px; }

/* Cup: item tabs, sizes, variants */
.cp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-tab {
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-text-2);
  cursor: pointer;
}
.cp-tab:hover { border-color: var(--clr-primary-light); color: var(--clr-primary); }
.cp-tab[aria-pressed="true"] { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
.cp-variants { display: grid; gap: 2px; }
.cp-vrow { display: grid; gap: 6px; padding: 10px 0 4px; }
.cp-vrow__label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-text-muted); }
.cp-vrow__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-opt {
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-opt:hover { border-color: var(--clr-primary-light); }
.cp-opt[aria-pressed="true"] { border-color: var(--clr-accent); background: var(--pg-gold-soft); box-shadow: inset 0 0 0 1px var(--clr-accent); }
.cp-itemline { margin-top: var(--space-2); padding: 12px 14px; border-radius: var(--radius-lg); background: var(--clr-surface); }
.cp-itemline__title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; color: var(--clr-primary); line-height: 1.35; }
.cp-itemline__links, .cp-itemline__dims { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--clr-text-muted); }
.cp-itemline__links a { font-weight: 600; color: var(--clr-primary-light); }
.cp-itemline__mto { color: var(--pg-gold-ink); font-weight: 600; }

/* Logo / text */
.cp-upload, .cp-addtext { position: relative; justify-content: center; width: 100%; min-height: 50px; }
.cp-upload:focus-within, .cp-pdf__pick:focus-within { outline: 3px solid rgba(212,160,23,.6); outline-offset: 2px; }
.cp-upload.is-disabled { opacity: .5; pointer-events: none; }
.cp-file { opacity: 0; }
.cp-pdf { padding: var(--space-3) var(--space-4); border: 1px solid var(--pg-gold-line); border-radius: var(--radius-lg); background: var(--pg-gold-soft); }
.cp-pdf p { margin: 0 0 var(--space-3); font-size: .875rem; color: var(--clr-text-2); overflow-wrap: anywhere; }
.cp-pdf__pick { position: relative; }
.cp-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: #fff;
  font: inherit;
  text-align: left;
  color: var(--clr-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cp-preset:hover:not(:disabled) { border-color: var(--clr-primary-light); box-shadow: var(--shadow-sm); }
.cp-preset:disabled { opacity: .45; cursor: not-allowed; }
.cp-preset__big { font-family: 'Poppins', var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.2; }
.cp-preset--phone .cp-preset__big, .cp-preset--insta .cp-preset__big { font-family: 'Montserrat', var(--font-sans); font-weight: 600; }
.cp-preset--tag .cp-preset__big { font-family: 'Playfair Display', serif; font-weight: 600; }
.cp-preset__sub { font-size: .75rem; color: var(--clr-text-muted); }

.cp-elements { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cp-elements:empty { display: none; }
.cp-el { display: flex; gap: 6px; }
.cp-el__sel {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 10px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cp-el__sel:hover { border-color: var(--clr-primary-light); }
.cp-el__sel[aria-pressed="true"] { border-color: var(--cp-sel); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.cp-el__thumb {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: contain;
  background: repeating-conic-gradient(#eef2f7 0 25%, #fff 0 50%) 0 0 / 10px 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-primary);
}
.cp-el__name { flex: 1; min-width: 0; overflow: hidden; font-size: .9rem; font-weight: 600; color: var(--clr-text); text-overflow: ellipsis; white-space: nowrap; }
.cp-el__side { flex: none; padding: 2px 8px; border: 1px solid var(--pg-gold-line); border-radius: var(--radius-full); background: var(--pg-gold-soft); font-size: .75rem; font-weight: 700; color: var(--pg-gold-ink); }
.cp-el__del {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--clr-text-muted);
  cursor: pointer;
}
.cp-el__del:hover { border-color: #fca5a5; color: #b91c1c; }

/* Shared form bits */
.cp-field { display: grid; gap: 6px; min-width: 0; }
.cp-label { display: flex; justify-content: space-between; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--clr-text-2); }
.cp-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  font-size: 16px;            /* no zoom-on-focus on iOS */
  color: var(--clr-text);
}
.cp-input:focus { outline: none; border-color: var(--clr-primary-light); box-shadow: 0 0 0 3px rgba(44,82,130,.15); }
.cp-input[aria-invalid="true"] { border-color: #dc2626; }
.cp-chip {
  min-height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: #fff;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--clr-primary);
  cursor: pointer;
}
@media (pointer: coarse) { .cp-chip { min-height: 44px; } }
.cp-chip:hover:not(:disabled) { border-color: var(--clr-primary-light); }
.cp-chip:disabled { opacity: .45; cursor: default; }
.cp-chip[aria-pressed="true"] { border-color: var(--clr-primary); background: var(--clr-primary); color: #fff; }

/* Colours */
.cp-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-lg); background: var(--clr-surface-2); }
.cp-seg__btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-text-2);
  white-space: nowrap;
  cursor: pointer;
}
.cp-seg__btn[aria-pressed="true"] { background: #fff; color: var(--clr-primary); box-shadow: var(--shadow-sm); }
.cp-seg--wrap { flex-wrap: wrap; }
#cp-colours { display: grid; gap: var(--space-4); }
.cp-colbox { display: grid; gap: var(--space-3); }
.cp-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-sw {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--clr-border-dark);
  cursor: pointer;
}
@media (pointer: coarse) { .cp-sw { width: 44px; height: 44px; } }
.cp-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--clr-primary), 0 0 0 4px var(--clr-accent-light); }
.cp-sw-custom__wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px 0 6px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: #fff;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--clr-text-2);
  cursor: pointer;
}
.cp-sw-custom__wrap.is-on { border-color: var(--clr-primary); color: var(--clr-primary); }
.cp-sw-custom { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.cp-colsum {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--pg-gold-line);
  border-radius: var(--radius-md);
  background: var(--pg-gold-soft);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pg-gold-ink);
}

/* Background: switch, colour, band */
#cp-bg { display: grid; gap: var(--space-3); }
.cp-switch { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; color: var(--clr-primary); cursor: pointer; }
.cp-switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cp-switch__track { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--clr-border-dark); transition: background var(--transition-fast); }
.cp-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast); }
.cp-switch__input:checked + .cp-switch__track { background: var(--clr-primary); }
.cp-switch__input:checked + .cp-switch__track::after { transform: translateX(18px); }
.cp-switch__input:focus-visible + .cp-switch__track { outline: 3px solid rgba(212,160,23,.65); outline-offset: 2px; }
.cp-switch__input:disabled + .cp-switch__track { opacity: .45; }
.cp-switch__input:disabled ~ .cp-switch__text { color: var(--clr-text-muted); }
.cp-bandbox { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--clr-border); }
.cp-mm-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cp-mm__row { display: flex; align-items: center; gap: 6px; }
.cp-mm__input { width: 100%; }
.cp-mm__unit { font-size: .8125rem; font-weight: 600; color: var(--clr-text-muted); }
.cp-bandbox .cp-chip { justify-self: start; }
.cp-bgline { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--clr-text-2); }
.cp-bgline:empty { display: none; }

/* ---------- Studio: top bar ---------- */
.cp-top {
  grid-area: top;
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: var(--cp-top-h);
  padding: 0 12px 0 14px;
  background: #fff;
  border-bottom: 1px solid var(--clr-border);
}
.cp-top__brand { flex: none; display: flex; align-items: center; width: calc(var(--cp-rail-w) - 26px); }
.cp-top__brand img { display: block; width: 30px; height: 30px; object-fit: contain; }
.cp-top__title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--clr-primary); text-overflow: ellipsis; white-space: nowrap; }
.cp-top__kicker { margin-right: 4px; font-family: var(--font-sans); font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--clr-text-muted); }
.cp-top__hist { flex: none; display: flex; gap: 4px; }
.cp-iconbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-iconbtn:hover:not(:disabled) { border-color: var(--clr-primary-light); background: var(--clr-surface); }
.cp-iconbtn:disabled { opacity: .4; cursor: default; }
@media (pointer: coarse) { .cp-iconbtn { width: 44px; height: 44px; } }
.cp-focusbtn .cp-ico + .cp-ico { display: none; }
.cp-focusbtn[aria-pressed="true"] .cp-ico { display: none; }
.cp-focusbtn[aria-pressed="true"] .cp-ico + .cp-ico { display: block; }
.cp-focusbtn[aria-pressed="true"] { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
.cp-top__share { position: relative; flex: none; margin-left: 6px; }
.cp-topbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--clr-border);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  color: var(--clr-primary);
  white-space: nowrap;
  cursor: pointer;
}
.cp-topbtn:hover:not(:disabled), .cp-topbtn[aria-expanded="true"] { border-color: var(--clr-primary-light); background: var(--clr-surface); }
.cp-topbtn:disabled, .cp-topbtn[aria-disabled="true"] { opacity: .8; cursor: progress; }
.cp-busy__text { white-space: nowrap; }
.cp-order { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-qty { position: relative; flex: none; display: flex; align-items: center; gap: 4px; }
.cp-qty__label { margin-right: 2px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-text-muted); }
.cp-qty__input { flex: none; width: 92px; min-height: 40px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .cp-qty__input { min-height: 44px; } }
.cp-qty__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--clr-border);
  border-radius: 10px;
  background: #fff;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-qty__more[aria-expanded="true"] .cp-ico { transform: rotate(180deg); }
@media (pointer: coarse) { .cp-qty__more { width: 44px; height: 44px; } }
.cp-estimate { flex: 0 1 auto; min-width: 0; max-width: 220px; line-height: 1.2; cursor: pointer; }
.cp-estimate:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 3px; border-radius: 6px; }
.cp-est__price { margin: 0; overflow: hidden; font-family: var(--font-display); font-size: 1rem; font-weight: 800; line-height: 1.2; color: var(--clr-primary); text-overflow: ellipsis; white-space: nowrap; }
.cp-est__sub { margin: 0; overflow: hidden; font-size: .6875rem; line-height: 1.35; color: var(--clr-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.cp-estimate .cp-est__sub ~ .cp-est__sub, .cp-estimate .cp-est__label { display: none; }
.cp-est__label { margin: 0; font-size: .6875rem; font-weight: 600; color: var(--pg-gold-ink); }
.cp-add { flex: none; justify-content: center; min-height: 44px; padding: 0 20px; font-weight: 700; }
.cp-app .cp-add:hover { transform: none; }

/* Popovers (Share menu, quantity + price, settings bar menus) */
.cp-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.cp-pop__title { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-text-muted); }
.cp-pop__unit { font-weight: 600; letter-spacing: 0; text-transform: none; }
.cp-sharemenu { display: grid; gap: 2px; width: 270px; padding: 6px; }
.cp-menuitem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-menuitem:hover:not(:disabled), .cp-menuitem:focus-visible { background: var(--clr-surface-2); }
.cp-menuitem:disabled { opacity: .5; cursor: progress; }
.cp-menuitem--wa { color: #128c4b; }
.cp-qtypop { width: 300px; }
.cp-qty__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-qchip { min-width: 48px; }
.cp-estfull { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--clr-surface); }
.cp-estfull .cp-est__sub { white-space: normal; font-size: .75rem; }
.cp-estfull .cp-est__price { font-size: 1.125rem; }
.cp-estfull .cp-est__label { margin-top: 4px; }
/* The save message / share link pop: under Share (app.js aligns it), closable. */
.cp-msgpop {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  z-index: 41;
  display: none;
  gap: 8px;
  width: min(440px, calc(100vw - 24px));
  padding: 12px 48px 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.cp-msgpop.is-open { display: grid; }
.cp-msgpop__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
}
.cp-msgpop__close:hover { background: var(--clr-surface-2); color: var(--clr-primary); }
@media (pointer: coarse) { .cp-msgpop__close { width: 44px; height: 44px; top: 2px; right: 2px; } }
.cp-actions__msg { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--clr-text-2); }
.cp-actions__msg:empty { display: none; }
.cp-actions__msg--error { color: #b91c1c; font-weight: 600; }
.cp-sharebox { display: grid; gap: 4px; min-width: 0; }
.cp-sharebox__url { width: 100%; min-width: 0; min-height: 44px; font-size: .9375rem; }
.cp-app .is-busy:disabled { opacity: .85; cursor: progress; }
.cp-spin {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cp-spin .8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cp-spin { animation-duration: 2.4s; } }

/* ---------- Studio: settings bar (fixed strip above the canvas; contents by selection, app.js) ---------- */
.cp-settings {
  grid-area: settings;
  position: relative;
  z-index: 25;
  display: flex;
  align-items: stretch;
  min-width: 0;
  height: var(--cp-set-h);
  background: #fff;
  border-bottom: 1px solid var(--clr-border);
}
.cp-settings__scroll {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cp-settings__scroll::-webkit-scrollbar { display: none; }
.cp-settings__pin { position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 4px; }
.cp-settings__pin:empty { display: none; }
/* A fade before the pinned slot while more controls are scrolled out of view at the end. */
.cp-settings__pin::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 28px; background: linear-gradient(to right, rgba(255,255,255,0), #fff); pointer-events: none; opacity: 0; transition: opacity .15s; }
.cp-settings--more .cp-settings__pin::before { opacity: 1; }
.cp-sb__group { flex: none; display: flex; align-items: center; gap: 4px; }
.cp-sb__group + .cp-sb__group { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--clr-border); }
.cp-sb__label { margin-right: 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-text-muted); white-space: nowrap; }
.cp-sb__opt {
  flex: none;
  min-width: 40px;
  min-height: 34px;
  padding: 0 11px;
  border: 1.5px solid var(--clr-border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-sb__opt:hover { border-color: var(--clr-primary-light); }
.cp-sb__opt[aria-pressed="true"] { border-color: var(--clr-accent); background: var(--pg-gold-soft); box-shadow: inset 0 0 0 1px var(--clr-accent); }
@media (pointer: coarse) { .cp-sb__opt { min-height: 44px; } }
.cp-sb__kind {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 4px 0 10px;
  border-radius: var(--radius-full);
  background: rgba(37,99,235,.09);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cp-sel);
  white-space: nowrap;
}
.cp-sb__kind .cp-tb__btn { width: 28px; height: 28px; color: var(--cp-sel); }
@media (pointer: coarse) { .cp-sb__kind .cp-tb__btn { width: 44px; height: 44px; } }
.cp-sb__more { gap: 6px; width: auto; padding: 0 10px; border: 1.5px solid var(--clr-border); font-size: .8125rem; font-weight: 700; }
.cp-tb__group { flex: none; display: flex; align-items: center; gap: 2px; }
.cp-tb__group + .cp-tb__group { margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--clr-border); }
.cp-tb__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-tb__btn:hover:not(:disabled) { background: var(--clr-surface-2); }
.cp-tb__btn:disabled { opacity: .3; cursor: default; }
.cp-tb__btn[aria-pressed="true"] { background: var(--clr-primary); color: #fff; }
.cp-tb__word { width: auto; gap: 6px; padding: 0 10px; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.cp-tb__bold { font-family: Georgia, 'Times New Roman', serif; font-size: 1.0625rem; font-weight: 800; }
.cp-tb__dot { display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(15,23,42,.25), 0 0 0 2px #fff, 0 0 0 3px var(--clr-border-dark); }
.cp-tb__font {
  height: 36px;
  max-width: 160px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--clr-border);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-tb__val { min-width: 46px; font-size: .8125rem; font-weight: 700; text-align: center; color: var(--clr-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-tb__val--sm { min-width: 34px; font-weight: 600; color: var(--clr-text-muted); }
.cp-tb__rep { display: inline-flex; align-items: center; gap: 3px; color: var(--clr-text-2); }
.cp-tb__rep .cp-tb__val { min-width: 26px; }
@media (pointer: coarse) {
  .cp-tb__btn { width: 44px; height: 44px; }
  .cp-tb__word { width: auto; }
  .cp-tb__font { height: 44px; }
}
/* The settings bar's popovers (colour swatches, the ⋯ menu): outside the scrolling row, under the bar (phones:
   above the strip); app.js sets the left edge under the button. */
.cp-sb__pop { top: calc(100% + 6px); right: auto; left: 12px; width: min(320px, calc(100vw - 24px)); }
.cp-tb__menu { display: grid; gap: 2px; width: 250px; padding: 6px; }
.cp-tb__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-tb__item:hover:not(:disabled), .cp-tb__item:focus-visible { background: var(--clr-surface-2); }
.cp-tb__item:disabled { opacity: .35; cursor: default; }
.cp-tb__item--danger { color: #b91c1c; }
.cp-tb__item--danger:hover:not(:disabled) { background: #fef2f2; }
@media (pointer: coarse) { .cp-tb__item { min-height: 44px; } }

/* ---------- Studio: the canvas (3D view + flat print area; one big, the other the corner preview) ---------- */
.cp-stage {
  grid-area: stage;
  position: relative;
  container-type: size;
  container-name: cp-stage;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 75% at 50% 45%, #ffffff 0%, #f3f6f9 60%, #e4e9f0 100%);
}
.cp-view, .cp-editor { position: absolute; inset: 0; z-index: 1; }
.cp-view__canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.cp-view__canvas:active { cursor: grabbing; }
.cp-view__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-weight: 600; color: var(--clr-text-muted); pointer-events: none; }
.cp-view__hint {
  margin: 0;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.88);
  box-shadow: 0 1px 3px rgba(12,35,64,.08);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--clr-text-2);
  white-space: nowrap;
  pointer-events: none;
}
.cp-app[data-mode="flat"] .cp-view__hint, .cp-app--sel .cp-view__hint, .cp-app--fallback .cp-view__hint { display: none; }
/* Empty state (no logo or text yet): the tip "Tap Logo or Text to start" in the message stack (its words open those
   panels; × hides it) instead of the 3D hint. The faint sample on the cup is drawn by app.js (texture overlay). */
.cp-app--empty .cp-view__hint { display: none; }
.cp-emptyhint {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--pg-gold-line);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 6px 18px rgba(12,35,64,.12);
  font-size: .875rem;
  font-weight: 500;
  color: var(--clr-text-2);
  pointer-events: auto;
}
.cp-emptyhint__text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.cp-emptyhint__go {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--pg-gold-soft);
  box-shadow: inset 0 0 0 1.5px var(--clr-accent);
  font: inherit;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-emptyhint__go strong { font-weight: 800; }
.cp-emptyhint__go:hover { background: #fdf0c4; }
.cp-emptyhint__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
}
.cp-emptyhint__close:hover { background: var(--clr-surface-2); color: var(--clr-primary); }
@media (pointer: coarse) {
  .cp-emptyhint__go { min-height: 44px; }
  .cp-emptyhint__close { width: 44px; height: 44px; }
}
/* Bottom-left of the 3D view, just above the pill row (never under it); bottom-right when the corner preview sits
   bottom-left (data-corner="bl"), and on phones at the bottom-right above the pill switch (the empty-state hint
   is at the top). Decorative: never selectable, never in a snapshot or proof. */
.cp-badge {
  position: absolute;
  left: 14px;
  bottom: 66px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 5px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--clr-primary);
  opacity: .6;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.cp-badge__mark { display: block; width: 20px; height: 13px; object-fit: contain; }
.cp-app[data-corner="bl"] .cp-badge { left: auto; right: 14px; }
/* No WebGL: the flat front / back halves in the 3D slot. */
.cp-view__flat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 16px; background: #fff; }
.cp-flat__halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: end; }
.cp-flat__half { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; margin: 0; }
.cp-flat__canvas { display: block; max-width: 100%; max-height: calc(100% - 90px); height: auto; margin: 0 auto; }
.cp-flat__cap { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--clr-primary); }
.cp-flat__note { margin: var(--space-3) 0 0; font-size: .8125rem; line-height: 1.5; text-align: center; color: var(--clr-text-2); }

/* Flat print area as the big view: centred in the region app.js computes (studio.js fitFlat). */
.cp-editor__title { position: absolute; top: 12px; left: 16px; z-index: 3; margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--clr-text-2); pointer-events: none; }
.cp-editor__dims { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--clr-text-muted); }
.cp-editor__fit { position: absolute; inset: 34px 0 60px; display: flex; align-items: center; justify-content: center; }
.cp-editor__scroll { width: 100%; max-height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cp-editor__scroll.is-zoomed { cursor: grab; }
.cp-editor__inner { width: 100%; min-width: 0; }
.cp-editor .pd-editor__svg { margin: 0 auto; }
.cp-app[data-mode="flat"] .cp-editor { background: transparent; }

/* The corner preview: whichever view is not the big one (bottom-right; flipped bottom-left when the selection is
   under it). Width = the layout state's previewW (--cp-prev-w, app.js); the 3D preview is 4:3. */
.cp-app[data-mode="3d"] .cp-editor,
.cp-app[data-mode="flat"] .cp-view {
  inset: auto 12px 12px auto;
  z-index: 6;
  width: var(--cp-prev-w);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(12,35,64,.18), 0 2px 6px rgba(12,35,64,.08);
}
.cp-app[data-mode="flat"] .cp-view { height: calc(var(--cp-prev-w) * .75); background: radial-gradient(ellipse 70% 75% at 50% 45%, #ffffff 0%, #eef2f6 100%); }
.cp-app[data-mode="3d"] .cp-editor { padding: 26px 0 2px; }
.cp-app[data-mode="3d"] .cp-editor__title, .cp-app[data-mode="3d"] .cp-editor__dims { display: none; }
.cp-app[data-mode="3d"] .cp-editor__fit { position: static; display: block; }
.cp-app[data-mode="3d"] .cp-editor__scroll { overflow: hidden; }
.cp-app[data-corner="bl"][data-mode="3d"] .cp-editor,
.cp-app[data-corner="bl"][data-mode="flat"] .cp-view { inset: auto auto 12px 12px; }
.cp-app[data-mode="flat"] .cp-badge { left: 8px; right: auto; bottom: 6px; font-size: 9px; padding: 1px 6px; }
.cp-app[data-mode="flat"] .cp-flat__note { display: none; }
.cp-app[data-mode="flat"] .cp-view__flat { padding: 26px 8px 8px; }
.cp-app[data-mode="flat"] .cp-flat__canvas { max-height: calc(var(--cp-prev-w) * .75 - 56px); }
.cp-corner {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  width: var(--cp-prev-w);
  height: var(--cp-prev-h, 140px);
  border-radius: 14px;
  pointer-events: none;
}
.cp-app[data-corner="bl"] .cp-corner { right: auto; left: 12px; }
.cp-corner__label {
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 2;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-text-2);
  pointer-events: none;
}
.cp-corner__swap { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 14px; background: transparent; cursor: zoom-in; pointer-events: auto; }
.cp-corner__swap:hover { box-shadow: inset 0 0 0 2px var(--clr-primary-light); }
.cp-corner__hide {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  color: var(--clr-text-muted);
  cursor: pointer;
  pointer-events: auto;
}
.cp-corner__hide:hover { color: var(--clr-primary); background: var(--clr-surface-2); }
@media (pointer: coarse) { .cp-corner__hide { width: 44px; height: 44px; top: 0; right: 0; } }
.cp-corner__grip { position: absolute; top: 12px; bottom: 12px; left: -6px; z-index: 3; width: 12px; cursor: ew-resize; pointer-events: auto; touch-action: none; }
.cp-corner__grip::after { content: ""; position: absolute; top: 50%; left: 4px; width: 4px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--clr-border-dark); opacity: 0; transition: opacity .15s; }
.cp-corner:hover .cp-corner__grip::after, .cp-corner__grip:focus-visible::after, .cp-corner__grip.is-dragging::after { opacity: 1; }
.cp-corner__grip:focus-visible { outline: 3px solid rgba(212,160,23,.65); outline-offset: 0; border-radius: 6px; }
.cp-app[data-corner="bl"] .cp-corner__grip { left: auto; right: -6px; }
.cp-app--fallback[data-mode="flat"] .cp-corner__swap { cursor: default; }
/* Hidden corner preview: a small chip brings it back. */
.cp-app--nocorner[data-mode="3d"] .cp-editor,
.cp-app--nocorner[data-mode="flat"] .cp-view,
.cp-app--nocorner .cp-corner { display: none; }
.cp-cornershow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--clr-primary);
  cursor: pointer;
}
@media (pointer: coarse) { .cp-cornershow { min-height: 44px; } }
.cp-app[data-corner="bl"] .cp-cornershow { right: auto; left: 12px; }

/* The message stack, top-left under the settings bar, never over the item's centre: the 3D hint, the status line
   (what is selected, seam warnings; with the flat print area it sits top-right on its own row) and the notice
   below them — one column, so they never overlap. While a text is typed (the input sits at the top) it moves down
   and the status line hides. */
.cp-msgs {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.cp-app--editing .cp-msgs { top: var(--cp-inline-b, 64px); }
/* While a text is typed, the 3D hint and the empty-state tip step aside (only notices stay, below the input). */
.cp-app--editing .cp-view__hint, .cp-app--editing .cp-emptyhint { display: none; }
.cp-status { max-width: max(260px, min(460px, calc(50% - 150px))); }
.cp-app--editing .cp-status { display: none; }
.cp-status:empty { display: none; }
.cp-status .pd-editor__status, .cp-status .pd-editor__notice {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 1px 3px rgba(12,35,64,.08);
  font-size: .8125rem;
  line-height: 1.4;
  text-align: left;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cp-status .pd-editor__notice { margin-top: 4px; }
.cp-status .pd-editor__notice:empty { display: none; }
.cp-app[data-mode="3d"]:not(.cp-app--sel) .cp-status .pd-editor__status { display: none; }
.cp-app[data-mode="flat"] .cp-status { align-self: flex-end; max-width: min(560px, calc(100% - 340px)); }
.cp-app[data-mode="flat"] .cp-status .pd-editor__status { text-align: right; }

/* The pill at the canvas bottom: 3D | Flat, Front / Back / Spin / Reset (3D) or zoom (flat). Never over the
   corner preview: its side is left free. */
.cp-canvasbar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.cp-canvasbar > * { pointer-events: auto; }
.cp-app:not(.cp-app--nocorner)[data-corner="br"] .cp-canvasbar { right: calc(var(--cp-prev-w) + 24px); }
.cp-app:not(.cp-app--nocorner)[data-corner="bl"] .cp-canvasbar { left: calc(var(--cp-prev-w) + 24px); }
/* Hidden preview: only the chip's side is kept free (--cp-chip-w: its width, app.js). */
.cp-app--nocorner .cp-canvasbar { left: 12px; right: calc(var(--cp-chip-w, 170px) + 24px); }
.cp-app--nocorner[data-corner="bl"] .cp-canvasbar { left: calc(var(--cp-chip-w, 170px) + 24px); right: 12px; }
.cp-mode, .cp-view__btns, .cp-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 14px rgba(12,35,64,.10);
}
.cp-mode__btn, .cp-view__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 52px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--clr-primary);
  cursor: pointer;
}
@media (pointer: coarse) { .cp-mode__btn, .cp-view__btn { min-height: 44px; } }
.cp-mode__btn:hover, .cp-view__btn:hover { background: var(--clr-surface-2); }
.cp-mode__btn[aria-pressed="true"] { background: var(--clr-primary); color: #fff; }
.cp-view__btn[aria-pressed="true"] { background: var(--pg-gold-soft); box-shadow: inset 0 0 0 1.5px var(--clr-accent); }
.cp-view__btn--reset { min-width: 0; }
.cp-zoom__btn, .cp-zoom__fit {
  min-width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-primary);
  cursor: pointer;
}
.cp-zoom__fit { padding: 0 12px; font-size: .8125rem; }
.cp-zoom__btn:hover:not(:disabled), .cp-zoom__fit:hover:not(:disabled) { background: var(--clr-surface-2); }
.cp-zoom__btn:disabled, .cp-zoom__fit:disabled { opacity: .35; cursor: default; }
@media (pointer: coarse) { .cp-zoom__btn, .cp-zoom__fit { min-width: 44px; height: 44px; } }
.cp-zoom__val { min-width: 44px; font-size: .8125rem; font-weight: 600; text-align: center; color: var(--clr-text-2); font-variant-numeric: tabular-nums; }
.cp-app[data-mode="flat"] .cp-view__btns, .cp-app[data-mode="3d"] .cp-zoom, .cp-app--fallback .cp-view__btns { display: none; }
/* A narrow canvas (a panel open on a small laptop, tablets): compact pill buttons, one row. */
@container cp-stage (max-width: 760px) {
  .cp-mode__btn, .cp-view__btn { min-width: 0; padding: 0 10px; }
  .cp-view__reset-text { display: none; }
}

/* Inline text input: over the text on the flat print area; in 3D, a box at the top of the canvas. */
.cp-inline {
  position: absolute;
  z-index: 36;
  margin: 0;
  padding: 0 10px;
  border: 2px solid var(--cp-sel);
  border-radius: 6px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 20px rgba(12,35,64,.18);
  text-align: center;
  line-height: 1;
  outline: none;
  transform-origin: 50% 50%;
}
.cp-inline--light { background: rgba(15,23,42,.88); }

/* Notices: transient (info ~3 s, errors 7 s; a press on the canvas hides them), in the message stack: at most two
   lines, ≤ 360 px. */
.cp-notice {
  display: -webkit-box;
  max-width: min(360px, 100%);
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 7px 12px;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-lg);
  background: #fffbeb;
  box-shadow: var(--shadow-md);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: #92400e;
  pointer-events: none;
}
.cp-notice:empty { display: none; }
.cp-notice--error { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }

.cp-orderrow { display: none; }

/* Focus mode: the studio over the whole page (Fullscreen API, else this fixed overlay). */
.cp-app--focus {
  position: fixed;
  inset: 0;
  z-index: 1001;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
.cp-app:fullscreen { width: 100%; height: 100%; }
html.cp-locked, html.cp-locked body { overflow: hidden; }

/* ---------- Desktop ≥ 1000 px: top bar / rail | panel | settings bar + canvas ---------- */
@media (min-width: 1000px) {
  .cp-app {
    position: relative;
    display: grid;
    grid-template-columns: var(--cp-rail-w) auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "top top top" "rail panel settings" "rail panel stage";
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    min-height: 560px;
    background: var(--cp-canvas);
  }
  .cp-rail {
    grid-area: rail;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: 10px 8px;
    overflow-y: auto;
    border-right: 1px solid var(--clr-border);
  }
  .cp-rail__btn { min-height: 64px; }
  .cp-backdrop { display: none !important; }
  .cp-panels { grid-area: panel; display: none; }
  .cp-app--panel .cp-panels {
    display: block;
    width: var(--cp-panel-w);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--clr-border);
    box-shadow: 6px 0 18px rgba(12,35,64,.05);
  }
  .cp-app--focus { min-height: 0; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .cp-designer { --cp-panel-w: 300px; }
  .cp-top__kicker { display: none; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .cp-topbtn__text { display: none; }
  .cp-estimate { max-width: 130px; }
  .cp-estimate .cp-est__sub { display: none; }
  .cp-add { padding: 0 14px; }
}
/* Short desktops (e.g. 1366 × 641): a little less chrome. */
@media (min-width: 1000px) and (max-height: 700px) {
  .cp-designer { --cp-top-h: 52px; --cp-set-h: 48px; }
  .cp-rail__btn { min-height: 60px; }
}

/* ---------- Phones / tablets < 1000 px ---------- */
@media (max-width: 999px) {
  .cp-designer { --cp-top-h: 52px; --cp-set-h: 56px; --cp-order-h: 60px; }
  .cp-app {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "top" "stage" "settings" "order";
    height: calc(100vh - var(--header-h) - var(--cp-tab-h));
    height: calc(100dvh - var(--header-h) - var(--cp-tab-h) - env(safe-area-inset-bottom, 0px));
    min-height: 420px;
    background: var(--cp-canvas);
  }
  .cp-top { gap: 6px; padding: 0 8px 0 12px; }
  .cp-top__brand, .cp-top__kicker, .cp-focusbtn { display: none; }
  .cp-top__title { font-size: .875rem; }
  .cp-top__share { margin-left: 0; }
  .cp-topbtn { padding: 0 10px; }
  .cp-topbtn__text, .cp-topbtn .cp-busy__text { display: none; }   /* busy: spinner + the live region */
  .cp-settings { border-top: 1px solid var(--clr-border); border-bottom: 0; }
  .cp-settings__scroll { padding: 0 8px; }
  /* Popovers of the strip and the order row open upwards, over the canvas. */
  .cp-sb__pop { top: auto; bottom: calc(100% + 6px); }
  .cp-orderrow {
    grid-area: order;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--cp-order-h);
    padding: 0 12px;
    background: #fff;
    border-top: 1px solid var(--clr-border);
  }
  .cp-orderrow .cp-order { flex: 1 1 auto; gap: 8px; }
  .cp-orderrow .cp-qty__label { display: none; }
  .cp-orderrow .cp-qty__input { width: 88px; min-height: 44px; }
  .cp-orderrow .cp-qty__more { width: 40px; height: 44px; }
  .cp-orderrow .cp-estimate { flex: 1 1 auto; max-width: none; }
  .cp-orderrow .cp-estimate .cp-est__sub { display: none; }
  .cp-orderrow .cp-add { flex: 0 0 auto; min-height: 46px; padding: 0 16px; }
  .cp-orderrow .cp-pop { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: min(320px, calc(100vw - 24px)); }
  .cp-msgpop { left: 8px; right: 8px; width: auto; }

  /* Bottom tab bar (only while the designer is on screen: .cp-app--live) */
  .cp-rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: none;
    justify-content: space-around;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--clr-border);
    box-shadow: 0 -4px 16px rgba(12,35,64,.07);
  }
  .cp-app--live .cp-rail { display: flex; }
  .cp-rail__btn { flex: 1 1 0; min-height: 56px; font-size: .6875rem; border-radius: 12px; }
  /* Panels as bottom sheets above the tab bar */
  .cp-panels {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--cp-tab-h) + env(safe-area-inset-bottom, 0px));
    z-index: 945;
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 32px rgba(12,35,64,.18);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s;
  }
  .cp-app--panel .cp-panels { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
  .cp-panels.is-dragging { transition: none; }
  .cp-panel__head { padding-top: 24px; touch-action: none; cursor: grab; }
  .cp-panel__grip { display: block; position: absolute; top: 9px; left: 50%; width: 42px; height: 5px; border-radius: 3px; background: var(--clr-border-dark); transform: translateX(-50%); }
  .cp-panel__body { padding: 4px 16px 20px; }
  .cp-backdrop { position: fixed; inset: 0 0 calc(var(--cp-tab-h) + env(safe-area-inset-bottom, 0px)) 0; z-index: 940; background: rgba(15,23,42,.3); }
  @media (prefers-reduced-motion: reduce) { .cp-panels, .cp-app--panel .cp-panels { transition: none; } }

  /* One view at a time (the 3D | Flat switch); no corner preview. */
  .cp-app[data-mode="3d"] .cp-editor, .cp-app[data-mode="flat"] .cp-view,
  .cp-corner, .cp-cornershow { display: none !important; }
  .cp-app .cp-canvasbar { left: 8px; right: 8px; bottom: 10px; gap: 6px; }
  .cp-mode__btn, .cp-view__btn { min-width: 0; padding: 0 11px; }
  .cp-view__reset-text { display: none; }
  .cp-badge, .cp-app[data-corner="bl"] .cp-badge { top: auto; bottom: 62px; left: auto; right: 10px; }
  .cp-view__hint { display: none; }
  .cp-app[data-mode="3d"] .cp-status { display: none; }
  .cp-app[data-mode="flat"] .cp-status { margin-right: 10px; max-width: calc(100% - 20px); }
  /* Phones: the notice is a one-line strip right under the top bar. */
  .cp-msgs { top: 0; left: 0; right: 0; }
  /* Phones: a slimmer pill close under the top bar, clear of the cup's rim (touch targets stay 44 px through
     the buttons' ::after). */
  .cp-emptyhint { align-self: center; gap: 4px; margin-top: 4px; max-width: min(340px, calc(100% - 24px)); padding: 2px 2px 2px 12px; font-size: .8125rem; }
  .cp-emptyhint__text { gap: 4px; }
  .cp-emptyhint__go { min-height: 30px !important; padding: 0 11px; }
  .cp-emptyhint__close { width: 30px !important; height: 30px !important; }
  .cp-emptyhint__go, .cp-emptyhint__close { position: relative; }
  .cp-emptyhint__go::after, .cp-emptyhint__close::after { content: ""; position: absolute; inset: -7px -2px; }
  .cp-emptyhint__close::after { inset: -7px; }
  .cp-app--editing .cp-msgs { top: var(--cp-inline-b, 62px); }
  .cp-notice {
    order: -1;
    align-self: stretch;
    display: block;
    max-width: none;
    padding: 6px 12px;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cp-app[data-mode="flat"] .cp-editor__title { display: none; }
  .cp-editor__fit { inset: 44px 0 64px; }
}
@media (max-width: 599px) {
  .cp-orderrow .cp-estimate { display: none; }
  .cp-orderrow .cp-add { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .cp-mode__btn, .cp-view__btn { padding: 0 9px; font-size: .75rem; }
  .cp-top__hist { gap: 2px; }
}

/* ---------- First-time tour (js/designer/tour.js): dim page, spotlight cut-outs, the tip card ----------
   Appended to <body> (to the studio in real fullscreen), so it only uses the site tokens (:root). Above the header,
   the focus overlay and the tab bar; below the cart panel and toasts. */
.cp-tour { position: fixed; inset: 0; z-index: 2500; font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; }
.cp-tour__shade { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cp-tour__dim { fill: rgba(12,35,64,.6); }
.cp-tour__rings { position: absolute; inset: 0; pointer-events: none; }
.cp-tour__ring {
  position: absolute;
  box-sizing: border-box;
  border: 2.5px solid var(--clr-accent-light);
  border-radius: 12px;
  box-shadow: 0 0 0 5px rgba(212,160,23,.28), 0 0 28px rgba(245,200,66,.45);
}
.cp-tour__card {
  position: absolute;
  box-sizing: border-box;
  padding: 20px 20px 16px;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(12,35,64,.38), 0 4px 14px rgba(12,35,64,.18);
  color: var(--clr-text);
  outline: none;
}
.cp-tour__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-light)); }
.cp-tour__card:focus, .cp-tour__card:focus-visible { outline: none; }   /* focused as a container; its buttons show focus */
.cp-tour__card.is-in { animation: cp-tour-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes cp-tour-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.cp-tour--still .cp-tour__card.is-in { animation: none; }
@media (prefers-reduced-motion: reduce) { .cp-tour__card.is-in { animation: none; } }
.cp-tour__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cp-tour__dots { display: flex; gap: 6px; }
.cp-tour__dot { width: 8px; height: 8px; border-radius: 4px; background: var(--clr-border-dark); transition: width .2s ease, background .2s ease; }
.cp-tour__dot.is-past { background: var(--clr-primary-light); }
.cp-tour__dot.is-on { width: 22px; background: var(--clr-accent); }
.cp-tour--still .cp-tour__dot { transition: none; }
.cp-tour__count { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--clr-text-muted); font-variant-numeric: tabular-nums; }
.cp-tour__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 800; line-height: 1.25; color: var(--clr-primary); }
.cp-tour__text { margin: 0 0 16px; font-size: .9375rem; line-height: 1.55; color: var(--clr-text-2); }
.cp-tour__btns { display: flex; align-items: center; gap: 8px; }
.cp-tour__gap { flex: 1 1 auto; }
.cp-tour__btns button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-full);
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.cp-tour__btns button[hidden] { display: none; }
.cp-tour__btns button:focus-visible { outline: 3px solid rgba(212,160,23,.65); outline-offset: 2px; }
.cp-tour__skip { margin-left: -10px; padding: 0 10px !important; background: transparent; color: var(--clr-text-muted); font-weight: 600 !important; }
.cp-tour__skip:hover { color: var(--clr-primary); text-decoration: underline; }
.cp-tour__back { background: #fff; box-shadow: inset 0 0 0 1.5px var(--clr-border-dark); color: var(--clr-primary); }
.cp-tour__back:hover { box-shadow: inset 0 0 0 1.5px var(--clr-primary); }
.cp-tour__next { background: var(--clr-accent); color: var(--clr-primary); box-shadow: 0 4px 14px rgba(212,160,23,.35); }
.cp-tour__next:hover { background: var(--clr-accent-light); }
.cp-tour[data-step="order"] .cp-tour__next { padding: 0 20px; }
.cp-tour--phone .cp-tour__card { padding: 18px 16px 14px; }
@media (max-width: 380px) {
  .cp-tour__btns { gap: 4px; }
  .cp-tour__btns button { padding: 0 14px; }
}

/* ---------- Content below the designer ---------- */
.cp-print-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cp-print {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.cp-print h3 { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--clr-primary); }
.cp-section .cp-print__sizes { margin: 0; font-weight: 700; color: var(--pg-gold-ink); }
.cp-section .cp-print__axes { margin: 0; font-size: .875rem; color: var(--clr-text-muted); }
.cp-section .cp-print__on { margin: var(--space-2) 0 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-text-muted); }
.cp-print__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .875rem; line-height: 1.45; }
.cp-code { font-size: .75rem; color: var(--clr-text-muted); white-space: nowrap; }
.cp-print__go { margin-top: auto; padding-top: var(--space-3); }
/* Printing price and minimum order / who it is for (SEO copy, text only) */
.cp-section .cp-price__list { list-style: disc; margin: var(--space-2) 0 var(--space-4); padding-left: 1.25em; color: var(--clr-text-2); line-height: 1.7; }
#price p, #price .cp-price__list, #uses p { max-width: 720px; }