/* Mobile first: a scrolling page around a full-screen studio; sheets slide up for everything else. */
/* Same display/body fonts as PETEE; self-hosted Google Fonts, see docs/FONTS.md. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/fredoka-latin-ext-18a1723c.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/fredoka-latin-99d6c78e.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/nunito-sans-latin-ext-c648ee5b.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/nunito-sans-latin-29e38904.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #2b2037;
  --muted: #6d6177;
  --paper: #fffaf3;
  --white: #ffffff;
  --soft-line: #ebe2e8;
  --yellow: #ffd75a;
  --coral: #ff6f61;
  --pink: #ffc9d8;
  --mint: #c9f1df;
  --sky: #d6ebff;
  --lilac: #ece9ff;
  --tile: #b4d4f5;
  --blue: #5546d7;
  --blue-dark: #4234bc;
  /* The logo's coral is the brand colour: headline accent and main actions, with ink text on it (white on
     coral is too faint). Violet stays for the studio's own controls and selections. */
  --coral-dark: #f2584a;
  --red: #c83e3e;
  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow: 3px 3px 0 var(--ink);
  /* Motion: organic curves that start gently and settle slowly; the spring overshoots by about 4%. */
  --spring: cubic-bezier(.3, 1.2, .45, 1);
  --ease: cubic-bezier(.32, .72, 0, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --topbar: calc(60px + env(safe-area-inset-top));
  /* One vertical rhythm: blocks of the page sit --space apart; spacing inside them steps by 8px. */
  --space: 64px;
  --display: "Fredoka", "Arial Rounded MT Bold", "Noto Sans Thai", "Thonburi", sans-serif;
  --text: "Nunito Sans", Arial, "Noto Sans Thai", "Thonburi", sans-serif;
  color: var(--ink);
  /* `only`: Chrome on Android otherwise darkens light pages itself (Auto Dark Theme), product photos included. */
  color-scheme: only light;
  background: var(--paper);
  font-family: var(--text);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--topbar); }
/* iOS lets the page bounce past its end, showing an empty band under the footer: the page stops at
   its edges instead, and anything still revealed there continues the footer. */
html { background: linear-gradient(var(--paper) 50%, var(--ink) 50%) no-repeat fixed, var(--paper); }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; touch-action: manipulation; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
button, a, input, summary, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
svg { flex: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }

/* App shell */
.app { min-height: 100vh; min-height: 100dvh; }
main { display: block; }
.noscript { margin: 16px; }

.topbar { --squeeze-by: 14px; position: sticky; top: 0; z-index: 10; display: flex; height: var(--topbar); align-items: center; justify-content: space-between; gap: 8px; padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); pointer-events: none; }
/* Scrolling down shrinks the bar (--squeeze runs 0 → 1 over the first stretch of scroll): its backdrop
   slides up and its contents shrink with it. Transforms only, so the page under it never reflows and the
   studio keeps its height; the strip the bar gives up lets taps through to the page. */
.topbar::before { position: absolute; inset: 0; z-index: -1; content: ""; background: rgb(255 250 243 / 95%); transform: translateY(calc(var(--squeeze-by) * -1 * var(--squeeze, 0))); }
.topbar > * { pointer-events: auto; transform: translateY(calc(var(--squeeze-by) * -.5 * var(--squeeze, 0))) scale(calc(1 - .14 * var(--squeeze, 0))); }
.topbar > .brand { transform-origin: left center; }
.topbar > .topbar-actions { transform-origin: right center; }
/* Frosted, like Flowctory's bar: mostly see-through where the browser can blur what scrolls under it. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .topbar::before { background: rgb(255 250 243 / 60%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }
.topbar-nav { display: none; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.brand-mark { width: auto; height: 36px; flex: none; overflow: visible; transform-origin: 50% 90%; transition: transform 390ms var(--spring); }
.brand-mark path { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.brand-mark-shadow, .brand-mark circle { fill: var(--ink); }
.brand-mark-cat { fill: var(--coral); }
.brand:active .brand-mark { transform: rotate(7deg) scale(1.08); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.round-button { position: relative; display: grid; width: 42px; height: 42px; place-items: center; padding: 0; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform 210ms var(--ease), box-shadow 210ms var(--ease); }
.round-button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.round-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.language-toggle { min-width: 46px; height: 42px; padding: 0 12px; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 800; }
.language-toggle:active { transform: translate(2px, 2px); box-shadow: none; }
/* The language toggle names the other language, with its flag. */
.language-toggle { display: inline-grid; width: 42px; min-width: 0; padding: 0; place-items: center; border-radius: 50%; }
.language-toggle .language-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flag { display: none; width: 26px; height: 26px; flex: none; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px rgb(43 32 55 / 18%); }
.language-toggle[data-target="en"] .flag-en, .language-toggle[data-target="th"] .flag-th { display: block; }
/* Units: centimetres or inches for every length on the page. */
.unit-toggle { display: inline-flex; height: 42px; align-items: center; padding: 3px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); }
.unit-toggle button { height: 100%; min-width: 30px; padding: 0 7px; color: var(--muted); background: none; border: 0; border-radius: 999px; font-size: 13px; font-weight: 800; transition: background-color 210ms var(--ease), color 210ms var(--ease); }
.unit-toggle button[aria-pressed="true"] { color: var(--white); background: var(--ink); }
@media (max-width: 374px) { .topbar-actions { gap: 6px; } .brand-name { font-size: 18px; } .unit-toggle button { min-width: 26px; padding: 0 5px; } }
.bag-count { position: absolute; top: -7px; right: -7px; display: grid; min-width: 22px; height: 22px; padding: 0 5px; place-items: center; color: var(--white); background: var(--coral); border: 2px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; animation: pop 420ms var(--spring); }
.bag-button.is-bumping { animation: bump 680ms var(--spring); }

/* Studio */
.studio { display: flex; height: calc(var(--studio-height, 100svh) - var(--topbar)); min-height: 520px; max-height: 980px; flex-direction: column; padding-top: 12px; }
main > section + section { margin-top: var(--space); }
/* Full screen: the studio covers the page; a spacer keeps the page's length meanwhile. */
.studio.is-full { position: fixed; inset: 0; z-index: 25; width: auto; height: auto; min-height: 0; max-height: none; margin: 0; padding: max(12px, env(safe-area-inset-top)) 0 0; overflow: hidden; overscroll-behavior: none; background: var(--paper); }
.studio.is-full:fullscreen { width: 100%; height: 100%; }
.studio.is-full .studio-extras { display: none; }
.studio-spacer { margin-top: calc(var(--space) - 12px); }
/* Entering and leaving full screen morphs the studio between its two places (app.js): the page fades
   under a paper backdrop, the stage's card (drawn by .stage-frame meanwhile) moves and resizes, and
   the product and the controls glide to their new places. */
.studio.is-morphing { isolation: isolate; }
.studio.is-morphing:not(.is-full) { position: relative; z-index: 25; }
.studio.is-morphing.is-full { background: transparent; }
.studio.is-morphing .product-stage { overflow: visible; background: transparent; border-color: transparent; box-shadow: none; transition: none; }
.studio.is-morphing :is(.photo-grip, .manipulator, .mockup-overlay, .mockup-loupe) { opacity: 0; }
.studio-backdrop { position: fixed; inset: 0; z-index: -2; background: var(--paper); pointer-events: none; }
.stage-frame { position: fixed; z-index: -1; box-sizing: border-box; pointer-events: none; }
/* The page underneath is pinned in place (its offset is set from script) so nothing scrolls. */
html.is-studio-full { overflow: hidden; overscroll-behavior: none; }
html.is-studio-full body { position: fixed; right: 0; left: 0; width: 100%; overflow: hidden; }
/* The studio's own 12px top padding counts towards the gap above it. */
main > .studio { margin-top: calc(var(--space) - 12px); }
main > .products { margin-top: 32px; }
main > .products + .studio, main > .products + .studio-spacer { margin-top: 8px; }
.product-stage { position: relative; flex: 1; min-height: 300px; margin: 0 max(12px, env(safe-area-inset-left)); overflow: hidden; background:
    radial-gradient(circle at 50% 45%, rgb(255 255 255 / 92%), rgb(255 255 255 / 0) 58%),
    radial-gradient(circle, rgb(85 70 215 / 9%) 0 1.6px, transparent 2.4px) 0 0 / 22px 22px,
    var(--sky);
  border: 2px solid var(--ink); border-radius: 28px; box-shadow: var(--shadow); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background-color 390ms var(--ease); }
