/* Exotic Pax customizer — layout and components.
   Rules of the house: cream page, white cards, hairline rules, one accent.
   No shadows, no gradients, no pure black, no pure-white page. */

/* ============================================================
   Shell
   ============================================================ */

.app {
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

/* ---- the offline / slow-CDN banner ---- */
.boot-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 400;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  text-align: center; font-weight: 700; font-size: 14px; line-height: 1.35;
}
.boot-banner--wait { background: #E4B255; color: var(--cd-ink); }
.boot-banner--off { background: var(--warn-ink); color: var(--cd-cream); }

/* ============================================================
   Viewer
   ============================================================ */

.viewer {
  position: relative;
  flex: 1 1 auto;
  min-width: 0; min-height: 0;
  background: var(--scene-paper);
}

.viewer__canvas {
  display: block;
  width: 100%; height: 100%;
  touch-action: none;               /* drag orbits, it never scrolls the page */
}

/* title card shown before a pack is chosen */
.viewer__cover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center; pointer-events: none;
}
.viewer__wordmark {
  margin: 0; font-family: var(--cd-serif); font-weight: 600;
  font-size: clamp(34px, 6vw, 56px); letter-spacing: -0.01em; color: var(--cd-ink);
}
.viewer__coverline {
  margin: 0; font-family: var(--cd-serif); font-style: italic;
  font-size: clamp(15px, 2.2vw, 21px); color: var(--cd-sage); max-width: 24ch;
}

.viewer__hint {
  /* below the chips bar, which owns the very top of the viewer */
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 4px 10px; z-index: 3; pointer-events: none;
  font-family: var(--cd-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--cd-muted); background: rgba(236, 229, 211, 0.82); border-radius: 999px;
}

/* ---- floating tools ---- */
.viewer__tools {
  position: absolute; z-index: 4;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}
.toolbtn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--cd-rule); background: var(--cd-card); color: var(--cd-ink);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.toolbtn:hover { background: var(--surface-zebra); border-color: var(--cd-ink); }

/* ---- chips bar ---- */
.chips {
  position: absolute; z-index: 5;
  top: 10px; left: 10px; right: 10px;
  display: flex; align-items: center; gap: 8px;
}
.chips__row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  flex: 1 1 auto; overflow-x: auto; scrollbar-width: none;
}
.chips__row::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  max-width: 46vw;
  padding: 5px 10px; border: 1px solid var(--cd-rule); border-radius: 999px;
  background: var(--cd-card); font-size: 13px; line-height: 1.3;
}
.chip__key {
  font-weight: 700; font-size: 10px; letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--text-muted); flex: none;
}
.chip__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__act {
  border: none; background: none; padding: 0 2px; cursor: pointer;
  color: var(--text-muted); font-size: 14px; line-height: 1; flex: none;
}
.chip__act:hover { color: var(--accent); }

.chip--summary {
  flex: none; cursor: pointer; font-weight: 700;
  border-color: var(--cd-ink); max-width: none;
}
.chip--summary:hover { background: var(--surface-zebra); }

/* ============================================================
   Options column
   ============================================================ */

.options {
  flex: 0 0 360px; width: 360px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-left: var(--hairline);
  background: var(--surface-page);
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  padding-right: calc(16px + env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: 14px;
}

.card {
  background: var(--surface-card);
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: 14px 16px;
}
.card__title {
  margin: 0 0 10px;
  font-family: var(--cd-sans); font-weight: 700;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--text-muted);
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card__head .card__title { margin-bottom: 10px; }

.note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.note--warn {
  color: var(--warn-ink); background: var(--warn-field);
  border-radius: 8px; padding: 8px 10px;
}
.caption {
  margin: 10px 0 0; font-weight: 700; font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--text-muted);
}

.linkbtn {
  border: none; background: none; padding: 0; margin: 10px 0 0;
  color: var(--link); font-family: var(--cd-sans); font-size: 14px; font-weight: 700;
  cursor: pointer; text-align: left;
}
.linkbtn:hover { color: var(--link-hover); text-decoration: underline; }

.modelrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modelrow__label { font-size: 15px; }
.modelrow .linkbtn { margin: 0; }

/* ---- product header ---- */
.prodhead { padding: 2px 2px 0; }
.prodhead__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.prodhead__name {
  margin: 0; font-family: var(--cd-serif); font-weight: 600; font-size: 30px; line-height: 1.15;
}
.prodhead__price { font-family: var(--cd-serif); font-size: 20px; color: var(--text-body); flex: none; }

