/*
Theme Name: Evershine
Theme URI: https://evershine.example.com
Author: Evershine Dev Team
Author URI: https://evershine.example.com
Description: An ultra-luxury B2B corporate WordPress theme built for Evershine Chemical, a B2B chemical supplier. v6.2.0 is a targeted bug-fix pass: (A) the mobile hero banner's dark navy vignette has been softened specifically under 768px so the plant photo reads bright and crisp instead of near-black, while headline/subheading keep legible text-shadows in place of the old heavy overlay; (B) every carousel Prev/Next control (Featured Categories, the Featured Products category-pill scroller, and Client Testimonials) now shares one unified solid-navy-circle + gold-icon button style with a smooth darken/scale hover state; (C) the blue certifications ticker's desktop freeze is fixed — the badge track is now duplicated 10x (was 3x) so wide/ultrawide monitors always have enough off-screen track for the seamless `-10%` `@keyframes tickerLoop` loop, instead of running out of content mid-loop; (D) the "Why Choose Us" cards were upgraded with gradient-filled gold icon roundels (inverting to a navy/gold-ring treatment on hover), a gentle icon float animation while the card is hovered, and a stronger `translateY(-8px)` lift with a gold glow shadow. v6.1.0's Clean Industrial Enterprise pass is otherwise unchanged. (1) HERO: the particle/molecular-network canvas (Three.js) has been removed entirely — no canvas mesh networks, no 3D vector beakers/bottles — replaced with a clean, real, full-bleed chemical-plant photograph, a luxury dark-navy vignette (rgba(6,12,27,0.75)), and bottom-aligned typography (bold "EVERSHINE CHEMICALS" headline with a gold accent, a single-line subheading, and solid-gold "Browse Products" / glass-outline "Request Quote" CTAs) so the center of the background photo stays clear. (2) FEATURED CATEGORIES: the filled gold "Product Portfolio" pill badge is replaced with a minimalist "— OUR PORTFOLIO —" tracker label, the "0+ Products" count pill beneath each category title is removed completely (card image/title structure otherwise unchanged), the "Featured Categories" heading now carries sharper letter-spacing, and the Prev/Next controls are restyled as sleek, modern Shopify-Plus-style square control buttons top-right of the section header with smooth hover transitions. (3) PERFORMANCE: the mobile off-canvas drawer now animates via a GPU-composited transform (translate3d) instead of an animated `right` offset, with `will-change: transform, opacity` applied at rest so the browser pre-promotes the compositor layer and the first tap opens with an instantaneous, zero-jank slide — no backdrop-blur filters run during the open/close transition. The blue B2B chemical ticker keeps its pure-CSS `@keyframes tickerLoop` infinite marquee (translate3d-based, GPU-accelerated), now confirmed continuous on both desktop and mobile. Also carries forward all prior fixes: desktop nav single-line uppercase (13px/600/0.6px tracking, solid #0F2C59) with a plain gold (#D4AF37) hover/active color shift and no underline; the deep royal-blue (#0F2C59) infinite B2B chemical ticker below Featured Categories; and the Client Testimonials desktop nav arrows (edge-positioned, forced visible ≥1024px). Also includes a premium glassmorphism sticky header, a full-screen slide-out mobile drawer with SVG nav icons and quick-contact pills, Shopify-style pill-shaped Add to Cart/Inquiry buttons, a compact 2x2 gold-glow "Why Choose Us" grid, FAQ, and a streamlined map/bulk-enquiry section above the footer. Built with WooCommerce support, Tailwind CSS (CDN) and Swiper (CDN) for fast, responsive styling.
Version: 6.2.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: evershine
Tags: e-commerce, custom-menu, translation-ready, responsive-layout

Evershine WordPress Theme, (C) Evershine Dev Team
Evershine is distributed under the terms of the GNU GPL.
*/

/* ==========================================================================
   Base resets & typography (small helper styles that Tailwind doesn't cover)
   ========================================================================== */

/* Prevents any off-canvas panel (mobile drawer, cart drawer, modals) or
   an occasional oversized/unwrapped element from ever producing a
   horizontal scrollbar on small screens — fixed-position elements can
   otherwise be counted in the page's scrollable area even while
   sitting off-screen via a negative right/left offset. */
