/*
Theme Name: Waraa Living
Theme URI: https://waraaliving.com
Author: Waraa Living
Author URI: https://waraaliving.com
Description: Custom WordPress + WooCommerce theme for Waraa Living, a solid wood furniture & home decor e-commerce store. Built from scratch: ACF-powered homepage banner, site-wide promo bar, category hover image gallery, mega menu, and full WooCommerce template set.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Tested up to: 6.6
Text Domain: waraaliving
Requires Plugins: woocommerce
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

WooCommerce 8.0
*/

/* Base design tokens. Component styles live in assets/css/*.css (see inc/enqueue.php). */
:root {
	/* Brighter than the original #faf8f5 (a noticeably warm/dull cream)
	   but not identical to --wl-color-surface's pure #ffffff: this same
	   token also drives hover/active-state highlights on elements that
	   already sit on a white surface (search results, sort options,
	   filter pills, cart-drawer qty buttons, ...) — literally matching
	   surface white would make every one of those invisible. This is
	   close enough to read as "bright white" while staying just
	   perceptible as a highlight against true white. */
	--wl-color-bg: #fdfdfb;
	--wl-color-surface: #ffffff;
	--wl-color-text: #1c1a17;
	--wl-color-text-muted: #6b6459;
	--wl-color-border: #e7e2da;
	--wl-color-accent: #7a5c3e;
	--wl-color-accent-dark: #4d3826;
	--wl-color-sale: #b3492f;
	--wl-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wl-font-heading: Georgia, "Times New Roman", serif;
	--wl-container: 1320px;
	--wl-radius: 4px;
	/* Visibly rounded photo corners — used on every real product/content
	   image (product cards, category tiles, hero/feature media), same
	   treatment "Shop by Room" originated on .wl-worlds__card-media.
	   Deliberately larger than --wl-radius, which stays the site's
	   subtle default for buttons, inputs and small UI chrome. */
	--wl-radius-image: 14px;
}

* { box-sizing: border-box; }

/* Defensive safety net: no single element found in this codebase should
   force horizontal scroll (no fixed px widths beyond viewport, images
   already max-width:100%), but a stray overflow anywhere in WooCommerce's
   own markup would otherwise let the whole page scroll sideways on
   mobile — hiding it here means content can only ever be clipped at its
   own boundary, never drag the full page into a horizontal scrollbar. */
html { overflow-x: hidden; }

body {
	margin: 0;
	background: var(--wl-color-bg);
	color: var(--wl-color-text);
	font-family: var(--wl-font-body);
	font-size: 16px;
	line-height: 1.55;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.wl-container {
	max-width: var(--wl-container);
	margin: 0 auto;
	padding: 0 20px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #000;
	color: #fff;
	padding: 10px 16px;
	z-index: 10000;
}
.skip-link:focus { left: 10px; top: 10px; }