/* ==========================================================================
   Noreva — main.css
   Design system: CSS variables driven by the Customizer (see inc/customizer.php)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--noreva-bg);
	color: var(--noreva-text);
	font-family: var(--noreva-font-body);
	font-size: var(--noreva-base-size);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--noreva-font-heading); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--noreva-primary); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--noreva-primary); color: #fff; padding: 10px 16px; z-index: 9999; }
.skip-link:focus { left: 10px; top: 10px; }

.noreva-container { max-width: var(--noreva-container); margin: 0 auto; padding: 0 24px; }
.noreva-section { padding: 72px 0; }
.section-heading { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-heading h2 { font-size: clamp(28px, 4vw, 40px); }
.section-heading p { color: #5b5b5b; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 30px; border-radius: var(--noreva-radius); font-weight: 600;
	border: 2px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
	font-size: 15px; white-space: nowrap;
}
.btn-primary { background: var(--noreva-primary); color: #fff; box-shadow: 0 10px 24px -8px rgba(11,31,58,.55); }
.btn-primary:hover { background: var(--noreva-hover); transform: translateY(-3px); box-shadow: 0 16px 30px -8px rgba(11,31,58,.6); }
.btn-outline { border-color: var(--noreva-primary); color: var(--noreva-primary); }
.btn-outline:hover { background: var(--noreva-primary); color: #fff; transform: translateY(-3px); }
.btn-light { background: #fff; color: var(--noreva-primary); }
.btn-light:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -8px rgba(0,0,0,.35); }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ---------------- Top bar + Header ---------------- */
.noreva-topbar { background: var(--noreva-announce-bg, var(--noreva-primary)); color: var(--noreva-announce-color, #f4ead9); font-size: 13px; }
.noreva-topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; gap: 16px; }
.noreva-topbar-inner a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.noreva-topbar-message { color: inherit; }

/* Alignment variants set from the Customizer ("Position / alignment"). */
.noreva-topbar-align-center .noreva-topbar-inner { justify-content: center; text-align: center; }
.noreva-topbar-align-left .noreva-topbar-inner { justify-content: flex-start; }
.noreva-topbar-align-right .noreva-topbar-inner { justify-content: flex-end; }

/* Bar 2 / Bar 3 stack directly under Bar 1; each bar sets its own colors inline. */
.noreva-topbar-group { position: relative; z-index: 5; }
.noreva-topbar + .noreva-topbar { border-top: 1px solid rgba(255,255,255,.12); }

/* Moving ("marquee") bar style: content repeats seamlessly and pauses on hover/focus. */
.noreva-topbar-style-marquee { padding: 8px 0; overflow: hidden; }
.noreva-marquee { overflow: hidden; width: 100%; }
.noreva-marquee-track {
	display: inline-flex; width: max-content; white-space: nowrap;
	animation: noreva-marquee-scroll 22s linear infinite;
}
.noreva-topbar-style-marquee:hover .noreva-marquee-track,
.noreva-topbar-style-marquee:focus-within .noreva-marquee-track { animation-play-state: paused; }
.noreva-marquee-item { padding-right: 64px; font-weight: 600; flex-shrink: 0; }
@keyframes noreva-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
	.noreva-marquee-track { animation: none; }
}

.site-header { position: sticky; top: 0; z-index: 100; background: var(--noreva-bg); border-bottom: 1px solid rgba(11,31,58,.08); transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.noreva-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px 24px; }

/*
 * Transparent header: floats with no background over the homepage hero
 * (toggle in Customizer → Noreva: Header Style), then main.js adds
 * .is-scrolled once the visitor scrolls past the hero so it becomes a
 * normal solid, sticky header. Text/icon colors flip to white while
 * transparent so they read against a photo/video hero.
 */
.site-header.is-transparent {
	position: absolute; top: 0; left: 0; right: 0; width: 100%;
	background: transparent; border-bottom-color: transparent; box-shadow: none;
}
/* Default transparent state keeps the normal dark logo/menu colors (correct
   for the theme's default light hero gradient/photos, matching the
   reference banner). Toggle "White" in the Customizer only if a slide uses
   a dark photo or video where dark text wouldn't read. */
