:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #29252a;
  background: #f1efeb;
  color-scheme: light;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #7b304a; outline-offset: 4px; }
a { color: inherit; }
.viewer-shell { height: 100svh; min-height: 760px; max-width: 2000px; margin: auto; padding: 0 48px; display: flex; flex-direction: column; }
.viewer-header { height: 91px; flex-shrink: 0; border-bottom: 1px solid #d8d4ce; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { font-size: 15px; letter-spacing: .04em; font-weight: 800; text-decoration: none; white-space: nowrap; }
.wordmark > span:first-child { font-weight: 400; }
.viewer-header nav { display: flex; gap: 30px; align-items: center; font-size: 11px; }
.viewer-header nav a { text-decoration: none; }
.viewer-header nav a:hover { color: #87394f; }
.shop-link span { margin-left: 12px; }
.showcase { flex: 1; min-height: 0; display: grid; grid-template-columns: 225px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 24px; }
.palette { align-self: center; padding: 30px 4px; max-height: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9bfba transparent; }
.eyebrow { color: #817772; font-size: 9px; letter-spacing: .19em; margin: 0 0 17px; }
h1 { font: 400 clamp(20px, 2vw, 25px)/1.16 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; margin: 0 0 9px; }
.guard-subtitle { margin: 0 0 30px; font-size: 12px; line-height: 1.5; letter-spacing: .025em; color: #817772; }
.palette h2 { font-size: 10px; font-weight: 400; letter-spacing: .04em; color: #837973; margin: 0 0 12px; }
.preset-list { display: flex; flex-direction: column; gap: 2px; }
.preset { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 10px 9px 0; background: transparent; border: 0; font-size: 11px; line-height: 1.2; border-radius: 7px; color: #817873; }
.preset:hover { color: #29252a; }
.preset[aria-pressed="true"] { color: #29252a; font-weight: 600; }
.swatch { position: relative; overflow: hidden; flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--swatch); border: 3px solid #f1efeb; box-shadow: 0 0 0 1px transparent; }
.swatch::after { content: ''; position: absolute; inset: 0; color: #f5f7ff; background: radial-gradient(circle at 22% 28%, currentColor .65px, transparent 1px), radial-gradient(circle at 68% 18%, currentColor .5px, transparent 1px), radial-gradient(circle at 49% 58%, currentColor .7px, transparent 1px), radial-gradient(circle at 80% 77%, currentColor .65px, transparent 1px), radial-gradient(circle at 17% 83%, currentColor .5px, transparent 1px); }
.preset[data-glitter="gold"] .swatch::after { color: #ffd05c; }
.preset[aria-pressed="true"] .swatch { box-shadow: 0 0 0 1px #897a7e; }
.slab-column { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.stage { min-height: 0; flex: 1; position: relative; }
#product-canvas {
  display: block; width: 100%; height: 100%; pointer-events: none; touch-action: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
}
.loading { position: absolute; inset: 47% 0 auto; text-align: center; font-size: 12px; letter-spacing: .05em; color: #827772; pointer-events: none; }
[hidden] { display: none !important; }
.lookup-area { width: min(360px, 100%); align-self: center; padding: 3px 0 20px; }
.cert-form > label { display: block; margin-bottom: 12px; font-size: 11px; letter-spacing: .02em; }
.psa-availability { margin: 0 0 8px; font-size: 10px; color: #817772; }
.psa-availability span { color: #9b3045; }
.cert-input-row { display: flex; border: 1px solid #cec6c0; border-radius: 3px; overflow: hidden; background: #f7f5f1; }
.cert-input-row:focus-within { border-color: #824054; }
.cert-input-row input { min-width: 0; width: 100%; border: 0; padding: 13px 14px; background: transparent; color: #29252a; font-size: 12px; outline: 0; }
.cert-input-row input::placeholder { color: #a09790; }
.cert-input-row input:disabled { cursor: not-allowed; opacity: .6; }
.cert-input-row button { flex-shrink: 0; border: 0; border-left: 1px solid #cec6c0; background: transparent; padding: 0 15px; font-size: 11px; }
.cert-input-row button:hover:enabled { background: #e7dfda; }
.cert-input-row button span { margin-left: 13px; }
.upload-scan { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; margin-top: 12px; padding: 12px 14px; border: 1px solid #71364b; border-radius: 3px; background: #71364b; color: #fff; font-size: 12px; }
.upload-scan:hover:enabled { background: #5c293b; }
.scan-help { margin: 8px 0 0; font-size: 10px; line-height: 1.5; color: #817772; }
.lookup-status { margin: 10px 0 0; min-height: 26px; font-size: 10px; line-height: 1.5; color: #8b8079; }
.lookup-status[data-state="error"] { color: #9b3045; }
.lookup-status[data-state="success"] { color: #43624b; }
.error { position: absolute; inset: 30% 8% auto; padding: 24px; background: #f1efeb; border: 1px solid #cbbfbb; font-size: 12px; }
.error button { padding: 9px 16px; background: #29252a; color: white; border: 0; }
.viewer-footer { height: 48px; flex-shrink: 0; border-top: 1px solid #d8d4ce; display: flex; align-items: center; justify-content: space-between; font-size: 9px; letter-spacing: .025em; color: #8a7f78; }
.viewer-footer a { text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.embed .viewer-shell { padding: 0 20px; min-height: 650px; }
body.embed .viewer-header, body.embed .viewer-footer { display: none; }
body.embed .showcase { grid-template-columns: 170px minmax(0, 1fr); gap: 14px; }
body.embed h1 { font-size: 19px; }
@media (min-width: 1500px) { .viewer-shell { padding: 0 70px; } .showcase { grid-template-columns: 280px minmax(0, 1fr); } }
@media (max-height: 840px) and (min-width: 701px) { .viewer-shell { min-height: 700px; } .viewer-header { height: 76px; } h1 { font-size: 25px; } .guard-subtitle { margin-bottom: 23px; } .preset { padding-top: 7px; padding-bottom: 7px; } .palette { padding: 20px 4px; } .lookup-area { padding-bottom: 12px; } }
@media (max-width: 1000px) { .viewer-shell { padding: 0 30px; } .showcase { grid-template-columns: 190px minmax(0, 1fr); gap: 10px; } h1 { font-size: 21px; } }
@media (max-width: 700px) {
  .viewer-shell { padding: 0 20px; min-height: 720px; }
  .viewer-header { height: 74px; gap: 12px; }
  .wordmark { font-size: 11px; }
  .viewer-header nav { font-size: 9px; gap: 13px; }
  .shop-link span { margin-left: 5px; }
  .showcase { grid-template-columns: 112px minmax(0, 1fr); gap: 4px; }
  .palette { align-self: center; padding: 20px 2px; }
  .eyebrow { font-size: 7px; margin-bottom: 14px; }
  h1 { font-size: 12.5px; }
  .guard-subtitle { font-size: 10px; line-height: 1.45; margin-bottom: 27px; }
  .palette h2 { font-size: 9px; margin-bottom: 13px; }
  .preset { padding: 8px 6px 8px 0; gap: 7px; font-size: 9px; min-height: 39px; }
  .swatch { width: 18px; height: 18px; border-width: 2px; }
  .preset-name { max-width: 81px; }
  .slab-column { align-self: center; }
  .stage { flex: none; width: 100%; aspect-ratio: .57; }
  .lookup-area { padding-bottom: 16px; }
  .cert-form > label { font-size: 10px; margin-bottom: 10px; }
  .cert-input-row input { font-size: 16px; padding: 11px 9px; width: 100%; }
  .cert-input-row input::placeholder { font-size: 10px; }
  .cert-input-row button { font-size: 9px; padding: 0 9px; }
  .cert-input-row button span { display: none; }
  .lookup-status { font-size: 9px; min-height: 40px; }
  .viewer-footer { height: 44px; font-size: 8px; gap: 12px; }
  .loading { font-size: 9px; }
  body.embed .viewer-shell { padding: 0 14px; }
  body.embed .showcase { grid-template-columns: 110px minmax(0, 1fr); gap: 4px; }
  body.embed h1 { font-size: 12.5px; }
}