html {
	overflow-x: hidden;
	max-width: 100%;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #1a1a1a;
	background-color: #ffffff;
	overflow-x: hidden;
	max-width: 100%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

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

/* Brand color helpers (fallbacks in case Tailwind CDN fails to load) */
.text-navy { color: #0F2C59; }
.bg-navy { background-color: #0F2C59; }
.border-navy { border-color: #0F2C59; }
.text-gold { color: #C9A227; }
.bg-gold { background-color: #C9A227; }

/* Glassmorphism sticky header — the translucent blur layer itself is a
   Tailwind utility div inside header.php (bg-white/70 backdrop-blur-xl);
   this rule only handles positioning and the elevated shadow once the
   page has scrolled (toggled via the .is-scrolled class in main.js). */
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow 0.3s ease-in-out;
}

.site-header.is-scrolled {
	box-shadow: 0 8px 30px rgba(0, 51, 102, 0.12);
}

/* ==========================================================================
   v6.1.0 — Zero-Lag Mobile Drawer Menu
   Full-screen dark-gradient slide-out with custom SVG nav icons,
   quick-contact pills, and a glass close button.

   PERFORMANCE FIX: the drawer used to animate the `right` offset
   (-100% → 0), which is a layout-triggering property — the browser has
   to recalculate the box position on every frame and only promotes a
   compositor layer once the transition actually starts, which is what
   caused the visible lag/jank on the very first tap. It now sits at
   translateX(100%) permanently and only ever animates `transform`
   (GPU-composited) with `will-change: transform, opacity` applied at
   rest, so the compositor layer is already promoted before the user
   ever taps the menu button — the first open is exactly as fast as
   every open after it. No backdrop-blur filter runs on the drawer
   itself during the transition, so there's nothing for the compositor
   to repaint while it slides.
   ========================================================================== */
.mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 88%;
	max-width: 380px;
	height: 100vh;
	height: 100dvh;
	background:
		radial-gradient( circle at 85% 0%, rgba( 201, 162, 39, 0.16 ), transparent 45% ),
		linear-gradient( 165deg, #0b132b 0%, #071c30 55%, #010a12 100% );
	z-index: 1001;
	transform: translate3d( 100%, 0, 0 );
	will-change: transform, opacity;
	transition: transform 0.35s cubic-bezier( 0.16, 1, 0.3, 1 );
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	box-shadow: -20px 0 60px rgba( 0, 0, 0, 0.35 );
}

.mobile-drawer.is-open {
	transform: translate3d( 0, 0, 0 );
}

.drawer-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	width: 38px;
	border-radius: 9999px;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.drawer-close-btn:hover {
	background: rgba( 201, 162, 39, 0.18 );
	border-color: rgba( 201, 162, 39, 0.5 );
	transform: rotate( 90deg );
}

/* Nav links: custom SVG icon + label, subtle hover slide + gold accent */
.drawer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.drawer-nav-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 12px;
	border-radius: 12px;
	color: rgba( 255, 255, 255, 0.92 );
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.drawer-nav-link:hover,
.drawer-nav-link:focus-visible {
	background: rgba( 255, 255, 255, 0.06 );
	color: #C9A227;
	padding-left: 18px;
}

.drawer-nav-icon {
	flex-shrink: 0;
	display: inline-flex;
	height: 34px;
	width: 34px;
	border-radius: 9999px;
	align-items: center;
	justify-content: center;
	background: rgba( 201, 162, 39, 0.12 );
	border: 1px solid rgba( 201, 162, 39, 0.3 );
	color: #C9A227;
}

.drawer-nav-icon svg {
	height: 16px;
	width: 16px;
}

/* Quick Contact Pills */
.drawer-contact-pills {
	display: flex;
	gap: 10px;
}

.contact-pill {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 9999px;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contact-pill:hover {
	background: rgba( 201, 162, 39, 0.14 );
	border-color: rgba( 201, 162, 39, 0.4 );
}

.contact-pill svg {
	height: 15px;
	width: 15px;
	flex-shrink: 0;
	color: #C9A227;
}

.mobile-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
	transition: opacity 0.3s ease-in-out;
	/* Plain flat color, no backdrop-blur — nothing for the compositor
	   to repaint while the drawer's transform animates over it. */
}

.mobile-drawer-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Cart badge */
.cart-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background: #C9A227;
	color: #0F2C59;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 9999px;
}

/* Product card hover (Featured Categories card styling lives further
   down, under "Featured Categories — B2B dark-gradient grid"). */
.product-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* FAQ accordion */
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
}

.faq-item.is-open .faq-answer {
	max-height: 500px;
}

.faq-item.is-open .faq-icon {
	transform: rotate(45deg);
}

.faq-icon {
	transition: transform 0.2s ease-in-out;
}

/* Skip link accessibility */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #0F2C59;
	color: #fff;
	padding: 10px 16px;
	z-index: 9999;
}

.skip-link:focus {
	left: 10px;
	top: 10px;
}

/* ==========================================================================
   3D Hero (added for the glassmorphism / 3D redesign)
   ========================================================================== */

/* Smooth in-page scrolling for anchor links (e.g. skip link, future #anchors). */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.hero-cta-glass {
	box-shadow: 0 8px 30px rgba(1, 5, 15, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hero-cta-primary {
	background-color: #D4AF37;
	color: #0b132b;
	box-shadow: 0 8px 24px rgba(212, 175, 55, 0.28);
}

.hero-cta-primary:hover {
	box-shadow: 0 14px 34px rgba(212, 175, 55, 0.4);
}

.hero-gold-accent {
	color: #D4AF37;
}

/* ==========================================================================
   v6.1.0 — Clean Industrial Enterprise Hero
   A real, full-bleed chemical-plant photograph (no canvas, no 3D mesh,
   no vector beakers/bottles) with a luxury dark-navy vignette and
   BOTTOM-ALIGNED content, so the center of the photo stays clear and
   unobstructed. Height floors keep the section tall and spacious
   without cropping the top/bottom of the background image:
     - Mobile   (<768px):  min-height 560px, background-position
                            center top so the plant/apparatus in the
                            banner image stays fully visible.
     - Desktop  (≥1024px): min-height 85vh (720px floor via min-height,
                            whichever is greater on tall/short viewports).
   justify-content: flex-end anchors the content block to the bottom of
   the hero; the vignette gradient underneath does the heavy lifting for
   text contrast, so no glass/blur card is required behind the copy.
   ========================================================================== */
.hero-banner {
	min-height: 560px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

@media ( max-width: 767px ) {
	.hero-banner {
		min-height: 560px;
		background-position: center top;
	}
}

@media ( min-width: 768px ) and ( max-width: 1023px ) {
	.hero-banner {
		min-height: 650px;
		background-position: center center;
	}
}

@media ( min-width: 1024px ) {
	.hero-banner {
		min-height: 85vh;
		background-position: center center;
	}
}

/* Bottom-anchored copy block: headline, one-line subheading, dual CTAs.
   Left-aligned on desktop for a grounded enterprise feel, centered on
   small screens where a left rag would crowd the viewport edge. */
.hero-content {
	text-align: center;
}

@media ( min-width: 768px ) {
	.hero-content {
		text-align: left;
	}
}

.hero-headline {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.08;
	color: #ffffff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.hero-subheading {
	color: rgba(255, 255, 255, 0.88);
	font-weight: 500;
	line-height: 1.5;
}

/* ==========================================================================
   Premium Desktop Header Navigation — semi-bold corporate typography in
   deep navy, with a smooth gold accent shift and an animated bottom
   highlight line on hover/active states. Also drives the gold-bordered
   glass WhatsApp CTA alongside it.
   ========================================================================== */
/* Header row — logo / nav / actions locked into a single tight
   space-between flex row so the WhatsApp CTA can never be pushed
   off-screen, no matter how many primary menu items exist. */
.header-inner-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* Desktop menu container — flex-nowrap + a compact horizontal gap so
   items never collide or force each other to wrap; falls back to a
   horizontal scroll (rather than wrapping to 2-3 lines) on the rare
   ultra-dense menu that still overflows a narrow desktop viewport. */
.main-navigation,
.main-nav-menu {
	flex-wrap: nowrap;
}

.main-nav-menu {
	gap: 16px;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.main-nav-menu::-webkit-scrollbar {
	display: none;
}

.main-nav-menu > li {
	flex: 0 0 auto;
}

/* v3.8.0: Enterprise-grade desktop nav typography: primary corporate
   sans-serif, semi-bold weight, uppercase micro-tracking — a single
   solid navy tone, single-line uppercase. All bottom-border/underline
   accents (previously an animated ::after line) have been permanently
   removed per spec; hover/active state is now a plain, subtle text-color
   shift to gold with no line of any kind. */
.main-navigation li a,
.nav-fine li > a,
.nav-link {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	color: #0F2C59;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: none;
	transition: color 0.3s ease;
}

.main-navigation li a:hover,
.main-navigation li a:focus-visible,
.main-navigation li.current-menu-item > a,
.nav-fine li > a:hover,
.nav-fine li > a:focus-visible,
.nav-fine li.current-menu-item > a,
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
	color: #D4AF37;
	text-decoration: none;
	border-bottom: none;
}

.whatsapp-cta {
	box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.15), 0 10px 26px rgba(1, 5, 15, 0.18);
}

.whatsapp-cta:hover {
	box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.4), 0 14px 30px rgba(201, 162, 39, 0.22);
}

/* ==========================================================================
   Hero Background Image Slideshow — customizer-uploaded images that
   crossfade behind the 3D particle canvas (assets/js/hero-3d.js toggles
   .is-active on a timer, per device set). Sits at the back of the hero's
   stacking order; the canvas, gradient scrim and glass content card all
   layer above it.

   v6.0.0: split into two independent sets so desktop (16:9 landscape)
   and mobile (9:16 vertical) banners never share — or crop into — the
   same image. Only one set is ever visible at a time via display:none,
   controlled purely by viewport width:
     - .hero-bg-slider--desktop: visible ≥768px
     - .hero-bg-slider--mobile:  visible <768px
   ========================================================================== */
.hero-bg-slider {
	z-index: 0;
}

.hero-bg-slider--desktop {
	display: none;
}

.hero-bg-slider--mobile {
	display: block;
}

@media ( min-width: 768px ) {
	.hero-bg-slider--desktop {
		display: block;
	}

	.hero-bg-slider--mobile {
		display: none;
	}
}

.hero-bg-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.6s ease-in-out;
}

@media ( max-width: 767px ) {
	.hero-bg-slide {
		background-position: center top;
	}
}

/* v6.1.0: Luxury dark-navy vignette over the hero photo — a bottom-heavy
   radial/linear wash (base tone rgba(6,12,27,0.75)) so the bottom-aligned
   headline/CTAs stay crisp and legible while the center of the real
   background photograph is left clear and unobstructed, per spec. */
.hero-overlay-gradient {
	background:
		linear-gradient( to top, rgba( 6, 12, 27, 0.92 ) 0%, rgba( 6, 12, 27, 0.75 ) 38%, rgba( 6, 12, 27, 0.35 ) 100% );
	z-index: 0;
}

/* v6.2.0 FIX — On mobile the same heavy vignette used to make the whole
   banner photo read as near-black because the shorter viewport shows a
   much larger share of the top/mid gradient stops (0.92 / 0.75) than a
   tall desktop viewport does. Soften every stop specifically under
   768px so the plant photograph stays bright and crisp while the
   bottom-anchored headline/CTA text is still comfortably legible. */
@media ( max-width: 768px ) {
	.hero-overlay-gradient {
		background:
			linear-gradient( to top, rgba( 6, 12, 27, 0.62 ) 0%, rgba( 6, 12, 27, 0.42 ) 42%, rgba( 6, 12, 27, 0.12 ) 100% );
	}

	.hero-headline {
		text-shadow: 0 2px 14px rgba( 0, 0, 0, 0.55 ), 0 1px 3px rgba( 0, 0, 0, 0.7 );
	}

	.hero-subheading {
		text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.55 );
	}
}

.hero-bg-slide.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hero-bg-slide {
		transition: none;
	}
}