.product-stage[data-product="tote"] { background-color: var(--mint); }
.product-stage.is-dropping { box-shadow: inset 0 0 0 4px var(--blue), var(--shadow); }
.mockup-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; touch-action: pan-y; will-change: transform; }
.mockup-overlay { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
/* Under the canvas while a zoomed view moves (the whole product, so nothing shows empty), and over it
   while a new colour or model fades in. */
.mockup-under { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; transform-origin: 0 0; }
.mockup-fade { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.mockup-loupe { position: absolute; z-index: 6; width: 96px; height: 96px; pointer-events: none; border: 3px solid var(--white); border-radius: 50%; box-shadow: 0 0 0 2px var(--ink), 0 12px 28px rgb(43 32 55 / 28%); }
.mockup-loupe[hidden] { display: none; }
.mockup-loupe.is-placed { transition: left 110ms linear, top 110ms linear; }
/* Grips on the selected photo, in an arc under it: resize, move, turn. */
.photo-grip { position: absolute; z-index: 4; width: 32px; height: 32px; background: var(--blue) center / 18px no-repeat; border: 2px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm); touch-action: none; transform: translate(-50%, -50%); cursor: grab; animation: grip-in 340ms var(--spring); }
.photo-grip::after { position: absolute; inset: -7px; content: ""; border-radius: 50%; }
.photo-grip:active { cursor: grabbing; }
.grip-resize { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M6 12.5V18h5.5M12.5 6H18v5.5'/%3E%3C/svg%3E"); cursor: nesw-resize; }
.grip-move { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18M9 6l3-3 3 3M9 18l3 3 3-3M6 9l-3 3 3 3M18 9l3 3-3 3'/%3E%3C/svg%3E"); }
.grip-turn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12a7 7 0 1 1-2.05-4.95'/%3E%3Cpath d='M19 4v4h-4'/%3E%3C/svg%3E"); }
@keyframes grip-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
/* The photo's grab area: touches that start here move, resize or turn the photo instead of scrolling. */
.manipulator { position: absolute; z-index: 2; touch-action: none; border-radius: 18px; }
.photo-render { display: none; }
.stage-top, .stage-bottom { position: absolute; z-index: 3; right: 10px; left: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.stage-top > *, .stage-bottom > * { pointer-events: auto; }
.stage-top { top: 10px; align-items: flex-start; }
/* Bottom controls: turn | undo | zoom | redo | colour. */
.stage-bottom { bottom: 10px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: end; justify-items: center; }
.stage-bottom > :first-child { justify-self: start; }
.stage-bottom > :last-child { justify-self: end; }

.stage-lead { display: grid; min-width: 0; justify-items: start; gap: 8px; pointer-events: none; }
.stage-lead > * { max-width: 100%; pointer-events: auto; }

.stage-tools { display: grid; justify-items: end; gap: 8px; pointer-events: none; }
.stage-tools > * { pointer-events: auto; }
.stage-corner { display: flex; align-items: center; gap: 8px; pointer-events: none; }
.stage-corner > * { pointer-events: auto; }
#full-button .full-close, #full-button[aria-pressed="true"] .full-open { display: none; }
#full-button[aria-pressed="true"] .full-close { display: block; }
/* With a mouse or trackpad the studio is already big enough: no full screen. */
@media (hover: hover) and (pointer: fine) { #full-button { display: none; } }

.tool-stack { display: grid; gap: 8px; animation: pop 390ms var(--spring); }
.tool-button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform 210ms var(--ease), box-shadow 210ms var(--ease), background-color 260ms var(--ease), color 260ms var(--ease); }
.tool-button:not(:disabled):active { transform: translate(2px, 2px); box-shadow: none; }
.tool-button:disabled { cursor: default; color: rgb(43 32 55 / 32%); border-color: rgb(43 32 55 / 32%); box-shadow: none; }
.tool-button[aria-pressed="true"], .tool-button[aria-expanded="true"] { color: var(--white); background: var(--blue); }
.tool-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tool-button .tool-spot { fill: currentColor; stroke: none; }
.tool-button.add-layer { color: var(--white); background: var(--coral); }
.place-menu { position: absolute; z-index: 5; top: 60px; right: 60px; display: grid; gap: 2px; padding: 4px; background: var(--ink); border-radius: 16px; box-shadow: 0 10px 30px rgb(43 32 55 / 30%); transform-origin: 100% 0; animation: menu-in 290ms var(--spring); }
.place-menu button { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; color: var(--white); background: transparent; border: 0; border-radius: 12px; font-size: 14px; font-weight: 700; text-align: left; white-space: nowrap; }
.place-menu button:active, .place-menu button[aria-checked="true"] { background: rgb(255 255 255 / 14%); }
.place-menu svg { width: 28px; height: 28px; }
.place-menu .place-garment { fill: rgb(255 255 255 / 12%); stroke: rgb(255 255 255 / 75%); stroke-width: 1.3; stroke-linejoin: round; }
.place-menu .place-spot { fill: var(--yellow); }
.place-menu [aria-checked="true"] .place-spot { fill: var(--coral); }
.flip-button { position: relative; }
.flip-button[data-printed="true"]::after { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; content: ""; background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; }
.zoom-control { display: flex; align-items: center; height: 40px; padding: 0 2px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); }
.zoom-control button { display: grid; min-width: 34px; height: 34px; place-items: center; padding: 0 4px; color: var(--ink); background: none; border: 0; border-radius: 999px; font-family: var(--display); font-size: 14px; }
.zoom-control button:not(:disabled):active { background: var(--lilac); }
.zoom-control button:disabled { cursor: default; opacity: .3; }
.zoom-control svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
#zoom-reset { min-width: 42px; }
/* Zoomed in, a drag on the product moves the view, not the page. */
.product-stage.is-zoomed, .product-stage.is-zoomed .mockup-canvas { touch-action: none; }

/* Colour: a round button with the colour on, opening upwards into the model's colours. */
.color-picker { position: relative; }
.color-picker.is-single { visibility: hidden; }
.color-button { padding: 0; }
.color-dot, .color-swatches button { display: block; width: 26px; height: 26px; padding: 0; background: #fafafa; border: 1.5px solid rgb(43 32 55 / 28%); border-radius: 50%; }
.color-swatches { position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; gap: 8px; padding: 6px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); transform-origin: 50% 100%; animation: colors-in 310ms var(--spring); }
.color-swatches[hidden] { display: none; }
.color-swatches button { width: 24px; height: 24px; transition: transform 260ms var(--spring), box-shadow 260ms var(--ease); }
.color-swatches button:active { transform: scale(.88); }
.color-swatches button[hidden] { display: none; }
:is(.color-dot, .color-swatches button)[data-color="BLACK"] { background: #202020; }
:is(.color-dot, .color-swatches button)[data-color="VINTAGE_BLACK"] { background: #494542; }
:is(.color-dot, .color-swatches button)[data-color="WHITE_RED"] { background: linear-gradient(135deg, #fafafa 60%, #c93535 60%); }
:is(.color-dot, .color-swatches button)[data-color="NATURAL"] { background: #e8dbc2; }
.color-swatches button[aria-pressed="true"] { border-color: var(--white); box-shadow: 0 0 0 2.5px var(--blue); }
.color-button[aria-expanded="true"] { background: var(--lilac); }
@keyframes colors-in { from { opacity: 0; transform: translateY(10px) scaleY(.4); } }

/* The selected photo's actions: a compact bar of icons in the top corner. */
.photo-menu { display: flex; gap: 2px; padding: 2px; background: var(--ink); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); transform-origin: 0 50%; animation: menu-in 290ms var(--spring); }
.photo-menu[hidden] { display: none; }
.photo-menu button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: var(--white); background: transparent; border: 0; border-radius: 50%; transition: background-color 210ms var(--ease); }
.photo-menu button:active, .photo-menu button[aria-pressed="true"] { background: rgb(255 255 255 / 18%); }
.photo-menu button:disabled { opacity: .4; }
.photo-menu #remove-photo { color: #ffb4ab; }
@media (max-width: 374px) { .photo-menu button { width: 33px; height: 33px; } .photo-menu svg { width: 18px; height: 18px; } }
.tool-button[aria-disabled="true"] { opacity: .45; box-shadow: none; }
/* Cropping: the photo's own editor, with its instructions and actions over the bottom of the stage. */
.crop-bar { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 6; display: grid; gap: 8px; padding: 10px 12px 12px; color: var(--white); background: var(--ink); border-radius: 20px; box-shadow: var(--shadow); animation: pop 340ms var(--spring); }
.crop-bar p { margin: 0; font-size: 13px; font-weight: 700; text-align: center; opacity: .85; }
.crop-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.crop-actions .button { min-height: 44px; }
.product-stage.is-cropping :is(.stage-bottom, .tool-stack, .stage-corner, .cutout-chip) { visibility: hidden; }
.photo-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes menu-in { from { opacity: 0; transform: scale(.85); } }

.hint, .toast { position: absolute; z-index: 4; left: 50%; margin: 0; pointer-events: none; transform: translateX(-50%); }
.hint { bottom: 64px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; color: var(--white); background: rgb(43 32 55 / 88%); border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; animation: hint-in 470ms var(--spring); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hint svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: pinch 1.4s ease-in-out infinite; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.9); } }
@keyframes pinch { 50% { transform: scale(.82) rotate(-8deg); } }
.toast { top: 62px; width: max-content; max-width: calc(100% - 32px); padding: 9px 14px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; animation: toast-in 390ms var(--spring); }
.toast[data-tone="error"] { color: var(--white); background: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px) scale(.94); } }
.stage-status { position: absolute; z-index: 4; inset: auto 16px 50% 16px; margin: 0; padding: 12px 14px; color: var(--red); background: var(--white); border: 2px solid var(--ink); border-radius: 14px; font-size: 14px; font-weight: 700; text-align: center; }

/* Action bar: the thumb zone */
.action-bar { display: flex; flex: none; gap: 12px; padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
/* Only the full-screen studio reaches the bottom edge. In the page, the bottom safe area (which Safari
   changes as its toolbar hides and shows) would resize the product while scrolling. */
.studio.is-full .action-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.size-chip { display: grid; min-width: 72px; height: 56px; padding: 4px 12px; place-content: center; justify-items: center; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); line-height: 1.1; transition: transform 210ms var(--ease), box-shadow 210ms var(--ease); }
.size-chip:active { transform: translate(2px, 2px); box-shadow: none; }
.size-chip-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.size-chip strong { font-family: var(--display); font-size: 19px; }
.size-chip[data-sized="false"] .size-chip-label { color: var(--ink); font-size: 15px; font-weight: 800; }
.size-chip[data-sized="false"] strong { display: none; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); font-weight: 800; text-align: center; text-decoration: none; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background-color 260ms var(--ease); }
.button:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.primary { color: var(--ink); background: var(--coral); }
.secondary { color: var(--ink); background: var(--white); }
button:disabled { cursor: not-allowed; opacity: .45; }
.button:disabled { box-shadow: none; }
.add-button { flex: 1; min-width: 0; height: 56px; padding-inline: 14px; font-family: var(--display); font-size: clamp(16px, 4.6vw, 19px); white-space: nowrap; }
.add-button > span:not(.add-price) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.add-price { flex: none; }
.danger { color: var(--white); background: var(--red); }
.add-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.add-button.is-done { background: #23a26d; }
.add-price { padding: 3px 9px; margin-left: 2px; color: var(--ink); background: var(--yellow); border-radius: 999px; font-size: 16px; font-variant-numeric: tabular-nums; }
.add-price:empty { display: none; }
.cutout-chip { position: absolute; z-index: 4; bottom: 62px; left: 50%; display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 6px 16px 6px 12px; color: var(--white); background: var(--blue); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); font-size: 15px; font-weight: 800; white-space: nowrap; transform: translateX(-50%); animation: chip-in 490ms var(--spring); }
.cutout-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes chip-in { from { opacity: 0; transform: translate(-50%, 12px) scale(.9); } }
.text-button { display: inline-flex; min-height: 44px; align-items: center; padding: 6px 0; color: var(--blue); background: none; border: 0; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.help { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
@media (hover: hover) {
  .primary:not(:disabled):hover { background: var(--coral-dark); }
  .round-button:hover, .size-chip:hover, .language-toggle:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow); }
}

.flyer { position: fixed; z-index: 30; width: 56px; height: 56px; margin: 0; object-fit: cover; pointer-events: none; border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); }

