/* Storekit Checkout: the plugin's own blocks, and only those.

   Everything else these blocks wear is the theme's: the bump is the theme's
   .bump row, the rail is the drawer's .drawer__line, the buttons are .btn,
   the attestation section is .ck-sec. The fallbacks after each var() are
   there for another theme; on amp-theme the tokens resolve. */

/* ── Order bump: the call to action, a row without a photograph, quantity ── */
/* The call to action, drawn as the Buttons tab says (.btn--primary or
   .btn--secondary). A look, not a second control: it sits in the row's label,
   so it answers the row's hover. */
:is(.sk-checkout-bump__cta,.ampck-bump__cta).btn{justify-self:start;min-height:36px;margin-bottom:var(--s1,4px);padding:6px var(--s3,12px);
  font-size:var(--fs-sm,.875rem);font-weight:700;line-height:1.35}
body.woocommerce-checkout .bump__row:hover :is(.sk-checkout-bump__cta,.ampck-bump__cta).btn--primary{background:var(--cta-hover,#c9151c)}
body.woocommerce-checkout .bump__row:hover :is(.sk-checkout-bump__cta,.ampck-bump__cta).btn--secondary{background:var(--panel,#efede8)}
body.woocommerce-checkout .bump__row.bump__row--noimg{grid-template-columns:auto minmax(0,1fr)}
/* Dimmed while the summary refreshes, but still clickable. The theme's .bump
   turns pointer events off while busy; here a quantity typed and then the
   checkbox clicked straight away lost the click (the field's blur starts the
   refresh before the click lands). The server reads the form as it stands on
   every refresh, so a second change mid-flight is safe: the last one wins. */
body.woocommerce-checkout .bump.is-busy:is([data-sk-checkout-bump],[data-ampck-bump]){pointer-events:auto}
/* Under the description: the row's padding, the 18px checkbox, the gaps and
   the 56px plate put it on the text's left edge. */
:is(.sk-checkout-bump__qty,.ampck-bump__qty){display:flex;align-items:center;gap:var(--s3,12px);margin:0;
  padding:0 var(--s5,20px) var(--s4,16px) calc(var(--s5,20px) + 18px + 2 * var(--s4,16px) + 56px)}
.bump__row--noimg + :is(.sk-checkout-bump__qty,.ampck-bump__qty){padding-left:calc(var(--s5,20px) + 18px + var(--s4,16px))}
:is(.sk-checkout-bump__qty,.ampck-bump__qty) label{font-size:var(--fs-xs,.8125rem);color:var(--ink-2,#646567)}
body.woocommerce-checkout :is(.sk-checkout-bump__qty,.ampck-bump__qty) input{width:76px;min-height:44px;margin:0;padding:0 var(--s2,8px);
  border:1px solid var(--rule,rgba(88,89,91,.2));border-radius:var(--radius-ctl,4px);background:#fff;
  font:inherit;font-size:var(--fs-sm,.875rem);font-variant-numeric:tabular-nums;color:var(--ink,#58595b)}
/* The theme drops the plate and narrows the row here. */
@media(max-width:560px){:is(.sk-checkout-bump__qty,.ampck-bump__qty),.bump__row--noimg + :is(.sk-checkout-bump__qty,.ampck-bump__qty){padding-left:calc(2 * var(--s4,16px) + 18px)}}

/* ── The upsell rail: a carousel of cards (M21 C1 drawer presentation) ──
   CSS scroll-snap: one card per view below 480px, two from 480. Swiping and
   scrolling need no script; rail.js shows the arrows and dots only when the
   list overflows. Cards: the photograph on the plate, the drawer line's type,
   one price, Add. */
:is(.sk-checkout-rail,.ampck-rail){margin-top:var(--s4,16px);padding-top:var(--s3,12px);border-top:1px solid var(--rule,rgba(88,89,91,.2))}
/* Above the cart lines ("Upsells in the drawer body: before items"): the rule
   goes under it, between it and the first line, instead of over it. */
:is(.sk-checkout-rail-slot--before,.ampck-rail-slot--before) :is(.sk-checkout-rail,.ampck-rail){margin:0 0 var(--s4,16px);padding:0 0 var(--s3,12px);border-top:0;
  border-bottom:1px solid var(--rule,rgba(88,89,91,.2))}
:is(.sk-checkout-rail__head,.ampck-rail__head){display:flex;align-items:center;gap:var(--s1,4px);margin-bottom:var(--s2,8px)}
:is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__title,.ampck-rail__title){flex:1;margin:0;font-size:var(--fs-sm,.875rem);font-weight:600;line-height:1.35;
  letter-spacing:0;color:var(--ink,#58595b)}
:is(.sk-checkout-rail__arrow,.ampck-rail__arrow){display:none;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--rule,rgba(88,89,91,.2));
  border-radius:var(--radius-ctl,4px);background:transparent;color:var(--ink,#58595b);cursor:pointer;
  transition:border-color var(--dur-micro,120ms) var(--ease,ease)}
:is(.sk-checkout-rail__arrow,.ampck-rail__arrow):hover{border-color:var(--ink,#58595b)}
:is(.sk-checkout-rail__arrow,.ampck-rail__arrow) .icon{transform:rotate(-90deg)}
:is(.sk-checkout-rail__arrow--prev,.ampck-rail__arrow--prev) .icon{transform:rotate(90deg)}
/* Shown where the list overflows: more cards than fit (one per view below
   480px, two from 480), and only once rail.js has run, since the click is its. */
:is(.sk-checkout-js,.ampck-js) :is(.sk-checkout-rail,.ampck-rail):not(:is(.sk-checkout-rail--n1,.ampck-rail--n1)) :is(.sk-checkout-rail__arrow,.ampck-rail__arrow){display:grid}
@media(min-width:480px){:is(.sk-checkout-js,.ampck-js) :is(.sk-checkout-rail,.ampck-rail):is(.sk-checkout-rail--n2,.ampck-rail--n2) :is(.sk-checkout-rail__arrow,.ampck-rail__arrow){display:none}}
/* Two classes: on /cart/ the rail is in .entry-content, whose ul and li rules
   (0,1,1) would pad the list and shift the snap. */
:is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__items,.ampck-rail__items){display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:var(--s3,12px);margin:0;padding:0;
  list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
@media(prefers-reduced-motion:reduce){:is(.sk-checkout-rail__items,.ampck-rail__items){scroll-behavior:auto}}
:is(.sk-checkout-rail__items,.ampck-rail__items)::-webkit-scrollbar{display:none}
@media(min-width:480px){:is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__items,.ampck-rail__items){grid-auto-columns:calc((100% - var(--s3,12px)) / 2)}}
:is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__card,.ampck-rail__card){scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:0 var(--s2,8px);margin:0;padding:var(--s3,12px);border:1px solid var(--rule,rgba(88,89,91,.2));
  border-radius:var(--radius-ctl,4px);background:var(--field,#f7f6f2)}
:is(.sk-checkout-rail__plate,.ampck-rail__plate){grid-column:1 / -1;display:block;height:96px;margin-bottom:var(--s1,4px);border-radius:var(--radius-ctl,4px);
  background:var(--plate,#e9e7e2);overflow:hidden}
:is(.sk-checkout-rail__plate,.ampck-rail__plate) img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;padding:6px;mix-blend-mode:multiply}
/* The name and its strength: one link, a 44px target. */
:is(.sk-checkout-rail__name,.ampck-rail__name){grid-column:1 / -1;display:flex;flex-direction:column;justify-content:center;min-height:44px;
  color:var(--ink,#58595b);text-decoration:none}
:is(.sk-checkout-rail__name,.ampck-rail__name) b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-weight:600;font-size:var(--fs-sm,.875rem);line-height:1.35;letter-spacing:-.008em;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:text-decoration-color var(--dur-micro,120ms) var(--ease,ease)}
:is(.sk-checkout-rail__name,.ampck-rail__name) small{color:var(--ink-2,#646567);font-size:var(--fs-2xs,.75rem);font-weight:600}
:is(.sk-checkout-rail__name,.ampck-rail__name):hover b{text-decoration-color:currentColor}
:is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__add,.ampck-rail__add){min-height:44px;padding:0 var(--s4,16px)}
/* The dots: one per resting place, so the last one goes where two cards are in
   view. The current one is a dot sliding over them on the list's own scroll
   timeline; a browser without scroll-driven animations gets no dots at all
   rather than dots that cannot say where you are. */
:is(.sk-checkout-rail__dots,.ampck-rail__dots){display:none}
@supports (animation-timeline:scroll()){
  :is(.sk-checkout-rail,.ampck-rail){timeline-scope:--sk-checkout-rail}
  :is(.sk-checkout-rail__items,.ampck-rail__items){scroll-timeline:--sk-checkout-rail x}
  :is(.sk-checkout-rail,.ampck-rail):not(:is(.sk-checkout-rail--n1,.ampck-rail--n1)) :is(.sk-checkout-rail__dots,.ampck-rail__dots){position:relative;display:flex;gap:6px;width:max-content;
    margin:var(--s2,8px) auto 0}
  :is(.sk-checkout-rail__dots,.ampck-rail__dots) i{width:6px;height:6px;border-radius:50%;background:var(--rule,rgba(88,89,91,.2))}
  :is(.sk-checkout-rail__dots,.ampck-rail__dots)::after{content:"";position:absolute;top:0;left:0;width:6px;height:6px;border-radius:50%;
    background:var(--ink,#58595b);animation:sk-checkout-dot linear both;animation-timeline:--sk-checkout-rail}
  @media(min-width:480px){
    :is(.sk-checkout-rail,.ampck-rail):is(.sk-checkout-rail--n2,.ampck-rail--n2) :is(.sk-checkout-rail__dots,.ampck-rail__dots){display:none}
    :is(.sk-checkout-rail__dots,.ampck-rail__dots) i:last-child{display:none}
  }
}
@keyframes sk-checkout-dot{from{left:0}to{left:calc(100% - 6px)}}
/* The side panel (Upsells → In the drawer, show it: Side panel), from 1024px:
   the rail's slot, which sits in the drawer's scrolling body after the lines,
   placed as a 280px column to the left of the panel. The panel is its
   containing block (it is transformed) and the body is not positioned, so the
   body's scroll does not clip it. The cards stack; no arrows, no dots.
   Narrower: the carousel, as in cart. */
@media(min-width:1024px){
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden]){position:absolute;top:0;bottom:0;right:100%;width:280px;overflow-y:auto;
    overscroll-behavior:contain;padding:0 var(--s5,20px) var(--s4,16px);background:var(--field,#f7f6f2);
    border-right:1px solid var(--rule,rgba(88,89,91,.2));box-shadow:-18px 0 44px -28px rgba(40,40,42,.4)}
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side) :is(.sk-checkout-rail,.ampck-rail){margin:0;padding:0;border:0}
  /* The drawer head's height, so the two rules under the headings meet. */
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side) :is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__head,.ampck-rail__head){box-sizing:border-box;min-height:var(--sk-checkout-head,77px);margin:0 0 var(--s4,16px);
    padding:var(--s4,16px) 0;border-bottom:1px solid var(--rule,rgba(88,89,91,.2))}
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side) :is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__title,.ampck-rail__title){font-size:var(--fs-h4,1.125rem);font-weight:var(--title-weight,700)}
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side) :is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__items,.ampck-rail__items){grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;
    scroll-snap-type:none}
  :is(.sk-checkout-js,.ampck-js) :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side) :is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__arrow,.ampck-rail__arrow),
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side) :is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__dots,.ampck-rail__dots){display:none}
  /* Add as the Buttons tab's "side panel" says, over the carousel's. */
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side)[data-side-add="primary"] :is(.sk-checkout-rail__add,.ampck-rail__add){border-color:var(--cta,#ec1c24);background:var(--cta,#ec1c24);color:#fff}
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side)[data-side-add="primary"] :is(.sk-checkout-rail__add,.ampck-rail__add):hover{border-color:var(--cta-hover,#c9151c);background:var(--cta-hover,#c9151c);color:#fff}
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side)[data-side-add="secondary"] :is(.sk-checkout-rail__add,.ampck-rail__add){border-color:var(--ink,#58595b);background:transparent;color:var(--ink,#58595b)}
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side)[data-side-add="secondary"] :is(.sk-checkout-rail__add,.ampck-rail__add):hover{background:var(--panel,#efede8)}

  /* The motion (side panel item 1), on the theme's tokens since M22. Opening:
     the cart panel slides in over the panel time (300ms); the column waits
     behind it for the stagger (180ms) and slides out to the left over the
     panel time. Closing, the reverse at var(--exit) of each: the column tucks
     back first (240ms), the cart follows from 144ms. Only the open attribute
     the theme already toggles drives it; transition-delay makes the stagger
     (the delay on the state being entered is the one that applies).
     "Behind the cart": a child cannot paint under its own parent's background,
     and the cart's head and body are transparent, so the column is clipped at
     the cart's left edge instead. Its translate and its clip move together
     (same duration, same easing), so the clip's right edge stays on the
     cart's edge in every frame and the column seems to come out from under it.
     The clip leaves 64px to the left for the column's shadow. */
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden]){transform:translateX(100%);clip-path:inset(0 100% 0 -64px);
    transition:transform calc(var(--dur-panel,300ms) * var(--exit,.8)) var(--ease,ease),
      clip-path calc(var(--dur-panel,300ms) * var(--exit,.8)) var(--ease,ease)}
  .drawer[data-open="true"] :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden]){transform:none;clip-path:inset(0 0 0 -64px);
    transition-duration:var(--dur-panel,300ms);transition-delay:var(--dur-stagger,180ms)}
  /* A column that first appears while the drawer is open (the rail arrives
     with the cart) starts tucked and slides out the same way. */
  @starting-style{
    .drawer[data-open="true"] :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden]){transform:translateX(100%);clip-path:inset(0 100% 0 -64px)}
  }
  /* The theme keeps the drawer visible through the cart's own exit; here it
     stays until both have gone (144 + 240 = 384ms), and the cart waits 144ms. */
  .drawer:has(:is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden])){
    transition:visibility 0s linear calc((var(--dur-stagger,180ms) + var(--dur-panel,300ms)) * var(--exit,.8))}
  .drawer[data-open="true"]:has(:is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden])){transition-delay:0s}
  .drawer:has(:is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden])) .drawer__panel{transition-delay:calc(var(--dur-stagger,180ms) * var(--exit,.8))}
  .drawer[data-open="true"]:has(:is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden])) .drawer__panel{transition-delay:0s}
}
/* Reduced motion: no translate. The cart appears and goes at once; the column
   only fades, in over the theme's --dur-fade and out in var(--exit) of it
   before the cart goes. (A fade is what reduced motion keeps: nothing moves.) */
