/*
 * UpNovo Tech - WoodMart storefront layer
 * Design direction: UpNovo Mega
 */

:root {
	--upn-accent: #1C61E7;
	--upn-accent-dark: #164BB4;
	--upn-accent-soft: #EAF1FF;
	--upn-ink: #1B2437;
	--upn-muted: #6B7788;
	--upn-line: #E6EAF0;
	--upn-panel: #F7F9FC;
	--upn-bg: #F4F6F8;
	--upn-success: #12764F;
	--upn-warning: #8A5A00;
	--upn-warning-soft: #FDF3E2;
	--upn-success-soft: #E8F5EF;
	--upn-whatsapp: #128C7E;
	--upn-radius-sm: 4px;
	--upn-radius: 8px;
	--upn-radius-lg: 12px;
}

/* ---------------------------------------------------------------- Badges */

.upnovo-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: inline-block;
	padding: 4px 9px;
	border-radius: var(--upn-radius-sm);
	background-color: var(--upn-warning);
	color: #FFFFFF;
	font-size: 11px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	pointer-events: none;
}

.upnovo-badge--ready {
	background-color: var(--upn-success);
}

.wd-product .product-element-top,
.wd-product .product-image-link {
	position: relative;
}

/* Keep our badge clear of WoodMart's own label stack. */
.wd-product .product-labels + .upnovo-badge,
.wd-product .labels-rectangular + .upnovo-badge,
.wd-product .labels-rounded + .upnovo-badge {
	top: 44px;
}

/* ------------------------------------------------------- Stock wording */

.upnovo-stock,
.wd-product .stock.upnovo-stock {
	font-size: 13px;
	font-weight: 500;
}

.upnovo-stock--ready,
.wd-product .stock.upnovo-stock--ready {
	color: var(--upn-success);
}

.upnovo-stock--soon,
.wd-product .stock.upnovo-stock--soon {
	color: var(--upn-warning);
}

.upnovo-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 5px 12px 5px 10px;
	border-radius: var(--upn-radius-sm);
	font-size: 13px;
	font-weight: 600;
}

.upnovo-status--ready {
	background-color: var(--upn-success-soft);
	color: var(--upn-success);
}

.upnovo-status--coming-soon {
	background-color: var(--upn-warning-soft);
	color: var(--upn-warning);
}

.upnovo-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background-color: currentColor;
	flex: 0 0 auto;
}

/* --------------------------------------------------- WhatsApp actions */

.upnovo-wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--upn-whatsapp);
	border-radius: var(--upn-radius);
	background-color: #FFFFFF;
	color: var(--upn-whatsapp);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.upnovo-wa-btn:hover,
.upnovo-wa-btn:focus-visible {
	background-color: var(--upn-whatsapp);
	color: #FFFFFF;
}

.upnovo-wa-btn__icon {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--upn-wa-mask) center / contain no-repeat;
	mask: var(--upn-wa-mask) center / contain no-repeat;
}

:root {
	--upn-wa-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.17 8.17 0 0 1-1.25-4.38c0-4.54 3.7-8.23 8.24-8.23a8.23 8.23 0 0 1 8.23 8.24c0 4.54-3.7 8.23-8.23 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.53.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.24-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.24-.86.84-.86 2.05s.88 2.38 1 2.54c.12.16 1.73 2.64 4.19 3.7.59.26 1.04.41 1.4.52.59.19 1.12.16 1.55.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29Z'/%3E%3C/svg%3E");
}

.upnovo-wa-btn--block {
	display: flex;
	width: 100%;
}

.upnovo-wa-btn--single {
	margin-top: 12px;
	width: 100%;
}

.wd-product .upnovo-wa-btn--loop {
	width: 100%;
	font-size: 13px;
	padding: 9px 12px;
	min-height: 40px;
}

.upnovo-wa-float {
	position: fixed;
	right: 16px;
	bottom: 24px;
	z-index: 380;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 18px 12px 15px;
	border-radius: 999px;
	background-color: var(--upn-whatsapp);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(18, 140, 126, .28);
}

.upnovo-wa-float:hover,
.upnovo-wa-float:focus-visible {
	background-color: #0E6E63;
	color: #FFFFFF;
}