@keyframes pop { from { transform: scale(.4); } }
@keyframes bump { 30% { transform: scale(1.22) rotate(-8deg); } 60% { transform: scale(.94) rotate(4deg); } }

/* Sheets */
.sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 560px; max-height: calc(100dvh - 40px - env(safe-area-inset-top)); margin: 0 auto; padding: 6px 16px calc(18px + env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -10px 40px rgb(43 32 55 / 18%); }
.sheet::backdrop { background: rgb(43 32 55 / 38%); }
.sheet.is-closing::backdrop { opacity: 0; transition: opacity 260ms; }
.sheet-handle { width: 40px; height: 5px; margin: 4px auto 6px; background: #d9d0d8; border-radius: 99px; }
.sheet-header { position: sticky; top: -6px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px 8px; padding: 6px 16px 8px; background: var(--white); touch-action: none; }
.sheet-header h2 { font-size: 23px; }
.sheet-close { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: var(--muted); background: #f3eef2; border: 0; border-radius: 50%; }
.sheet-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

.card-colors { display: flex; min-height: 12px; justify-content: center; gap: 4px; margin: 2px 0; }
.card-colors i { width: 12px; height: 12px; background: #fafafa; border: 1.5px solid rgb(43 32 55 / 35%); border-radius: 50%; }
.card-colors [data-color="BLACK"] { background: #202020; }
.card-colors [data-color="VINTAGE_BLACK"] { background: #494542; }
.card-colors [data-color="WHITE_RED"] { background: linear-gradient(135deg, #fafafa 55%, #c93535 55%); }
.card-colors [data-color="NATURAL"] { background: #e8dbc2; }

.rail-item { position: relative; display: grid; min-width: 0; }
.info-button { position: absolute; display: grid; width: 28px; height: 28px; place-items: center; padding: 0; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 50%; }
.info-button::before { position: absolute; inset: -7px; content: ""; }
.info-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.info-button:active { transform: scale(.9); }
.rail-item .info-button { top: 7px; right: 7px; width: 26px; height: 26px; }
.rail-item .rail-card strong { padding-right: 24px; }
.info-sheet h3 { margin: 18px 0 8px; font-size: 17px; }
.info-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; }
.info-art { display: block; padding: 6px; background: var(--sky); border-radius: 16px; }
.info-art img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: contain; filter: drop-shadow(0 4px 5px rgb(43 32 55 / 24%)); }
.info-specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.info-specs li { padding: 3px 10px; background: var(--paper); border: 1.5px solid var(--soft-line); border-radius: 999px; font-size: 13px; font-weight: 700; }
.info-price { margin: 10px 0 0; font-family: var(--display); font-size: 19px; }
.info-why { margin-top: 16px; padding: 12px 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-sm); }
.info-why h3 { margin: 0 0 4px; font-size: 15px; }
.info-why p { margin: 0; font-size: 15px; font-weight: 600; }
.info-points { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.info-points li { position: relative; padding-left: 24px; }
.info-points li::before { position: absolute; left: 2px; content: "✓"; color: var(--coral); font-weight: 900; }
.info-care li::before { content: "•"; color: var(--muted); }
.info-sizes { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; }
.info-sizes th { padding: 6px 4px; color: var(--muted); font-size: 12px; font-weight: 800; border-bottom: 2px solid var(--soft-line); }
.info-sizes td { padding: 6px 4px; border-bottom: 1px solid var(--soft-line); }
.info-sizes td:first-child { font-weight: 800; }
.info-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.info-text { margin: 0; font-size: 15px; }
.info-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); margin: 18px -16px 0; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(rgb(255 255 255 / 0), var(--white) 14px); }
.info-actions .button { width: 100%; font-family: var(--display); font-size: 17px; }
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.size-grid button { display: grid; gap: 1px; min-height: 58px; padding: 6px 4px; place-content: center; color: var(--ink); background: var(--paper); border: 2px solid var(--soft-line); border-radius: 14px; font-family: var(--display); font-size: 18px; font-weight: 750; line-height: 1.3; transition: transform 260ms var(--spring); }
.size-grid button small { color: var(--muted); font-family: var(--text); font-size: 11px; font-weight: 600; }
.size-grid button:active { transform: scale(.94); }
.size-grid button[aria-pressed="true"] { background: var(--yellow); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.size-grid.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.size-detail { min-height: 20px; margin: 12px 2px 0; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }

/* Bag */
.design-bag:focus { outline: none; }
.product-stage:focus { outline: none; }
.empty-state { display: grid; justify-items: center; gap: 4px; padding: 26px 0 12px; color: var(--muted); font-weight: 700; text-align: center; }
.empty-state svg { width: 46px; height: 46px; padding: 9px; color: var(--blue); background: var(--lilac); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-6deg); }
.empty-state p { margin: 8px 0 0; }
.bag-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1.5px solid var(--soft-line); }
/* The bag moves: a new design rises in, a removed one folds away (bag.js), changed numbers tick,
   presses give, the count on the bag button pops and an emptied bag settles in. */
.bag-item.is-new { animation: bag-in 560ms var(--out) calc(var(--i, 0) * 70ms + 80ms) both; }
@keyframes bag-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.bag-item.is-new .bag-thumb { animation: bag-thumb-in 640ms var(--spring) calc(var(--i, 0) * 70ms + 160ms) both; }
@keyframes bag-thumb-in { from { opacity: 0; transform: scale(.8) rotate(-6deg); } }
.bag-item.is-leaving { pointer-events: none; }
.bag-price, .stepper output, .bag-total strong { display: inline-block; }
.bag-count.is-popping { animation: pop 460ms var(--spring); }
#bag-empty:not([hidden]) { animation: bag-in 520ms var(--out); }
.stepper button { border-radius: 10px; transition: transform 200ms var(--out), background-color 200ms var(--ease); }
.stepper button:not(:disabled):active { transform: scale(.86); background: var(--white); }
.stepper button:disabled { opacity: .35; }
.icon-action { transition: transform 200ms var(--out), background-color 200ms var(--ease); }
.icon-action:active { transform: scale(.88); }
.bag-thumb { width: 76px; height: 92px; background: var(--sky); border-radius: 16px; }
.bag-item[data-product="tote"] .bag-thumb { background: var(--mint); }
.bag-item-info { display: grid; gap: 2px; min-width: 0; }
.bag-item h3 { font-size: 17px; }
.bag-item-info { grid-template-columns: minmax(0, 1fr) auto; }
.bag-item-info > :not(h3, .bag-price) { grid-column: 1 / -1; }
.bag-price { align-self: baseline; font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; }
.bag-total { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; padding: 12px 2px 0; border-top: 2px solid var(--ink); font-size: 16px; font-weight: 800; }
.bag-total strong { order: 1; margin-left: auto; font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; }
.bag-total small { padding: 2px 8px; color: var(--ink); background: var(--mint); border-radius: 999px; font-size: 12px; }
.bag-item p { margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; font-weight: 600; }
.bag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.stepper { display: inline-flex; align-items: center; background: var(--paper); border: 1.5px solid var(--soft-line); border-radius: 12px; }
.stepper button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: var(--ink); background: none; border: 0; font-size: 20px; font-weight: 700; line-height: 1; }
.stepper output { min-width: 22px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.item-actions { display: flex; gap: 2px; }
.icon-action { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; color: var(--ink); background: none; border: 0; border-radius: 12px; }
.icon-action:active { background: var(--paper); }
.icon-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-action[data-danger] { color: var(--red); }
#bag-status { margin: 10px 0 0; color: var(--blue); font-size: 14px; font-weight: 700; }
#bag-status:empty { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.checkout-panel { display: grid; gap: 12px; margin-top: 14px; padding: 14px; background: var(--lilac); border-radius: 20px; }
.checkout-panel p { margin: 0; color: var(--muted); font-size: 14px; }
.checkout-panel .button { width: 100%; }
.privacy-note { font-size: 12px !important; text-align: center; }
.bag-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 6px; font-size: 14px; }
.bag-tools .text-button { color: var(--muted); font-weight: 600; }
.recipient-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.recipient-form legend { padding: 0; font-weight: 800; }
.recipient-form #recipient-help { margin-block: 4px 10px; font-size: 13px; }
.recipient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.recipient-grid label { display: grid; min-width: 0; gap: 4px; font-size: 13px; font-weight: 600; }
.recipient-wide { grid-column: 1 / -1; }
.recipient-grid input { width: 100%; min-width: 0; min-height: 46px; padding: 8px 10px; background: var(--white); border: 1.5px solid #b9aec4; border-radius: 10px; font-size: 16px; }
.recipient-grid input:focus { border-color: var(--blue); outline: none; }
#checkout-status:empty { display: none; }
.quote-details { padding: 14px; background: var(--white); border-radius: 14px; }
.quote-details dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; margin: 0; }
.quote-details dt, .quote-details dd { margin: 0; }
.quote-details dd { font-variant-numeric: tabular-nums; text-align: right; }
.quote-details dt:last-of-type, .quote-details dd:last-of-type { padding-top: 8px; border-top: 1.5px solid var(--ink); font-weight: 800; }

/* Order status */
.order-status { flex: 1; overflow: auto; margin-top: 0; padding: 32px 20px; }
.order-status h2 { font-size: clamp(30px, 9vw, 52px); }
.order-status #order-copy { max-width: 520px; color: var(--muted); font-size: 17px; }
.order-production { margin-top: 24px; padding: 16px; background: var(--white); border: 2px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-sm); }
.order-production h3 { font-size: 19px; }
.order-production p { margin: 8px 0 0; overflow-wrap: anywhere; }
.order-production #supplier-test-mode { color: var(--muted); font-size: 13px; }
.order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }

/* AI try-on sheet */
.tryon > summary { display: none; }
.tryon-content { display: grid; gap: 12px; }
.tryon-help { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tryon-artwork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tryon-artwork > p { grid-column: 1 / -1; margin: 0; }
.tryon-artwork figure { min-width: 0; margin: 0; padding: 8px; background: var(--paper); border-radius: 14px; }
.tryon-artwork img { display: block; width: 100%; height: 88px; object-fit: contain; border-radius: 8px; }
.tryon-artwork figcaption { margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tryon-photo-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.tryon-upload { position: relative; display: flex; min-height: 50px; align-items: center; gap: 8px; padding: 10px 14px; overflow: hidden; background: var(--paper); border: 2px dashed #c9bfc8; border-radius: 16px; cursor: pointer; font-weight: 800; }
.tryon-upload svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tryon-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tryon-photo-controls > button { min-height: 50px; }
.tryon-person { display: flex; gap: 14px; align-items: center; }
.tryon-person img { width: 64px; height: 84px; object-fit: cover; border: 2px solid var(--ink); border-radius: 12px; }
.tryon-person button { min-height: 44px; padding: 0; color: var(--blue); background: none; border: none; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tryon-camera-panel { padding: 8px; background: var(--paper); border-radius: 16px; }
.tryon-camera-panel video { display: block; width: 100%; max-height: 52dvh; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 12px; background: var(--ink); }
.tryon-camera-panel video.is-mirrored { transform: scaleX(-1); }
.tryon-camera-actions { display: flex; gap: 8px; margin-top: 8px; }
.tryon-camera-actions button { flex: 1; }
.tryon-consent label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; }
.tryon-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); }
.tryon-consent .tryon-help { margin-top: 6px; font-size: 12px; }
.tryon-generate-row { display: flex; gap: 8px; }
.tryon-generate-row .button { flex: 1; min-width: 0; }
#tryon-preset { min-height: 50px; padding: 0 10px; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 14px; font-weight: 700; }
#tryon-status { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
#tryon-status:empty { display: none; }
.tryon-results { display: grid; gap: 12px; }
.tryon-hero { margin: 0; }
.tryon-hero img { display: block; width: 100%; max-height: 64dvh; object-fit: contain; background: #e4e6dc; border-radius: 18px; }
.tryon-hero figcaption { margin-top: 8px; font-size: 14px; font-weight: 700; }

/* Hero */
.hero { position: relative; display: grid; padding: 20px max(18px, env(safe-area-inset-left)) 0; overflow: hidden; }
.hero h1 { font-size: clamp(40px, 11.6vw, 80px); line-height: .96; letter-spacing: -.035em; }
.hero h1 span { display: block; }
.hero h1 em { display: block; color: var(--coral); font-style: normal; text-shadow: 3px 3px 0 var(--ink); }
/* Thai stacks vowels and tone marks above and below the line. */
html[lang="th"] .hero h1 { line-height: 1.28; letter-spacing: 0; }
/* The picture tells the story: a pet photo becomes a print on the shirt (and the tote). */
.hero-art { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1.02; margin: 18px auto 0; }
.hero-blob { position: absolute; inset: 10% 2% 6% 14%; background: var(--sky); border: 2px solid var(--ink); border-radius: 48% 52% 46% 54% / 54% 44% 56% 46%; box-shadow: 6px 6px 0 var(--ink); }
.hero-shot { position: absolute; height: auto; filter: drop-shadow(0 14px 18px rgb(43 32 55 / 22%)); transform: rotate(var(--tilt)); animation: float 6s ease-in-out var(--float) infinite; }
/* The shirt's back (the whole photo) behind its front (the chest logo), and the tote in front of both. */
.hero-shot-back { --tilt: 5deg; --at: 90ms; --float: -1.5s; top: 0; right: -3%; z-index: 1; width: 58%; }
.hero-shot-tee { --tilt: -3deg; --at: 200ms; --float: 0s; top: 24%; left: 17%; z-index: 2; width: 58%; }
.hero-shot-tote { --tilt: 8deg; --at: 310ms; --float: -3s; right: -5%; bottom: -3%; z-index: 3; width: 40%; }
/* The customer's photo: a taped-on print with an even white border, no caption. */
.hero-photo { position: absolute; top: 2%; left: 0; z-index: 4; width: 36%; margin: 0; padding: 6px; background: var(--white); border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-sm); --tilt: -8deg; transform: rotate(var(--tilt)); }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #f3e6d8; border-radius: 3px; }
.hero-photo::before { position: absolute; top: -10px; left: 50%; width: 46px; height: 18px; content: ""; background: rgb(255 215 90 / 85%); border: 1.5px solid rgb(43 32 55 / 25%); transform: translateX(-50%) rotate(4deg); }
/* From the photo to its print on the chest: a dotted coral arrow, short of both, drawn in once (a mask
   uncovers the dots), then its head. Units are % of the art's width. */
.hero-arrow { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* The dots are circles spaced evenly along the curve (a dashed stroke drops its last dot in Safari),
   the last one a clear step short of the head. On phones, where the arrow crosses the blob's outline, a
   thin white ring lets the dots cross it cleanly (and vanishes on the white shirt). */
.hero-arrow-dots { fill: var(--coral); }
.hero-arrow-phone .hero-arrow-dots { stroke: var(--white); stroke-width: .6; paint-order: stroke; }
.hero-arrow-reveal { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; }
.hero-arrow-head { fill: var(--coral); stroke: var(--coral); stroke-width: .5; stroke-linejoin: round; }
@keyframes arrow-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes arrow-head { from { opacity: 0; } }
/* Hero entrance: the art waits for its pictures (navigation.js adds .is-ready once they are decoded),
   then settles in as one: the blob swells in, the back, the shirt and the tote rise in turn, the photo
   drops onto its tape, the price pops, and the arrow draws itself from the photo to the print. Each
   piece keeps its own tilt (--tilt) and its gentle float. */
.hero-waits .hero-art:not(.is-ready) > * { opacity: 0; }
.hero-art.is-ready .hero-blob { animation: hero-swell 820ms var(--out) both; }
.hero-art.is-ready .hero-shot { animation: hero-rise 860ms var(--out) var(--at) both, float 6s ease-in-out var(--float) infinite; }
.hero-art.is-ready .hero-photo { animation: hero-drop 760ms var(--out) 430ms both; }
.hero-art.is-ready .hero-price { animation: hero-pop 620ms var(--spring) 640ms both; }
.hero-art.is-ready .hero-arrow-reveal { animation: arrow-draw 720ms var(--ease) 900ms both; }
.hero-art.is-ready .hero-arrow-head { animation: arrow-head 240ms var(--out) 1500ms both; }
@keyframes hero-swell { from { opacity: 0; transform: scale(.86); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px) rotate(var(--tilt)) scale(.95); } }
@keyframes hero-drop { from { opacity: 0; transform: translateY(-20px) rotate(calc(var(--tilt) - 7deg)) scale(1.05); } }
@keyframes hero-pop { from { opacity: 0; transform: rotate(calc(var(--tilt) - 24deg)) scale(.5); } }
/* Phones: the art mirrored, so the headline sits top left and the photo top right beside its short
   second line; the eye runs headline, photo, arrow, print. The price badge reads the right way round,
   and the front shirt is turned back so its chest print stays on the wearer's left (the right as you
   look at it), where chest prints go. Wider screens keep the art beside the headline as it was. */
@media (max-width: 719px) {
  .hero-art { scale: -1 1; }
  .hero-price, .hero-shot-tee { scale: -1 1; }
  .hero-photo { top: -3%; width: 33%; }
  .hero-arrow-wide { display: none; }
}
@media (min-width: 720px) { .hero-arrow-phone { display: none; } }
.hero-price { position: absolute; bottom: 9%; left: 4%; z-index: 4; display: grid; width: 86px; height: 86px; place-content: center; text-align: center; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm); --tilt: -10deg; transform: rotate(var(--tilt)); }
.hero-price small { font-size: 12px; font-weight: 800; line-height: 1; }
.hero-price strong { font-family: var(--display); font-size: 25px; line-height: 1.05; }
.hero-actions { display: grid; gap: 12px; margin-top: 16px; }
.hero-cta { min-height: 58px; width: 100%; padding-inline: 26px; font-family: var(--display); font-size: 19px; }
.hero-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0; padding: 0; color: var(--muted); font-size: 13px; font-weight: 800; list-style: none; }
.hero-ticks li::before { content: "✓ "; color: var(--coral); }
@keyframes float { 50% { translate: 0 -8px; } }

