/* ── WordPress core classes the storefront has no equivalent for ─────── */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; color: #556059; margin-top: 8px; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	position: static; width: auto; height: auto; margin: 0; clip: auto;
	padding: 12px 20px; background: #fff; color: #0d1211; z-index: 100000;
}

/* ── WordPress and WooCommerce content, inside the storefront shell ──── */
.shlabz-wp { padding: 28px 0 72px; }
.shlabz-wp > * + * { margin-top: 18px; }
.shlabz-wp h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.03em; }
.shlabz-wp h2 { font-size: clamp(22px, 3.4vw, 30px); margin-top: 34px; }
.shlabz-wp h3 { font-size: 19px; margin-top: 26px; }
.shlabz-wp p,
.shlabz-wp li { color: #3c4641; line-height: 1.7; }
.shlabz-wp ul,
.shlabz-wp ol { padding-left: 22px; }
.shlabz-wp a { color: #0b9c3b; text-decoration: underline; text-underline-offset: 3px; }
.shlabz-wp img { border-radius: 14px; }
.shlabz-wp table { width: 100%; border-collapse: collapse; }
.shlabz-wp th,
.shlabz-wp td { padding: 12px 10px; border-bottom: 1px solid #e7ebe8; text-align: left; }

/* WooCommerce's own buttons, wearing the SHLabz coat */
.shlabz-wp .button,
.shlabz-wp button.button,
.shlabz-wp input[type="submit"],
.shlabz-wp a.button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
	background: #19ed56; color: #05170c; font-weight: 800; font-size: 15px;
	letter-spacing: -.01em; cursor: pointer; text-decoration: none;
	transition: transform .18s cubic-bezier(.22,1,.36,1), filter .18s;
}
.shlabz-wp .button:hover,
.shlabz-wp button.button:hover,
.shlabz-wp input[type="submit"]:hover,
.shlabz-wp a.button:hover { filter: brightness(1.04); transform: translateY(-1px); }

.shlabz-wp input[type="text"],
.shlabz-wp input[type="email"],
.shlabz-wp input[type="tel"],
.shlabz-wp input[type="password"],
.shlabz-wp input[type="number"],
.shlabz-wp select,
.shlabz-wp textarea {
	width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #d8ded9;
	border-radius: 12px; background: #fff; font: inherit; color: #0d1211;
}
.shlabz-wp input:focus,
.shlabz-wp select:focus,
.shlabz-wp textarea:focus { outline: 2.5px solid #0b9c3b; outline-offset: 1px; }

/* WooCommerce prints notices as <ul class="woocommerce-error"><li>…</li></ul>,
   sometimes several in a row. Layout is forced to block here because a theme
   or grid rule that puts them side by side clips every message to a column. */
.shlabz-wp .woocommerce-notices-wrapper,
.shlabz-wp .woocommerce-NoticeGroup {
	display: block !important; width: 100%; float: none; clear: both;
}
.shlabz-wp .woocommerce-message,
.shlabz-wp .woocommerce-info,
.shlabz-wp .woocommerce-error {
	display: block !important; width: auto !important; float: none !important; clear: both;
	list-style: none; margin: 0 0 14px; padding: 14px 18px; border-radius: 14px;
	border: 1px solid #e7ebe8; background: #f5f7f6;
	font-size: 15px; line-height: 1.6; overflow-wrap: anywhere;
}
.shlabz-wp .woocommerce-message > li,
.shlabz-wp .woocommerce-info > li,
.shlabz-wp .woocommerce-error > li {
	display: block !important; width: auto !important; float: none !important;
	list-style: none; margin: 0; padding: 0;
}
.shlabz-wp .woocommerce-message > li + li,
.shlabz-wp .woocommerce-info > li + li,
.shlabz-wp .woocommerce-error > li + li { margin-top: 8px; }
.shlabz-wp .woocommerce-message { border-color: #b9f2cd; background: #e9fdef; }
.shlabz-wp .woocommerce-error { border-color: #f6c9c9; background: #fdeeee; }
/* The "Continue shopping" button WooCommerce tucks inside a notice. */
.shlabz-wp .woocommerce-message .button,
.shlabz-wp .woocommerce-error .button { float: none !important; margin: 10px 0 0; }

/* Customs note in the checkout order review. Deliberately quiet: it is a
   condition to be aware of, not an action, so it sits under the total in
   small type rather than as another boxed panel. */
.shlabz-customs th{font-weight:700;vertical-align:top;white-space:nowrap}
.shlabz-customs td{text-align:left}
.shlabz-customs small{display:block;font-size:12px;line-height:1.55;color:#556059;font-weight:400}
.shlabz-customs a{color:#098231;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ══ Checkout ═════════════════════════════════════════════════════════
   WooCommerce draws the checkout; this dresses it. No field, no rate, no
   gateway and no total is touched — only how they look.

   One palette, declared once and used everywhere below. The page had four
   greens competing (the brand green, a mint tint, a dark green from the
   theme, and WooCommerce's own accent) plus a near-black #111 that
   WooCommerce paints over selected rows. That is what made the selected
   shipping card look assembled from parts.

   Scoped to body.shlabz-shell: WooCommerce injects its block stylesheets
   after this file, so a bare class selector loses on source order even when
   it is more specific. The !important marks below are only where a
   declaration cannot be outranked at all — each one is named. */

body.shlabz-shell .wc-block-checkout {
	--co-bg:            #ffffff;
	--co-surface:       #f7f9f8;   /* the summary panel */
	--co-text:          #0d1211;
	--co-text-2:        #556059;
	--co-text-3:        #6b756f;
	--co-border:        #e4e9e6;
	--co-border-hover:  #cbd4ce;
	--co-green:         #19ed56;   /* the only accent on this page */
	--co-green-tint:    #f1fdf5;   /* selected background, barely there */
	--co-green-ink:     #07110b;   /* text that sits ON the green button */
	--co-focus:         rgba(25, 237, 86, .28);
	--co-red:           #c8202a;   /* the one colour used for a rejected field */
	--co-red-tint:      #fdf3f3;

	--co-radius:        12px;
	--co-radius-lg:     16px;
}

/* ── layout ──────────────────────────────────────────────────────── */
body.shlabz-shell .wc-block-checkout__main { padding-right: clamp(0px, 2.4vw, 40px); }
body.shlabz-shell .wc-block-components-sidebar { background: transparent; border: 0; padding: 0; }

/* One elevated card, not a stack of bordered boxes. */
body.shlabz-shell .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--co-surface);
	border: 1px solid var(--co-border) !important;   /* beats the block's own hairline */
	border-radius: var(--co-radius-lg) !important;
	padding: 22px 20px;
	box-shadow: none !important;
}
@media (min-width: 900px) {
	body.shlabz-shell .wc-block-components-sidebar { position: sticky; top: 96px; }
}

/* WooCommerce reserves 150px under an address form for a country dropdown to
   open into. The contact step has one email field and no dropdown, so that
   reservation was blank page. Cleared there only. */
body.shlabz-shell .wc-block-checkout__contact-fields .wc-block-components-address-form {
	padding-bottom: 0 !important;
}

/* ── typography and rhythm ───────────────────────────────────────── */
body.shlabz-shell .wc-block-components-checkout-step { padding-left: 0; margin-bottom: 30px; }
body.shlabz-shell .wc-block-components-checkout-step__heading { margin: 0 0 14px; }
body.shlabz-shell .wc-block-components-checkout-step__title {
	font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--co-text); line-height: 1.3;
}
body.shlabz-shell .wc-block-components-checkout-step__description { color: var(--co-text-2); font-size: 14px; }

/* ── inputs ──────────────────────────────────────────────────────── */
body.shlabz-shell .wc-block-components-text-input input[type="text"],
body.shlabz-shell .wc-block-components-text-input input[type="email"],
body.shlabz-shell .wc-block-components-text-input input[type="tel"],
body.shlabz-shell .wc-block-components-text-input input[type="number"],
body.shlabz-shell .wc-blocks-components-select__select {
	min-height: 54px;
	border-radius: var(--co-radius);
	border: 1px solid var(--co-border);
	background: var(--co-bg);
	font-size: 15px;
	color: var(--co-text);
	box-shadow: none;
	transition: border-color .16s ease, box-shadow .16s ease;
}
body.shlabz-shell .wc-block-components-text-input input:hover,
body.shlabz-shell .wc-blocks-components-select__select:hover { border-color: var(--co-border-hover); }
body.shlabz-shell .wc-block-components-text-input input:focus,
body.shlabz-shell .wc-blocks-components-select__select:focus {
	border-color: var(--co-green);
	box-shadow: 0 0 0 3px var(--co-focus);
	outline: none;
}
body.shlabz-shell .wc-block-components-text-input label,
body.shlabz-shell .wc-blocks-components-select__label { color: var(--co-text-3); font-size: 14px; }
body.shlabz-shell .wc-block-components-text-input.is-active label { font-size: 12px; }

/* ── choice cards: shipping and payment ─────────────────────────
   Every option is its own card. The group used to be the card — one
   bordered container with rows inside it — and that is what produced the
   thin light edge around a selected row: the group's own 1px border and
   white fill sat outside the row's ring, so the eye read
   green ring → white sliver → card.

   The group now draws nothing at all. Each direct child of it is the card:
   the option row for shipping, the accordion wrapper for payment, since
   payment nests its row one level deeper. The selected edge is a real
   border on that card, so there is nothing between the border and the
   surface it encloses.

   Both states carry the same 1.5px width and only the colour changes, so
   selecting an option cannot shift its contents by half a pixel. */
body.shlabz-shell .wc-block-components-radio-control {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
body.shlabz-shell .wc-block-components-radio-control::before,
body.shlabz-shell .wc-block-components-radio-control::after { content: none !important; }

body.shlabz-shell .wc-block-components-radio-control > * {
	border: 1.5px solid var(--co-border) !important;
	border-radius: var(--co-radius) !important;
	background: var(--co-bg) !important;
	overflow: hidden !important;
	box-shadow: none !important;          /* WooCommerce's #111 inset ring */
	margin: 0 !important;
	transition: border-color .16s ease, background-color .16s ease;
}
body.shlabz-shell .wc-block-components-radio-control > *:hover { border-color: var(--co-border-hover) !important; }

/* Selected — one border, one tint, whichever element is the card. */
body.shlabz-shell .wc-block-components-radio-control > .wc-block-components-radio-control__option-checked,
body.shlabz-shell .wc-block-components-radio-control > .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--co-green) !important;
	background: var(--co-green-tint) !important;
}

/* Nothing inside a card draws an edge of its own. This is what removed the
   doubled box on payment methods and the rule between a method's title and
   its description — the inner row was drawing a second bordered card. */
body.shlabz-shell .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
body.shlabz-shell .wc-block-components-radio-control__option::after,
body.shlabz-shell .wc-block-components-radio-control-accordion-content::before { content: none !important; }
body.shlabz-shell .wc-block-components-radio-control__option + .wc-block-components-radio-control__option { border-top: 0 !important; }

body.shlabz-shell .wc-block-components-radio-control__option { padding: 16px 18px 16px 48px; }
body.shlabz-shell .wc-block-components-radio-control-accordion-content {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 18px 16px 48px !important;
	margin: 0 !important;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--co-text-2);
}

/* ── the radio itself ────────────────────────────────────────────
   WooCommerce paints the inner dot black through ::before while the outer
   ring took the brand green from this file — a green ring, a white gap and
   a black centre, three colours in one 20px control. It is now a white
   circle with a green edge and a green centre: two states, one hue. */
body.shlabz-shell .wc-block-components-radio-control__input {
	left: 18px;
	width: 20px; height: 20px;
	margin: 0;
	border: 1px solid var(--co-border-hover);
	background: var(--co-bg) !important;   /* the checked fill was the accent colour */
	box-shadow: none !important;           /* the inset white ring that made the gap */
	transition: border-color .16s ease;
}
body.shlabz-shell .wc-block-components-radio-control__input:hover { border-color: var(--co-text-3); }
body.shlabz-shell .wc-block-components-radio-control__input:checked {
	border-color: var(--co-green);
	border-width: 1.5px;
}
body.shlabz-shell .wc-block-components-radio-control__input::before {
	background: var(--co-green) !important;   /* was #000 */
	width: 10px !important; height: 10px !important;
	margin: 0 !important;
	top: 50% !important; left: 50% !important;
	transform: translate(-50%, -50%) !important;
}
body.shlabz-shell .wc-block-components-radio-control__input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--co-focus) !important;
}

body.shlabz-shell .wc-block-components-radio-control__label {
	font-size: 15px; font-weight: 700; color: var(--co-text); letter-spacing: -.01em;
}
body.shlabz-shell .wc-block-components-radio-control__secondary-label {
	font-size: 15px; font-weight: 700; color: var(--co-text);
}
body.shlabz-shell .wc-block-components-radio-control__description {
	font-size: 13.5px; line-height: 1.6; color: var(--co-text-2);
}

/* ── checkboxes ──────────────────────────────────────────────────
   Same two states as the radio, same green, square instead of round. */
body.shlabz-shell .wc-block-components-checkbox__input[type="checkbox"] {
	width: 20px; height: 20px;
	border: 1px solid var(--co-border-hover);
	border-radius: 6px;
	background: var(--co-bg);
	box-shadow: none;
	transition: border-color .16s ease, background-color .16s ease;
}
body.shlabz-shell .wc-block-components-checkbox__input[type="checkbox"]:hover { border-color: var(--co-text-3); }
body.shlabz-shell .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--co-green) !important;
	border-color: var(--co-green) !important;
}
body.shlabz-shell .wc-block-components-checkbox__mark { fill: var(--co-green-ink); width: 14px; }
body.shlabz-shell .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: none; box-shadow: 0 0 0 3px var(--co-focus);
}
body.shlabz-shell .wc-block-components-checkbox__label { font-size: 14.5px; color: var(--co-text); }