/* ==========================================================================
   Shopify-Style Product Section — category pills, product badges,
   weight/size price display, add-to-cart toast, and the inquiry modal.
   ========================================================================== */

/* "View All Products →" CTA — sits centered directly below the Featured
   Products grid, linking through to the main WooCommerce shop page.
   Solid navy pill with a gold bottom accent at rest; on hover it inverts
   to a gold fill so it reads as the clear next step off the homepage. */
.btn-view-all-products {
	background: #0F2C59;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.95rem 2.25rem;
	border-radius: 9999px;
	border: 1.5px solid #0F2C59;
	border-bottom: 3px solid #C9A227;
	box-shadow: 0 10px 24px rgba( 15, 44, 89, 0.18 );
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-view-all-products:hover,
.btn-view-all-products:focus-visible {
	background: #C9A227;
	color: #0F2C59;
	border-color: #C9A227;
	transform: translateY( -2px );
	box-shadow: 0 14px 28px rgba( 201, 162, 39, 0.3 );
}

.btn-view-all-products:active {
	transform: translateY( 0 );
}

/* Horizontal swipeable / mouse-draggable category pills.
   Desktop drag support + the .is-dragging cursor swap are wired up in
   assets/js/homepage-sliders.js; touch devices get free native
   momentum scrolling from overflow-x + scroll-snap alone. */
.category-pills-wrap {
	--evershine-fade-w: 40px;
}

.category-pills {
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}

.category-pills::-webkit-scrollbar {
	display: none;
}

.category-pills.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

/* Left/right gradient fade masks — signal there's more to scroll.
   Sit above the pills (z-index), fade themselves out via opacity once
   the user has scrolled to that edge (classes toggled by JS). */
.category-pills-wrap::before,
.category-pills-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--evershine-fade-w);
	z-index: 2;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.25s ease-in-out;
}

.category-pills-wrap::before {
	left: 0;
	/* Matches the Featured Products section background (Tailwind gray-50) */
	background: linear-gradient( to right, #f9fafb 0%, rgba( 249, 250, 251, 0 ) 100% );
}

.category-pills-wrap::after {
	right: 0;
	background: linear-gradient( to left, #f9fafb 0%, rgba( 249, 250, 251, 0 ) 100% );
}

.category-pills-wrap.is-scrolled-start::before {
	opacity: 0;
}

.category-pills-wrap.is-scrolled-end::after {
	opacity: 0;
}

.category-pill {
	scroll-snap-align: start;
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.5rem 1.1rem;
	border-radius: 9999px;
	border: 1px solid rgba(0, 51, 102, 0.15);
	background: #ffffff;
	color: #0F2C59;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.category-pill:hover {
	border-color: #0F2C59;
}

.category-pill.is-active {
	background: #0F2C59;
	color: #ffffff;
	border-color: #0F2C59;
}

/* Category badge shown over the product thumbnail */
.product-badge {
	pointer-events: none;
}

/* Line-clamp fallback for the short description, in case the Tailwind
   CDN build in use predates the built-in line-clamp utilities. */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Add to Cart confirmation toast */
.evershine-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	background: #0F2C59;
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	border-radius: 9999px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
	z-index: 1200;
	max-width: 90vw;
	text-align: center;
}

.evershine-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Product Inquiry pop-up modal */
.inquiry-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 51, 102, 0.55);
	z-index: 1100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease-in-out;
}

.inquiry-modal-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.inquiry-modal {
	position: fixed;
	inset: 0;
	z-index: 1101;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease-in-out;
}

.inquiry-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.inquiry-modal-panel {
	background: #ffffff;
	border-radius: 16px;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px 24px;
	position: relative;
	transform: translateY(12px) scale(0.98);
	transition: transform 0.25s ease-in-out;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

.inquiry-modal.is-open .inquiry-modal-panel {
	transform: translateY(0) scale(1);
}

.inquiry-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 1.5rem;
	line-height: 1;
	color: #6b7280;
	background: transparent;
	border: none;
	cursor: pointer;
}

.inquiry-modal-close:hover {
	color: #0F2C59;
}

@media (max-width: 480px) {
	.inquiry-modal-panel {
		padding: 24px 18px;
	}
}

/* ==========================================================================
   Featured Categories — Swiper slider, external-title B2B cards on a
   white section. 4 per view / 24px gap at desktop ≥1024px, 2 per view /
   16px gap on mobile <768px (see the .category-swiper init + breakpoints
   in assets/js/homepage-sliders.js).
   ========================================================================== */

/* v6.1.0: Minimalist tracker-style eyebrow label — replaces the filled
   gold "Product Portfolio" pill badge. Plain uppercase gold text with
   wide tracking; the em-dashes are typed directly into the string so no
   extra decorative line elements are needed. */
.section-tracker-label {
	display: inline-block;
	color: #C9A227;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

/* v6.1.0: sharper letter-spacing on the "Featured Categories" heading,
   per the Shopify-Plus-high-end spec. */
.featured-categories-title {
	font-size: 1.875rem;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #0F2C59;
}

.category-swiper-container {
	/* Room for the lift hover effect on each card without clipping. */
	padding: 6px 2px 28px;
	margin: -6px -2px -28px;
}

.category-swiper {
	overflow: visible !important;
	padding-bottom: 4px;
}

.category-swiper .swiper-slide {
	height: auto;
}

/* v6.1.0: Sleek modern Shopify-Plus-style SQUARE control buttons,
   top-right of the section header — replaces the plain circular arrow
   buttons. Slightly rounded corners (not a full pill), a crisp 1px
   border, and a smooth navy-fill hover transition. */
/* v6.2.0 — Unified carousel arrow styling: every Prev/Next control in
   Featured Categories, Featured Products (category pill scroller) and
   Client Testimonials now shares the exact same solid navy circle +
   gold icon treatment, so the whole homepage reads as one consistent,
   premium control language instead of mismatched plain/white buttons. */
.swiper-arrow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	width: 42px;
	border-radius: 50%;
	background: #0B132B;
	color: #D4AF37;
	border: 1px solid #D4AF37;
	cursor: pointer;
	transition: background-color 0.25s cubic-bezier( 0.16, 1, 0.3, 1 ),
		border-color 0.25s cubic-bezier( 0.16, 1, 0.3, 1 ),
		color 0.25s cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 0.2s cubic-bezier( 0.16, 1, 0.3, 1 ),
		box-shadow 0.25s cubic-bezier( 0.16, 1, 0.3, 1 );
	box-shadow: 0 4px 14px rgba( 6, 12, 27, 0.22 );
}

.swiper-arrow-btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
}

.swiper-arrow-btn:hover {
	background: #060C1B;
	color: #F2CE5C;
	border-color: #F2CE5C;
	transform: translateY( -2px ) scale( 1.05 );
	box-shadow: 0 10px 24px rgba( 6, 12, 27, 0.32 );
}

.swiper-arrow-btn:active {
	transform: translateY( 0 ) scale( 0.97 );
}

.swiper-arrow-btn.is-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
	transform: none;
	box-shadow: 0 4px 14px rgba( 6, 12, 27, 0.22 );
}

@media ( prefers-reduced-motion: reduce ) {
	.swiper-arrow-btn {
		transition: none;
	}
}

