/* Waslli Kuwait design layer: kw-brand. Loaded after the base stylesheet.
 *
 * Navy & Gold brand («كحلي وذهبي»): tokens, type, buttons, header, hero, footer,
 * badges, links, focus, form fields and global layout. Later layers
 * (kw-browse, kw-product, kw-checkout) refine per surface.
 *
 * Gold (--waslli-accent) is only for the primary order CTA and sale badges, and
 * text on gold is always navy (--waslli-on-accent), never white.
 */

/* ==========================================================================
   1. Tokens
   Plain :root on purpose: the inline :root printed by theme-options.php /
   customizer.php comes later and wins, so admin colour settings still apply
   to primary / dark / accent / surface / text / muted / radius / font.
   ========================================================================== */
:root {
	--waslli-primary: #1D4E89;
	--waslli-primary-deep: #173F70;
	--waslli-dark: #0C2340;
	--waslli-dark-deep: #081A30;
	--waslli-primary-dark: var(--waslli-dark);
	--waslli-accent: #E3B448;
	--waslli-accent-hover: #D6A535;
	--waslli-accent-hover-soft: #DCAC3E;
	--waslli-accent-light: #EAC46A;
	--waslli-accent-bright: #ECC66C;
	--waslli-on-accent: #0C2340;
	--waslli-accent-ink: #1D4E89;
	--waslli-gold-ink: #6B4E0E;
	--waslli-ink: #0F1B2D;
	--waslli-text: #0F1B2D;
	--waslli-muted: #5A6578;
	--waslli-line: #DCE3ED;
	--waslli-line-strong: #C3CEDD;
	--waslli-bg: #F4F6FA;
	--waslli-off-white: #F7F9FC;
	--waslli-white: #fff;
	--waslli-primary-soft: #EEF3FA;
	--waslli-primary-tint: #EDF2F9;
	--waslli-primary-wash: #F2F6FB;
	--waslli-primary-line: #CBD8EA;
	--waslli-soft-green: #EAF1FA;
	--waslli-soft-orange: #FBF3DF;
	--waslli-price: #0C2340;
	--waslli-danger: #B42318;
	--waslli-danger-soft: #FEF3F2;
	--waslli-radius: 10px;
	--waslli-btn-radius: 10px;
	--waslli-container: 1280px;
	--waslli-shadow: 0 1px 2px rgb(12 35 64 / 6%), 0 8px 24px rgb(12 35 64 / 8%);
	--waslli-shadow-cta: 0 8px 20px rgb(160 120 30 / 30%), inset 0 -2px 0 rgb(0 0 0 / 10%);
	--waslli-focus-ring: 0 0 0 3px color-mix(in srgb, var(--waslli-primary) 18%, transparent);
	--waslli-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
	--waslli-hero-bg: radial-gradient(110% 90% at 88% 0%, #1A3F6E 0%, rgb(26 63 110 / 0%) 60%), linear-gradient(160deg, #0F2C52 0%, #0C2340 55%, #091B33 100%);
	/* Sadu-inspired diamond band (navy / gold), used once: under the home hero. */
	--waslli-sadu-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Crect width='24' height='12' fill='%230C2340'/%3E%3Cpath d='M0 6 6 0 12 6 6 12Z' fill='%23E3B448'/%3E%3Cpath d='M12 6 18 0 24 6 18 12Z' fill='%23F4F6FA'/%3E%3Cpath d='M6 3.5 8.5 6 6 8.5 3.5 6Z' fill='%230C2340'/%3E%3Cpath d='M18 3.5 20.5 6 18 8.5 15.5 6Z' fill='%230C2340'/%3E%3C/svg%3E");
	--waslli-sadu-band-h: 12px;
}

/* ==========================================================================
   2. Base: type, page, links, prices
   ========================================================================== */
body {
	background: var(--waslli-white);
	color: var(--waslli-ink);
	font-family: var(--waslli-font);
}

body :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .button) {
	font-family: inherit;
}

:is(.price, .amount, .waslli-sticky-price, .waslli-form-summary__price) {
	font-variant-numeric: lining-nums tabular-nums;
}

a {
	color: var(--waslli-dark);
}

a:hover {
	color: var(--waslli-primary);
}

/* RTL-01: «15.500 د.ك» — number first, symbol after it, in every price.
   WooCommerce's <bdi> resolves to LTR (the symbol span carries dir=auto),
   which put the symbol first for an Arabic reader. */
.woocommerce-Price-amount bdi {
	direction: rtl;
	unicode-bidi: isolate;
}

/* RTL-02: the sale price is not a link — no underline; the old price is muted and struck. */
ins,
.price ins,
.amount ins {
	text-decoration: none;
}

.price del,
del .amount,
del .woocommerce-Price-amount {
	color: var(--waslli-muted);
	font-weight: 400;
	text-decoration-line: line-through;
}

/* «د.ك» inside an old price keeps the old price's size: it is already small, and a
   further em scale (0.72em on the sticky bar) made «د.ك» read as «دك». */
del .woocommerce-Price-currencySymbol,
html body.single-product .waslli-sticky-buy .waslli-sticky-price del .woocommerce-Price-currencySymbol {
	font-size: 1em !important;
}

