/* Checkout-only styles in one file (QA 2026-10-15 #21: fewer stylesheets). In the old load order: checkout-jolly.css,
   customily-inline.css, exit-intent-popup.css, then the v3 glue. */

/* ===== was css/checkout-jolly.css ===== */
/* Always Near checkout: the overrides that make next-core / Apollo components match Jolly's
   checkout1 design. Loads after css/jolly/*.css. Layout, type scale and colours come from the
   Jolly files and their tokens; this file only re-skins the SDK-owned family markup, which keeps
   its own classes and attributes. Scoped to .an-checkout (the page wrapper) and .pm (the dialog). */

:root{
  /* next-core headings and body follow the Jolly body face; Jolly's own classes pick the serif. */
  --_text---font-family--primary:var(--font-body);
  --_text---font-family--heading:var(--font-body);
}
html{overflow-x:hidden}
body{line-height:1.5;letter-spacing:0}
.an-checkout h1,.an-checkout h2,.an-checkout h3,.pm h2{letter-spacing:0}
.an-checkout [hidden],.pm [hidden]{display:none!important}
.an-checkout a{text-decoration:underline}
.an-checkout .c1-foot a{text-decoration:none}
.an-checkout .c1-foot a:hover{text-decoration:underline}

/* ---------- column rhythm: every group inside the form stacks like .c1-form ---------- */
.c1-form>.checkout-selectors,.c1-stack{display:flex;flex-direction:column;gap:20px;min-width:0}
@media (max-width:640px){.c1-form>.checkout-selectors,.c1-stack{gap:var(--gap-s)}}
.c1-logo{display:block}

/* ---------- step 1: SDK bundle cards in Jolly's RadioCard1 ---------- */
.rc{user-select:none;-webkit-user-select:none}
.rc.next-selected{background:var(--color-background-brand-tint);border-color:var(--color-brand-primary);box-shadow:inset 0 0 0 1px var(--color-brand-primary),0 2px 4px rgba(0,0,0,.14)}
.rc.next-selected .rc-radio{border-color:var(--color-brand-primary)}
.rc.next-selected .rc-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--color-brand-primary)}
.rc-name{margin:0}
.rc-price s{text-decoration:line-through}
.rc-unit{flex-wrap:wrap;row-gap:4px}
.rc-unit .rc-each{white-space:nowrap}

