/* Checkout in the structure of the client's dumpling-calendar checkout (Tereza, 2 Oct), with the landing's fonts
   (Fraunces headings, Figtree text), the green promo bar, the promo timer bar and the personalisation step.
   components.css (ornament cards, personaliser pop-up, exit pop-up) is reused; its spacing variables are set here. */
:root{
  --pad-s:16px;--pad-t:10px;--gap-s:16px;--gap-t:12px;
  --fs-h3:26px;--fs-pb:20px;--fs-pm:18px;--fs-ps:16px;--fs-pt:13px;
  --r-m:6px;--r-s:6px;--r-t:4px;
  --color-brand-primary:#111111;--color-brand-primary-hover:#000000;
  --color-background-brand-tint:#FFF9E0;--color-border-default:#D8D8D8;
  --color-text-primary:#222222;--color-text-secondary:#555555;
  --ck-gold:#C9A400;--ck-yellow:#FFD42F;
}
body.ck{background:#FCFCFC;color:#222}
.ck-in{max-width:1248px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}

/* header */
.ck-hdr{background:#fff;padding:17px 0}
.ck-logo img{height:44px;width:auto;display:block}
.ck-hdr-g{display:flex;align-items:center;gap:14px;font:500 16px/24px "Figtree",sans-serif;color:#222}
.ck-g90{flex:none;width:58px;height:58px;border-radius:50%;background:#B3261E;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 0 0 2px #B3261E;line-height:1}
.ck-g90 b{font:800 20px/18px "Figtree",sans-serif}
.ck-g90 i{font:800 10px/11px "Figtree",sans-serif;font-style:normal;letter-spacing:.3px}
.ck-secure{display:flex;align-items:center;justify-content:center;gap:10px;background:#EEEEEE;padding:9px 16px;font:600 15px/20px "Figtree",sans-serif;color:#222}
.ck-secure svg{width:14px;height:16px}
.ck-crumbs{display:flex;align-items:center;justify-content:center;gap:22px;padding:17px 16px;background:#fff;font:400 12px/16px "Figtree",sans-serif;color:#777}
.ck-crumbs span{display:flex;align-items:center;gap:6px}
.ck-crumbs b{font-weight:500}
.ck-crumbs .on b{color:#000;font-weight:600}
.ck-crumbs i,.ck-crumbs .m{display:none}
.ck-arrow{width:140px;height:10px;color:#000;flex:none}
.ck-arrow+span+.ck-arrow{color:#bbb}

/* body grid */
.ck-body{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,528fr);grid-template-areas:"rail head" "rail form";grid-template-rows:auto 1fr;column-gap:48px;max-width:1248px;margin:0 auto;padding:32px 24px 56px}
.ck-head{grid-area:head;padding-top:10px}
.ck-rail{grid-area:rail;display:flex;flex-direction:column;gap:16px;align-self:start;min-width:0}
.ck-form{grid-area:form;display:flex;flex-direction:column;gap:16px;min-width:0;margin-top:26px}
.ck-head .v3-rating{font-size:14px}
.ck-head h1{font:700 34px/42px var(--font-heading);color:#222;margin-top:12px;letter-spacing:-.3px}
.ck-tag{font:700 16px/24px "Figtree",sans-serif;margin-top:8px;padding-bottom:10px;border-bottom:1px solid #E2E2E2}
.ck-desc{font:400 16px/24px "Figtree",sans-serif;color:#333;margin-top:10px}

/* left rail */
.ck-hero{position:relative;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px #F0F0F0}
.ck-hero{background:linear-gradient(#E7DFD3,#F3EEE5 55%,#EFEBE0)}
.ck-hero img{width:100%;height:auto;aspect-ratio:600/525;object-fit:contain;display:block}
.ck-seal{position:absolute;right:18px;bottom:22px;width:112px;height:112px;border-radius:50%;background:#B3261E;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid #fff;box-shadow:0 0 0 3px #B3261E,0 3px 8px rgba(0,0,0,.25);text-align:center;transform:rotate(-8deg)}
.ck-seal b{font:800 38px/34px "Figtree",sans-serif}
.ck-seal i{font:800 17px/17px "Figtree",sans-serif;font-style:normal}
.ck-seal em{font:700 7.5px/9px "Figtree",sans-serif;font-style:normal;letter-spacing:.4px;margin-top:3px;max-width:86px}
.ck-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ck-tile{background:#fff;border:1px solid #BDBDBD;border-radius:4px;padding:16px 8px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.ck-tile svg{width:32px;height:32px}
.ck-tile p{font:600 15px/18px "Figtree",sans-serif;color:#222}
.ck-revs{display:flex;flex-direction:column;gap:16px}
.ck-rev{background:#fff;border:1px solid #EAEAEA;border-radius:6px;padding:16px 13px 22px}
.ck-rev>p:not(.ck-rev-by){font:400 16px/24px "Figtree",sans-serif;margin-top:12px}
.ck-rev-by{display:flex;align-items:center;gap:8px;margin-top:10px;font:400 14px/20px "Figtree",sans-serif}
.ck-rev-by b{font-weight:700;padding-right:8px;border-right:2px solid #000}
.ck-rev-by span{display:flex;align-items:center;gap:7px}
.ck-rev-by svg{width:16px;height:16px}
.ck-side-h{font:700 28px/36px var(--font-heading);text-align:center;margin-top:20px}
.ck-side-img{border-radius:18px;overflow:hidden;margin-top:8px}
.ck-side-img img{width:100%;height:auto;aspect-ratio:600/520;object-fit:cover;object-position:30% 50%;display:block}

/* promo applied + timer */
.ck-timer{display:grid;grid-template-columns:160px 1fr;min-height:48px;margin-bottom:22px}
.ck-timer-l{background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 14px/18px "Figtree",sans-serif;text-align:center;padding:4px 8px}
.ck-timer-l b{color:var(--v3-green);font-weight:800}
.ck-timer-r{background:var(--v3-green);display:flex;align-items:center;justify-content:center;gap:4px;font:700 12.5px/18px "Figtree",sans-serif;color:#000;padding:4px 10px;flex-wrap:wrap;text-align:center}
.ck-timer-r b{color:#E0401A;font-variant-numeric:tabular-nums}
.ck-timer-r span{white-space:nowrap}

/* steps */
.ck-step{font:700 20px/28px var(--font-heading);color:#222;margin-top:14px}
.ck-step:first-of-type{margin-top:0}
.ck-step--pay{margin-top:6px}
.ck-paysub{font:400 15px/22px "Figtree",sans-serif;margin-top:-10px}

/* package cards */
.ck-tiers{display:flex;flex-direction:column;gap:20px}
.tc{display:flex;align-items:center;gap:16px;min-height:112px;padding:14px 16px;background:#fff;border:1px solid #ECECEC;box-shadow:0 0 0 1px #F6F6F6;cursor:pointer}
.tc.is-on{background:var(--color-background-brand-tint);border:3px solid var(--ck-gold);padding:12px 14px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.tc:focus-visible{outline:2px solid #000;outline-offset:2px}
.tc-radio{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid #D0D0D0;background:#fff;position:relative}
.tc.is-on .tc-radio{border:2px solid var(--ck-gold)}
.tc.is-on .tc-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ck-gold)}
.tc-img{flex:none;width:84px;height:84px;object-fit:cover;border-radius:4px}
.tc-c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tc-c b{font:700 18px/24px "Figtree",sans-serif}
.tc-c em{font:800 11px/14px "Figtree",sans-serif;font-style:normal;background:#FFE135;border-radius:4px;padding:3px 8px}
.tc-p{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.tc-p b{font:700 18px/26px "Figtree",sans-serif}
.tc-p s{font:400 17px/24px "Figtree",sans-serif;color:#222;text-decoration-color:#C62828}
.tc-flag{font:700 13px/18px "Figtree",sans-serif;color:#0F8A6A}
.tc-flag--best{color:#1B6FB5}

/* personalisation cards (components.css .oc) in the checkout's look */
.ck .c1-pz{gap:18px;margin-top:6px}
.ck .oc{border-radius:0;border-color:#ECECEC}
.ck .oc.is-saved{border-color:var(--ck-gold)}
.ck .oc-btn{background:#111;color:#fff;border-radius:4px;font-family:"Figtree",sans-serif}
.ck .oc-btn--edit{background:#fff;color:#111}
.ck .oc-num{background:#111}

/* fields */
.ck-f{position:relative;display:block}
.ck-f input,.ck-f select{width:100%;height:48px;border:1px solid #BDBDBD;border-radius:6px;background:#fff;padding:0 13px;font:400 15px/22px "Figtree",sans-serif;color:#222;appearance:none;-webkit-appearance:none}
.ck-f input::placeholder{color:#666;opacity:1}
.ck-f input:focus,.ck-f select:focus{outline:none;border-color:#111}
.ck-f--sel small{position:absolute;left:13px;top:6px;font:400 10px/12px "Figtree",sans-serif;color:#777}
.ck-f--sel small+select{padding-top:14px}
.ck-chev{position:absolute;right:15px;top:21px;width:12px;height:7px;color:#444;pointer-events:none}
.ck-f--flag img{position:absolute;right:12px;top:18px;width:20px;height:11px}
.ck-f--ic svg{position:absolute;right:15px;top:15px;width:14px;height:16px;color:#888}
.ck-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ck-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ck-guar{display:flex;align-items:center;gap:16px;font:400 11.5px/16px "Figtree",sans-serif;color:#222;margin-top:8px}
.ck-guar b{font-weight:800}

/* payment */
.ck-express{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ck-xb{height:44px;border:0;border-radius:4px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;gap:3px;font:500 19px/1 "Figtree",sans-serif}
.ck-xb svg{width:20px;height:20px}
.ck-xb--pp{background:#FFC439}
.ck-ppw{font:800 19px/1 "Figtree",sans-serif;font-style:italic;letter-spacing:-.3px}
.ck-ppw i{color:#003087}.ck-ppw b{color:#009CDE;font-weight:800}
.ck-or{display:flex;align-items:center;gap:12px;font:800 13px/18px "Figtree",sans-serif;color:#222}
.ck-or i{flex:1;height:1px;background:#E5D9C8}
.ck-card{border:1px solid #D8D8D8;border-radius:6px;background:#EFEFEF;overflow:hidden}
.ck-card-h{display:flex;align-items:center;gap:10px;padding:16px 15px;border-bottom:1px solid #D8D8D8;font:700 16px/22px "Figtree",sans-serif}
.ck-radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--ck-gold);background:#fff;position:relative}
.ck-radio.on::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ck-gold)}
.ck-cards{margin-left:auto;display:flex;align-items:center;gap:6px}
.ck-cards img{width:34px;height:22px;object-fit:contain;background:#fff;border-radius:3px;border:1px solid #DDD}
.ck-cards em{font:400 11px/14px "Figtree",sans-serif;font-style:normal;color:#444;margin-left:2px}
.ck-card-b{display:flex;flex-direction:column;gap:16px;padding:16px}
.ck-bill{display:flex;align-items:center;gap:9px;font:400 11.5px/16px "Figtree",sans-serif;cursor:pointer}
.ck-bill input{width:16px;height:16px;accent-color:#000;margin:0}

/* order summary */
.ck-sum{background:#fff;border:1px solid #F1D9CE;padding:22px 24px 24px;margin-top:16px}
.cs-h{display:flex;justify-content:space-between;font:700 16px/22px "Figtree",sans-serif;padding-bottom:9px;border-bottom:1px solid #E5D9C8}
.cs-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 10px 2px;border-bottom:1px solid #E5D9C8;font:700 15.5px/22px "Figtree",sans-serif}
.cs-item span:last-child{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}
.cs-item s{font-weight:400;text-decoration-color:#C62828}
.cs-promo{background:var(--v3-green);text-align:right;font:800 13.5px/18px "Figtree",sans-serif;padding:8px 12px;margin-top:16px}
.cs-row{display:flex;justify-content:space-between;align-items:center;font:400 13.5px/18px "Figtree",sans-serif;margin-top:22px}
.cs-row b{font-weight:800}
.cs-row em{font-style:normal;font-weight:800;color:#E0401A}
.cs-exit{color:#11734F;font-weight:700;margin-top:14px}
.cs-ship{font:400 13.5px/19px "Figtree",sans-serif;margin-top:20px;color:#222}
.cs-total{display:flex;justify-content:space-between;align-items:baseline;font:800 18px/26px "Figtree",sans-serif;margin-top:20px}
.cs-total small{font:800 12.5px/18px "Figtree",sans-serif;margin-right:9px}

/* CTA */
.ck-btn{width:100%;min-height:60px;border:1px solid #D9B000;border-radius:4px;background:var(--ck-yellow);color:#111;font:800 20px/26px "Figtree",sans-serif;letter-spacing:.2px;box-shadow:0 3px 6px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;gap:8px}
.ck-btn:hover{background:#FFCC00}
.ck .c1-err{color:#B70101;font:700 14px/20px "Figtree",sans-serif;text-align:center}

/* insurance below the CTA (kept from 30 Sep): base rules as in checkout.css, then the reference's card look */
.ins{width:100%;background:var(--color-background-white);border:1px solid var(--color-border-default);border-radius:var(--r-s)}
.ins-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 14px}
.ins-t{min-width:0}
.ins-h{margin:0;font-weight:700;font-size:var(--fs-ps);line-height:1.45;color:var(--color-text-primary)}
.ins-h b{font-weight:800}
.ins-s{margin:2px 0 0;font-weight:400;font-size:var(--fs-pt);line-height:1.45;color:var(--color-text-secondary)}
.ins-sw{position:relative;flex:none;width:64px;height:26px;border:0;border-radius:999px;cursor:pointer;background:var(--color-border-default);padding:0;transition:background .15s}
.ins-sw .ins-lab{position:absolute;top:50%;right:10px;transform:translateY(-50%);font:700 13px/1 var(--font-body);color:var(--color-text-primary)}
.ins-sw .ins-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.ins.is-on .ins-sw{background:var(--color-brand-primary)}
.ins.is-on .ins-sw .ins-lab{right:auto;left:11px;color:#fff}
.ins.is-on .ins-sw .ins-knob{left:41px}
.ins-sw:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px}
.ins-tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--fs-pt);line-height:1.3;border-top:1px solid var(--color-border-default)}
.ins.is-on .ins-tbl{display:none}
.ins-tbl th{font-weight:600;text-align:center;padding:10px 6px 6px;width:27.5%}
.ins-tbl th:first-child{text-align:left;padding-left:14px;width:45%}
.ins-tbl td{padding:6px;text-align:center;color:var(--color-text-secondary)}
.ins-tbl td:first-child{text-align:left;padding-left:14px;color:var(--color-text-primary)}
.ins-tbl tr:last-child td{padding-bottom:12px}
.ins-y{color:var(--color-text-success)!important;font-weight:800}
.ins-n{font-weight:800}

.ck .ck-ins{margin-top:16px;border:0;border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.12);background:#fff}
.ck .ins-bar{padding:18px 20px}
.ck .ins-h{font:700 16px/22px "Figtree",sans-serif}
.ck .ins-s{font:400 14px/20px "Figtree",sans-serif;margin-top:6px}
.ck .ins-sw{width:62px;height:30px;background:#C9C9C9}
.ck .ins-sw .ins-knob{width:22px;height:22px;top:4px;left:4px}
.ck .ins.is-on .ins-sw{background:#1F5AE0}
.ck .ins.is-on .ins-sw .ins-knob{left:36px}
.ck .ins-sw .ins-lab{font:800 10px/1 "Figtree",sans-serif;right:9px}
.ck .ins.is-on .ins-sw .ins-lab{left:10px}

/* trust */
.ck-trust{display:flex;justify-content:center;gap:32px;margin-top:14px}
.ck-trust>span{display:flex;align-items:center;gap:8px;font:800 11px/12px "Figtree",sans-serif;color:#444}
.ck-trust svg{width:20px;height:22px;flex:none}
.ck-marks{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.ck-marks img{width:38px;height:24px;object-fit:contain}
.ck-apay{display:inline-flex;align-items:center;gap:2px;font:500 17px/1 "Figtree",sans-serif;color:#222}
.ck-apay svg{width:17px;height:17px}
.ck-pp .ck-ppw{font-size:16px}

/* footer */
.ck-foot{background:var(--ck-yellow);padding:16px 0}
.ck-foot nav{display:flex;gap:16px;font:400 15px/22px "Figtree",sans-serif}
.ck-foot p{font:400 12.5px/18px "Figtree",sans-serif}

/* pop-ups: brand fonts, quote chooser */
.ck .pm-save,.ck .xi-cta{background:var(--ck-yellow);color:#111;font-family:"Figtree",sans-serif}
.ck .xi-cta{width:100%;min-height:54px;border:1px solid #D9B000;border-radius:4px;font:800 18px/24px "Figtree",sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.ck .pm-save:disabled{opacity:.5}
.pm-quotes{gap:8px}
.pm-q{display:flex;align-items:center;gap:10px;border:1px solid #BDBDBD;border-radius:6px;padding:11px 12px;font:600 15px/20px "Figtree",sans-serif;cursor:pointer;background:#fff}
.pm-q input{width:18px;height:18px;margin:0;accent-color:#111;border:0;padding:0;appearance:auto;-webkit-appearance:auto;flex:none}
.pm-q:has(input:checked){border-color:#111;box-shadow:inset 0 0 0 1px #111;background:#FFF9E0}

/* ---------- tablet: one column. Order as on the reference: head, image, form, then tiles, reviews, photo ---------- */
@media (max-width:1023px){
  .ck-body{display:flex;flex-direction:column;max-width:720px;padding-top:24px}
  .ck-head{order:1;text-align:center}
  .ck-head .v3-rating{justify-content:center}
  .ck-rail{display:contents}
  .ck-hero{order:2;margin-top:16px}
  .ck-form{order:3;margin-top:16px}
  .ck-tiles{order:4;margin-top:28px}
  .ck-revs{order:5;margin-top:16px}
  .ck-side-h{order:6;margin-top:32px}
  .ck-side-img{order:7;margin-top:16px}
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .ck-in{padding:0 16px}
  .ck-hdr{padding:10px 0}
  .ck-logo img{height:33px}
  .ck-hdr-g span:last-child{display:none}
  .ck-g90{width:40px;height:40px;border-width:2px}
  .ck-g90 b{font-size:14px;line-height:13px}.ck-g90 i{font-size:7px;line-height:8px}
  .ck-secure{font-size:14px;padding:8px 12px}
  .ck-crumbs{gap:10px;padding:10px 16px;border-bottom:1px solid #E6E6E6;align-items:flex-start}
  .ck-crumbs span{flex-direction:column;gap:5px;font-size:12.5px}
  .ck-crumbs i{display:flex;width:22px;height:22px;border-radius:50%;background:#D2D2D2;color:#fff;align-items:center;justify-content:center;font:700 12px/1 "Figtree",sans-serif;font-style:normal}
  .ck-crumbs .on i{background:#000}
  .ck-crumbs .d{display:none}.ck-crumbs .m{display:inline}
  .ck-arrow{width:auto;flex:1;max-width:60px;margin-top:6px;color:#D2D2D2!important}
  .ck-body{padding:20px 16px 40px}
  .ck-head h1{font-size:24px;line-height:28px;margin-top:10px;max-width:260px;margin-left:auto;margin-right:auto}
  .ck-tag{font-size:15.5px;line-height:24px;border:0;padding:0}
  .ck-desc{display:none}
  .ck-hero img{aspect-ratio:358/340}
  .ck-head .v3-rating{flex-direction:column;gap:6px;font-size:13px}
  .ck-seal{width:104px;height:104px;right:14px;bottom:14px}
  .ck-timer{grid-template-columns:132px 1fr;margin-bottom:10px}
  .ck-timer-l{font-size:12px;line-height:17px}
  .ck-timer-r{font-size:12px;flex-direction:column;gap:0;padding:5px 6px;line-height:17px}
  .ck-step{font-size:18px}
  .ck-tiers{gap:14px}
  .tc{gap:12px;min-height:86px;padding:12px}
  .tc.is-on{padding:10px}
  .tc-img{width:56px;height:56px}
  .tc-c b{font-size:17px}
  .tc-p b{font-size:17px}.tc-p s{font-size:16px}
  .ck-row2{grid-template-columns:1fr}
  .ck-row3{grid-template-columns:1fr}
  .ck-express{grid-template-columns:1fr;gap:10px}
  .ck-xb{height:44px}
  .ck-cards em{display:none}
  .ck-sum{padding:20px 22px}
  .cs-item{font-size:14.5px}
  .ck-tiles{grid-template-columns:1fr 1fr}
  .ck-side-h{font-size:26px;line-height:34px}
  .ck-foot .ck-in{flex-direction:column;gap:4px}
}