/* Vows That Last · order page (/order), look of the brand guide of 2 Nov 2026 (order v1).
   Replaces forms.css on this page only; base.css still does the fonts, language switch, price and gift-copy switches.
   Light world only (ivory page, chocolate text, blush accents, a thin gold frame, the brand's own flowers).
   Every text colour passes 4.5:1 on the backgrounds it sits on. Gold is only ever a line, blush only a fill. */
:root{
  --ground:#FFF8EF; --glow:#FFFDF8; --edge:#EAD8C8; --paper:#F6EADD; --paper-hi:#FFF8EF;
  --ink:#422D23; --ink-2:#6E5748; --blush:#D99684; --on-blush:#2A1A15; --accent-text:#9E5848;
  --gold:#D7BDA6; --frame-inner:rgba(164,127,98,.2); --line:#DDC9B7;
  --shadow-pill:0 5px 16px rgba(117,78,52,.16); --shadow-lift:0 10px 26px -14px rgba(91,61,40,.13); --shadow-flower:0 2px 5px rgba(117,78,52,.12);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif; --sans:"DM Sans",system-ui,-apple-system,Arial,sans-serif;
}
html,body{background:var(--ground)}
body{color:var(--ink);font:400 16px/1.55 var(--serif);-webkit-font-smoothing:antialiased}
.f-page{background:radial-gradient(ellipse at 50% 0%,var(--glow),var(--ground) 55%) no-repeat;min-height:100vh}
.f-page *{box-sizing:border-box}
.f-wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,label:focus-within>input:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

/* the drawn heart */
.heart{display:inline-block;width:1em;height:1em;background:currentColor;
 -webkit-mask:url(/img/brand/heart-outline-brown.svg) center/contain no-repeat;mask:url(/img/brand/heart-outline-brown.svg) center/contain no-repeat}

/* top bar: the wordmark (heart above VOWS THAT LAST), secure checkout, language */
.f-bar{border-bottom:1px solid var(--line)}
.f-barin{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;flex-wrap:wrap}
.f-brand{white-space:nowrap;display:inline-flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--ink);font:500 10.5px/1.3 var(--sans);letter-spacing:.27em;text-transform:uppercase}
.f-brand .heart{font-size:22px}
.f-quiet{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-2)}
.vtl-langsw{border-color:var(--line);background:var(--ground)}
.vtl-langsw a{font:500 11px/1 var(--sans);letter-spacing:.14em;color:var(--ink-2)}
html:not(.vtl-nl) .vtl-langsw a[data-vtl-lang="en"],html.vtl-nl .vtl-langsw a[data-vtl-lang="nl"]{background:var(--ink);color:var(--ground)}

/* layout */
.o-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:36px;align-items:start;padding:36px 0 20px}

/* the form column is a framed stationery page */
.framed{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--gold);border-radius:23px;
 background:radial-gradient(ellipse at 48% 30%,var(--glow),var(--ground) 60%,var(--edge) 150%);box-shadow:var(--shadow-lift)}
.framed::after{content:"";position:absolute;inset:5px;border:1px solid var(--frame-inner);border-radius:18px;pointer-events:none;z-index:3}
.framed>*{position:relative;z-index:2}
.o-main{padding:34px 40px 30px}

/* the brand's own flowers, never under text */
.fl{position:absolute!important;z-index:1!important;pointer-events:none;background:center/contain no-repeat;opacity:.6;filter:drop-shadow(var(--shadow-flower))}
.fl.star{background-image:url(/img/brand/flower-03-starflower.svg);width:96px;height:96px;right:-26px;top:-26px;transform:rotate(14deg)}
.fl.blossom{background-image:url(/img/brand/flower-01-blossom.svg);width:110px;height:110px;right:-30px;bottom:-34px;transform:rotate(9deg)}
.fl.branch{background-image:url(/img/brand/botanical-backdrop.svg);width:150px;height:240px;right:6px;bottom:-60px;opacity:.22;filter:none;z-index:0!important}

/* heading */
.o-back{margin:0 0 18px;font-size:15px}
.o-back a{color:var(--ink-2);text-decoration:none}
.o-back a:hover{color:var(--ink)}
.f-h1{font:400 clamp(38px,5vw,52px)/1.06 var(--serif);letter-spacing:-.01em;margin:0 0 14px;color:var(--ink)}
.f-lead{font-size:18px;color:var(--ink-2);margin:0 0 26px;max-width:52ch}