::selection {
	background: color-mix(in srgb, var(--waslli-primary) 18%, transparent);
	color: var(--waslli-ink);
}

/* Focus: one visible ring everywhere; gold on navy surfaces. */
:focus-visible {
	outline: 2px solid var(--waslli-primary);
	outline-offset: 2px;
}

:is(.site-footer, .store-notice, .waslli-hero) :focus-visible {
	outline-color: var(--waslli-accent);
}

/* ==========================================================================
   3. Layout (DESK-01): full-width bands, content max 1280px, no grey frame
   ========================================================================== */
.site-header,
.site-main,
.site-footer {
	width: 100%;
	max-width: none;
}

body.waslli-account-v2 {
	background: var(--waslli-bg);
}

body.waslli-account-v2 .site-main {
	width: min(calc(100% - 40px), var(--waslli-container)) !important;
	max-width: var(--waslli-container) !important;
}

.waslli-account-v2 .site-header,
.waslli-account-v2 .site-footer {
	width: 100%;
	border-radius: 0;
}

/* The base account reset forces every .waslli-container to 100% / no padding.
   Give the header and footer back the same gutters they have on every other page. */
.waslli-account-v2 .site-header .waslli-container,
.waslli-account-v2 .site-footer .waslli-container {
	width: min(calc(100% - 40px), var(--waslli-container)) !important;
	margin-inline: auto !important;
}

@media (max-width: 640px) {
	.waslli-account-v2 .site-header .waslli-container {
		width: min(calc(100% - 20px), var(--waslli-container)) !important;
	}

	.waslli-account-v2 .site-footer .waslli-container {
		width: min(calc(100% - 32px), var(--waslli-container)) !important;
		padding-inline: 18px !important;
	}
}

@media (max-width: 360px) {
	.waslli-account-v2 .site-header .waslli-container {
		width: min(calc(100% - 16px), var(--waslli-container)) !important;
	}
}

/* ==========================================================================
   4. Buttons
   Primary CTA = gold fill + navy text. Secondary = white + navy outline.
   ========================================================================== */
.waslli-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: var(--waslli-btn-radius);
	background: var(--waslli-accent);
	color: var(--waslli-on-accent);
}

.waslli-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--waslli-accent-hover);
	color: var(--waslli-on-accent);
}

/* Secondary actions (utility class for templates + the known secondary buttons). */
.waslli-button--secondary,
.woocommerce a.button.waslli-button--secondary,
.woocommerce-message a.button.wc-forward,
.woocommerce-info a.button.wc-forward {
	min-height: 44px;
	border: 1.5px solid var(--waslli-line-strong) !important;
	background: var(--waslli-white) !important;
	color: var(--waslli-dark) !important;
	box-shadow: none !important;
}

.waslli-button--secondary:hover,
.woocommerce a.button.waslli-button--secondary:hover,
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-info a.button.wc-forward:hover {
	border-color: var(--waslli-dark) !important;
	background: var(--waslli-primary-soft) !important;
	color: var(--waslli-dark) !important;
}

/* Every solid gold fill gets navy text (selectors mirror the base rules that paint gold). */
.waslli-affiliate-links__generate,
.waslli-affiliate-links__copy,
.store-notice-points span::before,
.cart-count,
.waslli-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.waslli-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce span.onsale,
.waslli-sale-badge,
.waslli-quick-specs header span,
.waslli-assurance.is-payment .waslli-assurance-icon,
.woocommerce div.product form.cart .single_add_to_cart_button,
#place_order,
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-checkout form.checkout #place_order,
.woocommerce-checkout form.checkout #place_order:hover,
.single-product .waslli-product-title-card,
.single-product .waslli-price-card > strong,
.single-product .woocommerce div.product form.cart .single_add_to_cart_button,
.single-product .woocommerce div.product form.cart .single_add_to_cart_button:hover,
.waslli-decision-actions button,
.waslli-reading-break__copy span,
.waslli-sticky-buy .waslli-sticky-cart,
.single-product .waslli-sticky-buy .waslli-sticky-cart,
.single-product .waslli-decision-actions button:not(.waslli-decision-buy),
.waslli-inline-order-submit,
.waslli-inline-order-submit:hover,
.waslli-inline-order-submit:focus,
.waslli-bundle-badge,
.waslli-bundles-submit,
.waslli-bundles-submit:hover,
.waslli-bundles-submit:focus,
.waslli-sticky-buy:has(.waslli-sticky-product) .waslli-sticky-buy-btn,
.waslli-sticky-buy:has(.waslli-sticky-product) .waslli-sticky-buy-btn:hover,
.waslli-sticky-buy:has(.waslli-sticky-product) .waslli-sticky-buy-btn:focus,
.waslli-badge--sale,
.waslli-inline-order-submit--v2,
.waslli-price-card__eyebrow,
.waslli-urgency-widget .waslli-urgency-countdown .waslli-urgency-icon,
.waslli-decision-topbadge,
.waslli-decision-box--v2 .waslli-decision-buy,
.single-product .woocommerce div.product form.cart::before,
.hero-eyebrow__dot,
.waslli-hero .hero-cta-primary,
.waslli-hero__ribbon,
.mobile-cta-badge,
body.waslli-cart-v2 .wc-proceed-to-checkout a.checkout-button,
.waslli-cart-empty__cta,
.waslli-contact-support__mark,
.waslli-contact-info__icon,
.waslli-contact-support__button,
.waslli-shop-hero__count,
.waslli-filter-apply,
.waslli-account-guest .woocommerce-form-login__submit,
.waslli-account-guest .woocommerce-form-register__submit,
.waslli-account-guest button[type="submit"].button,
.waslli-dash-welcome__cta,
.waslli-dash-stat--spent .waslli-dash-stat__icon,
.waslli-account-logged-in .woocommerce-MyAccount-content .button,
.waslli-account-logged-in .woocommerce-MyAccount-content button[type="submit"],
.waslli-bundle-card__corner,
body.single-product .waslli-inline-order::after,
.single-product .waslli-usage-tabs::after,
.waslli-marketer-hero__actions > a,
.waslli-marketer-empty > a,
.single-product .waslli-product-hook::before,
.single-product .waslli-urgency-cta,
.waslli-cart-drawer__checkout,
.waslli-cart-drawer__checkout:hover,
.waslli-cart-drawer__checkout:focus-visible {
	color: var(--waslli-on-accent) !important;
}

