/* Frend checkout: Shopify stock one-page checkout geometry, Frend accents (plum #1f003d, teal #457f79). */
:root { --co-ink: #1f003d; --co-text: #000; --co-sub: #707070; --co-line: #dedede; --co-bg2: #f5f5f5; --co-err: #d91c1c; --co-accent: #457f79; --co-r: 5px }
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body.co { margin: 0; background: #fff; color: var(--co-text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif }
.co a { color: var(--co-ink) }
.co h1, .co h2, .co h3, .co p { margin: 0 }
.co h2 { font-size: 21px; font-weight: 600; line-height: 1.3; margin-bottom: 14px }
.co .co-h3 { font-size: 17px }
.co-subtle { color: var(--co-sub); font-size: 14px; margin-bottom: 14px }

/* header */
.co-header { border-bottom: 1px solid var(--co-line) }
.co-header__in { max-width: 1110px; margin: 0 auto; padding: 21px 21px; display: flex; align-items: center; justify-content: space-between }
.co-logo img { display: block; height: 39px; width: auto }
.co-bag { color: var(--co-ink); display: inline-flex }

/* columns */
.co-cols { display: flex; flex-direction: column }
.co-main { padding: 21px 21px 0 }
.co-form { max-width: 560px; margin: 0 auto }
.co-sec { margin-bottom: 32px }

/* mobile summary bar (collapsed by default) */
.co-sumbar { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 17px 21px; border: 0; border-bottom: 1px solid var(--co-line); background: var(--co-bg2); color: var(--co-ink); font: inherit; font-size: 14px; cursor: pointer }
.co-sumbar__l { display: inline-flex; align-items: center; gap: 6px }
.co-sumbar__l svg { transition: transform .2s }
.co-sumbar[aria-expanded="true"] .co-sumbar__l svg { transform: rotate(180deg) }
.co-sumbar__t { font-size: 17px; color: var(--co-text) }
.co-summary { display: none; background: var(--co-bg2); padding: 21px; border-bottom: 1px solid var(--co-line) }
body.co-sum-open .co-summary { display: block }
.co-cols > .co-summary { order: -1 }

/* fields */
.sp-field { margin-bottom: 14px; min-width: 0 }
.sp-box { position: relative }
.sp-box input, .sp-box select { display: block; width: 100%; height: 52px; padding: 14px 11px 0; border: 1px solid var(--co-line); border-radius: var(--co-r); background: #fff; color: var(--co-text); font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; outline: 0; transition: border-color .15s, box-shadow .15s }
.sp-box input::placeholder { color: transparent }
.sp-box label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--co-sub); font-size: 14px; pointer-events: none; transition: all .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px) }
.sp-field.is-filled label, .sp-box input:focus + label, .sp-box select + label { top: 8px; transform: none; font-size: 12px }
.sp-box input:not(:focus):placeholder-shown + label { }
.sp-box input:focus, .sp-box select:focus { border-color: var(--co-ink); box-shadow: 0 0 0 1px var(--co-ink) }
.sp-select .sp-box::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border: solid var(--co-sub); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none }
.sp-select select { padding-right: 34px; cursor: pointer }
.sp-field.is-invalid input, .sp-field.is-invalid select { border-color: var(--co-err); box-shadow: 0 0 0 1px var(--co-err) }
.sp-err { color: var(--co-err); font-size: 12px; margin-top: 4px }
.sp-err:empty { display: none }
.sp-row2, .sp-row3 { display: grid; gap: 0 14px }
.sp-row2 { grid-template-columns: 1fr 1fr }
.sp-row3 { grid-template-columns: 1fr }
.sp-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; margin-top: 2px }
.sp-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--co-ink) }