/* ── order summary ───────────────────────────────────────────────── */
body.shlabz-shell .wc-block-components-checkout-order-summary__title { padding: 0 0 4px; }
body.shlabz-shell .wc-block-components-checkout-order-summary__title-text {
	font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--co-text);
}
body.shlabz-shell .wc-block-components-order-summary-item__individual-prices { display: none; }
body.shlabz-shell .wc-block-components-order-summary-item {
	padding: 15px 0; border-bottom: 1px solid var(--co-border);
}
body.shlabz-shell .wc-block-components-order-summary-item:last-child { border-bottom: 0; }
body.shlabz-shell .wc-block-components-order-summary-item__image img {
	border-radius: 10px; background: var(--co-bg); border: 1px solid var(--co-border);
}
body.shlabz-shell .wc-block-components-order-summary-item__quantity {
	background: var(--co-text); border: 2px solid var(--co-surface); color: #fff;
	font-weight: 800; box-shadow: none;
}
body.shlabz-shell .wc-block-components-product-name {
	font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--co-text);
}
body.shlabz-shell .wc-block-components-order-summary-item__total-price {
	font-size: 14.5px; font-weight: 800; color: var(--co-text);
}
body.shlabz-shell .wc-block-components-product-details,
body.shlabz-shell .wc-block-components-product-metadata__description { color: var(--co-text-3); font-size: 12.5px; }

