/*
 * Enclosed cart, checkout and order confirmation (parts/header-checkout.html, parts/footer-checkout.html):
 * a white page, the header reduced to the way back, logo, currency and steps, the footer to one block of
 * links. Narrower than the rest of the site, for shorter form lines; the bar and footer share that width.
 */
body.woocommerce-cart,body.woocommerce-checkout{--sw-page-width:1120px;background:var(--sw-white)}
html body.switch-native:is(.woocommerce-cart,.woocommerce-checkout) :is(#wrapper,#main,.swx-content,.sw-page,.sg-body){background:var(--sw-white)!important}

/* Header: "Continue shopping" | logo | currency, then the steps across. */
.swx-checkout-header{position:relative;z-index:50;background:var(--sw-white)}
.sw-checkout-bar{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"back logo currency" "steps steps steps";align-items:center;gap:12px 24px;box-sizing:border-box;margin:0;padding:16px var(--sw-page-edge) 4px}
.sw-checkout-back{grid-area:back;justify-self:start;margin:0;font:400 14px/1.4 var(--sw-font-body)}
.sw-checkout-back a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--sw-ink);text-decoration:underline;text-underline-offset:3px}
.sw-checkout-logo{grid-area:logo;display:block;line-height:0}
/* The logo file is dark grey: brightness(0) makes it black and keeps the transparency. */
.sw-checkout-logo img{display:block;width:130px;height:auto;filter:brightness(0)}
.swx-checkout-header .sg-currency{grid-area:currency;justify-self:end;margin:0}
html body.switch-native #wrapper .swx-checkout-header select.sw-currency-select{background:var(--sw-white)!important;color:var(--sw-ink)!important;border-color:var(--sw-muted)!important;color-scheme:light}
.sw-checkout-steps{grid-area:steps}
/* Three equal columns: the circles are evenly spaced and step 2 sits exactly under the logo. The line runs
   from the middle of one step to the middle of the next, behind the circles. */
.sw-checkout-steps ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,360px);margin:0 auto;padding:0;list-style:none}
.sw-checkout-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;color:var(--sw-muted);font:400 14px/1.2 var(--sw-font-body);text-align:center}
.sw-checkout-step+.sw-checkout-step::before{content:"";position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--sw-line)}
.sw-checkout-step.is-done+.sw-checkout-step::before{background:var(--sw-ink)}
.sw-checkout-step a{display:flex;flex-direction:column;align-items:center;align-self:stretch;gap:6px;color:inherit;text-decoration:none}
.sw-checkout-step__label{max-width:100%;padding-inline:4px;box-sizing:border-box;overflow-wrap:anywhere}
.sw-cart-recommendations :is(.wp-block-button__link,.button){white-space:normal}
.sw-checkout-step a:hover .sw-checkout-step__label{text-decoration:underline;text-underline-offset:3px}
.sw-checkout-step__number{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:26px;height:26px;border:1px solid currentColor;border-radius:50%;background:var(--sw-white);font-size:14px;font-weight:700}
.sw-checkout-step:is(.is-done,.is-current){color:var(--sw-ink);font-weight:700}
.sw-checkout-step:is(.is-done,.is-current) .sw-checkout-step__number{background:var(--sw-ink);border-color:var(--sw-ink);color:var(--sw-white)}

/* Cart and checkout reach the edges of the bar above (base.css insets the blocks). */
html body.switch-native #wrapper #main :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout){padding-inline:0!important}

/* The cookie settings stay in the footer here; the floating icon would cover the form. */
#scm-icon{display:none!important}

