/* The live store (cms step 3, 11 Oct 2026): stock states and the forms that send. Loaded only on pages the store
   renders from its database. WEB-BRAND-SPEC: charcoal type, burgundy only for the one primary action and errors,
   lavender for the success panel and hairlines; no colour carries a state on its own. */

/* "Sold out" and "The last piece": quiet words, never a badge */
.pc-state { margin-top: 4px; font-size: 13px; letter-spacing: .04em; color: var(--c80); }
.pdp-state { margin-top: 4px; font-size: 14px; letter-spacing: .04em; color: var(--c80); }

/* "Tell me if it returns" */
.notify { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 4px; border-top: 1px solid var(--lav); }
.notify .h4 { margin: 0; }
.notify .small { margin: 0 0 8px; }
.notify .field { margin-bottom: 4px; }

/* a form's answer: an error (burgundy, icon and words) or the lavender success panel with a check */
.form-msg:empty { display: none; }
.form-msg { margin-top: 8px; }
.form-msg.form-ok { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--lav); color: var(--charcoal); border-radius: var(--r); font-size: 14px; }
.form-msg svg { width: 16px; height: 16px; flex: none; }
.circle-form .form-msg.form-ok { justify-content: flex-start; }
.field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--burgundy); }
[aria-busy="true"] { cursor: progress; }

/* the bag: one piece has no quantity control */
.bag-one { margin: 0; font-size: 14px; color: var(--c80); }
.bag-qty button[disabled] { color: var(--c60); cursor: default; }
.bag-sold { color: var(--burgundy); }

/* a picture uploaded from the admin: whole on white, never cropped */
.fit-whole { position: absolute; inset: 0; display: block; }
.fit-whole img, img.whole { width: 100%; height: 100%; object-fit: contain; background: var(--white); }

/* ---------- step 5: the checkout, the order page, the account, the hearts ---------- */
/* the steps fold with the site's easing (reduced motion: they simply open) */
.co-live .step-body { display: block; overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; padding-top: 0; transition: max-height .6s var(--ease), opacity .4s var(--ease), padding-top .6s var(--ease), visibility 0s linear .6s; }
.co-live .step.open .step-body { max-height: 2400px; opacity: 1; visibility: visible; padding-top: 20px; transition: max-height .8s var(--ease), opacity .5s var(--ease) .1s, padding-top .6s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .co-live .step-body, .co-live .step.open .step-body { transition: none; } }
.co-live .step.done:not(.open) .step-sum { color: var(--charcoal); }
.co-notice { margin: 0 0 16px; padding: 14px 16px; background: var(--lav20); border: 1px solid var(--lav); border-radius: var(--r); font-size: 15px; }
.co-live .field-row { gap: 16px; }
@media (max-width: 899px) { .co-live .co-sum { order: 0; } }
.pay-opts { border: 0; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pay-opts legend { margin-bottom: 12px; }
.pay-opt { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--c60); border-radius: var(--r); cursor: pointer; background: var(--white); }
.pay-opt:has(input:checked) { background: var(--lav); border-color: var(--charcoal); }
.pay-opt input { appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1px solid var(--c60); border-radius: 50%; display: grid; place-items: center; background: var(--white); }
.pay-opt input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--charcoal); }
.pay-opt input:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.pay-txt { display: flex; flex-direction: column; gap: 2px; }
.pay-name { font-weight: 600; }
.co-links { margin-top: 12px; }
.co-state { color: var(--c80); }
.co-giftline { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--lav); white-space: pre-line; }
.gift-more { padding: 8px 0 0 32px; }
[data-pay][disabled] { background: var(--burgundy20); color: var(--burgundy80); }

