/* OROS checkout — values measured from the store's own checkout (data-src/commerce/checkout-spec, 2026-10-21).
   Own CSS. 1440: main 580 (content 499 @x230) + summary 480 (content 400 @x810); 375: one column, 14px gutters. */
:root { --a: #281041; --b: #dedede; --mu: #707070; --mu2: #666; --err: #d91c1c; --g: #f5f5f5; --sel: rgb(248, 245, 253); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/18.9px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; color: #000; background: #fff; -webkit-font-smoothing: subpixel-antialiased; }
a { color: var(--a); }
img { display: block; max-width: 100%; }
button { font: inherit; }
[hidden] { display: none !important; }
.co-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.co-muted { color: var(--mu); margin: 0; }
.co-muted2 { color: var(--mu2); }

/* header 157px: the store's banner image (logo + "11000+ HAPPY CUSTOMERS" strip + trust icons) */
.co-header { position: relative; height: 157px; border-bottom: 1px solid var(--b); display: flex; justify-content: center; align-items: flex-start; padding-top: 20px; }
.co-header__logo img { width: 250px; height: auto; }
.co-bag { position: absolute; top: 66px; left: calc(50% + 466px); color: var(--a); width: 24px; height: 24px; }

/* columns */
.co-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 580px 480px minmax(0, 1fr); min-height: calc(100vh - 157px); }
.co-main { grid-column: 2; grid-row: 1; }
.co-main__inner { padding: 40px 41px 40px 40px; }
.co-aside { grid-column: 3 / 5; grid-row: 1; background: var(--g); }
.co-aside__inner { position: sticky; top: 0; width: 480px; padding: 40px; }

/* reservation banner */
.co-reserve { display: grid; grid-template-columns: 28px 1fr; align-items: center; padding: 16px; margin-bottom: 20px; background: rgb(254, 246, 246); border: 1px solid rgb(253, 216, 216); border-radius: 12px; }
.co-reserve__i { color: var(--err); display: flex; }
.co-reserve h2 { margin: 0; font-size: 14px; line-height: 16.8px; font-weight: 600; color: rgb(63, 3, 3); }

