/* Bag, checkout, gift and post-purchase screens in the v7 "camera roll" language (design/direction-b.md).
   Mobile first (320–430 px). Tokens only; no drop shadows at rest; every move has a reduced-motion and Pause motion fallback.
   Shared kit pieces (.fan, .hold-button, .receipt, .trace-loader, .kit-undo) come from kit.css and are only tuned here. */
.wildomi-commerce{max-width:1240px;margin:0 auto;padding:20px var(--gutter) 112px}
.co-page-heading{margin-bottom:24px}
.co-page-heading h1{font-size:clamp(40px,11vw,76px)}
.co-page-heading p{margin-top:10px;font-size:17px;line-height:1.45;color:var(--muted)}
.co-layout{display:grid;gap:28px;min-width:0}

/* Notices and the gated checkout state */
.co-notice{margin:0 0 20px;padding:14px 16px;background:color-mix(in srgb,var(--coral) 16%,var(--paper));color:var(--error);font-size:16px;line-height:1.5}
.co-notice[data-tone="calm"]{background:var(--mint);color:var(--ink)}
.co-notice[hidden]{display:none}
.co-notice:focus{outline:none}
.co-availability{display:grid;gap:4px;margin:0 0 24px;padding:18px 16px;background:var(--night);color:var(--cream);font-size:16px;line-height:1.5}
.co-availability strong{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.co-availability p{color:color-mix(in srgb,var(--cream) 86%,transparent)}

/* Buttons: pills with a firm lower edge that compresses when pressed (Kitchen "tactile button"). */
.co-button{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:13px 22px;border:0;border-radius:var(--pill);background:var(--ink);color:var(--cream);font:600 16px/1.25 var(--sans);text-align:left;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--night) 45%,transparent);transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),background-color .18s ease}
.co-button>span[aria-hidden]{font-size:20px;font-weight:400;line-height:1}
.co-button:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--night) 45%,transparent)}
.co-button-lime{background:var(--mint);color:var(--ink);box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--night) 24%,transparent)}
.co-button-lime:active{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--night) 24%,transparent)}
.co-button-quiet{background:var(--paper);color:var(--ink);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ink) 14%,transparent)}
.co-cta{width:100%;min-height:58px;padding:15px 24px;font-size:17px}
.co-button:disabled{opacity:1;cursor:progress}
.co-text-link,.co-quiet-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.co-quiet-link{font-weight:500;text-decoration-thickness:1px}
.co-form-help{font-size:15px;line-height:1.5;color:var(--muted)}
.co-form-help a{text-decoration:underline}
.co-empty{display:grid;gap:14px;justify-items:start;padding:28px 20px;background:var(--paper)}
.co-empty h2{font-size:clamp(30px,7vw,44px)}
.co-empty p{font-size:17px;max-width:44ch}
@media(hover:hover) and (pointer:fine){.co-button:hover{background:var(--ocean-2)}.co-button-lime:hover{background:var(--lime-2)}.co-button-quiet:hover{background:var(--cream)}}

/* Loading: the Wildomi route mark traced as a line (kit .trace-loader). */
.co-loader{min-height:42vh;gap:14px;align-content:center;text-align:center}
.co-loader svg{width:56px;height:56px}
.co-loader{--trace-dot:.75}
.co-loader path{stroke-width:4}
.co-loader p{max-width:30ch;font-size:16px;color:var(--muted)}
.co-inline-loader{--trace-dot:1;display:inline-grid;min-height:0;width:22px;height:22px;flex-shrink:0;color:currentColor}
.co-inline-loader svg{width:22px;height:22px}
.co-inline-loader path{stroke-width:6}
.co-button .co-inline-loader+span{margin-right:auto}