/* Safety net for Swiper's own default navigation elements (in case any
   are ever added alongside our custom .swiper-arrow-btn buttons):
   hidden on mobile/tablet for a clean touch-swipe feel, shown as a flex
   row on desktop (≥1024px) alongside/above the slides they control. */
.swiper-button-next,
.swiper-button-prev {
	display: none;
}

@media ( min-width: 1024px ) {
	.swiper-button-next,
	.swiper-button-prev {
		display: flex;
	}
}

/* ---------------------------------------------------------------------
   Category Card v2 — external bottom typography.
   The card is a plain flex column: a self-contained IMAGE BOX on top
   (photo only, zero text overlay) and an INFO BOX directly beneath it
   holding the title + count pill in normal dark-on-white typography.
   This replaces the earlier "text-over-image" scrim treatment.
   --------------------------------------------------------------------- */
.category-card-v2 {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Image box: photo (or gradient fallback) only — no text ever sits on
   top of it. Fixed heights keep every card in a row visually aligned:
   260px on mobile, 320px on desktop. */
.category-card-image-box {
	position: relative;
	width: 100%;
	height: 260px;
	border-radius: 12px;
	overflow: hidden;
	background-color: #051524;
	background-image:
		radial-gradient( circle at 18% 18%, rgba( 201, 162, 39, 0.18 ), transparent 45% ),
		linear-gradient( 150deg, #0a3255 0%, #071c30 55%, #010a12 100% );
	box-shadow: 0 12px 28px rgba( 15, 23, 42, 0.14 ), 0 2px 8px rgba( 15, 23, 42, 0.08 );
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

@media ( min-width: 1024px ) {
	.category-card-image-box {
		height: 320px;
	}
}

.category-card-image-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.category-card-v2:hover .category-card-image-box img,
.category-card-v2:focus-visible .category-card-image-box img {
	transform: scale( 1.04 );
}

.category-card-v2:hover .category-card-image-box,
.category-card-v2:focus-visible .category-card-image-box {
	box-shadow: 0 22px 44px rgba( 15, 23, 42, 0.22 ), 0 0 0 1px rgba( 201, 162, 39, 0.35 );
}

.category-card-pattern {
	width: 100%;
	height: 100%;
	background-image: radial-gradient( rgba( 255, 255, 255, 0.08 ) 1px, transparent 1px );
	background-size: 16px 16px;
}

/* Info box: sits BELOW the image box in normal document flow — spacious
   padding so the section feels premium and uncluttered rather than
   cramped against the photo. */
.category-card-info-box {
	padding: 16px 2px 0;
}

@media ( min-width: 768px ) {
	.category-card-info-box {
		padding-top: 18px;
	}
}

/* Bold, dark corporate title — fluid scale so long category names
   (e.g. "Cosmetic & Personal Care Ingredients") shrink gracefully
   instead of wrapping awkwardly. */
.category-card-title-v2 {
	font-size: clamp( 0.95rem, 1.6vw + 0.6rem, 1.0625rem );
	line-height: 1.35;
	font-weight: 700;
	color: #0F2C59;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
	margin: 0 0 8px;
	transition: color 0.25s ease;
}

.category-card-v2:hover .category-card-title-v2,
.category-card-v2:focus-visible .category-card-title-v2 {
	color: #C9A227;
}

/* v6.1.0: the "0+ Products" count pill (.category-count-pill-v2) that
   used to sit under the title has been removed entirely per spec —
   the card now shows only the title and the "View Collection" hover
   cue directly beneath it. */
.category-card-cta-v2 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	color: #C9A227;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	transform: translateY( 6px );
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.category-card-v2:hover .category-card-cta-v2,
.category-card-v2:focus-visible .category-card-cta-v2 {
	opacity: 1;
	transform: translateY( 0 );
}

/* Lift the whole card slightly on hover — image box + info box move
   together as one unit. */
.category-card-v2 {
	transition: transform 0.35s ease;
}

.category-card-v2:hover,
.category-card-v2:focus-visible {
	transform: translateY( -4px );
}

@media ( prefers-reduced-motion: reduce ) {
	.category-card-image-box img,
	.category-card-image-box,
	.category-card-title-v2,
	.category-card-cta-v2,
	.category-card-v2 {
		transition: none;
	}
}

/* ==========================================================================
   Client Testimonials — interactive Swiper carousel with visible desktop
   (≥1024px) arrow navigation + a 5000ms autoplay fallback, full touch-swipe
   support at every breakpoint, gold quotation-mark background accents, and
   premium elevated cards. Pagination dots are built + kept in sync with the
   active slide automatically by Swiper (see assets/js/homepage-sliders.js).
   ========================================================================== */
.testimonial-swiper-container {
	padding: 8px 2px 4px;
	margin: -8px -2px -4px;
}

.testimonial-swiper {
	overflow: visible !important;
}

.testimonial-swiper .swiper-slide {
	height: auto;
}

/* ---------------------------------------------------------------------
   v3.7.1 FIX — Testimonials desktop nav arrows were not rendering on
   desktop viewports. Root cause: the Tailwind CDN <script> (cdn.tailwindcss.com)
   injects its generated utility stylesheet into <head> AFTER style.css,
   so Tailwind's unscoped `.flex` utility could win same-specificity
   cascade ties against our plain `.testimonial-swiper-nav { display: flex }`
   rule inside the desktop media query. The arrows were also positioned
   inline with the section header instead of on the slider itself.
   Fix: (1) reposition the prev/next buttons to sit absolutely on the
   left/right edges of the testimonial slider wrapper, vertically
   centered, and (2) force their visibility on desktop with !important
   so no later-loaded utility stylesheet can suppress them again.
   --------------------------------------------------------------------- */
.testimonial-swiper-edge-arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 20;
}

.testimonial-swiper-edge-arrow.testimonial-swiper-prev {
	left: -6px;
}

.testimonial-swiper-edge-arrow.testimonial-swiper-next {
	right: -6px;
}

@media ( min-width: 1024px ) {
	/* Explicit desktop override — !important guards against any
	   later-loaded stylesheet (e.g. the Tailwind CDN runtime bundle)
	   re-hiding these buttons via an equal-specificity utility class. */
	.testimonial-swiper-edge-arrow,
	.testimonial-swiper-nav,
	.swiper-button-next,
	.swiper-button-prev {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.testimonial-swiper-edge-arrow.testimonial-swiper-prev {
		left: -22px;
	}

	.testimonial-swiper-edge-arrow.testimonial-swiper-next {
		right: -22px;
	}

	/* Premium circular treatment for the testimonial edge arrows — now
	   the same solid navy / gold-icon aesthetic shared by every other
	   carousel control on the homepage (see the base .swiper-arrow-btn
	   rules above), just re-declared here with !important so a
	   later-loaded stylesheet can never re-hide/flatten them. */
	.testimonial-swiper-edge-arrow,
	.swiper-button-next,
	.swiper-button-prev {
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: #0B132B;
		color: #D4AF37;
		border: 1px solid #D4AF37;
		box-shadow: 0 4px 14px rgba( 6, 12, 27, 0.22 );
		transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	}

	.testimonial-swiper-edge-arrow:hover,
	.swiper-button-next:hover,
	.swiper-button-prev:hover {
		background: #060C1B;
		color: #F2CE5C;
		border-color: #F2CE5C;
		transform: translateY( -50% ) scale( 1.05 );
		box-shadow: 0 10px 24px rgba( 6, 12, 27, 0.32 );
	}

	.testimonial-swiper-edge-arrow svg,
	.swiper-button-next svg,
	.swiper-button-prev svg {
		width: 16px;
		height: 16px;
	}

	.testimonial-swiper-edge-arrow.is-disabled {
		opacity: 0.35 !important;
		pointer-events: none;
	}
}

/* Mobile / tablet (<1024px): arrows stay fully hidden so nothing
   crowds the touch-first layout — full swipe-gesture support remains
   enabled on the slider regardless (Swiper's touch handling is always
   on; only the visible click targets are hidden here). Explicitly
   re-stated below 768px per spec so mobile phones never show arrows
   even if a future edit changes the desktop rule above. */
.testimonial-swiper-nav {
	display: none;
}

@media ( max-width: 767px ) {
	.testimonial-swiper-edge-arrow,
	.testimonial-swiper-nav {
		display: none !important;
	}
}

/* Premium card elevation — soft, wide-spread shadow + gentle lift on hover */
.testimonial-card {
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.05 );
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 22px 44px rgba( 0, 0, 0, 0.08 );
}

/* Oversized gold quotation mark, sitting low-opacity behind the copy
   as a subtle background accent — purely decorative (aria-hidden). */
.testimonial-quote-mark {
	position: absolute;
	top: -0.5rem;
	right: 0.75rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 6rem;
	line-height: 1;
	font-weight: 700;
	color: #C9A227;
	opacity: 0.12;
	pointer-events: none;
	user-select: none;
}

/* Refined quotation typography — serif italic reads as an editorial
   "review pull-quote" rather than plain body copy. */
.testimonial-quote {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
}

.testimonial-quote::before {
	content: '\201C';
}

.testimonial-quote::after {
	content: '\201D';
}

/* Clean avatar/client identity row — initials badge in the navy/gold
   brand palette sits left of the name + role. */
.testimonial-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background: linear-gradient( 135deg, #0F2C59, #193f7a );
	color: #D4AF37;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Pagination dots — rendered by Swiper as <button class="testimonial-dot">,
   active slide gets .is-active automatically. */
.testimonial-swiper-pagination {
	line-height: 0;
}

.testimonial-dot {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: rgba( 11, 19, 43, 0.2 );
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.25s ease, width 0.25s ease;
}

.testimonial-dot.is-active {
	width: 20px;
	background: #C9A227;
}

@media ( prefers-reduced-motion: reduce ) {
	.testimonial-card {
		transition: none;
	}
}

/* ==========================================================
   v3.8.0 — Premium B2B Chemical Ticker
   Replaces the old "Our Supply Partners" heading + static grey
   logo grid. Deep royal-blue section with gold border accents;
   pure CSS keyframe marquee (GPU-accelerated translate3d), tripled
   badge list in front-page.php so the loop only ever needs to
   travel exactly one third of the track (-33.3333%) before
   looping — there's always a full, seamless set of badges already
   in view. Runs continuously with 0ms pause on desktop AND mobile
   (no hover-pause behavior), per spec. Respects prefers-reduced-motion.
   ========================================================== */
.chem-ticker-section {
	background: #0F2C59;
	border-top: 1px solid rgba( 212, 175, 55, 0.4 );
	border-bottom: 1px solid rgba( 212, 175, 55, 0.4 );
	padding: 16px 0;
}

.chem-ticker-wrap {
	overflow: hidden;
	touch-action: pan-y;
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 5%, #000 95%, transparent 100% );
	mask-image: linear-gradient( to right, transparent 0, #000 5%, #000 95%, transparent 100% );
}

.chem-ticker {
	animation: tickerLoop 25s linear infinite;
	animation-play-state: running;
	will-change: transform;
	backface-visibility: hidden;
	transform: translate3d( 0, 0, 0 );
}

/* Continuous on every device, incl. desktop pointer hover — the
   ticker never pauses (0ms pause), per spec. */
.chem-ticker-wrap:hover .chem-ticker,
.chem-ticker:hover {
	animation-play-state: running;
}

@media ( min-width: 1024px ) {
	.chem-ticker {
		animation-play-state: running !important;
	}
}

.chem-ticker-badge {
	color: #FFFFFF;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0 20px;
}

.chem-ticker-badge-icon {
	width: 15px;
	height: 15px;
	color: #D4AF37;
	flex-shrink: 0;
}

.chem-ticker-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #D4AF37;
	opacity: 0.7;
	flex-shrink: 0;
}

/* v6.2.0: pure CSS @keyframes tickerLoop — GPU-accelerated translate3d,
   runs continuously (0ms pause) on both Desktop and Mobile with no JS
   involved, so it can never freeze from a blocked main thread. Track is
   now 10 badge-list copies wide (see front-page.php), so translating
   exactly one tenth (-10%) always lands on an identical, seamless
   frame — this is what actually fixed the desktop stutter/freeze,
   since the old 3-copy / -33.3333% track ran out of badges on wide
   monitors. */
@keyframes tickerLoop {
	from {
		transform: translate3d( 0, 0, 0 );
	}
	to {
		transform: translate3d( -10%, 0, 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.chem-ticker {
		animation: none;
	}
}

/* ==========================================================================
   Cart Drawer — slide-in side panel (header cart icon + every
   "Add to Cart" click). Mirrors the mobile-drawer's transform/overlay
   pattern so behaviour is consistent across the theme's off-canvas UI.
   ========================================================================== */
.cart-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 1200;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
}

.cart-drawer-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.cart-drawer {
	position: fixed;
	top: 0;
	right: -100%;
	width: 90%;
	max-width: 400px;
	height: 100vh;
	background: #ffffff;
	z-index: 1201;
	display: flex;
	flex-direction: column;
	transition: right 0.32s cubic-bezier( 0.16, 1, 0.3, 1 );
	box-shadow: -12px 0 40px rgba( 0, 0, 0, 0.15 );
}

.cart-drawer.is-open {
	right: 0;
}

.cart-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #f0f0f0;
	flex-shrink: 0;
}

.cart-drawer-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: #0F2C59;
	margin: 0;
}

.cart-drawer-close {
	background: transparent;
	border: none;
	color: #6b7280;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
}

.cart-drawer-close:hover {
	color: #0F2C59;
}

.cart-drawer-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
}

.cart-drawer-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 0;
}

