/**
 * Naughty Wellness — Enhancement Styles
 * Covers: Announcement Strip, WhatsApp float, Product Strip, Responsiveness, Landmark field
 *
 * @package NaughtyWellness
 * @version 2.2.0
 */

/* ============================================================
   0. ANNOUNCEMENT STRIP (above navbar)
============================================================ */

/*
 * Strip variables — change the height here if you need more room.
 * JS reads --nw-strip-h to push the fixed header down correctly.
 */
:root {
	--nw-announce-h: 36px;
}

#nw-announcement-strip {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;                            /* above header (z-index:1000) */
	height: var(--nw-announce-h);
	background: linear-gradient(
		90deg,
		var(--clr-surface, #0f0f23) 0%,
		#1a1530 50%,
		var(--clr-surface, #0f0f23) 100%
	);
	border-bottom: 1px solid var(--clr-border, rgba(255,255,255,0.08));
	overflow: hidden;
	display: flex;
	align-items: center;
}

/* Smooth fade edges */
#nw-announcement-strip::before,
#nw-announcement-strip::after {
	content: '';
	position: absolute;
	top: 0;
	width: 80px;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}
#nw-announcement-strip::before {
	left: 0;
	background: linear-gradient( to right, var(--clr-surface, #0f0f23), transparent );
}
#nw-announcement-strip::after {
	right: 0;
	background: linear-gradient( to left, var(--clr-surface, #0f0f23), transparent );
}

.nw-announce-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: nwAnnounceScroll 30s linear infinite;
	will-change: transform;
}

@keyframes nwAnnounceScroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Pause on hover/focus for accessibility */
#nw-announcement-strip:hover .nw-announce-track,
#nw-announcement-strip:focus-within .nw-announce-track {
	animation-play-state: paused;
}

.nw-announce-item {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--clr-text-muted, rgba(255,255,255,0.75));
	white-space: nowrap;
	padding: 0 var(--space-md, 16px);
	flex-shrink: 0;
}

.nw-announce-sep {
	color: var(--clr-primary, #c9a96e);
	font-size: 1rem;
	font-weight: 700;
	flex-shrink: 0;
	opacity: 0.6;
}

/* Reduced-motion: show as static scrollable row */
@media ( prefers-reduced-motion: reduce ) {
	.nw-announce-track {
		animation: none;
	}
	#nw-announcement-strip {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Mobile: slightly smaller text, same height */
@media ( max-width: 480px ) {
	:root {
		--nw-announce-h: 32px;
	}
	.nw-announce-item {
		font-size: 0.65rem;
		padding: 0 12px;
	}
}

/*
 * Push fixed #site-header down by the strip height so the strip
 * is never overlapped. JS also sets body padding dynamically.
 */
#site-header {
	top: var(--nw-announce-h) !important;
}

/* Body needs top padding = strip height + header height (72px) */
body {
	padding-top: calc( var(--nw-announce-h) + 72px ) !important;
}

/* When WordPress admin bar is present, offset further */
.admin-bar #nw-announcement-strip {
	top: 32px;
}
.admin-bar #site-header {
	top: calc( 32px + var(--nw-announce-h) ) !important;
}
.admin-bar body {
	padding-top: calc( 32px + var(--nw-announce-h) + 72px ) !important;
}

/* Admin bar collapses to 46px at mobile */
@media ( max-width: 782px ) {
	.admin-bar #nw-announcement-strip {
		top: 46px;
	}
	.admin-bar #site-header {
		top: calc( 46px + var(--nw-announce-h) ) !important;
	}
	.admin-bar body {
		padding-top: calc( 46px + var(--nw-announce-h) + 72px ) !important;
	}
}


#nw-whatsapp-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
	text-decoration: none;
	opacity: 0;
	transform: translateY(16px) scale(0.9);
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.2s ease;
	pointer-events: none;
}

#nw-whatsapp-btn.nw-wa-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

#nw-whatsapp-btn:hover,
#nw-whatsapp-btn:focus-visible {
	background: #1ebe5d;
	box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
	transform: translateY(-2px) scale(1.06);
	outline: 3px solid rgba(37, 211, 102, 0.5);
	outline-offset: 3px;
}

#nw-whatsapp-btn svg {
	width: 28px;
	height: 28px;
	fill: #fff;
	flex-shrink: 0;
}

/* Tooltip label */
#nw-whatsapp-btn::after {
	content: attr(data-label);
	position: absolute;
	right: 64px;
	background: #1a1a2e;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