.upnovo-wa-float__icon {
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--upn-wa-mask) center / contain no-repeat;
	mask: var(--upn-wa-mask) center / contain no-repeat;
}

@media (max-width: 1024px) {
	.upnovo-wa-float {
		right: 12px;
		bottom: 72px;
		padding: 12px;
	}

	.upnovo-wa-float__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* -------------------------------------------------- Coming soon panel */

.upnovo-soon-panel {
	margin: 4px 0 20px;
	padding: 18px;
	border: 1px solid var(--upn-line);
	border-left: 3px solid var(--upn-warning);
	border-radius: var(--upn-radius);
	background-color: var(--upn-panel);
}

.upnovo-soon-panel__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--upn-ink);
}

.upnovo-soon-panel__text {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--upn-muted);
}

/* ------------------------------------------------------- Trust points */

.upnovo-trust {
	list-style: none;
	margin: 22px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--upn-line);
	border-radius: var(--upn-radius);
	background-color: #FFFFFF;
	display: grid;
	gap: 14px;
}

.upnovo-trust__item {
	display: grid;
	gap: 2px;
	padding-left: 26px;
	position: relative;
}

.upnovo-trust__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background-color: var(--upn-accent-soft);
	box-shadow: inset 0 0 0 4px var(--upn-accent);
}

.upnovo-trust__item strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--upn-ink);
}

.upnovo-trust__item span {
	font-size: 13px;
	line-height: 1.5;
	color: var(--upn-muted);
}

/* ------------------------------------------------- Cart and checkout */

.upnovo-process {
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid var(--upn-line);
	border-radius: var(--upn-radius);
	background-color: var(--upn-accent-soft);
}

.upnovo-process__title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--upn-ink);
}

.upnovo-process__steps {
	margin: 0 0 10px;
	padding-left: 20px;
	display: grid;
	gap: 4px;
}

.upnovo-process__steps li {
	font-size: 14px;
	line-height: 1.55;
	color: var(--upn-ink);
}

.upnovo-process__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--upn-muted);
}

.upnovo-full-name-field input {
	text-transform: none;
}

/* ---------------------------------------------------------- Review gate */

.upnovo-review-gate {
	display: grid;
	gap: 8px;
	justify-items: start;
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid var(--upn-line);
	border-radius: var(--upn-radius);
	background-color: var(--upn-panel);
}

.upnovo-review-gate strong {
	font-size: 15px;
	color: var(--upn-ink);
}

.upnovo-review-gate span {
	font-size: 14px;
	line-height: 1.55;
	color: var(--upn-muted);
}

/* ------------------------------------------------------------ Details */

.upnovo-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--upn-muted);
}

@media (prefers-reduced-motion: reduce) {
	.upnovo-wa-btn,
	.upnovo-wa-float {
		transition: none;
	}
}

/* ---------------------------------------------- French sentence case
 * WoodMart capitalises every word, which is wrong in French:
 * "Ajouter Au Panier" must read "Ajouter au panier".
 */

.btn,
.button,
.wd-product .button,
.wp-block-wd-button,
.woocommerce-cart .button,
.wd-header-nav .wd-nav > li > a,
.wd-nav-opener,
.menu-opener,
.wd-sticky-nav .menu-opener,
.wd-tabs .wd-nav-tabs > li > a,
.wd-el-title,
.widget-title,
.wd-cat .wd-entities-title,
.woocommerce-Tabs-panel h2,
.wd-toolbar-label,
.wd-toolbar-item .wd-toolbar-label,
.woodmart-nav-link,
.wd-product .wd-entities-title,
.wd-buy-now-btn,
.single_add_to_cart_button,
.checkout-button,
#place_order,
.wd-action-btn > a,
.wd-side-hidden .widget-title {
	text-transform: none !important;
}

/* -------------------------------------------- Top utility bar rhythm */

.upn-topbar-item {
	font-size: 13px;
	line-height: 1.3;
}

.upn-topbar-item a {
	color: inherit;
	text-decoration: none;
}

.upn-topbar-item a:hover,
.upn-topbar-item a:focus-visible {
	text-decoration: underline;
}