@media(min-width:1024px) and (prefers-reduced-motion:reduce){
  :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden]){transform:none;clip-path:none;opacity:0;
    transition:opacity calc(var(--dur-fade,200ms) * var(--exit,.8)) var(--ease,ease)}
  .drawer[data-open="true"] :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden]){transform:none;clip-path:none;opacity:1;
    transition-duration:var(--dur-fade,200ms);transition-delay:0s}
  @starting-style{.drawer[data-open="true"] :is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden]){opacity:0}}
  .drawer:has(:is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden])){transition:visibility 0s linear calc(var(--dur-fade,200ms) * var(--exit,.8))}
  .drawer:has(:is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden])) .drawer__panel{transition:transform 0s linear calc(var(--dur-fade,200ms) * var(--exit,.8))}
  .drawer[data-open="true"]:has(:is(.sk-checkout-rail-slot--side,.ampck-rail-slot--side):not([hidden])) .drawer__panel{transition-delay:0s}
}
/* /cart/: under the coupon field from 861px; last on a phone, after the
   totals and the coupon (the form steps aside there, M19 B4). */
body.woocommerce-cart .cartpage :is(.sk-checkout-rail,.ampck-rail){margin-top:var(--s7,40px);padding-top:var(--s4,16px)}
body.woocommerce-cart .cartpage :is(.sk-checkout-rail,.ampck-rail) :is(.sk-checkout-rail__title,.ampck-rail__title){font-size:var(--fs-h4,1.125rem)}
@media(max-width:860px){body.woocommerce-cart .cartpage :is(.sk-checkout-rail,.ampck-rail){order:3;margin-top:0}}