/* Gold used as text on light surfaces reads as blue ink instead (gold text fails contrast). */
.brand-fallback small,
.category-nav .menu-offers a,
.section-heading a,
.waslli-countdown b,
.waslli-inline-order-head span,
.waslli-urgency-icon,
.waslli-urgency-countdown .waslli-urgency-value,
.waslli-urgency-countdown .waslli-urgency-value .sep,
.waslli-urgency-widget .waslli-urgency-countdown [data-waslli-countdown],
.waslli-urgency-widget .waslli-urgency-countdown .sep,
.waslli-contact-links a span,
.waslli-order-card__cta {
	color: var(--waslli-accent-ink) !important;
}

/* Prices: navy, not orange. */
.waslli-form-summary__price,
.waslli-form-summary__price ins,
.waslli-sticky-buy .waslli-sticky-price,
.waslli-form-totals__row--total b,
body.waslli-cart-v2 td.product-subtotal,
body.waslli-cart-v2 .order-total th,
body.waslli-cart-v2 .order-total td,
.waslli-crosssell-card__price,
body.waslli-cart-v2 td.product-subtotal .amount,
.waslli-shop-v2 ul.products li.product .price ins {
	color: var(--waslli-price) !important;
}

/* ==========================================================================
   5. Top strip + header
   ========================================================================== */
.store-notice {
	background: var(--waslli-dark);
	color: var(--waslli-white);
}

.site-header {
	background: rgb(255 255 255 / 98%);
	border-bottom-color: var(--waslli-line);
}

.brand-fallback {
	color: var(--waslli-dark);
}

.product-search,
.product-search input {
	border-color: var(--waslli-line) !important;
}

.product-search:focus-within {
	border-color: var(--waslli-primary) !important;
	box-shadow: var(--waslli-focus-ring);
}

.product-search button {
	background: var(--waslli-dark) !important;
	background-image: none !important;
	color: var(--waslli-white) !important;
}

.product-search button:hover {
	background: var(--waslli-primary-deep) !important;
}

.cart-count {
	background: var(--waslli-accent) !important;
	background-image: none !important;
	box-shadow: none !important;
}

.category-nav a:hover,
.category-nav .current-menu-item a {
	background: var(--waslli-primary-soft);
	color: var(--waslli-dark);
}

/* ==========================================================================
   6. Home hero — static navy surface (no animated blur blobs), gold CTA,
   Sadu band at the bottom edge.
   ========================================================================== */
.waslli-hero {
	background: var(--waslli-hero-bg) !important;
	color: var(--waslli-white) !important;
}

.waslli-hero__bg {
	display: none !important;
}

.waslli-hero__image-bg::after {
	background: color-mix(in srgb, var(--waslli-dark) 85%, transparent) !important;
}

.waslli-hero .hero-title {
	color: var(--waslli-white) !important;
	text-shadow: none !important;
	letter-spacing: 0 !important;
}

.waslli-hero .hero-copy {
	color: rgb(232 238 247 / 84%) !important;
}

.waslli-hero .hero-eyebrow {
	background: transparent !important;
	border-color: rgb(227 180 72 / 60%) !important;
	color: var(--waslli-accent-light) !important;
	backdrop-filter: none !important;
}

.waslli-hero .hero-eyebrow__dot {
	background: var(--waslli-accent) !important;
	animation: none !important;
	box-shadow: none !important;
}

.waslli-hero .hero-cta-primary {
	background: var(--waslli-accent) !important;
	background-image: none !important;
	color: var(--waslli-on-accent) !important;
	box-shadow: var(--waslli-shadow-cta) !important;
	border-radius: var(--waslli-btn-radius) !important;
}

.waslli-hero .hero-cta-primary:hover {
	background: var(--waslli-accent-hover) !important;
}

.waslli-hero .hero-cta-secondary {
	background: transparent !important;
	border-color: rgb(227 180 72 / 55%) !important;
	color: var(--waslli-white) !important;
	backdrop-filter: none !important;
	border-radius: var(--waslli-btn-radius) !important;
}