/* Page sections */
.section { padding: 0 max(18px, env(safe-area-inset-left)); }
.section > h2 { margin-bottom: 24px; font-size: clamp(30px, 8.5vw, 46px); line-height: 1.05; letter-spacing: -.03em; }
/* How it works: three illustrations; tapping one explains it. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.step-card { position: relative; display: grid; width: 100%; justify-items: center; gap: 4px; padding: 0 0 4px; color: var(--ink); background: none; border: 0; border-radius: 20px; text-align: center; transition: transform 260ms var(--spring); }
.step-card:active { transform: scale(.95); }
.step-art { display: block; width: 100%; height: auto; overflow: visible; transition: transform 390ms var(--spring); }
.step-card[aria-expanded="true"] .step-art { transform: translateY(-4px) rotate(-3deg); }
.step-number { position: absolute; top: 0; left: 2px; display: grid; width: 26px; height: 26px; place-items: center; color: var(--white); background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--display); font-size: 14px; font-weight: 800; }
.step-name { font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.2; text-decoration: underline dotted 2px; text-decoration-color: rgb(43 32 55 / 35%); text-underline-offset: 4px; }
.step-card[aria-expanded="true"] .step-name { text-decoration-color: var(--coral); }
.step-art .art-line { stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.step-art .art-line-thin { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.step-art .art-shadow, .step-art .art-ink { fill: var(--ink); }
.step-art .art-white { fill: var(--white); }
.step-art .art-lilac { fill: var(--lilac); }
.step-art .art-yellow { fill: var(--yellow); }
.step-art .art-mint { fill: var(--mint); }
.step-art .art-pink { fill: var(--pink); }
.step-art .art-coral { fill: var(--coral); }
.step-art .art-sky { fill: var(--sky); }
.step-art .art-yellow-soft { fill: #fff1c2; }
.step-art .art-mint-soft { fill: var(--mint); }
.step-art .art-box-top { fill: #ffe9a3; }
.step-art .art-box-side { fill: #f0bf3c; }
.step-art .art-star { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.step-art .art-frame { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 5 4; }
.step-art .art-handle { fill: var(--white); stroke: var(--blue); stroke-width: 2.5; }
.step-art .art-arrow, .step-art .art-motion { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.step-art .art-arrow { stroke: var(--coral); }
.step-art .art-motion { stroke: var(--ink); stroke-width: 3.5; }
.step-art .art-tape { fill: none; stroke: var(--coral); stroke-width: 7; }
.products > h2 { margin-bottom: 10px; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.product-rail { display: grid; grid-auto-columns: 168px; grid-auto-flow: column; gap: 8px; margin: 0 calc(-1 * max(18px, env(safe-area-inset-left))); padding: 4px max(18px, env(safe-area-inset-left)) 7px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(18px, env(safe-area-inset-left)); scrollbar-width: none; }
.product-rail::-webkit-scrollbar { display: none; }
.rail-item { scroll-snap-align: start; }
.rail-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: 1fr auto auto; align-content: center; align-items: center; column-gap: 6px; row-gap: 2px; min-width: 0; min-height: 94px; padding: 6px; color: var(--ink); background: var(--sky); border: 2px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-sm); text-align: left; transition: transform 260ms var(--spring); }
.rail-card[data-product="tote"] { --tile: #a9e4c9; background: var(--mint); }
.rail-card:active { transform: scale(.97); }
/* The chosen card is one coral piece: its border runs on into its drop shadow. */
.rail-card[aria-pressed="true"] { border-color: var(--coral); box-shadow: 2px 2px 0 var(--coral), 0 0 0 1px var(--coral), 2px 2px 0 1px var(--coral); }
.rail-art { display: block; grid-row: 1 / 4; padding: 4px; background: var(--tile); border-radius: 12px; }
.rail-card img { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: contain; filter: drop-shadow(0 5px 6px rgb(43 32 55 / 24%)); }
.rail-card strong { overflow: hidden; font-family: var(--display); font-size: 13px; line-height: 1.2; }
.rail-card b { color: var(--muted); font-size: 12px; line-height: 1.2; }
.rail-card .card-colors { justify-content: flex-start; margin: 0; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.features li { padding: 16px 14px; background: var(--white); border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow-sm); }
.features li:nth-child(2) { background: var(--lilac); }
.features li:nth-child(3) { background: var(--yellow); }
.features li:nth-child(4) { background: var(--pink); }
.feature-icon { display: block; margin-bottom: 8px; font-size: 28px; }
.features h3 { font-size: 17px; }
.features p { margin: 4px 0 0; color: var(--ink); font-size: 14px; opacity: .78; }
.faq details { border-bottom: 2px solid var(--soft-line); }
.faq summary { position: relative; display: flex; min-height: 56px; align-items: center; padding: 14px 36px 14px 0; cursor: pointer; font-size: 17px; font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; top: 50%; right: 8px; width: 10px; height: 10px; margin-top: -7px; content: ""; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform 290ms var(--spring); }
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq details p { margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.footer { display: grid; gap: 10px; justify-items: start; margin-top: var(--space); padding: 32px max(18px, env(safe-area-inset-left)) calc(32px + env(safe-area-inset-bottom)); color: var(--white); background: var(--ink); border-radius: 32px 32px 0 0; }
.footer .brand { color: var(--white); }
.footer p { margin: 0; opacity: .75; }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--white); font-weight: 700; }
.storefront-page:has(#order-status:not([hidden])) :is(.hero, .section, .studio) { display: none; }

/* Larger screens: the same page, wider */
@media (min-width: 720px) {
  :root { --topbar: 72px; --space: 104px; }
  .topbar { --squeeze-by: 18px; padding-inline: max(24px, calc((100% - 1120px) / 2)); }
  .topbar-nav { display: flex; gap: 4px; }
  .topbar-nav a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; color: var(--ink); border-radius: 999px; font-weight: 800; text-decoration: none; }
  .topbar-nav a:hover { background: var(--mint); }
  .hero { grid-template: "copy art" auto "actions art" 1fr / minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0 48px; width: min(100% - 48px, 1120px); margin-inline: auto; padding: 56px 0 0; }
  .hero-copy { grid-area: copy; align-self: end; }
  .hero-art { grid-area: art; max-width: 520px; margin: 0; }
  .hero-actions { grid-area: actions; justify-items: start; margin-top: 28px; }
  .hero-cta { width: auto; }
  .hero-ticks { justify-content: start; }
  .studio { width: min(100% - 48px, 760px); margin-inline: auto; }
  .section, .footer { width: min(100% - 48px, 1120px); margin-inline: auto; padding-inline: 0; }
  .steps { gap: 48px; max-width: 900px; margin-inline: auto; }
  .step-name { font-size: 20px; }
  .product-rail { grid-auto-columns: minmax(132px, 1fr); margin: 0; padding-inline: 0; }
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .faq { max-width: 760px; }
  .footer { grid-template-columns: auto 1fr auto; align-items: center; border-radius: 32px 32px 0 0; padding: 32px 40px; }
  .product-stage { margin: 0; border-radius: 32px; }
  .action-bar, .studio-extras { width: min(100%, 560px); margin-inline: auto; }
  .action-bar { padding-inline: 0; }
  .sheet { bottom: 24px; border-bottom: 2px solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink), 0 20px 50px rgb(43 32 55 / 22%); }
}