body.shlabz-shell .wc-block-components-totals-wrapper { border-top: 1px solid var(--co-border); padding: 16px 0; }
body.shlabz-shell .wc-block-components-totals-item { padding: 4px 0; }
body.shlabz-shell .wc-block-components-totals-item__label { color: var(--co-text-2); font-size: 14.5px; }
body.shlabz-shell .wc-block-components-totals-item__value { font-weight: 700; color: var(--co-text); font-size: 14.5px; }
body.shlabz-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.shlabz-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--co-text);
}

/* ── coupon ──────────────────────────────────────────────────────── */
body.shlabz-shell .wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-size: 14px; font-weight: 700; color: var(--co-text); padding: 12px 0;
}
body.shlabz-shell .wc-block-components-totals-coupon .wc-block-components-panel__button svg { fill: var(--co-text-3); }
body.shlabz-shell .wc-block-components-totals-coupon__form .wc-block-components-text-input input { min-height: 48px; }

/* ── the button ──────────────────────────────────────────────────
   One green, flat, no glow. The accent earns its weight from being the only
   saturated thing on the page rather than from a shadow under it. */
body.shlabz-shell .wc-block-components-checkout-place-order-button {
	min-height: 56px;
	border-radius: 999px;
	background: var(--co-green);
	color: var(--co-green-ink);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.01em;
	box-shadow: none;
	transition: background-color .16s ease, transform .16s ease;
}
body.shlabz-shell .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: #15d94d; transform: translateY(-1px);
}
body.shlabz-shell .wc-block-components-checkout-place-order-button:active:not(:disabled) { transform: translateY(0); }
body.shlabz-shell .wc-block-components-checkout-place-order-button:focus-visible {
	outline: none; box-shadow: 0 0 0 3px var(--co-focus);
}
body.shlabz-shell .wc-block-components-checkout-place-order-button:disabled { opacity: .5; }

