/* Personalized Pet Portrait. A quiet gallery: white walls, black type, grey plinths, art doing the talking. */
:root {
  --bg: #ffffff; --ink: #161616; --ink-2: #2e2e2e; --mute: #6b6b6b; --rule: #e6e6e3; --tile: #f3f3f1; --soft: #f7f7f5;
  --ok: #2d6a3e; --err: #a3321f;
  --display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --pad: clamp(16px, 2.2vw, 28px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p a:not(.btn), li a, .legal a:not(.btn), .consent a { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(36px, 4.2vw, 58px); letter-spacing: -0.04em; }
h2 { font-size: clamp(26px, 2.4vw, 32px); }
h3 { font-size: 20px; letter-spacing: -0.02em; }
.mute { color: var(--mute); }
.hidden { display: none !important; }
.cta { display: inline-flex; gap: 8px; font: 600 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1.5px solid currentColor; padding-bottom: 4px; align-self: flex-start; }
.cta::after { content: "\2192"; }
[dir="rtl"] .cta::after { content: "\2190"; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--ink); color: #fff; border: 0; border-radius: 0;
  padding: 16px 26px; font: 600 14px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .15s; }
.btn:hover { background: #000; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.wide { width: 100%; line-height: 1.3; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* bar + header */
.bar { background: #141414; color: #f2f2f2; text-align: center; font-size: 13px; padding: 8px var(--pad); }
.top { position: sticky; top: 0; z-index: 30; background: #fff; }
.top .in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px var(--pad); }
.top nav.left { display: flex; gap: 22px; font-size: 15px; }
.top nav.right { display: flex; gap: 18px; justify-content: flex-end; align-items: center; font-size: 15px; }
.mark { font: 500 23px/1 var(--display); color: var(--ink); letter-spacing: -0.035em; white-space: nowrap; text-align: center; }
.lang { position: relative; }
.lang select { appearance: none; border: 0; background: transparent; font: 400 15px var(--body); color: var(--ink); padding: 4px 18px 4px 0; cursor: pointer; }
[dir="rtl"] .lang select { padding: 4px 0 4px 18px; }
.lang::after { content: ""; position: absolute; inset-inline-end: 2px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.start { font-weight: 600; white-space: nowrap; }
.nw { white-space: nowrap; }
.top nav.left .m-only { display: none; }
.burger { all: unset; display: none; cursor: pointer; width: 24px; height: 24px; position: relative; }
.burger span, .burger::before, .burger::after { content: ""; position: absolute; left: 2px; right: 2px; height: 1.5px; background: var(--ink); }
.burger::before { top: 6px; } .burger span { top: 11.5px; } .burger::after { top: 17px; }
.burger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 1100px) {
  .top .in { grid-template-columns: auto 1fr auto; position: relative; }
  .burger { display: block; }
  .top nav.left { display: none; }
  body.menu .top nav.left { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; inset-inline: 0; background: #fff; border-bottom: 1px solid var(--rule); padding: 4px var(--pad) 12px; }
  body.menu .top nav.left a { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 17px; }
  .mark { text-align: start; font-size: 18px; }
}
@media (max-width: 480px) { .mark { font-size: 15px; letter-spacing: -0.03em; } .top .in { gap: 10px; } .top nav.right { gap: 10px; } .start { display: none; } body.menu .top nav.left .m-only { display: block; font-weight: 600; } }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(24px, 4.5vw, 72px); padding: clamp(16px, 2vw, 28px) var(--pad) 0; }
.hero .copy { display: flex; flex-direction: column; justify-content: center; max-width: 540px; }
.hero h1 { margin-bottom: 18px; }
.hero p { font-size: 18px; margin: 0 0 22px; color: var(--ink-2); max-width: 32em; }
.hero .img img { width: 100%; aspect-ratio: 5 / 4; max-height: calc(100svh - 150px); object-fit: cover; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 0; } .hero .copy { order: 2; padding: 20px 0 0; } }

/* sections */
.sec { padding: clamp(56px, 7vw, 96px) var(--pad) 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sec-head p { margin: 8px 0 0; color: var(--mute); }

/* product rows */
.row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 12px) / 4.35); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.row::-webkit-scrollbar { display: none; }
.head-r { display: flex; align-items: center; gap: 18px; }
.arrows { display: flex; gap: 6px; }
.arrows button { all: unset; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; font-size: 20px; }
.arrows button:disabled { opacity: .25; cursor: default; }
.arrows button:focus-visible { outline: 2px solid var(--ink); }
[dir="rtl"] .arrows { flex-direction: row-reverse; }
.card { scroll-snap-align: start; display: block; }
.card .t { position: relative; background: var(--tile); aspect-ratio: 4 / 5; overflow: hidden; }
.card .t img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card .t .hov { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; }
@media (hover: hover) {
  .card:hover .t img:only-child { transform: scale(1.025); }
  .card:hover .t .hov, .card:focus-visible .t .hov { opacity: 1; }
}
.card b { display: block; margin-top: 12px; font-weight: 600; font-size: 15px; }
.card span { display: block; color: var(--mute); font-size: 15px; }
@media (max-width: 1000px) { .row { grid-auto-columns: calc((100% - 2 * 12px) / 2.6); } }
@media (max-width: 600px) { .row { grid-auto-columns: 64%; } .arrows { display: none; } }

/* feature: text + room + tile */
.feature { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.feature .txt { padding-inline-end: 20px; display: flex; flex-direction: column; }
.feature .txt p { margin: 14px 0 20px; font-size: 17px; color: var(--ink-2); }
.feature img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--tile); }
.feature.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr); }
.feature.rev .txt { order: 3; padding-inline: 20px 0; }
.feature.rev > :first-child { order: 2; }
@media (max-width: 900px) { .feature, .feature.rev { grid-template-columns: 1fr 1fr; } .feature .txt, .feature.rev .txt { grid-column: 1 / -1; padding: 0; order: 0; } }

/* how */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.how div { background: var(--soft); padding: 28px 24px 32px; }
.how i { font: 500 14px var(--display); font-style: normal; color: var(--mute); display: block; margin-bottom: 40px; }
.how p { margin: 10px 0 0; color: var(--ink-2); }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; } .how i { margin-bottom: 18px; } }

/* photo to painting */
.pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair div { position: relative; background: var(--tile); }
.pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.pair .lbl { position: absolute; inset-inline-start: 8px; top: 8px; background: #fff; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; }
@media (max-width: 900px) { .pairs { grid-template-columns: 1fr; max-width: 560px; } }

/* at home mosaic */
.mosaic { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
.mosaic a { position: relative; display: block; overflow: hidden; background: var(--tile); }
.mosaic a:first-child { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mosaic a:hover img { transform: scale(1.02); }
.mosaic span { position: absolute; inset-inline-start: 12px; bottom: 12px; background: #fff; font-size: 13px; font-weight: 600; padding: 5px 9px; }
@media (max-width: 800px) { .mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; } .mosaic a:first-child { grid-row: auto; } .mosaic img { height: auto; aspect-ratio: 4 / 5; } }

/* prices */
.prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.price { position: relative; background: var(--soft); padding: 24px 22px; display: flex; flex-direction: column; gap: 6px; }
.price h3 { margin-bottom: 4px; }
.price .amt { font: 500 24px/1.1 var(--display); letter-spacing: -0.02em; }
.price p { margin: 4px 0 16px; color: var(--ink-2); font-size: 15px; flex: 1; }
.price .tag { align-self: flex-start; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--ink); padding: 3px 7px; line-height: 1.4; margin-bottom: 8px; }
.price .tag.ghost { visibility: hidden; }
@media (max-width: 960px) { .prices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .prices { grid-template-columns: 1fr; } }

/* faq */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--rule); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font: 500 19px/1.3 var(--display); letter-spacing: -0.015em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 24px/1 var(--body); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 12px 0 0; color: var(--ink-2); max-width: 68ch; }