/* express */
.co-express__label { margin: 0 0 14px; text-align: center; color: var(--mu); }
.co-express__row { display: flex; gap: 10px; }
.co-wallet { flex: 1; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: #000; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Apple Pay: Safari draws Apple's official button (Apple Pay only ever shows in Safari) */
.co-wallet--apple { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: black; }
.co-ap-fb { display: inline-flex; align-items: center; gap: 2px; color: #fff; font: 600 19px/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; letter-spacing: -.3px; }
.co-ap-fb svg { margin-top: -3px; }
/* Safari draws Apple's own button; the logo+text fallback is only for browsers without it */
@supports (-webkit-appearance: -apple-pay-button) { .co-ap-fb { display: none; } }
/* Google Pay: Google's official button art */
.co-wallet--google img { height: 24px; width: auto; }
.co-billing { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.co-consent { margin: 12px 0 0; font-size: 12px; line-height: 16.2px; color: var(--mu); text-align: center; }
.co-consent a { color: inherit; }
.co-or { display: flex; align-items: center; gap: 14px; color: var(--mu); margin: 24px 0 20px; }
.co-or::before, .co-or::after { content: ''; flex: 1; height: 1px; background: var(--b); }

/* sections */
.co-sec { margin-bottom: 32px; display: flex; flex-direction: column; gap: 14px; }
.co-sec h2 { margin: 0; font-size: 20px; line-height: 24px; font-weight: 600; }
.co-sec h2.co-h3 { font-size: 16px; line-height: 19.2px; }
.co-sec__head { display: flex; justify-content: space-between; align-items: baseline; }
.co-sec__head a { text-decoration: underline; }
.co-address { display: flex; flex-direction: column; gap: 10px; margin-top: -4px; }
.co-row { display: grid; gap: 10px; }
.co-row--1 { grid-template-columns: 1fr; }
.co-row--2 { grid-template-columns: 1fr 1fr; }
.co-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.co-field { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* text field: 49px, #dedede, r12; floating label 12/16.2 #707070 at 5.9px */
.co-input, .co-select { position: relative; background: #fff; border: 1px solid var(--b); border-radius: 12px; transition: border-color .133s cubic-bezier(.3, .5, .5, 1), box-shadow .133s; }
.co-input input, .co-select select { display: block; width: 100%; height: 47px; border: 0; background: transparent; font: inherit; font-size: 14px; color: #000; padding: 13.55px 10px; outline: none; border-radius: 12px; transition: padding .2s ease-in-out; }
.co-input input::placeholder { color: var(--mu); }
.co-input label, .co-select label { position: absolute; left: 10px; top: 5.9px; font-size: 12px; line-height: 16.2px; color: var(--mu); opacity: 0; transform: translateY(3px); transition: opacity .2s ease-in-out, transform .2s ease-in-out; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 26px); }
.co-input.is-filled input { padding: 21.05px 10px 6.05px; }
.co-input.is-filled input::placeholder { color: transparent; }
.co-input.is-filled label { opacity: 1; transform: none; }
.co-input--acc input { padding-right: 38px; }
.co-acc { position: absolute; right: 10px; top: 14.5px; }
.co-select select { padding: 21.05px 30px 6.05px 10px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.co-select label { opacity: 1; transform: none; top: 6.9px; }
.co-chev { position: absolute; right: 16px; top: 19px; color: var(--mu); pointer-events: none; display: flex; }
.co-select:not(:has(.co-chev))::after { content: ''; position: absolute; width: 6px; height: 6px; border-right: 1.4px solid var(--mu); border-bottom: 1.4px solid var(--mu); transform: rotate(45deg); top: 18px; right: 18px; pointer-events: none; }
.co-input:focus-within, .co-select:focus-within { border-color: var(--a); box-shadow: 0 0 0 .5px var(--a); outline: 3px solid rgba(40, 16, 65, .3); outline-offset: 0; }
.is-invalid .co-input, .is-invalid .co-select { border-color: var(--err); box-shadow: 0 0 0 .5px var(--err); }
.co-err { margin: 0; color: var(--err); font-size: 14px; line-height: 18.9px; }
.co-tipbtn { background: none; border: 0; padding: 0; color: var(--mu); cursor: help; display: inline-flex; }
.co-tip { position: fixed; z-index: 50; max-width: 164.57px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .9); color: #fff; font-size: 12px; line-height: 16.2px; text-align: center; pointer-events: none; }

/* checkbox 18px, accent fill */
.co-check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.co-check input { position: absolute; opacity: 0; }
.co-check__box { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--b); background: #fff; position: relative; flex: none; }
.co-check input:checked + .co-check__box { box-shadow: inset 0 0 0 10px var(--a); }
.co-check input:checked + .co-check__box::after { content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* shipping */
.co-pending { background: var(--g); border-radius: 12px; padding: 16px; text-align: center; color: var(--mu); }
.co-first { margin: 0; font-size: 14px; line-height: 16.8px; font-weight: 600; }
.co-rate { position: relative; background: #fff; border: 1px solid var(--b); border-radius: 12px; }
.co-rate::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--a); border-radius: 12px; pointer-events: none; }
.co-rate__in { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; background: var(--sel); border-radius: 11px; font-weight: 600; }
.co-rate strong { text-transform: uppercase; font-weight: 600; }
[data-ship-confirm] { display: flex; flex-direction: column; gap: 16px; margin-top: 2px; }
.co-confirm { background: var(--g); border-radius: 12px; padding: 14px; line-height: 21.735px; }

/* payment box */
.co-pay { background: #fff; border: 1px solid var(--b); border-radius: 12px; }
.co-pay__head { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 14px; height: 50px; background: var(--sel); border-radius: 11px 11px 0 0; }
.co-pay__head::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--a); border-radius: 12px 12px 0 0; pointer-events: none; }
.co-pay__head strong { font-weight: 600; }
.co-pay__brands { display: flex; gap: 4px; }
.co-pay__brands img { width: 38px; height: 24px; }
.co-pay__body { background: rgba(0, 0, 0, .043); border-top: 1px solid var(--b); border-radius: 0 0 11px 11px; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.co-card { display: flex; flex-direction: column; gap: 10px; }
.co-cf { position: relative; height: 48px; background: #fff; border: 1px solid var(--b); border-radius: 12px; overflow: hidden; transition: border-color .133s, box-shadow .133s; }
.co-cf.is-focus { border-color: var(--a); box-shadow: 0 0 0 .5px var(--a); outline: 3px solid rgba(40, 16, 65, .3); }
.co-cf.is-invalid { border-color: var(--err); box-shadow: 0 0 0 .5px var(--err); }
.co-cf__frame { position: absolute; left: 0; right: 0; top: 1px; height: 44px; transition: top .2s ease-in-out; }
.co-cf[data-cf=cardNumber] .co-cf__frame, .co-cf[data-cf=cardCvc] .co-cf__frame { right: 38px; }
.co-cf.is-filled .co-cf__frame { top: 8.5px; }
.co-cf__ph { position: absolute; left: 10px; top: 14.5px; color: var(--mu); pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.co-cf__label { position: absolute; left: 10px; top: 5.9px; font-size: 12px; line-height: 16.2px; color: var(--mu); opacity: 0; transform: translateY(3px); transition: all .2s ease-in-out; pointer-events: none; }
.co-cf.is-filled .co-cf__ph { opacity: 0; }
.co-cf.is-filled .co-cf__label { opacity: 1; transform: none; }
.co-cf__icon { position: absolute; right: 10px; top: 14px; color: var(--mu); display: flex; z-index: 1; }

/* pay button 49.59 @ accent, r12, 16/21.6 600 */
.co-paybtn { display: block; width: 100%; min-height: 49.59px; border: 0; border-radius: 12px; background: var(--a); color: #fff; font-size: 16px; line-height: 21.6px; font-weight: 600; text-align: center; text-decoration: none; padding: 14px; cursor: pointer; margin-top: 8px; }
.co-paybtn:disabled { background: var(--g); color: var(--mu); cursor: default; }
.co-paybtn.is-busy { color: transparent; position: relative; background: var(--a); }
.co-paybtn.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: co-spin .8s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg) } }
.co-branding { margin: 14px 0 0; min-height: 20px; }
.co-error { margin: 0 0 14px; padding: 14px; border: 1px solid rgb(253, 216, 216); background: rgb(254, 246, 246); border-radius: 12px; color: rgb(63, 3, 3); }
.co-sub-note { margin: 0 0 14px; font-size: 12px; line-height: 16.2px; color: var(--mu); }
.co-foot { margin-top: 48px; padding: 0 0 40px; }
.co-foot summary { list-style: none; display: inline; color: var(--a); text-decoration: underline; cursor: pointer; }
.co-foot summary::-webkit-details-marker { display: none; }
.co-foot nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12px; }

/* summary */
.co-lines { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.co-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; min-height: 66px; }
.co-line__thumb { position: relative; width: 64px; height: 64px; border-radius: 16px; background: #ededed; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .06); }
.co-line__thumb img { width: 100%; height: 100%; object-fit: cover; border: 2px solid #fff; border-radius: 16px; }
.co-qty { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; border-radius: 8px; background: #000; color: #fff; font-size: 12px; font-weight: 600; text-align: center; line-height: 20px; padding: 0 6px; transform: translate(30%, -30%); }
.co-line__info p { margin: 0; font-size: 14px; }
.co-line__info small { display: block; font-size: 12px; line-height: 16.2px; color: var(--mu2); }
.co-disc { display: inline-grid; grid-template-columns: 14px 1fr; gap: 4px; align-items: center; color: var(--mu2); font-size: 12px; }
.co-line__price { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.co-line__price s { color: var(--mu2); font-size: 12px; }
.co-line__price span { text-transform: uppercase; }
.co-discount { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 0 0 20px; align-items: center; }
.co-discount .co-err { grid-column: 1 / -1; }
.co-discount button { width: 59px; height: 35px; border: 0; border-radius: 12px; background: var(--g); box-shadow: inset 0 0 0 1px var(--b); color: #000; font-weight: 600; cursor: pointer; }
.co-discount button:disabled { opacity: .5; cursor: default; }
.co-totals { display: grid; gap: 6px; }
.co-totals > div { display: flex; justify-content: space-between; }
.co-shiplabel { display: inline-flex; align-items: center; gap: 4px; }
.co-shiplabel svg { width: 14px; height: 14px; }
.co-total { font-size: 18px; line-height: 24.3px; font-weight: 600; margin-top: 10px; }
.co-total small { font-size: 12px; color: var(--mu2); font-weight: 400; margin-right: 6px; }
.co-savings { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-weight: 600; }
.co-div { border: 0; border-top: 1px solid var(--b); margin: 6px 0; }
.co-gtitle { margin: 6px 0 8px; font-weight: 600; }
.co-g { display: grid; grid-template-columns: 40px 1fr; gap: 14px; margin-top: 8px; }
.co-g img { width: 40px; height: 40px; }
.co-g strong { display: block; font-weight: 600; }
.co-g small { display: block; margin-top: 6px; font-size: 12px; line-height: 16.2px; color: var(--mu2); }
.co-summary-toggle, .co-addpill, .co-mdiscount, .co-mtotal, .co-mguar, .co-mg { display: none; }

/* thank-you */
.co-wrap--ty .co-main { grid-column: 2; }
.ty-head { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; }
.ty-head h1 { margin: 2px 0 0; font-size: 24px; font-weight: 600; }
.ty-head p { margin: 0; }
.ty-box { border: 1px solid var(--b); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.ty-box h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.ty-box p { margin: 0 0 6px; }
.ty-box h3 { margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
.ty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ty-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 40px; }
.ty-continue { width: auto; display: inline-block; padding: 16px 28px; }

/* ---- below 1000px: one column; summary collapsed behind a 64px toggle; mini-summary above Pay ---- */
@media (max-width: 999px) {
  .co-header { height: 142.72px; }
  .co-header__logo img { width: 219px; }
  .co-bag { left: auto; right: 14px; top: 58.86px; }
  .co-wrap { grid-template-columns: 1fr; }
  .co-main { grid-column: 1; grid-row: 2; }
  .co-main__inner { padding: 20px 14px 0; max-width: 640px; margin: 0 auto; }
  .co-aside { grid-column: 1; grid-row: 1; display: none; }
  .co-aside.is-open { display: block; }
  .co-aside__inner { width: auto; max-width: 640px; margin: 0 auto; padding: 14px 7px 20px; position: static; }
  .co-summary-toggle { display: flex; width: 100%; height: 64px; justify-content: space-between; align-items: center; padding: 6px 14px; background: var(--g); border: 0; border-bottom: 1px solid var(--b); color: var(--a); cursor: pointer; }
  .co-summary-toggle__l { display: inline-flex; gap: 6px; align-items: center; }
  .co-summary-toggle[aria-expanded=true] svg { transform: rotate(180deg); }
  .co-summary-toggle__r { display: flex; flex-direction: column; align-items: flex-end; color: #000; }
  .co-summary-toggle__r s { font-size: 12px; color: var(--mu); }
  .co-summary-toggle__r strong { font-size: 18px; line-height: 24.3px; font-weight: 600; }
  .co-foot { margin-top: 14px; }
  .co-addpill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--b); color: var(--a); font-weight: 600; cursor: pointer; margin: 0 0 14px; }
  .co-mdiscount { display: block; }
  .co-mtotal { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; min-height: 46px; margin: 0 0 10px; }
  .co-mtotal__thumb img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
  .co-mtotal__l strong { display: block; font-size: 18px; font-weight: 600; }
  .co-mtotal__l small { color: var(--mu); font-size: 14px; }
  .co-mtotal__r { display: flex; align-items: center; gap: 6px; }
  .co-mtotal__r s { color: var(--mu); }
  .co-mtotal__r small { font-size: 10px; font-weight: 600; background: var(--g); border-radius: 36px; padding: 2px 6px; }
  .co-mtotal__r strong { font-size: 18px; font-weight: 600; }
  .co-mguar { display: block; background: var(--g); border-radius: 8px; padding: 6px; text-align: center; font-weight: 600; margin-bottom: 4px; }
  .co-mg { display: block; margin-top: 14px; }
  .co-address .co-row { grid-template-columns: 1fr; }
  .ty-grid { grid-template-columns: 1fr; }
  .co-wrap--ty .co-aside { display: block; grid-row: 2; }
  .co-wrap--ty .co-main { grid-row: 1; }
}
@media (max-width: 575px) { .co-row--2 { grid-template-columns: 1fr; } .ty-actions { flex-direction: column-reverse; align-items: stretch; } }

/* thank-you: subscription section */
.ty-sub__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--b); }
.ty-sub__row small { display: block; color: var(--mu2); font-size: 12px; margin-top: 2px; }
.ty-sub__p { text-align: right; font-weight: 600; }
.ty-sub__p small { display: inline; margin-left: 2px; color: var(--mu2); font-weight: 400; }
.ty-sub__next { margin: 12px 0; }
.ty-manage { margin-top: 12px; }