body.shlabz-shell .wc-block-checkout__terms { font-size: 12.5px; line-height: 1.6; color: var(--co-text-3); }
body.shlabz-shell .wc-block-checkout__terms a { color: var(--co-text-2); font-weight: 700; }

/* ── shipping protection, placed by checkout.php ─────────────────
   Built from the same tokens as the choice cards above so it reads as one
   more option rather than something bolted on. */
body.shlabz-shell .shlabz-protect {
	display: flex; align-items: flex-start; gap: 12px; margin: 0;
	padding: 17px 18px; border: 1px solid var(--co-border); border-radius: var(--co-radius);
	background: var(--co-bg); cursor: pointer;
	transition: background-color .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.shlabz-shell .shlabz-protect:hover { border-color: var(--co-border-hover); }
body.shlabz-shell .shlabz-protect:has(input:checked) {
	background: var(--co-green-tint);
	border-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--co-green);
}
body.shlabz-shell .shlabz-protect input {
	flex: none; width: 20px; height: 20px; margin: 1px 0 0;
	appearance: none; -webkit-appearance: none;
	border: 1px solid var(--co-border-hover); border-radius: 6px;
	background: var(--co-bg); cursor: pointer; position: relative;
	transition: border-color .16s ease, background-color .16s ease;
}
body.shlabz-shell .shlabz-protect input:checked { background: var(--co-green); border-color: var(--co-green); }
body.shlabz-shell .shlabz-protect input:checked::after {
	content: ''; position: absolute; left: 6px; top: 2px;
	width: 5px; height: 10px; border: solid var(--co-green-ink);
	border-width: 0 2px 2px 0; transform: rotate(45deg);
}
body.shlabz-shell .shlabz-protect input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--co-focus); }
body.shlabz-shell .shlabz-protect__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.shlabz-shell .shlabz-protect__t b { font-size: 15px; font-weight: 700; color: var(--co-text); letter-spacing: -.01em; }
body.shlabz-shell .shlabz-protect__t span { font-size: 13.5px; line-height: 1.55; color: var(--co-text-2); }
body.shlabz-shell .shlabz-protect__p {
	margin-left: auto; flex: none; display: flex; flex-direction: column;
	align-items: flex-end; gap: 2px; text-align: right; padding-left: 10px;
}
body.shlabz-shell .shlabz-protect__p b { font-size: 15px; font-weight: 800; color: var(--co-text); white-space: nowrap; }
body.shlabz-shell .shlabz-protect__p i {
	font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--co-text-3); white-space: nowrap;
}