/* Motion: short, quiet and out of the way. Things fade and settle in from where they come from, and
   fade back out; presses and selections ease rather than snap; changed values tick once. All of it
   stops for viewers who prefer reduced motion (below). Browsers without @starting-style simply show. */
@supports (transition-timing-function: linear(0, 1)) { :root { --spring: linear(0, 0.02, 0.071, 0.143, 0.229, 0.322, 0.415, 0.507, 0.593, 0.672, 0.742, 0.805, 0.858, 0.903, 0.939, 0.969, 0.992, 1.009, 1.022, 1.03, 1.035, 1.038, 1.038, 1.037, 1.035, 1.032, 1.029, 1.025, 1.021, 1.018, 1.015, 1.012, 1.009, 1.007, 1.005, 1.003, 1); } }
.photo-menu, .color-swatches, .place-menu, .toast, .hint, .cutout-chip, .crop-bar, .tool-stack, .tryon-entry {
  animation: none;
  transition-property: opacity, transform, display;
  transition-duration: 230ms, 390ms, 390ms;
  transition-timing-function: var(--ease), var(--out), linear;
  transition-behavior: allow-discrete;
}
.photo-menu[hidden], .place-menu[hidden] { opacity: 0; transform: scale(.92); }
.color-swatches[hidden] { opacity: 0; transform: translateY(8px) scale(.94); }
.toast[hidden] { opacity: 0; transform: translate(-50%, -6px); }
.hint[hidden], .cutout-chip[hidden] { opacity: 0; transform: translate(-50%, 8px); }
.crop-bar[hidden] { opacity: 0; transform: translateY(10px); }
.tool-stack[hidden] { opacity: 0; transform: translateX(8px); }
.tryon-entry[hidden] { opacity: 0; transform: scale(.96); }
@starting-style {
  .photo-menu, .place-menu { opacity: 0; transform: scale(.92); }
  .color-swatches { opacity: 0; transform: translateY(8px) scale(.94); }
  .toast { opacity: 0; transform: translate(-50%, -6px); }
  .hint, .cutout-chip { opacity: 0; transform: translate(-50%, 8px); }
  .crop-bar { opacity: 0; transform: translateY(10px); }
  .tool-stack { opacity: 0; transform: translateX(8px); }
  .tryon-entry { opacity: 0; transform: scale(.96); }
}
.mockup-loupe:not([hidden]) { animation: loupe-in 260ms var(--out); }
@keyframes loupe-in { from { opacity: 0; transform: scale(.86); } }

/* Presses and selections ease. */
:is(.rail-card, .size-grid button, .zoom-control button, .place-menu button, .info-button, .chip, .step-card, .features li) { transition: transform 290ms var(--out), background-color 260ms var(--ease), border-color 260ms var(--ease), box-shadow 290ms var(--ease), color 260ms var(--ease); }
.tool-button, .round-button, .language-toggle, .size-chip, .button { transition: transform 210ms var(--ease), box-shadow 210ms var(--ease), background-color 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease), opacity 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .rail-card:hover { transform: translateY(-2px); }
  .features li:hover { transform: translateY(-3px); }
  .tool-button:not(:disabled):not(.add-layer):hover, .zoom-control button:not(:disabled):hover { background-color: var(--lilac); }
  .tool-button[aria-pressed="true"]:hover, .tool-button[aria-expanded="true"]:hover { background-color: var(--blue); }
}

/* The units switch slides its highlight across. */
.unit-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; }
.unit-toggle::before { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); content: ""; background: var(--ink); border-radius: 999px; transition: transform 390ms var(--out); }
.unit-toggle[data-active="in"]::before { transform: translateX(100%); }
.unit-toggle button { position: relative; z-index: 1; }
.unit-toggle button[aria-pressed="true"] { background: none; }