.cart-drawer-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cart-drawer-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f5f5f5;
	transition: opacity 0.2s ease-in-out;
}

.cart-drawer-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cart-drawer-item-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	background: #f8f9fb;
	display: block;
}

.cart-drawer-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-drawer-item-body {
	flex: 1;
	min-width: 0;
}

.cart-drawer-item-name {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	color: #0F2C59;
	margin-bottom: 4px;
	text-decoration: none;
}

.cart-drawer-item-name:hover {
	color: #C9A227;
}

.cart-drawer-item-meta {
	font-size: 0.8rem;
	color: #6b7280;
	margin: 0;
}

.cart-drawer-remove-item {
	flex-shrink: 0;
	color: #9ca3af;
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	padding: 2px 4px;
	cursor: pointer;
}

.cart-drawer-remove-item:hover {
	color: #dc2626;
}

.cart-drawer-subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
	color: #0F2C59;
	padding: 16px 0;
	margin-top: 16px;
	border-top: 1px solid #f0f0f0;
	flex-shrink: 0;
}

.cart-drawer-subtotal-amount {
	color: #C9A227;
	font-size: 1.05rem;
}

.cart-drawer-actions {
	display: flex;
	gap: 10px;
	padding: 0 24px 24px;
	flex-shrink: 0;
}

