/* Flow D v2 (2026-10-08): photo -> trait confirm -> one preview, and the
   post-purchase per-image approval page. Same tokens as style.css. */

[hidden] { display: none !important; }

/* ---------- step 3: upload ---------- */
.dropzone { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center; padding: 1rem 1.1rem; border: 1.5px dashed #9b958d; border-radius: var(--r-md); background: #fff; }
.dropzone[hidden] { display: none; }
.dropzone__icon { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; color: var(--dark); }
.dropzone__icon svg { width: 22px; height: 22px; }
.dropzone__t { font-weight: 600; }
.dropzone__s { font-size: var(--fs-small); color: var(--text-muted); }
.dropzone__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding-top: .4rem; }
.btn--sm { min-height: 44px; padding: .5rem 1.1rem; font-size: 1rem; }
.linkbtn { background: none; border: 0; padding: .5rem 0; min-height: 44px; font: inherit; font-size: var(--fs-small); color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.linkbtn:hover { color: var(--terracotta); }

/* ---------- step 3b: "is this your cat?" ---------- */
.read { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem 1.1rem; padding: 1.1rem; border: 1px solid var(--hair); border-radius: var(--r-lg); background: #fff; }
.read[hidden] { display: none; }
.read__photo { width: 112px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--hair); }
.read__head { display: grid; gap: .3rem; align-content: start; }
.read__q { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--dark); line-height: 1.15; }
.read__sum { font-size: var(--fs-small); color: var(--text); }
.read__fields { grid-column: 1 / -1; display: grid; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--hair); margin: 0; }
.trait { display: grid; gap: .4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.trait legend, .trait__k { font-size: var(--fs-small); font-weight: 600; margin: 0 0 .1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .35rem .85rem; border: 1px solid var(--hair); border-radius: 999px; background: var(--warm-white); font-size: var(--fs-small); }
.chip:hover span { border-color: #b9ad9f; }
.chip input:checked + span { border-color: var(--dark); background: #fff; color: var(--dark); font-weight: 600; box-shadow: 0 0 0 2px var(--dark); }
.chip input:focus-visible + span { outline: 3px solid var(--terracotta-deep); outline-offset: 2px; }
.dot { width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid rgba(46,42,38,.3); flex: none; }
.read textarea, .redo textarea { font: inherit; font-size: var(--fs-small); min-height: 72px; padding: .6rem .8rem; border: 1px solid #8a8178; border-radius: var(--r-sm); background: #fff; width: 100%; resize: vertical; color: var(--text); }
.read__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.read__foot .note { flex: 1 1 14rem; }
@media (max-width: 480px) {
  .read { grid-template-columns: 84px minmax(0, 1fr); padding: .9rem; }
  .read__photo { width: 84px; }
  .read__q { font-size: 1.2rem; }
  .read__foot .btn { width: 100%; }
}

/* ---------- step 3c: the one preview ---------- */
.sample { max-width: none; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); align-items: start; gap: 1.1rem; padding: 1.1rem; border-radius: var(--r-lg); background: var(--cream); margin-top: 0; }
.sample[hidden] { display: none; }
.sample__copy { display: grid; gap: .55rem; align-content: start; }
.sample__copy h3 { font-size: 1.25rem; }
.sample__fair { font-size: var(--fs-small); color: var(--text); padding: .65rem .8rem; background: var(--warm-white); border-radius: var(--r-sm); }
.sample__fair b { font-weight: 600; }
.sample .sample__art { animation: develop .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes develop { from { filter: blur(14px) saturate(.4); opacity: .4; } to { filter: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sample .sample__art { animation: none; } }
@media (max-width: 480px) { .sample { grid-template-columns: minmax(0, 1fr); } .sample__art { width: min(100%, 240px); } }

/* ---------- after-you-order steps ---------- */
.after__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: s; }
.after__steps li { counter-increment: s; position: relative; padding-left: 2.3rem; min-height: 1.6rem; font-size: var(--fs-small); color: var(--text); line-height: 1.5; }
.after__steps li::before { content: counter(s); position: absolute; left: 0; top: -.05rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; font-size: .75rem; font-weight: 600; color: var(--text-muted); background: #fff; }
.after__steps a { color: var(--terracotta-deep); }

/* gallery follows the long buy column on desktop instead of leaving a blank half-page */
@media (min-width: 861px) { .pdp .gallery { position: sticky; top: 88px; } }

/* ---------- approval page ---------- */
.ap-head { display: grid; gap: .55rem; padding-block: clamp(1.25rem, 3vw, 2.25rem) 1.5rem; }
.ap-head h1 { font-size: var(--fs-h1); text-wrap: balance; }
.ap-head .lede { max-width: 62ch; }
.ap-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; font-size: var(--fs-small); color: var(--text-muted); }
.ap-meta b { color: var(--dark); font-weight: 600; }
.ap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: clamp(1.5rem, 3.4vw, 3.5rem); align-items: start; padding-bottom: 2rem; }
@media (max-width: 960px) { .ap { grid-template-columns: minmax(0, 1fr); } }

.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.tile { display: grid; gap: .35rem; padding: .3rem .3rem .5rem; border: 1px solid var(--hair); border-radius: var(--r-md); background: #fff; cursor: pointer; font: inherit; text-align: left; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.tile:hover { border-color: #b9ad9f; }
.tile[aria-current='true'] { border-color: var(--dark); box-shadow: 0 0 0 1px var(--dark); }
.tile:focus-visible { outline: 3px solid var(--terracotta-deep); outline-offset: 2px; }
.tile__img { aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; background: #e4e1dc; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .3s ease, opacity .3s ease; }
.tile[data-state='waiting'] .tile__img img, .tile[data-state='redoing'] .tile__img img { filter: grayscale(1) blur(3px); opacity: .4; }
.tile__name { font-size: .8rem; font-weight: 600; padding-inline: .2rem; }
.tile__st { font-size: .72rem; padding-inline: .2rem; color: var(--text-muted); display: flex; align-items: center; gap: .35rem; line-height: 1.25; }
.st-ico { width: .7rem; height: .7rem; border-radius: 50%; flex: none; border: 1.5px solid currentColor; }
[data-state='ready'] .tile__st { color: var(--dark); font-weight: 600; }
[data-state='ready'] .st-ico { background: var(--dark); border-color: var(--dark); }
[data-state='approved'] .tile__st { color: #4a5a40; }
[data-state='approved'] .st-ico { background: #5f7052; border-color: #5f7052; }
[data-state='redoing'] .st-ico { border-style: dashed; animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-state='redoing'] .st-ico { animation: none; } }
@media (max-width: 560px) {
  .strip { gap: .35rem; }
  .tile { padding: .2rem .2rem .35rem; }
  .tile__name { font-size: .68rem; }
  .tile__st .st-t { display: none; }
}

.viewer { border-radius: var(--r-lg); background: var(--cream); padding: clamp(1rem, 2.6vw, 2.25rem); display: grid; place-items: center; }
.viewer__frame { position: relative; width: min(100%, 440px, calc((100svh - 200px) * 2 / 3)); aspect-ratio: 2/3; border-radius: var(--radius-img); overflow: hidden; background: #e4e1dc; box-shadow: 0 22px 44px -26px rgba(46,42,38,.55); }
.viewer__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer__veil { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .6rem; padding: 1.5rem; text-align: center; background: color-mix(in srgb, var(--cream) 80%, transparent); backdrop-filter: blur(8px); color: var(--dark); }
.viewer__veil[hidden] { display: none; }
.viewer__veil strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.viewer__veil p { font-size: var(--fs-small); color: var(--text); max-width: 30ch; }
.viewer__cap { position: absolute; left: .75rem; top: .75rem; background: rgba(46,42,38,.85); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 3px; }

.panel { display: grid; gap: 1.1rem; position: sticky; top: 92px; }
@media (max-width: 960px) { .panel { position: static; } }
.panel__h { display: grid; gap: .25rem; }
.panel__h h2 { font-size: 1.75rem; }
.panel__state { font-size: var(--fs-small); color: var(--text-muted); }
.check { display: grid; gap: .45rem; padding: .9rem 1rem; border-radius: var(--r-md); background: #fff; border: 1px solid var(--hair); }
.check p { font-size: var(--fs-small); font-weight: 600; }
.check ul { margin: 0; padding-left: 1.1rem; font-size: var(--fs-small); color: var(--text); display: grid; gap: .15rem; }
.actions { display: grid; gap: .6rem; }
.actions[hidden] { display: none; }
.actions .btn { width: 100%; }
.btn--approve { background: #4a5a40; border-color: #4a5a40; }
.btn--approve:hover { background: #5f7052; }
.redo { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--hair); border-radius: var(--r-md); background: #fff; margin: 0; min-width: 0; }
.redo[hidden] { display: none; }
.redo legend { font-weight: 600; font-size: 1rem; padding: 0; margin-bottom: .2rem; float: left; width: 100%; }
.redo__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.err { font-size: var(--fs-small); color: #9b2c1c; }
.err[hidden] { display: none; }
.progress { display: grid; gap: .45rem; }
.progress__bar { height: 6px; border-radius: 999px; background: var(--band); overflow: hidden; }
.progress__fill { height: 100%; background: #5f7052; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.progress__t { font-size: var(--fs-small); color: var(--text-muted); }
.finish { display: grid; gap: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--hair); }
.finish .btn { width: 100%; }
.done { display: grid; gap: .5rem; padding: 1.1rem; border-radius: var(--r-md); background: #eef1ea; color: #33402c; }
.done[hidden] { display: none; }
.done strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.done p { font-size: var(--fs-small); }
.proto-ctl { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin-top: 1.5rem; padding: .7rem .9rem; border: 1px dashed var(--flag); border-radius: var(--r-md); background: var(--flag-bg); color: var(--flag); font-size: var(--fs-small); }
.proto-ctl button { font: inherit; font-size: var(--fs-small); min-height: 44px; padding: .25rem .7rem; border: 1px solid var(--flag); border-radius: var(--r-sm); background: #fff; color: var(--flag); cursor: pointer; }


/* ---------- v3 (2026-10-08): names first, then the free cover sketch ---------- */
.names__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .9rem; }
.names__row .note { color: var(--text); font-weight: 600; }
.pv { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 1.4rem; align-items: start; padding: 1.25rem; border-radius: var(--r-lg); background: var(--cream); }
.pv__stage { display: grid; gap: .5rem; justify-items: center; }
.pv__book { position: relative; width: 100%; aspect-ratio: 687/1000; overflow: hidden; background: #e4e1dc; animation: develop .9s cubic-bezier(.16, 1, .3, 1) both; }
.pv__book--hard { border-radius: 3px 8px 8px 3px; box-shadow: inset 9px 0 6px -6px rgba(0,0,0,.35), 10px 14px 26px -16px rgba(46,42,38,.6); }
.pv__book--soft { border-radius: 2px 4px 4px 2px; box-shadow: inset 3px 0 3px -2px rgba(0,0,0,.25), 6px 9px 18px -12px rgba(46,42,38,.5); }
.pv__book > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv__plate { position: absolute; left: 3%; right: 12%; bottom: 8.5%; background: rgba(244, 237, 225, .94); padding: 5% 4% 4%; text-align: center; }
.pv__title { font-family: var(--font-display); font-weight: 700; color: #3a2a20; font-size: clamp(.95rem, 1.5vw, 1.35rem); line-height: 1.1; overflow-wrap: anywhere; padding-bottom: .4rem; border-bottom: 1px solid #b8a27a; margin-inline: 8%; }
.pv__line { font-size: clamp(.55rem, .7vw, .72rem); color: #3a2a20; padding-top: .35rem; }
.pv__badge { position: absolute; top: .55rem; left: .55rem; z-index: 2; background: var(--dark); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .55rem; border-radius: 3px; }
.pv__kind { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.pv__side { display: grid; gap: 1rem; align-content: start; }
.pv__photo { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-small); color: var(--text-muted); }
.pv__photo img { width: 44px; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; border: 1px solid var(--hair); }
.pv__seasons { display: grid; grid-template-columns: repeat(4, 52px); gap: .45rem; }
.pv__seasons span { display: grid; gap: .2rem; text-align: center; }
.pv__seasons img { width: 52px; aspect-ratio: 2/3; object-fit: cover; border-radius: 3px; filter: blur(1.6px) saturate(.85); image-rendering: pixelated; }
.pv__seasons i { font-style: normal; font-size: .62rem; color: var(--text-muted); }
@media (max-width: 520px) { .pv { grid-template-columns: minmax(0, 1fr); padding: 1rem; } .pv__stage { width: min(100%, 260px); margin-inline: auto; } .pv__title { font-size: 1.05rem; } .pv__line { font-size: .66rem; } }


/* ---------- personalise.html: post-purchase trait form ---------- */
.pz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(1.5rem, 3.4vw, 3.5rem); align-items: start; padding-bottom: 2rem; }
@media (max-width: 960px) { .pz { grid-template-columns: minmax(0, 1fr); } }
.pz__main { display: grid; gap: 0; }
.pz__block { display: grid; gap: .6rem; padding: 1.25rem 0; border: 0; border-top: 1px solid var(--hair); margin: 0; min-width: 0; }
.pz__block:first-child { border-top: 0; padding-top: 0; }
.pz__h { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--dark); padding: 0; margin-bottom: .2rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.pz__h .muted, .pz__h .req { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; }
.req { color: var(--dark); }
.pz__sub { display: grid; gap: .4rem; padding: .8rem 1rem; margin-top: .3rem; background: var(--cream); border-radius: var(--r-md); }
.pz__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: .7rem; }
.pz__ph { margin: 0; aspect-ratio: 3/4; border-radius: var(--r-sm); overflow: hidden; position: relative; }
.pz__ph img { width: 100%; height: 100%; object-fit: cover; }
.pz__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(46,42,38,.75); color: #fff; font-size: .66rem; padding: .25rem .35rem; text-align: center; }
.pz__add { display: grid; place-content: center; gap: .2rem; text-align: center; border: 1.5px dashed #9b958d; background: #fff; color: var(--text-muted); font: inherit; font-size: .75rem; line-height: 1.25; padding: .5rem; cursor: not-allowed; }
.pz__add span { font-size: 1.5rem; color: var(--dark); }
.pz__block textarea { font: inherit; font-size: var(--fs-small); min-height: 72px; padding: .6rem .8rem; border: 1px solid #8a8178; border-radius: var(--r-sm); width: 100%; resize: vertical; color: var(--text); }
.pz__block .hint { display: flex; justify-content: space-between; }
.pz__side { display: grid; gap: .9rem; position: sticky; top: 92px; }
@media (max-width: 960px) { .pz__side { position: static; } }
.pz__card { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; align-items: start; padding: 1rem; border-radius: var(--r-lg); background: var(--cream); }
.pz__card img { width: 72px; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; }
.pz__sum { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; color: var(--dark); margin-top: .3rem; }
.pz__side .btn { width: 100%; }

.pz__block { border-top: 0; box-shadow: 0 -1px 0 var(--hair); }
.pz__block:first-child { box-shadow: none; }
.pz__block > legend.pz__h { float: left; width: 100%; font-size: 1.3rem; margin-bottom: .6rem; }
.pz__block > legend.pz__h + * { clear: both; }


/* ---------- H2 (2026-10-08): dashboard PDP -> create -> save -> checkout -> studio ---------- */
.dash-sec { display: grid; gap: .8rem; padding-block: 1.4rem; border-top: 1px solid var(--hair); }
.dash-seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.dtile { margin: 0; display: grid; gap: .35rem; }
.dtile__img { position: relative; aspect-ratio: 2/3; border: 1px solid var(--hair); border-radius: var(--radius-img); overflow: hidden; background: #e4e1dc; display: grid; place-items: center; text-align: center; color: #5f5a54; font-size: .7rem; padding: .5rem; }
.dtile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dtile figcaption { font-size: var(--fs-small); font-weight: 600; }
.dash-inside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.imgslot--page { aspect-ratio: 3/4; }
.imgslot--page:has(img) { padding: .5rem; border-style: solid; }
.imgslot--page .swwrap { flex: 1; min-height: 0; width: 100%; }
.imgslot--page img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) { .imgslot--page:has(img) { aspect-ratio: auto; } }
/* inside pages: spread on its own full-width row, weekly + notes below; labels on top */
.dash-inside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-inside .imgslot--page { aspect-ratio: auto; justify-content: flex-start; align-items: center; }
.dash-inside .imgslot--spread { grid-column: 1 / -1; }
.dash-inside .imgslot--page .swwrap { flex: none; width: auto; max-width: 100%; display: inline-block; line-height: 0; }
.dash-inside .imgslot--page img { width: auto; height: auto; max-width: 100%; max-height: 520px; object-fit: contain; }
.dash-inside .imgslot--spread img { max-height: 420px; }
.dash-inside .imgslot--page .swtag { line-height: 1.2; }
@media (max-width: 640px) { .dash-inside .imgslot--spread { grid-column: auto; } .dash-inside .imgslot--page .swwrap, .dash-inside .imgslot--page img { width: 100%; max-height: none; } }
@media (max-width: 640px) { .dash-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-inside { grid-template-columns: minmax(0, 1fr); } .imgslot--page { aspect-ratio: 16/9; } }
.ctalink { text-decoration: none; text-align: center; }

/* create / save: form + output pages */
.fl { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(1.5rem, 3.4vw, 3.5rem); align-items: start; padding-block: 1rem 2.5rem; }
@media (max-width: 960px) { .fl { grid-template-columns: minmax(0, 1fr); } }
.fl__form { display: grid; gap: 1.4rem; min-width: 0; }
.fl__out { display: grid; gap: 1rem; min-width: 0; position: sticky; top: 92px; }
@media (max-width: 960px) { .fl__out { position: static; } }
.fl .pv { grid-template-columns: minmax(0, 1fr); }
.fl .pv__stage { width: min(100%, 300px); margin-inline: auto; }
.field input[type=email] { font: inherit; min-height: 48px; padding: .6rem .8rem; border: 1px solid #8a8178; border-radius: var(--r-sm); background: #fff; width: 100%; }
.opt { font-weight: 400; font-size: var(--fs-small); color: var(--text-muted); }
.photo-on { display: flex; gap: .8rem; align-items: center; padding: .7rem; border: 1px solid var(--hair); border-radius: var(--r-md); background: #fff; }
.photo-on img { width: 52px; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; border: 1px solid var(--hair); }
.gen { display: flex; gap: .8rem; align-items: center; padding: 1.2rem; border-radius: var(--r-lg); background: var(--cream); font-weight: 600; color: var(--dark); }
.gen .st-ico { width: 1.1rem; height: 1.1rem; border-style: dashed; animation: spin 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .gen .st-ico { animation: none; } }
.repaint { display: grid; gap: .4rem; padding: .8rem; border: 1px dashed var(--flag); border-radius: var(--r-md); background: var(--flag-bg); color: var(--flag); font-size: var(--fs-small); }
.repaint .btn { width: 100%; }
.pv__book.is-dim > img { filter: grayscale(.6) opacity(.6); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-small); color: var(--text); }
.consent input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; flex: none; accent-color: var(--dark); }
.more { border: 1px solid var(--hair); border-radius: var(--r-md); background: #fff; }
.more > summary { cursor: pointer; padding: .9rem 1rem; min-height: 48px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: '+'; font-size: 1.4rem; color: var(--dark); }
.more[open] > summary::after { content: '\2212'; }
.more__body { display: grid; gap: .6rem; padding: 0 1rem 1rem; }
.sum { display: grid; gap: .45rem; padding: 1rem; border-radius: var(--r-md); background: var(--cream); font-size: var(--fs-small); }
.sum div { display: flex; justify-content: space-between; gap: 1rem; }
.sum .tot { font-weight: 700; border-top: 1px solid var(--rule); padding-top: .5rem; font-size: 1rem; }

/* checkout mock */
.shopbanner { background: var(--dark); color: #fff; text-align: center; padding: .9rem 1rem; font-weight: 700; letter-spacing: .04em; margin-top: 1rem; border-radius: var(--r-md); }
.ck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: clamp(1.5rem, 3.4vw, 3.5rem); align-items: start; padding-block: 1.5rem 2.5rem; }
@media (max-width: 860px) { .ck { grid-template-columns: minmax(0, 1fr); } }
.ck__fake { display: grid; gap: .7rem; }
.ck__box { padding: .9rem 1rem; border: 1px dashed #9b958d; border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-small); background: #fff; }
.cartline { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 1rem; border: 1px solid var(--hair); border-radius: var(--r-lg); background: #fff; }
.cartline__t { font-weight: 600; }
.miniCover { position: relative; width: 76px; aspect-ratio: 687/1000; overflow: hidden; border-radius: 3px 6px 6px 3px; background: #e4e1dc; box-shadow: 3px 5px 10px -6px rgba(46,42,38,.6); }
.miniCover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.miniCover span { position: absolute; left: 6%; right: 6%; bottom: 8%; background: rgba(244,237,225,.94); color: #3a2a20; font-size: .45rem; line-height: 1.15; text-align: center; padding: 2px; font-family: var(--font-display); font-weight: 700; }
.miniCover--lg { width: 84px; }
.miniCover--lg span { font-size: .5rem; }
.devnote { margin: 0; padding: .8rem .9rem; border: 1px dashed var(--flag); border-radius: var(--r-md); background: var(--flag-bg); color: var(--flag); font-size: .78rem; display: grid; gap: .15rem; }
.devnote code { font-family: ui-monospace, Consolas, monospace; }

/* studio */
.st { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding-bottom: 2rem; }
@media (max-width: 1100px) { .st { grid-template-columns: minmax(0, 1fr); } }
.st__a { display: grid; gap: 0; min-width: 0; }
.st__b { min-width: 0; }
.st__b .ap { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); padding-bottom: 1rem; }
@media (max-width: 1280px) { .st__b .ap { grid-template-columns: minmax(0, 1fr); } .st__b .panel { position: static; } }
.st__h { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--dark); margin: 0 0 .8rem; }
.st__empty { padding: 2rem 1.2rem; border-radius: var(--r-lg); background: var(--cream); color: var(--text); text-align: center; }
.pvtile { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: .9rem; align-items: start; padding: 1rem; border-radius: var(--r-lg); background: var(--cream); margin-top: 1.1rem; }
.btn--big { width: 100%; min-height: 56px; font-size: 1.1rem; margin-top: 1.1rem; }
.sp-banner { background: var(--flag-bg); color: var(--flag); border-bottom: 1px solid var(--flag); text-align: center; padding: .55rem 1rem; font-size: var(--fs-small); font-weight: 600; }
.pz__photos { grid-template-columns: repeat(3, minmax(0, 96px)); }
/* mobile order: save shows the cover first; studio shows approval before "Your cat" once painting has started */
@media (max-width: 860px) { .fl--coverfirst .fl__out { order: -1; } }
@media (max-width: 1100px) { .st.is-painting .st__b { order: -1; } }

/* H2 review (2026-10-08): "not satisfied -> human review" confirmation, replaces the approval panel in studio.html */
.rv { display: grid; gap: 1rem; }
.rv__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .8rem; align-items: start; }
.rv__row img { width: 72px; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px; border: 1px solid var(--hair); }
.rv__what { display: grid; gap: .5rem; min-width: 0; }
.rv__what .chip span { min-height: 32px; padding: .2rem .7rem; }
.rv__what .note { overflow-wrap: anywhere; }
.rv__add { aspect-ratio: auto; min-height: 56px; width: 100%; grid-auto-flow: column; justify-content: center; align-items: center; gap: .6rem; }
.rv__add span { font-size: 1.3rem; }
.rv__guar { padding: .8rem 1rem; border-radius: var(--r-md); background: var(--cream); color: var(--dark); font-size: var(--fs-small); overflow-wrap: anywhere; }
.rv__confirm { display: grid; gap: .6rem; padding: .8rem; border-radius: var(--r-sm); background: var(--cream); font-size: var(--fs-small); }
.rv__contact { font-size: var(--fs-small); text-align: center; overflow-wrap: anywhere; }
.rv__mail { user-select: all; font-weight: 600; color: var(--dark); }
#review .redo .btn { width: 100%; }

/* programmatic focus on headings (a11y) without a visible ring */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* R7 N2 (2026-10-09): focus never hidden under the mobile sticky CTA; >=44px hit areas on radios/chips */
@media (max-width: 640px) { html { scroll-padding-bottom: 6.5rem; } }
.chip span { min-height: 44px; }
/* 2026-10-14 caminho A: 3-step What happens next (save.html, checkout.html) */
.next3{list-style:none;margin:.2rem 0 .4rem;padding:0;display:grid;gap:.5rem}
.next3 li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.6rem;align-items:start;font-size:var(--fs-body)}
.next3 i{font-style:normal;font-weight:700;width:2rem;height:2rem;border-radius:50%;background:var(--cream);color:var(--dark);display:inline-flex;align-items:center;justify-content:center}
.next3 b{display:block}
.next3 span{color:var(--text-muted);font-size:var(--fs-small)}
.nextg{font-size:var(--fs-small);margin:.2rem 0}