/* Demo checkout. Sizes and spacing are measured from a live Shopify checkout, in wrapd's rust. */
:root { --ink: #000; --mute: #707070; --soft: #666; --line: #dedede; --bg: #f5f5f5; --brand: #8e2f1c; --bad: #c0270f; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 14px/1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); }
[hidden] { display: none !important; }
h2 { margin: 32px 0 14px; font-size: 20px; font-weight: 600; line-height: 24px; }
h3 { margin: 32px 0 14px; font-size: 14px; font-weight: 600; line-height: 19px; }
form[data-form] > h2:first-child { margin-top: 0; }

.top { border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; justify-content: space-between; height: 80px; max-width: 980px; margin: 0 auto; padding: 0 14px; }
.top img { display: block; height: 40px; width: auto; }
.top__cart { color: var(--brand); line-height: 0; }
.testbar { margin: 0; padding: 8px 14px; background: #fdf3e0; color: #6b4a10; font-size: 13px; text-align: center; }

.wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.main { width: 100%; max-width: 600px; margin: 0 auto; padding: 20px 14px 32px; }
.sum { background: var(--bg); }
.sum__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 63px; padding: 0 14px; border: 0; background: none; color: var(--brand); font: inherit; cursor: pointer; }
.sum__toggle span { display: inline-flex; align-items: center; gap: 8px; }
.sum__toggle svg { transition: transform .15s; }
.sum.is-open .sum__toggle svg { transform: rotate(180deg); }
.sum__toggle strong { color: var(--ink); font-size: 18px; font-weight: 600; }
.sum__body { display: none; padding: 0 14px 20px; }
.sum.is-open .sum__body { display: block; }

.lines { margin: 0 0 20px; padding: 0; list-style: none; }
.line { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.line:first-child { margin-top: 0; }
.line__pic { position: relative; flex: none; width: 64px; height: 64px; }
.line__pic img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px; background: #fff; }
.line__pic b { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #000; color: #fff; font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; }
.line__txt { flex: 1; min-width: 0; }
.line__txt strong { display: block; font-weight: 400; }
.line__txt small { display: block; color: var(--soft); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.line__price { white-space: nowrap; }

.code { display: flex; gap: 10px; margin-bottom: 20px; }
.code .f { flex: 1; margin: 0; }
.btn2 { flex: none; padding: 0 16px; border: 0; border-radius: 12px; background: #ebebeb; color: var(--mute); font: inherit; font-weight: 600; cursor: pointer; }
.tot { margin: 0; }
.tot > div { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.tot > div:first-child { margin-top: 0; }
.tot dd, .tot dt { margin: 0; }
.tot__all { align-items: baseline; margin-top: 16px !important; font-size: 18px; font-weight: 600; line-height: 24px; }
.tot__all small { color: var(--soft); font-size: 12px; font-weight: 400; }

.f { position: relative; display: block; margin-bottom: 10px; }
.f input, .f select, .f__el { display: block; width: 100%; height: 49px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; outline: 0; }
.f input { padding: 14px 10px; appearance: none; -webkit-appearance: none; }
.f input:focus, .f input:not(:placeholder-shown) { padding: 21px 10px 6px; }
.f select { padding: 21px 30px 6px 10px; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 7px; }
.f select:disabled { color: var(--ink); opacity: 1; }
.f input:focus, .f select:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.f span { position: absolute; top: 15px; left: 11px; right: 11px; color: var(--mute); font-size: 14px; line-height: 19px; pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: top .1s, font-size .1s; }
.f input:focus + span, .f input:not(:placeholder-shown) + span, .f--sel span { top: 7px; font-size: 12px; line-height: 16px; }
.f select:required:invalid:not(:focus) + span { top: 15px; font-size: 14px; line-height: 19px; }
.f__el { padding: 22px 10px 5px; }
.f--card span { right: 36px; }
.f--card.is-focus span, .f--card.is-filled span { top: 7px; font-size: 12px; line-height: 16px; }
.f--card.is-focus .f__el { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.f--card.is-bad .f__el { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.f__icon { position: absolute; top: 16px; right: 12px; color: #333; pointer-events: none; }

.chk { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.chk input { flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; appearance: none; -webkit-appearance: none; cursor: pointer; }
.chk input:checked { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 7.2 6 10l4.8-5.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px; }
.chk input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.chk--sub { align-items: flex-start; margin-top: 16px; }
.chk--sub span { font-size: 13px; }
.bill { margin-top: 14px; }
.pay__panel .chk { margin-top: 12px; }

.express { text-align: center; }
.express.is-waiting { height: 0; overflow: hidden; visibility: hidden; }
.express__t { margin: 0 0 12px; color: var(--mute); }
.or { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--mute); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.ship { display: flex; justify-content: space-between; padding: 16px; border: 1px solid var(--brand); border-radius: 12px; background: #fbf4f1; }
.ship strong { font-weight: 600; }
.h2--note { margin-bottom: 4px; }
.note { margin: 0 0 14px; color: var(--mute); }
.pay { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pay__item + .pay__item { border-top: 1px solid var(--line); }
.pay__row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; cursor: pointer; }
.pay__row b { flex: 1; font-weight: 600; }
.pay__row input { flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; appearance: none; -webkit-appearance: none; cursor: pointer; }
.pay__row input:checked { border: 6px solid var(--brand); }
.pay__row input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pay__item.is-on { background: #f6f6f6; }
.pay__item.is-on .pay__row { box-shadow: inset 0 0 0 1px var(--brand); border-radius: 11px 11px 0 0; }
.pay__item:not(:first-child).is-on .pay__row { border-radius: 0; }
.pay__logos { display: flex; align-items: center; gap: 4px; line-height: 0; }
.pay__logos svg { width: 38px; height: 24px; }
.pay__logos i { min-width: 24px; padding: 6px 3px; border: 1px solid #e5e5e5; border-radius: 4px; background: #fff; color: var(--ink); font-size: 10px; font-style: normal; line-height: 11px; text-align: center; }
.pay__panel { padding: 14px; background: #f6f6f6; }
.pay__panel .note { margin: 0; }

.err { margin: 10px 0 0; color: var(--bad); }
.mtotal { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.mtotal img { display: block; width: 44px; height: 44px; object-fit: cover; border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px; }
.mtotal__t { flex: 1; }
.mtotal__t strong { display: block; font-size: 16px; font-weight: 600; line-height: 20px; }
.mtotal__t small { color: var(--soft); font-size: 13px; }
.mtotal__sum { display: flex; align-items: center; gap: 8px; }
.mtotal__sum small { padding: 2px 7px; border-radius: 10px; background: var(--bg); color: var(--soft); font-size: 11px; font-weight: 500; }
.mtotal__sum strong { font-size: 18px; font-weight: 600; }
.btn { display: block; width: 100%; height: 50px; margin-top: 14px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: inherit; font-weight: 600; line-height: 50px; text-align: center; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .55; cursor: default; }
.foot { margin: 40px 0 0; color: var(--mute); font-size: 12px; }

.done { max-width: 560px; margin: 0 auto; padding: 32px 14px 56px; }
.done h1 { margin: 2px 0 8px; font-size: 26px; font-weight: 600; }
.done__no { margin: 0; color: var(--mute); }
.done section { margin-top: 20px; padding: 2px 16px 16px; border: 1px solid var(--line); border-radius: 12px; }
.done section h2 { margin: 14px 0 6px; font-size: 14px; line-height: 19px; }
.done section p, .done ul { margin: 0; padding: 0; list-style: none; }
.done .tot { margin-top: 12px; }

@media (min-width: 750px) {
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
}
@media (min-width: 1000px) {
  .top__in { height: 81px; padding: 0; }
  .wrap { grid-template-columns: calc(50% + 50px) calc(50% - 50px); min-height: calc(100vh - 82px); }
  .main { grid-column: 1; grid-row: 1; justify-self: end; width: 540px; max-width: none; margin: 0; padding: 40px 40px 40px 0; }
  .sum { grid-column: 2; grid-row: 1; }
  .sum__toggle, .mtotal { display: none; }
  .sum__body { display: block; position: sticky; top: 0; width: 440px; max-width: 100%; padding: 40px 0 40px 40px; }
  .btn { margin-top: 30px; }
}