/*
 * Merged cart+checkout page. Ports the reference design's checkout class
 * vocabulary (.ckt/.steps/.box/.fields/.pays/.summ/.sline/etc.) 1:1, plus a
 * "bridge" section that maps those same visual rules onto WooCommerce's
 * real field/payment markup (p.form-row, ul.wc_payment_methods, #payment,
 * .woocommerce-error, ...) instead of replacing that markup with our own —
 * the real classes are what checkout.js's validation/AJAX/gateway-switch
 * logic depends on, so only their appearance changes here, never their
 * structure.
 */

/* ---------------- steps indicator ---------------- */
.steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:clamp(20px,3vw,30px) 0 0}
.st{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--grey);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:16px 22px}
.st b{width:26px;height:26px;border-radius:var(--r-pill);border:1.5px solid var(--line2);display:grid;place-items:center;font-family:var(--fm);font-size:12px;font-weight:500;background:var(--paper);flex:none}
.st.on{color:var(--navy)}.st.on b{background:var(--navy);border-color:var(--navy);color:#fff}
.st.done{color:var(--navy)}.st.done b{background:var(--tint);border-color:var(--tint);color:var(--navy)}
.ssep{flex:1;min-width:14px;height:1px;background:var(--line)}

/* ---------------- grid ---------------- */
.ckt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,44px);align-items:start;padding-top:clamp(24px,3vw,36px)}
.box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:clamp(22px,3vw,30px);margin-bottom:24px}
.box h2{margin:0 0 6px;font-size:1.24rem;font-weight:700;letter-spacing:-.02em}
.box .sub{margin:0 0 22px;font-size:.93rem;color:var(--grey)}

/* Step visibility: #ckGrid's data-step attribute (set by checkout.js) shows
   only the current step's aa-step-tagged content — real WC fields keep
   their real markup, only visibility toggles. */
#ckGrid [data-aa-step]{display:none!important}
#ckGrid[data-step="1"] #ckStep12{display:block!important}
#ckGrid[data-step="2"] #ckStep12{display:block!important}
#ckGrid[data-step="3"] #ckStep3{display:block!important}
#ckGrid .aa-step-1,#ckGrid .aa-step-2{display:none!important}
#ckGrid[data-step="1"] .aa-step-1{display:block!important}
#ckGrid[data-step="2"] .aa-step-2{display:block!important}
#ckGrid .cnav.aa-step-1,#ckGrid .cnav.aa-step-2{display:none!important}
#ckGrid[data-step="1"] .cnav.aa-step-1{display:flex!important}
#ckGrid[data-step="2"] .cnav.aa-step-2{display:flex!important}

/* Billing/order fields reflow into the design's 2-col field grid regardless
   of which WC wrapper divs they're nested in. */
#customer_details,
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields{display:contents}
.woocommerce-billing-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3{display:none}
#customer_details p.form-row{display:flex;flex-direction:column;gap:7px;margin:0 0 14px;padding:0}
/* WooCommerce's own core woocommerce-layout.css still ships the pre-grid,
   float-based 2-column field layout: `.form-row-first,.form-row-last{
   width:47%;float:left/right}` (`.woocommerce form .form-row-first` etc.,
   2 classes + 1 element). Float is inert on our grid items regardless
   (floats have no effect inside a grid container per spec), but `width`
   is NOT inert — with nothing here overriding it, that 47% was applying
   INSIDE an already-half-width grid cell, shrinking First/Last name to
   roughly a quarter of the row instead of filling their own cell.
   !important removes the load-order dependency rather than leaning on
   #customer_details's ID selector to keep outranking it forever. */