/* error box */
.o-err{background:#FBEFE9;border:1px solid var(--blush);border-left-width:4px;border-radius:14px;padding:14px 18px;margin:0 0 20px;color:#7A3B2E;font-size:15px;font-weight:500;scroll-margin-top:16px}
.o-err p{margin:0}.o-err p+p{margin-top:6px}.o-err p[hidden]{display:none}
.o-err a{color:#7A3B2E}

/* fieldsets */
.o-form{margin:0}
.f-fs{border:0;margin:0 0 22px;padding:0}
.f-fs legend{padding:0;margin:0 0 12px;font:500 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px;width:100%}
.f-fs legend::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.7}
.f-opt{font:italic 400 14px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.f-field label{font:500 15px/1.3 var(--serif);color:var(--ink)}
.f-field input{width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#FFFDF8;color:var(--ink);font:400 16px/1.3 var(--serif);transition:border-color .2s,box-shadow .2s}
.f-field input::placeholder{color:#8F7A6B}
.f-field input:hover{border-color:#CDB29C}
.f-field input:focus{border-color:var(--accent-text);box-shadow:0 0 0 3px rgba(217,150,132,.25);outline:none}
.f-field input[aria-invalid="true"]{border-color:#B3261E;background:#FFF6F3}
.f-help{margin:10px 0 0;font-size:14.5px;color:var(--ink-2)}

/* payment note */
.o-pay{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;margin:0 0 18px;padding:14px 16px;border-radius:14px;background:var(--paper);font-size:14.5px;color:var(--ink-2)}
.o-pay svg{color:var(--accent-text);margin-top:2px}

/* gift copy: a champagne card with a fine gold edge */
.o-bump{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:18px 20px;margin:0 0 16px;cursor:pointer;border-radius:17px;isolation:isolate;
 background:linear-gradient(145deg,#FFFDF8 0%,#F6EADD 42%,#FFF8EF 58%,#EAD8C8 100%);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 12px 28px -18px rgba(117,78,52,.4)}
.o-bump::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(135deg,#EAD8C8,#BD906C 30%,#F6EADD 50%,#D7BDA6 75%,#BD906C);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.o-bump input,.f-consent input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--accent-text)}
.o-bump b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:17px;font-weight:500;color:var(--ink);margin-bottom:4px}
.o-bump b>span{flex:1 1 0;min-width:0}
.o-bump b svg{color:var(--accent-text);display:block;flex:none}
.o-bump b em{font:500 14px/1 var(--serif);font-style:normal;margin-left:auto;background:var(--blush);color:var(--on-blush);border-radius:999px;padding:6px 12px}
.o-bump span.d{display:block;font-size:14.5px;color:var(--ink-2)}

/* consent */
.f-consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:14.5px;color:var(--ink);margin:6px 0 20px;cursor:pointer}
.f-consent.is-bad{background:#FBEFE9;border-radius:12px;padding:10px 12px;margin-left:-12px;margin-right:-12px;box-shadow:inset 3px 0 0 var(--blush)}

/* the one blush pill */
.f-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 28px;border:0;border-radius:999px;background:var(--blush);color:var(--on-blush);
 font:500 17px/1.25 var(--serif);text-align:center;cursor:pointer;box-shadow:var(--shadow-pill);transition:box-shadow .2s,filter .2s}
.f-btn.full{width:100%}
.f-btn:hover{filter:brightness(1.04);box-shadow:0 8px 22px rgba(117,78,52,.24)}
.f-btn svg{flex:none}
.f-btn .b-busy{display:none}
.f-btn.is-busy{cursor:progress;filter:saturate(.8)}
.f-btn.is-busy .b-idle{display:none}
.f-btn.is-busy .b-busy{display:inline}
.f-legal{margin:14px 0 0;font-size:13.5px;color:var(--ink-2);text-align:center}
.f-legal a,.f-link{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}

/* under the form */
.o-under{margin:22px 0 6px;font-size:14.5px;color:var(--ink-2);text-align:center}
.o-giftline{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:0;font-size:14.5px;color:var(--ink-2);text-align:center}
.o-giftline svg{color:var(--accent-text);flex:none}

/* order summary: a paper panel */
.o-side{position:sticky;top:20px}
.o-sum{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 0%,var(--paper-hi),var(--paper) 70%);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow-lift)}
.o-img{aspect-ratio:16/10;background:var(--paper);overflow:hidden;border-bottom:1px solid var(--line)}
.o-img img{width:100%;height:100%;object-fit:cover;display:block}
.o-sumin{padding:24px 26px 22px}
.f-kick{margin:0 0 8px;font:500 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.o-title{margin:0;font:500 30px/1.15 var(--serif);color:var(--ink)}
.o-sub{margin:4px 0 16px;font-style:italic;color:var(--ink-2)}
.f-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.f-line i{font-style:italic;color:var(--accent-text);white-space:nowrap}
.f-line.o-opt>span{display:flex;align-items:flex-start;gap:8px}
.f-line.o-opt svg{color:var(--accent-text);flex:none;margin-top:1px}
.f-line.o-opt i{color:var(--ink-2)}
.f-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0 4px;margin-top:4px;border-top:1px solid var(--gold)}
.f-total>span{font:500 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.f-total b{font:400 46px/1 var(--serif);color:var(--accent-text)}
.o-with{margin:4px 0 0;text-align:right;font-size:14px;color:var(--ink-2)}
.f-ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.f-ticks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;color:var(--ink)}
.f-ticks svg{color:var(--accent-text);margin-top:2px}
.o-cap{margin:16px 0 0;font-size:13.5px;font-style:italic;color:var(--ink-2)}

/* what happens next: the game's little progress squares */
.o-next{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:22px 26px 26px;background:var(--ground)}
.o-next>*:not(.fl){position:relative;z-index:2}
.o-next ol{list-style:none;margin:0;padding:0 70px 0 0;display:grid;gap:12px}
.o-next li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;font-size:15px;color:var(--ink)}
.o-next li b{width:24px;height:25px;border-radius:6px;background:var(--blush);color:var(--on-blush);display:flex;align-items:center;justify-content:center;font:500 13px/1 var(--sans)}

/* footer: the safety line stays */
.f-safe{margin:34px auto 0;max-width:760px;text-align:center;font-size:14px;font-style:italic;color:var(--ink-2)}
.f-foot{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:22px;padding:20px 0 30px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.f-foot a{color:var(--ink-2)}
.f-foot a:hover{color:var(--ink)}

/* cookie banner in the brand look (the text and buttons come from vtl.js) */
.vtl-ck{background:var(--ground);border:1px solid var(--gold);border-radius:23px;font:15px/1.5 var(--serif);color:var(--ink-2);box-shadow:0 18px 40px rgba(66,45,35,.18)}
.vtl-ck b{font:500 22px/1.2 var(--serif);color:var(--ink)}
.vtl-ck a{color:var(--accent-text)}
.vtl-ck button{font:500 15px/1.2 var(--serif);border-radius:999px;padding:12px 22px;min-height:46px}
.vtl-ck .no{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.vtl-ck .yes{background:var(--blush);border:1px solid var(--blush);color:var(--on-blush);box-shadow:var(--shadow-pill)}

@media (max-width:860px){
 .o-grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:22px}
 .o-side{position:static}
}
@media (max-width:560px){
 .f-wrap{width:calc(100% - 28px)}
 .o-main{padding:26px 20px 24px}
 .f-row{grid-template-columns:1fr}
 .f-lead{font-size:17px}
 .o-sumin{padding:20px 20px 18px}
 .o-next{padding:20px 20px 24px}
 .o-title{font-size:26px}
 .f-total b{font-size:40px}
 .fl.star{width:76px;height:76px;right:-22px;top:-22px}
 .f-foot{justify-content:center;text-align:center}
 .f-barin{flex-wrap:nowrap;gap:10px}
 .vtl-barr{flex-wrap:nowrap;gap:10px}
 .f-quiet{font-size:13px;gap:5px}
 .f-brand{font-size:9.5px;letter-spacing:.24em}
 .o-giftline{display:block}
 .o-giftline svg{display:inline-block;vertical-align:-4px;margin-right:6px}
}
@media (max-width:380px){
 .vtl-barr{flex-direction:column;align-items:flex-end;gap:6px}
 .f-quiet{font-size:12.5px}
 .vtl-langsw a{padding:7px 10px}
 .o-bump{padding:16px}
 .o-bump b em{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.fl,.vtl-ck{display:none!important}}