/* ── the customs note, placed by checkout.php ────────────────────── */
body.shlabz-shell .shlabz-customs {
	margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--co-border);
	font-size: 12px; line-height: 1.6; color: var(--co-text-3);
}
body.shlabz-shell .shlabz-customs a {
	color: var(--co-text-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}

/* ── notices ─────────────────────────────────────────────────────── */
body.shlabz-shell .wc-block-components-notice-banner {
	border-radius: var(--co-radius); font-size: 14px;
}

@media (max-width: 900px) {
	body.shlabz-shell .wc-block-checkout__main { padding-right: 0; }
}
@media (max-width: 640px) {
	body.shlabz-shell .wp-block-woocommerce-checkout-order-summary-block { padding: 18px 16px; }
	body.shlabz-shell .wc-block-components-radio-control__option { padding: 15px 16px 15px 46px; }
	body.shlabz-shell .wc-block-components-radio-control-accordion-content { padding-left: 46px; padding-right: 16px; }
	body.shlabz-shell .wc-block-components-checkout-step__title { font-size: 16px; }
	body.shlabz-shell .shlabz-protect { padding: 15px 16px; }
	body.shlabz-shell .shlabz-protect__p i { white-space: normal; }
	body.shlabz-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	body.shlabz-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	body.shlabz-shell .wc-block-checkout *,
	body.shlabz-shell .wc-block-checkout *::before,
	body.shlabz-shell .wc-block-checkout *::after { transition: none !important; }
	body.shlabz-shell .wc-block-components-checkout-place-order-button:hover:not(:disabled) { transform: none; }
}

/* ── the last of WooCommerce's own hairlines ─────────────────────
   These five draw their border as translucent near-black — a colour that
   sits differently on the white form than on the tinted summary panel, so
   the same "hairline" read as two different greys depending where it fell.
   Normalised to the one border token. */
body.shlabz-shell .wc-block-components-address-card,
body.shlabz-shell .wc-block-components-checkout-order-summary__title,
body.shlabz-shell .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
body.shlabz-shell .wp-block-woocommerce-checkout-order-summary-totals-block,
body.shlabz-shell .wc-block-components-totals-wrapper {
	border-color: var(--co-border) !important;
	border-width: 1px;
}
body.shlabz-shell .wc-block-components-address-card { border-radius: var(--co-radius); padding: 16px 18px; }
body.shlabz-shell .wc-block-components-address-card__edit { color: var(--co-text-2); font-weight: 700; }

/* The summary title has a rule above and below it by default, which boxed the
   heading in for no reason inside a panel that is already a card. */
body.shlabz-shell .wc-block-components-checkout-order-summary__title {
	border-top: 0 !important; border-bottom: 0 !important;
}

/* ── promo code ──────────────────────────────────────────────────
   The panel is opened by script and its toggle retired; what remains is a
   heading and a field, styled like every other field on the page. */
body.shlabz-shell .shlabz-promo-toggle-off { display: none !important; }
body.shlabz-shell .shlabz-promo-h {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--co-text);
}
body.shlabz-shell .wc-block-components-totals-coupon__form { gap: 8px; }
body.shlabz-shell .wc-block-components-totals-coupon__form .wc-block-components-text-input input { min-height: 48px; }
body.shlabz-shell .wc-block-components-totals-coupon__button {
	min-height: 48px; border-radius: var(--co-radius);
	background: var(--co-text); color: #fff; font-weight: 800; font-size: 14px;
}
body.shlabz-shell .wc-block-components-totals-coupon__button:hover:not(:disabled) { background: #1d2523; }
body.shlabz-shell .wc-block-components-totals-coupon__button:disabled { opacity: .45; }


/* ------------------------------------------------------------------ *
   A rejected field looks rejected
   ------------------------------------------------------------------
   The inputs above are restyled hard enough that WooCommerce's own
   error border loses the cascade, so a field the checkout had refused
   looked identical to one it had accepted and the customer was left
   with a banner at the top of the page and no idea which box it meant.
   These rules put the red back, on WooCommerce's own class, so a field
   flagged by the block validator and one flagged by the server read
   the same.
 * ------------------------------------------------------------------ */

body.shlabz-shell .wc-block-components-text-input.has-error input,
body.shlabz-shell .wc-block-components-form-row.has-error input,
body.shlabz-shell .wc-block-components-text-input input[aria-invalid="true"] {
	border-color: var(--co-red) !important;
	background: var(--co-red-tint) !important;
}
body.shlabz-shell .wc-block-components-text-input.has-error input:focus,
body.shlabz-shell .wc-block-components-form-row.has-error input:focus,
body.shlabz-shell .wc-block-components-text-input input[aria-invalid="true"]:focus {
	border-color: var(--co-red) !important;
	box-shadow: 0 0 0 3px rgba(200, 32, 42, .14) !important;
}
body.shlabz-shell .wc-block-components-text-input.has-error label,
body.shlabz-shell .wc-block-components-form-row.has-error label {
	color: var(--co-red) !important;
}
body.shlabz-shell .wc-block-components-validation-error p {
	color: var(--co-red);
	font-size: 13px;
	margin: 6px 2px 0;
	line-height: 1.4;
}

/* ------------------------------------------------------------------ *
   Signing in, offered where it is useful
 * ------------------------------------------------------------------ */

body.shlabz-shell .shlabz-login {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--co-text-2);
	line-height: 1.5;
}
body.shlabz-shell .shlabz-login a {
	color: var(--co-text);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--co-green);
}
body.shlabz-shell .shlabz-login a:hover { text-decoration-color: var(--co-text); }

/* ------------------------------------------------------------------ *
   No band of white above the ticker
   ------------------------------------------------------------------
   The shell draws its own page from the very first pixel: the green
   ticker is the top of the document and nothing belongs above it.
 * ------------------------------------------------------------------ */

body.shlabz-shell { padding-top: 0 !important; }

/* ══════════════════════════════════════════════════════════════════ *
   The checkout on a phone
   ──────────────────────────────────────────────────────────────────
   Not the desktop column made narrow. On a phone the whole order has
   to be crossed with a thumb, so the page is built from one repeated
   unit — a titled section, a bordered card, a consistent 16px inset —
   and everything between those units is squeezed until only the
   separation is left. Green appears three times: the selected option,
   the total, the button. Everywhere else is ink on white.
 * ══════════════════════════════════════════════════════════════════ */

/* An empty totals row is not a row. WooCommerce prints a wrapper for
   discounts and for fees whether or not there are any, and each one was
   taking 33px and a divider in the middle of the summary — the blank
   bands between Subtotal and Delivery. */
body.shlabz-shell .wc-block-components-totals-wrapper:empty { display: none !important; }

