/* ==========================================================================
   Wood Decor Home — matches the approved design (artifact C2Q6reTVzTSVvUe9Qmf4qA)
   ========================================================================== */

:root {
	--wood: #8B5E3C; --wood-dark: #5C3B22; --wood-light: #C49A6C;
	--cream: #F7F1E8; --ink: #2B2118; --muted: #7A6A5C;
}
body { font-family: 'Inter', sans-serif; color: var(--ink); background: var(--cream); }
h1, h2, h3, .brand { font-family: 'Playfair Display', serif; }
a { color: var(--wood); }
.btn-wood { background: var(--wood); border-color: var(--wood); color: #fff; }
.btn-wood:hover, .btn-wood:focus-visible { background: var(--wood-dark); border-color: var(--wood-dark); color: #fff; }
.btn-outline-wood { border-color: #fff; color: #fff; }
.btn-outline-wood:hover { background: #fff; color: var(--ink); }
.text-wood { color: var(--wood) !important; }
.bg-ink { background: var(--ink); }

/* Navbar */
.navbar { transition: background .3s, box-shadow .3s; }
.navbar.scrolled { background: rgba(43, 33, 24, .95); box-shadow: 0 2px 12px rgba(0, 0, 0, .2); }
.brand { font-size: 1.5rem; color: #fff !important; letter-spacing: .5px; }
.brand span { color: var(--wood-light); }

/* Hero */
.hero {
	min-height: 100vh; position: relative; color: #fff; display: flex; align-items: center;
	background: linear-gradient(rgba(30, 20, 12, var(--hero-overlay, .72)), rgba(30, 20, 12, var(--hero-overlay, .72))),
		var(--hero-img) center / cover no-repeat, #3b2a1d;
}
.hero .eyebrow { letter-spacing: 4px; text-transform: uppercase; color: var(--wood-light); font-weight: 600; font-size: .85rem; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.1; }
.notify .form-control { border-radius: 50px 0 0 50px; padding: .8rem 1.25rem; border: 0; }
.notify .btn { border-radius: 0 50px 50px 0; padding: .8rem 1.5rem; }

/* Section headings */
.section { padding: 90px 0; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.divider { width: 60px; height: 3px; background: var(--wood); margin: 14px auto 0; }

/* Category cards */
.cat-card { border: 0; border-radius: 16px; overflow: hidden; background: #fff;
	box-shadow: 0 6px 24px rgba(43, 33, 24, .06); transition: transform .25s, box-shadow .25s; height: 100%; }
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(43, 33, 24, .14); }
.cat-card .img-wrap { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cat-card:hover img { transform: scale(1.06); }
.cat-card .count { position: absolute; top: 12px; right: 12px; background: rgba(43, 33, 24, .85);
	color: #fff; font-size: .75rem; padding: 4px 10px; border-radius: 50px; }
.cat-card .num { position: absolute; bottom: 10px; left: 14px; color: #fff; font-family: 'Playfair Display', serif;
	font-size: 2rem; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.chip { display: inline-block; background: var(--cream); color: var(--wood-dark); border: 1px solid #EADBC8;
	font-size: .78rem; padding: 4px 10px; border-radius: 50px; margin: 0 6px 6px 0; }
.chip-more { cursor: pointer; background: transparent; border: 1px dashed var(--wood-light); color: var(--wood); }

/* Features */
.feature i { font-size: 2rem; color: var(--wood); }
.feature { background: #fff; border-radius: 16px; padding: 30px 24px; height: 100%; box-shadow: 0 6px 24px rgba(43, 33, 24, .05); }

/* Process */
.step { position: relative; text-align: center; }
.step .circle { width: 64px; height: 64px; border-radius: 50%; background: var(--wood); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 14px; }

/* Contact */
.contact-box { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 6px 24px rgba(43, 33, 24, .05); height: 100%; }
.contact-box i { font-size: 1.6rem; color: var(--wood); }

footer a { color: #cdbfae; text-decoration: none; }
footer a:hover { color: #fff; }
.social a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, .2); margin-right: 8px; }
.wa-float { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #25D366;
	color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; z-index: 1030;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.wa-float:hover { color: #fff; transform: scale(1.06); }

/* ==========================================================================
   WordPress / WooCommerce additions (not in the static design)
   ========================================================================== */

.skip-link { position: absolute; z-index: 2000; left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; border-radius: 6px; }
.wdh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.admin-bar .navbar.fixed-top { top: 32px; }
@media (max-width: 782px) { .admin-bar .navbar.fixed-top { top: 46px; } }

/* Category card without a photo yet: warm wood gradient with the logo mark. */
.cat-card .img-wrap.is-empty {
	background: linear-gradient(135deg, #C49A6C 0%, #8B5E3C 60%, #5C3B22 100%);
}
.cat-card .img-wrap.is-empty::before {
	content: ""; position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; opacity: .35;
	background: url("../images/logo-mark.svg") center / contain no-repeat;
}
.cat-card .card-title a { color: inherit; text-decoration: none; }
.cat-card .card-title a:hover { color: var(--wood); }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--wood-light); color: var(--wood); }
button.chip { line-height: inherit; }

/* Mobile menu needs a background while the page is at the top. */
@media (max-width: 991.98px) {
	.navbar.menu-open { background: rgba(43, 33, 24, .97); }
}

/* Inner pages sit under the fixed navbar. */
.page-main { padding-top: 150px; min-height: 70vh; }
.entry-content { max-width: 860px; margin-inline: auto; line-height: 1.75; }
.page-thumb img { width: 100%; height: auto; border-radius: 16px; }
.footer-menu li { margin-bottom: .5rem; }

/* WooCommerce buttons and notices in the brand colours. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--wood); color: #fff; border-radius: 50px; padding: .6rem 1.4rem; font-weight: 500;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: var(--wood-dark); color: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--ink); }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--wood); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--wood); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--wood); }
.woocommerce .woocommerce-breadcrumb a { color: var(--wood); }
.woocommerce-products-header__title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.6rem); text-align: center; }