/* ── Order-received: the attestation as agreed ── */
:is(.sk-checkout-record,.ampck-record){margin:0 0 var(--s8,56px);max-width:62ch}
:is(.sk-checkout-record,.ampck-record) dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s2,8px) var(--s5,20px);
  margin:0;font-size:var(--fs-sm,.875rem);line-height:1.5}
:is(.sk-checkout-record,.ampck-record) dt{color:var(--ink-2,#646567)}
:is(.sk-checkout-record,.ampck-record) dd{margin:0;color:var(--ink,#58595b);overflow-wrap:anywhere}
:is(.sk-checkout-record__text,.ampck-record__text){margin:var(--s4,16px) 0 0;font-size:var(--fs-xs,.8125rem);line-height:1.6;color:var(--ink-2,#646567)}

/* ── Google's suggestion list, on the theme's type and corners ── */
.pac-container{font-family:inherit;border:1px solid var(--rule,rgba(88,89,91,.2));border-radius:var(--radius-ctl,4px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);z-index:100000}
.pac-item{padding:10px 12px;line-height:1.5;font-size:var(--fs-sm,.875rem);color:var(--ink-2,#646567);cursor:pointer}
.pac-item-query{font-size:inherit;color:var(--ink,#58595b)}

/* ── The compound notice: a native <dialog>, on the theme's field and ink ── */
/* max-width overrides the browser's own dialog:modal cap (100% - 2em - 6px),
   which left 19px gutters on a phone. */
:is(.sk-checkout-notice,.ampck-notice){width:min(440px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);margin:auto;
  padding:var(--s6,28px) var(--s5,20px) var(--s5,20px);border:1px solid var(--rule,rgba(88,89,91,.2));
  border-radius:var(--radius-ctl,4px);background:var(--field,#f7f6f2);color:var(--ink,#58595b);
  box-shadow:var(--shadow,0 6px 18px -8px rgba(40,40,42,.22))}
/* The drawer's scrim. */
:is(.sk-checkout-notice,.ampck-notice)::backdrop{background:rgba(40,40,42,.45)}
/* Opening and closing (M22): it fades in and scales up from .98 over the
   theme's panel time, and goes in var(--exit) of it, the scrim fading with it.
   showModal() and close() only toggle [open]; allow-discrete keeps the dialog
   displayed and in the top layer until its exit has run. Under reduced motion
   it only fades (the scale's time is 1ms there). */
:is(.sk-checkout-notice,.ampck-notice),:is(.sk-checkout-notice,.ampck-notice)::backdrop{
  transition:opacity calc(var(--dur-fade,var(--dur-panel,300ms)) * var(--exit,.8)) var(--ease,ease),
    transform calc(var(--dur-panel,300ms) * var(--exit,.8)) var(--ease,ease),
    overlay calc(var(--dur-fade,var(--dur-panel,300ms)) * var(--exit,.8)) allow-discrete,
    display calc(var(--dur-fade,var(--dur-panel,300ms)) * var(--exit,.8)) allow-discrete}
:is(.sk-checkout-notice,.ampck-notice){opacity:0;transform:scale(.98)}
:is(.sk-checkout-notice,.ampck-notice)::backdrop{opacity:0}
:is(.sk-checkout-notice,.ampck-notice)[open],:is(.sk-checkout-notice,.ampck-notice)[open]::backdrop{opacity:1;
  transition-duration:var(--dur-fade,var(--dur-panel,300ms)),var(--dur-panel,300ms),
    var(--dur-fade,var(--dur-panel,300ms)),var(--dur-fade,var(--dur-panel,300ms))}
:is(.sk-checkout-notice,.ampck-notice)[open]{transform:none}
@starting-style{
  :is(.sk-checkout-notice,.ampck-notice)[open]{opacity:0;transform:scale(.98)}
  :is(.sk-checkout-notice,.ampck-notice)[open]::backdrop{opacity:0}
}
/* Two classes: the dialog sits in the checkout's .entry-content, whose h2 and
   p rules (0,1,1) set the title at 32px and the body grey. */
:is(.sk-checkout-notice,.ampck-notice) :is(.sk-checkout-notice__title,.ampck-notice__title){margin:0 0 var(--s3,12px);font-size:1.375rem;font-weight:var(--title-weight,700);
  letter-spacing:-.02em;line-height:1.25;color:var(--ink,#58595b)}
:is(.sk-checkout-notice,.ampck-notice) :is(.sk-checkout-notice__title,.ampck-notice__title):focus{outline:none}
:is(.sk-checkout-notice,.ampck-notice) :is(.sk-checkout-notice__body,.ampck-notice__body){margin:0;font-size:var(--fs-body,1rem);line-height:1.55;color:var(--ink,#58595b)}
:is(.sk-checkout-notice__body,.ampck-notice__body) strong{font-weight:700}
:is(.sk-checkout-notice__actions,.ampck-notice__actions){display:grid;gap:var(--s2,8px);margin-top:var(--s5,20px)}
:is(.sk-checkout-notice,.ampck-notice) .btn{min-height:44px}
:is(.sk-checkout-notice,.ampck-notice) .btn--ghost{border-color:var(--ink-2,#646567)}
:is(.sk-checkout-notice,.ampck-notice) :focus-visible{outline:2px solid var(--ink,#58595b);outline-offset:2px}

/* ── The free-shipping bar (Free shipping bar tab): drawer and /cart/ ──
   The line centred above the track, the amount in bold; the track 8px with
   4px corners; the truck in a 44px circle at the track's right end and its
   label under it in mono capitals. The colours are the tab's, as custom
   properties printed only when they differ from the theme's tokens, which are
   the fallbacks here. `:not([hidden])`: the drawer hides the bar with the
   attribute, and `.drawer [hidden]` is no stronger than these rules. */
.drawer__ship .drawer__ship-line{text-align:center}
.drawer__ship .drawer__ship-line b{font-weight:700;font-variant-numeric:tabular-nums}
.drawer__ship .drawer__ship-track{height:8px;border-radius:var(--radius-ctl,4px);background:var(--sk-checkout-ship-track,var(--plate,#e9e7e2))}
.drawer__ship .drawer__ship-track > span{border-radius:var(--radius-ctl,4px);background:var(--sk-checkout-ship-fill,var(--ink,#58595b))}
.drawer__ship:not([hidden]):has(:is(.sk-checkout-ship-goal,.ampck-ship-goal)){display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--s3,12px);align-items:center}
.drawer__ship:has(:is(.sk-checkout-ship-goal,.ampck-ship-goal)) .drawer__ship-line{grid-column:1 / -1;margin-bottom:var(--s1,4px)}
.drawer__ship:has(:is(.sk-checkout-ship-goal,.ampck-ship-goal)) .drawer__ship-track{grid-column:1;grid-row:2}
:is(.sk-checkout-ship-goal,.ampck-ship-goal){grid-column:2;grid-row:2;justify-self:center;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--sk-checkout-ship-track,var(--plate,#e9e7e2));color:var(--ink,#58595b);
  transition:background var(--dur-micro,120ms) var(--ease,ease),color var(--dur-micro,120ms) var(--ease,ease)}
:is(.sk-checkout-ship-goal,.ampck-ship-goal) .icon{--icon:20;width:20px;height:20px}
.drawer__ship[data-state="done"] :is(.sk-checkout-ship-goal,.ampck-ship-goal){background:var(--sk-checkout-ship-fill,var(--ink,#58595b));color:#fff}
:is(.sk-checkout-ship-label,.ampck-ship-label){grid-column:2;grid-row:3;justify-self:center;margin-top:var(--s1,4px);font-family:var(--font-mono,monospace);
  font-size:.625rem;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;white-space:nowrap;color:var(--ink-2,#646567)}
/* /cart/: the bar heads the lines, without the drawer's padding and rule. */
body.woocommerce-cart :is(.sk-checkout-ship-cart,.ampck-ship-cart){padding:0 0 var(--s4,16px);border-bottom:0}
body.woocommerce-cart :is(.sk-checkout-ship-cart,.ampck-ship-cart) .drawer__ship-line{font-size:var(--fs-sm,.875rem)}

/* The notice's line at the top of the checkout (Notice::banner(), 10 Nov 2026). It opens and closes with the chosen
   payment method: the row expands from 0fr to 1fr (exits at --exit), its words hidden from the reader only once it
   has closed. Theme tokens only. */
.sk-checkout-banner{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows calc(var(--dur-expand,320ms) * var(--exit,.8)) var(--ease,ease)}
.sk-checkout-banner.is-on{grid-template-rows:1fr;transition-duration:var(--dur-expand,320ms)}
.sk-checkout-banner__in{min-height:0;overflow:hidden;visibility:hidden;
  transition:visibility 0s linear calc(var(--dur-expand,320ms) * var(--exit,.8))}
.sk-checkout-banner.is-on .sk-checkout-banner__in{visibility:visible;transition-delay:0s}
.sk-checkout-banner p{margin:0 0 var(--s4,16px);padding:12px 16px;border-inline-start:3px solid var(--ink,#58595b);background:var(--panel,#efede8);
  color:var(--ink,#58595b);font-size:var(--fs-sm,15px);line-height:1.5}