.cart-drawer-btn {
	flex: 1;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 700;
	padding: 12px 10px;
	border-radius: 9999px;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.cart-drawer-btn-outline {
	border: 2px solid #0F2C59;
	color: #0F2C59;
	background: transparent;
}

.cart-drawer-btn-outline:hover {
	background: #0F2C59;
	color: #ffffff;
}

.cart-drawer-btn-solid {
	background: #C9A227;
	color: #0F2C59;
	border: 2px solid #C9A227;
}

.cart-drawer-btn-solid:hover {
	filter: brightness( 0.95 );
}

/* "Adding…" state on any add-to-cart button while the AJAX request is
   in flight (assets/js/cart-drawer.js toggles this class). */
.ajax_add_to_cart.is-loading,
.demo-add-to-cart.is-loading {
	opacity: 0.65;
	cursor: wait;
	pointer-events: none;
}

@media ( max-width: 480px ) {
	.cart-drawer {
		width: 100%;
		max-width: none;
	}
}

/* ==========================================================================
   v6.2.0 — Why Choose Us: premium enterprise upgrade. Compact 2x2 grid
   on mobile (never a long vertical stack), gradient-filled gold icon
   roundels (in place of the old flat outline icons), a subtle float
   animation on the icon itself when its card is hovered, and a smooth
   elevated lift + gold glow border on the card on hover/focus.
   ========================================================================== */
.why-us-card {
	position: relative;
	transform: translateY( 0 );
	will-change: transform;
	transition: transform 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ),
		box-shadow 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ),
		border-color 0.4s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.why-us-card:hover,
.why-us-card:focus-within {
	transform: translateY( -8px );
	box-shadow: 0 26px 48px rgba( 15, 23, 42, 0.14 ), 0 0 0 1px rgba( 201, 162, 39, 0.6 ), 0 0 26px rgba( 201, 162, 39, 0.22 );
	border-color: rgba( 201, 162, 39, 0.6 );
}

/* Gradient-filled icon roundel — a rich gold-to-deep-gold radial wash
   at rest (instead of a flat 10%-opacity tint), inverting to a solid
   navy-to-navy gradient with a gold ring glow on hover so the icon
   itself pops as the card lifts. */