.zoneline {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.zoneline__label {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-body); text-align: center;
  overflow-wrap: anywhere;                 /* zone names must never be clipped */
}
.round {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid var(--cd-rule); background: var(--cd-card); color: var(--cd-ink);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.round:hover { border-color: var(--cd-ink); background: var(--surface-zebra); }

/* ---- fabric pills ---- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--cd-rule); background: var(--cd-card);
  font-family: var(--cd-sans); font-size: 14px; font-weight: 700; color: var(--cd-ink);
  cursor: pointer;
}
.pill:hover { border-color: var(--cd-ink); }
.pill.is-on { background: var(--cd-ink); border-color: var(--cd-ink); color: var(--cd-cream); }
.pill--locked {
  border-style: dashed; color: var(--text-muted); cursor: default; font-weight: 400;
}
.pill--locked:hover { border-color: var(--cd-rule); }
.pill__hint { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }

/* ---- colour swatches ---- */
.swatches {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
}
.swatch {
  position: relative; aspect-ratio: 1 / 1; padding: 0;
  border: 1px solid var(--cd-rule); border-radius: 8px; overflow: hidden;
  background: var(--surface-zebra); cursor: pointer;
}
.swatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swatch.is-on {
  border: 2px solid var(--cd-ink);
  box-shadow: inset 0 0 0 2px var(--cd-cream);
}

/* ---- custom print card ---- */
.locknote {
  margin: 0; padding: 10px 12px; border: 1px dashed var(--cd-rule); border-radius: 10px;
  font-size: 13px; line-height: 1.45; color: var(--text-body); background: var(--surface-zebra);
}
.uploadrow { display: flex; align-items: center; gap: 10px; }
.uploadrow__thumb {
  width: 46px; height: 46px; flex: none; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--cd-rule); background: var(--surface-zebra);
}
.uploadrow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uploadrow__name {
  font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; margin: 0;
}
.slider { margin-top: 10px; }
.slider__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--text-muted);
}
.slider__val { font-family: var(--cd-mono); }
.slider input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }
.printbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.printbtns .cd-btn { padding: 9px 14px; font-size: 13px; }

/* ---- status card ---- */
.statusline { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.statusline b { font-weight: 700; }
#status-warnings { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

/* ---- sizing ---- */
.units { display: inline-flex; border: 1px solid var(--cd-rule); border-radius: 999px; overflow: hidden; }
.unit {
  border: none; background: var(--cd-card); color: var(--text-muted);
  font-family: var(--cd-sans); font-weight: 700; font-size: 12px;
  padding: 6px 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em;
}
.unit.is-on { background: var(--cd-ink); color: var(--cd-cream); }

.field { display: block; margin-bottom: 10px; }
.field__label {
  display: block; margin-bottom: 4px;
  font-weight: 700; font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--text-muted);
}
.field .cd-input.is-bad { border-color: var(--warn-ink); }

/* ---- debug card ---- */
.debug__toggles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.check { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.check .key {
  font-family: var(--cd-mono); font-size: 11px; color: var(--text-muted);
  border: 1px solid var(--cd-rule); border-radius: 4px; padding: 0 4px;
}
.legend { display: flex; flex-direction: column; }
.legend__row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 4px; border: none; background: none; cursor: pointer;
  border-bottom: var(--hairline); font-size: 13px; text-align: left; color: var(--cd-ink);
}
.legend__row:nth-child(even) { background: var(--surface-zebra); }
.legend__row.is-on { outline: 2px solid var(--accent); outline-offset: -2px; }
.legend__chip { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid var(--cd-rule); }
.legend__name { flex: 1 1 auto; }
.legend__row.is-miss .legend__name { text-decoration: line-through; color: var(--warn-ink); }
.legend__count { font-family: var(--cd-mono); font-size: 11px; color: var(--text-muted); }

/* ============================================================
   Bottom bar
   ============================================================ */

.bottombar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  border-top: var(--hairline); background: var(--surface-card);
  padding: 10px calc(16px + env(safe-area-inset-right))
           calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.bottombar .cd-btn { padding: 10px 18px; }
.bottombar__chosen {
  margin: 0; font-size: 13px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0;
}
.bottombar__price { margin: 0; font-size: 13px; color: var(--text-muted); flex: none; }
.bottombar__total {
  margin: 0; font-family: var(--cd-serif); font-size: 20px; flex: none;
}
#cart-button { margin-left: auto; flex: none; }
.count { font-weight: 700; }

/* ============================================================
   Toast
   ============================================================ */

.toast {
  position: fixed; z-index: 500;
  top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  max-width: min(92vw, 460px);
  padding: 9px 16px; border-radius: 999px;
  background: var(--cd-ink); color: var(--cd-cream);
  font-size: 14px; line-height: 1.35; text-align: center;
  pointer-events: none;
}
.toast--warn { background: var(--warn-ink); }

/* ============================================================
   Modals
   ============================================================ */

.backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(26, 26, 26, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.modal {
  background: var(--surface-card); border: var(--hairline); border-radius: var(--radius-card);
  width: min(620px, 96vw); max-height: 88svh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal__head { padding: 18px 20px 12px; border-bottom: var(--hairline); }
.modal__title { margin: 0; font-family: var(--cd-serif); font-weight: 600; font-size: 26px; line-height: 1.2; }
.modal__sub {
  margin: 6px 0 0; font-family: var(--cd-serif); font-style: italic;
  font-size: 16px; color: var(--cd-sage);
}
.modal__body { padding: 16px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal__foot {
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: var(--hairline);
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.modal__section { margin: 0 0 8px; }

.rows { width: 100%; border-collapse: collapse; font-size: 15px; }
.rows th {
  text-align: left; padding: 8px 10px; border-bottom: var(--hairline);
  font-weight: 700; font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.rows td { padding: 9px 10px; border-bottom: var(--hairline); vertical-align: top; }
.rows tbody tr:nth-child(even) { background: var(--surface-zebra); }
.rows td:first-child { width: 1%; white-space: nowrap; font-weight: 700; }  /* labels size to content */
.rows td.wrap, .rows td:last-child { overflow-wrap: anywhere; }
.rows tr.is-total td { font-family: var(--cd-serif); font-size: 18px; }

/* add-on rows */
.addon {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 10px; margin-bottom: 8px; cursor: pointer;
  border: 1px solid var(--cd-rule); border-radius: 12px; background: var(--cd-card);
  font-family: var(--cd-sans); font-size: 15px; color: var(--cd-ink);
}
.addon:hover { border-color: var(--cd-ink); }
.addon.is-on { border-color: var(--accent); background: var(--surface-zebra); outline: 1px solid var(--accent); }
.addon__pic {
  width: 62px; height: 62px; flex: none; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--cd-rule); background: var(--surface-zebra);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  text-align: center; padding: 4px;
}
.addon__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.addon__main { flex: 1 1 auto; min-width: 0; }
.addon__name { margin: 0; font-weight: 700; font-size: 15px; }
.addon__desc { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.addon__unlock { margin: 5px 0 0; font-size: 12px; color: var(--cd-sage); }
.addon__price { flex: none; font-family: var(--cd-serif); font-size: 17px; }

.guide { display: flex; flex-direction: column; gap: 12px; }
.guide__card { display: flex; gap: 12px; border: var(--hairline); border-radius: 12px; padding: 12px; }
.guide__steps { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.guide__steps li { margin-bottom: 4px; }
.guide__name { margin: 0; font-weight: 700; }
.agree__copy { margin: 0 0 14px; font-size: 15px; line-height: 1.55; }

/* ============================================================
   Fullscreen overlay (CSS only — iOS Safari has no element fullscreen)
   ============================================================ */

.app.is-full .viewer {
  position: fixed; inset: 0; z-index: 200;
  width: 100vw; height: 100svh;
}
.app.is-full .options,
.app.is-full .bottombar { display: none; }
.app.is-full .chips { display: none; }

/* ============================================================
   Tablet and phone: 900px and under
   ============================================================ */

@media (max-width: 900px) {
  /* the chips bar is a fixed strip across the top; the columns start below it */
  .app__main { padding-top: calc(48px + env(safe-area-inset-top)); }

  .chips {
    position: fixed; top: 0; left: 0; right: 0;
    height: calc(48px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
    background: var(--surface-card); border-bottom: var(--hairline);
    border-radius: 0;
  }
  .chip__key { display: none; }
  .chip { max-width: 60vw; }

  .viewer { flex: 0 0 62%; width: 62%; }
  .options {
    flex: 0 0 38%; width: 38%;
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom));
    gap: 12px;
  }
  .card { padding: 12px; border-radius: 12px; }
  .prodhead__name { font-size: 22px; }
  .prodhead__price { font-size: 17px; }

  .swatches { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }

  .bottombar {
    min-height: calc(58px + env(safe-area-inset-bottom));
    gap: 10px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .bottombar__chosen { display: none; }        /* no room, and it is not decisive */
  .bottombar__price { font-size: 11px; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
  .bottombar__total { font-size: 17px; }
  .bottombar .cd-btn { padding: 9px 12px; font-size: 13px; }

  .app.is-full .app__main { padding-top: 0; }

  .modal { width: 96vw; max-height: 88svh; }
  .slider input[type="range"] { height: 34px; }
}

/* ============================================================
   Phone portrait: 520px and under — stack, pack on top (golden ratio)
   ============================================================ */

@media (max-width: 520px) {
  .app__main { flex-direction: column; }
  /* the pack is the hero: golden ratio of the free height, measured on the boxes
     themselves (a flex-basis of 0 would hand the options column its padding on top) */
  .viewer { flex: 0 0 calc(100% * 1.618 / 2.618); width: 100%; min-height: 0; }
  .options {
    flex: 1 1 0; width: 100%; min-height: 0;
    border-left: none; border-top: var(--hairline);
  }
  .bottombar { gap: 8px; padding-left: calc(10px + env(safe-area-inset-left)); padding-right: calc(10px + env(safe-area-inset-right)); }
  .bottombar > .cd-btn--ghost { white-space: nowrap; padding: 9px 10px; }
  .bottombar__price { font-size: 10px; }
  .chip { max-width: 52vw; }
  .viewer__hint { display: none; }             /* the strip above already crowds the top */
  .app.is-full .viewer { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}