/* =========================================================
   e-creative — base.css
   Loaded on every page. Keep this file small: page-specific
   styles belong in shop.css / product.css / cart.css / account.css
   ========================================================= */

/* ---- Self-hosted Poppins ----
   Files aren't bundled in this delivery (no network access when this theme
   was assembled) — see /assets/fonts/README.txt. Until the .woff2 files are
   added, `font-display: swap` + the system-font fallback in --ecreative-font
   mean nothing breaks; the header/nav just render in the fallback stack. */
@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--ecreative-primary: #ff5a1f;
	--ecreative-text: #1a1a1a;
	--ecreative-muted: #6b6b6b;
	--ecreative-bg: #ffffff;
	--ecreative-border: #e4e4e4;
	--ecreative-surface: #f7f6f4;
	--ecreative-radius: 8px;
	--ecreative-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ecreative-container: 1280px;

	/* Header-specific tokens — matched to the client's reference design. */
	--ecreative-topbar-bg: #d7ef00;
	--ecreative-topbar-text: #1a1a1a;
	--ecreative-marquee-bg: #000000;
	--ecreative-marquee-text: #ffffff;
	--ecreative-marquee-accent: #12d97a;
	--ecreative-header-accent: #ff5b19;
}

* { box-sizing: border-box; }

/* Applied to <body> via JS while the mobile nav panel or cart sidebar is open, so the page behind the overlay doesn't scroll. */
body.no-scroll { overflow: hidden; }

.spar-product-points{display: none !important;}
body {
	margin: 0;
	font-family: var(--ecreative-font);
	color: var(--ecreative-text);
	background: var(--ecreative-bg);
	line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }
.woocommerce-message{display: none !important;}
.container {
	width: 100%;
	max-width: var(--ecreative-container);
	margin-inline: auto;
	padding-inline: 20px;
}

a { color: inherit; text-decoration: none; }

button {
	font-family: inherit;
	cursor: pointer;
}

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

/* ---- Topbar ---- */
.topbar {
	background: var(--ecreative-topbar-bg);
	color: var(--ecreative-topbar-text);
	font-size: 14px;
	font-weight: 500;
}
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 10px;
	gap: 20px;
	flex-wrap: wrap;
}
.topbar-social {
	display: flex;
	align-items: center;
	gap: 16px;
}
.topbar-social a { display: inline-flex; transition: transform .2s ease; }
.topbar-social a:hover { transform: translateY(-2px); }
.topbar-contact {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.topbar-contact a { margin-right: 8px; }
.topbar-divider {
	width: 1px;
	height: 20px;
	background: currentColor;
	opacity: .35;
}
.topbar-secondary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar-whatsapp {
	background: #25D366;
	color: #fff;
	padding: 5px 12px;
	border-radius: var(--ecreative-radius);
	font-weight: 600;
}
.topbar-currency { font-weight: 600; }

/* ---- Third-party plugin widgets (FOX Currency / GTranslate / FiboSearch) ----
   These plugins render their own markup/inline styles; these rules just
   keep them from breaking the surrounding flex row. Selectors here are
   best-effort — once each plugin is active, inspect its actual output and
   adjust (e.g. .woocs_flags_dropdown / .gtranslate_wrapper / .dgwt-wcas-*
   class names can shift between plugin versions/settings). */
.topbar-currency-plugin,
.topbar-language-plugin {
	display: flex;
	align-items: center;
	line-height: 1;
}
.topbar-currency-plugin img,
.topbar-language-plugin img {
	display: inline-block;
	vertical-align: middle;
}
.live-search--fibosearch {
	display: flex;
	align-items: center;
}
.live-search--fibosearch .dgwt-wcas-search-wrapp {
	width: 260px;
	max-width: 100%;
}

.topbar-language {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--ecreative-text);
	padding: 6px 12px;
	border-radius: 3px;
	position: relative;
}
.topbar-language img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.topbar-language .icon-chevron { width: 12px; height: 12px; }