/* the order page: the first piece arrives with the sand frame wipe */
.order-main { display: flex; flex-direction: column; gap: 32px; }
.order-piece { max-width: 420px; }
.order-wipe { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--white); }
.order-wipe img { width: 100%; height: 100%; object-fit: contain; display: block; }
.order-wipe::after { content: ""; position: absolute; inset: 0; background: var(--sand); transform-origin: right center; transform: scaleX(1); }
.order-piece.in .order-wipe::after { transform: scaleX(0); transition: transform 1.2s var(--ease-io) .15s; }
@media (prefers-reduced-motion: reduce) { .order-wipe::after { display: none; } }
.order-block { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--lav); }
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; min-height: 40px; color: var(--c80); }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--c60); background: var(--white); justify-self: center; }
.tl-done { color: var(--charcoal); }
.tl-done .tl-dot { background: var(--charcoal); border-color: var(--charcoal); }

/* the account */
.acct-in { max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.acct-form { max-width: 440px; display: flex; flex-direction: column; gap: 4px; }
.acct-form .btn { align-self: flex-start; }
.acct-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--lav); }
.acct-bar .tabs { flex: 1; }
.acct-list { display: flex; flex-direction: column; }
.acct-row { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--lav); }
.acct-wish { align-items: center; }
.acct-wish .bag-thumb { width: 72px; height: 72px; flex: none; }
.acct-wish > div:nth-child(2) { flex: 1; }
.acct-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.acct-addr { padding: 20px 0; }
.acct .tab[aria-selected="true"] { border-bottom: 1px solid var(--charcoal); }

/* the hearts: an outline; filled charcoal when kept (the word is in the label) */
.heart { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .86); color: var(--charcoal); }
.heart .ic { width: 20px; height: 20px; }
.heart[aria-pressed="true"] .ic path { fill: currentColor; }
.heart:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.pc { position: relative; }
.pdp-heart { position: static; margin-top: 8px; border: 1px solid var(--lav); }

/* phones: grid children may shrink (a fieldset otherwise keeps its min-content width); the slim header's link stays on one line */
.co-live .co-form, .co-live .co-sum, .co-live .order-main { min-width: 0; }
.pay-opts { min-inline-size: 0; }
.hdr-min .back-bag { white-space: nowrap; }
@media (max-width: 767px) { .hdr-min .back-bag { font-size: 14px; gap: 6px; } }
.co-live .step-h { white-space: nowrap; flex: none; }
.co-live .step-sum { flex: 1; min-width: 0; }

/* ---------- step 7 ---------- */
/* L6: test mode is impossible to miss on the checkout and order pages */
.test-ribbon { margin: 0; padding: 10px var(--gut); background: var(--lav); color: var(--charcoal); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-align: center; border-bottom: 1px solid var(--charcoal); }
/* #16: the providers' own logos (files unaltered); Tamara at 28 px on phones and 32 px on the desk (its guideline) */
.pay-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-logo { display: inline-block; flex: none; }
.pay-logo-tamara img { display: block; height: 28px; width: auto; }
@media (min-width: 900px) { .pay-logo-tamara img { height: 32px; } }
/* Tabby's file is an 842 × 595 artboard with the logo at x 77–765, y 189–405 (measured): the box shows the logo itself
   at 20 px tall, without touching the file */
.pay-logo-tabby { width: 66px; height: 22px; overflow: hidden; position: relative; }
.pay-logo-tabby img { position: absolute; height: 55px; width: auto; left: -6px; top: -16px; max-width: none; }
.tabby-learn { white-space: nowrap; }
/* #20: shop and checkout targets are 44 px at least (K's bar) */
.heart { width: 44px; height: 44px; }
.bag-qty button { width: 44px; height: 44px; }
.step-edit, .co-links .link, .tabby-learn, .acct-right .link, [data-ac-other], [data-co-signin] { display: inline-flex; align-items: center; min-height: 44px; }
.acct .tab { min-height: 44px; }
/* #29: the timeline keeps charcoal to strokes */
.tl-done .tl-dot { background: var(--white); border: 2px solid var(--charcoal); }
/* #32: the sticky bar's name in Aileron (Amandine is never under 20 px) */
.sbar-name { font-family: var(--body); }
/* #14: the account: who and Sign Out above, the tabs on their own row, scrolling sideways on a phone */
.acct-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.acct-bar { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.acct-bar .tabs { display: flex; gap: 24px; white-space: nowrap; }
.acct-pane:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }