/* Goodboy Gallery simple product page: Photo -> Preview -> Buy. Uses v16 tokens.
   Controls: one dark button per step, segmented tabs, and one option tile for every choice
   (background, size, frame). Round chips only float on the picture (Back, View larger). */
.sp-page #textBtn,.gc-page #cartBtn{display:none}
.sp{--opt-r:14px;max-width:560px;margin:0 auto;padding-bottom:56px}
.sp-head{text-align:center;margin:8px 0 18px}
.sc-crumbs{display:flex;justify-content:center;gap:10px;align-items:center;padding:20px 0 0;font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sc-crumbs a{text-decoration:none;color:var(--muted)}.sc-crumbs [aria-current]{color:var(--ink)}
.sp-title{font:560 clamp(2.2rem,6vw,3.2rem)/1.05 var(--disp);margin:0}
.sp-line{font:italic 450 1.15rem/1.4 var(--disp);color:var(--rust);margin:6px 0 0}

/* The picture */
.sp-stage{position:relative;border-radius:var(--r-lg,22px);background:var(--sand,#efe6da);overflow:hidden;aspect-ratio:2/3;max-height:62svh;margin:0 auto;display:grid;place-items:center}
.sp-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:filter .4s}
.sp[data-shape=wide] .sp-stage{aspect-ratio:3/2}
.sp[data-shape=square] .sp-stage{aspect-ratio:1/1}
.sp[data-step=photo] .sp-stage{aspect-ratio:1/1;max-height:38svh}
.sp[data-step=photo] .sp-art{object-fit:cover}
.sp-badge{position:absolute;left:12px;top:12px;margin:0;padding:6px 10px;border-radius:999px;background:rgba(255,253,249,.92);font:600 .72rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sp-back,.sp-zoom{position:absolute;top:10px;z-index:2;min-height:38px;border:0;border-radius:999px;background:rgba(255,253,249,.92);color:var(--ink);cursor:pointer;box-shadow:0 4px 12px -8px rgba(22,17,13,.5)}
.sp-back{left:10px;padding:0 14px;font:600 .9rem/1 var(--sans)}
.sp-zoom{right:10px;width:38px;display:none;place-items:center}
.sp-zoom svg{width:19px;height:19px}
.sp[data-step=preview] .sp-zoom,.sp[data-step=buy] .sp-zoom{display:grid}
.sp[data-step=buy] .sp-badge{display:none}
.sp[data-step=buy] .sp-stage{aspect-ratio:1/1;background:linear-gradient(160deg,#f4f1eb,#e7e4de)}  /* the studio wall tone */
.sp[data-step=buy] .sp-art{transition:none}
.sp-stage.is-loading .sp-art{opacity:.6;transition:opacity .2s}
.sp[data-view=digital] .sp-art{padding:7% 12%;filter:drop-shadow(0 14px 22px rgba(22,17,13,.28))}

/* Waiting card: painting and checkout. A paw trots at the head of the bar. */
.sp-stage.is-making .sp-art{filter:blur(12px) saturate(.6) brightness(1.05)}
.sp-making{position:absolute;inset:auto 14px 14px;z-index:3;padding:16px 16px 14px;border-radius:18px;background:#fffdf9;box-shadow:0 24px 50px -28px rgba(22,17,13,.6);text-align:center}
.sp-making-title{margin:0;font:560 1.3rem/1.15 var(--disp);text-wrap:balance}
.sp-making-line{min-height:1.4em;margin:6px 0 14px;font:italic 450 1rem/1.4 var(--disp);color:var(--ink-2)}
.sp-track{position:relative;height:10px;margin:0 6px;border-radius:999px;background:rgba(22,17,13,.09)}
.sp-fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,4%);border-radius:inherit;background:var(--rust);transition:width .4s linear}
.sp-fill::after{content:"";position:absolute;right:-13px;top:50%;width:26px;height:26px;translate:0 -50%;border-radius:50%;background:#fffdf9;box-shadow:0 3px 10px -3px rgba(22,17,13,.45)}
.sp-fill::before{content:"";position:absolute;right:-7px;top:50%;z-index:1;width:14px;height:14px;translate:0 -50%;background:var(--rust);-webkit-mask:url('/assets/paw-mask.svg') center/contain no-repeat;mask:url('/assets/paw-mask.svg') center/contain no-repeat;animation:sp-trot .5s ease-in-out infinite alternate}
@keyframes sp-trot{from{transform:rotate(-12deg) translateY(1px)}to{transform:rotate(12deg) translateY(-1px)}}
.sp-making-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:12px 6px 0;font:500 .78rem/1.3 var(--sans);color:var(--muted);text-align:right}
.sp-making-meta b{color:var(--ink);font-weight:650}

/* Steps */
.sp-panel{margin-top:18px;display:grid;gap:12px}
.sp-panel[data-busy=true]{opacity:.7;pointer-events:none}
.sp-pets{display:grid;gap:12px}
.sp-pet{display:grid;gap:8px}
.sp-pets.is-multi .sp-pet{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.sp-pets.is-multi .sp-pick{min-height:56px;padding:6px 10px;gap:8px;font-size:.98rem}
.sp-pets.is-multi .sp-pick svg{margin:0 4px}
.sp-pets.is-multi .sp-pick img{width:42px;height:42px}
.sp-pick{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border:1.5px dashed var(--line-2,#d8cdbf);border-radius:var(--opt-r);background:var(--paper,#fffdf9);cursor:pointer;font:600 1.05rem/1.2 var(--sans)}
.sp-pick:focus-within{outline:3px solid var(--rust);outline-offset:2px}
.sp-pick img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.sp-pick svg{width:26px;height:26px;margin:0 11px}
.sp-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sp-name{font:inherit;font-size:1.05rem;width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line-2,#d8cdbf);border-radius:var(--opt-r);background:var(--paper,#fffdf9);color:var(--ink)}
.sp-go{min-height:56px;border:0;border-radius:999px;background:var(--ink);color:#fff8ee;font:650 1.08rem/1 var(--sans);cursor:pointer;padding:0 22px}
.sp-go:disabled{background:var(--line-2,#d8cdbf);color:var(--ink-2);cursor:default}
.sp-link{border:0;background:none;padding:6px 2px;font:600 1rem/1.3 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:center}
.sp-row{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center}

/* Choices: segmented tabs, then one tile style for background, size and frame. */
.sp-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:calc(var(--opt-r) + 4px);background:var(--sand,#efe6da)}
.sp-tab{display:grid;gap:3px;justify-items:center;align-content:center;min-height:56px;border:0;border-radius:var(--opt-r);background:none;color:var(--ink);cursor:pointer;font:inherit}
.sp-tab b{font:650 1rem/1.1 var(--sans)}
.sp-tab small{font:500 .84rem/1 var(--sans);color:var(--ink-2)}
.sp-tab[aria-selected=true]{background:var(--paper,#fffdf9);box-shadow:0 6px 16px -10px rgba(22,17,13,.45)}
.sp-opts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.sp-opt{display:grid;place-items:center;align-content:center;gap:5px;min-height:48px;padding:6px 4px;border:1.5px solid var(--line-2,#d8cdbf);border-radius:var(--opt-r);background:var(--paper,#fffdf9);color:var(--ink);font:600 .92rem/1.15 var(--sans);text-align:center;cursor:pointer}
.sp-opt:has(.sp-sw){font-size:.76rem}
.sp-opt[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--sand,#efe6da)}
.sp-opt:focus-visible,.sp-tab:focus-visible,.sp-go:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
.sp-sw{display:block;width:24px;height:24px;border-radius:7px;border:1px solid rgba(22,17,13,.22);background:#f3ece2}
.sp-sw[data-sw="Solid Black"]{background:#16110d}.sp-sw[data-sw="Solid White"]{background:#fff}
.sp-sw[data-sw="Dark Wood"]{background:#5a3a24}.sp-sw[data-sw="Light Wood"]{background:#c9a074}
.sp-sw[data-sw="Soft White"]{background:#f7f3ec}.sp-sw[data-sw="Shadow Black"]{background:#1d1a17}
.sp-sw[data-sw="Pastel Blue"]{background:#cfdeea}.sp-sw[data-sw="Pale Pink"]{background:#f2d6d3}
.sp-sw[data-sw="No Frame"]{background:repeating-linear-gradient(135deg,#fffdf9 0 4px,#ece4d8 4px 5px)}

/* Text */
.sp-caption{margin:0 0 -2px;text-align:center;font:600 .95rem/1.3 var(--sans);color:var(--ink)}
.sp-lead{margin:0;text-align:center;font:560 1.6rem/1.15 var(--disp)}
.sp-hint{margin:0;text-align:center;font:450 .92rem/1.4 var(--sans);color:var(--ink-2)}
.sp-status{min-height:1.4em;margin:12px 0 0;text-align:center;font:500 .98rem/1.4 var(--sans);color:var(--ink-2)}
.sp-status:empty{min-height:0;margin:0}
.sp-status[data-error=true]{color:#a3352a}
.sp-promise{margin:18px 0 0;text-align:center;font:500 .9rem/1.4 var(--sans);color:var(--ink-2)}

/* View larger: full screen, pinch to zoom. */
.sp-lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:64px 10px 20px;background:rgba(22,17,13,.94)}
.sp-lightbox[hidden]{display:none}
.sp-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.sp-close{position:absolute;top:14px;right:14px;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:#fffdf9;color:var(--ink);font:600 .95rem/1 var(--sans);cursor:pointer}
html.sp-locked{overflow:hidden}

/* Your versions: a chip on the picture opens every saved portrait for this product. */
.sp-versions{position:absolute;left:10px;bottom:10px;z-index:2;display:none;align-items:center;gap:8px;min-height:40px;padding:4px 12px 4px 5px;border:0;border-radius:999px;background:rgba(255,253,249,.92);color:var(--ink);font:600 .9rem/1 var(--sans);cursor:pointer;box-shadow:0 4px 12px -8px rgba(22,17,13,.5)}
.sp[data-step=photo] .sp-versions:not([hidden]),.sp[data-step=preview] .sp-versions:not([hidden]),.sp[data-step=failed] .sp-versions:not([hidden]){display:flex}
.sp-versions-stack{display:flex}
.sp-versions-stack img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fffdf9;background:var(--sand,#efe6da)}
.sp-versions-stack img+img{margin-left:-12px}
.sp-versions b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ink);color:#fff8ee;font:650 .78rem/1 var(--sans)}
.sp-versions:focus-visible,.sp-v:focus-visible,.sp-sheet .sp-close:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
.sp-sheet{position:fixed;inset:0;z-index:1000;display:grid;align-items:end;justify-items:center;background:rgba(22,17,13,.55)}
.sp-sheet[hidden]{display:none}
.sp-sheet-card{outline:0;box-sizing:border-box;width:100%;max-width:560px;max-height:82svh;overflow:auto;overscroll-behavior:contain;display:grid;gap:8px;align-content:start;padding:18px 16px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:#fffdf9;animation:sp-rise .28s cubic-bezier(.2,.8,.2,1)}
@keyframes sp-rise{from{translate:0 28px;opacity:0}}
.sp-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-sheet-title{margin:0;font:560 1.6rem/1.1 var(--disp)}
.sp-sheet .sp-close{position:static;background:var(--sand,#efe6da)}
.sp-sheet .sp-hint{text-align:left}
.sp-vgrid{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.sp-v{display:grid;gap:4px;width:100%;padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.sp-v-art{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border:1.5px solid transparent;border-radius:14px;background:var(--sand,#efe6da);overflow:hidden}
.sp-v-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.sp-v[aria-current] .sp-v-art{border-color:var(--ink)}
.sp-v-name{font:600 .9rem/1.2 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-v-when{font:500 .78rem/1.25 var(--sans);color:var(--ink-2)}
.sp-sheet-body{display:grid;gap:10px}
.sp-sheet .sp-member{margin:4px 0 0;text-align:left}
.sp-sheet .sp-member .sp-link{padding:2px 0;font-size:.92rem}
/* Joining: one card with the reason, the email choice and the button. */
.sp-join{display:grid;gap:10px;padding:14px;border-radius:18px;background:var(--sand,#efe6da)}
.sp-join-title{margin:0;font:560 1.3rem/1.15 var(--disp)}
.sp-join .sp-hint{text-align:left}
.sp-check{display:flex;align-items:center;gap:10px;min-height:44px;font:500 .95rem/1.3 var(--sans);color:var(--ink);cursor:pointer}
.sp-check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--ink)}
.sp-gallery{min-height:36px;gap:8px;font-size:.84rem;color:var(--ink-2);margin:2px 0 -2px}
.sp-gallery input{width:17px;height:17px}
.sp-v.is-locked img{opacity:.5}
.sp-v-lock{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:38px;height:38px;translate:-50% -50%;border-radius:50%;background:#fffdf9;color:var(--ink)}
.sp-v-lock svg{width:18px;height:18px}
.sp-v.is-making .sp-v-art::before{content:"";width:34%;aspect-ratio:1;background:var(--rust);-webkit-mask:url('/assets/paw-mask.svg') center/contain no-repeat;mask:url('/assets/paw-mask.svg') center/contain no-repeat;animation:sp-trot .5s ease-in-out infinite alternate}
@media (min-width:900px){.sp-sheet{align-items:center}.sp-sheet-card{border-radius:22px;padding:22px 22px 24px}.sp-vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.sp-sheet-card{animation:none}.sp-v.is-making .sp-v-art::before{animation:none}}

/* Phones: on the Buy step the picture plus every choice and Checkout fit one screen. */
@media (max-width:899px){
  .sp[data-step=buy] .sp-stage{width:min(100%,40svh);max-height:none}
  .sp[data-step=buy] .sp-panel{margin-top:12px;gap:10px}
  .sp[data-step=buy] .sp-tab{min-height:50px;gap:2px}
  .sp[data-step=buy] .sp-opt{min-height:44px}
  .sp[data-step=buy] .sp-opt:has(.sp-sw){gap:4px;padding:5px 2px;font-size:.72rem;white-space:nowrap}
  .sp[data-step=buy] .sp-opt .sp-sw{width:20px;height:20px;border-radius:6px}
  .sp[data-step=buy] .sp-tab{min-height:46px}
  .sp[data-step=buy] .sp-go{min-height:52px}
  .sp[data-step=buy] .sp-hint{font-size:.86rem}
}
/* Desktop: picture left (sticky), steps right, stacked from the top. */
@media (min-width:900px){
  .sp{max-width:1040px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:48px;align-items:start}
  .sp-head{grid-column:1/-1}
  .sp-stage,.sp[data-step=photo] .sp-stage{grid-column:1;grid-row:2/span 4;width:100%;max-height:calc(100svh - 140px);position:sticky;top:24px}
  .sp-panel{grid-column:2;grid-row:2;margin-top:0}
  .sp-status{grid-column:2;grid-row:3}
  .sp-promise{grid-column:2;grid-row:4}
  .sp-lead,.sp-hint,.sp-status,.sp-promise,.sp-caption{text-align:left}
  .sp-row{justify-content:flex-start}.sp-link{justify-self:start}
}
@media (prefers-reduced-motion:reduce){.sp-fill,.sp-art{transition:none}.sp-fill::before{animation:none}}

/* Cart page: one row per portrait (picture, what it is, price), then one checkout. */
.gc [hidden]{display:none!important}
.gc .sp-head{margin-bottom:6px}
.gc-lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line,#e6dccf)}
.gc-line{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line,#e6dccf)}
.gc-art{width:84px;height:84px;object-fit:contain;border-radius:12px;background:var(--sand,#efe6da)}
.gc-body{display:grid;gap:3px;min-width:0}
.gc-title{margin:0;font:560 1.15rem/1.2 var(--disp)}
.gc-title a{color:var(--ink);text-decoration:none}
.gc-meta{margin:0;font:500 .92rem/1.35 var(--sans);color:var(--ink-2)}
.gc-addon{color:var(--ink)}
.gc-remove{justify-self:start;margin-top:4px;padding:4px 0;font-size:.9rem;color:var(--ink-2)}
.gc-price{margin:0;font:650 1.02rem/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.gc-foot{display:grid;gap:12px;margin-top:18px}
.gc-sub{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font:600 1.05rem/1.2 var(--sans)}
.gc-sub b{font:650 1.2rem/1 var(--sans)}
.gc-empty{display:grid;gap:18px;justify-items:center;margin-top:28px}
.gc-empty .sp-go,.gc .sp-go{display:grid;place-items:center;text-decoration:none;width:100%}
.gc-more{margin:16px 0 0;text-align:center}