/* ---- Marquee / business-account strip ---- */
.marquee-strip {
	display: block;
	background: var(--ecreative-marquee-bg);
	color: var(--ecreative-marquee-text);
	overflow: hidden;
	height: 42px;
}
.marquee-track {
	display: flex;
	align-items: center;
	height: 100%;
}
.marquee-content {
	display: flex;
	align-items: center;
	gap: 60px;
	white-space: nowrap;
	animation-name: ecreative-marquee;
	animation-duration: 25s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	padding-inline: 20px;
	width: max-content;
}
.marquee-strip:hover .marquee-content,
.marquee-strip:focus-within .marquee-content {
	animation-play-state: paused;
}
.marquee-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
}
.marquee-check-icon {
	max-width: 24px !important;
	width: 100%;
	height: auto;
	flex-shrink: 0;
}

@keyframes ecreative-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee-content { animation: none; }
	.marquee-strip { overflow-x: auto; }
}

/* ---- Main header ---- */
.site-header .container { max-width: 1400px; }
.site-header .container .shop-toolbar{display: none;}

.main-header {
	border-bottom: 1px solid var(--ecreative-border);
	background-image: var(--ecreative-header-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.main-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	gap: 24px;
}
.site-title { font-size: 22px; font-weight: 700; }

.primary-nav {
	/* Needed so the absolutely-positioned mobile dropdown (.primary-nav.is-open ul)
	   below positions itself against THIS element. Without it there's no positioned
	   ancestor, so the browser falls back to the initial containing block and the
	   opened menu renders far down the page instead of under the header — this was
	   why tapping the hamburger looked like nothing happened on mobile. */
	position: relative;
}
.primary-nav ul {
	list-style: none;
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
	position: relative;
}
.primary-nav .menu-link {
	font-weight: 500;
	font-size: 16px;
	padding: 8px 0;
	display: inline-block;
	position: relative;
}
.primary-nav .menu-link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--ecreative-header-accent);
	transition: width .25s ease;
}
.primary-nav .menu-link:hover { color: var(--ecreative-header-accent); }
.primary-nav .menu-link:hover::after { width: 100%; }
.primary-nav li.has-mega-menu { position: relative; }
.mega-menu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border: 1px solid var(--ecreative-border);
	border-radius: var(--ecreative-radius);
	padding: 16px;
	display: none;
	min-width: 220px;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	z-index: 20;
}
.primary-nav li.has-mega-menu:hover .mega-menu-panel,
.primary-nav li.has-mega-menu:focus-within .mega-menu-panel {
	display: block;
}
.mega-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--ecreative-text);
	padding: 6px;
}
.menu-toggle .icon-xmark { display: none; }
.menu-toggle[aria-expanded="true"] .icon-bars { display: none; }
.menu-toggle[aria-expanded="true"] .icon-xmark { display: block; }

/* Hidden by default on all viewports — only shown inside the mobile
   slide-in panel below. Declared here (not just inside the media query)
   so it can't leak onto desktop if the media query is ever stripped or
   reordered by a CSS optimizer. */
.primary-nav-close { display: none; }

/* Same reasoning as .primary-nav-close: base state lives here, not only
   inside the media query, matching the already-working .cart-overlay
   pattern below. */
.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 105;
}
.nav-overlay.is-active { opacity: 1; visibility: visible; }

/* ---- Utility bar (search / account / wishlist / cart) ---- */
.utility-bar { display: flex; align-items: center; gap: 22px; position: relative; }
.utility-bar > a, .utility-bar > button, .utility-bar .cart-trigger {
	background: none;
	border: none;
	color: var(--ecreative-text);
	display: inline-flex;
	position: relative;
	transition: color .2s ease;
}
.utility-bar > a:hover, .utility-bar > button:hover { color: var(--ecreative-header-accent); }
.mini-cart-link, .cart-trigger { position: relative; }
.cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	background: var(--ecreative-header-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.live-search-panel {
	position: absolute;
	top: 100%;
	right: 0;
	background: #fff;
	border: 1px solid var(--ecreative-border);
	border-radius: var(--ecreative-radius);
	padding: 16px;
	width: 340px;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	z-index: 30;
}
.live-search-panel input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ecreative-border);
	border-radius: var(--ecreative-radius);
}
.live-search-results { margin-top: 12px; display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }

/* ---- Account dropdown ---- */
.account-dropdown { position: relative; margin-bottom: -10px;}
.account-dropdown .dropdown-menu {
	position: absolute;
	top: calc(100% + 14px);
	right: -20px;
	width: 240px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 15px 40px rgba(0,0,0,.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 60;
}
.account-dropdown:hover .dropdown-menu,
.account-dropdown:focus-within .dropdown-menu,
.account-dropdown.is-open .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.dropdown-menu a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	font-size: 15px;
	border-bottom: 1px solid var(--ecreative-border);
	transition: color .2s ease, padding-left .2s ease;
}
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a:hover { color: var(--ecreative-header-accent); padding-left: 22px; }

/* ---- Cart sidebar (slide-out mini cart) ---- */
.cart-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	z-index: 998;
}
.cart-overlay.is-active { opacity: 1; visibility: visible; }

.cart-sidebar {
	position: fixed;
	top: 0;
	right: -100%;
	width: 420px;
	max-width: 100%;
	height: 100vh;
	background: #fff;
	z-index: 999;
	display: flex;
	flex-direction: column;
	transition: right .35s ease;
	box-shadow: -10px 0 30px rgba(0,0,0,.12);
}
.cart-sidebar.is-active { right: 0; }
.cart-sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 20px;
	border-bottom: 1px solid var(--ecreative-border);
}
.cart-sidebar-header h2 { font-size: 17px; margin: 0; }
.cart-sidebar-close {
	background: var(--ecreative-header-accent);
	color: #fff;
	border: none;
	width: 38px; height: 38px;
	border-radius: var(--ecreative-radius);
	display: flex; align-items: center; justify-content: center;
}
.cart-panel-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.cart-panel-empty { color: var(--ecreative-muted); padding: 40px 0; text-align: center; }
.cart-panel-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-block: 14px;
	border-bottom: 1px solid var(--ecreative-border);
}
.cart-panel-item img { width: 70px; height: 70px; object-fit: cover; border: 1px solid var(--ecreative-border); border-radius: var(--ecreative-radius); }
.cart-panel-item-info { flex: 1; }
.cart-panel-item-info h4 { font-size: 15px; font-weight: 500; line-height: 1.4; margin: 0 0 6px; }
.cart-panel-item-info .qty { color: var(--ecreative-muted); font-size: 14px; }
.cart-panel-remove { color: var(--ecreative-muted); }
.cart-panel-remove:hover { color: var(--ecreative-header-accent); }
.cart-sidebar-footer { border-top: 1px solid var(--ecreative-border); padding: 20px; }
.cart-sidebar-total { display: flex; justify-content: space-between; font-size: 17px; margin-bottom: 18px; }
.cart-sidebar-buttons { display: flex; gap: 14px; }
.cart-sidebar-buttons a {
	flex: 1;
	text-align: center;
	border: 1px solid var(--ecreative-text);
	padding: 14px;
	font-weight: 600;
	border-radius: var(--ecreative-radius);
	transition: background .2s ease, color .2s ease;
}
.cart-sidebar-buttons a:hover { background: var(--ecreative-text); color: #fff; }
.cart-sidebar-buttons a.checkout-btn { background: var(--ecreative-header-accent); border-color: var(--ecreative-header-accent); color: #fff; }
.cart-sidebar-buttons a.checkout-btn:hover { opacity: .9; }

/* ---- Category strip ---- */
.category-strip { border-bottom: 1px solid var(--ecreative-border); background: var(--ecreative-surface); }
.category-strip-list {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 16px 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.category-strip-item {
	scroll-snap-align: start;
	flex: 0 0 auto;
	text-align: center;
	font-size: 13px;
}
.category-strip-item img {
	border-radius: 50%;
	width: 72px;
	height: 72px;
	object-fit: cover;
	margin-bottom: 6px;
}

/* ---- Footer ----
   Values matched directly against the client-provided mockup (sizes,
   spacing, colors) rather than the theme's own defaults, so class names
   AND appearance are both a 1:1 match. --sg-footer-accent is kept as its
   own variable (not reused from --ecreative-primary) since the mockup
   specifies this exact orange regardless of the site's brand color. */
.sg-footer {
	--sg-footer-accent: #ff5a1f;
	background: #2f2f2f;
	color: #fff;
	padding: 70px 0 25px;
}
.sg-footer-container {
	width: 90%;
	max-width: 1400px;
	margin: auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1.5fr 1fr 1.5fr;
	gap: 45px;
}
.footer-widget h3 { font-size: 14px; margin-bottom: 28px; font-weight: 400; }
.footer-widget h4 { margin-top: 35px; margin-bottom: 20px; font-size: 13px; font-weight: 400; }
.footer-widget p { color: #f2f2f2; line-height: 1.8; margin-bottom: 16px; font-size: 12px; }
.footer-widget p.lang-text { margin-top: 15px; }
.footer-widget ul { margin: 0; padding: 0; list-style: none; }
.footer-widget ul li { margin-bottom: 5px; }
.footer-widget ul li a { color: #fff; font-size: 13px; font-weight: 600; transition: color .3s; }
.footer-widget ul li a:hover { color: var(--sg-footer-accent); }

.mailchimp-error { color: #f15454; font-size: 16px; margin-bottom: 20px; line-height: 1.5; }
.subscribe-form {
	display: flex;
	width: 100%;
	margin-top: 20px;
}
.subscribe-form input[type="email"],
.subscribe-form input[type="text"] {
	flex: 1;
	border: none;
	outline: none;
	padding: 16px 18px;
	font-size: 17px;
}
.subscribe-form button, .subscribe-form input[type="submit"] {
	background: var(--sg-footer-accent);
	width: 30%;
	color: #fff;
	border: none;
	cursor: pointer;
	padding: 16px 22px;
	font-weight: 600;
	transition: .3s;
}
.subscribe-form button:hover,
.subscribe-form input[type="submit"]:hover { background: #e64a19; }

/* MC4WP's own shortcode markup wraps its fields in this div by default;
   without this the email input and submit button stack vertically instead
   of sitting inline like the rest of .subscribe-form. */
.mc4wp-form-fields { display: flex; }

.social-icons { display: flex; gap: 18px; flex-wrap: wrap; }
.social-icons a {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--sg-footer-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: .3s;
}
.social-icons a:hover { transform: translateY(-4px); background: #fff; color: var(--sg-footer-accent); }

.footer-bottom {
	width: 90%;
	max-width: 1400px;
	margin: 60px auto 0;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.copyright { font-size: 12px; color: #fff; width:60%; }
.copyright a:hover { text-decoration: underline; }
.payment-icons{ padding: 5px 10px; background-color: white; max-width: 40%;}
.payment-icons img { max-width: 520px; width: 100%; }


@media (max-width: 1200px) {
	.sg-footer-container { grid-template-columns: repeat(4, 1fr); }
	.footer-about { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
	.sg-footer { padding: 50px 0 20px; }
	.sg-footer-container { grid-template-columns: 1fr 1.5fr; gap: 35px; }
	.footer-bottom { flex-direction: column; text-align: center; }
	.subscribe-form { flex-direction: column; }
	.subscribe-form input { margin-bottom: 12px; width: 100%; }
	.subscribe-form button { width: 100%; }
	.social-icons { justify-content: left; }
	.payment-icons img { max-width: 320px; }
	.copyright{width: 100%;}
	.payment-icons{max-width: 80%;}
}
@media (max-width: 480px) {
	.sg-footer-container { width: 92%; grid-template-columns: 1fr 1fr;}
	.footer-category-list {display: none;}
	.footer-bottom { width: 92%; }
	.footer-widget ul li { margin-bottom: 15px; }
	.footer-subscribe{grid-column: 1 / -1 !important;}
}

/* ---- Buttons ---- */
.button, button[type="submit"], .single_add_to_cart_button {
	display: inline-block;
	background: var(--ecreative-primary);
	color: #fff;
	border: none;
	border-radius: var(--ecreative-radius);
	padding: 10px 20px;
	font-weight: 600;
}

/* ---- Responsive ----
   Breakpoint tiers mirror the client's reference design (1200 / 992 / 768 /
   480) rather than the theme's previous single breakpoint, since the new
   header has more moving parts (topbar, marquee, dropdown, cart sidebar)
   that need to shed content in stages rather than all at once. */
@media (max-width: 1200px) {
	.primary-nav ul { gap: 20px; }
	.primary-nav .menu-link { font-size: 15px; }
	.utility-bar { gap: 16px; }
}

@media (max-width: 992px) {
	.topbar-inner { justify-content: center; }
	.topbar-social, .topbar-contact, .topbar-divider { display: none; }
	.primary-nav ul { display: none; flex-direction: column; }

	.primary-nav.is-open {
		z-index: 110;
		position: fixed;
		top: 0;
		left: 0;
		width: 80%;
		max-width: 340px;
		height: 100vh;
		background: #fff;
		box-shadow: 0 15px 30px rgba(0,0,0,.15);
		overflow-y: auto;
		padding: 20px;
		/* Slide-in animation rather than an instant snap. */
		transform: translateX(0);
		transition: transform .25s ease;
	}
	/* Scoped to .is-open .primary-nav-close, not a bare .primary-nav-close
	   rule — a bare rule here would show the button any time the viewport
	   is under 992px, regardless of whether the panel is actually open. */
	.primary-nav.is-open .primary-nav-close {
		display: flex;
		margin-left: auto;
		margin-bottom: 16px;
		background: none;
		border: none;
		padding: 6px;
	}
	.primary-nav.is-open ul {
		display: flex;
		position: static;
		box-shadow: none;
		padding: 0;
		gap: 0;
	}
	.primary-nav.is-open .menu-link {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--ecreative-border);
	}
	.primary-nav.is-open .mega-menu-panel { position: static; box-shadow: none; border: none; padding: 0 0 0 16px; }
	.menu-toggle { display: block; font-size: 0; }
}

@media (max-width: 768px) {
	.container { width: 95%; }
	.main-header-inner { flex-wrap: wrap; padding:10px; gap: 5px;}
	.footer-columns { grid-template-columns: repeat(2, 1fr); }
	.cart-sidebar { width: 100%; }
	/* Search collapses into the mobile menu at this width, matching the
	   reference design's icon-shedding pattern — wishlist/account/cart stay
	   since they're the icons a mobile shopper actually needs one tap from. */
	.utility-bar .live-search { display: none; }
}

@media (max-width: 480px) {
	.marquee-item { font-size: 14px; }
	.cart-panel-item img { width: 60px; height: 60px; }
}



/* Ensure the widget wrapper doesn't override theme styles */
.custom-product-grid-wrapper ul.products,
.elementor-widget-custom_product_grid ul.products {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Fix for common theme conflicts */
.custom-product-grid-wrapper ul.products li.product {
    width: 100%;
    max-width: 100%;
    margin: 0;
    float: none;
    clear: none;
}

/* Ensure Sale badges and other elements use theme styles */
.custom-product-grid-wrapper .onsale,
.custom-product-grid-wrapper .woocommerce-loop-product__title,
.custom-product-grid-wrapper .price,
.custom-product-grid-wrapper .star-rating,
.custom-product-grid-wrapper .button {
    /* These will inherit from theme */
}

/* Fix pagination styling */
.custom-product-grid-wrapper .woocommerce-pagination {
    width: 100%;
    margin-top: 30px;
}

/* Sale badge on product cards - used everywhere */
.card-sale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--ecreative-primary);
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    z-index: 3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Ensure the image area has position relative for the badge */
.product-card .image-area {
    position: relative;
}

.product-card .card-image {
    position: relative;
}