/* Vows That Last · order page v9 (5 Nov 2026): the layout of a shop checkout, on top of order-brand.css.
   Form on the left, the order summary on a paper panel that runs to the right edge; on a phone the summary
   folds into a bar at the top. Colours, type, the blush pill and the gift card all come from order-brand.css. */
.co-page{background:var(--ground)}
.co-page .f-bar{background:var(--ground)}
.co{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:calc(100vh - 90px)}
.co-main{display:flex;justify-content:flex-end;padding:40px 52px 0 24px}
.co-main>.co-in{width:100%;max-width:580px}
.co-side{background:var(--paper);border-left:1px solid var(--line);padding:40px 24px 40px 52px}
.co-side>.co-in{width:100%;max-width:460px;position:sticky;top:24px}

/* left column */
.co .f-h1{font-size:clamp(34px,4vw,44px)}
.co .f-lead{font-size:17px;margin-bottom:28px}
.co-h{margin:30px 0 14px;font:500 22px/1.2 var(--serif);color:var(--ink)}
.co-h:first-of-type{margin-top:0}
.co .f-field{margin-bottom:12px}
.co .f-help{margin-top:2px}
.co-paybox{border:1px solid var(--line);border-radius:14px;background:#FFFDF8;padding:16px 18px;margin:0 0 18px}
.co-paybox p{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:15px;color:var(--ink)}
.co-paybox p svg{color:var(--accent-text);flex:none}
.co-logos{display:flex;flex-wrap:wrap;gap:6px}
.co-logos img{display:block;width:38px;height:24px}
.co .o-bump{margin-bottom:18px}
.co .f-consent{margin-bottom:18px}
.co .f-safe{margin-top:40px;text-align:left;font-size:13.5px}
.co .f-foot{justify-content:flex-start;padding-bottom:28px}

/* right column: the summary */
.co-sumd>summary{display:none}
.co-sum{display:block}
.co-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:0 0 16px}
.co-thumb{position:relative;width:64px;height:64px;border:1px solid var(--line);border-radius:12px;background:#FFFDF8}
.co-thumb img{width:100%;height:100%;object-fit:cover;border-radius:11px;display:block}
.co-thumb.gift{display:flex;align-items:center;justify-content:center;color:var(--accent-text)}
.co-thumb.gift svg{width:28px;height:28px}
.co-qty{position:absolute;top:-8px;right:-8px;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:#6E5748;color:#FFF8EF;font:500 11.5px/21px var(--sans);text-align:center}
.co-it b{display:block;font-size:16px;font-weight:500;color:var(--ink)}
.co-it span{display:block;font-size:14px;color:var(--ink-2);line-height:1.4}
.co-p{font:500 16px/1 var(--serif);color:var(--ink);white-space:nowrap}
.co-incl{margin:4px 0 0}
.co-incl .f-line{font-size:14.5px}
.co .f-total{align-items:center}
.co .f-total b{font-size:34px}
.co .f-total small{font:500 12px/1 var(--sans);letter-spacing:.08em;color:var(--ink-2);vertical-align:middle;margin-right:4px}
.co .o-next{margin:22px 0 0;border:1px solid var(--line);border-radius:17px;background:var(--ground)}
.co .o-next ol{padding-right:60px}
.co .o-cap{font-size:13px}

@media (max-width:900px){
 .co{grid-template-columns:minmax(0,1fr);min-height:0}
 .co-side{order:-1;border-left:0;border-bottom:1px solid var(--line);padding:0}
 .co-side>.co-in{max-width:none;position:static}
 .co-main{justify-content:center;padding:28px 20px 0}
 .co-sumd>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;
  width:min(580px,calc(100% - 40px));margin:0 auto;padding:16px 0;font-size:15.5px;color:var(--accent-text)}
 .co-sumd>summary::-webkit-details-marker{display:none}
 .co-sumd>summary>span::after{content:"";display:inline-block;width:7px;height:7px;margin:0 0 3px 9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
 .co-sumd[open]>summary>span::after{transform:rotate(-135deg);margin-bottom:-1px}
 .co-sumd>summary b{font:500 18px/1 var(--serif);color:var(--ink)}
 .co-sumd .co-hide,.co-sumd[open] .co-show{display:none}
 .co-sumd[open] .co-hide{display:inline}
 .co-sum{width:min(580px,calc(100% - 40px));margin:0 auto;padding:4px 0 22px}
 .co .o-next{margin:18px 0 0}
}
@media (max-width:560px){
 .co-main{padding:22px 16px 0}
 .co-sumd>summary,.co-sum{width:calc(100% - 32px)}
 .co .f-h1{font-size:34px}
 .co .f-foot{justify-content:center;text-align:center}
}

/* v9.1 (5 Nov 2026): "What's inside" as four picture tiles instead of four text lines */
.co-inside{margin:6px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.co-inside .f-kick{margin-bottom:12px}
.co-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-tile{display:flex;flex-direction:column;gap:2px;min-width:0}
.co-tile b{margin-top:8px;font-size:14.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.co-tile span{font-size:13px;line-height:1.35;color:var(--ink-2)}
.co-tile i{font-size:13px;color:var(--accent-text)}
.co-art{position:relative;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;
 background:radial-gradient(ellipse at 50% 35%,#FFFDF8,#FFF8EF 60%,#F6EADD 140%)}
.co-art.game{background:radial-gradient(ellipse at 50% 38%,#1b2b40,#101b2b 62%,#080f1a 140%);border-color:#455267}
/* the book: the real cover, slightly turned, with a spine shadow */
.co-art.book img.cover{height:82%;width:auto;border-radius:2px 4px 4px 2px;transform:rotate(-4deg);
 box-shadow:-3px 0 0 #d9c7b6,0 10px 18px -6px rgba(66,45,35,.35)}
/* the game and the notes: a small phone, cropped to the top of the screen */
.mini-phone{position:absolute;top:12%;width:44%;height:100%;border-radius:12px 12px 0 0;background:#0a111d;padding:4px 4px 0;
 box-shadow:0 0 0 1px rgba(189,144,108,.45),0 14px 24px -10px rgba(0,0,0,.55)}
.mini-phone.light{background:#3a2a22}
.mini-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:9px 9px 0 0}
/* the bonuses: four cards fanned out, the two bonus covers in front */
.co-art.stack .card{position:absolute;top:13%;left:50%;width:31%;aspect-ratio:420/595;margin-left:-15.5%;border-radius:3px;
 box-shadow:0 6px 14px -6px rgba(66,45,35,.45);border:1px solid #e3d2c2;background:#FFF8EF;object-fit:cover}
.co-art.stack span.card{display:flex;align-items:center;justify-content:center}
.co-art.stack span.card .heart{width:16px;height:16px;color:var(--blush);
 -webkit-mask-image:url(/img/brand/heart-filled-blush-light.svg);mask-image:url(/img/brand/heart-filled-blush-light.svg)}
.co-art.stack .c1{transform:translateX(-46%) rotate(-14deg)}
.co-art.stack .c2{transform:translateX(-16%) rotate(-5deg)}
.co-art.stack .c3{transform:translateX(16%) rotate(5deg)}
.co-art.stack .c4{transform:translateX(46%) rotate(14deg)}
@media (max-width:380px){.co-tiles{gap:10px}.co-tile b{font-size:14px}}

/* v9.2: the payment note sits right under the pay button, as reassurance */
.co-payunder{margin:12px 0 0;text-align:center}
.co-payunder p{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 8px;font-size:14px;color:var(--ink-2)}
.co-payunder p svg{color:var(--accent-text);flex:none}
.co-payunder .co-logos{justify-content:center}
.co .o-bump{margin-top:6px}