.site-header.is-transparent.is-text-light .site-title,
.site-header.is-transparent.is-text-light .primary-menu > li > a,
.site-header.is-transparent.is-text-light .header-icon-btn,
.site-header.is-transparent.is-text-light .site-badge { color: #fff; }
.site-header.is-transparent.is-text-light .site-badge { border-left-color: rgba(255,255,255,.35); }
.site-header.is-transparent.is-text-light .header-icon-btn:hover { background: rgba(255,255,255,.16); }
.site-header.is-transparent .noreva-cart-count { box-shadow: 0 0 0 2px rgba(11,31,58,.6); }
.site-header.is-transparent.is-text-light .noreva-cart-count { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
/*
 * ROOT CAUSE of "white box behind the logo" on the transparent header: a
 * logo file with a solid white background (not a transparent PNG) is
 * completely normal to upload, but it becomes an ugly opaque square once
 * it's floating over a hero photo instead of sitting on a solid header
 * bar. mix-blend-mode: multiply makes white pixels in the logo act as
 * "see-through" against whatever is behind them (white × anything = that
 * thing), while the logo's own dark artwork is unaffected — so a
 * white-background logo blends in automatically, no need to re-export it
 * as a transparent PNG. It switches back to normal once the header goes
 * solid on scroll, where a white background is invisible anyway.
 */
.site-header.is-transparent:not(.is-scrolled) .site-logo img { mix-blend-mode: multiply; }
.site-header.is-transparent.is-scrolled {
	position: sticky; background: var(--noreva-bg); border-bottom-color: rgba(11,31,58,.08);
	box-shadow: 0 6px 20px -14px rgba(11,31,58,.3);
}
.site-header.is-transparent.is-scrolled .site-title,
.site-header.is-transparent.is-scrolled .primary-menu > li > a,
.site-header.is-transparent.is-scrolled .header-icon-btn,
.site-header.is-transparent.is-scrolled .site-badge { color: var(--noreva-primary); }
.site-header.is-transparent.is-scrolled .site-badge { border-left-color: #ddd; }
.site-header.is-transparent.is-scrolled .header-icon-btn:hover { background: rgba(11,31,58,.08); }
.site-header.is-transparent.is-scrolled .noreva-cart-count { box-shadow: none; }

/*
 * ROOT CAUSE FIX (mobile logo stretch when opening search): the logo and
 * search toggle used to sit in the same flex row with nothing stopping
 * the branding block from being squeezed/stretched as sibling widths
 * changed. `flex-shrink: 0` + a fixed, explicit `height` (not just
 * `max-height`) with `object-fit: contain` locks the logo's own box and
 * aspect ratio regardless of anything else in the header row, and the
 * search panel below is taken out of normal flow on mobile (see the
 * 960px media query) so opening it can never resize the header row at all.
 */
.site-branding { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.site-logo { flex-shrink: 0; }
.site-logo img { height: 52px; width: auto; max-width: 160px; object-fit: contain; flex-shrink: 0; }
.site-title { font-family: var(--noreva-font-heading); font-size: 24px; font-weight: 700; color: var(--noreva-primary); flex-shrink: 0; white-space: nowrap; }
.site-badge { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--noreva-secondary); border-left: 1px solid #ddd; padding-left: 12px; flex-shrink: 0; }

.main-navigation { flex: 1; min-width: 0; }
.primary-menu, .mobile-menu { display: flex; gap: 28px; }
.primary-menu > li > a { font-weight: 600; font-size: 15px; position: relative; padding: 6px 0; }
.primary-menu > li > a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--noreva-secondary); transition: width .25s ease; }
.primary-menu > li > a:hover::after { width: 100%; }
.mobile-menu { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu li a { display: block; padding: 12px 4px; border-bottom: 1px solid #eee; }

.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.header-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; border-radius: 50%; color: var(--noreva-primary); transition: background .2s ease, transform .2s ease; flex-shrink: 0; }
.header-icon-btn:hover { background: rgba(11,31,58,.08); transform: translateY(-2px); }
.noreva-cart-count { position: absolute; top: 2px; right: 2px; background: var(--noreva-secondary); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.noreva-cart-count:empty { display: none; } /* Hides the always-present counter span when the cart is empty. */
.mobile-menu-toggle { display: none; }

.noreva-search-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: #fff; border-bottom: 1px solid #eee; }
.noreva-search-panel:not([hidden]) { max-height: 100px; }
.noreva-search-panel[hidden] { display: block; max-height: 0; }
.search-form { display: flex; gap: 10px; padding: 16px 0; }
.search-field { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid #ddd; border-radius: var(--noreva-radius); font-size: 15px; }
.search-submit { padding: 12px 22px; background: var(--noreva-primary); color: #fff; border: none; border-radius: var(--noreva-radius); flex-shrink: 0; }

.mobile-nav[hidden] { display: none; }
.mobile-nav { background: #fff; padding: 16px 24px; border-bottom: 1px solid #eee; }

/* ---------------- Hero Slider (full-bleed photo/video + overlaid text) ---------------- */
.noreva-hero-slider { position: relative; }
.hero-slides { position: relative; }

.noreva-hero {
	position: relative; overflow: hidden;
	min-height: 560px; display: flex; align-items: center;
	padding: 64px 0;
	background: linear-gradient(120deg, #f3ecf9 0%, #eee3f5 45%, #e7d9f2 100%);
}
.noreva-hero.has-bg,
.noreva-hero.has-video { background-size: cover; background-position: center; }
.hero-bg-video {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover;
	pointer-events: none;
}
.hero-overlay {
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(100deg, rgba(11,31,58,.62) 0%, rgba(11,31,58,.28) 45%, rgba(11,31,58,.05) 75%);
	pointer-events: none;
}
/* Makes the whole photo/video clickable to a product, without wrapping the
   heading/buttons in a link (invalid — a link can't contain a link). Sits
   behind .hero-inner (which has its own higher z-index) so the actual
   buttons stay independently clickable on top of it. */
.hero-slide-link { position: absolute; inset: 0; z-index: 0; cursor: pointer; }

/* Slider mechanics: every slide is stacked and cross-fades in/out.
   overflow: hidden is a safety net — if this file is ever loaded from a
   stale cache that predates the "position: absolute" rule below, inactive
   slides would otherwise stack in normal document flow and leave a huge
   blank gap (with the arrows/dots pushed far down into it) instead of
   overlapping invisibly. */
.has-multiple .hero-slides { min-height: 620px; overflow: hidden !important; }
.has-multiple .noreva-hero.hero-slide {
	position: absolute !important; inset: 0; z-index: 0;
	opacity: 0 !important; visibility: hidden !important; pointer-events: none;
	transition: opacity .8s ease;
}
/*
 * ROOT CAUSE of "photo sits high, arrows/dots sit low": the active slide
 * was switching to position: relative, so its height shrank to fit just
 * its own text/photo content — but the container around it (.hero-slides)
 * still enforced its full min-height, leaving blank space below the
 * shorter active slide. The arrows (centered) and dots (pinned near the
 * container's bottom) are positioned against that full container height,
 * so they ended up floating in that blank space below the visible photo.
 * Keeping every slide — active included — at position: absolute; inset: 0
 * makes the active slide always fill the same full-height box the arrows
 * and dots are measured against, so they land on the photo every time.
 */
.has-multiple .noreva-hero.hero-slide.is-active { position: absolute !important; z-index: 1; opacity: 1 !important; visibility: visible !important; pointer-events: auto; }

.hero-bg-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.hero-bg-blob-a { top: -12%; right: -6%; width: 44%; padding-bottom: 44%; background: radial-gradient(circle, rgba(199,154,75,.18), transparent 70%); }
.hero-bg-blob-b { bottom: -18%; left: -8%; width: 38%; padding-bottom: 38%; background: radial-gradient(circle, rgba(11,31,58,.08), transparent 70%); }
.noreva-hero.has-bg .hero-bg-blob, .noreva-hero.has-video .hero-bg-blob { display: none; }

.hero-inner { position: relative; z-index: 1; width: 100%; }
.noreva-hero.align-center .hero-inner { text-align: center; }
.hero-copy { max-width: 620px; }
.noreva-hero.align-center .hero-copy { max-width: 680px; margin: 0 auto; }

.hero-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--noreva-primary); font-weight: 700; margin-bottom: 18px;
	padding: 7px 16px 7px 12px; border-radius: 999px;
	background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7);
}
.hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--noreva-secondary); flex-shrink: 0; }
.hero-badge-chip { margin: 4px 0 18px; }
.hero-heading {
	font-size: clamp(38px, 5vw, 64px); line-height: 1.06; letter-spacing: -.01em; margin-bottom: .3em;
	color: var(--noreva-primary);
}
.hero-sub { font-size: 18px; line-height: 1.6; color: #4a4458; max-width: 480px; }
.noreva-hero.align-center .hero-sub { margin-left: auto; margin-right: auto; }
.noreva-hero.has-bg .hero-heading, .noreva-hero.has-video .hero-heading { color: #fff; }
.noreva-hero.has-bg .hero-sub, .noreva-hero.has-video .hero-sub { color: #f1eef7; }
.noreva-hero.has-bg .hero-eyebrow, .noreva-hero.has-video .hero-eyebrow { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }

.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.noreva-hero.align-center .hero-actions { justify-content: center; }

/* Pill CTA button, to match a clean lifestyle-photo hero banner. */
.hero-actions .btn {
	border-radius: 999px; padding: 16px 36px; font-size: 14.5px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
}
.hero-actions .btn-primary {
	background: #fff; color: var(--noreva-primary); border: 1px solid rgba(11,31,58,.12);
	box-shadow: 0 18px 34px -16px rgba(11,31,58,.45);
}
.hero-actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(11,31,58,.5); }
.hero-actions .btn-outline {
	background: transparent; border: 1px solid currentColor; color: inherit;
}
.noreva-hero.has-bg .hero-actions .btn-outline, .noreva-hero.has-video .hero-actions .btn-outline { color: #fff; }

/* ---- Slider arrows + dots (shown only with 2+ enabled slides) ---- */
.hero-slider-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(11,31,58,.12);
	background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: var(--noreva-primary); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 24px -10px rgba(11,31,58,.35);
	transition: background .2s ease, transform .2s ease;
	cursor: pointer;
}
.hero-slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.hero-slider-prev { left: 18px; }
.hero-slider-next { right: 18px; }
.hero-slider-dots { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.hero-slider-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.6); border: 1px solid rgba(11,31,58,.15); padding: 0; transition: background .25s ease, width .25s ease; cursor: pointer; }
.hero-slider-dot.is-active { background: var(--noreva-secondary); border-color: var(--noreva-secondary); width: 22px; border-radius: 5px; }

/* ---------------- Trust bar ---------------- */
.noreva-trust-bar { padding: 36px 0; background: rgba(11,31,58,.04); color: var(--noreva-text); border-top: 1px solid rgba(11,31,58,.08); border-bottom: 1px solid rgba(11,31,58,.08); }
.trust-bar-inner { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 24px; text-align: center; }
.trust-stat { display: flex; flex-direction: column; gap: 4px; }
.trust-value { font-family: var(--noreva-font-heading); font-size: 32px; font-weight: 700; color: var(--noreva-primary); }
.trust-label { font-size: 13px; letter-spacing: .04em; opacity: .7; }

/* ---------------- Category grid (3D tilt cards) ---------------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; perspective: 1200px; }
/*
 * ROOT CAUSE of "6 categories, 5 fit in a row and the 6th wraps onto its
 * own line": auto-fit with a 220px minimum only fits 5 columns inside the
 * 1200px content width once gaps are subtracted, so the 6th card had
 * nowhere to go. On desktop we now force exactly one row with as many
 * equal-width columns as there are categories (via --noreva-cat-count,
 * set inline per the real term count in categories.php), so it always
 * fits in one line however many categories exist. Below 961px we keep
 * the original auto-fit behavior (and the 2-up phone layout further
 * down) untouched, since that's already working correctly.
 */
@media (min-width: 961px) {
	.category-grid { grid-template-columns: repeat(var(--noreva-cat-count, 6), 1fr); }
}
.category-card {
	position: relative; display: block; border-radius: var(--noreva-radius); overflow: hidden;
	background: #fff; box-shadow: 0 14px 30px -14px rgba(11,31,58,.25);
	transform-style: preserve-3d; transition: transform .35s ease, box-shadow .35s ease;
}
.category-card:hover { transform: translateY(-8px) rotateX(4deg) rotateY(-4deg); box-shadow: 0 30px 50px -18px rgba(11,31,58,.4); }
.category-card-media { aspect-ratio: 4/3; background: #f1ede4; overflow: hidden; }
.category-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.category-card:hover .category-card-media img { transform: scale(1.08); }
.category-card-body { padding: 18px 20px; }
.category-card-body h3 { margin-bottom: 4px; font-size: 18px; }
.category-count { font-size: 13px; color: #888; }

/* ---------------- Product grid + card (3D tilt) ---------------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; perspective: 1400px; }
.noreva-product-card {
	background: #fff; border-radius: var(--noreva-radius); overflow: hidden;
	box-shadow: 0 10px 26px -16px rgba(11,31,58,.3); transform-style: preserve-3d;
	transition: transform .35s ease, box-shadow .35s ease; display: flex; flex-direction: column;
}
.noreva-product-card:hover { transform: translateY(-10px) rotateX(3deg); box-shadow: 0 34px 50px -20px rgba(11,31,58,.45); }
.product-card-media { position: relative; display: block; aspect-ratio: 1/1; background: #f6f3ec; overflow: hidden; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.noreva-product-card:hover .product-card-media img { transform: scale(1.08) rotate(-1deg); }
.onsale { position: absolute; top: 12px; left: 12px; background: var(--noreva-secondary); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; z-index: 2; }
.product-card-body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.product-card-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--noreva-accent); }
.product-card-title { font-size: 16px; margin: 0; }
.product-card-price { font-weight: 700; color: var(--noreva-primary); }
.product-card-price ins { text-decoration: none; }
.product-card-price del { opacity: .5; margin-right: 6px; }
.product-card-actions { margin-top: auto; padding-top: 10px; display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
.product-card-actions .add_to_cart_button,
.product-card-actions .button { flex: 1; min-width: 0; }

/* ---------- WhatsApp ordering ---------- */
.noreva-wa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: linear-gradient(135deg, #29d668, #21b858); color: #fff; font-weight: 700; text-decoration: none;
	border-radius: var(--noreva-radius); padding: 10px 18px; font-size: 13px;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
	box-shadow: 0 8px 18px -8px rgba(37,211,102,.55);
}
.noreva-wa-btn:hover { filter: brightness(1.06); transform: translateY(-2px); color: #fff; box-shadow: 0 12px 24px -8px rgba(37,211,102,.65); }
.noreva-wa-btn svg { flex-shrink: 0; }
.noreva-wa-btn--card { width: 100%; padding: 9px 14px; font-size: 12.5px; }
.noreva-wa-btn--single { margin-top: 14px; padding: 14px 28px; font-size: 15px; }

.noreva-wa-float {
	position: fixed; right: 20px; bottom: 20px;
	right: calc(20px + env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	width: 60px; height: 60px; border-radius: 50%;
	background: linear-gradient(135deg, #2be374, #1fae53); color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 14px 30px -8px rgba(20,120,60,.55), 0 2px 0 rgba(255,255,255,.25) inset;
	z-index: 999; transition: transform .2s ease, box-shadow .2s ease;
}
.noreva-wa-float::before {
	content: ''; position: absolute; inset: 0; border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(37,211,102,.55);
	animation: noreva-wa-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes noreva-wa-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
	80%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
	100% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) { .noreva-wa-float::before { animation: none; } }
.noreva-wa-float svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.noreva-wa-float:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 18px 36px -8px rgba(20,120,60,.6); color: #fff; }
@media (max-width: 782px) {
	.noreva-wa-float { width: 54px; height: 54px; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
	.noreva-wa-float svg { width: 27px; height: 27px; }
}

/* ---------- Product video (single product page + shop grid badge) ---------- */
.noreva-product-video { margin-top: 20px; }
.noreva-product-video-label {
	display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px;
	color: var(--noreva-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em;
}
.noreva-product-video-embed { position: relative; border-radius: var(--noreva-radius); overflow: hidden; background: #000; }
.noreva-product-video-embed iframe, .noreva-product-video-embed video { width: 100%; aspect-ratio: 16/9; display: block; border: none; }
.noreva-product-video-fallback { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--noreva-primary); }
.noreva-video-badge {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 28px; height: 28px; border-radius: 50%;
	background: rgba(11,31,58,.72); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.product-card-media { position: relative; }

/* ---------- "Follow us on Instagram" grid + social follow row ---------- */
.instagram-grid {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.instagram-post {
	position: relative; display: block; aspect-ratio: 1/1; overflow: hidden;
	border-radius: var(--noreva-radius); background: #f6f3ec;
}
.instagram-post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.instagram-post-overlay {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(11,31,58,.38); color: #fff; opacity: 0; transition: opacity .25s ease;
}
.instagram-post:hover img { transform: scale(1.08); }
.instagram-post:hover .instagram-post-overlay,
.instagram-post:focus-visible .instagram-post-overlay { opacity: 1; }

.noreva-follow-us {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(11,31,58,.08); text-align: center;
}
.noreva-follow-us-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--noreva-primary); }
.noreva-social-links { display: flex; align-items: center; gap: 10px; }
.noreva-social-links a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(11,31,58,.06); color: var(--noreva-primary);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.noreva-social-links a:hover { background: var(--noreva-primary); color: #fff; transform: translateY(-2px); }

@media (max-width: 782px) {
	.instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

.section-footer-cta { text-align: center; margin-top: 44px; }

/* ---------------- Why choose us ---------------- */
.noreva-why-choose { background: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.why-card { padding: 30px 24px; border-radius: var(--noreva-radius); background: var(--noreva-bg); position: relative; transition: transform .3s ease; }
.why-card:hover { transform: translateY(-6px); }
.why-index { font-family: var(--noreva-font-heading); font-size: 42px; font-weight: 700; color: rgba(199,154,75,.35); display: block; margin-bottom: 8px; }
.why-card h3 { font-size: 19px; }
.why-card p { color: #5b5b5b; font-size: 15px; margin: 0; }

/* ---------------- CEO section ---------------- */
.noreva-ceo { background: var(--noreva-bg); color: var(--noreva-text); }
.ceo-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.ceo-media { perspective: 1000px; }
.ceo-media img {
	border-radius: calc(var(--noreva-radius) * 2); width: 100%; aspect-ratio: 4/5; object-fit: cover;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); transform: rotateY(6deg); transition: transform .4s ease;
}
.ceo-media:hover img { transform: rotateY(0deg) scale(1.02); }
.ceo-media-placeholder { aspect-ratio: 4/5; border-radius: calc(var(--noreva-radius) * 2); background: rgba(11,31,58,.06); display: flex; align-items: center; justify-content: center; font-family: var(--noreva-font-heading); font-size: 96px; color: var(--noreva-secondary); }
.ceo-eyebrow { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--noreva-secondary); margin-bottom: 14px; font-weight: 700; }
.ceo-copy blockquote { font-family: var(--noreva-font-heading); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.5; margin: 0 0 28px; font-weight: 500; color: var(--noreva-primary); }
.ceo-signoff { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ceo-signature { max-height: 54px; width: auto; opacity: .9; }
.ceo-name { display: block; font-size: 17px; }
.ceo-role { font-size: 13px; opacity: .7; }
.ceo-socials { display: flex; gap: 12px; }
.ceo-socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(11,31,58,.06); color: var(--noreva-primary); display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; }
.ceo-socials a:hover { background: var(--noreva-secondary); transform: translateY(-3px); }

/* ---------------- Testimonials ---------------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.testimonial-card { background: #fff; padding: 28px; border-radius: var(--noreva-radius); box-shadow: 0 12px 28px -18px rgba(11,31,58,.3); transition: transform .3s ease; }
.testimonial-card:hover { transform: translateY(-6px) rotateZ(-.4deg); }
.noreva-stars { color: var(--noreva-secondary); letter-spacing: 2px; }
.testimonial-text { font-style: italic; color: #444; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.testimonial-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial-author span { display: block; font-size: 13px; color: #888; }

/* ---------------- CTA band ---------------- */
.noreva-cta-band { background: linear-gradient(120deg, rgba(11,31,58,.05), rgba(199,154,75,.08)); color: var(--noreva-text); text-align: center; position: relative; overflow: hidden; }
.noreva-cta-band::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(199,154,75,.25), transparent 70%); top: -200px; right: -150px; }
.cta-inner { position: relative; z-index: 1; }
.cta-inner h2 { color: var(--noreva-primary); font-size: clamp(26px, 3.6vw, 38px); }
.cta-inner p { opacity: .75; max-width: 480px; margin: 0 auto 26px; }

/* ---------------- Newsletter ---------------- */
.noreva-newsletter { background: rgba(199,154,75,.12); color: var(--noreva-text); padding: 44px 0; }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.newsletter-inner h2 { color: var(--noreva-primary); font-size: 24px; margin-bottom: 4px; }
.newsletter-inner p { opacity: .8; margin: 0; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input[type="email"] { padding: 13px 18px; border-radius: var(--noreva-radius); border: 1px solid rgba(11,31,58,.15); min-width: 260px; }
.noreva-hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------------- Footer ---------------- */
.site-footer { background: rgba(11,31,58,.03); color: var(--noreva-text); padding-top: 56px; border-top: 1px solid rgba(11,31,58,.08); }
.footer-col-about .custom-logo, .footer-col-about img { max-height: 56px !important; width: auto !important; display: block; margin-bottom: 14px; }
.footer-col-about .footer-logo-text { display: block; font-family: var(--noreva-font-heading); font-size: 22px; font-weight: 700; color: var(--noreva-primary); margin-bottom: 14px; }
.footer-columns { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding: 40px 0 48px; }
.footer-col h3 { color: var(--noreva-primary); font-size: 15px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.footer-col p { color: #5b5b5b; font-size: 14px; }
.footer-menu li a, .footer-contact li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--noreva-text); }
.footer-menu li a:hover { color: var(--noreva-secondary); }
.footer-contact li span { color: var(--noreva-text); }
.footer-socials { display: flex; gap: 10px; margin-top: 16px; }
.footer-socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(11,31,58,.06); color: var(--noreva-primary); display: flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease; }
.footer-socials a:hover { background: var(--noreva-secondary); color: #fff; transform: translateY(-3px); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(11,31,58,.08); padding: 20px 24px; font-size: 13px; }
.legal-menu { display: flex; gap: 18px; flex-wrap: wrap; }
.legal-menu a:hover { color: var(--noreva-secondary); }

/* ---------------- Breadcrumbs ---------------- */
.noreva-breadcrumbs { padding: 14px 0; font-size: 13px; background: #fff; border-bottom: 1px solid #eee; }
.noreva-breadcrumbs a { color: var(--noreva-primary); font-weight: 600; }
.noreva-breadcrumbs span { color: #999; }

/* ---------------- Generic pages / prose ---------------- */
.noreva-page-template .noreva-section:first-child, .noreva-page > .page-header { padding-top: 56px; }
.noreva-prose, .page-content { max-width: 760px; margin: 0 auto; font-size: 16px; color: #3a3a3a; }
.noreva-prose p, .page-content p { margin-bottom: 1.2em; }
.page-title { text-align: center; font-size: clamp(28px, 4vw, 42px); margin: 40px 0 24px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.contact-details-list li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
.noreva-contact-form { background: #fff; padding: 32px; border-radius: var(--noreva-radius); box-shadow: 0 20px 50px -24px rgba(11,31,58,.35); display: flex; flex-direction: column; gap: 16px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.noreva-contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.noreva-contact-form input, .noreva-contact-form textarea { padding: 12px 14px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 15px; }
.noreva-notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.noreva-notice-success { background: #e5f5ea; color: #1a6b3a; }
.noreva-notice-error { background: #fbe7e7; color: #a5292c; }

/* Gallery */
.noreva-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 32px; }
.gallery-item { border-radius: var(--noreva-radius); overflow: hidden; aspect-ratio: 1/1; transition: transform .3s ease; box-shadow: 0 12px 24px -16px rgba(0,0,0,.3); }
.gallery-item:hover { transform: scale(1.04) rotate(-1deg); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Badges (certifications) */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 32px; }
.badge-card { text-align: center; padding: 28px; background: #fff; border-radius: var(--noreva-radius); box-shadow: 0 12px 26px -18px rgba(11,31,58,.3); }
.badge-card img { margin: 0 auto 14px; }
.noreva-editor-note { text-align: center; color: #999; font-style: italic; margin-top: 28px; }

/* Blog */
.noreva-blog-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 48px; padding: 56px 24px; }
.blog-card { background: #fff; border-radius: var(--noreva-radius); overflow: hidden; margin-bottom: 32px; box-shadow: 0 12px 26px -18px rgba(11,31,58,.25); transition: transform .3s ease; }
.blog-card:hover { transform: translateY(-4px); }
.blog-card-media { aspect-ratio: 16/9; background: #eee; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-media-placeholder { width: 100%; height: 100%; background: linear-gradient(120deg, var(--noreva-primary), var(--noreva-secondary)); }
.blog-card-body { padding: 22px; }
.entry-meta { font-size: 12px; color: #999; margin-bottom: 8px; }
.blog-card-title { font-size: 20px; margin-bottom: 8px; }
.blog-card-link { font-weight: 700; color: var(--noreva-primary); }
.widget { background: #fff; padding: 20px; border-radius: var(--noreva-radius); margin-bottom: 24px; box-shadow: 0 10px 20px -16px rgba(0,0,0,.2); }
.widget-title { font-size: 16px; margin-bottom: 12px; }
.related-posts { margin-top: 48px; }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 16px; }
.related-post-card { display: block; border-radius: var(--noreva-radius); overflow: hidden; box-shadow: 0 10px 20px -16px rgba(0,0,0,.25); }
.related-post-card span { display: block; padding: 12px; font-weight: 600; font-size: 14px; }

/* 404 */
.noreva-404 { padding: 100px 24px; text-align: center; }
.noreva-404-inner h1 { font-size: 96px; color: var(--noreva-secondary); }
.noreva-404-inner .btn { margin: 6px; }

/* ---------------- WooCommerce ---------------- */
.noreva-shop-main { padding: 40px 0 80px; }
.woocommerce-products-header__title { font-size: clamp(28px, 4vw, 40px); text-align: center; margin-bottom: 8px; }
/*
 * ROOT CAUSE of "the search on the shop page just sorts, it doesn't look
 * like the theme": WooCommerce prints its result count and its sort-by
 * <select> with no styling of their own, and since the theme disables
 * WooCommerce's bundled stylesheet (see inc/woocommerce.php), that
 * dropdown rendered as a bare, unstyled native <select> with nothing
 * beside it that looked like a search box. noreva_shop_toolbar_* in
 * inc/woocommerce.php now wraps the result count, a real keyword-search
 * box (get_product_search_form()), and the sort dropdown together; this
 * styles that row to match the rest of the theme.
 */
.noreva-shop-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 14px 20px; margin-bottom: 28px; padding-bottom: 20px;
	border-bottom: 1px solid rgba(11,31,58,.08);
}
.woocommerce-result-count { font-size: 14px; margin: 0; order: 1; }
.noreva-shop-search { order: 2; flex: 1 1 220px; max-width: 320px; }
.noreva-shop-search form { display: flex; }
.noreva-shop-search input[type="search"] {
	flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid #ddd;
	border-radius: var(--noreva-radius) 0 0 var(--noreva-radius); font-size: 14px;
	border-right: none;
}
.noreva-shop-search input[type="search"]:focus { outline: none; border-color: var(--noreva-primary); }
.noreva-shop-search button {
	padding: 0 16px; background: var(--noreva-primary); color: #fff; border: none;
	border-radius: 0 var(--noreva-radius) var(--noreva-radius) 0; font-size: 13px; font-weight: 600;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.noreva-shop-search button:hover { background: var(--noreva-hover); }
.woocommerce-ordering { order: 3; margin: 0; }
.woocommerce-ordering select {
	padding: 10px 34px 10px 14px; border: 1px solid #ddd; border-radius: var(--noreva-radius);
	font-size: 14px; color: var(--noreva-text); background-color: #fff;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3e%3cpath d='M0 0l5 6 5-6z' fill='%230b1f3a'/%3e%3c/svg%3e");
	background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
	line-height: normal;
}
.woocommerce-ordering select::-ms-expand { display: none; }
.woocommerce-ordering select:focus { outline: none; border-color: var(--noreva-primary); }
@media (max-width: 600px) {
	.noreva-shop-toolbar { flex-direction: column; align-items: stretch; }
	.noreva-shop-search { max-width: none; order: 2; }
	.woocommerce-result-count { order: 1; }
	.woocommerce-ordering { order: 3; }
	.woocommerce-ordering select { width: 100%; }
}
/*
 * ROOT CAUSE FIX (Shop grid): WooCommerce's own bundled stylesheet is now
 * dequeued (see inc/woocommerce.php), which is what was putting a legacy
 * `width: 22.75%; float: left; margin: 0 3.8% ...` on every `li.product`
 * — shrinking each card to a sliver inside its own grid cell and leaving
 * the huge empty gaps seen in the Shop screenshot. The `width`/`float`/
 * `margin` resets below are kept as a defensive backstop so the grid
 * degrades gracefully even if another plugin ever adds similar legacy
 * product-loop CSS.
 */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px; list-style: none; padding: 0; margin: 28px 0 0 !important;
}
ul.products li.product {
	width: 100% !important; float: none !important; margin: 0 !important; clear: none !important;
	background: #fff; border-radius: var(--noreva-radius); padding: 0 0 20px; text-align: left;
	box-shadow: 0 10px 26px -16px rgba(11,31,58,.3);
	transition: transform .3s ease, box-shadow .3s ease;
	display: flex; flex-direction: column; position: relative; overflow: hidden;
}
/*
 * Shop grid — empty product slot fix.
 * Inside a CSS grid, anything that is a direct child of ul.products takes a
 * cell. Two things can end up there besides real product cards and leave a
 * blank cell where a product should be: (1) the legacy WooCommerce float
 * clearfix pseudo-elements (ul.products::before / ::after { content:" ";
 * display:table }), which become anonymous grid items and push the first (or
 * last) product over by one cell; (2) an empty <li> for a product that
 * rendered nothing. Neither is ever a visible card, so remove them from the
 * grid — every real product then flows into the next free cell.
 */
ul.products::before,
ul.products::after { content: none !important; display: none !important; }
ul.products > li:empty,
ul.products > li[hidden] { display: none !important; }
ul.products li.product:hover { transform: translateY(-8px); box-shadow: 0 30px 46px -18px rgba(11,31,58,.4); }
ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; }
ul.products li.product img {
	width: 100%; height: auto; display: block;
	border-radius: var(--noreva-radius) var(--noreva-radius) 0 0;
	aspect-ratio: 1/1; object-fit: cover; object-position: center;
	background: #f6f3ec;
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px; padding: 0 18px; margin: 16px 0 4px; color: var(--noreva-primary);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	line-height: 1.4;
}
ul.products li.product .price { padding: 0 18px; font-weight: 700; color: var(--noreva-primary); margin-top: auto; }
ul.products li.product .button {
	margin: 0; display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 20px; background: var(--noreva-primary); color: #fff;
	border-radius: var(--noreva-radius); font-size: 13px; font-weight: 600;
	transition: background .2s ease, transform .2s ease;
}
ul.products li.product .button:hover { background: var(--noreva-hover); transform: translateY(-2px); }
ul.products li.product .onsale { position: absolute; top: 14px; left: 14px; }
ul.products li.product .star-rating { padding: 0 18px; }

/* WhatsApp icon button next to Add to Cart: same row, fixed small circle. */
.noreva-wa-icon {
	flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border-radius: 50%;
}
.noreva-wa-icon svg { width: 19px; height: 19px; }

/* On the default WooCommerce shop/category grid, .product-card-actions is a
   direct child of li.product (not pre-padded like the homepage's
   .product-card-body), so it needs its own horizontal inset to line up
   with the title/price above it. */
ul.products li.product > .product-card-actions { margin: 8px 18px 14px; }

.single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 20px 0 60px; }
.single-product div.images { perspective: 1200px; }
.single-product div.images img { border-radius: calc(var(--noreva-radius) * 1.4); box-shadow: 0 30px 60px -20px rgba(11,31,58,.35); }
.single-product .product_title { font-size: clamp(26px, 3.5vw, 36px); }
.single-product p.price { font-size: 26px; color: var(--noreva-primary); font-weight: 700; margin: 12px 0; }
.single-product .cart .button, .single-product a.button {
	background: var(--noreva-primary); color: #fff; padding: 15px 34px; border-radius: var(--noreva-radius);
	font-weight: 700; border: none; transition: transform .25s ease, box-shadow .25s ease;
}
.single-product .cart .button:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -8px rgba(11,31,58,.5); }
.single-product .quantity input { padding: 12px; border: 1px solid #ddd; border-radius: 8px; width: 64px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 8px; border-bottom: 1px solid #eee; margin-bottom: 24px; }
.woocommerce-tabs ul.tabs li a { padding: 12px 20px; display: block; font-weight: 600; }
.woocommerce-tabs ul.tabs li.active a { color: var(--noreva-primary); border-bottom: 2px solid var(--noreva-secondary); }
.related.products, .upsells.products { margin-top: 56px; }
.related.products > h2, .upsells.products > h2 { font-size: 26px; margin-bottom: 20px; }

.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td { padding: 14px; border-bottom: 1px solid #eee; text-align: left; }
.woocommerce-checkout-payment, #payment { background: #fff; border-radius: var(--noreva-radius); padding: 20px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
	background: #fff; border-left: 4px solid var(--noreva-secondary); padding: 14px 18px; border-radius: 8px; list-style: none;
}
.woocommerce-error { border-left-color: #c0392b; }

/* ---------------- AJAX Load More ---------------- */
.noreva-load-more-wrap { display: flex; justify-content: center; margin: 44px 0 8px; }
.noreva-load-more-btn { position: relative; min-width: 168px; }
.noreva-load-more-spinner {
	display: none; width: 16px; height: 16px; margin-left: 10px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; vertical-align: -3px;
	animation: noreva-spin .7s linear infinite;
}
.noreva-load-more-wrap.is-loading .noreva-load-more-spinner { display: inline-block; }
.noreva-load-more-wrap.is-loading .noreva-load-more-btn { opacity: .85; cursor: progress; }
@keyframes noreva-spin { to { transform: rotate(360deg); } }

/* ---------------- Homepage blog section ---------------- */
.home-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.home-blog-card { background: #fff; border-radius: var(--noreva-radius); overflow: hidden; box-shadow: 0 10px 26px -16px rgba(11,31,58,.3); transition: transform .3s ease, box-shadow .3s ease; }
.home-blog-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -18px rgba(11,31,58,.35); }
.home-blog-card .blog-card-media { display: block; aspect-ratio: 16/10; overflow: hidden; background: #f6f3ec; }
.home-blog-card .blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.home-blog-card .blog-card-media-placeholder { width: 100%; height: 100%; background: #f6f3ec; }
.home-blog-card .blog-card-body { padding: 20px 22px 24px; }
.home-blog-card .entry-meta { font-size: 12px; color: #8a8a8a; margin-bottom: 8px; }
.home-blog-card .blog-card-title { font-size: 19px; margin-bottom: 8px; }
.home-blog-card .blog-card-title a:hover { color: var(--noreva-secondary); }
.home-blog-card p { color: #5b5b5b; font-size: 14.5px; }
.home-blog-card .blog-card-link { font-weight: 600; color: var(--noreva-primary); }
.home-blog-card .blog-card-link:hover { color: var(--noreva-secondary); }

/* ---------------- Search results (products + posts) ---------------- */
.noreva-search-section-title { font-size: 20px; margin: 32px 0 16px; }
.noreva-search-products ul.products { margin-top: 0 !important; }
.noreva-search-posts { margin-top: 8px; }

/* ---------------- 3D reveal-on-scroll (progressive enhancement) ---------------- */
.noreva-reveal { opacity: 0; transform: translateY(28px) rotateX(6deg); transition: opacity .7s ease, transform .7s ease; }
.noreva-reveal.is-visible { opacity: 1; transform: translateY(0) rotateX(0); }

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
	.hero-inner, .ceo-inner, .contact-grid, .single-product div.product { grid-template-columns: 1fr; }
	.noreva-hero { min-height: 0; padding: 52px 0 88px; text-align: left; }
	.has-multiple .hero-slides { min-height: 560px; }
	.hero-copy { max-width: 100%; }
	.hero-heading { font-size: clamp(30px, 8vw, 42px); }
	.hero-sub { font-size: 16px; max-width: 100%; }
	.hero-actions { flex-wrap: wrap; gap: 10px; }
	.hero-actions .btn { padding: 14px 26px; font-size: 13px; }
	.hero-slider-arrow { width: 36px; height: 36px; top: 44%; }
	.hero-slider-prev { left: 8px; }
	.hero-slider-next { right: 8px; }
	.hero-slider-dots { bottom: 16px; }
	.footer-columns { grid-template-columns: 1fr 1fr; }
	.noreva-blog-layout { grid-template-columns: 1fr; padding: 40px 20px; }
	.home-blog-grid { grid-template-columns: repeat(2, 1fr); }
	/*
	 * Only the primary nav links and the account icon collapse into the
	 * hamburger menu on mobile — the search icon (.header-search-btn) stays
	 * visible and working (see the fix note on .site-branding above for why
	 * it can no longer distort the logo when tapped).
	 */
	.main-navigation, .header-account-btn { display: none; }
	.mobile-menu-toggle { display: inline-flex; }
	.related-posts-grid { grid-template-columns: 1fr; }

	/*
	 * Isolate the search dropdown from the header row entirely: on mobile
	 * it becomes an absolutely-positioned overlay anchored to the sticky
	 * header, so opening/closing it can never change the width available
	 * to `.site-branding` (and therefore never affects the logo) no matter
	 * what content is inside the search form.
	 */
	.noreva-search-panel {
		position: absolute; left: 0; right: 0; top: 100%;
		box-shadow: 0 16px 30px -12px rgba(11,31,58,.25);
	}
	.noreva-search-panel .noreva-container { padding: 0 16px; }
	.search-form { flex-wrap: wrap; }
	.search-field { min-width: 140px; }
}
@media (max-width: 600px) {
	.footer-columns { grid-template-columns: 1fr; }
	.form-row-2 { grid-template-columns: 1fr; }
	.newsletter-inner { flex-direction: column; align-items: flex-start; }
	.trust-bar-inner { gap: 20px; }
	/* Keep the actual announcement message visible on small screens; the
	   secondary phone number is what makes room by hiding first. */
	.noreva-topbar-contact { display: none; }

	/* Two-up cards on phones instead of one huge stacked card per row. */
	.category-grid,
	.product-grid,
	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px;
	}
	.category-card-body { padding: 10px 12px; }
	.category-card-body h3 { font-size: 14px; margin-bottom: 2px; }
	.category-count { font-size: 11px; }
	.product-card-body,
	ul.products li.product { padding-left: 0; padding-right: 0; }
	.product-card-body { padding: 12px 14px; gap: 4px; }
	.product-card-title,
	ul.products li.product .woocommerce-loop-product__title { font-size: 13px; }
	.product-card-cat { font-size: 10px; }
	.product-card-price,
	ul.products li.product .price { font-size: 13px; padding-left: 0; padding-right: 0; }
	.product-card-actions .btn,
	ul.products li.product .button {
		padding: 8px 12px; font-size: 12px; width: 100%; text-align: center;
		margin-left: 0; margin-right: 0;
	}
	ul.products li.product .woocommerce-loop-product__title { padding: 0 14px; margin: 10px 0 4px; }
	ul.products li.product .price { padding: 0 14px; }
	ul.products li.product .star-rating { padding: 0 14px; }
	.why-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.why-card { padding: 18px 14px; }
	.testimonial-grid { grid-template-columns: 1fr; }
	.home-blog-grid { grid-template-columns: 1fr; gap: 18px; }
	.noreva-load-more-btn { width: 100%; }
}

@media (max-width: 400px) {
	.category-grid, .product-grid, ul.products { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}