/* Changed values tick; the turn, undo and redo icons say what they did. */
.is-ticking { animation: tick 470ms var(--out); }
@keyframes tick { 35% { transform: scale(1.08); } }
.color-dot.is-changing { animation: dot 490ms var(--spring); }
@keyframes dot { from { transform: scale(.6); } }
.flip-button.is-turning svg { animation: turn-icon 600ms var(--out); }
@keyframes turn-icon { from { transform: rotate(-180deg); } }
#undo-button.is-nudging svg { animation: nudge-back 440ms var(--out); }
#redo-button.is-nudging svg { animation: nudge-on 440ms var(--out); }
@keyframes nudge-back { 40% { transform: translateX(-3px) rotate(-14deg); } }
@keyframes nudge-on { 40% { transform: translateX(3px) rotate(14deg); } }

/* The top bar lifts once the page scrolls under it. */
.topbar::before { transition: box-shadow 340ms var(--ease), background-color 340ms var(--ease); }
.topbar.is-raised::before { box-shadow: 0 1px 0 rgb(43 32 55 / 8%), 0 10px 24px -16px rgb(43 32 55 / 45%); }

/* The hero settles in once; sections below rise into view as they are reached. */
.hero h1 > span, .hero h1 > em { animation: rise-in 910ms var(--out) both; }
.hero h1 > em { animation-delay: 100ms; }
.hero-actions { animation: rise-in 910ms var(--out) 310ms both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }
.can-reveal :is(.section > h2, .steps > li, .features > li, .faq details, #product-rail) { opacity: 0; transform: translateY(14px); transition: opacity 680ms var(--ease) calc(var(--i, 0) * 90ms), transform 830ms var(--out) calc(var(--i, 0) * 90ms); }
.can-reveal .is-revealed:is(.section > h2, .steps > li, .features > li, .faq details, #product-rail) { opacity: 1; transform: none; }
.faq details[open] p { animation: open-in 420ms var(--out); }
@keyframes open-in { from { opacity: 0; transform: translateY(-4px); } }

/* Sheets dim the page in, as they dim it out. */
.sheet[open]::backdrop { animation: backdrop-in 340ms var(--ease); }
@keyframes backdrop-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation: none !important; }
}

