/* Systemkassen checkout (WooCommerce Checkout Block on /kasse/), 2026-10-29.
   Recreates the look of the former Woodmart checkout layout: numbered steps in blue circles, fields and
   option cards in the site's tokens (style.css), order summary in a bordered box. Loaded on the checkout only. */

.wc-block-checkout{--sk-ck-field:#CBD5E3;--sk-ck-r:var(--sk-radius,6px);--sk-ck-gap:32px;margin-top:8px}

/* Steps: blue number circle, no connector line */
body .wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number{padding-left:48px;margin-bottom:var(--sk-ck-gap)}
body .wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step__title:before{content:counter(checkout-step)/"";left:-48px;top:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:var(--sk-blue-03);color:#fff;font-size:15px;font-weight:700;line-height:1}
body .wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step__content:before{display:none}
body .wc-block-checkout .wc-block-components-checkout-step__heading{margin:0 0 16px;min-height:32px;align-items:center}
body .wc-block-checkout .wc-block-components-checkout-step__title{font-size:20px;font-weight:700;line-height:1.2;color:var(--sk-deep-blue)}
body .wc-block-checkout .wc-block-components-checkout-step__description{color:var(--sk-muted);font-size:14px}

/* Fields */
body .wc-block-checkout .wc-block-components-text-input input,
body .wc-block-checkout .wc-block-components-text-input textarea,
body .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
body .wc-block-checkout .wc-block-components-textarea,
body .wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input{border:1px solid var(--sk-ck-field);border-radius:var(--sk-ck-r);background-color:#fff;color:var(--sk-text);box-shadow:none}
body .wc-block-checkout .wc-block-components-text-input input:focus,
body .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
body .wc-block-checkout .wc-block-components-textarea:focus{border-color:var(--sk-blue-03);box-shadow:0 0 0 1px var(--sk-blue-03);outline:0}
body .wc-block-checkout .wc-block-components-text-input label,
body .wc-block-checkout .wc-blocks-components-select__label{color:var(--sk-muted)}
body .wc-block-checkout .wc-block-components-text-input.has-error input,
body .wc-block-checkout .wc-blocks-components-select.has-error .wc-blocks-components-select__select{border-color:#C8102E;box-shadow:0 0 0 1px #C8102E}
body .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{border-color:var(--sk-ck-field);border-radius:4px}
body .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked{background:var(--sk-blue-03);border-color:var(--sk-blue-03)}
body .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark{fill:#fff}

/* Levering / Afhentning switch. Woodmart sets border:none!important here, so the frame is an inset shadow */
body .wc-block-checkout .wc-block-checkout__shipping-method-container{gap:12px;padding:0;background:none;box-shadow:none}
body .wc-block-checkout .wc-block-checkout__shipping-method-option{flex:1 1 0;min-height:56px;margin:0;border-radius:var(--sk-ck-r);background:#fff;color:var(--sk-text);box-shadow:inset 0 0 0 1px var(--sk-ck-field);font-weight:600}
body .wc-block-checkout .wc-block-checkout__shipping-method-option:hover{box-shadow:inset 0 0 0 1px var(--sk-blue-03)}
body .wc-block-checkout .wc-block-checkout__shipping-method-option--selected,body .wc-block-checkout .wc-block-checkout__shipping-method-option--selected:hover{box-shadow:inset 0 0 0 2px var(--sk-blue-03);background:var(--sk-blue-05);color:var(--sk-deep-blue)}
body .wc-block-checkout .wc-block-checkout__shipping-method-option--selected svg{fill:var(--sk-blue-03)}

/* Option cards: delivery options, pickup location, payment methods */
body .wc-block-checkout .wc-block-components-radio-control--highlight-checked:after,
body .wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option:after,
body .wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option:after{display:none}
body .wc-block-checkout .wc-block-components-radio-control--highlight-checked{display:flex;flex-direction:column;gap:10px}
body .wc-block-checkout .wc-block-components-radio-control--highlight-checked>.wc-block-components-radio-control__option,
body .wc-block-checkout .wc-block-components-radio-control--highlight-checked>.wc-block-components-radio-control-accordion-option{margin:0;border:1px solid var(--sk-ck-field);border-radius:var(--sk-ck-r);background:#fff}
body .wc-block-checkout .wc-block-components-radio-control--highlight-checked>.wc-block-components-radio-control__option--checked-option-highlighted,
body .wc-block-checkout .wc-block-components-radio-control--highlight-checked>.wc-block-components-radio-control-accordion-option--checked-option-highlighted{border-color:var(--sk-blue-03);box-shadow:0 0 0 1px var(--sk-blue-03)}
body .wc-block-checkout .wc-block-components-radio-control__input{border-color:var(--sk-ck-field)}
body .wc-block-checkout .wc-block-components-radio-control__input:checked{border-color:var(--sk-blue-03)}
body .wc-block-checkout .wc-block-components-radio-control__input:checked:before{background:var(--sk-blue-03)}
body .wc-block-checkout .wc-block-components-radio-control__label,
body .wc-block-checkout .wc-block-components-radio-control__label-group{font-weight:600;color:var(--sk-text)}
body .wc-block-checkout .wc-block-components-radio-control__secondary-label{font-weight:700;color:var(--sk-deep-blue)}
body .wc-block-checkout .wc-block-components-radio-control__description,
body .wc-block-checkout .wc-block-components-radio-control__secondary-description,
body .wc-block-checkout .wc-block-components-radio-control-accordion-content{color:var(--sk-muted);font-size:14px;line-height:1.5}
body .wc-block-checkout .wc-block-components-payment-method-icons{margin:0;gap:6px}
body .wc-block-checkout .wc-block-components-payment-method-icons .wc-block-components-payment-method-icon{height:22px;width:auto;margin:0}

/* Address card */
body .wc-block-checkout .wc-block-components-address-card{border:1px solid var(--sk-ck-field);border-radius:var(--sk-ck-r)}
body .wc-block-checkout .wc-block-components-address-card__edit{color:var(--sk-blue-03);font-weight:600}

/* Terms + place order */
body .wc-block-checkout .wc-block-checkout__terms{margin:0 0 20px;color:var(--sk-muted);font-size:14px}
body .wc-block-checkout .wc-block-checkout__terms a{color:var(--sk-blue-03)}
body .wc-block-checkout .wc-block-components-checkout-place-order-button{min-height:52px;padding:0 32px;border:0;border-radius:var(--sk-ck-r);background:var(--sk-blue-03);color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
body .wc-block-checkout .wc-block-components-checkout-place-order-button:hover{background:var(--sk-blue-02)}
body .wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible{outline:2px solid var(--sk-blue-03);outline-offset:2px}
body .wc-block-checkout .wc-block-components-checkout-return-to-cart-button{color:var(--sk-blue-03);font-weight:600}

/* Order summary box ("Din ordre" in the old layout) */
body .wc-block-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{padding:4px 0 8px;border:1px solid var(--sk-border);border-radius:8px;background:#fff}
body .wc-block-checkout .wc-block-components-checkout-order-summary__title-text,
body .wc-block-checkout .wc-block-components-order-summary .wc-block-components-panel__button{font-size:20px;font-weight:700;color:var(--sk-deep-blue)}
body .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name{color:var(--sk-deep-blue);font-weight:600}
body .wc-block-checkout .wc-block-components-product-details{color:var(--sk-muted);font-size:13px}
body .wc-block-checkout .wc-block-components-order-summary-item__quantity{background:var(--sk-blue-03);border-color:#fff;color:#fff}
body .wc-block-checkout .wc-block-components-totals-item__label{color:var(--sk-text)}
body .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{font-size:20px;color:var(--sk-deep-blue)}
body .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:22px;color:var(--sk-blue-03)}
body .wc-block-checkout .wc-block-components-totals-coupon-link,
body .wc-block-checkout .wc-block-components-panel__button{color:var(--sk-text)}

/* Notices */
body .wc-block-checkout .wc-block-components-notice-banner{border-radius:var(--sk-ck-r)}

/* Narrow checkout: WooCommerce switches by container class (.is-mobile/.is-small) and puts "1." above the title; keep the circle on the left */
body .wc-block-checkout :is(.is-mobile,.is-small) .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number{padding-left:40px}
body .wc-block-checkout :is(.is-mobile,.is-small) .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title:before{content:counter(checkout-step)/"";position:absolute;left:-40px;top:50%;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-14px 0 0;padding:0;border-radius:50%;background:var(--sk-blue-03);color:#fff;font-size:14px;font-weight:700;line-height:1}
body .wc-block-checkout :is(.is-mobile,.is-small) .wc-block-components-checkout-step__heading{position:relative;display:flex}

@media (max-width:767px){
	.wc-block-checkout{--sk-ck-gap:24px}
	body .wc-block-checkout .wc-block-components-checkout-step__title{font-size:18px}
	body .wc-block-checkout .wc-block-checkout__shipping-method-option{min-height:48px}
}

/* WooCommerce repeats the order summary above "Afgiv ordre" on narrow screens (checkout-actions-block). Its heading is a
   step title too, so it got a duplicate "6" circle above it. No number there, as on the WoodMart site. */
body .wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-step__title:before { content: none; display: none; }
body .wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-step__heading { margin-bottom: 12px; }

/* "Afgiv ordre" with missing fields scrolls up to the first error; the header (shown on scroll up) covered that field. */
body .wc-block-checkout :is(input, select, textarea, .wc-block-components-combobox) { scroll-margin-top: 90px; }

/* ---------------------------------------------------------------- Cart Block on /kurv/ (Divi 5, 2026-11-13)
   The cart was WoodMart's classic cart (layout 1482). It is now WooCommerce's Cart Block, styled with the same tokens as
   the checkout above: line items in a white card, totals box like "Din ordre", Blue 03 button. */
.wc-block-cart { --sk-ck-field: #cbd5e3; --sk-ck-r: var(--sk-radius, 6px); margin-top: 8px; }
body .wc-block-cart .wc-block-cart-items { border: 1px solid var(--sk-border); border-radius: 8px; background: #fff; border-collapse: separate; }
body .wc-block-cart .wc-block-cart-items th { padding: 16px 20px !important; color: var(--sk-muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body .wc-block-cart .wc-block-cart-items td { padding: 20px !important; border-top: 1px solid var(--sk-border) !important; }
body .wc-block-cart .wc-block-cart-item__image img { border-radius: var(--sk-ck-r); background: var(--sk-bg); }
body .wc-block-cart .wc-block-components-product-name { color: var(--sk-deep-blue); font-weight: 700; font-size: 16px; text-decoration: none; }
body .wc-block-cart .wc-block-components-product-name:hover { color: var(--sk-blue-03); }
body .wc-block-cart .wc-block-components-product-details, body .wc-block-cart .wc-block-components-product-metadata { color: var(--sk-muted); font-size: 13px; }
body .wc-block-cart .wc-block-components-product-price, body .wc-block-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount { color: var(--sk-deep-blue); font-weight: 600; }
body .wc-block-cart .wc-block-components-quantity-selector { width: 120px; height: 44px; border: 1px solid var(--sk-ck-field); border-radius: var(--sk-ck-r); }
body .wc-block-cart .wc-block-components-quantity-selector::after { display: none; }
body .wc-block-cart .wc-block-components-quantity-selector__input { color: var(--sk-deep-blue); font-weight: 600; }
body .wc-block-cart .wc-block-components-quantity-selector__button { color: var(--sk-deep-blue); font-size: 18px; }
body .wc-block-cart .wc-block-components-quantity-selector__button:hover { background: var(--sk-blue-05); }
body .wc-block-cart .wc-block-cart-item__remove-link { color: var(--sk-muted) !important; font-size: 13px !important; text-decoration: underline; }
body .wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block { padding: 4px 16px 8px; border: 1px solid var(--sk-border); border-radius: 8px; background: #fff; }
body .wc-block-cart .wc-block-cart__totals-title { color: var(--sk-deep-blue); font-size: 20px !important; font-weight: 700 !important; text-transform: none !important; }
body .wc-block-cart .wc-block-components-totals-item__label { color: var(--sk-text); }
body .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 20px; color: var(--sk-deep-blue); }
body .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 22px; color: var(--sk-blue-03); }
body .wc-block-cart .wc-block-cart__submit-button { min-height: 52px; border: 0; border-radius: var(--sk-ck-r); background: var(--sk-blue-03); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body .wc-block-cart .wc-block-cart__submit-button:hover { background: var(--sk-blue-02); color: #fff; }
body .wc-block-cart .wc-block-components-notice-banner { border-radius: var(--sk-ck-r); }
/* Narrow cart: WooCommerce adds .is-mobile/.is-small/.is-medium to .wc-block-cart and lays each row out as a grid. The
   20px cell padding above pushed the line total out of the card (cut off at 375px). Image | name, price, quantity; line
   total under it on the right, as the WoodMart cart's mobile rows. */
body .wc-block-cart:is(.is-mobile,.is-small,.is-medium) .wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
body .wc-block-cart:is(.is-mobile,.is-small,.is-medium) .wc-block-cart-items .wc-block-cart-items__row + .wc-block-cart-items__row { border-top: 1px solid var(--sk-border); }
body .wc-block-cart:is(.is-mobile,.is-small,.is-medium) .wc-block-cart-items td { padding: 0 !important; border-top: 0 !important; }
body .wc-block-cart:is(.is-mobile,.is-small,.is-medium) .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { grid-column: 1; grid-row: 1 / span 2; }
body .wc-block-cart:is(.is-mobile,.is-small,.is-medium) .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-column: 2; grid-row: 1; }
body .wc-block-cart:is(.is-mobile,.is-small,.is-medium) .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { grid-column: 2; grid-row: 2; justify-self: end; padding-top: 10px !important; }
/* Empty cart (WooCommerce's empty-cart block) */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { color: var(--sk-deep-blue); font-size: 18px; }
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before { opacity: .35; }
.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) { color: var(--sk-deep-blue); font-size: 32px; text-align: center; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { color: var(--sk-blue-03); font-weight: 600; }
.wp-block-woocommerce-empty-cart-block .wp-block-separator { max-width: 120px; border-color: var(--sk-border); }

/* Empty cart: WooCommerce renders the empty-cart content in the HTML but hides it behind a tall skeleton until the
   cart script (about 400 KB) has run; then the page collapsed and the footer logo became LCP (Lighthouse 5.1 s).
   The server knows the cart is empty (body class from inc/setup.php), so show it at once. */
body.sk-cart-empty .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-filled-cart-block { display: none; }
body.sk-cart-empty .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-empty-cart-block { display: block; }
/* Reserve the product images' 3:2 box before they load: the link and image wrapper are inline-block (shrink to the
   not-yet-loaded image), so the grid links grew 69 → 264px and pushed the footer down (CLS 0.14 on desktop). */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image { display: block; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
/* Empty cart (Cart Block "empty-cart-block") as the WoodMart site: grey cart icon (88px), "Ny i webshop" grid with blue
   16px titles and prices and WoodMart's accent button. Divi styles .wp-block-button__link dark with link-coloured text. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { font-size: 16px !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	width: 88px; height: 88px; margin: 0 auto 16px; background-color: rgba(0, 0, 0, .07) !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.2 11h11.3L21 6H7.3'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3Cpath d='M11.5 7.5l4 4M15.5 7.5l-4 4'/%3E%3C/svg%3E") !important;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.2 11h11.3L21 6H7.3'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3Cpath d='M11.5 7.5l4 4M15.5 7.5l-4 4'/%3E%3C/svg%3E") !important;
	-webkit-mask-size: contain; mask-size: contain;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { font-size: 16px !important; font-weight: 700; color: var(--sk-blue-03); }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price { font-size: 16px !important; font-weight: 600; color: var(--sk-blue-03); }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price .woocommerce-price-suffix { font-size: 14px; font-weight: 400; color: #767676; }
.sk-site .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
	padding: 12.67px 23.33px !important; border: 0 !important; border-radius: 0 !important; background: var(--sk-blue-03) !important; color: #fff !important;
	font-size: 16px !important; font-weight: 600 !important; text-transform: uppercase; text-decoration: none !important;
}
.sk-site .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background: var(--sk-blue-02) !important; }
.sk-site .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link::after { display: none !important; }