.waslli-hero .hero-cta-secondary:hover {
	border-color: var(--waslli-accent) !important;
	background: rgb(255 255 255 / 6%) !important;
}

.waslli-hero .hero-mini-trust {
	color: rgb(232 238 247 / 84%) !important;
}

.waslli-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 4;
	height: var(--waslli-sadu-band-h);
	background: var(--waslli-sadu-band) repeat-x center / auto 100%;
	pointer-events: none;
}

/* ==========================================================================
   7. Trust bar, product tabs, section links
   ========================================================================== */
.waslli-trustbar {
	background: var(--waslli-off-white) !important;
	border-bottom-color: var(--waslli-line) !important;
}

.trustbar-item {
	background: var(--waslli-white) !important;
	border-color: var(--waslli-line) !important;
	border-radius: var(--waslli-radius) !important;
}

.trustbar-icon {
	background: var(--waslli-dark) !important;
	color: var(--waslli-accent) !important;
}

.trustbar-text strong {
	color: var(--waslli-ink) !important;
}

.products-tabs {
	background: var(--waslli-white) !important;
	border-color: var(--waslli-line) !important;
}

.products-tab.is-active {
	background: var(--waslli-dark) !important;
	background-image: none !important;
	color: var(--waslli-white) !important;
	box-shadow: none !important;
}

/* ==========================================================================
   8. Sale / loop badges — gold with navy text
   ========================================================================== */
:is(.waslli-badge--sale, .woocommerce span.onsale, .waslli-sale-badge, .waslli-loop-badge--sale) {
	background: var(--waslli-accent) !important;
	background-image: none !important;
	color: var(--waslli-on-accent) !important;
	box-shadow: none !important;
}

.waslli-loop-badge--new {
	background: var(--waslli-dark) !important;
	color: var(--waslli-white) !important;
}

.waslli-loop-badge--free {
	background: var(--waslli-primary) !important;
	color: var(--waslli-white) !important;
}

/* ==========================================================================
   9. Product page — calm title card, neutral hook, clear CTA hierarchy
   ========================================================================== */
body.single-product .waslli-product-title-card {
	background: var(--waslli-white) !important;
	border: 1px solid var(--waslli-line) !important;
	border-inline-start: 4px solid var(--waslli-accent) !important;
	border-radius: var(--waslli-radius) !important;
	box-shadow: none !important;
}

body.single-product .waslli-product-title-card::after {
	display: none !important;
}

body.single-product .waslli-product-title-card h1 {
	color: var(--waslli-dark) !important;
}

body.single-product .flex-control-thumbs img.flex-active {
	border-color: var(--waslli-primary) !important;
}

body.single-product .waslli-product-hook {
	background: var(--waslli-off-white) !important;
	border-color: var(--waslli-line) !important;
	border-radius: var(--waslli-radius) !important;
	box-shadow: none !important;
}

body.single-product .waslli-product-hook::before {
	background: var(--waslli-accent) !important;
}

body.single-product .waslli-product-hook::after {
	display: none !important;
}

body.single-product .waslli-product-hook__inner,
body.single-product .waslli-product-hook__inner p {
	color: var(--waslli-dark) !important;
}

body.single-product .waslli-product-hook__inner p:not(:first-child),
body.single-product .waslli-product-hook__inner li {
	color: #3E4A5E !important;
}

body.single-product .waslli-product-hook__inner li::before {
	color: var(--waslli-primary) !important;
}

/* Sticky bar: «اطلب الآن» (inline COD form) is the primary action; add-to-cart is secondary. */
body.single-product .waslli-sticky-buy {
	background: var(--waslli-white) !important;
	border-top-color: var(--waslli-line) !important;
}

body.single-product .waslli-sticky-buy .waslli-sticky-name {
	color: var(--waslli-ink) !important;
}

body.single-product .waslli-sticky-buy .waslli-sticky-price,
body.single-product .waslli-sticky-buy .waslli-sticky-price ins {
	color: var(--waslli-price) !important;
}

body.single-product .waslli-sticky-buy button[data-waslli-sticky-buy] {
	border: 0 !important;
	border-radius: var(--waslli-btn-radius) !important;
	background: var(--waslli-accent) !important;
	background-image: none !important;
	color: var(--waslli-on-accent) !important;
	box-shadow: var(--waslli-shadow-cta) !important;
}

body.single-product .waslli-sticky-buy .waslli-sticky-cart {
	border: 1.5px solid var(--waslli-line-strong) !important;
	border-radius: var(--waslli-btn-radius) !important;
	background: var(--waslli-white) !important;
	background-image: none !important;
	color: var(--waslli-dark) !important;
	box-shadow: none !important;
}

/* Mid-page offer card, delivery note */
.waslli-mid-offer__cta,
.single-product .waslli-mid-offer__cta {
	background: var(--waslli-accent) !important;
	background-image: none !important;
	color: var(--waslli-on-accent) !important;
}

.waslli-mid-offer__cta:hover,
.single-product .waslli-mid-offer__cta:hover {
	background: var(--waslli-accent-hover) !important;
	color: var(--waslli-on-accent) !important;
}

