/* 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 2016 package 2) is switched on and off under the button, so its line is left
   out of this list. Display only: the cart and its totals are untouched. */
.an-checkout [data-next-cart-summary] .sl-item[data-package-id="2"]{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}