/* ---------- step 2: ornament cards ---------- */
.oc-meta s{color:var(--color-text-secondary)}
.oc-thumb{flex:none;width:40px;height:40px;border-radius:var(--r-t);object-fit:cover;background:var(--color-border-default)}
.oc-btn:disabled{opacity:.55;cursor:default}
.oc-btn:focus-visible,.pm-x:focus-visible,.pm-cancel:focus-visible,.pm-save:focus-visible,.gal-arrow:focus-visible,.gal-strip button:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px}
.cz-status{font:600 var(--fs-pt)/1.4 var(--font-body);color:var(--color-text-secondary)}
.cz-status:empty{display:none}
/* Friendly reminder after a checkout attempt with an ornament still to personalize. */
.cz-notice{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--color-brand-primary);border-radius:12px;background:var(--color-background-brand-tint,#f8efea);font:400 var(--fs-pt)/1.45 var(--font-body);color:var(--color-text-primary);scroll-margin-top:96px}
.cz-notice strong{font:600 var(--fs-pt)/1.3 var(--font-body);color:var(--color-brand-primary)}

/* ---------- steps 3 to 5: Apollo form sections in Jolly's Field1 ---------- */
.an-checkout .form-section{gap:20px;margin:0;padding:0;border:0}
@media (max-width:640px){.an-checkout .form-section{gap:var(--gap-s)}}
.an-checkout .form-grid{gap:12px}
.an-checkout .form-grid__row{flex-flow:row nowrap;gap:12px;align-items:flex-start}
.an-checkout .form-group{min-width:0}
.an-checkout .form-input{gap:8px;font-size:var(--fs-ps)}
/* next-core floats this label inside the field; Jolly sets it above. */
.an-checkout .label-checkout{position:static;opacity:1;transform:none;pointer-events:auto;margin:0;color:var(--color-text-primary);font:600 var(--fs-ps)/1.5 var(--font-body);letter-spacing:0}
.an-checkout .input-flds{background-color:var(--color-brand-whitespace);border:1px solid var(--color-border-default);border-radius:var(--r-s);color:var(--color-text-primary);min-width:0}
.an-checkout input.input-flds,.an-checkout select.input-flds{font:500 var(--fs-ps)/1.5 var(--font-body);padding-left:calc(var(--pad-s) - 1px);padding-right:calc(var(--pad-s) - 1px);appearance:none;-webkit-appearance:none}
.an-checkout select.input-flds{padding-right:40px;text-overflow:ellipsis}
.an-checkout input.input-flds::placeholder{color:var(--color-text-secondary);opacity:1}
/* The SDK sets an inline padding-top on a select that has a value, to make room for next-core's floating
   label. Jolly's label sits above the field, so that padding only pushes the text off centre. */
.an-checkout select.input-flds{padding-top:0!important;padding-bottom:0}
/* Country flag inside the country select (js/checkout-jolly.js adds the image and .has-flag). */
.an-checkout .select-form-wrapper{position:relative}
.an-checkout .c1-flag{position:absolute;left:calc(var(--pad-s) - 1px);top:50%;width:24px;height:18px;transform:translateY(-50%);border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px var(--color-border-default);pointer-events:none;z-index:1}
.an-checkout .select-form-wrapper.has-flag select.input-flds{padding-left:calc(var(--pad-s) + 34px)}
.an-checkout .input-flds:hover{background-color:var(--color-brand-whitespace)}
.an-checkout .input-flds:focus,.an-checkout .input-flds.next-focused,.an-checkout .input-flds.select-field:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 1px var(--color-brand-primary)}
.an-checkout .input-flds.next-error-field{border-color:var(--color-ui-red);box-shadow:0 0 0 1px var(--color-ui-red)}
.an-checkout .next-error-label{color:var(--color-ui-red);font-size:var(--fs-pt);margin-top:0}
.an-checkout .select-arrow{color:var(--color-text-primary)}
.an-checkout .select-form-wrapper{width:100%}

/* ---------- payment: card only, in Jolly's PaymentMethodAccordion ---------- */
.an-checkout .payment-methods{border:1px solid var(--color-border-default);border-radius:var(--r-m);overflow:hidden;background:var(--color-brand-whitespace)}
.an-checkout .payment-method,.an-checkout .payment-method.next-selected{border-bottom:0;background:transparent}
.an-checkout .payment-method__header{padding:var(--pad-s);border-radius:0}
.an-checkout .payment-method__label{gap:var(--gap-t)}
.an-checkout .payment-method__input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--color-brand-primary)}
.an-checkout .payment-method__title{margin:0;font:700 var(--fs-ps)/1.4 var(--font-body)}
.an-checkout .payment-method__icons{gap:4px;min-height:0}
.an-checkout .payment-method__icon{width:30px;height:19px;object-fit:contain;border-radius:3px}
.an-checkout .payment-method__content{gap:var(--gap-t);padding:var(--pad-s);border-top:0;border-radius:0;background:var(--color-background-brand-tint)}
.an-checkout .checkout__checkbox{font:500 var(--fs-pt)/1.4 var(--font-body);color:var(--color-text-secondary)}
.an-checkout .checkbox__input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--color-brand-primary)}
.an-checkout .billing-address__form{gap:12px}
.an-checkout .form-section__title.cc-billing{font:700 var(--fs-ps)/1.4 var(--font-body);margin-top:12px}

/* ---------- order summary ---------- */
.an-checkout .c1-sum{width:100%}
.an-checkout .sum-lines,.an-checkout .sum-voucher{display:flex;flex-direction:column;gap:4px}
.an-checkout .sum-voucher:empty,.an-checkout .sum-voucher.next-summary-empty{display:none}
.sl-l{min-width:0}
.sl s.hide{display:none}
/* Insurance (campaign 2017 package 2) is switched on and off by its own box, so its line is left
   out of this list. Card Extend Rewards (package 3, $0.00) is in every cart and never shown here: matched
   by package id, SKU and name, since the id may differ between campaigns. Display only: the cart and its
   totals are untouched. */
