/* V47: one header and one scrolling surface for every journey page. */
html,body{height:100%;overflow:hidden}
body{height:100svh;min-height:0;display:flex;flex-direction:column}
#site-chrome{flex:none;position:relative}
.site-header{height:144px;min-height:144px;padding:0 8px;gap:0}
.brand img{width:120%;height:144px;max-width:none;flex-shrink:0;object-fit:contain}
body.journey-page #journey-slot{margin-top:-30px}
#app{flex:1;min-height:0}
.flow,.flow[data-step="1"]{display:block;height:100%;min-height:0;max-width:480px;padding:0 18px;margin:0 auto}
.flow>.page-content{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;padding:4px 0 max(16px,env(safe-area-inset-bottom));scroll-padding:12px}
.page-content:focus-visible{outline:2px solid #4d89ab;outline-offset:-2px}
.page-content>.journey-caption{margin:0 0 8px;white-space:normal}
.page-content .flow-top{position:static;margin:0 0 10px;min-height:44px}
.page-content .flow-top .text-button{position:static}
.flow[data-step="1"] .flow-top{display:none}
body.page-two .flow>.page-content{padding-bottom:max(4px,env(safe-area-inset-bottom))}
.page-content .question{width:100%}
.page-content .pet-preview{display:block;width:86px;height:86px;margin:0 auto 8px}
.page-content .photo-setup{display:block}
.page-content .photo-setup .upload-photo{height:110px;max-width:100%;object-fit:contain}
.page-content .flow-action{position:static;margin:20px auto 16px;max-width:430px}
.page-content .flow-action>.primary{min-height:56px;font-size:18px}
.page-content .checkout-footer{position:static}
.page-content .reveal-heading:empty{display:none}
.page-content .generation{margin:0 auto}
body.page-two .pet-setup>h1{font-size:28px;line-height:1.1;margin:2px 0 5px}
body.page-two .pet-setup>.sub{font-size:13px;margin-bottom:10px}
body.page-two .pet-setup .type-options{margin-bottom:12px}
body.page-two .pet-setup>.flow-action{position:static;margin:10px auto 14px;width:100%}
body.page-two .pet-setup>.flow-action>.primary{height:56px;min-height:56px;font-size:18px}
body.page-two .page-content>.journey-caption{margin:0 0 8px;white-space:normal}
/* V44: each selected companion starts beside its own little home. */
body.journey-page .journey-home{position:absolute;left:-12px;bottom:6px;width:56px;height:60px;object-fit:contain;pointer-events:none}
body.journey-page .pet-journey:has(.journey-home) .journey-path{left:68px}
body.journey-page .journey-pet:has([data-species="other"]){width:46px;height:46px;bottom:-9px}
body.page-two .type-choice[data-kind="Other"] .pet-portrait{transform:scale(.85);transform-origin:center bottom}
body.page-two .photo-setup .photo-guidance{margin-bottom:0}

/* V46: the front page is one complete composition, without nested scrollers. */
body.front-page .landing{display:flex;flex-direction:column;height:100%;min-height:0;padding:0 18px;overflow:visible}
body.front-page .home-hero{flex:1 1 0;min-height:180px;height:auto;margin:0}
body.front-page .hero-copy{top:4px}
body.front-page .hero-copy h1{font-size:clamp(28px,4.8svh,38px);margin:8px 0}
body.front-page .hero-pets{height:100%;bottom:0}
body.front-page .home-cta{flex:0 0 56px;height:56px;min-height:56px;margin:0;width:100%}
body.front-page .benefits{flex:none;width:100%;margin:10px auto 8px;gap:5px}
body.front-page .benefits>div{gap:4px}
body.front-page .benefits .benefit-icon{width:36px;height:36px}
body.front-page .benefit-icon svg{width:27px;height:27px}
body.front-page .benefits b{font-size:10px;line-height:1.13}
body.front-page .pet-parade{flex:none;width:100%;margin:6px auto 10px;gap:5px}
body.front-page .pet-parade .pet-portrait{height:42px;max-width:48px}
body.front-page .pet-parade b{font-size:8.5px}
body.front-page .welcome-wave{flex:0 0 auto;min-height:78px;margin:0 -18px;padding:8px 25px calc(23px + env(safe-area-inset-bottom));border-radius:50% 50% 0 0 / 18px 18px 0 0}
body.front-page .welcome-message{font-size:16px;line-height:1;margin:3px 0}
body.front-page .welcome-paws{font-size:20px}
body.front-page .site-rights{bottom:calc(6px + env(safe-area-inset-bottom))}
/* On unusually short or enlarged-text displays, retain one document flow. */
@media(max-height:600px){body.front-page{height:auto;min-height:100svh;overflow:visible}html:has(body.front-page){overflow:auto}body.front-page #site-chrome{position:relative}body.front-page .home-hero{flex:none;height:180px}body.front-page #app{flex:none}body.front-page .landing{height:auto}}

/* V57: the document scrolls on journey pages so browser chrome can react to
   normal page scrolling. Home retains its existing single-screen layout. */
html:has(body.journey-page){height:auto;overflow:auto;scroll-padding-top:calc(var(--chrome-height) + 12px)}
body.journey-page{height:auto;min-height:100svh;overflow:visible}
body.journey-page #site-chrome{position:sticky;top:0;z-index:10;background:#fff9ef}
body.journey-page #app{flex:1 0 auto;min-height:0}
body.journey-page .flow{height:auto;min-height:0;padding-bottom:0}
body.journey-page .flow>.page-content{height:auto;min-height:0;overflow:visible;overscroll-behavior-y:auto;padding:4px 0 calc(96px + env(safe-area-inset-bottom))}
body.journey-page .page-content .flow-action{position:static;margin:24px auto 16px;width:min(100%,430px);order:initial}
body.journey-page.page-two .flow[data-step="1"] .photo-setup{display:block}
body.journey-page.page-two .flow[data-step="1"] .photo-setup>.flow-action{order:initial;margin:24px auto 16px}
body.journey-page .page-content .checkout-footer.flow-action{padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
body.journey-page .page-content .flow-action>.primary{min-height:56px}
body.journey-page .page-content :is(input,button,summary,[role="alert"]){scroll-margin-top:calc(var(--chrome-height) + 12px);scroll-margin-bottom:24px}
body.journey-page:has(dialog[open]){overflow:hidden}

/* V58: a little home-to-hug game, within the existing header dimensions. */
.journey-home-pet{position:absolute;left:2px;bottom:18px;width:29px;height:29px;overflow:hidden;border-radius:50% 50% 22% 22%;z-index:2;pointer-events:none}
.journey-home-pet .journey-sprite{width:48px;height:48px;transform:translate(-19px,-2px)}
.journey-home-pet[data-home-pet="rabbit"]{left:5px;bottom:17px;height:33px}
.journey-home-pet[data-home-pet="cat"]{left:0;bottom:17px;width:25px;height:25px}
.journey-home-pet[data-home-pet="bird"]{left:0;bottom:32px;overflow:visible}
.journey-home-pet[data-home-pet="bird"] .journey-sprite{width:32px;height:32px;transform:none}
.journey-home-pet[data-home-pet="reptile"]{left:0;bottom:15px;width:34px;height:27px}
.journey-home-pet[data-home-pet="other"] .journey-sprite{width:38px;height:38px;transform:translate(-10px,1px)}
.pet-journey.at-home .journey-pet{left:-52px!important;opacity:0}
.pet-journey.at-home.is-entering-home .journey-pet{opacity:1}
.pet-journey.is-entering-home .journey-home-pet{animation:home-welcome .85s ease both}
.pet-journey.is-peeking:not(.is-entering-home) .journey-home-pet{animation:home-peek .8s ease both}
.pet-journey.is-leaving-home .journey-actor{animation:home-exit .7s ease both}
.pet-journey.is-reacting .journey-actor{animation:dog-wiggle .6s ease}
.pet-journey.is-reacting:has([data-species="cat"]) .journey-actor{animation:cat-stretch .6s ease}
.pet-journey.is-reacting:has([data-species="rabbit"]) .journey-actor{animation:rabbit-hop .6s ease}
.pet-journey:is(.is-reacting,.is-moving):has([data-species="bird"]) .journey-actor{animation:bird-flutter .6s ease}
.pet-journey.is-reacting:has([data-species="reptile"]) .journey-actor{animation:pet-tilt .6s ease}
.pet-journey.is-reacting:has([data-species="other"]) .journey-actor{animation:tiny-bounce .6s ease}
.pet-journey.is-arriving .journey-friend{transform-origin:center bottom;animation:friend-greet 1.4s ease both!important}
.pet-journey.is-cuddling .journey-hug{animation:gentle-cuddle .7s ease}
@keyframes home-peek{0%{opacity:0;translate:0 7px}45%{opacity:1;translate:0 -2px}100%{opacity:1;translate:0 0}}
@keyframes home-welcome{0%,65%{opacity:0}100%{opacity:1}}
@keyframes home-exit{0%{opacity:.2;scale:.6}35%{opacity:1;scale:.85;translate:0 -3px}100%{opacity:1;scale:1;translate:0 0}}
@keyframes dog-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}65%{transform:rotate(5deg)}}
@keyframes cat-stretch{0%,100%{transform:scale(1)}45%{transform:scale(1.06,.92)}}
@keyframes bird-flutter{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-5deg)}65%{transform:translateY(-2px) rotate(4deg)}}
@keyframes pet-tilt{0%,100%{transform:rotate(0)}45%{transform:rotate(-7deg)}}
@keyframes tiny-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
@keyframes friend-greet{0%{opacity:1;transform:rotate(0)}30%{opacity:1;transform:rotate(-6deg)}48%{opacity:1;transform:rotate(0)}68%,100%{opacity:0}}
@keyframes gentle-cuddle{0%,100%{transform:rotate(0)}35%{transform:rotate(-3deg)}70%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.pet-journey *, .pet-journey *::after{animation:none!important;transition:none!important}}

/* V59: softer travel and matched path-fill timing; no extra header space. */
.pet-journey.is-moving .journey-sprite,.pet-journey.is-moving .journey-sprite[data-species="rabbit"]{animation:pet-walk .85s steps(1) 1}
.pet-journey.is-moving .journey-actor{animation:pet-bob .425s ease-in-out 2}
.pet-journey.is-moving:has([data-species="rabbit"]) .journey-actor{animation:rabbit-hop .425s ease-in-out 2}
.pet-journey.is-moving:has([data-species="bird"]) .journey-actor{animation:bird-flutter .85s ease-in-out 1}
.pet-journey.is-leaving-home .journey-actor{animation:home-exit .85s ease both}
@keyframes home-exit{0%{opacity:0;scale:.7}25%{opacity:1;scale:.9;translate:0 -2px}65%{scale:1;translate:0 0}100%{opacity:1;scale:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.pet-journey *, .pet-journey *::after{animation:none!important;transition:none!important}}

/* V60: modest additions to the existing mobile composition. */
.transformation{display:grid;grid-template-columns:1fr 15px 1fr 15px 1fr;align-items:center;gap:3px;flex:none;margin:5px 0 0}
.transformation figure{margin:0;min-width:0;text-align:center}.transformation figure>img{width:100%;height:64px;object-fit:contain;border-radius:10px;background:#fffdf8}
.transformation figcaption{font-size:11px;font-weight:900;margin-top:3px}.transformation>span{color:var(--orange);font-weight:900}
.example-shirt{height:64px;width:100%;background:#fff;border:1px solid #e8ddce;clip-path:polygon(25% 0,38% 4%,62% 4%,75% 0,100% 19%,84% 41%,75% 32%,75% 100%,25% 100%,25% 32%,16% 41%,0 19%);display:grid;place-items:center}
.example-shirt img{height:43px;width:50%;object-fit:contain}.transformation-note{font-size:12px;font-weight:800;margin:5px 0 8px;flex:none}
.journey-stages{display:flex;justify-content:space-between;gap:4px;font-size:10px;font-weight:900;padding:2px 0 3px;color:#7c7165}
.journey-stages .current{color:#d94a0d;border-bottom:2px solid var(--orange)}.journey-stages .complete{color:#905027}
.photo-privacy{font-size:12px;color:#71685e;margin:0 0 8px}.quantity-control{display:flex;align-items:center;gap:20px}.quantity-control button{min-height:44px;min-width:44px;border:1px solid #e5ddcf;background:#fff;border-radius:12px;font-size:23px}.quantity-control output{font-size:20px;font-weight:900}
.skip-extras{margin:10px 0;width:100%;min-height:44px}.generation{padding-top:8px}.generation h1{font-size:clamp(30px,8vw,38px);color:#d94a0d}
.generation .rolling-track{--toy-step:0;height:54px;position:relative;margin:14px 14px 10px;background:linear-gradient(#e5ddcf,#e5ddcf) center 37px / 100% 3px no-repeat}
.generation .ball-lane{display:block;position:relative;width:100%;height:54px}.generation .ball-traveler{position:absolute;left:calc(var(--toy-step)*100%);top:0;animation:none;transform:translateX(-50%);transition:left .7s ease;width:38px;height:48px}
.generation .rolling{display:block;font-size:30px;animation:wait-bounce 1.1s ease-in-out infinite}.generation .ball-shadow{position:absolute;bottom:5px;left:8px;width:22px;height:4px;border-radius:50%;background:#6e492e22}
.stage-list .active{color:#d94a0d}.wait-reaction{font:20px/1.2 var(--heading);min-height:48px}.wait-video{width:100%;height:160px;object-fit:cover;border-radius:18px}.generation #wait-entertainment{min-height:160px;position:relative}.generation .gen-pet{width:100%;height:160px;object-fit:contain;margin:0}.wait-video{position:absolute;inset:0}
.reveal{animation:soft-reveal .35s ease-out}
@keyframes wait-bounce{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-5px) rotate(8deg)}}
@keyframes soft-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.generation .rolling,.reveal{animation:none}.generation .ball-traveler{transition:none}}

/* V66: preserve the original slogan footprint; change only its lettering. */
.good-pets .slogan-footprint{visibility:hidden}
.good-pets .slogan-lettering{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.good-pets .slogan-lettering text{font-family:var(--heading);font-size:27px;fill:currentColor}
.good-pets .slogan-lettering path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* V69: give the larger pet artwork the room freed by the story strip. */
body.front-page .home-hero{flex:1 1 0;height:auto;min-height:280px}
body.front-page .hero-pets{width:82%;right:4%;bottom:10px;height:100%;object-position:center bottom}
body.front-page .good-pets{font-size:18px;bottom:25px;right:0}
body.front-page .home-cta{margin-top:6px}
body.front-page .welcome-wave{margin-top:8px}
@media(max-height:700px){body.front-page .home-hero{min-height:235px}body.front-page .hero-copy h1{font-size:30px}body.front-page .hero-pets{width:74%;right:12%;height:100%}body.front-page .good-pets{font-size:15px}}
@media(max-height:600px){body.front-page .home-hero{flex:none;height:260px;min-height:260px}}

body.front-page .hero-copy h1{font-size:clamp(28px,3.8svh,32px)}
body.front-page .hero-copy .brush{width:160px}

/* V71: paws mark the shared journey; companions remain selectable. */
.journey-path::after{background:none}

/* V72: the starting paws stay left as the selected companion leads the way. */
body.journey-page .journey-path{left:88px}
.journey-start-paws{position:absolute;left:-5px;bottom:10px;width:58px;height:58px;pointer-events:none}

/* V73: a continuous baseline from the large paws to the waiting friend. */
body.journey-page .journey-path{right:54px}
body.journey-page .journey-path::before{content:'';position:absolute;left:-48px;right:0;top:0;height:100%;background:#e4d6c3;border-radius:4px}
.journey-fill{z-index:1}

/* V75: a realistic golden puppy matches the other photographic pet choices. */
body.page-two .type-choice[data-kind="Dog"] .pet-portrait{background-image:url('assets/golden-puppy-v75.webp');background-size:cover;background-position:center;background-color:#fda2ae}

/* V76: the homepage dog portrait matches the Page 2 golden puppy. */
body.front-page .pet-parade .pet-portrait[data-pet="dog"]{background-image:url('assets/golden-puppy-v75.webp');background-size:cover;background-position:center}

/* V77: hearts emerge from the hug on art-style selection and each next page. */
.journey-scene .reveal-hearts{right:-8px;top:auto;bottom:18px;width:82px;height:38px;z-index:3}

/* V79: a rolling toy, grounded shadow, and real stage milestones. */
.generation .rolling-track{height:76px;margin:14px 18px 12px;background:none;--wait-progress:0%}
.generation .rolling-track::after{display:none}
.generation .ball-lane{position:absolute;left:0;right:40px;bottom:19px;top:auto;width:auto;height:48px}
.generation .ball-traveler{top:auto;bottom:0;left:calc(var(--toy-step)*100%);width:40px;height:48px;transform:none;transition:left .8s ease}
.generation .rolling{position:absolute;inset:0 0 8px;display:grid;place-items:center;font-size:38px;line-height:1;animation:creating-ball-roll 1.5s linear infinite}
.generation .ball-shadow{left:3px;bottom:0;width:34px;height:7px;background:#76533245;filter:blur(2px)}
.generation-meter{position:absolute;bottom:0;left:0;right:0;height:9px;overflow:hidden;border-radius:99px;background:#eadfce}
.generation-fill{display:block;width:var(--wait-progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff9b35,#ff681e);transition:width .8s ease}
.generation-status #gen-message{font:800 16px/1.3 var(--body);margin:0 0 6px;color:#b84816}
.generation .wait-reaction{font:20px/1.25 var(--heading);min-height:50px;margin:0 auto 10px;max-width:330px}
.generation .stage-list{display:flex;justify-content:center;gap:14px;margin:6px 0 14px;color:#d8c9b7;font-size:13px}
.generation .stage-list .active{color:#ff681e}.generation .stage-list .done{color:#996d42}
@keyframes creating-ball-roll{to{transform:rotate(360deg)}}
.shirt-zoom{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;color:var(--ink);text-align:center;border-radius:18px}
.zoom-hint{display:block;font:800 12px/1.4 var(--body);color:#a64d21;margin:4px 0 8px}
#shirt-zoom-dialog{width:min(94vw,620px);max-height:90dvh;overflow:auto;padding:24px 14px 14px;border:1px solid var(--line);border-radius:24px;background:#fff9ef}
#shirt-zoom-dialog h2{padding-right:24px;font-size:28px;text-align:center}
#shirt-zoom-dialog .artboard{width:100%;max-width:540px;margin:0 auto;aspect-ratio:1;min-height:0}
#shirt-zoom-dialog::backdrop{background:#24180d88}
@media(prefers-reduced-motion:reduce){.generation .rolling{animation:none!important}.generation-fill,.generation .ball-traveler{transition:none}}

.generation-paused .rolling{animation-play-state:paused}
.generation-recovery .secondary{width:100%;margin-top:10px;min-height:44px}

.shirt-overview>.shirt-zoom{width:120px;flex:0 0 120px}
@media(max-width:360px){.shirt-overview>.shirt-zoom{width:105px;flex-basis:105px}}

/* Align artwork with the shirt torso in the product photograph, including zoom and thumbnails. */
.artboard .design-print{position:absolute;left:53.6%;top:52%;margin:0;transform:translate(-50%,-50%)}
.artboard .design-print.composed-art{width:43%;height:56%;margin:0}

/* One proportional product layout for both offer tiles and their enlarged previews. */
.extra-preview-button{display:block;width:100%;padding:0;background:none;border:0;border-radius:10px;color:var(--ink)}
.extra-zoom-hint{display:block;font:800 10px/1.3 var(--body);color:#a64d21;margin:4px 0 8px}
.extra-selection{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;min-height:76px;font-weight:800}
.addon .product-thumb,.extra-large-preview .product-thumb{width:100%;height:auto;aspect-ratio:1;background-size:300% 100%;margin:0}
.product-thumb.hoodie .mini-art,.product-thumb.hoodie .mini-art.composed-art{position:absolute;left:50%;top:48%;width:30%;height:30%;transform:translate(-50%,-50%)}
.product-thumb.tote .mini-art,.product-thumb.tote .mini-art.composed-art{position:absolute;left:51.2%;top:67%;width:43%;height:36%;transform:translate(-50%,-50%)}
.addon .product-thumb.stickers .mini-art,.extra-large-preview .product-thumb.stickers .mini-art{position:relative;left:auto;top:auto;width:76%;max-width:none;height:82%;padding:4%;transform:none;margin:auto;display:flex;justify-content:center;align-items:center}
.product-thumb .mini-art img{object-fit:contain;max-height:100%}
.extra-large-preview{width:100%;max-width:480px;margin:10px auto;background:radial-gradient(ellipse,#ffe6c4,transparent 70%);border-radius:18px}
.extra-large-preview .mini-art span{font-size:clamp(9px,3vw,18px)}
.extra-large-preview .product-thumb.stickers .mini-art{border-radius:18px;box-shadow:5px 6px #f3d0a8}
.extra-large-preview .product-thumb.stickers .mini-art img{width:100%;height:100%;object-fit:contain}

/* A larger chest print on the clean, string-free hoodie mockup. */
.product-thumb.hoodie{background-image:url('assets/hoodie-no-strings-v83.webp');background-size:100% 100%;background-position:center}
.product-thumb.hoodie .mini-art,.product-thumb.hoodie .mini-art.composed-art{left:50%;top:45%;width:46%;height:38%}
.success::before{content:none}
.thank-you-paws{display:flex;justify-content:center;align-items:center;gap:clamp(16px,6vw,36px);margin:12px auto 18px;color:var(--orange)}
.thank-you-paws svg{width:29px;height:29px;flex:none;transform:rotate(-14deg)}
.thank-you-paws svg:nth-child(even){transform:translateY(8px) rotate(14deg)}

/* Gentle six-second travel in each direction; real progress remains on the bar. */
.generation .ball-traveler{left:0;animation:gentle-ball-travel 6s ease-in-out infinite alternate;transition:none}
.generation .rolling{animation:gentle-ball-roll 6s ease-in-out infinite alternate}
@keyframes gentle-ball-travel{to{left:100%}}
@keyframes gentle-ball-roll{to{transform:rotate(540deg)}}
.generation-paused .ball-traveler,.generation-paused .rolling,.generation[data-ready] .ball-traveler,.generation[data-ready] .rolling{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.generation .ball-traveler,.generation .rolling{animation:none!important}}
/* Die-cut preview edge follows alpha, rather than a rectangular sticker card. */
.addon .product-thumb.stickers .mini-art.composed-art,.extra-large-preview .product-thumb.stickers .mini-art.composed-art{background:none;border:0;outline:0;box-shadow:none;border-radius:0;overflow:visible}
.product-thumb.stickers .mini-art.composed-art img{filter:url(#sticker-white-outline)}
.own-design-upload{margin:14px 0 16px;text-align:center}
.own-design-upload label{display:block;position:relative;min-height:46px;padding:12px 15px;border:1px dashed #d4b18d;border-radius:14px;background:#fffdf8;color:#a64d21;font:800 14px/1.4 var(--body);cursor:pointer}
.own-design-upload label:focus-within{outline:3px solid #4d89ab;outline-offset:3px}
.own-design-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.own-design-upload p{margin:7px 0 0;font:12px/1.4 var(--body);color:var(--muted)}

/* A quiet optional upload link underneath the alternative-design choice. */
.own-design-upload{margin:12px 0 8px}
.own-design-upload label{display:inline-block;min-height:44px;padding:12px 6px;border:0;border-radius:4px;background:transparent;color:var(--muted);font:12px/1.5 var(--body)}
.own-design-upload strong{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:#a64d21}
.own-design-upload p{font-size:11px;margin:0 0 5px}


/* Product previews share the shirt layout; the plain X has a circular focus ring. */
#shirt-zoom-dialog .dialog-close{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;top:10px;right:10px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;color:var(--ink);line-height:1}
#shirt-zoom-dialog .dialog-close:focus,#shirt-zoom-dialog .dialog-close:active{outline:3px solid #4d89ab;outline-offset:0}
#shirt-zoom-dialog h2{padding:0;margin:14px 44px 20px;font-size:clamp(22px,5vw,28px);text-align:center}
#shirt-zoom-dialog .extra-large-preview{width:100%;max-width:540px;margin:0 auto}
#shirt-zoom-dialog .notice{margin:16px auto 12px;text-align:center}


/* Larger, individually fitted artwork with clear labels on every question grid. */
.options .choice{padding:6px 4px 10px;min-height:148px;gap:4px}
.options .choice-art{width:min(100%,120px);aspect-ratio:1;background-size:contain;background-position:center;background-repeat:no-repeat}
.options .choice small{line-height:1.3}

/* V90: phone-first flow polish, keeping the existing desktop dimensions. */
.home-how{font-size:15px;line-height:1.45;text-align:center;font-weight:800;color:#765d48;margin:14px 8px 12px}
.vibe-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff0dc;border:1px solid #efd4b0;border-radius:18px;padding:12px 16px;margin:18px 0 10px;font-size:16px}
.vibe-summary .text-button{font-size:15px;color:#b74d16;min-height:44px;text-decoration:underline;text-underline-offset:4px}
#art-style-heading{scroll-margin-top:calc(var(--chrome-height,180px) + 18px)}
.reveal-heading h1{margin:10px 0 8px;font-size:clamp(30px,8vw,42px);line-height:1.1}
.reveal-heading .sub{margin:0 0 14px;font-size:17px}
.reveal-choices{margin:12px 0 18px}
.reveal-choices>p{font-size:14px;font-weight:800;text-align:center;margin:0 0 10px;color:#765d48}
.design-thumbnails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.design-thumbnail{min-width:0;border:2px solid #eadccb;background:#fffcf6;border-radius:16px;padding:6px;cursor:pointer;color:#493b30;font:800 12px Nunito,sans-serif}
.design-thumbnail.selected{border-color:#ff6b19;background:#fff0de;box-shadow:0 0 0 1px #ff6b19}
.design-thumbnail .artboard{width:100%;margin:0}
.design-thumbnail>span{display:block;margin:6px 0 2px}
.design-thumbnail:focus-visible,.addon-toggle:focus-visible{outline:3px solid #4694b6;outline-offset:3px}
.addon-toggle{display:block;width:100%;min-height:44px;border:1.5px solid #e6c298;border-radius:14px;background:#fff6e8;color:#9c4316;font:900 15px Nunito,sans-serif;cursor:pointer;margin:10px 0 0;padding:10px 6px}
.addon-toggle.selected{background:#ff6b19;border-color:#ff6b19;color:white}
.extra-selection{display:flex;justify-content:space-between;gap:6px;align-items:center;flex-wrap:wrap}
.skip-extras{display:block;width:100%;min-height:44px;text-align:center;margin-top:10px;font-size:15px;text-decoration:underline;text-underline-offset:4px;color:#765d48}
.flow-top.receipt-navigation{display:flex;justify-content:center}
.flow[data-step="8"] .design-thumbnail .artboard.compact-shirt{width:100%;max-width:100%;height:auto;aspect-ratio:1/1.16;min-height:0;margin:0;background:none}
.extra-selection{min-height:0;justify-content:center;gap:4px;flex-direction:column;margin-top:5px}
.addon-toggle{min-height:48px;font-size:14px;padding:8px 3px}

/* V91: bold pressable X, larger hoodie art, and balanced journey endpoints. */
#shirt-zoom-dialog .dialog-close{border-radius:0;outline:none;font-weight:900;transition:transform .12s ease,color .12s ease}
#shirt-zoom-dialog .dialog-close svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:3.8;stroke-linecap:round}
#shirt-zoom-dialog .dialog-close:focus,#shirt-zoom-dialog .dialog-close:active{outline:none;box-shadow:none}
#shirt-zoom-dialog .dialog-close:focus-visible{color:#e65c0c;text-decoration:none;filter:drop-shadow(0 2px 0 #ffd0a7)}
#shirt-zoom-dialog .dialog-close:active{transform:translateY(2px) scale(.85);color:#e65c0c}
.product-thumb.hoodie .mini-art,.product-thumb.hoodie .mini-art.composed-art{width:52%;height:44%;top:45%;left:50%}
body.journey-page .journey-path{left:84px;right:84px}
body.journey-page .journey-path::before{content:none}
@media(prefers-reduced-motion:reduce){#shirt-zoom-dialog .dialog-close{transition:none}}

/* V92: wider journey baseline and a playful, balanced homepage only. */
body.journey-page .journey-path{right:80px}
body.journey-page .journey-path::before{content:'';position:absolute;left:-30px;right:0;top:0;height:100%;background:#e4d6c3;border-radius:4px}
body.journey-page .journey-fill::before{content:'';position:absolute;left:-30px;right:0;top:0;height:100%;background:inherit;border-radius:inherit}
body.front-page .home-how{flex:none;font:19px/1.25 var(--heading);color:#493324;margin:8px 0 12px;transform:rotate(-1deg)}
body.front-page .home-how>span:first-child{display:inline-block;transform:rotate(-2deg)}
body.front-page .home-how>span:nth-child(2){display:inline-block;transform:rotate(1deg)}
body.front-page .home-how strong{color:#d9540c;font-weight:400}
body.front-page .home-how-heart{display:inline-block;color:#e65c0c;font-size:24px;vertical-align:-2px;transform:rotate(8deg)}
body.front-page .good-pets{transform:rotate(-2deg)}
body.front-page .good-pets .slogan-lettering text:nth-child(2){fill:#e45b13}
body.front-page .good-pets .slogan-lettering path{stroke:#e45b13;stroke-width:2.2}
/* Preserve the desktop column width; allocate the phone's available height. */
@media(max-width:599px) and (min-height:661px){
 body.front-page .landing{height:100%;min-height:0}
 body.front-page .home-hero{min-height:175px;flex:1 1 0}
 body.front-page .hero-copy h1{font-size:clamp(27px,3.9svh,32px)}
 body.front-page .benefits{margin:8px auto 6px}
 body.front-page .pet-parade{margin:5px auto 8px}
 body.front-page .welcome-wave{min-height:62px;padding-top:7px;padding-bottom:calc(21px + env(safe-area-inset-bottom));margin-top:0}
 body.front-page .welcome-message{font-size:15px}
}
@media(max-width:599px) and (min-height:661px) and (max-height:740px){
 body.front-page .home-hero{min-height:140px}
 body.front-page .hero-copy h1{font-size:27px}
 body.front-page .hero-copy .brush{width:140px}
 body.front-page .good-pets{font-size:15px;bottom:16px}
 body.front-page .home-how{font-size:17px;margin:6px 0 8px}
 body.front-page .home-cta{height:52px;min-height:52px;flex-basis:52px}
 body.front-page .benefits .benefit-icon{width:30px;height:30px}
 body.front-page .benefits b{font-size:9px}
 body.front-page .welcome-wave{min-height:56px}
}
@media(max-width:599px) and (max-height:660px){
 html:has(body.front-page){height:auto;overflow:auto}
 body.front-page{height:auto;min-height:100svh;overflow:visible}
 body.front-page #app{flex:none}
 body.front-page .landing{height:auto;min-height:0}
 body.front-page .home-hero{flex:none;height:200px;min-height:200px}
}

/* V93: visible extras savings, higher shirt print, larger home-only slogan. */
.extras-offer{background:#fff0d8;border:1px solid #ffcf99;border-radius:16px;padding:12px 10px;margin:10px 0 16px;text-align:center}
.extras-offer strong{display:block;color:#bd4a0e;font:22px/1.15 var(--heading)}
.extras-offer p{font-size:13px;font-weight:800;line-height:1.35;margin:6px 0 0;color:#755138}
.extra-offer-price{display:flex;flex-direction:column;align-items:center;gap:2px}
.extra-offer-price del{font-size:12px;font-weight:700;color:#857669}
.extra-offer-price b{color:#b9480e;font-size:15px}
.order-mini .extras-savings,.summary .extras-savings{color:#a74010;background:#fff0d8;border-radius:10px;padding:8px;font-size:13px}
.artboard .design-print{top:47%}
body.front-page .good-pets{font-size:21px;right:0;bottom:25px}
@media(max-width:599px) and (max-height:740px){body.front-page .good-pets{font-size:18px;bottom:16px}}

/* V94: four real-stage circles above the pet image and changing comment. */
.generation .stage-list{display:flex;justify-content:center;align-items:center;gap:12px;margin:14px auto 12px;max-width:260px}
.generation .stage-circle{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:2px solid #e1d4c2;border-radius:50%;background:#f4eadc;color:#927b63;font:900 17px/1 Nunito,sans-serif;transition:background .2s ease,color .2s ease,border-color .2s ease}
.generation .stage-circle.active{color:white;background:#ff6b19;border-color:#ff6b19;box-shadow:0 0 0 4px #ff6b191a}
.generation .stage-circle.done{color:#b7470c;background:#fff0d9;border-color:#f1b97e;font-size:22px}
@media(prefers-reduced-motion:reduce){.generation .stage-circle{transition:none}}

/* V95: complete-bundle offer upgrades the savings to include the shirt. */
.bundle-offer{margin:18px 0;background:#fff0d8;border:2px dashed #f5ac66;border-radius:20px;padding:16px 12px;text-align:center}
.bundle-offer>span{font-size:24px}.bundle-offer h2{font:24px/1.1 var(--heading);color:#bd4a0e;margin:6px 0 10px}
.bundle-offer p{font-size:15px;line-height:1.4;margin:0 0 12px;color:#684c37}.bundle-offer strong{color:#b4480e}
.bundle-offer .secondary{width:100%;min-height:48px;font-size:16px;border-color:#f3b478;color:#a5400e}
.bundle-offer small{display:block;font-size:11px;line-height:1.4;margin-top:10px;color:#765b46}

/* V96: a small shirt debut celebration below an uploaded photo only. */
body.page-two .photo-uploaded .upload-feedback{margin:12px 0 14px;text-align:center}
body.page-two .photo-uploaded .photo-debut{font:25px/1.12 var(--heading);color:#bd4b12;max-width:320px;margin:0 auto 7px;transform:rotate(-1deg)}
body.page-two .photo-uploaded .photo-debut>span{display:inline-block;font-size:20px;vertical-align:1px}
body.page-two .photo-uploaded .photo-swap-hint{font:800 13px/1.4 Nunito,sans-serif;color:#80654f;margin:0}
body.page-two .photo-ready-tip{display:flex;align-items:center;justify-content:center;gap:12px;background:#fff0d8;border:1px solid #f6d3a8;border-radius:18px;padding:12px;margin:0 0 6px;text-align:left}
body.page-two .photo-ready-tip>svg{width:25px;height:25px;flex:0 0 25px;color:#ed711e;fill:currentColor;transform:rotate(-12deg)}
body.page-two .photo-ready-tip strong{display:block;font:20px/1.15 var(--heading);color:#775034}
body.page-two .photo-ready-tip span{display:block;font:800 12px/1.4 Nunito,sans-serif;color:#80654f;margin-top:4px}
body.page-two .photo-uploaded>.flow-action{margin-top:18px}

/* V97: leave breathing room for the floating iPhone browser toolbar. */
@media(max-width:599px){
 body.front-page{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
 body.front-page .home-how{font-size:18px;margin:6px 0 9px}
 body.front-page .benefits{margin:7px auto 5px}
 body.front-page .pet-parade{margin:4px auto 7px}
 body.front-page .hero-copy .brush{width:125px}
}
@media(max-width:599px) and (min-height:661px){
 body.front-page{height:100svh;height:min(100svh,100dvh)}
 body.front-page .home-hero{min-height:125px}
 body.front-page .hero-copy h1{font-size:clamp(24px,3.6svh,30px)}
 body.front-page .welcome-wave{min-height:56px;padding-bottom:21px}
 body.front-page .welcome-wave .site-rights{bottom:6px}
}
@media(max-width:599px) and (min-height:661px) and (max-height:760px){
 body.front-page .home-how{font-size:16px;line-height:1.2}
 body.front-page .hero-copy h1{font-size:24px}
 body.front-page .home-cta{height:50px;min-height:50px;flex-basis:50px}
 body.front-page .benefits .benefit-icon{width:28px;height:28px}
 body.front-page .benefits b{font-size:9px}
 body.front-page .pet-parade .pet-portrait{height:38px}
 body.front-page .welcome-message{font-size:14px}
}

/* V101: match the approved Photoshop placement within the existing hero. */
body.front-page .hero-copy{left:2px;top:4px;width:60%;transform:none}
body.front-page .hero-copy h1{font-size:42px}
body.front-page .hero-copy .brush{width:155px}
body.front-page .hero-pets{left:38%;right:auto;width:55%;height:100%;bottom:0;object-position:center bottom}
body.front-page .good-pets{right:0;top:auto;bottom:12px;transform:rotate(-2deg)}
@media(max-width:599px){
 body.front-page .hero-copy h1{font-size:clamp(28px,4svh,32px)}
 body.front-page .hero-copy .brush{width:138px}
 body.front-page .hero-pets{left:38%;width:55%}
 body.front-page .good-pets{font-size:19px;bottom:12px}
}
@media(max-width:599px) and (max-height:740px){
 body.front-page .hero-copy h1{font-size:28px}
 body.front-page .hero-copy .brush{width:125px}
 body.front-page .good-pets{font-size:17px;bottom:8px}
}

@media(min-width:600px){body.front-page .hero-pets{height:86%}}

/* V102: fuller pet artwork only; preserve headline and slogan placement. */
body.front-page .hero-pets{left:36%;width:59%}
@media(min-width:600px){body.front-page .hero-pets{height:94%}}
@media(max-width:599px){body.front-page .hero-pets{height:104%}}

/* V103: cream edge keeps the orange slogan readable over the pet artwork. */
body.front-page .good-pets .slogan-lettering text:nth-child(2){stroke:#fff9ef;stroke-width:2.2px;stroke-linejoin:round;paint-order:stroke fill}

/* V104: orange selected squares and paw completion markers. */
.choice.selected,.type-choice.selected,.style-choice.selected{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.style-choice{position:relative}
.choice.selected::after,.style-choice.selected::after{content:'';position:absolute;right:6px;top:6px;width:17px;height:17px;border:0;border-radius:0;box-shadow:none;background:#fff9ef;-webkit-mask:url('assets/selection-paw-v104.svg') center/contain no-repeat;mask:url('assets/selection-paw-v104.svg') center/contain no-repeat}
.pet-setup .type-choice.selected .pet-type-check{right:5px;top:5px;width:17px;height:17px;border:0;border-radius:0;box-shadow:none;background:transparent;color:#fff9ef}
.pet-type-check svg{display:block;width:17px;height:17px;fill:currentColor;stroke:none}
.generation .stage-paw{display:block;width:25px;height:25px;fill:currentColor}

/* V105: matching paw markers for selected extras and bundle confirmation. */
.addon-toggle.selected,#add-bundle{display:flex;align-items:center;justify-content:center;gap:5px}
.addon-toggle .added-paw,#add-bundle .added-paw{width:18px;height:18px;flex:0 0 18px;fill:currentColor;stroke:none}

/* V106: screen-wide order celebration, without covering receipt controls. */
.order-celebration{position:fixed;inset:0;z-index:10000;overflow:hidden;pointer-events:none;contain:strict}
.celebration-particle{position:absolute;left:var(--x);top:var(--start,-45px);width:var(--size);height:var(--size);opacity:0;animation:order-confetti-fall var(--duration) var(--delay) cubic-bezier(.2,.45,.55,1) both;will-change:transform,opacity}
.celebration-particle svg{display:block;width:100%;height:100%;fill:currentColor}
.celebration-paw{color:#211b16}
.celebration-heart{color:#ff681e}
.celebration-confetti{height:calc(var(--size)*1.7);border-radius:2px;background:var(--color);box-shadow:0 1px 2px #613a2320}
@keyframes order-confetti-fall{0%{opacity:.7;transform:translate3d(0,-20px,0) rotate(0)}8%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),calc(100dvh + 80px),0) rotate(var(--spin))}}
@media(prefers-reduced-motion:reduce){.order-celebration{display:block}.celebration-particle{animation:none}}
.celebration-particle img{display:block;width:100%;height:100%;object-fit:contain}
.celebration-still .celebration-particle{animation:none;opacity:.65;transform:none}

/* V107: completed progress paws stay black; receipt paws alternate brand colors. */
.generation .stage-circle.done .stage-paw{color:#211b16;fill:currentColor}
.thank-you-paws svg:nth-child(even){color:#211b16}

/* V110: seasonal accents occupy the edges; the original layout keeps its dimensions. */
#seasonal-decorations{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,478px);height:340px;pointer-events:none;z-index:11;overflow:hidden}
.season-accent{position:absolute;width:34px;height:34px;opacity:.86}.accent-0{top:0;left:0;width:54px;height:54px}.accent-1{top:0;right:4px;width:30px;height:60px}.accent-2{top:282px;right:3px;width:28px;height:28px}
.holiday-choices{margin:14px 0 8px;border:1.5px dashed #ffa45d;border-radius:15px;background:#fff3df;padding:12px;color:#422c20;text-align:left}.holiday-choices summary{cursor:pointer;font-weight:900;font-size:15px;min-height:40px}.holiday-choices summary span{display:block;font-size:11px;font-weight:700;margin:4px 0 0 22px;color:#885839}.holiday-choices p{font-size:12px;line-height:1.45;margin:10px 0}.holiday-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.holiday-choice{border:1.5px solid #e5d7c5;border-radius:12px;background:#fffaf1;padding:10px 4px;min-height:90px;cursor:pointer;color:#241b14;font:inherit}.holiday-choice span{display:block;font-size:28px;margin-bottom:6px}.holiday-choice b{font-size:11px;line-height:1.3;display:block}.holiday-choice.selected{background:#ff7617;border-color:#e45b00;color:#fff}.holiday-choice:focus-visible,.holiday-choices summary:focus-visible{outline:3px solid #251f1a;outline-offset:3px}.holiday-selected{font-weight:800}.holiday-choice:active{transform:scale(.97)}
@media(max-width:360px){.holiday-choice b{font-size:10px}.holiday-choices{padding:10px}}

.holiday-choice:first-child{grid-column:1/-1;min-height:42px;padding:9px}.holiday-choice:first-child span{display:inline;font-size:18px;margin:0 7px 0 0;vertical-align:middle}.holiday-choice:first-child b{display:inline;font-size:12px}

/* V113 Halloween polish: ornaments stay in empty header corners and page gutters. */
#seasonal-decorations.halloween-header{position:absolute;top:0;height:144px;max-width:478px;z-index:11;overflow:hidden}.halloween-header svg{position:absolute;pointer-events:none}.halloween-web{top:0;left:0;width:48px;height:48px}.halloween-web-right{left:auto;right:0;transform:scaleX(-1);width:34px;height:34px;opacity:.65}.halloween-spider{right:3px;top:0;width:24px;height:49px;transform-origin:50% 0;animation:halloween-spider-sway 8s ease-in-out infinite}.halloween-pumpkins{left:3px;top:103px;width:40px;height:25px}
#halloween-page-trim{position:fixed;top:var(--chrome-height,144px);bottom:0;left:50%;transform:translateX(-50%);width:min(100%,478px);z-index:3;pointer-events:none;overflow:hidden}.halloween-edge-bat{position:absolute;left:1px;top:15%;width:14px;height:12px;opacity:.7;transform:rotate(-18deg)}.halloween-edge-bat-right{left:auto;right:1px;top:65%;transform:rotate(18deg);width:13px}.halloween-edge-leaf{position:absolute;right:1px;top:32%;width:12px;height:15px;opacity:.55}body.front-page #halloween-page-trim{top:144px}body.front-page .halloween-edge-bat{top:6%}body.front-page .halloween-edge-bat-right{top:56%}
:is(.halloween-choices,.illustrated-holiday-choices){border-style:solid;border-color:#e7b277;background:linear-gradient(135deg,#fff4e2,#fff9ef);box-shadow:0 3px 12px #75401c08}:is(.halloween-choices,.illustrated-holiday-choices) summary{font-family:Chewy,cursive;font-size:18px;color:#30241c}:is(.halloween-choices,.illustrated-holiday-choices) summary span{font-family:Nunito,sans-serif}:is(.halloween-choices,.illustrated-holiday-choices) .holiday-choice{position:relative;overflow:hidden;padding:6px 3px 10px;background:#fffaf1;min-height:0;box-shadow:0 2px 4px #35211706}:is(.halloween-choices,.illustrated-holiday-choices) .holiday-choice:first-child{padding:9px;box-shadow:none}.halloween-choice-art,.holiday-choice-art{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:contain;margin:0 auto 4px;filter:drop-shadow(0 2px 2px #6b391614)}:is(.halloween-choices,.illustrated-holiday-choices) .holiday-choice b{font-size:11px}:is(.halloween-choices,.illustrated-holiday-choices) .holiday-choice.selected{background:#ff7617;border-color:#db5708;color:#fff}.holiday-paw-mark{display:none;position:absolute;top:6px;right:6px;width:17px;height:17px;fill:#fff;filter:drop-shadow(0 1px 1px #9f370a55)}.selected .holiday-paw-mark{display:block}.holiday-art-note{color:#87684e;font-size:10px!important;text-align:center;margin:10px 0 4px!important}
@keyframes halloween-spider-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media(min-width:700px){.halloween-web{width:58px;height:58px}.halloween-pumpkins{width:44px;height:28px}.halloween-edge-bat{width:16px}.halloween-edge-bat-right{width:15px}}
@media(prefers-reduced-motion:reduce){.halloween-spider{animation:none}}

/* V115: painted ornaments and a fuller frame, with the same content width. */
.halloween-header .halloween-web{width:58px;height:58px;opacity:.85}.halloween-header .halloween-web-right{width:43px;height:43px;opacity:.65}.halloween-spider-painted{position:absolute;right:2px;top:5px;width:32px;height:43px;transform-origin:50% -5px;animation:halloween-spider-sway 9s ease-in-out infinite}.halloween-spider-painted:before{content:"";position:absolute;top:-5px;left:50%;height:15px;border-left:1px solid #66504580}.halloween-spider-painted img{display:block;position:absolute;bottom:0;width:32px;height:32px;object-fit:contain}.halloween-pumpkins-painted{position:absolute;top:101px;left:2px;width:56px;height:37px;object-fit:contain;filter:drop-shadow(0 2px 2px #70421614)}
#halloween-page-trim .halloween-edge-bat{opacity:.82;left:0;width:16px;height:13px}#halloween-page-trim .halloween-edge-bat-right{left:auto;right:0;width:15px}.halloween-bat-companion{position:absolute;left:1px;top:18%;width:10px;height:8px;opacity:.48;transform:rotate(12deg)}.halloween-bat-companion-right{left:auto;right:2px;top:69%;transform:rotate(-15deg)}.halloween-frame-web,.halloween-frame-pumpkins{display:none}
.halloween-page-flourish{display:flex;justify-content:center;align-items:center;gap:13px;max-width:280px;margin:14px auto 0;height:51px;pointer-events:none;position:relative}.halloween-page-flourish img{display:block;width:87px;height:51px;object-fit:contain;filter:drop-shadow(0 2px 2px #70421614)}.halloween-flourish-bat{width:25px;height:17px;opacity:.7;transform:rotate(-12deg)}.halloween-flourish-bat-right{transform:rotate(12deg)}.halloween-flourish-leaf{width:16px;height:19px;opacity:.65;transform:rotate(-20deg)}.halloween-flourish-leaf-right{transform:rotate(40deg)}
.halloween-home-flourish{position:absolute;right:15px;bottom:22px;width:89px;height:52px;pointer-events:none}.halloween-home-flourish img{width:100%;height:100%;object-fit:contain}.halloween-decorated .welcome-wave .welcome-paws{visibility:hidden}
@media(min-width:700px){#halloween-page-trim{width:680px;overflow:visible}.halloween-header .halloween-web{width:65px;height:65px}.halloween-spider-painted{width:36px;right:3px}.halloween-spider-painted img{width:36px;height:36px}.halloween-pumpkins-painted{width:62px;height:40px;left:1px}.halloween-frame-web{display:block;position:absolute;left:0;top:-145px;width:88px;height:88px;opacity:.25}.halloween-frame-web-right{left:auto;right:0;transform:scaleX(-1);width:73px;height:73px}#halloween-page-trim .halloween-edge-bat{left:27px;top:13%;width:53px;height:35px;opacity:.76}#halloween-page-trim .halloween-edge-bat-right{left:auto;right:23px;top:57%;width:46px;height:29px}.halloween-bat-companion{left:4px;top:20%;width:29px;height:20px}.halloween-bat-companion-right{left:auto;right:1px;top:64%;width:27px;height:18px}.halloween-edge-leaf{right:42px!important;width:27px!important;height:30px!important;opacity:.5!important}.halloween-frame-pumpkins{display:block;position:absolute;bottom:6%;left:0;width:96px;height:70px;object-fit:contain;filter:drop-shadow(0 3px 3px #70421620)}.halloween-page-flourish{height:62px;gap:20px}.halloween-page-flourish img{width:106px;height:62px}}
@media(max-width:360px){.halloween-pumpkins-painted{width:48px;height:32px;top:104px}.halloween-home-flourish{width:74px;height:44px;right:10px}.halloween-page-flourish{gap:10px;height:46px}.halloween-page-flourish img{height:46px;width:80px}}
@media(prefers-reduced-motion:reduce){.halloween-spider-painted{animation:none}}

/* V116: quiet Halloween stamps on the original cream customer background. */
body.halloween-decorated{background-image:url('assets/halloween-stamps-v166.svg'),radial-gradient(ellipse at 50% 28%,#fffdf8 0%,#fff9ef 62%,#faf1e2 100%);background-size:360px 440px,100% 100%;background-repeat:repeat,no-repeat;background-position:center 144px,center top}
body.halloween-decorated.journey-page #site-chrome{background-color:#fff9ef;background-image:url('assets/halloween-stamps-v166.svg');background-size:360px 440px;background-position:center 144px}
@media(max-width:360px){body.halloween-decorated{background-size:360px 440px,100% 100%}body.halloween-decorated.journey-page #site-chrome{background-size:320px 391px}}

/* V118: leave the journey characters clear, with a small plain corner spider. */
body.halloween-decorated.journey-page #site-chrome{background-image:none}
.halloween-header .halloween-spider{width:20px;height:38px;right:5px;top:3px;animation:none}

/* V119: positioned stamps fill the quiet middle of the journey header. */
body.halloween-decorated.journey-page #journey-slot{position:relative}
body.halloween-decorated.journey-page #journey-slot::before,body.halloween-decorated.journey-page #journey-slot::after{content:'';position:absolute;pointer-events:none;top:24px;width:30px;height:32px;background:center/contain no-repeat;z-index:0}
body.halloween-decorated.journey-page #journey-slot::before{left:44%;background-image:url('assets/halloween-journey-ghost-v119.svg');transform:rotate(-12deg)}
body.halloween-decorated.journey-page #journey-slot::after{left:65%;background-image:url('assets/halloween-journey-pumpkin-v119.svg');transform:rotate(10deg)}

/* V120: smaller left spider and faint stamps in the spare journey spaces. */
.halloween-header .halloween-spider-left{right:auto;left:10px;top:5px;width:13px;height:27px}
body.halloween-decorated.journey-page #journey-slot{background-image:url('assets/halloween-journey-pumpkin-v119.svg'),url('assets/halloween-journey-bat-v120.svg'),url('assets/halloween-journey-bat-v120.svg');background-repeat:no-repeat;background-size:23px 25px,24px 16px,22px 15px;background-position:left 12px top 48px,right 12px top 49px,54% 48px}
@media(max-width:599px){body.halloween-decorated.journey-page #journey-slot{background-size:18px 21px,18px 12px,20px 14px;background-position:left 6px top 49px,right 7px top 49px,55% 48px}}

/* V143: a shorter cream feather on phone and desktop journey pages.
   The solid surface ends exactly at the measured journey bar. */
body.journey-page #site-chrome{background:transparent!important;isolation:isolate}
body.journey-page #site-chrome::before{
 content:'';position:absolute;left:0;right:0;top:0;
 height:var(--journey-fade-start,calc(100% - 15px));
 background:#fff9ef;z-index:-1;pointer-events:none;
}
body.journey-page #site-chrome::after{
 content:'';position:absolute;left:0;right:0;
 top:var(--journey-fade-start,calc(100% - 15px));height:8px;
 background:linear-gradient(to bottom,#fff9ef 0%,rgba(255,249,239,.5) 22%,rgba(255,249,239,.15) 60%,rgba(255,249,239,0) 100%);
 pointer-events:none;
}

/* V130: matching pet squares and the approved black selection paw. */
.pet-setup .type-choice.selected .pet-type-check{color:var(--ink)}
body.page-two .type-choice[data-kind="Other"] .pet-portrait{transform:none}

/* V131: friendly invitations, shared across ordinary and holiday choices. */
.vibe-summary{background:linear-gradient(120deg,#fff0d7,#fff8eb);border:2px solid #ffc080;border-radius:22px;padding:14px 12px;gap:10px;box-shadow:0 4px 0 #f6e7d2;flex-wrap:wrap;text-align:left}
.vibe-paw,.custom-paw{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#ffdec0;color:var(--ink)}
.vibe-paw svg,.custom-paw svg{width:22px;height:22px;fill:currentColor;stroke:none}
.vibe-label{flex:1;min-width:100px}.vibe-label b{display:block;font-family:var(--heading);font-size:24px}
.vibe-summary .text-button{background:#ff681e;color:#fff;border:2px solid #fff;border-radius:24px;text-decoration:none;padding:8px 12px;font-family:var(--heading);font-size:17px;box-shadow:0 2px 5px #b75d1620}
.other-answer,.holiday-choices{border:2px solid #ffc080;border-radius:22px;background:linear-gradient(135deg,#fff2de,#fffaf0);padding:12px;margin:16px 0;box-shadow:0 4px 0 #f6e7d2;text-align:left}
.other-answer summary,.holiday-choices summary{display:flex;align-items:center;gap:10px;list-style:none;font-family:var(--heading);font-size:21px;color:var(--ink);padding:2px 0;min-height:48px}
.other-answer summary::-webkit-details-marker,.holiday-choices summary::-webkit-details-marker{display:none}
.other-answer summary::before{content:none!important}
.other-answer summary::after,.holiday-choices summary::after{content:'+';margin-left:auto;align-self:center;background:#ff681e;color:#fff;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;font:900 22px/1 var(--body)}
.other-answer[open] summary::after,.holiday-choices[open] summary::after{content:'−'}
.other-answer summary small,.holiday-choices summary small{display:block;font:800 12px/1.4 var(--body);color:#825438;margin-top:3px}
.other-answer .field-label{font-size:20px;margin:14px 0 8px}.other-answer .field{border-radius:14px;border-color:#edc99f;background:#fffdf8;margin:0}
.other-answer .secondary{border-radius:22px;margin-top:10px;background:#ff681e;border-color:#ff681e;color:#fff}
.holiday-choices summary .holiday-invite-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:#ffdec0;margin:0;font-size:27px}
.holiday-choices summary .holiday-invite-copy{display:block;margin:0;font-family:var(--heading);font-size:21px;color:var(--ink);flex:1}
.holiday-choices .holiday-grid{margin-top:14px;gap:9px}
.holiday-choices .holiday-choice{border-radius:17px}

/* The orange tail follows the active paw; completed paws never orbit. */
.generation .stage-circle{position:relative;overflow:visible}
.generation .stage-circle.active{background:#fff0d9;color:#a6460e;border-color:#ffd9af;box-shadow:none}
.stage-orbit{position:absolute;inset:-6px;animation:stage-paw-orbit 2.4s linear infinite;pointer-events:none}
.stage-trail{position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0deg,transparent 190deg,#ff681e20 235deg,#ff681e 355deg,transparent 360deg);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
.stage-orbit-paw{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:15px;height:15px;color:var(--ink);fill:var(--ink);stroke:none;background:#fff9ef;border-radius:50%;padding:1px}
@keyframes stage-paw-orbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.stage-orbit{animation:none}.stage-trail{background:#ff681e}}
@media(max-width:360px){.vibe-summary .text-button{font-size:15px;padding-inline:9px}.other-answer summary,.holiday-choices summary .holiday-invite-copy{font-size:19px}}

/* V132: prominent, immediate selected paw on pet selection only. */
body.page-two .pet-setup .type-choice.selected .pet-type-check{right:3px;top:3px;width:25px;height:25px;padding:4px;border:1px solid #ffd6a5;border-radius:50%;background:#fff9ef;color:#171613;box-shadow:0 1px 3px #17161326;animation:none;transition:none}
body.page-two .pet-type-check svg{width:16px;height:16px;color:#171613;fill:currentColor;stroke:none}

/* V133: visible cream halo and dark rim around Page 2's black selection paw. */
body.page-two .pet-setup .type-choice.selected .pet-type-check{width:28px;height:28px;padding:4px;border:3px solid #fff9ef;background:#fff9ef;box-shadow:0 0 0 1.5px #171613,0 2px 4px #17161333}
body.page-two .pet-type-check svg{width:16px;height:16px}

/* V134: cream stroke follows the paw silhouette; no badge behind it. */
body.page-two .pet-setup .type-choice.selected .pet-type-check{right:3px;top:3px;width:24px;height:24px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#171613}
body.page-two .pet-type-check svg{width:24px;height:24px;overflow:visible;fill:currentColor;stroke:none}
body.page-two .pet-type-check svg :is(ellipse,path){stroke:#fff9ef;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill}

/* V135: small black paws with a cream contour across selection cards. */
body.page-two .pet-setup .type-choice.selected .pet-type-check{width:17px;height:17px;right:5px;top:5px}
body.page-two .pet-type-check svg{width:17px;height:17px}
.choice.selected::after,.style-choice.selected::after{width:17px;height:17px;background:transparent url('assets/pressed-selection-paw-v140.svg') center/contain no-repeat;-webkit-mask:none;mask:none}
.holiday-paw-mark{width:17px;height:17px;filter:none;overflow:visible}
.addon-toggle .added-paw,#add-bundle .added-paw{width:17px;height:17px;flex-basis:17px;overflow:visible}

.everyday-selection-paw{width:17px;height:17px;flex:0 0 17px;overflow:visible}

.photo-processing-status{color:#a65024;font-weight:800;font-size:14px;text-align:center;margin:10px 0;min-height:22px}

/* V137: tangent-facing thinly outlined progress paws, orange completed stages. */
.generation .stage-circle.done{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.generation .stage-paw{overflow:visible}
.stage-orbit-paw{background:transparent;border-radius:0;padding:0;overflow:visible;transform:translateX(-50%) rotate(74deg)}
.generation .stage-list{background:#fff9ef;border-radius:99px;box-shadow:0 0 0 8px #fff9ef}

.options img.choice-art{display:block;width:min(100%,120px);height:auto;aspect-ratio:1;object-fit:contain;background:none}

/* V139: one brief paw impression; selection handlers never wait for it. */

/* Still recessed selection imprint: light catches the lower contour. */
.pet-type-check svg,.holiday-paw-mark,.everyday-selection-paw,.added-paw{filter:drop-shadow(0 .6px .35px #fff9ef66)}
.choice.selected::after,.style-choice.selected::after{filter:drop-shadow(0 .6px .35px #fff9ef66)}

/* Place the seated figures fully above the journey baseline on every viewport. */
.journey-scene .journey-hug,.journey-scene .journey-friend{bottom:7px}

/* V149: align the two raised sprite rows with the existing journey baseline. */
body.journey-page .journey-pet:has([data-species="bird"]){bottom:-5px}
body.journey-page .journey-pet:has([data-species="reptile"]){bottom:-12px}
.journey-start-paws{z-index:2}

/* V150: celebration details are restricted to the final receipt. */
.receipt-party .receipt-celebration{position:relative;padding:22px 16px 26px;border:1px solid #f5d6ad;border-radius:28px;background:linear-gradient(150deg,#fff5e3,#fffdf8);box-shadow:0 5px 16px #80502208;margin:12px 0 24px}
.receipt-party .receipt-celebration h1{margin:14px 0 16px;font-size:clamp(34px,6vw,48px);line-height:1.08}
.receipt-party .receipt-thanks{font-weight:800;color:#995322;margin:12px 0;font-size:clamp(17px,3vw,21px)}
.receipt-party .receipt-tagline{font-size:15px;line-height:1.5;margin:12px auto 0;max-width:330px;color:#6c5b49}
.receipt-party .big-icon{margin:0;font-size:48px}
.receipt-party .receipt-holiday-accents{display:flex;justify-content:center;gap:20px;align-items:center;margin:12px 0 6px;color:var(--receipt-accent)}
.receipt-party .receipt-holiday-accents img,.receipt-party .receipt-holiday-accents svg{width:30px;height:30px;display:block;overflow:visible}
.receipt-party .receipt-holiday-accents>:first-child{transform:rotate(-12deg)}
.receipt-party .receipt-holiday-accents>:last-child{transform:rotate(12deg)}
.receipt-party .thank-you-paws{margin:8px auto 16px;color:var(--receipt-accent)}
.receipt-party .thank-you-paws svg:nth-child(even){color:var(--receipt-secondary)}
.receipt-party .thank-you-paws svg:last-child{color:var(--receipt-third)}
.receipt-party .summary{background:#fff9ed;border:1px solid #f5ce9b;border-radius:24px;box-shadow:0 4px 12px #80502206}
.receipt-party .summary::before{content:"Your little masterpiece";display:block;text-align:left;color:#995322;font-weight:800;font-size:15px;margin-bottom:18px}
.receipt-party .receipt-confirmed{font-weight:700}

/* V152: completed progress paws use the same recessed imprint as selections. */
.generation .stage-circle.done .stage-paw{filter:drop-shadow(0 .6px .35px #fff9ef66)}

/* V167: selected pet focus outline touches the orange card, with no cream gap. */
.pet-setup .type-choice.selected:focus-visible{outline-offset:0}

/* V168: the orange selection outline touches the pet image without a cream moat. */
.pet-setup .type-choice.selected .pet-portrait{outline-offset:0}

/* V176: render the complete selection imprint, including its recessed shading. */
.generation .stage-circle.done .stage-paw{object-fit:contain;filter:none}
/* Footer portraits stay square so the sprite's pet faces keep their proportions. */
body.front-page .pet-parade .pet-portrait{width:100%;max-width:72px;height:auto;aspect-ratio:1 / 1;flex-shrink:0}

/* Optional fashion direction complements the customer's selected art medium. */
.flair-choices{margin:18px 0 12px;border:1.5px dashed var(--orange,#ff8a00);border-radius:18px;background:#fff3df;padding:16px;text-align:left;color:var(--ink,#241b14)}
.flair-choices summary{cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px;font-size:18px;font-weight:900}
.flair-choices summary>span:first-child{font-size:27px}.flair-choices small{display:block;font-size:13px;line-height:1.4;font-weight:700;color:#765a43;margin-top:4px}
.flair-choices p{font-size:14px;line-height:1.5;margin:12px 0}.flair-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.flair-choice{position:relative;cursor:pointer;min-height:124px;padding:13px 8px;background:#fffaf1;border:2px solid #e5d7c5;border-radius:15px;color:var(--ink,#241b14);font:inherit;text-align:center}
.flair-choice>span{display:block;font-size:32px;margin-bottom:7px}.flair-choice b{display:block;font-size:14px;line-height:1.3}.flair-choice small{font-size:12px}.flair-choice.selected{background:var(--orange,#ff8a00);border-color:var(--orange,#ff8a00)}.flair-choice.selected small{color:#382716}
.flair-choice:disabled{opacity:.55;cursor:default}.flair-choice:focus-visible,.flair-choices summary:focus-visible{outline:3px solid #241b14;outline-offset:3px}
.flair-chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding:12px;border-radius:12px;background:#fffaf1;font-weight:900;min-height:44px}.flair-chain input{width:21px;height:21px;accent-color:var(--orange,#ff8a00)}.flair-chain small{width:100%;margin-left:31px}.flair-chain[hidden]{display:none}
@media(max-width:600px){.flair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.flair-choice{min-height:124px}.flair-choices{padding:12px}.flair-choices summary{font-size:16px}}

/* Cute fashion examples match the illustrated holiday cards. */
.flair-choice:not(.flair-surprise){padding:12px 9px 14px;min-height:250px}
.flair-card-art{display:block;width:100%;height:auto;aspect-ratio:1;max-height:205px;object-fit:contain;margin:0 auto 9px;pointer-events:none}
.flair-paw-mark{display:none;position:absolute;right:10px;top:10px;width:25px;height:25px;pointer-events:none}.flair-choice.selected .flair-paw-mark{display:block}
.flair-surprise{grid-column:1/-1;min-height:54px;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px}.flair-surprise>span{font-size:25px;margin:0}.flair-surprise small{display:none}
.flair-art-note{color:#765a43;text-align:center;font-size:13px!important}
@media(max-width:600px){.flair-choice:not(.flair-surprise){min-height:222px}.flair-card-art{height:145px}.flair-choice b{font-size:13px}.flair-choice small{font-size:11px}}

/* V190: use the available height on tall mobile homepages. Browser chrome is
   already excluded by dvh; retain only the device safe-area inset. */
@media(max-width:599px) and (min-height:661px){
 html:has(body.front-page){overflow-y:auto}
 body.front-page{height:100svh;height:100dvh;min-height:100svh;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom,0px);overflow:visible}
 body.front-page .landing{min-height:min-content}
}

/* V197: load the whole recessed paw so its gradient/filter definitions travel with it on mobile Safari. */
body.page-two .pet-type-check img{display:block;width:100%;height:100%;object-fit:contain}