/* Fields: 16 px text, visible labels, 52 px tall inputs */
.co-field{display:grid;gap:8px;margin-bottom:16px}
.co-field>span{font-size:15px;font-weight:600}
.co-field small{font-weight:400;color:var(--muted);font-size:14px}
.co-field input,.co-field select,.co-field textarea{width:100%;min-height:52px;padding:13px 15px;border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:16px;transition:border-color .16s ease}
:is(.co-checkout-stage,.bag-gift,.co-activation-panel,.co-empty) .co-field :is(input,select,textarea){background:var(--cream)}
.co-field textarea{min-height:120px;resize:vertical;line-height:1.5}
.co-field input::placeholder,.co-field textarea::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.co-field input:focus,.co-field select:focus,.co-field textarea:focus{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.co-field input[readonly]{background:var(--sand)}
.co-field input[aria-invalid="true"]{border-color:var(--error)}
.co-character-count{justify-self:end}
.co-field-pair{display:grid;gap:0 14px}
.co-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin:4px 0 12px;font-size:16px;line-height:1.5;cursor:pointer}
.co-check input{width:24px;height:24px;margin:1px 0 0;flex-shrink:0;accent-color:var(--ink)}
.co-check a{text-decoration:underline}
@media(min-width:560px){.co-field-pair{grid-template-columns:1fr 1fr}}

/* Camera-roll frame: square corners, the natural 4:5 ratio and a 28 px strip fused to the lower edge. */
.co-frame{display:block;margin:0;min-width:0;background:var(--sand)}
.co-frame .co-frame-photo{width:100%;aspect-ratio:4/5}
.co-frame .media.is-missing>.media-fallback{font-size:20px}
/* One 28 px line; with wider text spacing or zoom a long "Place · Name" wraps instead of being cut off. */
.co-strip{display:block;min-height:28px;padding:4px 7px;font-size:13px;font-weight:600;line-height:20px;letter-spacing:.005em;overflow-wrap:anywhere;background:var(--stone);color:var(--ink)}
.strip-mint .co-strip{background:var(--mint)}
.strip-sand .co-strip{background:var(--sand)}
.strip-night .co-strip{background:var(--night);color:var(--cream)}

/* Bag header: the picked animals fanned like a hand of prints (kit .fan). */
.bag-heading{display:grid;justify-items:start}
.bag-fan{width:200px;height:104px;margin:2px 0 14px}
.bag-fan[data-count="1"]{width:84px}
.bag-fan[data-count="2"]{width:116px}
.bag-fan[data-count="3"]{width:146px}
.bag-fan[data-count="4"]{width:174px}
.bag-fan>*{width:64px;height:80px;overflow:hidden;transform:translateX(calc(var(--fan-shift,0px) * 1.9)) translateY(calc(-1 * var(--fan-lift,0px))) rotate(var(--fan-turn,0deg))}
.fan-print .media{width:100%;height:100%;background:var(--sand)}
.fan-print .media-fallback{display:none!important}
.bag-fan>.fan-more{display:grid;place-items:center;background:var(--night);color:var(--cream);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}

/* Bag lines: one print per animal, the controls underneath. */
.bag-main{display:grid;gap:24px;align-content:start;min-width:0}
.bag-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bag-line{display:grid;grid-template-columns:clamp(118px,36vw,168px) minmax(0,1fr);gap:12px;padding:10px;background:var(--paper)}
.bag-frame{align-self:start}
.bag-line-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding-top:4px}
.bag-line-copy h2{font:500 clamp(22px,6.4vw,28px)/1.05 var(--sans);letter-spacing:-.03em;overflow-wrap:anywhere}
.bag-line-copy h2 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em;text-decoration-color:rgba(38,38,38,.35)}
.bag-line-copy>p{font-size:15px;line-height:1.35;color:var(--muted)}
.bag-line-tags{display:flex;flex-wrap:wrap;gap:6px}
.bag-line .track-badge{min-height:26px;padding:3px 9px;font-size:13px;line-height:1.25}
.bag-line .track-badge.is-live{background:var(--mint)}
.bag-line .track-badge.is-delayed{background:var(--sand)}
.bag-remove{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:var(--pill);background:var(--sand);color:var(--ink);font-size:15px;font-weight:600;line-height:1.2;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:transform .16s var(--ease-out)}
.bag-remove.is-holding{transform:scale(.97)}
.bag-remove:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.bag-line.is-leaving{opacity:0;transform:scale(.97);transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
/* The kit's undo toast is centred with left:50%, which shrink-wraps it to half the screen on phones; size it to its content.
   (Reported to the lead for kit.css.) */
.kit-undo{width:max-content}
.bag-line .own-toggle,.bag-line .pet-name{grid-column:1/-1}
@media(hover:hover) and (pointer:fine){.bag-line-copy h2 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}.bag-remove:hover{background:var(--stone)}}