#customer_details p.form-row-first,
#customer_details p.form-row-last{width:100%!important;float:none!important;overflow:visible}
#customer_details p.form-row.aa-step-2:has(textarea),
#customer_details p.form-row.address-field:has(input[name="billing_address_2"]),
#customer_details p.form-row-wide{grid-column:1/-1}
#customer_details label{font-size:12.5px;font-weight:600;color:var(--grey)}
#customer_details label .required{color:var(--bad, #c0392b)}
#customer_details input.input-text,#customer_details select,#customer_details textarea{font-size:15px;padding:13px 16px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--paper);width:100%;transition:border-color .2s}
#customer_details input.input-text:focus,#customer_details select:focus,#customer_details textarea:focus{border-color:var(--navy);outline:none}
#customer_details p.form-row.woocommerce-invalid input.input-text,
#customer_details p.form-row.woocommerce-invalid select{border-color:var(--bad,#c0392b)}
#customer_details .select2-container{width:100% !important}
/* !important: `#customer_details p.form-row{display:flex}` above (an ID
   selector too, but with an extra class on top) outranks a lone
   `p#billing_country_field` regardless of load order. This is a US-only
   store with no country selector in the design at all, so the field stays
   unconditionally hidden rather than depending on winning a specificity
   tie against WooCommerce's own generic form-row layout rule. */
p#billing_country_field{display:none!important}

/* ---------------- payment step ---------------- */
/* Ported 1:1 from the reference design's .pays/.pay rules — now that
   woocommerce/checkout/payment-method.php nests the radio input, a real
   title/subtitle <div> and a real .chip <span> all inside one <label
   class="pay">, this class is a genuine 3-column (auto 1fr auto) grid
   container exactly like the reference, not an approximation. */
ul.wc_payment_methods{list-style:none;margin:0;padding:0;display:grid;gap:10px}
li.wc_payment_method{display:block}
.pay{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px 18px;cursor:pointer;transition:.2s var(--ease)}
.pay:hover{border-color:var(--line2)}
.pay:has(input:checked){border-color:var(--navy);background:var(--mist)}
/* !important on display: WooCommerce's own checkout.js hides the radio
   entirely (inline style="display:none") whenever there's only one
   available gateway, on the assumption there's "nothing to choose" — but
   this store requires an explicit click even with a single option (no
   pre-selection/no auto-reveal), so the radio has to stay visible and
   clickable regardless of how many gateways are currently enabled. */
.pay input{display:block!important;appearance:none;-webkit-appearance:none;width:19px;height:19px;border:1.5px solid var(--line2);border-radius:50%;cursor:pointer;position:relative;flex:none;margin:0}
.pay input:checked{border-color:var(--navy);border-width:6px}
.pay b{font-size:15px;font-weight:600}
.pay em{font-style:normal;font-size:12.5px;color:var(--grey);display:block;margin-top:2px}
.pay .chip{font-size:11px;padding:5px 10px}
.pay img{display:none}
/* WooCommerce core's own #payment div.payment_box rule (woocommerce.css)
   ships a hardcoded lavender-grey background/radius/margin/position AND a
   matching border-trick ::before triangle pointing up at the radio — an ID
   selector combo that outranks a plain .payment_box class regardless of
   load order, so the box was still rendering in WC's default purple-grey
   with the leftover pointer even though the row it points at (the radio
   `<label class="pay">`) is fully restyled. !important flattens it to a
   plain divider instead: it already sits inside the same bordered/tinted
   label as the selected radio (.pay:has(input:checked){background:
   var(--mist)}), so it doesn't need its own background at all. It's no
   longer a grid child of .pay either (the input/content/chip are all
   nested inside the label now — see payment-method.php — .payment_box
   stays a plain sibling block under <li>, same as WooCommerce's own
   template), so it doesn't need a grid-column span. */
.payment_box{padding:12px 0 0!important;font-size:12.5px;color:var(--grey);
  background:transparent!important;border-radius:0!important;margin:10px 0 0!important;
  position:static!important;box-shadow:none!important;border-top:1px solid var(--line2)}
.payment_box::before{display:none!important}
/* Separate conflict from the .payment_box one above: WooCommerce core also
   ships `.woocommerce-checkout #payment{background:rgba(129,110,153,.14);
   border-radius:5px}` — an ID selector, so it beats a plain #payment
   override unless matched or forced. It was tinting the whole payment
   step (radios, "Save 5%" chips, the description line) pale purple. The
   radios already carry their own white/mist backgrounds, so #payment
   itself doesn't need one. */
#payment{background:transparent!important;border-radius:0!important}