.why-us-icon-wrap {
	background: radial-gradient( circle at 32% 28%, rgba( 242, 206, 92, 0.28 ), rgba( 201, 162, 39, 0.1 ) 70% );
	border: 1px solid rgba( 201, 162, 39, 0.35 );
	box-shadow: inset 0 1px 2px rgba( 255, 255, 255, 0.4 );
	transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.why-us-icon {
	color: #C9A227;
	transition: color 0.35s ease, transform 0.5s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.why-us-card:hover .why-us-icon-wrap,
.why-us-card:focus-within .why-us-icon-wrap {
	background: linear-gradient( 145deg, #0F2C59 0%, #060C1B 100% );
	border-color: #D4AF37;
	box-shadow: 0 0 0 4px rgba( 201, 162, 39, 0.16 ), 0 8px 18px rgba( 6, 12, 27, 0.3 );
	animation: whyUsIconFloat 1.8s ease-in-out infinite;
}

.why-us-card:hover .why-us-icon,
.why-us-card:focus-within .why-us-icon {
	color: #F2CE5C;
}

/* Gentle floating/bounce loop on the icon roundel itself while its
   parent card is hovered — subtle, not distracting. */
@keyframes whyUsIconFloat {
	0%, 100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( -4px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.why-us-card,
	.why-us-icon-wrap,
	.why-us-icon {
		transition: none;
	}
	.why-us-card:hover,
	.why-us-card:focus-within {
		transform: none;
	}
	.why-us-card:hover .why-us-icon-wrap,
	.why-us-card:focus-within .why-us-icon-wrap {
		animation: none;
	}
}

/* ==========================================================================
   Shopify-Style B2B Product Card Buttons — Rectangular Pills (v2.1)
   Replaces the old 9999px "pill" radius, which collapsed into a circle
   whenever a narrow product card forced the label onto multiple lines.
   Both buttons now use a fixed 8px radius and are stacked full-width by
   default so the label always has the whole card's width to lay out on
   a single line, at any card size (2-col mobile grid through 4-col
   desktop grid). ".product-card-actions" is the shared wrapper.
   ========================================================================== */
.product-card-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.btn-cart,
.btn-inquiry {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	text-align: center;
	white-space: nowrap;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.7rem 0.75rem;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-cart {
	background: linear-gradient( 135deg, #0F2C59 0%, #0A2044 100% );
	color: #ffffff;
	border: 1.5px solid #0F2C59;
	border-bottom: 2px solid #C9A227;
	box-shadow: 0 6px 16px rgba( 0, 51, 102, 0.18 );
}

.btn-cart:hover {
	background: linear-gradient( 135deg, #0C2449 0%, #001a33 100% );
	border-color: #0C2449;
	border-bottom-color: #e8c766;
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( 0, 51, 102, 0.28 );
}

.btn-cart svg,
.btn-inquiry svg {
	flex-shrink: 0;
}

.btn-cart svg {
	color: #e8c766;
}

.btn-inquiry {
	background: #ffffff;
	color: #0F2C59;
	border: 1.5px solid #0F2C59;
}

.btn-inquiry:hover {
	background: #0F2C59;
	border-color: #0F2C59;
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( 0, 51, 102, 0.18 );
}

/* Ripple effect: a short-lived expanding circle spawned at the click
   point by assets/js/main.js (evershineSpawnRipple). Purely additive —
   buttons work identically without JS support for it. */
.btn-ripple {
	isolation: isolate;
}

.btn-ripple .btn-ripple-circle {
	position: absolute;
	border-radius: 9999px;
	background: rgba( 255, 255, 255, 0.45 );
	transform: scale( 0 );
	pointer-events: none;
	animation: evershine-ripple 0.6s ease-out;
	z-index: 0;
}

.btn-inquiry.btn-ripple .btn-ripple-circle {
	background: rgba( 0, 51, 102, 0.18 );
}

@keyframes evershine-ripple {
	to {
		transform: scale( 2.6 );
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.btn-ripple .btn-ripple-circle {
		animation: none;
		display: none;
	}
}

@media ( min-width: 480px ) {
	/* Once a card has a little more breathing room (larger phones and up),
	   let the two buttons sit side by side instead of stacked. */
	.product-card-actions {
		flex-direction: row;
	}

	.btn-cart,
	.btn-inquiry {
		flex: 1 1 0;
	}
}

@media ( min-width: 768px ) {
	.btn-cart,
	.btn-inquiry {
		font-size: 0.8rem;
		padding: 0.8rem 1rem;
	}
}

/* ==========================================================================
   Footer Categories — Collapsible Accordion
   First 4 categories always visible; the remaining 6 sit inside a
   smoothly-sliding panel toggled by "Browse All Categories".
   ========================================================================== */
.footer-categories-more {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease-in-out;
}

.footer-categories.is-open .footer-categories-more {
	max-height: 400px;
}

.footer-categories-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 0.85rem;
	background: none;
	border: none;
	padding: 0;
	color: #c9a227;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.2s ease;
}

.footer-categories-toggle:hover {
	color: #e8c766;
}

.footer-categories-toggle-icon {
	flex-shrink: 0;
	transition: transform 0.25s ease-in-out;
}

.footer-categories.is-open .footer-categories-toggle-icon {
	transform: rotate( 45deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.footer-categories-more,
	.footer-categories-toggle-icon {
		transition: none;
	}
}

/* ==========================================================================
   Safety net: never show WooCommerce's default gallery "search" zoom
   trigger icon, even if a plugin/child theme re-enables the zoom feature.
   The theme's own custom gallery (woocommerce/single-product.php) never
   needs it.
   ========================================================================== */
.woocommerce-product-gallery__trigger,
a.woocommerce-product-gallery__trigger {
	display: none !important;
}

/* ==========================================================================
   Footer Accordion (mobile) — Quick Links / Categories / Contact Us
   Each column collapses behind a tappable title + ▼ chevron on mobile.
   On desktop (>=768px) every column stays permanently expanded and the
   toggle button becomes a plain, non-interactive heading row.
   ========================================================================== */
.footer-accordion-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 0 0 1rem 0;
	margin: 0;
	cursor: pointer;
	text-align: left;
}

.footer-accordion-toggle h3 {
	margin: 0;
}

.footer-accordion-icon {
	flex-shrink: 0;
	color: #C9A227;
	transition: transform 0.25s ease-in-out;
}

.footer-accordion.is-open .footer-accordion-icon {
	transform: rotate( 180deg );
}

.footer-accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease-in-out;
}

.footer-accordion.is-open .footer-accordion-body {
	max-height: 640px;
}

@media ( max-width: 767px ) {
	/* Give the collapsed body a touch of breathing room once opened,
	   without affecting the max-height collapse animation itself. */
	.footer-accordion.is-open .footer-accordion-body {
		padding-bottom: 0.25rem;
	}
}

@media ( min-width: 768px ) {
	/* Desktop: accordions are always fully expanded and the toggle
	   button stops behaving like a button (no pointer, no chevron
	   interactivity) — it's just the column heading. */
	.footer-accordion-toggle {
		cursor: default;
		pointer-events: none;
	}

	.footer-accordion-icon {
		display: none;
	}

	.footer-accordion-body {
		max-height: none !important;
		overflow: visible;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.footer-accordion-body,
	.footer-accordion-icon {
		transition: none;
	}
}

/* ==========================================================================
   Single Product Page — Premium B2B Layout
   Two-column gallery + buy box, pill tabs, related products. All classes
   scoped to woocommerce/single-product.php.
   ========================================================================== */

/* Breadcrumb */
.woocommerce-breadcrumb a {
	color: #6b7280;
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: #C9A227;
}

/* Two-column layout wrapper — dedicated class (in addition to the
   Tailwind grid utility classes already on the element) so the core
   product-page layout doesn't depend solely on the Tailwind CDN
   script executing successfully. */
.single-product-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media ( min-width: 1024px ) {
	.single-product-layout {
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
	}
}

/* Gallery */
.single-product-gallery-main {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.06 );
}

.single-product-gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.single-product-gallery-thumbs {
	display: flex;
	gap: 0.65rem;
	margin-top: 0.85rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.single-product-thumb {
	flex-shrink: 0;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 0.75rem;
	overflow: hidden;
	border: 2px solid #e5e7eb;
	background: #f8fafc;
	cursor: pointer;
	padding: 0;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.single-product-thumb:hover {
	border-color: #C9A227;
}

.single-product-thumb.is-active {
	border-color: #0F2C59;
}

/* Buy Box */
.single-product-buybox {
	display: flex;
	flex-direction: column;
}

.product-category-badge {
	display: inline-flex;
	align-self: flex-start;
	background: rgba( 0, 51, 102, 0.08 );
	color: #0F2C59;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
	margin-bottom: 0.85rem;
}

.single-product-title {
	font-size: 1.75rem;
	line-height: 1.2;
	font-weight: 800;
	color: #0F2C59;
	margin: 0 0 0.6rem 0;
}

@media ( min-width: 768px ) {
	.single-product-title {
		font-size: 2.25rem;
	}
}

.single-product-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.85rem;
	font-size: 0.85rem;
}

.single-product-rating-count {
	color: #6b7280;
	text-decoration: underline;
}

.single-product-price-row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.single-product-price {
	font-size: 2rem;
	font-weight: 800;
	color: #C9A227;
}

.single-product-price-unit {
	font-size: 0.95rem;
	font-weight: 600;
	color: #6b7280;
}

.single-product-short-desc {
	color: #4b5563;
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

.single-product-short-desc p:last-child {
	margin-bottom: 0;
}

.single-product-field-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: #0F2C59;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
}

.single-product-weight-row {
	margin-bottom: 1.5rem;
	max-width: 320px;
}

.single-product-weight-select {
	padding: 0.7rem 0.85rem;
	font-size: 0.9rem;
	border-radius: 0.65rem;
}

/* CTA row: Add to Cart + Quick Wholesale Inquiry, side by side */
.single-product-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 1.75rem;
}

.btn-cart-lg,
.btn-whatsapp {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 1 1 220px;
	white-space: nowrap;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.9rem 1.25rem;
	border-radius: 9999px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-cart-lg {
	background: #0F2C59;
	color: #ffffff;
	border: 1.5px solid #0F2C59;
	border-bottom: 3px solid #C9A227;
	box-shadow: 0 8px 20px rgba( 0, 51, 102, 0.2 );
}

.btn-cart-lg svg {
	color: #e8c766;
}

.btn-cart-lg:hover {
	background: #0C2449;
	transform: translateY( -2px );
	box-shadow: 0 12px 26px rgba( 0, 51, 102, 0.3 );
}

.btn-cart-lg-disabled {
	background: #e5e7eb;
	color: #9ca3af;
	border: 1.5px solid #e5e7eb;
	cursor: not-allowed;
	box-shadow: none;
}

.btn-whatsapp {
	background: #ffffff;
	color: #128C7E;
	border: 1.5px solid #b7ebe3;
}

.btn-whatsapp:hover {
	background: #128C7E;
	border-color: #128C7E;
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: 0 12px 26px rgba( 18, 140, 126, 0.22 );
}

/* Trust mini-badges row */
.single-product-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #f0f0f0;
}

.single-product-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #4b5563;
}

/* ==========================================================================
   Pill Tabs — Description / Technical Specs / Reviews
   ========================================================================== */
.product-tabs {
	margin-top: 3.5rem;
}

.product-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 2rem;
	padding-bottom: 0.75rem;
}

.product-tab-btn {
	background: #f3f4f6;
	color: #4b5563;
	border: none;
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.65rem 1.35rem;
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.product-tab-btn:hover {
	background: #e5e7eb;
}

.product-tab-btn.is-active {
	background: #0F2C59;
	color: #ffffff;
}

.product-tab-panel {
	display: none;
	color: #4b5563;
	font-size: 0.95rem;
	line-height: 1.75;
	max-width: 60rem;
}

.product-tab-panel.is-active {
	display: block;
}

.product-specs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.product-specs-table tr {
	border-bottom: 1px solid #f0f0f0;
}

.product-specs-table th,
.product-specs-table td {
	text-align: left;
	padding: 0.75rem 1rem 0.75rem 0;
	vertical-align: top;
}

.product-specs-table th {
	width: 35%;
	color: #0F2C59;
	font-weight: 700;
}

/* Related Products */
.single-product-related {
	margin-top: 4.5rem;
}

.single-product-related-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: #0F2C59;
	margin-bottom: 1.5rem;
}

@media ( max-width: 767px ) {
	.single-product-gallery-main {
		border-radius: 1rem;
	}

	.single-product-cta-row {
		flex-direction: column;
	}

	.btn-cart-lg,
	.btn-whatsapp {
		flex: 1 1 auto;
	}
}
/* ==========================================================================
   EVERSHINE MOBILE-ONLY CATEGORIES GAP FIX
   ========================================================================== */

@media (max-width: 768px) {
    /* Mobile slider padding & alignment */
    .swiper, .swiper-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }

    .swiper-wrapper {
        display: flex !important;
        gap: 8px !important;
    }

    .category-card, 
    .product-category,
    .swiper-slide {
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .category-card img, 
    .product-category img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 10px !important;
    }
}
/* Purane default dropdown ko hide karein */
.product-card select:not(.eshine-auto-select) {
    display: none !important;
}

/* Naye dynamic dropdown ko Price ke upar flex order se shift karein */
.product-card {
    display: flex !important;
    flex-direction: column !important;
}

.product-card h3, 
.product-card h4, 
.product-card .product-title {
    order: 1 !important;
}

.product-card .eshine-auto-select {
    order: 2 !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
}

.product-card .price,
.product-card [class*="price"] {
    order: 3 !important;
    margin-bottom: 8px !important;
}

.product-card .product-card-actions {
    order: 4 !important;
}
/* ==========================================================================
   DESKTOP BANNER BRIGHTNESS FIX (SAFE ADDITION)
   ========================================================================== */

@media (min-width: 1025px) {
    /* Hero section ke dark gradient overlay ko transparent / halka karein */
    #primary section:first-of-type,
    #primary header:first-of-type,
    main > section:first-child {
        background-blend-mode: normal !important;
        filter: brightness(1.15) contrast(1.05) !important;
    }

    /* Dark pseudo-element overlay ko soften karein */
    #primary section:first-of-type::before,
    #primary section:first-of-type::after,
    main > section:first-child::before,
    main > section:first-child::after {
        opacity: 0.25 !important;
    }
}
/* ==========================================================================
   DESKTOP BLUE TICKER BAR - ULTRA SLOW & READABLE B2B SPEED
   ========================================================================== */

div[class*="ticker"],
div[class*="certifications"],
.ticker-track,
.ticker-content {
    display: flex !important;
    white-space: nowrap !important;
    animation: tickerLoop 150s linear infinite !important; /* Extremely smooth & slow */
    will-change: transform !important;
}

@media (min-width: 1024px) {
    div[class*="ticker"],
    div[class*="certifications"],
    .ticker-track,
    .ticker-content {
        animation-play-state: running !important;
        animation: tickerLoop 150s linear infinite !important;
    }
}

/* User cursor laaye toh temporary pause ho taake easily parh sakein */
div[class*="ticker"]:hover,
div[class*="certifications"]:hover,
.ticker-track:hover {
    animation-play-state: paused !important;
}

@keyframes tickerLoop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
/* ===================================================
   1. GLOBAL SALE BADGE FIX (Homepage, Shop & Product Pages)
   =================================================== */
.woocommerce span.onsale,
.onsale,
.product-badge.onsale,
ul.products li.product .onsale,
.elementor-widget-woocommerce-products .onsale,
.wc-block-grid__product-onsale,
.product .onsale,
.elementor-element .onsale,
.elementor-product-loop-item .onsale {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    width: auto !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 24px !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    z-index: 99 !important;
    box-shadow: 0 3px 8px rgba(30, 60, 114, 0.3) !important;
}

.woocommerce div.product,
.woocommerce ul.products li.product,
ul.products li.product,
.wc-block-grid__product,
.elementor-loop-container > *,
.elementor-product-loop-item {
    position: relative !important;
}

/* ===================================================
   2. PERFECT 2-COLUMN MOBILE GRID & EQUAL BUTTON ALIGNMENT
   =================================================== */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    .related.products ul.products,
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .related.products ul.products li.product,
    ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
    }

    .related.products ul.products li.product img,
    ul.products li.product img {
        max-height: 120px !important;
        object-fit: contain !important;
        margin: 0 auto 8px auto !important;
        display: block !important;
    }

    /* Fixed Height Title to Keep Cards Perfectly Equal */
    .related.products ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product h2 {
        font-size: 11px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        margin: 4px 0 8px 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        height: 44px !important; /* Forces equal height for short and long titles */
        color: #1f2937 !important;
    }

    /* Standard Price Block */
    ul.products li.product .price {
        font-size: 12px !important;
        margin-top: auto !important;
        margin-bottom: 8px !important;
        display: block !important;
        min-height: 18px !important;
    }

    /* Bottom Fixed Add to Cart Button */
    ul.products li.product .button,
    ul.products li.product a.button {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 11px !important;
        padding: 6px 0 !important;
        margin-top: 0 !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
        color: #1f2937 !important;
        border: 1px solid #d1d5db !important;
        box-sizing: border-box !important;
    }
}

/* Keep Homepage Sliders Working Smoothly */
.swiper-wrapper,
.elementor-loop-container,
.ticker-bar,
.marquee {
    display: flex !important;
    flex-direction: row !important;
}

/* ===================================================
   3. FORCE VISIBLE REVIEW & RATING SECTION
   =================================================== */
/* Hide Tab Navigation Bar Only */
.woocommerce-tabs ul.tabs,
ul.tabs.wc-tabs {
    display: none !important;
}

/* Enforce Review Container Visibility */
.woocommerce-tabs,
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel--reviews,
#reviews,
#review_form_wrapper,
#review_form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    clear: both !important;
}