@media (max-width: 640px) {

	/* ── rhythm ──────────────────────────────────────────────────── */

	body.shlabz-shell .wc-block-checkout { padding-top: 14px; }
	body.shlabz-shell .wc-block-components-checkout-step { margin-bottom: 20px; }
	body.shlabz-shell .wc-block-components-checkout-step__heading { margin: 0 0 9px; }
	body.shlabz-shell .wc-block-components-checkout-step__title { font-size: 15.5px; letter-spacing: -.025em; }
	body.shlabz-shell .wc-block-components-checkout-step__description { font-size: 13px; margin-top: 2px; }

	/* ── the collapsed summary at the top ────────────────────────
	   A line, not a panel: what it is, what it comes to, and a
	   chevron that says there is more. */
	body.shlabz-shell .wc-block-components-sidebar { margin-bottom: 18px; }
	body.shlabz-shell .wp-block-woocommerce-checkout-order-summary-block {
		padding: 4px 14px; border-radius: var(--co-radius);
	}
	body.shlabz-shell .wc-block-components-checkout-order-summary__title { padding: 11px 0; }
	body.shlabz-shell .wc-block-components-checkout-order-summary__title-text { font-size: 15px; font-weight: 800; }

	/* ── fields ──────────────────────────────────────────────────
	   50px is comfortably past the 44px touch minimum and 4px shorter
	   than the desktop field; over eight fields that is a screenful. */
	body.shlabz-shell .wc-block-components-text-input input[type="text"],
	body.shlabz-shell .wc-block-components-text-input input[type="email"],
	body.shlabz-shell .wc-block-components-text-input input[type="tel"],
	body.shlabz-shell .wc-block-components-text-input input[type="number"],
	body.shlabz-shell .wc-blocks-components-select__select {
		min-height: 50px; font-size: 15.5px; border-radius: 10px; padding: 16px 13px 6px;
	}
	body.shlabz-shell .wc-block-components-text-input { margin-top: 10px; }
	body.shlabz-shell .wc-block-components-text-input label { font-size: 14.5px; }
	body.shlabz-shell .wc-block-components-text-input.is-active label { font-size: 11.5px; }
	body.shlabz-shell .wc-block-components-address-form__address_1 { margin-top: 10px; }

	/* ── shipping and payment options ────────────────────────────
	   Two lines of padding, not three. The radio keeps its 44px reach
	   because the whole row is the label. */
	body.shlabz-shell .wc-block-components-radio-control { gap: 7px; }
	body.shlabz-shell .wc-block-components-radio-control__option { padding: 13px 14px 13px 44px; }
	body.shlabz-shell .wc-block-components-radio-control__label { font-size: 15px; }
	body.shlabz-shell .wc-block-components-radio-control__description { font-size: 13px; line-height: 1.45; margin-top: 3px; }
	body.shlabz-shell .wc-block-components-radio-control-accordion-content {
		padding: 0 14px 13px 44px; font-size: 13px;
	}
	body.shlabz-shell .wc-block-components-radio-control__option-layout { gap: 8px; }

	/* ── shipping protection ─────────────────────────────────────
	   Box, then what it is, then what it costs — one row read left to
	   right, with the price free to drop under itself if the width
	   runs out rather than crushing the sentence beside it. */
	body.shlabz-shell #shlabzProtectStep { margin-bottom: 20px; }
	body.shlabz-shell .shlabz-protect { padding: 13px 14px; gap: 11px; align-items: flex-start; }
	body.shlabz-shell .shlabz-protect__t b { font-size: 14.5px; }
	body.shlabz-shell .shlabz-protect__t span { font-size: 12.5px; line-height: 1.45; }
	body.shlabz-shell .shlabz-protect__p { text-align: right; }
	body.shlabz-shell .shlabz-protect__p b { font-size: 14.5px; }
	body.shlabz-shell .shlabz-protect__p i { font-size: 11px; line-height: 1.35; max-width: 92px; }

	/* ── promo code ──────────────────────────────────────────────── */
	body.shlabz-shell .wc-block-components-totals-coupon { padding: 12px 0; }
	body.shlabz-shell .shlabz-promo-h { font-size: 13.5px; margin: 0 0 8px; }
	body.shlabz-shell .wc-block-components-totals-coupon__form { gap: 8px; }
	body.shlabz-shell .wc-block-components-totals-coupon__input input { min-height: 46px; font-size: 15px; }
	body.shlabz-shell .wc-block-components-totals-coupon__button { min-height: 46px; padding: 0 18px; font-size: 14.5px; }

	/* ── the summary itself ──────────────────────────────────────── */
	body.shlabz-shell .wc-block-components-order-summary-item { padding: 12px 0; gap: 11px; }
	body.shlabz-shell .wc-block-components-order-summary-item__image { width: 48px; }
	body.shlabz-shell .wc-block-components-order-summary-item__description { font-size: 14px; }
	body.shlabz-shell .wc-block-components-product-metadata { font-size: 12.5px; margin-top: 2px; }
	body.shlabz-shell .wc-block-components-totals-item { padding: 9px 0; font-size: 14.5px; }
	body.shlabz-shell .wc-block-components-totals-footer-item { padding: 13px 0 4px; }
	body.shlabz-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	body.shlabz-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 19px; }

	/* ── place order ─────────────────────────────────────────────
	   Close enough to the total to read as its consequence. */
	body.shlabz-shell .wc-block-checkout__actions { margin: 16px 0 28px; }
	body.shlabz-shell .wc-block-components-checkout-place-order-button {
		min-height: 54px; font-size: 16px; border-radius: 12px;
	}

	/* ── the page around it ──────────────────────────────────────── */
	body.shlabz-shell .shlabz-login { font-size: 13px; margin-top: 8px; }
	body.shlabz-shell .wc-block-components-notice-banner { font-size: 13.5px; }
	body.shlabz-shell .shlabz-customs { font-size: 12.5px; }

	/* The floating WhatsApp button sat over the last thing on the page.
	   Smaller, and lifted clear of the home indicator. */
	body.shlabz-shell .wa {
		width: 48px; height: 48px;
		right: max(12px, env(safe-area-inset-right));
		bottom: calc(14px + env(safe-area-inset-bottom));
	}
	body.shlabz-shell .wa svg { width: 24px; height: 24px; }
}