#nw-whatsapp-btn:hover::after,
#nw-whatsapp-btn:focus-visible::after {
	opacity: 1;
}

@media ( max-width: 480px ) {
	#nw-whatsapp-btn {
		bottom: 16px;
		right: 16px;
		width: 50px;
		height: 50px;
	}
	#nw-whatsapp-btn svg {
		width: 24px;
		height: 24px;
	}
	#nw-whatsapp-btn::after {
		display: none;
	}
}


/* ============================================================
   2. PRODUCT STRIP CAROUSEL
============================================================ */
#nw-product-strip {
	width: 100%;
	overflow: hidden;
	background: var(--clr-surface, #0f0f23);
	border-bottom: 1px solid var(--clr-border, rgba(255,255,255,0.08));
	padding: 10px 0;
	position: relative;
	z-index: 90;
}

/* Fade edges */
#nw-product-strip::before,
#nw-product-strip::after {
	content: '';
	position: absolute;
	top: 0;
	width: 80px;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}
#nw-product-strip::before {
	left: 0;
	background: linear-gradient( to right, var(--clr-surface, #0f0f23), transparent );
}
#nw-product-strip::after {
	right: 0;
	background: linear-gradient( to left, var(--clr-surface, #0f0f23), transparent );
}

.nw-strip-track {
	display: flex;
	align-items: center;
	gap: 0;
	width: max-content;
	animation: nwStripScroll 35s linear infinite;
	will-change: transform;
}

@keyframes nwStripScroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.nw-strip-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 24px;
	border-right: 1px solid var(--clr-border, rgba(255,255,255,0.08));
	white-space: nowrap;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--clr-text-muted, rgba(255,255,255,0.7));
	transition: color 0.2s ease;
}

.nw-strip-item:hover {
	color: var(--clr-primary, #c9a96e);
}

.nw-strip-item img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--clr-border, rgba(255,255,255,0.12));
	background: var(--clr-bg, #0a0a1a);
	flex-shrink: 0;
}

.nw-strip-item-name {
	font-size: 0.8rem;
	font-weight: 500;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nw-strip-item-price {
	font-size: 0.75rem;
	color: var(--clr-primary, #c9a96e);
	font-weight: 600;
}

@media ( prefers-reduced-motion: reduce ) {
	.nw-strip-track {
		animation: none;
	}
	#nw-product-strip {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/* ============================================================
   3. RESPONSIVENESS IMPROVEMENTS
============================================================ */

/* — Global box-sizing guard — */
*, *::before, *::after {
	box-sizing: border-box;
}

/* — Prevent horizontal overflow site-wide — */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* — Fluid images — */
img {
	max-width: 100%;
	height: auto;
}

/* — Container fluid cap — */
.container {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 4vw, 40px);
	padding-right: clamp(16px, 4vw, 40px);
}

/* — Navbar fluid — */
.header-inner {
	width: 100%;
}

.nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 12px;
	min-height: 64px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* — Hero typography fluid scaling — */
h1, .hero-title {
	font-size: clamp(1.8rem, 5vw, 3.5rem);
	line-height: 1.15;
}

h2 {
	font-size: clamp(1.4rem, 3.5vw, 2.5rem);
}

h3 {
	font-size: clamp(1.1rem, 2.5vw, 1.75rem);
}

/* — Product grid — */
.products-grid,
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: clamp(16px, 2vw, 28px);
}

/* — Single product layout — */
.single-product-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 60px);
	align-items: start;
}

@media ( max-width: 768px ) {
	.single-product-layout {
		grid-template-columns: 1fr;
	}
}

/* — Contact page grid — */
.contact-page-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

@media ( max-width: 768px ) {
	.contact-page-grid {
		grid-template-columns: 1fr;
	}
}

/* — Form row two-col — */
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media ( max-width: 560px ) {
	.form-row {
		grid-template-columns: 1fr;
	}
}

/* — Footer grid — */
.footer-grid {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr);
	gap: clamp(24px, 3vw, 48px);
}

@media ( max-width: 900px ) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 560px ) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* — Carousel / Swiper overflow guard — */
.hero-carousel,
.swiper,
.swiper-container {
	overflow: hidden;
	width: 100%;
	min-width: 0;
}

/* — Modal full-screen on small — */
@media ( max-width: 560px ) {
	.modal {
		width: 100%;
		max-width: 100%;
		min-height: 100dvh;
		border-radius: 0;
		margin: 0;
	}
	.modal-overlay {
		align-items: flex-end;
	}
}