.woocommerce-checkout-payment .form-row.place-order{margin-top:18px}
.woocommerce-checkout-payment .form-row.place-order .woocommerce-privacy-policy-text{font-size:12px;color:var(--grey);margin-bottom:12px}
/* woocommerce_order_button_html (settings/checkout.php) adds the real btn
   class to #place_order, but WooCommerce core's own `.woocommerce ...
   button.button.alt{background-color:#7f54b3;...}` (woocommerce.css)
   still carries more classes (3) than .btn alone (1), so it out-specifies
   .btn's background/color/radius/padding regardless of load order —
   !important forces the theme's navy pill instead of WC's default purple
   "alt" skin. No margin-top/width override needed: the button now sits
   inside the .cnav row (payment.php override) alongside "← Back", sized
   and spaced by .cnav itself, same as every other step's Continue button. */
button#place_order.btn{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important;border-radius:var(--r-pill)!important;padding:16px 32px!important;font-weight:700!important}
button#place_order.btn:hover{background:#00408F!important}

/* the 3 required checkboxes, output via woocommerce_review_order_before_submit */
.must{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;border:2px solid #E8C4B8;background:#FDF4F0;border-radius:var(--r-md);padding:18px;margin-top:18px;cursor:pointer}
.must:has(input:checked){border-color:var(--good);background:#F2FAF5}
.must p{margin:0;font-size:13.2px;line-height:1.55;color:#6B3A26}
.must:has(input:checked) p{color:#2A5B3E}
.must b{font-weight:700}
.must .tagx{display:inline-block;background:var(--bad,#c0392b);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.07em;padding:3px 7px;border-radius:4px;margin-right:8px;vertical-align:middle}
.ck{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px 18px;margin-top:10px;border:1.5px solid var(--line);border-radius:var(--r-md);cursor:pointer}
.ck:has(input:checked){border-color:var(--navy);background:var(--mist)}
.ck p{margin:0;font-size:13.2px;line-height:1.55;color:var(--grey)}
.ck strong{color:var(--ink);font-weight:700}
.capt{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-md);padding:14px 16px;cursor:pointer}
.capt:has(input:checked){border-color:var(--good);background:#F2FAF5}
.capt b{font-size:14px;font-weight:600}
.capt em{font-style:normal;font-size:11px;letter-spacing:.05em;color:var(--grey);text-transform:uppercase}
.gate__w{margin:12px 0 0;font-size:12.8px;font-weight:600;color:var(--bad,#c0392b);text-align:center}
.gate__w[hidden]{display:none}
.cbx{width:19px;height:19px;flex:none;margin-top:2px}

/* WooCommerce's own native terms-and-conditions checkbox (checkout/
   terms.php) carries the theme's own "ck"/"cbx" classes directly — same
   label><input><p> shape as #ruoBox ("Research use only") too, not just
   the same classes — so it renders identically because it IS the same
   rule/structure, not a lookalike copy that can drift out of sync later.
   The only thing still needed here is resetting WooCommerce's own default
   .form-row{padding:3px;margin:0 0 6px} (this checkbox sits inside one,
   #ruoBox has no such wrapper at all) so that spacing doesn't stack on
   top of .ck's own margin-top. */
.woocommerce-terms-and-conditions-wrapper .form-row{margin:0 0 10px;padding:0!important}

@keyframes aa-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.aa-shake{animation:aa-shake .5s}

/* ---------------- nav buttons ---------------- */
.cnav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--grey);background:none;border:0;padding:10px 6px;cursor:pointer;border-radius:var(--r-sm)}
.back:hover{background:var(--mist);color:var(--ink)}

/* ---------------- order summary sidebar ---------------- */
.summ{position:sticky;top:92px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--mist);padding:24px;margin-bottom:clamp(28px,4vw,44px)}
.summ h3{margin:0 0 16px;font-size:1.04rem;font-weight:700}
.sline{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.sline__i{border-radius:var(--r-xs);overflow:hidden;aspect-ratio:1/1;background:radial-gradient(closest-side,#E4F0FD,#fff)}
.sline__i img{width:100%;height:100%;object-fit:contain;padding:4px;display:block}
.sline b{display:block;font-size:13.5px;font-weight:600}
.sline em{font-style:normal;font-size:12px;color:var(--grey);font-family:var(--fm)}
/* Own row below the size/dosage line, not sharing it — the stepper and
   Remove link need clear separation from the dosage text above them. */
.sline__actions{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.sline__qtylabel{font-size:12px;color:var(--grey);font-family:var(--fm)}
/* Same pill-shaped stepper as the PDP's .quantity/.qty-dec/.qty-inc
   (reused for the exact same increment/decrement + input.qty behavior,
   assets/js/custom.js's delegated click handler needs no changes) —
   scaled down to fit a checkout sidebar line item instead of the PDP's
   full-size 44px/52px buttons. Border matches checkout's own input/pay/
   promo field convention (var(--line2)), not the sky-blue PDP accent.
   flex:none is load-bearing: without it, .sline__actions (a flex row that
   also holds the "Qty" label and "Remove" link) shrinks this pill below
   its own 3-child content width whenever the row is tight on a narrow
   phone screen — and since overflow:hidden is what gives the pill its
   rounded corners, that shrinking silently clipped the right edge of the
   "+" button instead of visibly overflowing. */
.sline__qty{display:inline-flex;align-items:center;flex:none;border:1px solid var(--line2);border-radius:var(--r-pill);overflow:hidden}
.sline__qty .qty-dec,.sline__qty .qty-inc{width:26px;height:26px;border:0;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--navy);flex:none}
.sline__qty .qty-dec:hover,.sline__qty .qty-inc:hover{background:var(--mist)}
.sline__qty .qty{width:28px;height:26px;border:0;border-left:1px solid var(--line2);border-right:1px solid var(--line2);background:none;text-align:center;font-family:var(--fm);font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sline__qty .qty::-webkit-inner-spin-button,.sline__qty .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sline__qty .qty{-moz-appearance:textfield;appearance:textfield}
.sline__x{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font-size:11.5px;color:var(--grey);text-decoration:none;cursor:pointer}
.sline__x:hover{color:var(--bad)}
.sline__x svg{width:14px;height:14px;flex:none}
.sline__p{font-family:var(--fm);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.upsell{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:12px;margin:12px 0;border:1px dashed var(--line2);border-radius:var(--r-md);background:var(--paper)}
.upsell[hidden]{display:none}
.srow{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:14px;color:var(--grey)}
.srow span:last-child{font-family:var(--fm);color:var(--ink);font-variant-numeric:tabular-nums}
.srow.free span:last-child{color:var(--good);font-weight:600}
.stot{display:flex;justify-content:space-between;gap:14px;margin-top:12px;padding-top:14px;border-top:1px solid var(--line2);font-size:1.04rem;font-weight:700}
.stot span:last-child{font-family:var(--fm);font-size:1.3rem;letter-spacing:-.03em}
.promo{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.promo input{flex:1;min-width:0;font-size:14px;padding:11px 15px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--paper)}
.promo input.has-error{border-color:var(--bad)}
/* checkout.js inserts this right after the input on a failed "Apply" —
   flex-basis:100% (with .promo's own flex-wrap:wrap) forces it onto its
   own full-width line instead of squeezing into the input+button row,
   which is what was wrapping it into an unreadable one-word-per-line
   column on mobile. */
.coupon-error-notice{flex-basis:100%;font-size:12.5px;color:var(--bad)}
.prot{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 14px;margin:12px 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);cursor:pointer}
.prot b{font-size:13.5px;font-weight:600;display:block}
.prot em{font-style:normal;font-size:11.5px;color:var(--grey)}

/* ---------------- confirmation (thank-you) ---------------- */
#ckSteps + .done{margin-top:clamp(20px,3vw,30px)}
.done{text-align:center;padding:clamp(30px,4vw,50px) 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.done__r{width:70px;height:70px;border-radius:var(--r-pill);background:var(--tint);display:grid;place-items:center;margin:0 auto 20px}
.done__r svg{width:30px;height:30px;stroke:var(--blue);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.done h2{margin:0 0 10px;font-family:var(--fd);font-weight:500;font-size:1.7rem;letter-spacing:-.028em}
.done .ref{display:inline-block;margin:18px 0;font-family:var(--fm);font-size:14px;background:var(--mist);padding:8px 16px;border-radius:var(--r-pill)}
.instr{text-align:left;max-width:520px;margin:20px auto 0;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:var(--mist)}
.instr ol{margin:12px 0 0;padding-left:20px;font-size:14px;line-height:1.7;color:var(--grey)}
.instr ol b{color:var(--ink)}
.qr{display:flex;gap:18px;align-items:center;padding:16px;margin-bottom:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
/* Sized up from the original 104px so the code is comfortably scannable
   on a phone camera without zooming in — clamp keeps it from overpowering
   the card on very narrow viewports. */
.qr__box{flex:none;width:clamp(140px,32vw,190px);height:clamp(140px,32vw,190px);border-radius:var(--r-sm);border:1.5px dashed var(--line2);display:grid;place-items:center;text-align:center;font-size:11px;color:var(--grey);overflow:hidden}
.qr__box img{width:100%;height:100%;object-fit:contain;padding:8px}
.qr__box b{font-size:12.5px;color:var(--navy);letter-spacing:0;text-transform:none}
@media(max-width:480px){.qr{flex-direction:column;text-align:center}}

/* ---------------- Quick Pay instructions page ---------------- */
.qp__notice{border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--paper);padding:12px 14px;margin-bottom:16px}
.qp__opt{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.qp__opt:first-of-type{border-top:0;padding-top:0;margin-top:0}
.qp__cancel{background:transparent;color:var(--bad);border-color:var(--bad)}
.qp__cancel:hover{background:var(--bad);color:#fff}
.qp__cancel[disabled],#aaQpSent[disabled]{opacity:.5;cursor:not-allowed}

/* ---------------- order details (thank-you page) ---------------- */
/* Order details + Billing address side by side at 50/50 width instead of
   stacked full-width — each card's own inline style no longer sets its
   own max-width/centering (see order-details.php / order-details-
   customer.php), this wrapper owns that now. */
.aa-order-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1060px;margin:28px auto 0;margin-bottom:21px}
.aa-order-grid>.box{margin:0}
@media(max-width:760px){.aa-order-grid{grid-template-columns:1fr}}
.aa-order-details h2,.aa-order-customer h2{font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.aa-order-details .prow span:first-child{color:var(--ink)}
.aa-order-details .prow span:last-child{color:var(--ink);text-align:right}

/* ---------------- responsive ---------------- */
@media (max-width:960px){
    .ckt{grid-template-columns:1fr}
    .summ{position:static}
}
@media (max-width:760px){
    .st span{display:none}
    .ssep{min-width:8px}
    /* Hiding the label leaves just the number badge, but .st's own
       16px/22px padding stays fixed — 4 boxes at that padding plus their
       connectors add up to just over a phone-width viewport, wrapping
       the last step onto its own disconnected line. Shrinking the
       padding (and the row's own gap) here keeps all 4 on one line,
       matching the reference's own no-wrap 4-step strip. */
    .st{padding:10px 12px}
    .steps{gap:6px}
}
@media (max-width:420px){
    .sline{grid-template-columns:44px 1fr auto;gap:10px}
    /* .upsell's 3rd column is a real "Add $19.00" button, not just a price
       label like .sline's — squeezed into the same 44px/1fr/auto row on a
       phone-width screen, the button's own natural width left almost
       nothing for the middle text column, wrapping "Reconstitution
       Solution" one word per line. Stacking it onto its own full-width row
       below the image+text instead gives both room to breathe. */
    .upsell{grid-template-columns:44px 1fr;grid-template-areas:"img text" "btn btn";row-gap:10px}
    .upsell .sline__i{grid-area:img}
    .upsell>div:not(.sline__i){grid-area:text}
    .upsell .btn{grid-area:btn;width:100%}
}

/* FunnelKit Cart's floating toggle bubble (#fkcart-floating-toggler) is
   forced on for the checkout page as a whole (settings/woocommerce.php,
   fkcart_is_cart_enabled filter) purely so the header "Cart" button's
   click-to-open wiring and the slide-cart drawer itself actually work
   here — FunnelKit disables its entire front-end presence on checkout by
   default otherwise. The floating bubble specifically isn't wanted here
   though (this page already shows the full order summary inline, and the
   header button is the intended way to reopen the drawer) — hiding it is
   simplest done here in CSS (this stylesheet only ever loads on
   is_checkout()) rather than fighting the plugin's own render call, which
   doesn't expose a separate is_checkout()-safe filter at that exact point. */
#fkcart-floating-toggler{display:none!important}