.an-checkout [data-next-cart-summary] .sl-item[data-package-id="2"],
.an-checkout [data-next-cart-summary] .sl-item[data-package-id="3"],
.an-checkout [data-next-cart-summary] .sl-item[data-sku="LIQUID_MEMBERSHIP_PREMIUM"],
.an-checkout [data-next-cart-summary] .sl-item[data-item-name="Card Extend Rewards"]{display:none}
.c1-applied{margin:0}

/* ---------- CTA: the family submit button in Jolly's CTA1 ---------- */
.an-checkout .submit-section{width:100%;margin:0;gap:12px}
.an-checkout .submit-section__disclaimer{margin:0;color:var(--color-text-primary);font:500 var(--fs-pt)/1.4 var(--font-body)}
.an-checkout .submit-button{min-height:0;padding:var(--pad-s) 24px;border:0;border-radius:6px;background:var(--color-brand-primary);color:var(--color-text-white);font-family:var(--font-body);cursor:pointer}
.an-checkout .submit-button:hover{background:var(--color-brand-primary-hover)}
.an-checkout .submit-button:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px}
.an-checkout .submit-button__text{flex-flow:row nowrap;gap:20px;margin:0}
.an-checkout .submit-button__main-text{font:700 var(--fs-pb)/1.5 var(--font-body);letter-spacing:-.1px;white-space:nowrap}
.an-checkout .submit-button__arrow{flex:none;width:12px;height:8.4px;transform:rotate(90deg)}
.an-checkout .ins{text-align:left}
.an-checkout .ins-h,.an-checkout .ins-s{margin-left:0;margin-right:0}

/* ---------- personaliser dialog: Jolly's .pm frame around Customily's canvas and form ---------- */
.pm{z-index:9000}
.pm-dialog{font-family:var(--font-body);color:var(--color-text-primary)}
.pm-slot{display:block}
.pm-prev{position:sticky;top:0;min-width:0}
.pm-prev p{margin:0}
.cz-pm-status{font:600 14px/1.4 var(--font-body);color:var(--color-text-secondary);margin:0 0 12px}
.cz-pm-status:empty{display:none}
.cz-pm-error{display:flex;justify-content:center;padding:8px 0 24px}
.pm-foot{align-items:center}
.cz-pm-help{flex:1;min-width:0;margin:0;font:500 13px/1.4 var(--font-body);color:var(--color-text-secondary)}
@media (max-width:640px){
  .pm-slot{grid-template-columns:minmax(0,1fr);gap:12px}
  .pm-prev{position:static}
  .cz-pm-help{font-size:12px}
  .pm-foot{flex-wrap:wrap;justify-content:space-between}
  .pm-foot .cz-pm-help{flex:1 0 100%}
}

/* ---------- express checkout: Jolly's label, the SDK's buttons, locked until every ornament is saved ---------- */
.c1-xwrap{display:flex;flex-direction:column;gap:12px}
.c1-xbar .exp-checkout{margin:0;padding:0}
.c1-xbar .express-checkout__buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0;padding:0}
.c1-xbar .express-checkout__buttons:empty{display:none}
.c1-xwrap.is-locked .c1-xbar{opacity:.45;pointer-events:none;filter:grayscale(1)}
.c1-exlock{margin:0;text-align:center;font:500 var(--fs-pt)/1.4 var(--font-body);color:var(--color-text-secondary)}
.c1-exlock[hidden]{display:none}

/* ---------- shipping: the note on each package card and the row in the summary ---------- */
.rc-ship{margin:0;font:600 var(--fs-pt)/1.4 var(--font-body);color:var(--color-text-secondary);white-space:nowrap}
.rc-ship--free{color:var(--color-text-success)}
.sl-ship s{margin-right:4px;color:var(--color-text-secondary)}
.sl-ship s:empty{display:none}
.c1-sum.next-free-shipping .sl-ship span:last-child{color:var(--color-text-success);font-weight:700}

/* ===== was css/customily-inline.css ===== */
/* Customily inline personaliser (js/customily-inline.js): the parts that are Customily's or the
   SDK's, plus the package chooser. The dialog frame and the ornament cards use Jolly's .pm / .oc
   classes (css/jolly/components.css, css/checkout-jolly.css). */

