:root {
	--wd-cat-brd-radius: 50%;
	--wd-text-font: "Work Sans", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 15px;
	--wd-title-font: "Urbanist", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Urbanist", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 700;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: var(--wd-text-font);
	--wd-widget-title-font: "Urbanist", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Urbanist", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 14px;
	--wd-brd-radius: 10px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(54,123,86);
	--wd-alternative-color: rgb(245,200,66);
	--btn-default-transform: none;
	--btn-default-bgcolor: rgb(24,108,66);
	--btn-default-bgcolor-hover: rgb(21,42,14);
	--btn-accented-font-family: "Sora", Arial, Helvetica, sans-serif;
	--btn-accented-transform: none;
	--btn-accented-font-size: 14px;
	--btn-accented-bgcolor: rgb(24,108,66);
	--btn-accented-bgcolor-hover: rgb(21,42,14);
	--btn-transform: none;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(245,154,87);
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 480px;
	--wd-popup-padding: 0px;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(255,255,255);
	--wd-bordered-bg:rgb(255,255,255);
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center top;
}
.wd-footer {
	background-color: rgb(15,15,15);
	background-image: none;
}
html .wd-nav-mobile > li > a {
	text-transform: capitalize;
}
.whb-top-bar .wd-nav.wd-nav-secondary > li > a {
	font-family: "Work Sans", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 13px;
}
html .post.wd-post:not(.blog-design-small) .wd-entities-title {
	font-size: 18px;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-image: url(http://onenationafro.co.uk/wp-content/uploads/2023/04/wd-furniture-background.webp);
	background-repeat: repeat;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-image: url(http://onenationafro.co.uk/wp-content/uploads/2023/04/wd-furniture-background.webp);
	background-repeat: repeat;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-image: url(http://onenationafro.co.uk/wp-content/uploads/2023/04/wd-furniture-background.webp);
	background-repeat: repeat;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-image: url(http://onenationafro.co.uk/wp-content/uploads/2023/04/wd-furniture-background.webp);
	background-repeat: repeat;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-image: url(http://onenationafro.co.uk/wp-content/uploads/2023/04/wd-furniture-background.webp);
	background-repeat: repeat;
}
html .btn.wd-buy-now-btn {
	color: rgb(255,255,255);
	background: rgba(16,16,16,0.9);
}
html .btn.wd-buy-now-btn:hover {
	color: rgb(255,255,255);
	background: rgb(51,51,51);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-color: rgb(15,15,15);
	--wd-form-placeholder-color: rgb(119,119,119)7;
	--wd-form-bg: rgb(255,255,255);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 20px;
}

@media (max-width: 1024px) {
	.woocommerce-product-gallery {
		--wd-gallery-gap: 20px;
	}

}

@media (max-width: 768.98px) {
	.woocommerce-product-gallery {
		--wd-gallery-gap: 10px;
	}

}
:root{
--wd-container-w: 1400px;
--wd-form-brd-radius: 5px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

@media (min-width: 1400px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(174,182,161);
}

.elementor-3047 .elementor-element.elementor-element-1ed645a, .elementor-element.elementor-element-c0a2baa {
	display: none !important;
}

@media (min-width: 769px) {
    .elementor-3047 .elementor-element.elementor-element-e952f75 {
			width: 100% !important;
	}

/* =========================================================================
   ONE NATION — WoodMart Custom CSS
   =========================================================================
   WHERE TO PASTE THIS:
   WordPress admin → WoodMart (theme settings) → Custom CSS tab → paste
   this whole file → Save.

   Order note: the Login/Register section is placed FIRST in this file on
   purpose, in case WoodMart's Custom CSS field has any length limit that
   silently truncates long input — this way the most actively-worked-on
   section survives even if that turns out to be happening.
   ========================================================================= */

/* =========================================================================
   WOODMART NATIVE LOGIN / REGISTER PAGE
   Targets .wd-registration-page and its real markup, as rendered when
   a visitor isn't logged in and lands on /my-account/.
   ========================================================================= */
.wd-registration-page { font-family: "DM Sans", sans-serif !important; }
.wd-registration-page .wd-login-title {
	font-family: "Sora", sans-serif !important; font-size: 1.5rem !important; color: #333 !important;
	margin-bottom: 1.5rem !important; text-transform: none !important;
}

/* Single centered column instead of two side-by-side panels. WoodMart's
   markup still has 3 columns (col-login, col-register, col-register-text)
   and still toggles which two show via its own .active-register class —
   we're not fighting that, just laying them out narrower/stacked and
   turning the "col-register-text" panel into a minimal one-line prompt
   instead of a second big card. */
/* Centering here uses flexbox on the actual wrapping element rather than
   margin:auto on #customer_login alone — margin-based centering can get
   thrown off if the page's own container has any width quirks upstream
   (e.g. an unused sidebar column reserving space), which is what was
   pushing the card off-center rather than truly centered on the page. */
.wd-registration-page.wd-register-tabs,
.wd-registration-page {
	display: flex !important; justify-content: center !important; width: 100% !important;
}
/* display:block on the container instead of fighting over flex vs grid —
   block-level stacking is the most fundamental layout mode in CSS and
   doesn't depend on winning a flex-direction or grid-template-columns
   property fight (a previous attempt using those lost regardless of
   !important + high specificity, most likely because the real layout
   mechanism here turned out to be flexbox despite "grid" being in the
   class name — grid-column would be silently ignored in that case).
   Every selector variant below stacks the real classes/ID confirmed
   from your actual page HTML, scoped only to this exact element. */
html body .wd-registration-page.wd-register-tabs #customer_login.wd-grid-f-col,
.wd-registration-page.wd-register-tabs #customer_login.wd-grid-f-col,
.wd-registration-page #customer_login.wd-grid-f-col,
#customer_login.wd-grid-f-col {
	display: block !important;
	max-width: 480px !important; width: 100% !important; margin: 0 !important;
}
/* Each column is a normal block-level child now — no grid-column or flex
   property needed at all, which is exactly why this is more reliable:
   there's no competing layout property left to lose a specificity fight
   over. Simple block children of a block parent just stack top to
   bottom on their own. */
/* Only .col-register-text is forced to display:block — it's ALWAYS
   visible, never toggled. .col-login and .col-register are deliberately
   left alone here: WoodMart shows/hides whichever one is active by
   toggling display:none/block on them directly, and forcing
   display:block on both (as a previous version of this file did) broke
   that toggle, showing both forms permanently instead of one at a time. */
.wd-registration-page .wd-col.col-register-text {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}
.wd-registration-page .wd-col.col-login,
.wd-registration-page .wd-col.col-register {
	width: 100% !important;
	max-width: 100% !important;
}
.wd-registration-page .wd-col.col-login,
.wd-registration-page .wd-col.col-register {
	background: #fff !important; border: 1px solid #E3E3DD !important;
	/* Full rounding on all 4 corners on each card independently, with a
	   visible gap below (margin-bottom) before the CTA panel — simpler
	   and more robust than trying to make two cards look seamlessly
	   joined, which only looks right with zero gap between them. */
	border-radius: 1rem !important;
	padding: 2rem !important; margin-bottom: 1rem !important;
	/* Contains any floated children (older WooCommerce markup floats the
	   "Remember me" checkbox and "Lost your password?" link left/right)
	   so they render inside the card instead of visually escaping it. */
	overflow: hidden !important;
}
/* The promo/switch panel — shrunk down to a single-line CTA under the form */
.wd-registration-page .wd-col.col-register-text {
	background: #F9F9F6 !important; border: 1px solid #E3E3DD !important;
	border-radius: 1rem !important; padding: 1.25rem 2rem !important; text-align: center !important;
}
/* Hide the big heading, divider, and long paragraph — replaced with one
   short line via ::before below, which swaps wording depending on
   whether the login or register form is currently showing. This also
   sidesteps a WoodMart bug where that heading's text was mislabeled
   (stuck on the wrong word) — hiding it removes the bug along with it. */
.wd-registration-page .wd-col.col-register-text .wd-login-title,
.wd-registration-page .wd-col.col-register-text .wd-login-divider,
.wd-registration-page .wd-col.col-register-text .registration-info {
	display: none !important;
}
.wd-registration-page .wd-col.col-register-text::before {
	content: "New to One Nation?";
	display: block !important; font-size: .9375rem !important; color: #666 !important;
	margin-bottom: .85rem !important; font-family: "DM Sans", sans-serif !important;
}
/* When the register form is the one showing, flip the prompt to invite
   logging in instead. Covering a couple of plausible spots for WoodMart's
   .active-register class since it isn't confirmed which element carries
   it — if the wording doesn't flip correctly, that'll tell us exactly
   where to look next. */
.active-register .wd-registration-page .wd-col.col-register-text::before,
.wd-registration-page.active-register .wd-col.col-register-text::before,
#customer_login.active-register .wd-col.col-register-text::before {
	content: "Already have an account?";
}
.wd-registration-page #customer_login > div:not(:first-child):last-child {
	border-inline-start: none !important;
}

/* Form fields */
.wd-registration-page .form-row label {
	font-family: "Sora", sans-serif !important; font-size: .8125rem !important; font-weight: 600 !important;
	color: #666 !important; margin-bottom: .375rem !important; display: block !important;
}
.wd-registration-page .form-row .required {
	color: #EF4343 !important;
}
.wd-registration-page input.input-text,
.wd-registration-page input[type="email"],
.wd-registration-page input[type="text"],
.wd-registration-page input[type="password"] {
	width: 100% !important; border: 1px solid #E3E3DD !important; border-radius: .5rem !important;
	padding: .75rem 1rem !important; font-size: .9375rem !important; background: #F9F9F6 !important;
	color: #333 !important;
}
.wd-registration-page input.input-text:focus,
.wd-registration-page input[type="email"]:focus,
.wd-registration-page input[type="text"]:focus,
.wd-registration-page input[type="password"]:focus {
	outline: none !important; border-color: #186D42 !important; box-shadow: 0 0 0 2px rgba(24,109,66,.15) !important;
	background: #fff !important;
}
.wd-registration-page .password-input { position: relative !important; display: block !important; }
.wd-registration-page .show-password-input {
	position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important;
	background: transparent !important; border: none !important;
}

/* Buttons */
.wd-registration-page button.woocommerce-form-login__submit,
.wd-registration-page button.woocommerce-Button.woocommerce-button.button[name="register"] {
	width: 100% !important; background: #186D42 !important; color: #fff !important; border: none !important;
	border-radius: .5rem !important; padding: .9rem 1.5rem !important; font-size: 1rem !important;
	font-family: "Sora", sans-serif !important; font-weight: 700 !important; text-transform: none !important;
	box-shadow: none !important;
}
.wd-registration-page button.woocommerce-form-login__submit:hover,
.wd-registration-page button.woocommerce-Button.woocommerce-button.button[name="register"]:hover {
	background: #125433 !important; color: #fff !important;
}
.wd-registration-page a.wd-switch-to-register {
	display: inline-flex !important; background: transparent !important; color: #186D42 !important;
	border: 2px solid #186D42 !important; border-radius: 999px !important; padding: .5rem 1.5rem !important;
	font-family: "Sora", sans-serif !important; font-size: .875rem !important;
	font-weight: 700 !important; text-transform: none !important; text-decoration: none !important;
}
.wd-registration-page a.wd-switch-to-register:hover {
	background: rgba(24,109,66,.08) !important; color: #186D42 !important; text-decoration: none !important;
}

.wd-registration-page .login-form-footer {
	display: flex !important; align-items: center !important; justify-content: space-between !important;
	flex-wrap: wrap !important; gap: .75rem !important; margin-top: 1rem !important; float: none !important;
	width: 100% !important; clear: both !important;
}
.wd-registration-page a.lost_password {
	color: #186D42 !important; font-size: .875rem !important; font-weight: 600 !important; text-decoration: none !important;
	float: none !important; clear: none !important;
}
.wd-registration-page a.lost_password:hover {
	text-decoration: underline !important;
}
.wd-registration-page .woocommerce-form-login__rememberme {
	font-size: .875rem !important; color: #666 !important; display: flex !important; align-items: center !important; gap: .4rem !important;
	float: none !important; clear: none !important;
}
/* Defensive fallback in case "Remember me" / "Lost your password?" aren't
   wrapped in .login-form-footer at all in the live markup (older
   WooCommerce templates sometimes float them as direct siblings instead) —
   this neutralises floating on any p/label/a directly inside the login
   form so nothing can escape the card regardless of exact structure. */
.wd-registration-page .wd-col.col-login form.login > p,
.wd-registration-page .wd-col.col-login form.login > label {
	float: none !important; clear: both !important; width: 100% !important;
}

/* =========================================================================
   WOODMART NATIVE "MY ACCOUNT" DASHBOARD
   woocommerce-MyAccount-*) since this site's My Account page renders
   through WoodMart's built-in account template, not the [one_nation_account]
   shortcode. Same design language, !important-hardened for the same
   reason as everything else in this file (WoodMart's own styles otherwise
   win specificity ties).
   ========================================================================= */
.woocommerce-MyAccount-title {
	font-family: "Sora", sans-serif !important; text-transform: none !important;
	font-size: 1.375rem !important; color: #333 !important; font-weight: 700 !important;
	border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 1.25rem !important;
}
.wd-my-account-sidebar {
	background: #fff !important; border: 1px solid #E3E3DD !important; border-radius: .75rem !important;
	padding: 1.25rem !important;
	/* WoodMart's grid layout stretches both the sidebar and content
	   columns to match whichever is taller by default (standard CSS
	   Grid/Flexbox behaviour) — that's what was leaving a big empty gap
	   under the nav links. This makes the sidebar only as tall as its
	   own content instead. Covering both the parent's alignment and the
	   child's own align-self since it's not certain which one WoodMart's
	   own CSS is more specific about. */
	align-self: start !important;
	height: fit-content !important;
}
.wd-my-account-wrapper {
	align-items: start !important;
}
/* Hide "Downloads" everywhere it appears — the my-account page sidebar,
   WoodMart's icon-grid card, AND the header account dropdown menu (that
   last one appears site-wide, not just on the account page — the two
   rules below were scoped to body.woocommerce-account, which is only
   present on the actual My Account page, so they silently never matched
   in the header dropdown). Since this store has no downloadable products,
   there's never anything there to show a customer regardless of which
   menu it's sitting in. */
.woocommerce-MyAccount-navigation-link--downloads {
	display: none !important;
}
.wd-my-account-links .wd-my-acc-downloads {
	display: none !important;
}
/* Structure-agnostic fallback for the header dropdown (and anywhere else
   this might appear): targets any link that actually points at the real
   WooCommerce "downloads" account endpoint, regardless of what menu/
   dropdown/class wraps it. :has() is supported in all current major
   browsers (Chrome, Edge, Safari, Firefox 121+). */
li:has(> a[href*="/my-account/downloads"]) {
	display: none !important;
}
a[href*="/my-account/downloads"] {
	display: none !important;
}
.woocommerce-MyAccount-navigation ul li a {
	font-family: "Sora", sans-serif !important; font-weight: 600 !important; font-size: .9375rem !important;
	color: #333 !important; border-radius: .5rem !important; padding: .65rem .85rem !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
	background: rgba(24,109,66,.06) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	background: rgba(24,109,66,.1) !important; color: #186D42 !important;
}

/* WoodMart's bonus icon-grid dashboard links (Orders/Downloads/Addresses/etc.) */
.wd-my-account-links {
	margin-top: 1.5rem !important;
}
.wd-my-account-links > li {
	background: #fff !important; border: 1px solid #E3E3DD !important; border-radius: .75rem !important;
	transition: box-shadow .2s, transform .2s !important;
}
.wd-my-account-links > li:hover {
	box-shadow: 0 10px 25px rgba(0,0,0,.08) !important; transform: translateY(-2px) !important;
}
.wd-my-account-links > li > a {
	color: #333 !important;
}
.wd-my-account-links .nav-link-text {
	font-family: "Sora", sans-serif !important; font-weight: 600 !important; font-size: .875rem !important;
	text-transform: none !important;
}
.wd-my-account-links > li .wd-nav-icon {
	color: #186D42 !important;
}
.wd-my-account-links > li:hover .wd-nav-icon {
	color: #F5C842 !important;
}

/* Notices (e.g. "Confirm email address") */
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message {
	background: rgba(24,109,66,.06) !important; border-left: 4px solid #186D42 !important;
	color: #333 !important; border-radius: .5rem !important; padding: 1rem 1.25rem !important;
	list-style: none !important;
}
.woocommerce-notices-wrapper a {
	color: #186D42 !important; font-weight: 600 !important;
}

/* Orders table */
table.woocommerce-orders-table th {
	font-family: "Sora", sans-serif !important; text-transform: none !important; font-weight: 600 !important;
	font-size: .8125rem !important; color: #666 !important;
}
table.woocommerce-orders-table td {
	font-size: .9375rem !important;
}
td.woocommerce-orders-table__cell-order-actions a.button {
	background: #186D42 !important; color: #fff !important; text-transform: none !important;
	font-family: "Sora", sans-serif !important; font-weight: 600 !important; border-radius: .5rem !important;
}
td.woocommerce-orders-table__cell-order-actions a.button:hover {
	background: #125433 !important;
}
td.woocommerce-orders-table__cell-order-actions a.button.cancel {
	background: transparent !important; color: #EF4343 !important; border: 1px solid #EF4343 !important;
}
td.woocommerce-orders-table__cell-order-actions a.button.cancel:hover {
	background: rgba(239,67,67,.06) !important;
}

/* =========================================================================
   WOODMART NATIVE WISHLIST PAGE (/wishlist/)
   =========================================================================
   This is a standalone page (not under /my-account/), built with
   WoodMart's own "Wishlist" Elementor widget — confirmed from real
   DevTools output. It reuses the exact same My Account sidebar/nav
   markup targeted above (which is why removing the body.woocommerce-account
   requirement from those rules fixes this page's sidebar automatically),
   plus its own empty-state classes handled here.
   ========================================================================= */
.wd-empty-block.wd-empty-wishlist {
	text-align: center !important;
	background: #fff !important; border: 1px solid #E3E3DD !important;
	border-radius: .75rem !important; padding: 3rem 2rem !important;
}
.wd-empty-block-title {
	font-family: "Sora", sans-serif !important; font-size: 1.5rem !important;
	color: #333 !important; margin-bottom: .75rem !important; text-transform: none !important;
}
.wd-empty-block-text {
	color: #666 !important; font-size: .9375rem !important; margin-bottom: 1.5rem !important;
	max-width: 32rem !important; margin-left: auto !important; margin-right: auto !important;
}
.wd-empty-block-btn {
	background: #186D42 !important; color: #fff !important; border: none !important;
	border-radius: .5rem !important; padding: .85rem 2rem !important;
	font-family: "Sora", sans-serif !important; font-weight: 600 !important;
	text-decoration: none !important; text-transform: none !important;
	display: inline-block !important;
}
.wd-empty-block-btn:hover {
	background: #125433 !important; color: #fff !important;
}