/* ==========================================================================
   Extras: My Account / cart / checkout
   Loaded after main.css (handle vl-extra-account-cart-checkout).
   Tokens come from main.css :root (--c-beige-bg, --c-ink, --c-olive, --c-taupe …).
   ========================================================================== */

/* ---------- Utility ---------- */
.u-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- WooCommerce notices (account, cart, checkout, product) ---------- */
.o-body .woocommerce-message,
.o-body .woocommerce-info,
.o-body .woocommerce-error,
.o-body .woocommerce-notice {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	margin: 0 0 12px; padding: 14px 18px;
	background: var(--c-beige-bg); color: var(--c-ink);
	border: 1px solid var(--c-taupe); border-left-width: 4px; border-radius: var(--r-12);
	font-size: 14px; line-height: 1.45; list-style: none;
}
.o-body .woocommerce-message { border-left-color: var(--c-olive); }
.o-body .woocommerce-info,
.o-body .woocommerce-notice { border-left-color: var(--c-taupe); }
.o-body .woocommerce-error { background: #f6e7e1; border-color: #dbb8a9; border-left-color: #a45a45; color: var(--c-ink); }
.o-body .woocommerce-error li,
.o-body .woocommerce-message li,
.o-body .woocommerce-info li { list-style: none; margin: 0; width: 100%; }
.o-body .woocommerce-error li + li { margin-top: 4px; }
.o-body .woocommerce-message a:not(.button),
.o-body .woocommerce-info a:not(.button),
.o-body .woocommerce-error a:not(.button) { color: var(--c-olive-600); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.o-body .woocommerce-message a:not(.button):hover,
.o-body .woocommerce-info a:not(.button):hover,
.o-body .woocommerce-error a:not(.button):hover { color: var(--c-ink); }

/* Buttons inside notices → olive pills (same recipe as .o-btn--dark).
   Specificity is deliberately (0,4,1) to beat main.css `.woocommerce a.button:not(.o-btn):not(.o-tile__add)`. */
.o-body .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button,
.o-body .o-notices :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button,
.o-body .o-main :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 38px; padding: 0 20px; margin: 0 0 0 auto; order: 2;
	border-radius: var(--r-full); border: 1.5px solid var(--c-olive);
	background: var(--c-olive); color: var(--c-warm-white);
	font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
	transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.o-body .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button:hover,
.o-body .o-notices :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button:hover,
.o-body .o-main :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button:hover { background: var(--c-olive-600); border-color: var(--c-olive-600); color: var(--c-warm-white); }
.o-body .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button:active { transform: scale(.98); }
@media (max-width: 599px) {
	.o-body .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button,
	.o-body .o-notices :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button,
	.o-body .o-main :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button, input).button { margin-left: 0; width: 100%; }
}

/* Block-style notice banners (Woo prints these with an inline SVG + __content) – its own stylesheet is dequeued. */
.o-body .wc-block-components-notice-banner {
	display: flex; align-items: flex-start; gap: 12px;
	margin: 0 0 12px; padding: 14px 18px;
	background: var(--c-beige-bg); color: var(--c-ink);
	border: 1px solid var(--c-taupe); border-left-width: 4px; border-radius: var(--r-12);
	font-size: 14px; line-height: 1.45;
}
.o-body .wc-block-components-notice-banner.is-success { border-left-color: var(--c-olive); }
.o-body .wc-block-components-notice-banner.is-info { border-left-color: var(--c-taupe); }
.o-body .wc-block-components-notice-banner.is-error { background: #f6e7e1; border-color: #dbb8a9; border-left-color: #a45a45; }
.o-body .wc-block-components-notice-banner > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: var(--c-olive-600); }
.o-body .wc-block-components-notice-banner.is-error > svg { fill: #a45a45; }
.o-body .wc-block-components-notice-banner__content { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.o-body .wc-block-components-notice-banner__content > p,
.o-body .wc-block-components-notice-banner__content > ul { flex: 1 1 100%; }
.o-body .wc-block-components-notice-banner__content p,
.o-body .wc-block-components-notice-banner__summary { margin: 0; }
.o-body .wc-block-components-notice-banner__content ul { margin: 0; padding: 0; list-style: none; }
.o-body .wc-block-components-notice-banner__content li + li { margin-top: 4px; }
.o-body .wc-block-components-notice-banner__content a:not(.button) { color: var(--c-olive-600); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.o-body .wc-block-components-notice-banner__content .button,
.o-body .wc-block-components-notice-banner__content a.button,
.o-body .woocommerce .wc-block-components-notice-banner__content a.button,
.o-body .woocommerce .wc-block-components-notice-banner__content button.button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 18px; margin: 0 0 0 auto;
	border-radius: var(--r-full); border: 1.5px solid var(--c-olive); background: var(--c-olive); color: var(--c-warm-white);
	font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.o-body .wc-block-components-notice-banner__dismiss,
.o-body .woocommerce .wc-block-components-notice-banner__dismiss {
	flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; margin: -2px -6px 0 0;
	border-radius: var(--r-full); border: 0; background: transparent; color: var(--c-grey-500); font-size: 18px; line-height: 1; cursor: pointer;
}
.o-body .wc-block-components-notice-banner__dismiss:hover { background: rgba(43,46,34,.08); color: var(--c-ink); }

/* ---------- Cart: icon-only line-item actions ---------- */
.o-body .o-cartitem__actions { gap: 8px; }
.o-body .o-cartitem__actions .o-chip,
.o-body .o-cartitem__actions .o-chip--xs,
.o-body .o-cartitem__actions a.remove {
	width: 40px; height: 40px; min-height: 40px; padding: 0; gap: 0;
	justify-content: center; border-radius: var(--r-full);
	font-size: 0; line-height: 0;
}
.o-body .o-cartitem__actions .o-chip .o-ico,
.o-body .o-cartitem__actions .o-chip svg { width: 18px; height: 18px; }
.o-body .o-cartitem__actions .o-chip:focus-visible { outline: 2px solid var(--c-olive); outline-offset: 2px; }

/* ---------- Cart: totals card – checkout button now sits under the Total row ---------- */
.o-body .o-totals__cta { margin: 16px 0 0; }
.o-body .o-totals__cta:first-child { margin: 0 0 14px; }

/* ---------- Cart: reassurance list – dynamic shipping lines ---------- */
.o-body .o-cart__reassure li span { min-width: 0; }
.o-body .o-cart__reassure li .o-ico { flex: none; color: var(--c-olive-600); }

/* ---------- Checkout: coupon / login toggles + coupon form ---------- */
.o-body.woocommerce-checkout .woocommerce-form-coupon-toggle,
.o-body.woocommerce-checkout .woocommerce-form-login-toggle { margin: 0 0 14px; }
.o-body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.o-body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0; padding: 12px 18px;
	background: var(--c-beige-bg); color: var(--c-ink);
	border: 1px solid var(--c-taupe); border-left-width: 1px; border-radius: var(--r-12);
	font-size: 14px;
}
.o-body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon,
.o-body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin {
	color: var(--c-olive); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.o-body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover,
.o-body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin:hover { color: var(--c-olive-600); }

.o-body.woocommerce-checkout form.woocommerce-form-coupon {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	margin: 0 0 18px; padding: 14px 16px;
	background: var(--c-warm-white); border: 1px solid var(--c-taupe); border-radius: var(--r-16);
}
.o-body.woocommerce-checkout .woocommerce-form-coupon .form-row { flex: 1 1 240px; min-width: 0; margin: 0; padding: 0; display: block; width: auto; float: none; }
.o-body.woocommerce-checkout .woocommerce-form-coupon .form-row-last { flex: 0 0 auto; }
.o-body.woocommerce-checkout .woocommerce-form-coupon .clear { display: none; }
.o-body.woocommerce-checkout .woocommerce-form-coupon .input-text,
.o-body.woocommerce-checkout .woocommerce-form-coupon input#coupon_code {
	display: block; width: 100%; height: 46px; margin: 0; padding: 0 18px;
	background: #fff; color: var(--c-ink);
	border: 1px solid var(--c-grey-200); border-radius: var(--r-full);
	font-size: 14px; outline: 0; box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}
.o-body.woocommerce-checkout .woocommerce-form-coupon .input-text::placeholder { color: var(--c-grey-500); }
/* One clean 2px olive ring on focus (border + 1px shadow), no UA/global outline on top. */
.o-body.woocommerce-checkout .woocommerce-form-coupon .input-text:focus,
.o-body.woocommerce-checkout .woocommerce-form-coupon .input-text:focus-visible,
.o-body.woocommerce-checkout .woocommerce-form-coupon input#coupon_code:focus,
.o-body.woocommerce-checkout .woocommerce-form-coupon input#coupon_code:focus-visible {
	outline: 0; outline-offset: 0;
	border-color: var(--c-olive); box-shadow: 0 0 0 1px var(--c-olive);
}
.o-body.woocommerce-checkout .woocommerce .woocommerce-form-coupon button.button,
.o-body.woocommerce-checkout .woocommerce-form-coupon button.button,
.o-body.woocommerce-checkout .woocommerce-form-coupon button[name="apply_coupon"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: auto; min-height: 46px; height: 46px; padding: 0 26px; margin: 0;
	border-radius: var(--r-full); border: 1.5px solid var(--c-olive);
	background: var(--c-olive); color: var(--c-warm-white);
	font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; line-height: 1;
	transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.o-body.woocommerce-checkout .woocommerce .woocommerce-form-coupon button.button:hover,
.o-body.woocommerce-checkout .woocommerce-form-coupon button.button:hover { background: var(--c-olive-600); border-color: var(--c-olive-600); }
.o-body.woocommerce-checkout .woocommerce-form-coupon button.button:active { transform: scale(.98); }
.o-body.woocommerce-checkout .woocommerce-form-coupon button.button:focus-visible { outline: 2px solid var(--c-olive); outline-offset: 3px; }
@media (max-width: 599px) {
	.o-body.woocommerce-checkout .woocommerce-form-coupon .form-row,
	.o-body.woocommerce-checkout .woocommerce-form-coupon .form-row-last { flex: 1 1 100%; }
	.o-body.woocommerce-checkout .woocommerce .woocommerce-form-coupon button.button,
	.o-body.woocommerce-checkout .woocommerce-form-coupon button.button { width: 100%; }
}

/* Olive radios/checkboxes in cart & checkout instead of browser blue */
.woocommerce input[type=radio], .woocommerce input[type=checkbox] { accent-color: var(--c-olive, #656D55); }