#reviews {
    margin-top: 25px !important;
    background: #ffffff !important;
    padding: 16px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
}

#reply-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e3c72 !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Clean Up 1 of 5 Stars Plain Text to Standard Star Interface */
.comment-form-rating .stars a {
    font-size: 0 !important;
    text-indent: -9999px !important;
    display: inline-block !important;
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 4px !important;
    text-decoration: none !important;
}

.comment-form-rating .stars a::before {
    content: "\e020" !important;
    font-family: WooCommerce !important;
    font-size: 18px !important;
    color: #f59e0b !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    text-indent: 0 !important;
    visibility: visible !important;
}

/* Input Fields Layout for Name, Email & Comment */
#review_form .comment-form-author,
#review_form .comment-form-email,
#review_form .comment-form-comment {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
    width: 100% !important;
    padding: 8px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
}

#review_form .form-submit #submit {
    background: #1e3c72 !important;
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 6px !important;
    border: none !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* Clean Header & Sorting */
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-products-header__title.page-title {
    display: none !important;
}
/* ===================================================
   1. HOMEPAGE & ALL PAGES SALE BADGE FORCE DISPLAY
   =================================================== */
.custom-homepage-badge,
.elementor-product-loop-item .onsale,
.elementor-widget-woocommerce-products .onsale,
.elementor-loop-container .onsale,
ul.products li.product .onsale,
span.onsale,
.onsale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    z-index: 999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.elementor-grid-item,
.elementor-loop-container > *,
.elementor-product-loop-item,
ul.products li.product,
.product {
    position: relative !important;
}

/* ===================================================
   2. CLEAN STAR RATING FIX (No Overlapping Text)
   =================================================== */
.comment-form-rating .stars,
.comment-form-rating .stars a,
p.stars a {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

.comment-form-rating .stars a {
    position: relative !important;
    display: inline-block !important;
    width: 26px !important;
    height: 26px !important;
    margin-right: 6px !important;
    text-decoration: none !important;
}

.comment-form-rating .stars a::before,
p.stars a::before {
    content: "★" !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #f59e0b !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    visibility: visible !important;
    opacity: 0.35 !important;
}

.comment-form-rating .stars a:hover::before,
.comment-form-rating .stars a.active::before,
p.stars a.active::before {
    opacity: 1 !important;
}

/* ===================================================
   3. REVIEW FORM INPUTS & LAYOUT (Desktop & Mobile)
   =================================================== */
#review_form_wrapper,
#review_form,
#respond {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

#review_form .comment-form-author,
#review_form .comment-form-email,
#review_form .comment-form-comment,
#review_form .comment-form-rating,
#review_form .comment-form-cookies-consent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    color: #111827 !important;
}

#review_form .form-submit #submit {
    background: #1e3c72 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    border: none !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* Hide WooCommerce Tabs Header */
.woocommerce-tabs ul.tabs,
ul.tabs.wc-tabs {
    display: none !important;
}

/* Clean Header Elements */
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-products-header__title.page-title {
    display: none !important;
}

/* ===================================================
   4. MOBILE RELATED PRODUCTS GRID ALIGNMENT
   =================================================== */
@media (max-width: 768px) {
    .related.products ul.products,
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .related.products ul.products li.product,
    ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
    }
}
/* ===================================================
   5. EXTRA FORCE: HOMEPAGE SALE BADGES & MOBILE FIELDS
   =================================================== */
/* Homepage Elementor Grid Sale Badge Force */
.elementor-loop-container .onsale,
.elementor-widget-woocommerce-products .onsale,
.elementor-product-loop-item .onsale,
.e-loop-item .onsale,
.product-badge.onsale,
.woocommerce span.onsale,
span.onsale {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    background: #1e3c72 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    z-index: 9999 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile Name & Email Fields Always Show */
@media (max-width: 768px) {
    #review_form .comment-form-author,
    #review_form .comment-form-email,
    .comment-form-author,
    .comment-form-email {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
}