/* — Product gallery thumbs wrap — */
.product-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.product-gallery-thumbs .thumb {
	flex-shrink: 0;
	width: clamp(52px, 10vw, 72px);
	height: clamp(52px, 10vw, 72px);
}

/* — Prevent fixed-width elements from overflowing — */
.btn,
button,
input,
textarea,
select {
	max-width: 100%;
}

/* — 320px micro breakpoint safety — */
@media ( max-width: 360px ) {
	.nav-links {
		display: none;
	}
	.site-logo {
		font-size: clamp(1rem, 4vw, 1.4rem);
	}
	.btn-sm {
		display: none;
	}
}


/* ============================================================
   4. LANDMARK FIELD STYLING
============================================================ */
.form-group .form-label-landmark::after {
	content: ' (optional)';
	font-size: 0.75em;
	opacity: 0.65;
	font-weight: 400;
}

/* Keeps landmark field visually consistent */
input[name="nw_landmark"] {
	width: 100%;
}

/* ============================================================
   5. SHOP PAGE — WOOCOMMERCE DISPLAY FIXES
   Ensures products render correctly in the archive grid
   when WooCommerce default styles are disabled.
============================================================ */

/* ── WooCommerce loop wrapper → use our products-grid ── */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min(260px, 100%), 1fr ) );
	gap: clamp( 16px, 2vw, 28px );
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	margin: 0;
	padding: 0;
}

/* ── WooCommerce native product item — styled as our product-card ── */
.woocommerce ul.products li.product a {
	text-decoration: none;
	color: inherit;
}

/* ── Product image wrapper ── */
.woocommerce ul.products li.product a img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: var( --radius-md, 8px ) var( --radius-md, 8px ) 0 0;
	display: block;
	transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.04);
}