/* The steps say where the customer is: the page title stays for screen readers only. */
html body.switch-native:is(.woocommerce-cart,.woocommerce-checkout) #main .sw-page-title{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html body.switch-native:is(.woocommerce-cart,.woocommerce-checkout) #main .sw-page .sg-body{padding-top:clamp(32px,4vw,56px)!important;padding-bottom:24px!important}
/* One column (tablet, phone): the order summary as wide as the form, directly under the steps. */
html body.switch-native #wrapper #main .wp-block-woocommerce-checkout:has(.wc-block-checkout__sidebar:not(.is-large)){padding-top:0!important}
html body.switch-native #wrapper #main .wc-block-checkout__sidebar:not(.is-large){padding:0!important}
html body.switch-native #wrapper #main .wc-block-checkout__sidebar:not(.is-large) .wc-block-components-checkout-order-summary__title{margin-top:0!important}
/* A section heading like the others, flush with them: the amount and the arrow say it opens. */
html body.switch-native #wrapper #main .wc-block-checkout__sidebar:not(.is-large) .wc-block-components-checkout-order-summary__title{align-items:center;border:0!important;padding:8px 0!important}
html body.switch-native #wrapper #main .wc-block-checkout__sidebar:not(.is-large) .wc-block-components-checkout-order-summary__title:hover .wc-block-components-checkout-order-summary__title-text{text-decoration:underline;text-underline-offset:4px}
html body.switch-native #wrapper #main .wc-block-checkout__sidebar:not(.is-large) .wc-block-components-checkout-order-summary__content{border:0!important;padding:0!important}
/* In one column WooCommerce repeats the whole summary above "Place order": only the total stays next to the button. */
html body.switch-native #wrapper #main .wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper>.wc-block-components-checkout-step__heading,
html body.switch-native #wrapper #main .wc-block-checkout__actions .checkout-order-summary-block-fill>:is(.wp-block-woocommerce-checkout-order-summary-cart-items-block,.wp-block-woocommerce-checkout-order-summary-coupon-form-block,.wp-block-woocommerce-checkout-order-summary-totals-block){display:none!important}
/* The same width for "Cart totals" under the products. */
html body.switch-native #wrapper #main .wc-block-components-sidebar-layout.wc-block-cart:not(.is-large) .wc-block-cart__sidebar{padding-inline:0!important}
/* Collapsible notes in the page (e.g. Privacy policy): the plus right after the label, no rule under it. */
html body.switch-native:is(.woocommerce-cart,.woocommerce-checkout) #main .sg-body details.wp-block-details{border-bottom:0!important}
html body.switch-native:is(.woocommerce-cart,.woocommerce-checkout) #main .sg-body details.wp-block-details>summary{display:inline-flex!important;align-items:center;gap:10px;width:auto!important;padding-right:0!important}
html body.switch-native:is(.woocommerce-cart,.woocommerce-checkout) #main .sg-body details.wp-block-details>summary::after{position:static!important}

/* Footer: the pages a customer may want before paying; in the cart also the payment methods. */
.sw-checkout-footer .sw-payment-icons{justify-content:center;margin:0 0 8px}
.swx-checkout-site-footer{margin-top:24px;background:var(--sw-white);border-top:1px solid var(--sw-line)}
.sw-checkout-footer{box-sizing:border-box;padding:16px var(--sw-page-edge) 20px;color:var(--sw-muted);font:400 14px/1.6 var(--sw-font-body);text-align:center}
.sw-checkout-footer nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 20px;margin:0 0 8px}
.sw-checkout-footer a{color:var(--sw-ink);text-decoration:none}
.sw-checkout-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.sw-checkout-footer p{margin:0}


/* Phones: no "Continue shopping" (the logo, the Cart step and the browser back button do that), a smaller
   logo. */
@media(max-width:599px){
/* minmax: side columns stay equal and the logo centred, even when the currency select is wider than its column. */
.sw-checkout-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px 12px;padding-top:10px;padding-bottom:8px}
.sw-checkout-back{display:none}
.sw-checkout-logo img{width:96px}
html body.switch-native #wrapper .swx-checkout-header select.sw-currency-select{width:104px!important;padding-inline:6px 20px!important}
}