@media (max-width: 640px) {

	/* ── the page around the checkout ────────────────────────────── */
	body.shlabz-shell .page.shlabz-wp { padding: 14px 0 40px; }
	body.shlabz-shell .wp-block-woocommerce-checkout.wc-block-checkout { padding-top: 0; }
	body.shlabz-shell header.hdr,
	body.shlabz-shell header.hdr .hdr__in { height: 56px; min-height: 56px; }

	/* ── the loyalty block ───────────────────────────────────────
	   WPLoyalty stacks its points pill under the message on a narrow
	   screen, which cost 170px before a customer reached their own
	   name. One row: what it is, what this order earns, the balance. */
	body.shlabz-shell .spar-cart-rewards-box { margin: 0 0 14px; }
	body.shlabz-shell .spar-cart-rewards-header {
		flex-direction: row; align-items: center; gap: 10px; padding: 11px 13px;
	}
	body.shlabz-shell .spar-cart-rewards-title-section { flex: 1 1 auto; min-width: 0; }
	body.shlabz-shell .spar-cart-earning-message { font-size: 12.5px; line-height: 1.35; margin: 3px 0 0; }
	body.shlabz-shell .spar-cart-rewards-summary { padding: 0; flex: none; }
	body.shlabz-shell .spar-cart-rewards-points { padding: 8px 12px; font-size: 12px; }

	/* ── shipping protection, laid out as a row ──────────────────
	   Title and price on one line, the sentence spanning underneath.
	   Stacked in a column the description was squeezed into a 150px
	   gutter and ran to six lines. */
	body.shlabz-shell .shlabz-protect {
		display: grid; grid-template-columns: auto 1fr auto;
		column-gap: 11px; row-gap: 5px; align-items: start;
	}
	body.shlabz-shell .shlabz-protect__t { display: contents; }
	body.shlabz-shell .shlabz-protect input { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
	body.shlabz-shell .shlabz-protect__t b { grid-column: 2; grid-row: 1; align-self: center; }
	body.shlabz-shell .shlabz-protect__p { grid-column: 3; grid-row: 1; margin-left: 0; }
	body.shlabz-shell .shlabz-protect__t span { grid-column: 2 / -1; grid-row: 2; }
	body.shlabz-shell .shlabz-protect__p i { max-width: 170px; }
}

/* ------------------------------------------------------------------ *
   The telephone field
   ------------------------------------------------------------------
   One box holding two things: which country the number belongs to, and
   the number. The structure matters more than the paint here, and the
   first version got it wrong — the selector was floated over an input
   that still drew its own border, so there were two boxes fighting over
   one outline, a black focus ring from the browser on top of them, and
   a label with nowhere to go.

   So the border, the background and the focus ring belong to the
   WRAPPER; the input inside draws nothing at all and is inset far
   enough that its text begins after the selector ends. There is
   exactly one edge, and everything sits inside it.
 * ------------------------------------------------------------------ */

body.shlabz-shell .wc-block-components-text-input.shlabz-has-dial { position: relative; }

/* The border stays on the input, which is the only element whose box is
   exactly the field. Putting it on the wrapper looked identical until an
   error message arrived — the message is appended inside that wrapper, so
   it was drawn inside the border, sitting on the bottom edge. */
body.shlabz-shell .shlabz-has-dial input[type="tel"] {
	padding-left: 94px !important;
	border: 1px solid var(--co-border, #e4e9e6) !important;
	border-radius: var(--co-radius, 12px) !important;
	background: var(--co-bg, #fff) !important;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color .14s ease, box-shadow .14s ease;
}
body.shlabz-shell .shlabz-has-dial input[type="tel"]:hover {
	border-color: var(--co-border-hover, #cbd4ce) !important;
}

/* One ring, in the brand green, and no black one from the browser
   underneath it. Both marks are needed: the outline reset removes the
   platform ring, the box-shadow draws ours in its place. */
body.shlabz-shell .shlabz-has-dial input[type="tel"]:focus,
body.shlabz-shell .shlabz-has-dial input[type="tel"]:focus-visible {
	border-color: var(--co-green, #19ed56) !important;
	box-shadow: 0 0 0 3px var(--co-focus, rgba(25, 237, 86, .28)) !important;
	outline: none !important;
}
body.shlabz-shell .shlabz-has-dial label,
body.shlabz-shell .shlabz-has-dial.is-active label { left: 94px; }

/* The selector: its own compartment inside the field, ending in a
   hairline the number begins after. It cannot overlap the number because
   the input's left padding is cut to exactly this width. */
body.shlabz-shell .shlabz-dial {
	position: absolute; left: 1px; top: 1px; z-index: 2;
	height: calc(100% - 2px);
	display: inline-flex; align-items: center; gap: 6px;
	width: 85px; padding: 0 8px 0 11px; margin: 0;
	border: 0; border-right: 1px solid var(--co-border, #e4e9e6);
	border-radius: var(--co-radius, 12px) 0 0 var(--co-radius, 12px);
	background: transparent; cursor: pointer; line-height: 1;
	transition: background-color .14s ease;
}
body.shlabz-shell .shlabz-dial:hover { background: var(--co-surface, #f7f9f8); }
body.shlabz-shell .shlabz-dial:focus-visible {
	outline: none; background: var(--co-surface, #f7f9f8);
	box-shadow: inset 0 0 0 2px var(--co-green, #19ed56);
}
body.shlabz-shell .shlabz-dial__flag { flex: none; display: inline-flex; }
body.shlabz-shell .shlabz-flag {
	width: 21px; height: 14px; display: block; border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(13, 18, 17, .12);
}
body.shlabz-shell .shlabz-flag--code {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--co-surface, #f7f9f8); color: var(--co-text-3, #6b756f);
	font-size: 8.5px; font-weight: 800; letter-spacing: .02em;
}
body.shlabz-shell .shlabz-dial__iso {
	flex: 1 1 auto; text-align: left;
	font-size: 13px; font-weight: 700; letter-spacing: -.01em;
	color: var(--co-text-2, #556059);
}
body.shlabz-shell .shlabz-dial__caret {
	flex: none; width: 12px; height: 12px; fill: none;
	stroke: var(--co-text-3, #6b756f); stroke-width: 2.6;
	stroke-linecap: round; stroke-linejoin: round;
	transition: transform .16s ease;
}
body.shlabz-shell .shlabz-dial[aria-expanded="true"] .shlabz-dial__caret { transform: rotate(180deg); }

/* An invalid number reddens the one border there is. The selector is
   transparent, so it takes the tint with it and the field stays a single
   object rather than a red box with a white panel bolted to its side. */
body.shlabz-shell .shlabz-has-dial.has-error input[type="tel"],
body.shlabz-shell .shlabz-has-dial input[type="tel"][aria-invalid="true"] {
	border-color: var(--co-red, #c8202a) !important;
	background: var(--co-red-tint, #fdf3f3) !important;
}
body.shlabz-shell .shlabz-has-dial.has-error input[type="tel"]:focus,
body.shlabz-shell .shlabz-has-dial input[type="tel"][aria-invalid="true"]:focus {
	border-color: var(--co-red, #c8202a) !important;
	box-shadow: 0 0 0 3px rgba(200, 32, 42, .16) !important;
}
body.shlabz-shell .shlabz-has-dial.has-error .shlabz-dial { border-right-color: rgba(200, 32, 42, .26); }

/* The message sits under the field, full width, and pushes what follows
   down instead of landing on the border. */
body.shlabz-shell .shlabz-has-dial .wc-block-components-validation-error {
	position: static; margin-left: 0;
}

/* ── the list ────────────────────────────────────────────────────────
   Hung from the bottom edge of the field and exactly as wide as it, so
   it reads as the same object opening rather than a menu arriving from
   somewhere else. */
body.shlabz-shell .shlabz-dial__list {
	position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
	background: var(--co-bg, #fff); border: 1px solid var(--co-border, #e4e9e6);
	border-radius: var(--co-radius, 12px);
	box-shadow: 0 14px 34px rgba(13, 18, 17, .13), 0 2px 6px rgba(13, 18, 17, .05);
	overflow: hidden;
}
body.shlabz-shell .shlabz-dial__list[hidden] { display: none; }
body.shlabz-shell .shlabz-dial__search {
	width: 100%; height: 44px; padding: 0 14px;
	border: 0 !important; border-bottom: 1px solid var(--co-border, #e4e9e6) !important;
	border-radius: 0 !important; background: var(--co-bg, #fff) !important;
	box-shadow: none !important; outline: none !important;
	font: inherit; font-size: 14.5px; color: var(--co-text, #0d1211);
}
body.shlabz-shell .shlabz-dial__rows {
	max-height: 252px; overflow-y: auto; overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
body.shlabz-shell .shlabz-dial__row {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 9px 14px; border: 0; background: transparent;
	font: inherit; font-size: 14.5px; color: var(--co-text, #0d1211);
	text-align: left; cursor: pointer;
}
body.shlabz-shell .shlabz-dial__row[hidden] { display: none; }
body.shlabz-shell .shlabz-dial__row:hover { background: var(--co-surface, #f7f9f8); }
body.shlabz-shell .shlabz-dial__row:focus-visible {
	outline: none; background: var(--co-surface, #f7f9f8);
}
body.shlabz-shell .shlabz-dial__row.on { background: var(--co-green-tint, #f1fdf5); font-weight: 700; }
body.shlabz-shell .shlabz-dial__f { flex: none; display: inline-flex; }
body.shlabz-shell .shlabz-dial__n {
	flex: 1 1 auto; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.shlabz-shell .shlabz-dial__d {
	flex: none; color: var(--co-text-3, #6b756f);
	font-variant-numeric: tabular-nums; font-weight: 600;
}
body.shlabz-shell .shlabz-dial__empty {
	margin: 0; padding: 16px 14px; font-size: 14px; color: var(--co-text-3, #6b756f);
}

@media (max-width: 640px) {
	body.shlabz-shell .shlabz-dial { width: 80px; padding: 0 7px 0 10px; gap: 5px; }
	body.shlabz-shell .shlabz-has-dial input[type="tel"] { padding-left: 89px !important; }
	body.shlabz-shell .shlabz-dial__iso { font-size: 12.5px; }
	body.shlabz-shell .shlabz-has-dial label,
	body.shlabz-shell .shlabz-has-dial.is-active label { left: 89px; }
	body.shlabz-shell .shlabz-dial__rows { max-height: 44vh; }
}