/* --------------------------------- Legibility over hero photography */

.wp-block-wd-slider-item .wd-slide-bg::after,
.wp-block-wd-cover .wd-block-cover-img::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(11, 27, 51, .78) 0%, rgba(11, 27, 51, .55) 42%, rgba(11, 27, 51, .10) 100%);
}

.wp-block-wd-slider-item .wd-slide-container,
.wp-block-wd-cover .wp-block-wd-container {
	position: relative;
	z-index: 2;
}

/* ------------------------------------------------ Footer refinements */

.wd-footer .wp-block-wd-title.title {
	font-size: 16px;
	margin-bottom: 12px;
}

.wd-footer .wp-block-wd-paragraph {
	font-size: 14px;
	line-height: 1.6;
}

.upn-pay {
	font-size: 13px;
	color: var(--upn-muted);
}

/* ------------------------------------------------------------ Mobile */

@media (max-width: 768.98px) {
	.upnovo-trust {
		padding: 14px 16px;
	}

	.upnovo-process {
		padding: 16px;
	}

	.wd-product .upnovo-wa-btn--loop {
		font-size: 12px;
		padding: 8px 10px;
	}
}

/* --------------------------------------------------- Checkout tidying
 * The store sells only in Burkina Faso, so the country row is a constant.
 * The value is still posted; only the row is hidden.
 */

/* The country is fixed to Burkina Faso: shown, pre-picked, never a decision. */
#billing_country_field.upnovo-country-field .select2-container,
#billing_country_field.upnovo-country-field select {
	pointer-events: none;
	background-color: var(--upn-panel);
}

#shipping_country_field {
	display: none;
}

.woocommerce-checkout .form-row {
	margin-bottom: 16px;
}

.woocommerce-checkout label {
	font-size: 14px;
	font-weight: 500;
}

/* ------------------------------------------- Sticky toolbar on mobile */

.wd-toolbar {
	box-shadow: 0 -2px 14px rgba(27, 36, 55, .08);
}

/* --------------------------------------------------- Category strips */

.wd-cat .wd-entities-title {
	font-size: 14px;
	line-height: 1.35;
}

/* ------------------------------------------------ Product card rhythm */

.wd-product .wd-entities-title {
	font-size: 15px;
	line-height: 1.35;
}

.wd-product .wd-product-cats {
	font-size: 12px;
	color: var(--upn-muted);
}

@media (max-width: 480px) {
	.wd-product .wd-entities-title {
		font-size: 14px;
	}

	.wd-product .price {
		font-size: 14px;
	}
}

/* Catch every remaining control WoodMart title-cases. */
button,
input[type="submit"],
input[type="button"],
.searchsubmit,
.upnovo-openwa button,
.upnovo-openwa .upnovo-openwa-back,
.woocommerce-form-login button,
.woocommerce-MyAccount-navigation a {
	text-transform: none !important;
}

/* ------------------------------------------------- Mobile hero widths
 * Fixed pixel widths set for the desktop bento would overflow a phone.
 */

@media (max-width: 768.98px) {
	.wp-block-wd-slider-item .wp-block-wd-title,
	.wp-block-wd-slider-item .wp-block-wd-paragraph,
	.wp-block-wd-cover .wp-block-wd-title,
	.wp-block-wd-cover .wp-block-wd-paragraph,
	.wp-block-wd-section .wp-block-wd-title,
	.wp-block-wd-section .wp-block-wd-paragraph {
		--wd-width: 100% !important;
		max-width: 100%;
	}

	.wp-block-wd-slider-item .wd-slide-container {
		padding-right: 18px;
		padding-left: 18px;
	}

	.wd-toolbar .wd-toolbar-label {
		font-size: 10px;
		letter-spacing: 0;
	}
}

/* No page may scroll sideways on a phone. */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

/* On a phone the text sits over the middle of the photo, so the directional
 * gradient is replaced by an even scrim.
 */
@media (max-width: 768.98px) {
	.wp-block-wd-slider-item .wd-slide-bg::after,
	.wp-block-wd-cover .wd-block-cover-img::after {
		background: rgba(11, 27, 51, .58);
	}
}