body.single-product .waslli-mid-offer {
	background: var(--waslli-off-white) !important;
	border-color: var(--waslli-line) !important;
	border-radius: var(--waslli-radius) !important;
	box-shadow: none !important;
}

body.single-product .waslli-mid-offer__eyebrow {
	background: var(--waslli-soft-orange) !important;
	color: var(--waslli-gold-ink) !important;
}

body.single-product .waslli-mid-offer__price,
body.single-product .waslli-mid-offer__price ins,
body.single-product .waslli-mid-offer__price .woocommerce-Price-currencySymbol {
	color: var(--waslli-price) !important;
}

body.single-product .waslli-mid-offer__saving span {
	background: var(--waslli-accent) !important;
	color: var(--waslli-on-accent) !important;
}

body.single-product .waslli-mid-offer__saving strong {
	color: var(--waslli-primary) !important;
}

body.single-product .waslli-mid-offer__trust span {
	border-color: var(--waslli-line) !important;
	color: var(--waslli-muted) !important;
}

/* ==========================================================================
   10. Inline COD order form (product page)
   ========================================================================== */
.waslli-inline-order {
	border-color: var(--waslli-line) !important;
	background: var(--waslli-off-white) !important;
}

.waslli-inline-order::after {
	background: var(--waslli-accent) !important;
}

.waslli-inline-order .waslli-inline-order-eyebrow {
	border-color: var(--waslli-primary-line) !important;
	background: var(--waslli-primary-soft) !important;
	color: var(--waslli-primary) !important;
}

.waslli-inline-order-head {
	border-color: var(--waslli-line) !important;
}

.waslli-inline-order-head h2 {
	color: var(--waslli-dark) !important;
}

.waslli-inline-order-head p {
	color: var(--waslli-muted) !important;
}

.waslli-inline-order-form--v2 .waslli-form-section {
	border-color: var(--waslli-line) !important;
	border-radius: var(--waslli-radius) !important;
	background: var(--waslli-white) !important;
	background-image: none !important;
}

.waslli-form-section__num {
	background: var(--waslli-dark) !important;
	background-image: none !important;
	color: var(--waslli-white) !important;
	box-shadow: none !important;
}

.waslli-form-section__head h3 {
	color: var(--waslli-ink) !important;
}

.waslli-form-section__head small,
.waslli-form-summary__qty,
.waslli-form-trust span {
	color: var(--waslli-muted) !important;
}

.waslli-form-summary {
	border-color: var(--waslli-line) !important;
	background: var(--waslli-off-white) !important;
}

.waslli-form-summary__body strong {
	color: var(--waslli-ink) !important;
}

.waslli-form-summary__list li {
	background: var(--waslli-primary-soft) !important;
	color: var(--waslli-ink) !important;
}

.waslli-form-totals__row--total {
	background: var(--waslli-primary-soft) !important;
	background-image: none !important;
}

.waslli-form-totals__note {
	border-color: color-mix(in srgb, var(--waslli-gold-ink) 45%, transparent) !important;
	background: var(--waslli-soft-orange) !important;
	color: var(--waslli-ink) !important;
}

.waslli-form-totals__note strong {
	color: var(--waslli-gold-ink) !important;
}

.waslli-field label {
	color: var(--waslli-muted) !important;
}

.waslli-field :is(input, select, textarea),
.waslli-province-trigger {
	border-color: var(--waslli-line-strong) !important;
	color: var(--waslli-ink) !important;
}

.waslli-field :is(input, select, textarea):focus,
.waslli-province-trigger:focus {
	border-color: var(--waslli-primary) !important;
	box-shadow: var(--waslli-focus-ring) !important;
}

.waslli-province-trigger__label,
.waslli-province-trigger__value {
	color: var(--waslli-muted) !important;
}

.waslli-form-cta {
	border-color: var(--waslli-line) !important;
}

.waslli-inline-order-submit,
.waslli-inline-order-submit--v2 {
	border-radius: var(--waslli-btn-radius) !important;
	background: var(--waslli-accent) !important;
	background-image: none !important;
	color: var(--waslli-on-accent) !important;
	box-shadow: var(--waslli-shadow-cta) !important;
}

.waslli-inline-order-submit:hover,
.waslli-inline-order-submit--v2:hover {
	background: var(--waslli-accent-hover) !important;
}

.waslli-inline-order-submit--v2::before {
	display: none !important;
}

/* ==========================================================================
   11. Form fields — base for every form (checkout, account, contact, search)
   ========================================================================== */
:where(input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="search"], [type="url"]), select, textarea) {
	border-color: var(--waslli-line-strong);
	color: var(--waslli-ink);
}

:where(input, select, textarea)::placeholder {
	color: color-mix(in srgb, var(--waslli-muted) 80%, transparent);
}

.woocommerce form .form-row :is(input.input-text, select, textarea),
.woocommerce-checkout .form-row .select2-container .select2-selection {
	min-height: 48px;
	border: 1.5px solid var(--waslli-line-strong);
	border-radius: var(--waslli-radius);
	background-color: var(--waslli-white);
	color: var(--waslli-ink);
}

.woocommerce form .form-row :is(input.input-text, select, textarea):focus {
	border-color: var(--waslli-primary);
	box-shadow: var(--waslli-focus-ring);
	outline: 0;
}

.woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select, textarea),
.waslli-field.is-invalid :is(input, select, textarea),
.waslli-province-field.is-invalid .waslli-province-trigger {
	border-color: var(--waslli-danger) !important;
	background-color: var(--waslli-danger-soft) !important;
}

.woocommerce form .form-row.woocommerce-validated :is(input.input-text, select, textarea),
.waslli-field.is-valid :is(input, select, textarea) {
	border-color: var(--waslli-primary) !important;
	background-color: var(--waslli-white) !important;
}

/* A native <select> replaced by select2/selectWoo stays a 1px hidden box (it was stretched
   to 100% width and pushed the checkout page wider than the screen). */
.woocommerce form .form-row select.select2-hidden-accessible,
.waslli-checkout-v2 .form-row select.select2-hidden-accessible {
	width: 1px !important;
	min-height: 0 !important;
}

/* Checkout v2 field states (were orange focus / green valid). */
.waslli-checkout-v2 .form-row input.input-text,
.waslli-checkout-v2 .form-row textarea,
.waslli-checkout-v2 .form-row select,
.waslli-checkout-v2 .form-row .select2-container .select2-selection {
	min-height: 48px !important;
	border-color: var(--waslli-line-strong) !important;
	background: var(--waslli-white) !important;
	color: var(--waslli-ink) !important;
}

.waslli-checkout-v2 .form-row input.input-text:focus,
.waslli-checkout-v2 .form-row textarea:focus,
.waslli-checkout-v2 .form-row select:focus,
.waslli-checkout-v2 .form-row .select2-container--focus .select2-selection {
	border-color: var(--waslli-primary) !important;
	background: var(--waslli-white) !important;
	box-shadow: var(--waslli-focus-ring) !important;
}

.waslli-checkout-v2 .form-row.woocommerce-invalid input.input-text,
.waslli-checkout-v2 .form-row.woocommerce-invalid textarea,
.waslli-checkout-v2 .form-row.woocommerce-invalid select {
	border-color: var(--waslli-danger) !important;
	background: var(--waslli-danger-soft) !important;
}

.waslli-checkout-v2 .form-row.woocommerce-validated input.input-text,
.waslli-checkout-v2 .form-row.woocommerce-validated textarea,
.waslli-checkout-v2 .form-row.woocommerce-validated select {
	border-color: var(--waslli-primary) !important;
	background: var(--waslli-white) !important;
}

/* ==========================================================================
   12. Footer — navy with gold accents
   ========================================================================== */
.site-footer {
	background: linear-gradient(180deg, var(--waslli-dark) 0%, var(--waslli-dark-deep) 100%);
}

.footer-col__title {
	border-bottom-color: var(--waslli-accent);
}

/* Drawn chevron instead of a «‹» glyph: glyphs get mirrored in RTL and pointed «back».
   This one always points left (forward in RTL). */
.footer-col li a::before {
	content: "";
	display: inline-block;
	flex: none;
	box-sizing: content-box;
	width: 5px;
	height: 5px;
	margin-inline: 2px;
	border: solid var(--waslli-accent);
	border-width: 0 0 2px 2px;
	transform: rotate(45deg);
}

.footer-col li a:hover::before {
	transform: translateX(-3px) rotate(45deg);
}

/* Solid footer CTA = gold + navy text. The ghost (outline) and WhatsApp variants keep their own look. */
.footer-col .footer-cta:not(.footer-cta--ghost):not(.footer-cta--wa),
.footer-col .footer-cta:not(.footer-cta--ghost):not(.footer-cta--wa):hover {
	background: var(--waslli-accent);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--waslli-accent) 30%, transparent);
	color: var(--waslli-on-accent) !important;
}

/* ==========================================================================
   13. Leftover hard-coded greens / oranges in the base styles, per surface.
   Same selectors as the base rules (so they win by order), mapped to tokens.
   ========================================================================== */

/* Notices (WooCommerce default olive/green) */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--waslli-primary);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--waslli-primary);
}

/* Product cards + quick view */
.woocommerce ul.products li.product:hover {
	border-color: var(--waslli-primary-line);
}

/* Card buttons are secondary (white + navy outline) on every grid, like the related
   carousel: gold stays on the hero CTA and the order CTAs (product page form,
   checkout, cart drawer). The second selector outranks kw-browse's gold card button. */
html body ul.products li.product .button,
html body.waslli-browse #primary ul.products li.product .button {
	border: 1.5px solid var(--waslli-line-strong) !important;
	background: var(--waslli-white) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--waslli-dark) !important;
}

html body ul.products li.product:hover .button,
html body ul.products li.product .button:hover,
html body ul.products li.product .button:focus-visible,
html body.waslli-browse #primary ul.products li.product:hover .button,
html body.waslli-browse #primary ul.products li.product .button:hover,
html body.waslli-browse #primary ul.products li.product .button:focus-visible {
	border-color: var(--waslli-dark) !important;
	background: var(--waslli-primary-soft) !important;
	color: var(--waslli-dark) !important;
}

.woocommerce ul.products li.product .waslli-quick-view-button:hover,
.woocommerce ul.products li.product .waslli-quick-view-button:focus-visible {
	color: var(--waslli-primary) !important;
}

.waslli-quick-view__dialog {
	border-color: var(--waslli-line) !important;
	box-shadow: 0 22px 56px rgb(12 35 64 / 26%) !important;
}

.waslli-quick-view h2 {
	color: var(--waslli-dark) !important;
}

.waslli-quick-view__eyebrow {
	background-color: var(--waslli-primary-soft) !important;
	color: var(--waslli-primary) !important;
}

.waslli-quick-view__attributes li,
.waslli-quick-view__description {
	color: var(--waslli-muted) !important;
}

.waslli-quick-view__close,
.waslli-quick-view__actions a {
	border-color: var(--waslli-line-strong) !important;
}

/* Shop: hero, filters, sort */
.waslli-shop-hero,
.waslli-login-hero {
	box-shadow: 0 20px 50px rgb(12 35 64 / 18%);
}

.waslli-filter-group--accordion {
	border-color: var(--waslli-line);
}

.waslli-filter-group--accordion summary {
	color: var(--waslli-ink);
}

.waslli-filter-group--accordion[open] summary {
	border-bottom-color: var(--waslli-line);
}

.waslli-filter-group--accordion .waslli-filter-cats {
	scrollbar-color: var(--waslli-line-strong) transparent;
}

.waslli-filter-price label {
	color: var(--waslli-muted);
}

.waslli-filter-price input {
	border-color: var(--waslli-line-strong);
	color: var(--waslli-ink);
}

.waslli-sort-control__trigger {
	border-color: var(--waslli-line-strong);
}

.waslli-sort-control__arrow {
	background-color: var(--waslli-primary-soft);
}

.waslli-sort-control__option {
	color: var(--waslli-ink);
}

.waslli-sort-control__option:hover,
.waslli-sort-control__option:focus-visible {
	background-color: var(--waslli-primary-soft);
}

/* Product page: borders, variations, area picker */
.woocommerce div.product form.cart,
.waslli-inline-variations,
.waslli-description-group li,
.waslli-why-us__card {
	border-color: var(--waslli-line);
}

.waslli-inline-variations__title small {
	color: var(--waslli-muted);
}

.waslli-inline-order-form--v2 .waslli-form-section:not([data-waslli-inline-summary]):focus-within {
	background-image: linear-gradient(180deg, var(--waslli-white) 0%, var(--waslli-primary-wash) 100%);
}

.waslli-free-ship-banner__text strong {
	text-shadow: 0 2px 5px rgb(8 26 48 / 24%);
}

/* theme.js injects the picker styles at runtime (after this file), hence the body prefix. */
body .waslli-province-options .waslli-province-group {
	border-bottom-color: var(--waslli-line);
}

body .waslli-province-options .waslli-province-empty {
	color: var(--waslli-muted);
}

body.single-product .waslli-province-panel__close {
	border-color: var(--waslli-line);
	background: var(--waslli-off-white);
}

body.single-product .waslli-province-search input {
	border-color: var(--waslli-line-strong);
	background: var(--waslli-off-white);
}

body.single-product .waslli-province-search svg {
	color: var(--waslli-muted);
}

body.single-product .waslli-province-options {
	scrollbar-color: var(--waslli-line-strong) var(--waslli-bg);
}

body.single-product .waslli-province-option {
	border-color: var(--waslli-line);
}

body.single-product .waslli-province-option:hover,
body.single-product .waslli-province-option:focus-visible {
	border-color: var(--waslli-primary);
	background: var(--waslli-primary-soft);
}

body.single-product .waslli-province-option__check {
	background: var(--waslli-primary-soft);
}

/* Free-delivery banner (product price card / decision box) */
.waslli-free-ship-banner {
	background: linear-gradient(125deg, var(--waslli-primary) 0%, var(--waslli-dark) 100%);
}

.waslli-free-ship-banner--ribbon {
	background: linear-gradient(135deg, var(--waslli-primary) 0%, var(--waslli-dark) 100%);
	box-shadow: 0 14px 32px rgb(12 35 64 / 30%);
}

/* Cart */
.waslli-cart-progress__bar--free {
	background: linear-gradient(135deg, var(--waslli-primary-soft) 0%, var(--waslli-primary-tint) 100%);
}

/* Checkout (was green «done» states and an orange CTA family) */
.waslli-checkout-steps .is-done .waslli-cart-step__num {
	border-color: var(--waslli-primary);
	background: var(--waslli-primary);
	color: var(--waslli-white);
}

.waslli-checkout-steps .is-done .waslli-cart-step__label {
	color: var(--waslli-primary);
}

.waslli-checkout-topbar__free {
	border-color: var(--waslli-primary-line);
	background: var(--waslli-primary-soft);
}

.waslli-checkout-topbar__free strong {
	color: var(--waslli-dark);
}

.waslli-checkout-topbar__free small {
	color: var(--waslli-muted);
}

.waslli-checkout-topbar__perks svg,
.waslli-checkout-trust__item svg {
	color: var(--waslli-primary);
}

.waslli-checkout-section-head__num {
	background: var(--waslli-dark);
	box-shadow: none;
	color: var(--waslli-white);
}

.waslli-checkout-cod__badge {
	background: var(--waslli-primary);
	box-shadow: none;
	color: var(--waslli-white);
}

.waslli-checkout-v2 #order_review .shop_table thead th {
	background: var(--waslli-off-white) !important;
	color: var(--waslli-muted) !important;
}

.waslli-checkout-v2 #order_review .shop_table tfoot .order-total th,
.waslli-checkout-v2 #order_review .shop_table tfoot .order-total td {
	background: var(--waslli-primary-soft) !important;
	color: var(--waslli-price) !important;
}

.waslli-checkout-v2 #order_review .shop_table tfoot .order-total .woocommerce-Price-amount {
	color: var(--waslli-price);
}

.waslli-checkout-v2 #payment ul.payment_methods li:has(input:checked),
.waslli-checkout-v2 #payment ul.payment_methods li.wc_payment_method.payment_method_cod input:checked ~ label {
	border-color: var(--waslli-primary);
}

.waslli-checkout-v2 #payment .payment_box {
	border-color: color-mix(in srgb, var(--waslli-accent) 45%, transparent) !important;
	background: var(--waslli-soft-orange) !important;
	color: var(--waslli-ink) !important;
}

.waslli-checkout-v2 #payment #place_order,
.waslli-checkout-v2 .place-order button#place_order {
	background: var(--waslli-accent) !important;
	color: var(--waslli-on-accent) !important;
	box-shadow: var(--waslli-shadow-cta) !important;
}

.waslli-checkout-v2 #payment #place_order:hover {
	background: var(--waslli-accent-hover) !important;
	box-shadow: var(--waslli-shadow-cta) !important;
}

/* Contact page */
.waslli-contact-links {
	border-color: var(--waslli-line);
}

.waslli-contact-links a {
	color: var(--waslli-ink);
}

.waslli-contact-page__highlights span {
	border-color: var(--waslli-primary-line);
	color: var(--waslli-dark);
}

.waslli-contact-support p {
	color: var(--waslli-muted);
}

/* ==========================================================================
   14. Mobile: compact hero, ≥16px inputs (no iOS zoom), ≥44px tap targets
   ========================================================================== */
@media (max-width: 640px) {
	.waslli-hero {
		padding-block: 24px calc(26px + var(--waslli-sadu-band-h)) !important;
	}

	.waslli-hero .hero-eyebrow {
		margin-bottom: 10px !important;
	}

	.waslli-hero .hero-title {
		margin-bottom: 8px !important;
		font-size: 26px !important;
		line-height: 1.3 !important;
	}

	.waslli-hero .hero-copy {
		margin-bottom: 16px !important;
		font-size: 15px !important;
		line-height: 1.65 !important;
	}

	.waslli-hero .hero-ctas {
		margin-bottom: 0 !important;
	}

	/* Same URL as the primary CTA; the trust bar right below repeats the mini-trust row. */
	.waslli-hero .hero-cta-secondary,
	.waslli-hero .hero-mini-trust {
		display: none !important;
	}

	.waslli-trustbar {
		padding: 12px 0 !important;
	}

	.waslli-trustbar__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}

	.trustbar-item {
		gap: 8px !important;
		padding: 10px !important;
	}

	.trustbar-icon {
		width: 32px !important;
		height: 32px !important;
		border-radius: 9px !important;
	}

	.trustbar-icon svg {
		width: 18px !important;
		height: 18px !important;
	}

	.trustbar-text strong {
		font-size: 13px !important;
	}

	.trustbar-text span {
		font-size: 11px !important;
	}
}

/* iOS Safari zooms into any field under 16px. Several base rules force 14-15px with
   !important, so this floor needs the weight of html + body + the :not() chain. */
@media (max-width: 900px) {
	html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]), select, textarea) {
		font-size: 16px !important;
	}

	/* Tap targets ≥ 44px */
	.site-branding > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.shop-category-rail a,
	.waslli-filter-cats a,
	.woocommerce ul.products li.product .button,
	.waslli-crosssell-card__btn {
		min-height: 44px !important;
	}

	.woocommerce-product-gallery__trigger,
	.waslli-related-nav__button {
		min-width: 44px !important;
		min-height: 44px !important;
	}

	/* Footer links: one 44px row each (outranks kw-browse's 40px rows). */
	html body .site-footer .footer-col ul li a {
		min-height: 44px;
	}

	/* Coupon toggle: 44px tap area without moving the line. */
	.woocommerce-form-coupon-toggle a.showcoupon {
		display: inline-block;
		padding-block: 12px;
		margin-block: -12px;
	}
}

/* ==========================================================================
   15. Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Image logo: wide wordmark (about 3.8:1), so the header box follows its ratio. */
.site-branding .custom-logo-link {
	width: 184px;
	height: 48px;
}
@media (max-width: 640px) {
	.site-branding .custom-logo-link {
		width: 154px;
		height: 40px;
	}
	html body .site-branding img.custom-logo {
		max-height: 40px !important;
	}
}
/* Light logo straight on the navy footer (no white chip). */
.site-footer .footer-logo.footer-logo--light {
	width: 210px;
	height: 56px;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	justify-content: flex-start;
}
@media (max-width: 640px) {
	.site-footer .footer-logo.footer-logo--light {
		margin-inline: auto;
		justify-content: center;
	}
}