/* The purchase flow follows the mobile-first boutique design. */
.purchase-heading { margin-bottom: 28px; }
.purchase-eyebrow { margin: 0 0 17px; font: 500 10px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.purchase-intro { margin: 16px 0 0; font: 400 21px/1.4 var(--serif); color: var(--muted); }
.purchase-layout { display: grid; gap: 32px; align-items: start; }
.bag-lines { min-width: 0; border-top: 1px solid var(--line); }
.bag-line { display: flex; align-items: flex-start; gap: 15px; padding: 23px 0; border-bottom: 1px solid var(--line); }
.bag-line-image { width: 94px; height: 120px; flex: none; overflow: hidden; background: #ece7dd; border-radius: 3px; }
.bag-line-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.purchase-no-photo { height: 100%; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--muted); }
.purchase-no-photo span { font: 400 10px/1.35 var(--sans); }
.purchase-no-photo svg { width: 28px; height: 28px; }
.bag-line-content { flex: 1; min-width: 0; }
.bag-line-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 10px; }
.bag-line-heading h2 { font: 500 25px/1.05 var(--serif); letter-spacing: -.035em; margin: 0; overflow-wrap: anywhere; }
.bag-line-heading h2 a { color: inherit; text-decoration: none; }
.bag-line-heading strong { font: 500 21px/1.25 var(--serif); white-space: nowrap; }
.bag-line-atelier { font: 400 14px/1.4 var(--serif); color: var(--muted); margin: 7px 0 3px; }
.bag-line-description, .bag-unit-price { margin: 4px 0; color: var(--muted); font: 400 12px/1.45 var(--sans); }
.bag-line-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin-top: 13px; }
.bag-line-actions form { margin: 0; }
.bag-quantity { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 30px; height: 44px; overflow: hidden; }
.bag-quantity button { display: grid; place-items: center; min-width: 41px; min-height: 44px; padding: 8px; background: transparent; color: var(--ink); border: 0; cursor: pointer; }
.bag-quantity button svg { width: 15px; height: 15px; }
.bag-quantity button:disabled { opacity: .3; cursor: default; }
.bag-quantity button:hover:not(:disabled) { background: #e9e4da; }
.bag-quantity span { min-width: 19px; font: 400 13px/1 var(--sans); text-align: center; }
.bag-quantity button:focus-visible { outline-offset: -5px; }
.bag-remove { min-height: 44px; padding: 8px 0 8px 8px; border: 0; background: transparent; color: var(--muted); font: 400 11px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.purchase-back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 16px; color: var(--ink); font: 400 17px/1.25 var(--serif); text-decoration: underline; text-underline-offset: 4px; }
.purchase-back svg { width: 18px; height: 18px; }
.purchase-summary { border-top: 1px solid var(--line); padding-top: 25px; min-width: 0; }
.purchase-summary > h2, .purchase-section-title { font: 400 31px/1.1 var(--serif); letter-spacing: -.035em; margin: 0 0 24px; }
.purchase-totals { margin: 0; }
.purchase-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; font: 400 13px/1.5 var(--sans); }
.purchase-totals dt { color: var(--muted); }
.purchase-totals dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.purchase-totals .purchase-total { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 17px; font: 400 27px/1.2 var(--serif); }
.purchase-total dt { color: var(--ink); }
.purchase-total dd { font-size: 33px; white-space: nowrap; }
.purchase-small { color: var(--muted); font: 400 11px/1.75 var(--sans); margin: 16px 0 0; }
.purchase-submit { margin-top: 25px; display: flex; justify-content: center; gap: 16px; }
.purchase-submit svg { width: 21px; height: 21px; }
.purchase-assurance { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font: 400 11px/1.5 var(--sans); margin: 17px 0 0; }
.purchase-assurance svg { width: 19px; height: 19px; }
.purchase-empty { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 550px; margin: 0 auto; padding: 43px 0 20px; }
.purchase-empty > svg { width: 40px; height: 40px; margin-bottom: 25px; }
.purchase-empty h2 { margin: 0; font: 400 39px/1.03 var(--serif); letter-spacing: -.04em; }
.purchase-empty p { margin: 18px 0 27px; font: 400 19px/1.45 var(--serif); color: var(--muted); }
.purchase-empty .btn { max-width: 340px; }
.purchase-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 11px 20px; padding: 0 0 21px; margin: 0 0 29px; border-bottom: 1px solid var(--line); font: 400 11px/1.5 var(--sans); color: var(--muted); }
.purchase-steps li, .purchase-steps a { display: flex; align-items: center; gap: 6px; }
.purchase-steps a { color: inherit; text-decoration: none; min-height: 36px; }
.purchase-steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.purchase-steps span { font: 400 16px var(--serif); }
.purchase-form { max-width: none; margin: 0; }
.purchase-field { margin-bottom: 19px; }
.purchase-field > label { display: block; font: 400 12px/1.5 var(--sans); margin-bottom: 8px; letter-spacing: 0; text-transform: none; }
.purchase-field > label > span { color: var(--muted); font-size: 10px; }
.purchase-field .field-input { width: 100%; max-width: 100%; min-height: 51px; border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px; background: #ffffff50; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.purchase-field .field-input:focus { outline: 2px solid #8b794d; outline-offset: 2px; border-color: transparent; }
.purchase-field .field-input[aria-invalid="true"] { border-color: #ad4c38; }
.purchase-field .errors { margin-top: 7px; font: 400 12px/1.4 var(--sans); color: #943923; }
.purchase-field .errors p { margin: 3px 0; }
.purchase-field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; }
.purchase-form-errors { padding: 14px 16px; background: #f2e7dd; border-radius: 8px; margin: 0 0 22px; font: 400 12px/1.5 var(--sans); color: #943923; }
.purchase-form-errors p { margin: 0; }
.purchase-form-note { text-align: center; margin-top: 13px; }
.checkout-items { margin-bottom: 18px; }
.checkout-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-bottom: 18px; }
.checkout-item-image { width: 58px; height: 68px; background: #ece7dd; border-radius: 3px; display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.checkout-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.checkout-item-name h3 { margin: 0; font: 500 21px/1.05 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.checkout-item-name p { margin: 6px 0 0; font: 400 10px/1.5 var(--sans); color: var(--muted); }
.checkout-item > span { font: 500 19px/1.2 var(--serif); white-space: nowrap; }
.boutique-payment, .boutique-confirmation { max-width: 650px; }
.boutique-payment .purchase-heading { margin-bottom: 26px; }
.payment-summary { padding-top: 0; border-top: 0; }
.purchase-demo { margin-top: 29px; padding: 25px 22px; border-radius: 14px; background: #eae5db; }
.purchase-demo .purchase-eyebrow { margin-bottom: 13px; }
.purchase-demo h2 { margin: 0 0 15px; font: 400 35px/1 var(--serif); letter-spacing: -.035em; }
.purchase-demo > p:not(.purchase-eyebrow) { color: var(--muted); font: 400 12px/1.7 var(--sans); margin: 0; }
.purchase-demo form { margin: 0; }
.payment-cancel { display: flex; width: fit-content; margin: 20px auto 0; justify-content: center; text-align: center; }
.boutique-confirmation { text-align: center; }
.purchase-seal { margin: 15px auto 28px; border: 1px solid #c9bea7; border-radius: 50%; width: 68px; height: 68px; color: #8b794d; display: grid; place-items: center; }
.purchase-seal svg { width: 32px; height: 32px; stroke-width: 1.1; }
.boutique-confirmation .purchase-intro { max-width: 420px; margin-left: auto; margin-right: auto; }
.confirmation-summary { margin-top: 30px; text-align: left; }
.purchase-status { display: inline-block; padding: 5px 10px; border-radius: 20px; background: #e7e2d7; font: 500 11px/1.2 var(--sans); }
.purchase-status.status-paid, .purchase-status.status-shipped, .purchase-status.status-delivered { background: #e3e9e2; color: #365346; }
.confirmation-note { margin: 24px 0; color: var(--muted); font: 400 12px/1.7 var(--sans); }
@media (min-width: 600px) {
  .bag-line-image { width: 127px; height: 143px; }
  .bag-line { gap: 23px; }
  .bag-line-heading h2 { font-size: 30px; }
  .bag-line-heading strong { font-size: 25px; }
  .bag-line-atelier { font-size: 16px; }
  .purchase-intro { font-size: 23px; }
  .purchase-steps { gap: 30px; font-size: 12px; }
  .purchase-field-pair { gap: 18px; }
}
@media (min-width: 960px) {
  .purchase-heading { margin-bottom: 37px; }
  .purchase-layout { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 68px; }
  .purchase-summary { position: sticky; top: 108px; }
  .bag-line-heading h2 { font-size: 29px; }
  .bag-line-image { width: 118px; height: 140px; }
  .checkout-layout { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr); gap: 86px; }
  .checkout-summary { padding: 29px; border: 1px solid var(--line); border-radius: 15px; background: #ffffff25; }
  .payment-summary, .confirmation-summary { position: static; }
  .purchase-empty { padding-top: 65px; }
  .purchase-empty h2 { font-size: 46px; }
}
@media (max-width: 359px) {
  .bag-line { gap: 12px; }
  .bag-line-image { width: 72px; height: 105px; }
  .bag-line-heading h2 { font-size: 23px; }
  .bag-line-actions { gap: 0; }
  .bag-quantity button { min-width: 39px; }
  .purchase-steps { gap: 10px; font-size: 10px; }
  .purchase-demo { padding: 22px 16px; }
  .checkout-item { gap: 9px; grid-template-columns: 47px minmax(0, 1fr) auto; }
  .checkout-item-image { width: 47px; height: 60px; }
  .checkout-item > span { font-size: 17px; }
}