/* express */
.co-express { margin-bottom: 26px; text-align: center }
.co-express__label { color: var(--co-sub); font-size: 14px; margin-bottom: 12px }
.co-express__row { display: flex; gap: 10px }
.co-wbtn { flex: 1; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: var(--co-r); font: inherit; font-size: 18px; font-weight: 500; cursor: pointer }
.co-wbtn:has(img) { padding: 0; overflow: hidden }
.co-wbtn img { width: 100%; height: 100%; object-fit: cover; display: block }
.co-wbtn--apple { background: #000; color: #fff }
.co-wbtn--google { background: #000; color: #fff }
.co-express__err { color: var(--co-err); font-size: 13px; margin-top: 8px }
.co-express__err:empty { display: none }
.co-or { position: relative; margin: 22px 0 0; color: var(--co-sub); font-size: 14px }
.co-or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--co-line) }
.co-or span { position: relative; background: #fff; padding: 0 14px }

/* shipping method */
.co-pending { background: var(--co-bg2); border-radius: var(--co-r); padding: 17px; color: var(--co-sub); font-size: 14px }
.co-rate { display: flex; justify-content: space-between; align-items: center; padding: 17px; border: 1px solid var(--co-ink); border-radius: var(--co-r); background: #f6f4f8; font-size: 14px }

/* payment box */
.co-paybox { border: 1px solid var(--co-ink); border-radius: var(--co-r); overflow: hidden }
.co-paybox__head { display: flex; align-items: center; gap: 12px; padding: 17px; background: #f6f4f8; border-bottom: 1px solid var(--co-line); font-size: 14px }
.co-radio { width: 18px; height: 18px; border-radius: 50%; border: 6px solid var(--co-ink); background: #fff; flex: none }
.co-paybox__body { padding: 17px; background: var(--co-bg2) }
#co-card { min-height: 120px }

/* pay */
.co-err { color: var(--co-err); font-size: 14px; margin: 0 0 12px }
.co-err:empty { display: none }
.co-pay { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: center; border: 0; border-radius: var(--co-r); background: var(--co-ink); color: #fff; font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .15s }
.co-pay:hover { background: #2e0a55 }
.co a.co-pay { color: #fff; text-decoration: none }
.co-pay:disabled { opacity: .7; cursor: progress }
.co-pay.is-busy { color: transparent; position: relative }
.co-pay.is-busy::after { content: ''; position: absolute; width: 22px; height: 22px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: co-spin .7s linear infinite }
@keyframes co-spin { to { transform: rotate(360deg) } }
.co-branding { width: 100%; min-height: 28px; margin-top: 12px }
.co-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 22px 0 32px; margin-top: 30px; border-top: 1px solid var(--co-line); font-size: 13px }
.co-foot a { color: var(--co-ink); text-decoration: underline }

/* summary */
.cs-line { display: flex; align-items: center; gap: 14px; margin-bottom: 14px }
.cs-thumb { position: relative; flex: none; width: 64px; height: 64px; border: 1px solid var(--co-line); border-radius: 8px; background: #fff }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block }
.cs-qty { position: absolute; top: -9px; right: -9px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center }
.cs-name { flex: 1; min-width: 0 }
.cs-title { font-size: 14px; font-weight: 500 }
.cs-sub { font-size: 12px; color: var(--co-sub) }
.cs-price { font-size: 14px; white-space: nowrap }
.cs-rows { padding-top: 6px }
.cs-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 8px }
.cs-row[hidden] { display: none }
.cs-muted { color: var(--co-sub); font-size: 13px }
.cs-total { margin-top: 14px; font-size: 19px; font-weight: 600 }
.cs-total small { font-size: 12px; color: var(--co-sub); font-weight: 400; margin-right: 4px }
.cs-total strong { font-weight: 600 }
.cs-save { margin-top: -2px; color: #457f79; font-weight: 600 }
/* call 40: Shopify's recurring row under Total (Grüns: hairline above, label and amount in semibold) */
.cs-recur { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--co-line); font-weight: 600 }

/* discount code (28 Oct): Shopify's field + Apply, applied code as a chip; summary box on desktop, main-column box on phones */
.co-disc { margin: 4px 0 18px }
.co-disc__row { display: flex; gap: 10px; align-items: flex-start }
.co-disc__f { flex: 1; margin-bottom: 0 }
.co-disc__btn { flex: none; height: 52px; padding: 0 20px; border: 0; border-radius: var(--co-r); background: var(--co-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer }
.co-disc__btn:disabled { background: #ebebeb; color: #8a8a8a; cursor: default }
.co-disc.is-busy .co-disc__btn { opacity: .7; cursor: progress }
.co-disc__err:empty { display: none }
.co-disc__chips:empty { display: none }
.co-disc__chips { margin-top: 10px }
.co-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 9px; border-radius: 4px; background: #e6e6e6; color: var(--co-text); font-size: 13px; font-weight: 500 }
.co-chip svg { color: #555; flex: none }
.co-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #555; font-size: 17px; line-height: 1; cursor: pointer }
.co-chip__x:hover { background: rgba(0,0,0,.08) }
.cs-row--disc [data-sum="discount"] { white-space: nowrap }

/* the words at the buttons. Call 8, Grüns' (Shopify's) setup for a subscription: the line under the wallet buttons, the
   paragraph above Pay now with Shopify's bold, the grey line under Pay now; on phones the recurring row again, in a
   grey box above the paragraph, as Shopify shows it while the summary is folded away. One-time carts: the Terms line. */
.co .co-consent { margin: 0 0 14px; color: #333; font-size: 14px; line-height: 1.5 }
.co .co-consent strong { font-weight: 600; color: var(--co-text) }
.co-consent a { color: var(--co-ink); text-decoration: underline }
.co .co-consent--express { margin: 12px 0 0; font-size: 12px; text-align: left }
.co .co-consent--express, .co .co-consent--express a { color: var(--co-sub) }
.co-recur--pay { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--co-r); background: var(--co-bg2); font-size: 14px; font-weight: 600 }
@media (min-width: 1000px) { .co-recur--pay { display: none } }
.co .co-terms { margin: 22px 0 0; color: var(--co-sub); font-size: 14px; line-height: 1.5 }
@media (min-width: 1000px) { .co-disc--main { display: none } }

/* thank you */
.ty-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px }
.ty-check { color: var(--co-accent); flex: none }
.ty-num { color: var(--co-sub); font-size: 14px }
.ty-head h1 { font-size: 24px; font-weight: 600 }
.ty-card { border: 1px solid var(--co-line); border-radius: var(--co-r); padding: 18px; margin-bottom: 18px }
.ty-card h2 { font-size: 17px; margin-bottom: 8px }
.ty-card .co-subtle { margin-bottom: 0 }
.ty-grid { display: grid; grid-template-columns: 1fr; gap: 18px }
.ty-grid h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px }
.ty-grid p { color: #333; font-size: 14px; white-space: pre-line }
.ty-actions { display: flex; flex-direction: column-reverse; gap: 16px; align-items: stretch; margin-top: 8px }
.ty-continue { min-height: 52px; font-size: 16px }
.ty-main { max-width: 560px; margin: 0 auto }

/* Manage subscription page (/account, 28 Oct): checkout chrome, one column, works without scripts */
.ac-main { padding: 28px 21px 0 }
.ac-in { max-width: 560px; margin: 0 auto }
.ac h1 { font-size: 24px; font-weight: 600; margin-bottom: 10px }
.co.ac .ac-lead { color: #333; margin-bottom: 20px }
.ac-form { margin-top: 4px }
.co.ac .ac-err { color: var(--co-err); font-size: 14px; margin: -4px 0 14px }
.co.ac .ac-err--top { margin: 0 0 16px }
.ac-submit { margin-top: 6px }
.ac .sp-box input:not(:placeholder-shown) + label { top: 8px; transform: none; font-size: 12px }
.ac-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--co-sub); font-size: 14px; margin-bottom: 22px }
.ac-who form { display: inline }
.ac-link { padding: 0; border: 0; background: none; color: var(--co-ink); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer }
.ac-card { border: 1px solid var(--co-line); border-radius: var(--co-r); padding: 18px; margin-bottom: 18px }
.co.ac .ac-card h2 { font-size: 17px; margin-bottom: 4px }
.co.ac .ac-status { color: #333; font-size: 14px }
.co.ac .ac-status--bad { color: var(--co-err) }
.co.ac .ac-msg { background: #eef5f4; border-radius: var(--co-r); color: #1d4a45; font-size: 14px; padding: 10px 12px; margin-bottom: 14px }
.ac-actions { display: grid; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--co-line) }
.ac-act { margin: 0 }
.ac-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--co-ink); border-radius: var(--co-r); background: #fff; color: var(--co-ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none }
.co a.ac-btn { color: var(--co-ink); text-decoration: none }
.ac-btn::-webkit-details-marker { display: none }
.ac-btn--dark { background: var(--co-ink); color: #fff }
.ac-btn--quiet { border-color: var(--co-line); color: #333; font-weight: 500 }
.co.ac .ac-help { color: var(--co-sub); font-size: 13px; margin-top: 6px }
.ac-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
/* call 36: bottle photo beside the plan; Skip and Pause side by side */
.ac-head { display: flex; align-items: flex-start; gap: 16px }
.ac-photo { flex: none; width: 64px; height: 64px; border-radius: var(--co-r); object-fit: cover; background: #f2eff6 }
.ac-head__t { min-width: 0 }
.ac-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.ac-two form, .ac-two .ac-btn { width: 100% }
.ac-two .ac-btn { padding: 0 10px }
/* call 38: pause lengths; the picked one shows its own help line (and the date field), CSS only */
.ac-pause { display: block }
.ac-len { border: 0; margin: 0; padding: 0; min-width: 0 }
.ac-len__r { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0 }
.ac-len__chips { display: flex; flex-wrap: wrap; gap: 8px }
.ac-len__chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--co-line); border-radius: 999px; color: #333; font-size: 14px; cursor: pointer; user-select: none }
.ac-len__chip:hover { border-color: #b9b9b9 }
.ac-len__h, .ac-len__date { display: none }
.ac-len__r--1:checked ~ .ac-len__chips .ac-len__chip--1, .ac-len__r--2:checked ~ .ac-len__chips .ac-len__chip--2,
.ac-len__r--3:checked ~ .ac-len__chips .ac-len__chip--3, .ac-len__r--date:checked ~ .ac-len__chips .ac-len__chip--date { border-color: var(--co-ink); box-shadow: inset 0 0 0 1px var(--co-ink); color: var(--co-ink); font-weight: 600 }
.ac-len__r--1:focus-visible ~ .ac-len__chips .ac-len__chip--1, .ac-len__r--2:focus-visible ~ .ac-len__chips .ac-len__chip--2,
.ac-len__r--3:focus-visible ~ .ac-len__chips .ac-len__chip--3, .ac-len__r--date:focus-visible ~ .ac-len__chips .ac-len__chip--date { outline: 2px solid var(--co-ink); outline-offset: 2px }
.ac-len__r--1:checked ~ .ac-len__h--1, .ac-len__r--2:checked ~ .ac-len__h--2, .ac-len__r--3:checked ~ .ac-len__h--3 { display: block }
.ac-len__r--date:checked ~ .ac-len__date { display: block; margin-top: 10px; max-width: 260px }
.ac-len__date .sp-field { margin-bottom: 0 }
/* call 37: the cancel confirm */
.ac-confirm .ac-actions { display: block }
.co.ac .ac-confirm__h { font-size: 17px; font-weight: 600; margin-bottom: 6px }
.co.ac .ac-what { color: #333; font-size: 14px; margin-bottom: 18px }
.ac-why { border: 0; margin: 0 0 18px; padding: 0; min-width: 0 }
.co.ac .ac-why legend { padding: 0; font-size: 15px; font-weight: 600; margin-bottom: 10px }
.ac-radio { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--co-line); border-radius: var(--co-r); font-size: 14px; cursor: pointer }
.ac-radio input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--co-ink) }
.ac-radio:has(input:checked) { border-color: var(--co-ink); box-shadow: inset 0 0 0 1px var(--co-ink) }
.ac-confirm__row { display: grid; gap: 10px }
.ac-confirm__row .ac-btn { width: 100% }
.ac-addr > summary { width: max-content }
.ac-addr[open] > summary { display: none }
.co.ac .ac-addr h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px }
.ac-row { display: flex; align-items: center; gap: 18px; margin-top: 4px }
.co.ac .ac-h2 { font-size: 19px; margin: 28px 0 10px }
.ac-orders { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--co-line) }
.ac-order { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--co-line); font-size: 14px }
.co.ac .ac-order__date { font-weight: 600 }
.ac-order__r { text-align: right; white-space: nowrap }
.co.ac .ac-st { color: #333; font-size: 13px; margin-top: 2px }
.ac-st a { margin-left: 6px }
@media (min-width: 1000px) { .ac-main { padding-top: 44px } .ac-pause { max-width: 400px } }

/* desktop: two columns, summary sticky right, bar hidden */
@media (min-width: 1000px) {
  .co-sumbar { display: none }
  .co-cols { flex-direction: row; min-height: calc(100vh - 82px) }
  .co-main { flex: 1 1 55%; padding: 38px 38px 0 0; display: flex; justify-content: flex-end }
  .co-form, .ty-main { width: 100%; max-width: 560px; margin: 0 }
  .co-cols > .co-summary { order: 0; display: block; flex: 1 1 45%; padding: 38px 0 38px 38px; border-left: 1px solid var(--co-line); border-bottom: 0 }
  .cs-in { max-width: 430px; position: sticky; top: 38px }
  .co-header__in { max-width: none; padding: 21px max(21px, calc((100vw - 1066px) / 2)) }
  .co-main { padding-left: 21px }
  .sp-row3 { grid-template-columns: 1fr 1fr 1fr }
  .ty-grid { grid-template-columns: 1fr 1fr }
  .ty-actions { flex-direction: row; justify-content: space-between; align-items: center }
  .ty-continue { width: auto; padding: 0 28px }
}

/* thank-you on mobile: summary shown below the details */
@media (max-width: 999px) { .ty .co-cols > .co-summary { display: block; order: 1; border-top: 1px solid var(--co-line) } }

/* card form on Manage subscription (/account?card=mem_…), Site 3 Nov 2026: the panel sits in the subscription card like the
   cancel screen. Current card line, then Whop's card box (its iframe draws the fields; looks set in account-card.js), the
   error line, Save full width with Cancel under it, the Powered-by-Whop notice, the small Whop-billing fallback last. */
.ac-cardform .ac-actions { gap: 12px }
.ac-cardform .ac-confirm__h { margin-bottom: 0 }
.ac .ac-cardnow { display: flex; align-items: center; gap: 8px; color: #333; font-size: 14px }
.ac .ac-cardnow::before { content: ''; flex: none; width: 26px; height: 18px; border: 1.5px solid var(--co-sub); border-radius: 3px; background: linear-gradient(var(--co-sub), var(--co-sub)) 0 5px / 100% 3px no-repeat }
.ac .ac-cardnow[hidden] { display: none }
#ac-card-box { min-height: 112px }
.ac-cardform .ac-err:empty { display: none }
.ac-cardform .ac-err { margin: 0 }
.ac-cardform .ac-confirm__row { justify-items: center }
.ac-cardform .ac-confirm__row .ac-link { display: inline-flex; align-items: center; min-height: 44px }
.ac-btn:disabled { opacity: .45; cursor: default }
.ac-btn.is-busy { opacity: .7; cursor: progress }
.ac-cardbrand { width: 100%; min-height: 28px }
.ac .ac-cardwhop { margin-top: 0; text-align: center }
.ac .ac-cardwhop a { color: var(--co-sub) }

/* billing address (owner 5 Nov, G1) */
.co-bill__same { margin-top: 14px }
.co-bill { margin-top: 14px; display: grid; gap: 10px }
.co-bill[hidden] { display: none }
.co-bill .co-h3 { margin: 4px 0 0 }

/* tip box (owner 5 Nov, Shopify layout; ported from the design copy): five choices in the checkout's own bordered-box look; the picked one gets the shipping choice's tint */
.co-tip__box { box-sizing: border-box; border: 1px solid var(--co-line, #d9d9d9); border-radius: var(--co-r); background: #fff; padding: 14px 16px }
.co-tip__ask { margin: 0 }
.co-tip__body { margin-top: 14px }
.co-tip__body[hidden] { display: none }
.co-tip__opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.co-tip__opt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 6px; border: 1px solid var(--co-line, #d9d9d9); border-radius: var(--co-r); background: #fff; font-size: 15px; cursor: pointer }
.co-tip__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0 }
.co-tip__opt.is-on { background: #f6f4f8; border-color: var(--co-ink); box-shadow: inset 0 0 0 1px var(--co-ink); font-weight: 600 }
.co-tip__opt:has(input:focus-visible) { outline: 2px solid var(--co-ink); outline-offset: 2px }
.co-tip__custom { box-sizing: border-box; display: flex; gap: 8px; margin-top: 10px; align-items: flex-start }
.co-tip__step { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid var(--co-line, #d9d9d9); border-radius: var(--co-r); background: #fff }
.co-tip__step .co-tip__field { flex: 1; min-width: 0; margin: 0 }
.co-tip__step .sp-field, .co-tip__step .sp-box { background: transparent !important }
.co-tip__step .sp-box input { height: 48px; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; padding-left: 4px; padding-right: 4px }
.co-tip__step .sp-box label { left: 50%; transform: translate(-50%, -50%) }
.co-tip__step .sp-field.is-filled label, .co-tip__step .sp-box input:focus + label { transform: translateX(-50%) }
.co-tip__step:focus-within { border-color: var(--co-ink); box-shadow: 0 0 0 1px var(--co-ink) }
.co-tip__pm { flex: none; width: 40px; height: 48px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--co-ink); cursor: pointer }
.co-tip__pm:focus-visible { outline: 2px solid var(--co-ink); outline-offset: -2px; border-radius: var(--co-r) }
.co-tip__add { flex: none; min-height: 50px; padding: 0 18px; border: 1px solid var(--co-ink); border-radius: var(--co-r); background: #f6f4f8; color: var(--co-ink); font-weight: 600; font-size: 15px; cursor: pointer }
.co-tip__add:hover { background: #ece6f4 }
.co .co-tip__thanks { margin: 12px 0 0; font-size: 14px; color: var(--co-sub) }
.co-tip__thanks[hidden] { display: none }
.co-tip__field .sp-err:empty { display: none }
.co-tip__add:disabled { opacity: .5; cursor: default }