/* Complete your trip: the missing animals as a small roll, each one tap away. */
.bag-complete{display:grid;gap:14px;padding:22px 16px;background:var(--stone)}
.bag-complete h2{font-size:clamp(28px,7vw,38px)}
.bag-complete-trip{display:grid;gap:12px}
.bag-complete-trip>p{font-size:16px}
.bag-complete-roll{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.bag-complete-roll li{display:grid;gap:8px;align-content:start;min-width:0;font-size:15px;line-height:1.3}
.co-chip-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--pill);background:var(--ink);color:var(--cream);font-size:15px;font-weight:600;white-space:nowrap;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--night) 45%,transparent);transition:transform .16s var(--ease-out),background-color .2s ease,color .2s ease}
.co-chip-button:active{transform:translateY(1px) scale(.97)}
.bag-complete .co-button{width:100%}
@media(hover:hover) and (pointer:fine){.co-chip-button:hover{background:var(--ocean-2)}}
.co-chip-button.is-done,.co-button.is-done,.co-chip-button.is-done:hover,.co-button.is-done:hover{background:var(--mint);color:var(--ink)}

/* Gift switch */
.bag-gift{padding:18px 16px;background:var(--paper)}
.co-switch{display:flex;align-items:flex-start;gap:14px;min-height:44px;cursor:pointer}
.co-switch input{appearance:none;-webkit-appearance:none;flex-shrink:0;position:relative;width:52px;height:30px;margin:0;border-radius:var(--pill);background:var(--stone);transition:background-color .2s ease}
/* The knob carries the state at 3:1 or more against its track (WCAG 1.4.11): a soft dark knob on stone when off,
   an ink knob on mint when on. A paper knob read at about 1.6:1 on stone and 1.9:1 on mint. */
.co-switch input::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--muted);transition:transform .2s var(--ease-out),background-color .2s ease}
.co-switch input:checked{background:var(--mint)}
.co-switch input:checked::after{transform:translateX(22px);background:var(--ink)}
.co-switch input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.co-switch strong{display:block;font-size:17px;font-weight:600}
.co-switch small{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.bag-gift-fields{margin-top:18px}
.bag-gift-fields[hidden]{display:none}

/* Price summary: a receipt that prints out of its slot, then the sky-blue nudge and the mint checkout pill. */
.co-summary{display:grid;gap:16px;align-content:start;min-width:0;padding:22px 16px;background:var(--sand)}
.co-summary h2{font-size:clamp(28px,7vw,36px)}
.co-numbers{display:grid;gap:10px}
.co-numbers:focus{outline:none}
.co-summary .receipt-slot{position:relative;padding-top:10px}
.co-summary .receipt-slot::before{content:"";position:absolute;top:0;left:50%;z-index:1;width:min(100%,292px);height:10px;border-radius:var(--pill);background:var(--night);transform:translateX(-50%)}
/* A narrow slip, centred under the slot, like a till roll. */
.co-summary .receipt{--receipt-rule:color-mix(in srgb,var(--ink) 32%,transparent);width:min(100% - 24px,264px);margin:0 auto;padding:18px 14px 30px}
.receipt-head{display:grid;justify-items:center;gap:2px;margin-bottom:6px;padding-bottom:12px;border-bottom:1.5px dashed var(--receipt-rule,var(--line));text-align:center;font-size:13px;color:var(--muted)}
.receipt-head strong{padding-left:.24em;font-size:17px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.receipt-head time{font-variant-numeric:tabular-nums}
.receipt-lines{list-style:none;margin:0;padding:0}
.receipt-lines.fade-list{margin:0 -4px;padding:12px 4px}
.receipt-lines.fade-list:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.receipt-row{position:relative;align-items:baseline;font-size:15px;line-height:1.35}
.receipt-row>span:first-child{min-width:0;overflow-wrap:anywhere}
.receipt-row>span:last-child,.receipt-row>s,.receipt-row>strong{flex-shrink:0;font-variant-numeric:tabular-nums}
.receipt-row small{font-size:13px;color:var(--muted)}
.receipt-row.is-list{color:var(--muted)}
.receipt-row.is-saving{font-weight:600}
.receipt-row.total{flex-direction:column;align-items:center;gap:6px;background:none;border-top:1.5px dashed var(--receipt-rule,var(--line));text-align:center;font-size:14px;font-weight:500;color:var(--muted)}
.receipt-row.total strong{font-size:clamp(32px,9vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.receipt-foot{display:grid;justify-items:center;gap:4px;margin-top:14px;padding-top:14px;border-top:1.5px dashed var(--receipt-rule,var(--line));text-align:center;font-size:14px;line-height:1.4;color:var(--muted)}
.receipt-foot p{margin:0;overflow-wrap:anywhere}
.receipt-foot .receipt-thanks{font-size:16px;font-weight:600;color:var(--ink)}
.receipt-barcode{display:block;width:150px;height:32px;margin:8px 0 2px;fill:var(--ink)}
.receipt-foot .receipt-motto{font-size:12px}
.bag-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.bag-facts div{position:relative;padding:10px 12px;background:var(--paper)}
.bag-facts dt{font-size:14px;color:var(--muted)}
.bag-facts dd{margin:2px 0 0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.bag-progress{display:grid;gap:8px;padding:16px;background:var(--sky);color:var(--ink);font-size:15px;line-height:1.45}
.bag-progress p{color:var(--ink)}
.bag-progress.is-complete{background:var(--mint)}
.bag-next{font-size:17px;font-weight:500}
.bag-next strong{font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.bag-meter{height:10px;border-radius:var(--pill);background:color-mix(in srgb,var(--ink) 20%,transparent);overflow:hidden}
.bag-meter-fill{display:block;height:100%;width:var(--share,10%);border-radius:inherit;background:var(--ink)}
.co-payment-note{font-size:14px;color:var(--muted);text-align:center}

/* Sticky roll bar on phones */
.bag-sticky{background:var(--night);color:var(--cream)}
.bag-sticky strong{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bag-sticky .co-button{flex-shrink:0;min-height:48px;padding:10px 20px}

@media(min-width:900px){
 .wildomi-commerce{padding:36px var(--space) 120px}
 .co-layout{grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:48px;align-items:start}
 .co-summary{position:sticky;top:24px;padding:28px}
 .co-summary.is-tall{position:static}
 /* A long bag makes the price column taller than the screen: the roll bar floats in whenever the checkout pill is out of view. */
 .wildomi-commerce .sticky-cta.bag-sticky:not([hidden]){display:flex!important;left:auto;right:24px;bottom:24px;gap:24px;width:auto;padding:8px 8px 8px 26px;border-radius:var(--pill)}
 .bag-line{grid-template-columns:184px minmax(0,1fr);padding:12px}
 .bag-frame{grid-row:1/span 3}
 .bag-line .own-toggle,.bag-line .pet-name{grid-column:2}
 .bag-complete{padding:28px}
 .bag-complete-roll{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Checkout */
.co-checkout-form{display:grid;gap:12px;min-width:0}
.co-checkout-stage{padding:22px 16px 10px;background:var(--paper)}
.co-checkout-stage h2{font-size:clamp(26px,6vw,32px);margin-bottom:16px}
.co-gift-summary p{font-size:16px}
.co-gift-summary blockquote{margin:10px 0 4px;padding:14px 16px;background:var(--cream);font-size:18px;line-height:1.45;overflow-wrap:anywhere}
.co-checkout-form>.co-button{margin-top:4px;gap:12px;padding-inline:20px;font-size:16px}
.co-secure-note{font-size:14px;color:var(--muted);text-align:center}
/* Express checkout: Stripe's Apple Pay and Google Pay buttons right under the main button, then the clickwrap line. While
   Stripe decides which buttons this device offers, the block keeps its space but shows nothing, so a device without a wallet
   never sees the line or the divider; the block then closes. */
.co-express{display:grid;gap:10px;min-width:0}
.co-express[hidden]{display:none}
.co-express>*{transition:opacity .2s var(--ease-out)}
.co-express[data-state="loading"]>*{visibility:hidden;opacity:0}
.co-express-divider{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4;color:var(--muted)}
.co-express-divider::before,.co-express-divider::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.co-express-buttons{min-width:0;min-height:48px}
.co-express-terms{font-size:16px;line-height:1.5;color:var(--muted)}
.co-express-terms a{color:var(--ink);text-decoration:underline}
.co-summary-animals{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.co-summary-animals li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:6px 10px 6px 6px;background:var(--paper);font-size:14px;line-height:1.3;color:var(--muted)}
.co-summary-animals strong{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.co-summary .bag-photo.small,.co-summary-animals .bag-photo{width:52px;aspect-ratio:4/5}

/* Gift builder: the postcard preview */
.co-gift-layout{display:grid;gap:28px}
.co-gift-editorial{display:grid;gap:16px;align-content:start}
.co-gift-editorial h1{font-size:clamp(40px,10.5vw,80px)}
.co-gift-editorial>p{font-size:18px;max-width:46ch}
.co-gift-points{margin:0;padding-left:20px;display:grid;gap:6px;font-size:16px}
.co-gift-card{display:grid;gap:18px;align-content:start;min-width:0}
#co-gift-form .co-form-help{margin:-6px 0 14px}
/* B03b: the note sits above the button with its own space, never pulled up under it. */
#co-gift-form .co-gift-help{margin:4px 0 16px;font-size:16px}
.co-postcard{position:relative;min-height:220px;padding:22px 128px 22px 20px;background:var(--paper);transform:rotate(-1deg)}
.co-postcard-stamp{position:absolute;top:16px;right:16px;width:96px;padding:5px;background:var(--cream)}
.co-postcard-stamp .stamp-photo{aspect-ratio:4/5}
.co-postcard-to{font-weight:600;font-size:16px}
.co-postcard-message{margin:12px 0;font-size:20px;line-height:1.4;letter-spacing:-.01em;overflow-wrap:anywhere}
.co-postcard-from{font-size:15px;color:var(--muted)}
#co-gift-form .co-button{width:100%}
@media(min-width:900px){.co-gift-layout{grid-template-columns:1fr 1fr;gap:72px}.co-gift-editorial{position:sticky;top:24px}}

/* After payment */
.co-order-success{display:grid;gap:16px;justify-items:start;max-width:640px;padding:28px 20px;background:var(--paper)}
.co-order-success h1{font-size:clamp(38px,9vw,60px)}
.co-pets{font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.co-success-check{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--mint);font-size:24px}
.co-order-reference{display:grid;gap:6px;width:100%;padding:14px 16px;background:var(--cream)}
.co-order-reference>span:first-child{font-size:15px;color:var(--muted)}
/* The reference is one long token: monospace, broken at any character so it never pushes the page wider. */
.co-reference-row{display:flex;align-items:center;gap:12px;min-width:0}
.co-reference-code{flex:1;min-width:0;font:500 16px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em;word-break:break-all;overflow-wrap:anywhere}
.co-copy-button{flex-shrink:0;min-height:44px;min-width:64px;padding:0 16px;border:0;border-radius:var(--pill);background:var(--paper);color:var(--ink);font:600 16px/1 var(--sans);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--ink) 14%,transparent)}
.co-copy-status:empty{display:none}
.co-copy-status,.co-gift-status{font-size:16px;color:var(--muted)}
.co-flash{max-width:640px;margin:0 0 16px;padding:14px 16px;background:var(--mint);color:var(--ink);font-size:17px;font-weight:600}
/* "Send Maya their gift" on the success page */
.co-gift-send{display:grid;gap:14px;max-width:640px;margin-top:20px;padding:24px 20px;background:var(--mint)}
.co-gift-send h2{font-size:clamp(28px,7vw,40px);overflow-wrap:anywhere}
.co-gift-send-kicker{font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.co-gift-send-body{display:grid;gap:14px;min-width:0}
.co-gift-send-body .co-loader{min-height:120px}
.co-gift-send-body p{font-size:17px;line-height:1.5}
.co-gift-preview,.co-gift-from{display:grid;gap:6px;margin:0}
.co-gift-preview figcaption{font-size:15px;font-weight:600}
.co-gift-preview blockquote,.co-gift-from blockquote{margin:0;padding:14px 16px;border-left:3px solid var(--lime);background:var(--paper);font-size:18px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}
.co-gift-link{display:grid;gap:6px;font-size:16px;font-weight:600}
.co-gift-link input{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:500 16px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-overflow:ellipsis}
.co-gift-actions{display:grid;gap:10px}
.co-gift-actions .co-button{width:100%}
.co-gift-share-fallback{display:grid;gap:4px}
.co-gift-share-fallback[hidden]{display:none}
.co-gift-code{font-size:16px}
.co-gift-code code{font:600 17px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;word-break:break-all}
.co-gift-again a{text-decoration:underline}
.co-gift-send-error{color:var(--error);font-weight:600}
@media(min-width:560px){.co-gift-actions{grid-template-columns:1fr 1fr}}
/* Checkout: a started gift whose details are not in this tab */
.co-gift-missing{display:grid;gap:12px;padding:20px 16px;background:color-mix(in srgb,var(--coral) 16%,var(--paper))}
.co-gift-missing:focus{outline:2px solid var(--ink);outline-offset:2px}
.co-gift-missing p{font-size:17px;line-height:1.5}
.co-gift-missing-actions{display:grid;gap:10px}
.co-gift-missing-actions .co-button{width:100%}
.co-postpurchase-account{display:grid;gap:12px;max-width:640px;margin-top:20px;padding:24px 20px;background:var(--sand)}
.co-postpurchase-account h2{font-size:clamp(28px,6vw,36px)}
.co-postpurchase-account .co-button{width:100%}
.co-activate-layout{display:grid;gap:28px}
.co-activate-layout h1{font-size:clamp(40px,10vw,76px);margin-bottom:12px}
.co-activate-layout p{font-size:17px;max-width:52ch}
.co-activation-panel{display:grid;gap:12px;align-content:start;padding:24px 20px;background:var(--paper)}
.co-activation-panel .co-gift-from blockquote{background:var(--cream)}
.co-activation-panel h2{font-size:clamp(26px,6vw,34px)}
.co-activation-panel .co-button{width:100%}
.co-activation-code{display:grid;gap:4px;font-size:16px}
.co-activation-code code{font:600 18px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;word-break:break-all}
.co-activation-keep,.co-activation-fine{font-size:16px;color:var(--muted)}
.co-activation-panel h2:focus{outline:none}
.co-withdrawal{max-width:760px}
.co-withdrawal-intro{display:grid;gap:14px;font-size:17px;line-height:1.6;margin-bottom:20px}
.co-withdrawal-intro a{text-decoration:underline}
.co-confirmation-box{padding:16px;background:var(--paper);line-height:1.6;overflow-wrap:anywhere}
.co-confirmation-box strong{display:block}
.co-form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.co-back{min-height:44px;padding:0 6px;font-weight:600;text-decoration:underline}
.co-withdrawal-success{display:grid;gap:12px;padding:20px;background:var(--sand)}
@media(min-width:900px){.co-activate-layout{grid-template-columns:1fr 1fr;gap:72px}}

/* Reduced motion and Pause motion: everything settles at once. */
@media(prefers-reduced-motion:reduce){
 .co-button,.co-chip-button,.bag-remove,.bag-line.is-leaving,.co-switch input,.co-switch input::after,.co-field input,.co-field select,.co-field textarea,.co-express>*{transition:none}
 .co-button:active,.co-chip-button:active,.bag-remove.is-holding{transform:none}
 .co-postcard{transform:none}
}
:root[data-motion-paused="true"] :is(.co-button,.co-chip-button,.bag-remove,.bag-line.is-leaving,.co-switch input,.co-switch input::after,.co-express>*){transition:none}
:root[data-motion-paused="true"] :is(.co-button:active,.co-chip-button:active,.bag-remove.is-holding){transform:none}

/* Bundle picker: choose a bundle's animals. A bottom sheet on phones, a centred panel on wide screens. */
.pick-sheet{width:100%;max-width:640px;max-height:calc(100dvh - 24px);margin:auto auto 0;padding:0;border:0;border-radius:16px 16px 0 0;background:var(--cream);color:var(--ink);overflow:hidden}
.pick-sheet[open]{display:flex}
.pick-sheet::backdrop{background:rgba(20,20,20,.45)}
html:has(.pick-sheet[open]){overflow:hidden}
.pick-form{display:flex;flex-direction:column;width:100%;max-height:calc(100dvh - 24px)}
.pick-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 16px 12px}
.pick-head h2{font-size:28px;line-height:1.05}
.pick-head h2:focus{outline:none}
.pick-head p{margin-top:6px;font-size:16px;color:var(--muted)}
.pick-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sand);font-size:26px;line-height:1}
.pick-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 16px}
.pick-place{min-width:0;margin:0 0 18px;padding:0;border:0}
.pick-place legend{padding:0;margin-bottom:8px;font-size:15px;font-weight:500;color:var(--muted)}
.pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pick-item{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:10px;min-height:72px;padding:8px;border-radius:var(--radius);background:var(--paper);cursor:pointer;transition:background-color .15s ease}
.pick-item input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick-photo .media,.pick-photo img{display:block;width:52px;height:52px;object-fit:cover}
.pick-name{min-width:0}
.pick-name strong{display:block;font-size:16px;font-weight:600;line-height:1.2}
.pick-name small{display:block;font-size:13px;line-height:1.3;color:var(--muted);overflow-wrap:break-word;hyphens:auto}
/* The tick: a rounded box that redraws itself as a check mark (adapted from Uiverse.io by SelfMadeSystem, MIT). */
.pick-tick{position:absolute;top:4px;left:4px;z-index:1;width:26px;height:26px;padding:6px;border-radius:7px;background:rgba(248,248,244,.94);overflow:visible;pointer-events:none;transition:background-color .2s ease}
.pick-tick path{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:241 9999999;stroke-dashoffset:0;transition:stroke-dasharray .5s ease,stroke-dashoffset .5s ease}
.pick-item:has(input:checked) .pick-tick{background:var(--mint)}
.pick-item:has(input:checked) .pick-tick path{stroke-dasharray:70.5096664428711 9999999;stroke-dashoffset:-262.2723388671875}
.pick-item:has(input:checked){background:#d9f3e8}
.pick-item:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.pick-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--paper)}
.pick-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.pick-count{margin:0;font-size:15px;line-height:1.4}
.pick-status .co-quiet-link{flex:none;min-height:44px;font-size:15px}
.pick-status .co-quiet-link[hidden]{display:none}
.pick-foot>.co-button{width:100%;justify-content:space-between}
.pick-foot>.co-button:disabled{opacity:.5}
.pick-sheet[open]{animation:pick-in .32s var(--ease-out)}
@keyframes pick-in{from{transform:translateY(32px);opacity:0}}
@media(min-width:760px){.pick-sheet{margin:auto;border-radius:16px}.pick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.pick-sheet[open]{animation:none}.pick-item,.pick-tick,.pick-tick path{transition:none}}
:root[data-motion-paused="true"] .pick-sheet[open]{animation:none}
:root[data-motion-paused="true"] :is(.pick-tick,.pick-tick path){transition:none}

/* Gift opened: the wrap parts and the animal is underneath. Rare, once per gift, so it may take a second. */
.co-gift-reveal{display:grid;gap:12px;margin:-4px 0 4px}
.co-gift-reveal.is-many{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.co-gift-reveal-cell{display:grid;gap:8px;margin:0;min-width:0}
.co-gift-reveal-stage{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--sage);isolation:isolate}
.co-gift-reveal:not(.is-many) .co-gift-reveal-stage{width:100%;max-width:420px}
.co-gift-reveal-stage>.media{position:absolute;inset:0}
.co-gift-reveal-stage>.media img,.co-gift-reveal-film{width:100%;height:100%;object-fit:cover}
.co-gift-reveal-film{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.co-gift-reveal-film.is-playing{opacity:1}
.co-gift-reveal figcaption{display:grid;gap:2px;font-size:16px;color:var(--muted);line-height:1.3}
.co-gift-reveal figcaption strong{font:400 clamp(26px,7vw,34px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.co-gift-reveal.is-many figcaption strong{font-size:20px}
.co-gift-reveal-meaning{margin-top:6px;color:var(--ink);font-size:16px;line-height:1.45}
.co-gift-wrap,.co-gift-bow{display:none}
html[data-motion-paused="true"] .co-gift-reveal-film{opacity:0;transition:none}

@media (prefers-reduced-motion:no-preference){
  html:not([data-motion-paused="true"]) .co-gift-wrap{display:block;position:absolute;top:0;bottom:0;width:50.5%;z-index:2;animation:co-wrap-open .65s cubic-bezier(.77,0,.175,1) calc(.36s + var(--i,0) * .12s) both}
  /* The ribbon: a dark band on each inner edge meets in the middle, and one band runs across. */
  html:not([data-motion-paused="true"]) .co-gift-wrap.is-left{left:0;background:linear-gradient(90deg,transparent calc(100% - 12px),var(--ocean) 0) ,linear-gradient(transparent calc(50% - 12px),var(--ocean) 0 calc(50% + 12px),transparent 0),var(--lime);--to:-102%}
  html:not([data-motion-paused="true"]) .co-gift-wrap.is-right{right:0;background:linear-gradient(90deg,var(--ocean) 12px,transparent 0),linear-gradient(transparent calc(50% - 12px),var(--ocean) 0 calc(50% + 12px),transparent 0),var(--lime);--to:102%}
  html:not([data-motion-paused="true"]) .co-gift-bow{display:block;position:absolute;left:50%;top:50%;z-index:3;width:84px;height:48px;margin:-24px 0 0 -42px;animation:co-bow-pop .42s var(--ease-out) calc(var(--i,0) * .12s) both}
  html:not([data-motion-paused="true"]) .co-gift-bow::before,html:not([data-motion-paused="true"]) .co-gift-bow::after{content:"";position:absolute;top:0;width:40px;height:48px;border:10px solid var(--ocean);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;box-sizing:border-box}
  html:not([data-motion-paused="true"]) .co-gift-bow::before{left:0;transform:rotate(-24deg)}
  html:not([data-motion-paused="true"]) .co-gift-bow::after{right:0;transform:rotate(24deg)}
  html:not([data-motion-paused="true"]) .co-gift-reveal-stage>.media img{animation:co-reveal-settle 1s var(--ease-out) calc(.36s + var(--i,0) * .12s) both}
  html:not([data-motion-paused="true"]) .co-gift-reveal figcaption{animation:co-reveal-rise .32s var(--ease-out) calc(.8s + var(--i,0) * .12s) both}
  html:not([data-motion-paused="true"]) .co-activation-panel:has(.co-gift-reveal)>:not(.co-gift-reveal){animation:co-reveal-rise .32s var(--ease-out) var(--d,0s) both}
  html:not([data-motion-paused="true"]) .co-gift-reveal~.co-gift-from{--d:.9s}
  html:not([data-motion-paused="true"]) .co-gift-reveal~h2{--d:.96s}
  html:not([data-motion-paused="true"]) .co-gift-reveal~p{--d:1.02s}
  html:not([data-motion-paused="true"]) .co-gift-reveal~.co-button{--d:1.08s}
}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion-paused="true"]) .co-gift-reveal-stage>.media img{animation:co-reveal-fade .2s ease both}
}
@keyframes co-wrap-open{to{transform:translateX(var(--to))}}
@keyframes co-bow-pop{0%{transform:scale(1);opacity:1}55%{transform:scale(1.15);opacity:1}100%{transform:scale(.9);opacity:0}}
@keyframes co-reveal-settle{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes co-reveal-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes co-reveal-fade{from{opacity:0}to{opacity:1}}