/* Fixed pet-art presets reuse the native studio sheet. */
/* Under the studio: pet art, and try-on once there is a photo. */
.studio-extras { display: flex; flex: none; gap: 10px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
@media (min-width: 720px) { .studio-extras { padding-inline: 0; } }
.studio-extras .button { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 6px 12px; font-size: 14px; line-height: 1.2; }
.tryon-entry { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--blue); background: var(--lilac); animation: pop 380ms var(--spring); }
.tryon-entry[hidden] { display: none; }
.tryon-entry svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pet-art-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; }
.pet-art-presets legend { margin-bottom: 8px; font-weight: 800; }
.pet-art-presets label { display: grid; gap: 4px; padding: 10px 8px; background: var(--paper); border: 2px solid var(--soft-line); border-radius: 14px; cursor: pointer; }
.pet-art-presets label:has(:checked) { background: var(--lilac); border-color: var(--blue); }
.pet-art-presets input { accent-color: var(--blue); }
.pet-art-presets span { color: var(--muted); font-size: 12px; }
.pet-art-source { display: flex; align-items: center; gap: 12px; }
.pet-art-source img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: var(--paper); }
.pet-art-result { display: grid; gap: 12px; }
.pet-art-result img { width: 100%; max-height: 45dvh; object-fit: contain; background: var(--paper); border-radius: 14px; }
.pet-art-sample { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px 12px; text-align: left; color: var(--ink); background: var(--paper); border: 2px solid var(--soft-line); border-radius: 14px; font-weight: 700; }
.pet-art-sample img { object-fit: contain; background: var(--paper); }
/* The design agent: its photo, its four steps as it works, then the designs it laid out. */
#pet-art-sheet .tryon-content { display: grid; gap: 12px; }
.agent-source-row { display: flex; align-items: center; gap: 12px; }
.agent-source-row .tryon-upload { flex: 1; }
.agent-source { width: 56px; height: 56px; flex: none; object-fit: cover; background: var(--paper); border: 2px solid var(--soft-line); border-radius: 14px; }
.agent-steps { display: grid; gap: 8px; margin: 0; padding: 12px 14px; list-style: none; background: var(--paper); border-radius: 16px; }
.agent-steps li { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; transition: color 300ms var(--ease); }
.agent-steps li strong { font-weight: 700; }
.agent-steps li[data-state="working"], .agent-steps li[data-state="done"] { color: var(--ink); }
.agent-detail { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; color: var(--muted); font-size: 12px; text-align: right; }
.agent-mark { position: relative; width: 18px; height: 18px; border: 2px solid var(--soft-line); border-radius: 50%; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
.agent-steps li[data-state="working"] .agent-mark { border-color: var(--blue); border-right-color: transparent; animation: agent-spin 900ms linear infinite; }
.agent-steps li[data-state="done"] .agent-mark { background: var(--blue); border-color: var(--blue); }
.agent-steps li[data-state="done"] .agent-mark::after { position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; content: ""; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.agent-steps li[data-state="failed"] .agent-mark { background: var(--coral); border-color: var(--coral); }
@keyframes agent-spin { to { transform: rotate(360deg); } }
.agent-swatch { width: 14px; height: 14px; border: 1px solid rgb(43 32 55 / 22%); border-radius: 50%; }
.agent-status { margin: 0; color: var(--blue); font-size: 14px; font-weight: 700; }
.agent-status:empty { display: none; }
.agent-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agent-card { display: grid; gap: 3px; align-content: start; padding: 8px 8px 10px; text-align: left; color: var(--ink); background: var(--paper); border: 2px solid var(--soft-line); border-radius: 18px; animation: agent-in 520ms var(--out) both; transition: transform 260ms var(--out), border-color 260ms var(--ease); }
.agent-card:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .agent-card:hover { border-color: var(--blue); transform: translateY(-2px); } }
@keyframes agent-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.agent-shots { position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: 4px; background: var(--sky); border-radius: 12px; }
.agent-shot { display: block; width: 100%; height: 100%; }
.agent-shot.is-back { position: absolute; right: 4px; bottom: 4px; width: 38%; height: auto; aspect-ratio: 4 / 5; background: rgb(255 255 255 / 70%); border: 1.5px solid var(--white); border-radius: 8px; box-shadow: 0 2px 8px rgb(43 32 55 / 18%); }
.agent-shot.is-back:only-child { position: static; width: 100%; height: 100%; background: none; border: 0; box-shadow: none; }
.agent-card strong { font-size: 14px; line-height: 1.25; }
.agent-why { color: var(--muted); font-size: 12px; line-height: 1.35; }
.agent-price { justify-self: start; margin-top: 4px; padding: 1px 8px; background: var(--yellow); border-radius: 999px; font-size: 12px; font-weight: 800; }
.pet-art-ai { padding: 10px 14px; background: var(--paper); border-radius: 16px; }
.pet-art-ai summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.pet-art-ai summary::-webkit-details-marker { display: none; }
.pet-art-ai summary::after { width: 8px; height: 8px; flex: none; content: ""; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform 260ms var(--out); }
.pet-art-ai[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.pet-art-ai[open] { display: grid; gap: 12px; }

.step-sheet p { color: var(--muted); font-size: 16px; }

/* The account: a person in the top bar (their face once signed in), a keep button in the studio's
   tools, and a sheet with the ways to sign in, saved designs and orders with where they are. */
.account-button { position: relative; }
.account-button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Signed in, the button turns coral and shows their Google picture or the first letter of their name
   or email (a passkey alone keeps the person). */
.account-button { overflow: hidden; }
.account-button[data-signed-in="true"] { background: var(--coral); animation: pop 460ms var(--spring); }
.account-badge { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); background: var(--coral); border-radius: 50%; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1; }
.account-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.account-button:has(.account-badge:not([hidden])) > svg { visibility: hidden; }
/* Keep: a bookmark at the head of the studio's tools once there is a photo; filled while this design is saved. */
.keep-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: fill 260ms var(--ease); }
.tool-button.keep-button[aria-pressed="true"] { color: var(--ink); background: var(--coral); }
.keep-button[aria-pressed="true"] svg { fill: currentColor; }
.keep-button.is-keeping svg { animation: keep-pop 520ms var(--spring); }
@keyframes keep-pop { 40% { transform: scale(1.25) translateY(-1px); } }
.account-sheet .account-out, .account-sheet .account-in { display: grid; gap: 12px; }
.account-sheet [hidden] { display: none; }
.account-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.account-sheet .button { width: 100%; }
.account-google svg, .account-key { width: 22px; height: 22px; flex: none; }
.account-key { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Signed out: what an account is for, on a mint card under the cat, then the ways in. */
.account-hello { position: relative; display: grid; gap: 10px; margin: 2px 0 6px; padding: 16px 16px 16px 18px; background: var(--mint); border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); }
.account-hello-cat { position: absolute; top: -14px; right: 14px; width: 54px; height: 58px; transform: rotate(8deg); }
.account-hello-cat .brand-mark-cat { fill: var(--coral); stroke: var(--ink); stroke-width: 2.5; }
.account-hello-cat .brand-mark-shadow { fill: var(--ink); }
.account-hello-cat circle { fill: var(--ink); }
.account-hello-title { max-width: calc(100% - 64px); margin: 0; font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.2; }
.account-perks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.account-perks li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.account-perks svg { width: 30px; height: 30px; flex: none; padding: 6px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; background: var(--white); border-radius: 50%; }
.account-passkeys { display: grid; gap: 4px; }
.account-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.account-switch .text-button { font-size: 14px; }
.account-what { margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.account-what summary { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; list-style: none; }
.account-what summary::-webkit-details-marker { display: none; }
.account-what summary::after { width: 7px; height: 7px; margin-top: -3px; content: ""; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 260ms var(--ease); }
.account-what[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.account-what p { margin: 4px 0 0; padding: 10px 12px; text-align: left; background: var(--paper); border-radius: 14px; }
.account-or { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.account-or::before, .account-or::after { flex: 1; height: 1.5px; content: ""; background: var(--soft-line); }
.account-email-row { display: flex; gap: 8px; }
.account-email-row input, .account-code-input { flex: 1; min-width: 0; min-height: 50px; padding: 0 14px; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 16px; font: inherit; font-size: 16px; }
.account-sheet .account-email-row .button { width: auto; flex: none; padding-inline: 16px; }
.account-code { display: grid; gap: 10px; animation: agent-in 420ms var(--out) both; }
.account-code-input { font-size: 24px; font-weight: 800; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.account-code-links { display: flex; justify-content: space-between; gap: 12px; }
/* Signed in: who, on a card with their face; saved designs; orders; quiet ways out at the end. */
.account-profile { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); }
.account-avatar { display: grid; width: 52px; height: 52px; flex: none; place-items: center; overflow: hidden; color: var(--ink); background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-avatar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.account-profile-text { display: grid; min-width: 0; flex: 1; gap: 2px; margin: 0; }
.account-profile-text strong { display: -webkit-box; overflow: hidden; font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.account-profile-text span { overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-signout { display: inline-flex; min-height: 40px; flex: none; align-items: center; gap: 6px; padding: 0 12px; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; }
.account-signout svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.account-signout:not(:disabled):active { transform: scale(.96); }
.account-section { display: grid; gap: 10px; margin-top: 8px; }
.account-section h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.account-count { display: inline-grid; min-width: 24px; height: 24px; place-items: center; padding: 0 7px; color: var(--ink); background: var(--yellow); border-radius: 999px; font-family: var(--text); font-size: 13px; font-weight: 800; }
.account-empty { display: grid; justify-items: center; gap: 8px; padding: 18px 16px; color: var(--muted); text-align: center; background: var(--paper); border: 2px dashed var(--soft-line); border-radius: 18px; }
.account-empty svg { width: 38px; height: 38px; padding: 8px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--lilac); border-radius: 50%; }
.account-empty p { max-width: 30ch; margin: 0; font-size: 14px; line-height: 1.5; }
.account-sheet .account-start { width: auto; min-height: 42px; margin-top: 4px; padding-inline: 18px; font-size: 15px; }
.account-designs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-add { display: grid; min-height: 150px; align-content: center; justify-items: center; gap: 8px; padding: 12px; color: var(--blue); background: var(--lilac); border: 2px dashed var(--blue); border-radius: 16px; font: inherit; font-size: 14px; font-weight: 800; line-height: 1.3; transition: transform 260ms var(--out), background-color 260ms var(--ease); }
.account-add svg { width: 34px; height: 34px; padding: 7px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; background: var(--white); border-radius: 50%; }
.account-add:not(:disabled):active { transform: scale(.97); }
.account-add:disabled { opacity: .55; }
.account-design { position: relative; animation: agent-in 520ms var(--out) both; }
.account-design-open { display: grid; width: 100%; gap: 2px; padding: 6px 6px 10px; text-align: left; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); transition: transform 260ms var(--out), box-shadow 260ms var(--ease); }
.account-design-open:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.account-design-open img { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 4px; object-fit: cover; background: var(--sky); border-radius: 11px; }
.account-design-open strong { overflow: hidden; padding-inline: 2px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-design-open span { padding-inline: 2px; color: var(--muted); font-size: 12px; }
.account-design-remove { position: absolute; top: 10px; right: 10px; display: grid; width: 32px; height: 32px; place-items: center; padding: 0; color: var(--red); background: rgb(255 255 255 / 92%); border: 0; border-radius: 50%; box-shadow: 0 1px 4px rgb(43 32 55 / 20%); }
.account-design-remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.account-fine { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.account-sheet .account-delete { justify-self: center; min-height: 40px; color: var(--red); font-size: 14px; }
.account-confirm { display: grid; gap: 12px; padding: 14px; background: #fff0ee; border: 2px solid var(--red); border-radius: 18px; animation: agent-in 420ms var(--out) both; }
.account-confirm p { margin: 0; font-size: 14px; line-height: 1.5; }
.account-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-orders { display: grid; gap: 10px; }
.account-order { display: grid; gap: 10px; padding: 12px 14px; background: var(--paper); border-radius: 16px; }
.account-order-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.account-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; }
.account-steps li { position: relative; padding-top: 12px; color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; }
.account-steps li::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; content: ""; background: var(--soft-line); border-radius: 99px; }
.account-steps li[data-state="done"]::before, .account-steps li[data-state="now"]::before { background: var(--coral); }
.account-steps li[data-state="now"] { color: var(--ink); }
.account-steps li[data-state="ended"] { color: var(--red); }
.account-tracking { margin: 0; font-size: 13px; font-weight: 700; }

/* Page toast: what just happened, at the top above any sheet (a manual popover in the top layer). */
.page-toast { position: fixed; inset: calc(env(safe-area-inset-top) + 12px) auto auto 50%; z-index: 70; display: flex; width: max-content; max-width: calc(100vw - 32px); align-items: center; gap: 10px; margin: 0; padding: 10px 10px 10px 14px; overflow: visible; color: var(--white); background: var(--ink); border: 0; border-radius: 16px; box-shadow: 0 14px 34px rgb(43 32 55 / 30%); font-size: 15px; font-weight: 700; line-height: 1.3; opacity: 0; pointer-events: none; transform: translate(-50%, -14px) scale(.96); transition: opacity 260ms var(--ease), transform 460ms var(--spring); }
.page-toast.is-shown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.page-toast:not([popover]) { display: flex; }
.page-toast-icon { display: none; width: 24px; height: 24px; flex: none; place-items: center; color: var(--ink); background: var(--coral); border-radius: 50%; }
.page-toast[data-tone="done"] .page-toast-icon { display: grid; }
.page-toast-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.page-toast[data-tone="error"] { background: var(--red); }
.page-toast-action { min-height: 34px; padding: 0 12px; color: var(--ink); background: var(--yellow); border: 0; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; }
.page-toast-action[hidden] { display: none; }
.page-toast:not(:has(.page-toast-action:not([hidden]))) { padding-right: 16px; }
@media (prefers-reduced-motion: reduce) { .page-toast { transition: opacity 200ms linear; transform: translate(-50%, 0); } }

/* The privacy page. */
.legal-page { background: var(--paper); }
.legal { width: min(100% - 32px, 680px); margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 0 calc(48px + env(safe-area-inset-bottom)); color: var(--ink); font-size: 16px; line-height: 1.6; }
.legal h1 { margin: 8px 0 4px; font-family: var(--display); font-size: 32px; }
.legal h2 { margin: 28px 0 6px; font-family: var(--display); font-size: 20px; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal a:not(.text-button) { color: var(--blue); }
.legal-date { color: var(--muted); font-size: 14px; }
.legal hr { margin: 40px 0; border: 0; border-top: 2px solid var(--soft-line); }
.privacy-note a { color: inherit; }