/* ── Product title ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var( --font-display, 'Playfair Display', serif );
	font-size: 1rem;
	font-weight: 600;
	color: var( --clr-white, #fff );
	padding: var( --space-md, 12px ) var( --space-md, 12px ) 0;
	margin: 0;
}

/* ── Price ── */
.woocommerce ul.products li.product .price {
	display: block;
	padding: 4px var( --space-md, 12px );
	color: var( --clr-primary, #c9a96e );
	font-size: 0.9rem;
	font-weight: 700;
}

.woocommerce ul.products li.product .price del {
	color: var( --clr-muted, rgba(255,255,255,0.4) );
	font-weight: 400;
	margin-right: 6px;
}

/* ── Add to cart button ── */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	display: block;
	width: calc( 100% - 2 * var( --space-md, 12px ) );
	margin: var( --space-sm, 8px ) var( --space-md, 12px ) var( --space-md, 12px );
	padding: 0.55rem 1rem;
	background: var( --grad-gold, linear-gradient(135deg,#c9a96e,#e8c97a) );
	color: #1a1008;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	border-radius: var( --radius-pill, 100px );
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
	text-decoration: none;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* ── Result count + ordering ── */
.woocommerce-result-count {
	font-size: 0.85rem;
	color: var( --clr-muted, rgba(255,255,255,0.5) );
	margin: 0;
}

.woocommerce-ordering select {
	background: var( --clr-surface, #0f0f23 );
	color: var( --clr-text, rgba(255,255,255,0.85) );
	border: 1px solid var( --clr-border, rgba(255,255,255,0.12) );
	border-radius: var( --radius-sm, 6px );
	padding: 0.4rem 0.75rem;
	font-size: 0.82rem;
	font-family: inherit;
	cursor: pointer;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

/* ── Pagination ── */
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	border-radius: var( --radius-sm, 6px );
	border: 1px solid var( --clr-border, rgba(255,255,255,0.12) );
	background: var( --clr-surface, #0f0f23 );
	color: var( --clr-text, rgba(255,255,255,0.85) );
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	padding: 0 10px;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var( --clr-primary, #c9a96e );
	color: #1a1008;
	border-color: var( --clr-primary, #c9a96e );
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var( --clr-primary, #c9a96e );
	color: #1a1008;
	border-color: var( --clr-primary, #c9a96e );
}

/* ── Notices ── */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	padding: var( --space-md, 12px ) var( --space-lg, 16px );
	border-radius: var( --radius-md, 8px );
	margin-bottom: var( --space-lg, 16px );
	font-size: 0.9rem;
	list-style: none;
}

.woocommerce-info {
	background: rgba( 201, 169, 110, 0.1 );
	border-left: 3px solid var( --clr-primary, #c9a96e );
	color: var( --clr-text, rgba(255,255,255,0.85) );
}

.woocommerce-message {
	background: rgba( 37, 211, 102, 0.08 );
	border-left: 3px solid #25d366;
	color: var( --clr-text, rgba(255,255,255,0.85) );
}

.woocommerce-error {
	background: rgba( 229, 57, 53, 0.1 );
	border-left: 3px solid #e53935;
	color: var( --clr-text, rgba(255,255,255,0.85) );
}

/* ── Product card container for archive-product.php ── */
.products-grid .product-card {
	height: 100%;
}

/* ── Ensure product cards in archive are fully clickable ── */
.products-grid .product-card .product-image-wrap,
.products-grid .product-card .product-title {
	cursor: pointer;
}

/* Archive product.php: ensure nw_product_card wrapping div fills the grid cell */
.products-grid > .reveal {
	display: flex;
	flex-direction: column;
}

.products-grid > .reveal > .product-card {
	flex: 1;
}


/* ============================================================
   6. PRODUCT CARD ENHANCEMENTS — Title link + Details button
============================================================ */

/* Product title link — inherits heading style, no underline */
.product-title-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
	display: block;
}
.product-title-link:hover {
	color: var( --clr-primary, #c9a96e );
}

/* Card actions row — Order Now + Details side by side */
.product-card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Preserve existing btn-add-cart width when in flex row */
.product-card-actions .btn-add-cart {
	flex: 1;
	min-width: 0;
}

/* Details button — minimal outlined style */
.btn-view-product {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.9rem;
	border: 1px solid var( --clr-border, rgba(255,255,255,0.15) );
	border-radius: var( --radius-pill, 100px );
	background: transparent;
	color: var( --clr-muted, rgba(255,255,255,0.55) );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.btn-view-product:hover,
.btn-view-product:focus-visible {
	border-color: var( --clr-primary, #c9a96e );
	color: var( --clr-primary, #c9a96e );
	background: rgba( 201, 169, 110, 0.07 );
	outline: none;
}


/* ============================================================
   7. ABOUT US PAGE — Enhanced Sections
============================================================ */

/* ── Quality badges grid ── */
.about-quality-badges {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	padding: var(--space-2xl, 40px);
	background: var(--clr-surface, #0f0f23);
	border: 1px solid var(--clr-border, rgba(255,255,255,0.08));
	border-radius: var(--radius-lg, 16px);
}

.quality-badge-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--clr-text, rgba(255,255,255,0.85));
}

.quality-badge-icon {
	font-size: 1rem;
	flex-shrink: 0;
}

/* ── Testimonials grid ── */
.about-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin-top: var(--space-2xl, 40px);
}

.about-testimonial-card {
	background: var(--clr-bg, #0a0a1a);
	border: 1px solid var(--clr-border, rgba(255,255,255,0.08));
	border-radius: var(--radius-lg, 16px);
	padding: var(--space-xl, 28px);
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 12px);
}

.about-testimonial-stars {
	font-size: 1rem;
	color: var(--clr-primary, #c9a96e);
	margin: 0;
}

.about-testimonial-quote {
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--clr-text, rgba(255,255,255,0.82));
	font-style: italic;
	margin: 0;
	flex: 1;
}

.about-testimonial-author {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.about-testimonial-author strong {
	font-size: 0.85rem;
	color: var(--clr-white, #fff);
	font-weight: 700;
}

.about-testimonial-author span {
	font-size: 0.75rem;
	color: var(--clr-muted, rgba(255,255,255,0.4));
}

/* ── Mission statement ── */
.about-mission-statement {
	border-left: 3px solid var(--clr-primary, #c9a96e);
	padding-left: var(--space-xl, 28px);
	text-align: left;
}

@media (max-width: 640px) {
	.about-mission-statement {
		text-align: left;
	}
	.about-quality-badges {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   8. SHOP PAGE — Layout & Toolbar Fixes
   Works with theme/woocommerce/archive-product.php
============================================================ */

/* Wrapper spacing */
.nw-shop-wrap {
	padding-top: var(--space-xl, 32px);
	padding-bottom: var(--space-3xl, 80px);
}

/* WC hook outputs result-count + ordering in a .woocommerce-ordering-wrapper  
   or as siblings — float them into a flex row */
.woocommerce-result-count,
.woocommerce-ordering {
	margin-bottom: var(--space-lg, 20px);
}

/* WC before_shop_loop outputs floated elements — clear them */
.nw-shop-wrap::after {
	content: '';
	display: table;
	clear: both;
}

/* ── Toolbar row (result count + ordering) ── */
.nw-shop-wrap .woocommerce-result-count {
	float: left;
	line-height: 2;
}

.nw-shop-wrap .woocommerce-ordering {
	float: right;
}

/* ── Category filter bar spacing ── */
.nw-cat-filter {
	margin-bottom: var(--space-xl, 32px);
	padding-bottom: var(--space-lg, 20px);
	border-bottom: 1px solid var(--clr-border, rgba(255,255,255,0.08));
}

/* ── Products grid — override any WC float-based layouts ── */
.nw-products-grid {
	clear: both;
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)) !important;
	gap: clamp(16px, 2vw, 28px) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
}

/* ── Reveal wrapper in grid ── */
.nw-products-grid > .reveal {
	display: flex;
	flex-direction: column;
}

.nw-products-grid > .reveal > .product-card {
	flex: 1;
	height: 100%;
}

/* ── No products message ── */
.woocommerce-info {
	clear: both;
}

/* ── WC after_shop_loop: pagination sits below grid ── */
.woocommerce-pagination {
	clear: both;
	margin-top: var(--space-2xl, 40px);
	display: flex;
	justify-content: center;
}

/* ── Responsive: single column on mobile ── */
@media (max-width: 480px) {
	.nw-products-grid {
		grid-template-columns: 1fr !important;
	}
}


/* ============================================================
   9. NAVBAR RESPONSIVE FIXES
   Targets: mid-size screens (900–1100px), mobile menu z-index
   clash with announcement strip, and touch-target sizing.
   Does NOT rewrite any existing nav logic — only patches gaps.
============================================================ */

/* ── Tighten gap so nav doesn't overflow at 900–1100px ── */
@media (max-width: 1100px) {
	.nav-wrapper {
		gap: var(--space-md, 1rem);
	}
	.nav-links {
		gap: var(--space-lg, 1.5rem);
	}
	.nav-links a {
		font-size: 0.82rem;
	}
}

/* ── At 900px: hide desktop links, show hamburger ── */
/* (style.css already does this — re-declare to make it !important-safe
    in case nw-enhancements overrides conflict) */
@media (max-width: 900px) {
	.nav-links {
		display: none !important;
	}
	.nav-toggle {
		display: flex !important;
	}
	#header-contact-btn {
		display: none !important;
	}
	/* Shrink logo on mobile so it doesn't crowd the hamburger + cart */
	.site-logo {
		font-size: 1.1rem;
	}
	.site-logo img {
		height: 36px;
	}
	/* Keep nav-actions compact */
	.nav-actions {
		gap: 6px;
	}
}

/* ── Mobile menu: slide in below the announcement strip ── */
/*
 * The announcement strip is position:fixed; top:0; height:var(--nw-announce-h).
 * The mobile menu was fixed top:0 which put it behind or under the strip.
 * Fix: start the mobile menu at the strip bottom so they don't overlap.
 */
.mobile-menu {
	top: 0;
	padding-top: calc( var(--nw-announce-h, 36px) + var(--space-xl, 2.5rem) );
	z-index: 1200; /* above strip (1100) and header (1000) */
}

/* When WordPress admin bar is present */
.admin-bar .mobile-menu {
	padding-top: calc( 32px + var(--nw-announce-h, 36px) + var(--space-xl, 2.5rem) );
}

@media (max-width: 782px) {
	.admin-bar .mobile-menu {
		padding-top: calc( 46px + var(--nw-announce-h, 36px) + var(--space-xl, 2.5rem) );
	}
}

/* Overlay must also cover the strip area */
.mobile-overlay {
	z-index: 1150; /* between strip(1100) and menu(1200) */
}

/* ── Hamburger: larger touch target on mobile ── */
@media (max-width: 480px) {
	.nav-toggle {
		width: 40px;
		height: 40px;
		padding: 8px;
	}
	/* Cart icon touch target */
	.cart-icon {
		padding: 8px;
	}
	/* Tighter nav-wrapper height on small screens */
	.nav-wrapper {
		height: 60px;
		gap: 8px;
	}
	/* Body padding needs to reflect smaller header height */
	body {
		padding-top: calc( var(--nw-announce-h, 36px) + 60px ) !important;
	}
	.admin-bar body {
		padding-top: calc( 46px + var(--nw-announce-h, 36px) + 60px ) !important;
	}
}

/* ── 360px: prevent any horizontal overflow ── */
@media (max-width: 360px) {
	.site-logo {
		font-size: 1rem;
	}
	.site-logo img {
		height: 28px;
	}
}