/* band */
.band { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 1fr 1fr; background: #141414; color: #fff; }
.band .txt { padding: clamp(32px, 5vw, 72px) var(--pad); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.band p { margin: 0; color: #cfcfcf; font-size: 17px; }
.band .btn { background: #fff; color: #141414; align-self: flex-start; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; aspect-ratio: 4 / 3; }
@media (max-width: 800px) { .band { grid-template-columns: 1fr; } }

/* footer */
.foot { padding: 56px var(--pad) 40px; }
.foot .mark { text-align: start; font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 34px; white-space: normal; max-width: none; }
.foot .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; font-size: 15px; }
.foot .cols div { display: flex; flex-direction: column; gap: 8px; }
.foot .cols b { font-weight: 600; margin-bottom: 4px; }
.foot .lang { align-self: flex-start; }
.foot .fine { line-height: 1.7; }
.foot .fine { margin-top: 40px; color: var(--mute); font-size: 13px; }
@media (max-width: 700px) { .foot .cols { grid-template-columns: 1fr 1fr; } }

/* legal */
.legal { padding: 48px var(--pad) 72px; max-width: 820px; }
.legal h1 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 26px; }
.legal h2 { font-size: 22px; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }
[dir="rtl"] .cta, [dir="rtl"] .btn { letter-spacing: 0; }

/* ---------- create ---------- */
.flow { padding: 24px var(--pad) 80px; }
.flow-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.flow-head h1 { font-size: clamp(30px, 3.4vw, 44px); }
.steps { display: flex; gap: 6px; font-size: 13px; }
.steps span { padding: 7px 12px; background: var(--soft); color: var(--mute); }
.steps span.on { background: var(--ink); color: #fff; }
.steps span.done { color: var(--ok); }
.panel { background: var(--soft); padding: clamp(18px, 2.4vw, 30px); scroll-margin-top: 84px; }
.panel + .panel { margin-top: 12px; }
.panel h2 { font-size: 24px; margin-bottom: 6px; }
.panel .sub { color: var(--ink-2); margin: 0 0 18px; }

.drop { position: relative; display: grid; place-items: center; text-align: center; gap: 8px; border: 1.5px dashed #bdbdb8; background: #fff; padding: 40px 20px; cursor: pointer; min-height: 230px; transition: border-color .2s; }
.drop:hover, .drop.over { border-color: var(--ink); }
.drop:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.drop strong { font: 500 22px/1.2 var(--display); letter-spacing: -0.02em; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop .thumb { width: 150px; aspect-ratio: 1; object-fit: cover; }
.tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.tips div::before { content: "\2713"; color: var(--ok); font-weight: 700; margin-inline-end: 8px; }
@media (max-width: 700px) { .tips { grid-template-columns: 1fr; } }

.style-pick { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.style-pick button { all: unset; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; align-self: start; text-align: start; font-size: 13px; font-weight: 600; line-height: 1.3; }
.style-pick .im { display: block; position: relative; background: #fff; padding-top: 125%; outline: 2px solid transparent; outline-offset: -2px; margin-bottom: 6px; }
.style-pick .im img { position: absolute; inset: 12%; margin: auto; max-height: 76%; max-width: 76%; width: auto; height: auto; box-shadow: 0 6px 12px -6px #0006; }
.style-pick button[aria-pressed="true"] .im { outline-color: var(--ink); }
.style-pick button:focus-visible .im { outline-color: var(--ink); outline-style: dashed; }
.style-pick .made { display: block; font-weight: 400; font-size: 12px; color: var(--ok); }
@media (max-width: 1100px) { .style-pick { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 600px) { .style-pick { grid-template-columns: repeat(3, 1fr); } }

.studio { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 36px); align-items: start; }
@media (max-width: 900px) { .studio { grid-template-columns: 1fr; } }
.views { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.views button { all: unset; cursor: pointer; font-size: 13px; padding: 7px 12px; background: #fff; }
.views button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.views button:focus-visible { outline: 2px solid var(--ink); }
.stage { position: relative; background: var(--tile); aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; }
.stage.wall { background-size: cover; background-position: center; display: block; }
.stage.wall.light { background-image: url(/img/wall-light.jpg); }
.stage.wall.dark { background-image: url(/img/wall-dark.jpg); }
.art { position: relative; transition: width .35s ease, box-shadow .3s; }
.art img { width: 100%; display: block; }
.art.canvas { box-shadow: 5px 7px 0 -1px #00000022, 0 18px 30px -14px #0008; }
.art.framed, .art.fposter { background: #161616; box-shadow: 0 18px 30px -14px #0009; }
.art.fr-white { background: #f1f1ee; }
.art.fr-walnut { background: #5b3a24; }
.art.poster { box-shadow: 0 10px 20px -12px #0006; }
.art.digital { box-shadow: 0 12px 26px -12px #0006; }
.stage.wall .art { position: absolute; transform: translateX(-50%); }
.stage.wall .art.canvas { box-shadow: 2px 3px 0 -1px #00000033, 0 8px 14px -8px #000a; }
.note { font-size: 12px; color: var(--mute); margin: 8px 0 0; }
.working { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
.working .bar2 { height: 3px; background: #ddd; overflow: hidden; width: min(300px, 70vw); margin: 18px auto 12px; }
.working .bar2 i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .6s ease-out; }
.working p { margin: 0; color: var(--ink-2); }
.spin { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; border: 2px solid #d6d6d2; border-top-color: var(--ink); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } .art { transition: none; } }

.mine { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.mine button { all: unset; cursor: pointer; flex: none; width: 64px; outline: 2px solid transparent; outline-offset: 2px; }
.mine button img { width: 64px; height: 80px; object-fit: cover; }
.mine button[aria-pressed="true"] { outline-color: var(--ink); }
.mine button:focus-visible { outline: 2px dashed var(--ink); }

.choose h2 { font-size: 26px; margin-bottom: 4px; }
.choose .sub { color: var(--ink-2); margin: 0 0 18px; }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.kinds button, .sizes button { all: unset; cursor: pointer; background: #fff; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--rule); }
.kinds button b { display: block; font-size: 15px; font-weight: 600; }
.kinds button span { font-size: 13px; color: var(--mute); }
.kinds button[aria-pressed="true"], .sizes button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.kinds button:focus-visible, .sizes button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sizes { display: grid; gap: 6px; margin-bottom: 14px; }
.sizes button { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sizes .lab { font-weight: 600; }
.sizes .badge { white-space: nowrap; display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink); padding: 2px 6px; margin-inline-start: 8px; vertical-align: 2px; }
.sizes .pr { font-weight: 600; white-space: nowrap; }
.addon, .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.addon { background: #fff; padding: 14px; margin-bottom: 14px; font-size: 15px; }
.addon b { color: var(--ink); }
.consent { margin: 0 0 12px; }
.addon input, .consent input { width: 18px; height: 18px; accent-color: var(--ink); margin: 2px 0 0; flex: none; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 17px; }
.total b { font: 500 28px/1 var(--display); letter-spacing: -0.02em; }
.assure { list-style: none; padding: 0; margin: 16px 0 0; font-size: 14px; color: var(--ink-2); display: grid; gap: 6px; }
.assure li::before { content: "\2713"; color: var(--ok); margin-inline-end: 8px; font-weight: 700; }
.error { background: #fbeae6; color: var(--err); padding: 12px 14px; margin: 14px 0 0; font-size: 15px; }

/* order */
.order { padding: 36px var(--pad) 80px; }
.order .studio { align-items: center; }
.status-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.status-list li { display: flex; gap: 12px; align-items: center; color: var(--mute); }
.status-list li::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #c9c9c4; flex: none; }
.status-list li.done { color: var(--ink); }
.status-list li.done::before { background: var(--ok); border-color: var(--ok); }
.status-list li.now { color: var(--ink); font-weight: 600; }
.status-list li.now::before { border-color: var(--ink); border-top-color: transparent; animation: spin 1s linear infinite; }
.testbadge { display: inline-block; background: #fff3cd; color: #6b4e00; padding: 4px 10px; font-size: 13px; margin-bottom: 12px; }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
.eyebrow span { text-transform: none; letter-spacing: .02em; }
.lede { font-size: 18px; color: var(--ink-2); }

/* long translated shop names in the header, and a footer language menu that never widens the page */
@media (min-width: 481px) { .top .mark.long { font-size: clamp(15px, 1.55vw, 21px); } }
.foot .cols > div { min-width: 0; }
.foot .lang, .foot .lang select { max-width: 100%; }
@media (max-width: 480px) { .top .mark { min-width: 0; } .top .mark.long { white-space: normal; line-height: 1.1; font-size: 14px; text-wrap: balance; } }
@media (min-width: 1101px) and (max-width: 1320px) { .top nav.left { gap: 14px; font-size: 14px; } .top nav.left a { white-space: nowrap; } .top nav.right { gap: 14px; font-size: 14px; } }

/* ===== Copied funnels (src/funnels.ts): .up = companionarchive.com style, .sc = frameandtail.com style ===== */
.fun main { padding-bottom: 40px; }
.fun .bar2 { height: 4px; background: #e2e2de; overflow: hidden; width: 100%; margin: 14px 0 10px; }
.fun .bar2 i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s linear; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.tag { display: inline-block; font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--ink); border-radius: 99px; padding: 1px 8px; background: #fff; }
.ok { color: var(--ok); }
.fine { font-size: 12px; color: var(--mute); margin: 12px 0 0; }
.cart-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--rule); padding: 12px; margin: 10px 0 22px; }
.cart-item img { width: 84px; height: 84px; object-fit: cover; }
.cart-item div { display: grid; gap: 2px; font-size: 14px; }
.cart-item .cp { text-align: end; }
.cart-item s { color: var(--mute); font-size: 13px; }
.ship { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--rule); padding: 14px; margin: 8px 0; cursor: pointer; background: #fff; }
.ship:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ship input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.ship span { display: grid; font-size: 13px; color: var(--mute); }
.ship span b { color: var(--ink); font-size: 15px; font-weight: 600; }
.ship em { font-style: normal; font-weight: 600; }
.sum { display: grid; grid-template-columns: 1fr auto; gap: 6px 0; margin: 10px 0 18px; font-size: 15px; }
.sum dt, .sum dd { margin: 0; }
.sum dd { text-align: end; padding-inline-start: 12px; }
.sum .tot { font-weight: 700; font-size: 18px; border-top: 1px solid var(--rule); padding-top: 10px; }
.up-cart h3, .sc-cart h3 { font-size: 18px; margin: 18px 0 6px; }

/* wall mock-up: the portrait on a wall, with the chosen frame */
.mock { position: relative; background: #ecebe7 url(/img/wall-light.jpg) center/cover; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.mock-art { width: 52%; line-height: 0; box-shadow: 0 18px 30px -12px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.2); background: #fff; transition: padding .2s, border-color .2s; }
.mock.land .mock-art { width: 62%; }
.mock-art img { width: 100%; height: auto; display: block; }
.mock.framed .mock-art, .mock.fposter .mock-art { border: 10px solid #151515; }
.mock.fposter .mock-art { padding: 6%; }
.mock.fr-white .mock-art { border-color: #f4f4f2; }
.mock.fr-walnut .mock-art { border-color: #5b3a24; }
.mock.canvas .mock-art { box-shadow: 6px 8px 0 -2px #d6d4cf, 0 18px 30px -12px rgba(0,0,0,.45); }
.mock.poster .mock-art { box-shadow: 0 10px 22px -10px rgba(0,0,0,.35); }

/* frame swatches */
.sw { display: inline-grid; place-items: center; }
.sw i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink); display: block; }
.sw-black i { background: #151515; }
.sw-white i { background: #fff; }
.sw-walnut i { background: #5b3a24; }
.sw-none i { background: linear-gradient(135deg, transparent 46%, var(--ink) 46%, var(--ink) 54%, transparent 54%); }

/* --- upload funnel --- */
.up-land { max-width: 760px; margin: 0 auto; }
/* phones: title, carousel, upload box stacked on a stone background (the right column's parts slot in around the carousel) */
.up-cols { display: flex; flex-direction: column; }
.up-right { display: contents; }
.up-head { order: 1; background: #eceae5; text-align: center; padding: 28px var(--pad) 12px; }
.up-head h1 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; font-weight: 500; }
.up-left { order: 2; background: #eceae5; padding: 0 var(--pad); }
.up-right > .up-drop { order: 3; }
.up-right > .error { order: 4; }
.up-exc { order: 5; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px var(--pad) 12px; }
.up-exc b { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.up-stars { display: inline-flex; gap: 3px; }
.up-stars i { width: 24px; height: 24px; background: #3d8456 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.5l2.9 6.9 7.4.6-5.6 4.9 1.7 7.3L12 18.3l-6.4 3.9 1.7-7.3L1.7 10l7.4-.6z'/%3E%3C/svg%3E") center / 68% no-repeat; }
.up-trust { order: 6; list-style: none; padding: 0 var(--pad); margin: -4px 0 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.up-trust li::before { content: "\2713"; margin-inline-end: 6px; }
.up-stack { display: none; }
.up-rot { transition: opacity .18s; }
.up-rot.out { opacity: 0; }
.up-card { position: relative; margin: 0; line-height: 0; }
.up-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.up-card figcaption { position: absolute; inset: 0 0 auto; padding: 9% 10% 0; text-align: center; color: #f4f1ea; line-height: 1.3; display: grid; gap: 10px; }
.up-card b { font: 400 clamp(24px, 2.3vw, 32px)/1.1 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.up-card span { font-size: 13px; opacity: .85; text-wrap: balance; }
.up-car { position: relative; aspect-ratio: 4 / 3; }
.up-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s; }
.up-slides img.on { opacity: 1; }
.up-next { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.up-drop { display: grid; justify-items: center; gap: 6px; text-align: center; border: 1.5px dashed #9a9a96; background: #fff; margin: 0 var(--pad); padding: 34px 16px; cursor: pointer; }
.up-drop.over, .up-drop:hover { border-color: var(--ink); }
.up-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.up-drop strong { font: 500 17px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.up-pad { margin: 0 var(--pad) 12px; }
.up-ex, .up-prom, .up-try { padding: 10px var(--pad); }
.up-lower { padding: 30px 0 10px; }
.up-lower > h2 { text-align: center; margin: 0 var(--pad) 18px; }
.up-exrow { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 8px; }
.up-exrow img { flex: 0 0 72%; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: center; background: #eceae5; }
.up-ed { display: grid; gap: 16px; padding: 34px var(--pad) 0; align-items: center; }
.up-ed h3 { font-size: 24px; margin-bottom: 8px; }
.up-ed p { margin: 0; color: var(--ink-2); }
.up-edimg img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.up-edimg.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.up-edimg.trio img { aspect-ratio: 3 / 4; }
.modal-img { width: 100%; max-height: 42vh; object-fit: cover; margin: 0 0 14px; }
.modal.gift .modal-in h2 { text-transform: none; font-size: 24px; }
.up-ex h2 { text-align: center; margin: 20px 0 16px; }
.up-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.up-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.up-prom { display: grid; gap: 26px; margin: 26px 0; }
.up-prom h3 { font-size: 22px; margin-bottom: 6px; }
.up-prom p { margin: 0; color: var(--ink-2); }
.up-try { text-align: center; }
.up-work { min-height: 70vh; display: grid; place-items: center; padding: 40px var(--pad); }
.up-workin { width: min(420px, 100%); text-align: center; }
.up-workin p { color: var(--ink-2); margin: 0; min-height: 3em; }
.up-prev, .up-wall, .up-cart { max-width: 760px; margin: 0 auto; padding: 18px var(--pad) 120px; }
.up-img { background: #2a2420; line-height: 0; margin-bottom: 14px; }
.up-img img { width: 100%; height: auto; }
.up-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.up-two .btn { padding-inline: 8px; }
.up-wall .mock { margin: 0 calc(-1 * var(--pad)) 18px; }
.up-cfg h2 { text-align: center; font-size: 24px; margin-bottom: 14px; }
.up-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
.up-tabs button { background: #f4f4f2; border: 1px solid var(--rule); border-bottom-color: var(--ink); padding: 12px 6px; font: 500 13px var(--body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--mute); }
.up-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); border-color: var(--ink); border-bottom-color: #fff; }
.up-box { border: 1px solid var(--ink); border-top: 0; padding: 16px; background: #fff; }
.up-mem { background: #ddf3e6; border: 1px solid #2d6a3e; padding: 12px; text-align: center; margin-bottom: 14px; }
.up-mem:empty { display: none; }
.up-lab { font-size: 14px; margin: 14px 0 8px; }
.up-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.up-frames button { background: #fff; border: 1px solid var(--rule); padding: 12px; cursor: pointer; }
.up-frames button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.up-sizes { display: grid; gap: 12px; }
.up-sizes button { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: start; background: #fff; border: 1px solid var(--rule); padding: 16px 12px; cursor: pointer; font: inherit; color: inherit; }
.up-sizes button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.up-sizes .tag { position: absolute; top: -10px; inset-inline-start: 12px; }
.up-sizes .rad { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #999; }
.up-sizes [aria-pressed="true"] .rad { border: 5px solid var(--ink); }
.up-sizes .nm { font-size: 14px; }
.up-sizes .pr { display: grid; text-align: end; font-size: 14px; }
.up-sizes .pr span:last-child { color: var(--mute); font-size: 13px; }
.up-sizes .pr .was { text-decoration: line-through; color: var(--mute); }
.up-sizes .pr .now { color: var(--ok) !important; font-weight: 700; font-size: 15px !important; }
.up-inc { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.up-inc li::before { content: "\2713"; margin-inline-end: 10px; }
.up-inc s { color: var(--mute); }
.up-eta { text-align: center; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin: 14px 0 0; }
.up-digp { font: 500 30px var(--display); margin: 8px 0 12px; }
.up-sticky, .sc-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--rule); padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
.up-sticky div { display: grid; font-size: 13px; line-height: 1.35; }
.up-sticky b { font-size: 15px; }
.up-sticky .btn { padding-inline: 18px; }
.up-back { margin: 0 0 8px; }
.up-rush { font-size: 14px; text-align: center; color: var(--err); margin: 4px 0 10px; }
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(20,20,20,.45); display: grid; place-items: center; padding: 16px; }
.modal-in { position: relative; background: #fff; width: min(440px, 100%); padding: 30px 22px 22px; text-align: center; max-height: 92vh; overflow: auto; }
.modal-in h2 { font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px; }
.modal-in input { width: 100%; padding: 13px 12px; border: 1.5px solid var(--ink); font: inherit; margin: 14px 0 10px; }
.modal-x { position: absolute; top: 6px; inset-inline-end: 8px; background: none; border: 0; font-size: 28px; cursor: pointer; line-height: 1; }

/* --- scenes funnel --- */
.sc-best { padding: 18px var(--pad) 40px; }
.sc-best h1 { text-align: center; font-style: italic; font-size: clamp(28px, 4vw, 44px); margin: 8px 0 18px; }
.sc-cats { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; justify-content: safe center; }
.sc-cats button { background: none; border: 0; cursor: pointer; display: grid; justify-items: center; gap: 6px; font: 500 13px var(--body); color: var(--ink); flex: none; }
.sc-cats img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; }
.sc-cats [aria-pressed="true"] img { border-color: var(--ink); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr)); gap: 18px 14px; background: #ededea; padding: 16px; margin: 0 calc(-1 * var(--pad)); }
.sc-grid.small { background: none; padding: 0; margin: 0; }
.sc-card { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.sc-card .fr { position: relative; display: block; background: #fff; border: 7px solid #1a1a1a; padding: 6%; box-shadow: 0 8px 16px -8px rgba(0,0,0,.4); }
.sc-card .fr img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.sc-card .off { position: absolute; top: 6px; inset-inline-end: -4px; background: #1a1a1a; color: #c9f27a; font: 700 11px var(--body); padding: 4px 8px; border-radius: 99px 0 0 99px; font-style: normal; }
.sc-card b { font: 600 16px var(--display); }
.sc-steps { display: flex; gap: 12px; align-items: center; padding: 10px var(--pad); border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--mute); overflow-x: auto; white-space: nowrap; }
.sc-steps .on { color: var(--ink); font-weight: 600; }
.sc-steps .done { color: var(--ok); }
.sc-bk { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; cursor: pointer; flex: none; }
.sc-land, .sc-prev, .sc-wall, .sc-cart { max-width: 760px; margin: 0 auto; }
.sc-hero { position: relative; line-height: 0; }
.sc-hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sc-heroin { position: absolute; inset: 0 0 auto; padding: 16px var(--pad) 60px; background: linear-gradient(rgba(0,0,0,.55), transparent); color: #fff; line-height: 1.1; }
.sc-heroin .sc-ht { font: italic 600 clamp(30px, 6vw, 46px)/1.1 var(--display); letter-spacing: -0.03em; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.sc-dhead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sc-dhead h1 { font-style: italic; font-weight: 600; font-size: 40px; }
.sc-off { display: inline-block; background: #c9f27a; color: #1a1a1a; font: 700 15px var(--body); padding: 6px 12px; border-radius: 99px; margin: 0 0 10px; }
.sc-up { background: #ededea; padding: 16px var(--pad) 18px; }
.sc-slots { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.slot { position: relative; width: 92px; display: grid; gap: 4px; justify-items: center; cursor: pointer; }
.slot > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.slot .plus, .slot img, .slot .okmark { width: 92px; height: 92px; display: grid; place-items: center; background: #fff; border: 1.5px dashed #aaa; object-fit: cover; font-size: 34px; color: #7d4fd6; }
.slot .okmark { font-size: 12px; color: var(--ok); }
.slot.has img { border-style: solid; border-color: var(--ink); }
.slot.busy .plus { opacity: .4; }
.slot.busy::after { content: ""; position: absolute; top: 34px; width: 24px; height: 24px; border: 3px solid #ccc; border-top-color: var(--ink); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.slot .x { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #1a1a1a; color: #fff; cursor: pointer; line-height: 1; }
.slot .cap { font-size: 12px; text-align: center; line-height: 1.2; }
.sc-up .btn { border-radius: 99px; }
.sc-upbox { margin-bottom: 14px; }
.sc-drop { display: grid; justify-items: center; gap: 4px; text-align: center; border: 1.5px dashed #b9b9b3; border-radius: 12px; background: #fff; padding: 22px 14px; cursor: pointer; }
.sc-drop.over, .sc-drop:hover { border-color: var(--ink); }
.sc-drop input, .th.add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sc-drop b { font-size: 16px; }
.sc-drop span { font-size: 13px; color: var(--mute); }
.sc-thumbs { display: flex; flex-wrap: wrap; gap: 10px; border: 1.5px dashed #b9b9b3; border-radius: 12px; background: #fff; padding: 12px; }
.th { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #eee; display: grid; place-items: center; }
.th img { width: 100%; height: 100%; object-fit: cover; }
.th .x { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #1a1a1a; color: #fff; cursor: pointer; line-height: 1; }
.th.busy::after { content: ""; position: absolute; width: 24px; height: 24px; border: 3px solid #ccc; border-top-color: var(--ink); border-radius: 50%; animation: spin 1s linear infinite; }
.th.add { cursor: pointer; background: #f3f0fb; color: #7d4fd6; gap: 0; align-content: center; }
.th.add .plus { font-size: 28px; line-height: 1; }
.th.add .cap { font-size: 11px; }
.sc-hint { font-size: 13px; color: var(--ink-2); margin: -4px 0 12px; }
.sc-edscenes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.sc-edscenes button { flex: 0 0 86px; display: grid; gap: 4px; background: none; border: 2px solid transparent; border-radius: 10px; padding: 2px; cursor: pointer; font: 500 11px var(--body); color: var(--ink); text-align: center; }
.sc-edscenes button[aria-pressed="true"] { border-color: #8bc34a; }
.sc-edscenes img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; }
#editSheet textarea { width: 100%; font: inherit; border: 1.5px solid var(--rule); border-radius: 10px; padding: 10px; margin: 0 0 12px; resize: vertical; }
#editSheet .modal-in { text-align: start; }
.sc-giftin h2 { text-transform: none; font-size: 26px; }
.byclick { font-size: 13px; color: var(--ink-2); margin: 14px 0 0; }
.paybadges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 0; }
.paybadges span { font-size: 11px; border: 1px solid var(--rule); border-radius: 4px; padding: 2px 6px; color: var(--ink-2); }
.cartbar { position: sticky; bottom: 0; }
body.sc .bar { background: #141414; color: #c9f27a; font-weight: 600; }
.sc-checks { list-style: none; display: flex; justify-content: space-between; gap: 8px; padding: 0; margin: 12px 0 0; font-size: 13px; flex-wrap: wrap; }
.sc-checks li::before { content: "\2713"; margin-inline-end: 6px; }
.sc-story, .sc-works, .sc-how, .sc-cover, .sc-faq, .sc-more { padding: 22px var(--pad) 0; }
.sc-story h2, .sc-works h2 { font: 500 13px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.sc-story p { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { border: 1px solid var(--rule); border-radius: 99px; padding: 6px 12px; font-size: 14px; }
.sc-how ol { list-style: none; counter-reset: s; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.sc-how li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; }
.sc-how li::before { content: counter(s); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: #c9f27a; display: grid; place-items: center; font-weight: 700; }
.sc-how span { color: var(--ink-2); font-size: 15px; }
.sc-cover > div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.sc-cover p { margin: 0; background: var(--soft); padding: 14px; font-size: 14px; display: grid; gap: 4px; }
.sc-faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.sc-faq summary { cursor: pointer; font-weight: 600; }
.sc-faq p { margin: 8px 0 0; color: var(--ink-2); }
.sc-more { padding-bottom: 20px; }
.sc-more .sec-head a { color: inherit; }
.sc-work { position: fixed; inset: 0; z-index: 60; background: rgba(240,240,236,.88); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 16px; }
.sc-workin { background: #fff; width: min(380px, 100%); padding: 24px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.12); border-radius: 14px; }
.sc-workin h2 { font-size: 20px; font-weight: 600; }
.sc-workin p { margin: 4px 0; }
.sc-tip { font-size: 14px; color: var(--ink-2); margin-top: 14px !important; min-height: 2.8em; }
.sc-pimg { position: relative; line-height: 0; background: #ededea; }
.sc-pimg img { width: 100%; height: auto; }
.sc-badge { position: absolute; top: 14px; inset-inline-end: 0; background: #c9f27a; font: 700 15px var(--body); padding: 6px 12px; border-radius: 99px 0 0 99px; line-height: 1.2; }
.sc-pbtns { position: absolute; bottom: 16px; inset-inline: 0; display: flex; justify-content: center; gap: 10px; }
.pill { background: #fff; border: 0; border-radius: 99px; padding: 10px 22px; font: 600 15px var(--body); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.sc-vers { padding: 12px var(--pad); }
.sc-vers span { font-size: 14px; }
.sc-vers div { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.sc-vers button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; flex: none; }
.sc-vers button[aria-pressed="true"] { border-color: var(--ink); }
.sc-vers img { width: 62px; height: 62px; object-fit: cover; display: block; }
.sc-sale { background: #1a1a1a; color: #c9f27a; text-align: center; font: 600 13px var(--body); padding: 12px; letter-spacing: .04em; text-transform: uppercase; }
.sc-cta { position: sticky; bottom: 0; z-index: 20; background: #fff; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
.sc-cta .btn, .sc-sticky .btn, .sc-cart .btn { border-radius: 99px; }
.sc-wall { padding: 0 var(--pad) 140px; }
.sc-wall .mock { margin: 0 calc(-1 * var(--pad)) 14px; }
.sc-wall h2 { font-size: 20px; font-weight: 600; margin: 18px 0 10px; }
.sc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-opts.three { grid-template-columns: repeat(3, 1fr); }
.sc-opts button { display: flex; gap: 10px; align-items: center; background: #fff; border: 1.5px solid var(--rule); border-radius: 10px; padding: 12px; cursor: pointer; font: inherit; color: inherit; text-align: start; }
.sc-opts button > span:last-child { display: grid; font-size: 13px; line-height: 1.25; }
.sc-opts button[aria-pressed="true"] { border-color: #8bc34a; background: #f4fbe8; }
.sc-opts .ic { width: 36px; height: 48px; flex: none; display: block; background: #fff; }
.sc-opts .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-opts .ic-print { padding: 3px; border: 1px solid #e2e2dc; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sc-opts .ic-canvas { box-shadow: 3px 3px 0 #b9b9b2, 0 2px 6px rgba(0,0,0,.18); }
.sc-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sc-sizes button { position: relative; display: grid; gap: 2px; justify-items: center; background: #fff; border: 1.5px solid var(--rule); border-radius: 10px; padding: 16px 8px 12px; cursor: pointer; font: inherit; color: inherit; }
.sc-sizes button[aria-pressed="true"] { border-color: #8bc34a; background: #f4fbe8; }
.sc-sizes s { color: var(--mute); font-size: 13px; }
.sc-sizes span { font-weight: 700; }
.sc-sizes .tag { position: absolute; top: -10px; background: #1a1a1a; color: #c9f27a; border: 0; }
.sc-dig, .sc-digonly { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1.5px solid var(--rule); border-radius: 10px; padding: 14px; margin-top: 16px; background: #fff; width: 100%; font: inherit; color: inherit; text-align: start; }
.sc-dig div:first-child, .sc-digonly > span { display: grid; font-size: 13px; }
.sc-dig b, .sc-digonly b { font-size: 15px; }
.sc-digonly { cursor: pointer; margin-top: 0; }
.sc-digonly[aria-pressed="true"] { border-color: #8bc34a; background: #f4fbe8; }
.sc-or { text-align: center; color: var(--mute); margin: 10px 0; }
.sc-built ul { padding-inline-start: 18px; margin: 6px 0 0; }
.sc-built h3 { font-size: 18px; margin-top: 22px; }
.sc-sticky { grid-template-columns: 1fr; gap: 6px; text-align: center; }
.sc-sticky p { margin: 0; font-size: 13px; }
.sc-sticky .tag { background: #c9f27a; border: 0; font-weight: 700; }
.sc-cart { padding: 16px var(--pad) 250px; }
.sc-cart h2 { font-size: 24px; }
.sc-saving { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #c9f27a; padding: 12px; border-radius: 10px; font-size: 14px; }
.sc-saving .tag { background: #1a1a1a; color: #fff; border: 0; }
.sc-saving span { margin-inline-start: auto; font-weight: 700; }
.sc-safe { text-align: center; font-size: 13px; margin-top: 10px; }
@media (min-width: 900px) {
  .up-prom { grid-template-columns: 1fr 1fr; }
  /* desktop: companionarchive.com's two columns, photos scroll on the left while the upload panel stays put on the right */
  .up-land { max-width: none; }
  .up-cols { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 400px); justify-content: center; gap: clamp(40px, 7vw, 110px); padding: 28px var(--pad) 60px; }
  .up-left { order: 1; }
  .up-right { order: 2; display: block; position: sticky; top: 120px; align-self: start; padding-top: 70px; }
  .up-head, .up-left { background: none; padding: 0; text-align: start; }
  .up-head h1 { font-size: 26px; line-height: 1.25; }
  .up-head .eyebrow { font-size: 11px; }
  .up-car { display: none; }
  .up-stack { display: grid; gap: 10px; }
  .up-stack > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #eceae5; }
  .up-right > .up-drop { margin: 22px 0 0; translate: none; padding: 30px 16px; }
  .up-right > .error { margin: 12px 0 0; }
  .up-exc { justify-content: flex-start; margin: 18px 0 0; }
  .up-trust { justify-content: flex-start; flex-direction: column; padding: 0; margin: 18px 0 0; }
  .up-lower { max-width: 1100px; margin: 0 auto; padding-top: 40px; }
  .up-exrow { padding: 0; overflow: visible; display: grid; grid-template-columns: repeat(3, 1fr); }
  .up-exrow img { width: 100%; aspect-ratio: 4 / 3; }
  .up-ed { grid-template-columns: 1.15fr 1fr; gap: 60px; padding: 70px 0 0; }
  .up-ed.rev > :first-child { order: 2; }
  .up-ed h3 { font-size: 28px; }
  .up-wall { max-width: 1100px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
  .up-wall .mock { margin: 0; position: sticky; top: 90px; }
  .sc-wall .mock { margin: 0 0 14px; }
  /* frameandtail.com product page: big picture on the left, title, upload and story on the right */
  .sc-land { max-width: 1140px; padding: 24px var(--pad) 0; }
  .sc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .sc-hero { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 90px; }
  .sc-heroin { display: none; }
  .sc-up, .sc-story, .sc-works { grid-column: 2; }
  .sc-up { background: none; padding: 8px 0 0; }
  .sc-dhead { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-bottom: 18px; }
  .sc-slots { border: 1.5px dashed #c9c9c4; border-radius: 12px; padding: 16px; background: #fff; }
  .sc-story, .sc-works { padding-inline: 0; }
  .sc-best { max-width: 1180px; margin: 0 auto; }
  .sc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; padding: 26px; margin: 0; border-radius: 4px; }
  .sc-grid.small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sc-cats { gap: 26px; }
  .sc-cats img { width: 104px; height: 104px; }
  .sc-prev, .sc-cart { max-width: 760px; }
  .sc-pimg { max-width: 520px; margin: 18px auto 0; border-radius: 6px; overflow: hidden; }
  /* customize: picture left, options right (frameandtail.com) */
  .sc-wall { max-width: 1140px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; padding-top: 20px; }
  .sc-wall .mock { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 90px; }
  .sc-wall > :not(.mock) { grid-column: 2; }
  .sc-wall > .sc-sticky { position: sticky; inset: auto; bottom: 0; box-shadow: none; padding-inline: 0; }
}

/* upload funnel: companionarchive.com details */
.up-std { border: 1px solid var(--rule); padding: 14px; margin-top: 22px; }
.up-std b { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.up-std p { margin: 6px 0 0; min-height: 1.5em; }
.mock-zoom { position: absolute; top: 12px; inset-inline-end: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.up-labrow { display: flex; justify-content: space-between; align-items: baseline; }
.up-labrow .linkish { font-size: 13px; }
.cart-thumb { display: block; width: 84px; height: 84px; background: #eceae5; display: grid; place-items: center; }
.cart-thumb img { width: 70%; height: auto !important; max-height: 80%; object-fit: contain; box-shadow: 0 4px 8px rgba(0,0,0,.25); }
.cart-thumb.framed img, .cart-thumb.fposter img { border: 3px solid #151515; }
.cart-thumb.fr-white img { border-color: #f4f4f2; }
.cart-thumb.fr-walnut img { border-color: #5b3a24; }
.cart-trust { list-style: none; padding: 0; margin: 6px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); grid-column: 1 / -1; }
.cart-trust li::before { content: "\2713"; margin-inline-end: 5px; }
.up-sticky.cartbar { grid-template-columns: 1fr; text-align: center; gap: 6px; }
.up-sticky.cartbar .up-rush { margin: 0; font-size: 13px; }
.up-trybar { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; background: #fff; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
.up-againin { display: grid; gap: 10px; }
.up-againin h2 { margin-bottom: 6px; }
.up-zoomin { width: min(900px, 100%); padding: 40px 10px 10px; }
.up-zoomin img { width: 100%; height: auto; }
.up-guidein { width: min(760px, 100%); }
.guide-wall { position: relative; margin: 10px 0; line-height: 0; }
.guide-wall img { width: 100%; height: auto; }
.gbox { position: absolute; left: 53.5%; bottom: 48%; transform: translateX(-50%); border: 2px solid #1a1a1a; background: rgba(255,255,255,.18); display: grid; place-items: end center; }
.gbox i { font: 600 11px/1.2 var(--body); font-style: normal; background: #1a1a1a; color: #fff; padding: 2px 6px; margin-bottom: -18px; white-space: nowrap; }
.up-sticky b#stName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .up-trybar { display: none; } .up-sticky.cartbar { position: sticky; bottom: 0; box-shadow: none; padding-inline: 0; } }

/* ===== tiles funnel: mixtiles.com's pet funnel ===== */
body.mx .bar { background: #fde7ef; color: #b0164e; font-weight: 600; }
.pill2 { border-radius: 99px; }
.mx-pink { background: #e8336d; }
.mx-pink:hover { background: #c71f56; }
.mx-land { max-width: 1180px; margin: 0 auto; padding: 22px var(--pad) 40px; }
.mx-land h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; text-align: center; }
.mx-sub { text-align: center; color: var(--ink-2); margin: 6px 0 20px; }
.mx-themes { display: grid; gap: 22px; }
.mx-theme { border-radius: 16px; overflow: hidden; background: #f6f4f1; }
.mx-mock { position: relative; background: #efece6 url(/img/wall-light.jpg) center 30%/cover; padding: 26px 13% 30px; }
.mx-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7%; }
.mx-grid6 i { display: block; background: #fff; border: 4px solid #141414; padding: 6%; box-shadow: 0 6px 12px -6px rgba(0,0,0,.45); }
.mx-grid6 img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mx-src { position: absolute; left: 12px; bottom: 12px; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.mx-src img { width: 100%; height: 100%; object-fit: cover; }
.mx-tl { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; }
.mx-tl div { display: grid; }
.mx-tl b { font-size: 18px; }
.mx-tl span { font-size: 13px; color: var(--mute); }
.mx-tl .btn { padding: 10px 26px; }
.mx-gate { min-height: 70vh; display: grid; place-items: center; padding: 30px var(--pad); }
.mx-g { width: min(420px, 100%); display: grid; gap: 14px; text-align: center; }
.mx-g h1 { font-size: 28px; font-weight: 600; }
.mx-g input { padding: 14px; border: 1.5px solid var(--rule); border-radius: 12px; font: inherit; }
.mx-opt { display: grid; text-align: start; gap: 2px; border: 1.5px solid var(--rule); border-radius: 14px; padding: 16px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.mx-opt span { color: var(--mute); font-size: 14px; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mx-chips button { border: 1.5px solid var(--rule); border-radius: 99px; background: #fff; padding: 9px 16px; cursor: pointer; font: inherit; }
.mx-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(20,20,20,.4); display: grid; align-items: end; justify-items: center; }
.mx-sheetin { position: relative; width: min(560px, 100%); background: #fff; border-radius: 18px 18px 0 0; padding: 22px var(--pad) calc(18px + env(safe-area-inset-bottom)); max-height: 90vh; overflow: auto; }
.mx-sheetin h2 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.mx-pick { display: flex; align-items: center; gap: 12px; border: 1.5px dashed #c9c5bf; border-radius: 14px; padding: 18px; cursor: pointer; margin-bottom: 14px; }
.mx-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mx-pick .plus { width: 44px; height: 44px; border-radius: 50%; background: #fde7ef; color: #e8336d; display: grid; place-items: center; font-size: 26px; }
.mx-chosen { position: relative; width: 120px; margin-bottom: 14px; }
.mx-chosen img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; }
.mx-chosen .x, .mx-tiles .x { position: absolute; top: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(20,20,20,.75); color: #fff; cursor: pointer; }
.mx-creating { position: fixed; inset: 0; z-index: 70; background: #111; display: grid; place-items: center; }
.mx-creating > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: blur(2px); }
.mx-creating .modal-x { color: #fff; z-index: 2; }
.mx-cin { position: relative; width: min(320px, 80%); text-align: center; color: #fff; }
.mx-cin b { font-size: 22px; }
.mx-cin .bar2 { background: rgba(255,255,255,.3); }
.mx-cin .bar2 i { background: #e8336d; }
.mx-top { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 12px var(--pad); border-bottom: 1px solid var(--rule); }
.mx-top b { text-align: center; font-size: 16px; }
.mx-top s { color: var(--mute); font-weight: 400; }
.mx-result, .mx-editor { max-width: 760px; margin: 0 auto; padding-bottom: 110px; }
.mx-wall { background: #efece6 url(/img/wall-light.jpg) center 20%/cover; padding: 40px 14% 50px; }
.mx-grid6.big i { border-width: 6px; }
.mx-bottom { position: fixed; inset-inline: 0; bottom: 0; background: #fff; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.07); z-index: 20; }
.mx-bottom .btn { max-width: 560px; margin: 0 auto; display: flex; }
.mx-bagbtn { border: 0; background: #141414; color: #fff; border-radius: 99px; padding: 8px 14px; font: 600 14px var(--body); cursor: pointer; }
.mx-bagbtn i { font-style: normal; background: #e8336d; border-radius: 99px; padding: 0 7px; margin-inline-start: 4px; }
.mx-toast { text-align: center; font-size: 13px; color: var(--ok); margin: 8px 0 0; opacity: 0; transition: opacity .3s; }
.mx-toast.on { opacity: 1; }
.mx-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 18px var(--pad); }
.mx-tiles figure { position: relative; margin: 0; }
.mx-tiles i { display: block; background: #fff; border: 7px solid #141414; padding: 7%; box-shadow: 0 8px 16px -8px rgba(0,0,0,.45); }
.mx-tiles img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mx-tiles.fr-white i { border-color: #f4f4f2; }
.mx-tiles.fr-oak i { border-color: #c79a63; }
.mx-tiles.fr-canvas i, .mx-tiles.fr-none i { border: 0; padding: 0; box-shadow: 4px 6px 0 -1px #d6d4cf, 0 10px 18px -8px rgba(0,0,0,.4); }
.mx-tools { position: fixed; inset-inline: 0; bottom: 0; z-index: 21; background: #fff; border-top: 1px solid var(--rule); display: flex; justify-content: center; gap: 34px; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); }
.mx-tools button { background: none; border: 0; display: grid; justify-items: center; gap: 2px; font: 500 12px var(--body); cursor: pointer; color: var(--ink); }
.mx-panel { position: fixed; inset-inline: 0; bottom: 64px; z-index: 22; background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px rgba(0,0,0,.08); padding: 14px var(--pad); max-height: 55vh; overflow: auto; }
.mx-opts { display: flex; gap: 10px; overflow-x: auto; }
.mx-opts button { flex: 0 0 96px; display: grid; justify-items: center; gap: 4px; border: 1.5px solid var(--rule); border-radius: 12px; background: #fff; padding: 10px 6px; cursor: pointer; font: inherit; color: inherit; text-align: center; }
.mx-opts button[aria-pressed="true"] { border-color: #e8336d; }
.mx-opts span { font-size: 11px; color: var(--mute); }
.mx-opts b { font-size: 13px; }
.sq { width: 34px; height: 34px; border: 4px solid #141414; background: #eee; }
.sq.fr-white { border-color: #ddd; } .sq.fr-oak { border-color: #c79a63; } .sq.fr-canvas, .sq.fr-none { border: 0; box-shadow: 3px 3px 0 #ccc; }
.sqs { width: calc(var(--s) * 2px + 10px); height: calc(var(--s) * 2px + 10px); border: 2px solid #141414; }
.mx-addgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.mx-addgrid button { padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; }
.mx-addgrid button[aria-pressed="true"] { border-color: #e8336d; }
.mx-addgrid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mx-disc { background: #fde7ef; color: #8c1240; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.mx-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; margin: 14px 0; }
.mx-line img { width: 64px; height: 64px; object-fit: cover; border: 3px solid #141414; }
.mx-line div { display: grid; justify-items: start; }
.mx-line s { color: var(--mute); font-weight: 400; display: block; font-size: 13px; }
.mx-promo { margin: 8px 0 12px; }
.mx-promo summary { cursor: pointer; font-weight: 600; }
.mx-promo div { display: flex; gap: 8px; margin-top: 8px; }
.mx-promo input { flex: 1; padding: 10px; border: 1.5px solid var(--rule); border-radius: 10px; font: inherit; text-transform: uppercase; }
@media (min-width: 900px) {
  .mx-themes { grid-template-columns: repeat(3, 1fr); }
  .mx-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* frameandtail.com copy, QA round 2026-11-13 */
.th .okmark { font-size: 11px; line-height: 1.2; color: var(--ok); text-align: center; padding: 4px; }
.th.add { background: #f4fbe8; color: #3d6b12; }
.sc-sizes.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-sizes small { color: var(--mute); font-size: 12px; }
.sc-sizes button.na { opacity: .55; }
.sc-sizes button.na em { font-style: normal; font-size: 12px; color: var(--mute); }
/* wall mock-up to scale above the sofa (wall-light.jpg: sofa top at ~61% of the height) */
.mock[class*="sz-"] .mock-art { align-self: end; margin-bottom: 47%; transition: width .2s, padding .2s, border-color .2s; }
.mock.sz-8x12 .mock-art { width: 17%; }
.mock.sz-12x18 .mock-art { width: 22%; }
.mock.sz-16x24 .mock-art { width: 28%; }
.mock.sz-24x36 .mock-art { width: 34%; }
.mock.framed .mock-art, .mock.fposter .mock-art { border-width: clamp(4px, 1.1vw, 10px); }
.mock.digital { background: #f3f2ee; }
.mock.digital .mock-art { width: 46%; box-shadow: 0 8px 24px rgba(0,0,0,.18); border-radius: 4px; overflow: hidden; }
.cart-item img.fr-black, .cart-item img.fr-walnut, .cart-item img.fr-white { border: 4px solid #151515; padding: 0; }
.cart-item img.k-fposter { padding: 5px; background: #fff; }
.cart-item img.fr-walnut { border-color: #5b3a24; }
.cart-item img.fr-white { border-color: #f4f4f2; outline: 1px solid var(--rule); }
.cart-item img.k-canvas { box-shadow: 3px 3px 0 #cfcfc9; }
@media (min-width: 900px) {
  body.sc .sc-steps { padding-inline: max(var(--pad), calc((100% - 1140px) / 2 + var(--pad))); }
  .sc-pimg img { max-height: calc(100vh - 300px); width: auto; max-width: 100%; margin: 0 auto; }
}

/* mixtiles.com copy, QA round 2026-11-13 */
body.mx .top { position: static; }
.mx-editor .mx-top, .mx-result .mx-top { position: sticky; top: 0; z-index: 23; background: #fff; }
body.mx[data-step="result"] footer, body.mx[data-step="editor"] footer, body.mx:has(#gate:not(.hidden)) footer { display: none; }
.mx-grid6.fr-white i { border-color: #f4f4f2; }
.mx-grid6.fr-oak i { border-color: #c79a63; }
.mx-grid6.fr-canvas i, .mx-grid6.fr-none i { border: 0; padding: 0; }
.mx-opts small { font-size: 11px; color: var(--mute); }
.mx-resume { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: #fde7ef; border-radius: 14px; padding: 12px 16px; margin: 0 auto 20px; max-width: 560px; font-weight: 600; }
.mx-resume .btn { padding: 8px 22px; }
.mx-g .error { margin: 0; }
@media (min-width: 900px) {
  /* the frame / size / add panels sit above the centred tool bar, not across the whole screen */
  .mx-panel { inset-inline: 0; margin: 0 auto; width: min(760px, 100%); border: 1px solid var(--rule); border-radius: 14px 14px 0 0; }
  .mx-opts { justify-content: center; }
  .mx-addgrid { grid-template-columns: repeat(6, 1fr); }
}

/* companionarchive.com copy, QA round 2026-11-13 */
.btn .nc { text-transform: none; }
.mock.land.sz-12x18 .mock-art { width: 33%; }
.mock.land.sz-16x24 .mock-art { width: 42%; }
.mock.land.sz-24x36 .mock-art { width: 56%; }
.mock.land[class*="sz-"] .mock-art { margin-bottom: 44%; }
.up-cart { padding-bottom: 240px; }
@media (max-width: 899px) {
  .up-car.tall { aspect-ratio: 4 / 5; }
  body.up .bar { min-height: 52px; display: grid; place-items: center; }
  body.up .foot { padding-bottom: 110px; }
  .up-sticky:not(.cartbar) { grid-template-columns: 1fr; gap: 8px; }
  .up-sticky:not(.cartbar) div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 12px; }
  .up-sticky:not(.cartbar) div b { font-size: 14px; }
  .up-sticky:not(.cartbar) .btn { width: 100%; }
}

/* verifier round 2026-11-13 */
.mock.fposter .mock-art { padding: 0; }
.mock.fposter .mock-art img { padding: 7%; background: #fff; box-sizing: border-box; }
.sc-sticky .tag, .tag .nc { text-transform: none; }
@media (max-width: 899px) { body.up .bar { min-height: 58px; min-height: calc(2lh + 16px); } }
@media (min-width: 900px) {
  body.sc[data-step="prev"] .sc-steps, body.sc[data-step="cart"] .sc-steps { padding-inline: max(var(--pad), calc((100% - 760px) / 2 + var(--pad))); }
}