/* The SDK slot stage stays in the DOM, exactly as the SDK renders it, and out of sight: its
   data-next-property inputs are what carry each design onto its cart line. */
#bundle-slots-stage { display:none; }
/* Technical line properties never show in the order summary. */
[data-next-item-properties] { display:none!important; }

/* Customily's viewer holds the live preview and the form; its height is set from the viewer's own report. */
#customily-options { display:block; width:100%; max-width:100%; height:560px; border:0; }

.cz-dialog { width:calc(100% - 32px); max-width:460px; max-height:85vh; overflow:auto; border:0; border-radius:16px; padding:20px; font-family:var(--font-body, system-ui, sans-serif); color:var(--color-text-primary, #1d1916); box-shadow:0 24px 64px rgba(0,0,0,.3); }
.cz-dialog::backdrop { background:rgba(29,25,22,.62); }
.cz-dialog__title { margin:0 0 8px; font:400 22px/1.2 var(--font-heading, Georgia, serif); }
.cz-dialog label { display:flex; align-items:center; gap:12px; margin:12px 0; font-weight:600; cursor:pointer; }
.cz-dialog input { width:18px; height:18px; accent-color:var(--color-brand-primary, #a22d2b); }
.cz-dialog img { width:64px; height:64px; margin-left:auto; object-fit:contain; border-radius:8px; }
.cz-dialog__actions { display:flex; justify-content:flex-end; gap:12px; margin-top:16px; }
.cz-dialog button:focus-visible, .cz-dialog input:focus-visible { outline:2px solid var(--color-brand-primary, #a22d2b); outline-offset:2px; }

@media (max-width:640px) {
  #customily-options { height:640px; }
}

/* ===== was css/exit-intent-popup.css ===== */
/* Exit intent pop-up in Jolly's #xi design (_includes/exit-intent-popup.html).
   The SDK builds the backdrop ([data-exit-intent="overlay"]), the fixed, centred panel
   ([data-exit-intent="popup"]) and the close button ([data-exit-intent="close"]) with inline
   styles; the template supplies .xi-dialog, whose look comes from css/jolly/components.css.
   !important is used only where an SDK inline style has to give way. */

.exit-intent-overlay { background-color:rgba(29,25,22,.62)!important; }
.exit-intent-template-popup { width:min(760px, calc(100vw - 32px)); max-width:none!important; max-height:calc(100vh - 32px)!important; border-radius:16px; }
.exit-intent-template-popup .xi-dialog { width:100%; font-family:var(--font-body); color:var(--color-text-primary); }
.exit-intent-template-popup .xi-c p, .exit-intent-template-popup .xi-c h3 { margin:0; }
.exit-intent-template-popup .xi-amt { font-size:40px; }
.exit-intent-template-popup .xi-cta { width:100%; }
.exit-intent-template-popup .xi-cta:focus-visible, .exit-intent-template-popup .xi-no:focus-visible, .exit-intent-template-popup .exit-intent-close:focus-visible { outline:2px solid var(--color-brand-primary); outline-offset:2px; }

.exit-intent-template-popup .exit-intent-close {
  top:12px!important; right:12px!important; width:40px!important; height:40px!important;
  border-radius:50%!important; background:var(--color-background-brand-tint)!important;
  color:var(--color-text-primary)!important; font-size:26px!important; line-height:40px!important;
}
.exit-intent-template-popup .exit-intent-close:hover { background:var(--color-border-default)!important; }

@media (max-width:640px) {
  .exit-intent-template-popup .xi-amt { font-size:32px; }
}

/* ===== was css/checkout-v3-glue.css ===== */
/* Always Near checkout: Jolly's v3 look on the Apollo commerce markup. Loaded last on checkout.html.

   css/jolly/checkout-v3.css styles the designer's own classes (.ck-*, .tc). The page's working parts
   keep the markup the SDK and js/customily-inline.js need (.rc cards, .oc ornament cards, the Apollo
   forms, payment list, summary, pay button, insurance switch), so this sheet gives that markup the
   same look. Layout and colour only: no prices, no behaviour. Scoped to body.ck. */

/* ---------- page ---------- */
.ck .an-checkout{background:#FCFCFC;color:#222;font-family:var(--font-body)}
.ck .ck-form{gap:16px}
.ck .c1-stack{display:flex;flex-direction:column;gap:16px}
.ck .checkout-selectors{display:block}
.ck .checkout-selectors>.c1-stack{gap:16px}

/* 90 day badge (Tereza, 2 Oct; Jolly's design of 3 Oct). The hero carries the landing's badge, placed as
   the landing's hero does. The header and the guarantee line carry the round seal from the dumpling
   calendar checkout. */
.ck .ck-hdr-badge{flex:none;width:60px;height:60px;object-fit:contain;display:block}
.ck .ck-guar-badge{flex:none;width:60px;height:60px;object-fit:contain;display:block}
.ck .ck-hero .ck-hero-badge{position:absolute;left:18px;top:18px;width:90px;height:100px;aspect-ratio:auto;object-fit:contain}
.ck .ck-logo{display:block}

/* ---------- step headings: the design has no number badge ---------- */
.ck .c1-step{display:block;margin-top:14px}
.ck .c1-step span{display:none}
.ck .c1-step h2{margin:0;font:700 20px/28px var(--font-heading);color:#222;letter-spacing:0}
.ck .checkout-selectors .c1-step:first-child{margin-top:0}
.ck .ck-paysub{margin:-10px 0 0;font:400 15px/22px var(--font-body)}

/* ---------- step 1: package cards (.rc) in the design's .tc look ---------- */
.ck .c1-tiers{gap:20px}
.ck .rc{gap:16px;min-height:112px;padding:14px 16px;background:#fff;border:1px solid #ECECEC;border-radius:0;box-shadow:0 0 0 1px #F6F6F6}
.ck .rc.next-selected{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)}
.ck .rc:focus-visible{outline:2px solid #000;outline-offset:2px}
.ck .rc-radio{width:20px;height:20px;border:1px solid #D0D0D0;background:#fff}
.ck .rc.next-selected .rc-radio{border:2px solid var(--ck-gold)}
.ck .rc.next-selected .rc-radio::after{inset:3px;background:var(--ck-gold)}
.ck .rc-img{width:84px;height:84px;border-radius:4px}
.ck .rc-c{gap:8px;align-items:flex-start}
.ck .rc-name b{font:700 18px/24px var(--font-body)}
.ck .rc-name span{display:none}
.ck .rc-unit{gap:8px;min-height:0;flex-wrap:wrap}
.ck .rc-unit em{font:800 11px/14px var(--font-body);text-transform:uppercase;background:#FFE135;border-radius:4px;padding:3px 8px;color:#222}
.ck .rc-ship{font:600 12px/16px var(--font-body);color:#555}
.ck .rc-ship--free{color:#0F8A6A}
.ck .rc-p{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;white-space:nowrap}
.ck .rc-flag{font:700 13px/18px var(--font-body);color:#0F8A6A}
.ck .rc-flag--best{color:#1B6FB5}
.ck .rc-each{font:700 18px/26px var(--font-body);color:#222}
.ck .rc-p s{font:400 17px/24px var(--font-body);color:#222;text-decoration:line-through;text-decoration-color:#C62828}
.ck .rc-total{font:500 12px/16px var(--font-body);color:#555}

/* ---------- step 2: photo guide link, notice ---------- */
.ck .pg-link{align-self:flex-start;margin:0;font-family:var(--font-body);color:#111}
.ck .pm-sample{font-family:var(--font-body);color:#111}
.ck .cz-status,.ck [data-cz-status]{font-family:var(--font-body)}

/* ---------- steps 3 and 4: fields. The design uses placeholders; the labels stay for screen readers ---------- */
.ck .an-checkout .form-section{gap:16px}
.ck .an-checkout .form-grid{gap:16px}
.ck .an-checkout .form-grid__row{gap:16px}
.ck .an-checkout .form-input{gap:0;position:relative}
.ck .an-checkout .label-checkout{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:1;transform:none}
.ck .an-checkout .input-flds{height:48px;min-height:48px;border:1px solid #BDBDBD;border-radius:6px;background-color:#fff;color:#222}
.ck .an-checkout input.input-flds,.ck .an-checkout select.input-flds{font:400 15px/22px var(--font-body);padding-left:13px;padding-right:13px}
.ck .an-checkout select.input-flds{padding-right:36px}
.ck .an-checkout input.input-flds::placeholder{color:#666}
.ck .an-checkout .input-flds:hover{background-color:#fff}
.ck .an-checkout .input-flds:focus,.ck .an-checkout .input-flds.next-focused,.ck .an-checkout .input-flds.select-field:focus{border-color:#111;box-shadow:0 0 0 1px #111}
.ck .an-checkout .select-form-wrapper.has-flag select.input-flds{padding-left:48px}
.ck .an-checkout .c1-flag{left:13px}
.ck .ck-guar{margin:8px 0 0}

/* ---------- payment ---------- */
.ck .c1-xwrap{gap:10px}
.ck .c1-xbar .express-checkout__buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ck .c1-xbar .payment-btn{height:44px;min-height:44px;border-radius:4px}
.ck .c1-exlock{font:500 13px/18px var(--font-body);color:#555}
.ck .an-checkout .payment-methods{border:1px solid #D8D8D8;border-radius:6px;background:#EFEFEF}
.ck .an-checkout .payment-method+.payment-method{border-top:1px solid #D8D8D8}
.ck .an-checkout .payment-method__header{padding:16px 15px}
.ck .an-checkout .payment-method__label{gap:10px}
.ck .an-checkout .payment-method__input{accent-color:var(--ck-gold)}
.ck .an-checkout .payment-method__title{font:700 16px/22px var(--font-body)}
.ck .an-checkout .payment-method__icon{width:34px;height:22px;background:#fff;border:1px solid #DDD}
.ck .an-checkout .payment-method__content{gap:16px;padding:16px;background:#EFEFEF;border-top:1px solid #D8D8D8}

/* ---------- order summary ---------- */
.ck .an-checkout .c1-sum{background:#fff;border:1px solid #F1D9CE;padding:22px 24px 24px;margin-top:16px;gap:0;font-family:var(--font-body)}
.ck .c1-sum>hr{display:none}
.ck .c1-sum .cs-h{display:flex;justify-content:space-between;font:700 16px/22px var(--font-body);padding-bottom:9px;border-bottom:1px solid #E5D9C8}
.ck .c1-sum .sl{min-height:0;font:400 13.5px/18px var(--font-body)}
.ck .c1-sum .sl-item{padding:12px 0 10px 2px;border-bottom:1px solid #E5D9C8;font:700 15.5px/22px var(--font-body)}
.ck .c1-sum .sl-item small{display:block;margin-top:2px;font:400 12.5px/18px var(--font-body);color:#555}
.ck .c1-sum .sl-item s{font-weight:400;text-decoration-color:#C62828}
.ck .c1-sum .sl-promo{margin:16px 0 0;background:var(--v3-green);text-align:right;font:800 13.5px/18px var(--font-body);padding:8px 12px;color:#000}
.ck .c1-sum .sl-ship{margin-top:18px}
.ck .c1-sum .sl-save:not(.sl-savebig){margin-top:14px;color:#11734F;font-weight:700}
.ck .c1-sum .sl-total{margin-top:18px;font:800 18px/26px var(--font-body)}
.ck .c1-sum .sl-savebig{margin-top:10px;font:400 13.5px/18px var(--font-body);color:#222}
.ck .c1-sum .sl-savebig span:last-child{font-weight:800;color:#A22D2B}
.ck .c1-applied{font-family:var(--font-body)}

/* ---------- insurance (above the pay button) and the pay button ---------- */
.ck .c1-cta{gap:16px;align-items:stretch}
.ck .an-checkout .ins{margin-top:0;border:0;border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.12);background:#fff;text-align:left}
.ck .an-checkout .submit-button{width:100%;min-height:60px;padding:8px 24px;border:1px solid #D9B000;border-radius:4px;background:var(--ck-yellow);color:#111;box-shadow:0 3px 6px rgba(0,0,0,.2);font-family:var(--font-body)}
.ck .an-checkout .submit-button:hover{background:#FFCC00}
.ck .an-checkout .submit-button:focus-visible{outline:2px solid #111;outline-offset:2px}
.ck .an-checkout .submit-button__main-text{font:800 20px/26px var(--font-body);letter-spacing:.2px;color:#111}
.ck .an-checkout .submit-button__arrow{color:#111}
.ck .an-checkout .submit-button svg path{fill:#111}
.ck .ck-marks{margin-top:14px}

/* ---------- footer ---------- */
.ck .an-checkout .c1-foot{flex-direction:row;justify-content:space-between;align-items:center;gap:16px;background:var(--ck-yellow);padding:16px max(24px,calc((100% - 1200px) / 2))}
.ck .an-checkout .c1-foot nav{gap:16px}
.ck .an-checkout .c1-foot a{font:400 15px/22px var(--font-body);color:#222}
.ck .an-checkout .c1-foot p{margin:0;font:400 12.5px/18px var(--font-body);color:#222}

/* ---------- dialogs sit outside the page wrapper ---------- */
.ck .pm-dialog,.ck .pg{font-family:var(--font-body)}
.ck .pm-head h2,.ck .pg-head h2{font-family:var(--font-heading);font-weight:700}
.ck .pg .oc-btn{background:#111;color:#fff}

@media (max-width:1023px){
  .ck .ck-hero .ck-hero-badge{left:14px;top:14px}
}
@media (max-width:640px){
  .ck .ck-hdr-g span{display:none}
  .ck .ck-hdr-badge{width:40px;height:40px}
  .ck .c1-step h2{font-size:18px}
  .ck .c1-tiers{gap:14px}
  .ck .rc{gap:12px;min-height:86px;padding:12px}
  .ck .rc.next-selected{padding:10px}
  .ck .rc-img{width:56px;height:56px}
  .ck .rc-name b,.ck .rc-each{font-size:17px}
  .ck .rc-p s{font-size:16px}
  .ck .an-checkout .form-grid__row{flex-flow:column nowrap}
  .ck .c1-xbar .express-checkout__buttons{grid-template-columns:1fr;gap:10px}
  .ck .an-checkout .c1-sum{padding:20px 22px}
  .ck .c1-sum .sl-item{font-size:14.5px}
  .ck .an-checkout .c1-foot{flex-direction:column;gap:4px}
  .ck .ck-hero .ck-hero-badge{width:72px;height:80px}
}

/* Shipping address section (_includes/shipping-details-form.html, from the Arjuna POD template via Always Near, 2026-10-09).
   Every field is open from page load (AdsBranded POD rule, 2026-10-16): the !important beats the SDK's inline display:none
   on the location row. Labels sit inside the border while the field has a value. */
.ck .an-checkout .ship-form__sub{margin:-6px 0 14px;font:400 16px/22px var(--font-body);color:#222}
.ck .an-checkout .ship-form .ship-form__loc-wrap{display:block !important}
.ck .an-checkout .ship-form [data-ship-more]{display:grid;gap:16px}
.ck .an-checkout .ship-form .form-input{position:relative}
.ck .an-checkout .ship-form .label-checkout--floating{position:absolute;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:nowrap;z-index:2;top:0;left:9px;padding:0 4px;background:#fff;font:400 12px/1 var(--font-body);color:#222;opacity:0;pointer-events:none;transform:translate(0,.3em);transition:opacity .15s,transform .15s}
.ck .an-checkout .ship-form .label-checkout--floating.has-value{opacity:1;transform:translate(0,-.5em)}
.ck .an-checkout .ship-form .ship-form__loc{display:grid;grid-template-columns:1.15fr 1.1fr 1fr;gap:16px}
.ck .an-checkout .ship-form .ship-form__loc .form-group{width:auto;min-width:0}
@media (max-width:479px){
  .ck .an-checkout .ship-form .ship-form__loc{grid-template-columns:1fr 1fr}
  .ck .an-checkout .ship-form .ship-form__loc .form-group:first-child{grid-column:1 / -1}
}
/* Insurance box between the guarantee and Payment: the same vertical rhythm as the sections around it. */
.ck .an-checkout .ins{margin-top:16px}

/* Shipping and Payment groups: plain wrappers since the staged reveal went (2026-10-16), same spacing as before. */
.ck .ck-group{display:flex;flex-direction:column;gap:16px}

/* Tier cards in the Dumpling Calendar's structure: saving badge, then "+ Free Shipping" on its own line, no card total
   (the total node stays in the markup: js/customily-inline.js reads it). Flags exactly as on the Dumpling checkout:
   orange star, Most Popular and Best Deal brand deep green #193025 (the design had #08927a and #298fbd; QA 2026-10-15 #22), 14px bold. Loaded before brand.css, hence the extra .rc-p. */
.ck .rc-unit{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ck .rc .rc-ship,.ck .rc .rc-ship--free{font:500 14px/1.3 var(--font-body);color:#000}
.ck .rc-total{display:none}
.ck .rc .rc-p .rc-flag{display:flex;align-items:center;gap:4px;font:700 14px/1.2 var(--font-body);color:#193025}
.ck .rc .rc-p .rc-flag--best{color:#193025}
/* "+10% OFF" beside the saving badge once the exit-pop voucher (OURFAMILY10, the only coupon this page can apply) is on the cart. */
.ck .rc-save{display:flex;align-items:center;gap:8px}
.ck .rc-extra{font:700 13px/1.2 var(--font-body);color:#193025;white-space:nowrap}

/* Promo strip and timer are custom elements drawn by deferred scripts (js/pod/promo-banner.js, js/pod/promo-timer.js),
   so they take no space at first paint (desktop CLS 0.08 of 0.15, QA 2026-10-15 #20). Their rendered heights per
   breakpoint, reserved up front, measured on the 2-row template strip on 2026-10-16. */
promo-banner,promo-timer{display:block}
promo-banner{min-height:103px}
promo-timer{min-height:66px}
@media (max-width:767px){promo-banner{min-height:164px}promo-timer{min-height:59px}}
@media (max-width:360px){promo-banner{min-height:154px}}

/* Order summary and heading typography of the AdsBranded POD template (Sellmore-Co/adsbranded-templates#34, Tez
   2026-10-16): the heading sentence 13px regular; "1x" bold and the name regular, price paid only (no struck price
   in the markup); the shipping line 12px; "Today you saved" 16px bold; "Discount:" and "Grand Total:" 16px regular, their
   amounts 16px bold (the discount always red #e44613, adsbranded-templates#36), the Grand Total right under the discount row; Complete Purchase label 18px. */
.ck .ck-head .ck-tag{margin-top:4px;font:400 13px/1.5 var(--font-body)}
.ck .c1-sum .sl-item{font-weight:400}
.ck .c1-sum .sl-item .sl-qty{font-weight:700}
.ck .c1-sum .cs-ship{margin-top:16px;padding-bottom:16px;border-bottom:1px solid #E5D9C8;font:400 12px/1.4 var(--font-body);letter-spacing:-0.5px}
.ck .c1-sum .cs-totals{display:grid;grid-template-columns:1fr auto auto;column-gap:6px;row-gap:6px;align-items:center;margin-top:12px;font:400 16px/22px var(--font-body);color:#1A1814}
.ck .c1-sum .cs-saved{grid-column:1;font-weight:700}
.ck .c1-sum .cs-lbl{grid-column:2}
.ck .c1-sum .cs-amt{grid-column:3;justify-self:end;font-style:normal;font-weight:700;white-space:nowrap}
.ck .c1-sum em.cs-amt{color:#e44613}
.ck .c1-sum .cs-amt small{font:inherit}
.ck .an-checkout .submit-button .submit-button__main-text{font-size:18px}

/* Pay button like every POD checkout (the Dumpling Calendar's, Tez 2026-10-16): 58px tall, 8px corners, the template
   shadow, label 18px 700 without the arrow, 16px under the summary box. The terms line moves under the button so
   nothing sits between the summary and the button. */
.ck .an-checkout .submit-button{min-height:58px;padding:16px 32px;border-radius:8px;box-shadow:0 4px 8px 0 #A0A99670}
.ck .an-checkout .submit-button .submit-button__main-text{font-size:18px;line-height:1.2;font-weight:700;letter-spacing:normal;white-space:normal;text-align:center}
.ck .an-checkout .submit-button__arrow{display:none}
.ck .c1-cta .submit-section{display:flex;flex-direction:column}
.ck .c1-cta .submit-section__disclaimer{order:2}