/* ==========================================================================
   ZZ Products Skin — Frontend Styles v2.0.5
   Inter Tight + PAF-style glass filter bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables
   -------------------------------------------------------------------------- */
:root {
	--zz-font-body:          'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--zz-color-text:         #111111;
	--zz-color-text-muted:   #999999;
	--zz-glass-bg:           rgba(255, 255, 255, 0.80);
	--zz-glass-border:       rgba(0, 0, 0, 0.11);
	--zz-glass-border-hover: rgba(0, 0, 0, 0.30);
	--zz-glass-shadow:       0 2px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
	--zz-product-gap:        2rem;
	--zz-filter-mb:          3rem;
	--zz-ease:               0.2s ease;
}

/* --------------------------------------------------------------------------
   Grid reset
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Grid — default view (4 col desktop → 3 tablet → 2 mobile)
   Prefixed with body.zz-skin-active (0,2,1 specificity) to beat
   Elementor's .elementor-grid-mobile-N .elementor-grid (0,2,0) rules.
   -------------------------------------------------------------------------- */
body.zz-skin-active .elementor-widget-woocommerce-products ul.products,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products.columns-1,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products.columns-2,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products.columns-3,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products.columns-4,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products.columns-5,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products.columns-6 {
	display:               grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap:                   var(--zz-product-gap) !important;
	list-style:            none !important;
	margin:                0    !important;
	padding:               0    !important;
}

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
	body.zz-skin-active .elementor-widget-woocommerce-products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 1.5rem !important;
	}
}

/* Mobile ≤ 767px */
@media (max-width: 767px) {
	body.zz-skin-active .elementor-widget-woocommerce-products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1rem !important;
	}
}

/* Mobile small ≤ 480px */
@media (max-width: 480px) {
	body.zz-skin-active .elementor-widget-woocommerce-products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
	}
}

/* Mobile XS ≤ 360px */
@media (max-width: 360px) {
	body.zz-skin-active .elementor-widget-woocommerce-products ul.products {
		grid-template-columns: 1fr !important;
		gap: 1.25rem !important;
	}
}

/* --------------------------------------------------------------------------
   Dense view — .zz-view-dense on widget (6 col desktop, 4 col mobile)
   0,3,1 specificity — beats everything
   -------------------------------------------------------------------------- */
body.zz-skin-active .elementor-widget-woocommerce-products.zz-view-dense ul.products {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

@media (max-width: 1024px) {
	body.zz-skin-active .elementor-widget-woocommerce-products.zz-view-dense ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	body.zz-skin-active .elementor-widget-woocommerce-products.zz-view-dense ul.products {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 480px) {
	body.zz-skin-active .elementor-widget-woocommerce-products.zz-view-dense ul.products {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 360px) {
	body.zz-skin-active .elementor-widget-woocommerce-products.zz-view-dense ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* 1-col dense mobile — add bottom breathing room to prevent footer overlap */
@media (max-width: 767px) {
	body.zz-skin-active .elementor-widget-woocommerce-products.zz-view-dense ul.products {
		padding-bottom: 3rem !important;
	}
}

/* --------------------------------------------------------------------------
   Product card strip
   -------------------------------------------------------------------------- */
/* WooCommerce uses float layout with % widths — kill all of it */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.zz-product-item {
	float:         none        !important;
	clear:         none        !important;
	width:         100%        !important;
	max-width:     100%        !important;
	min-width:     0           !important;
	margin-left:   0           !important;
	margin-right:  0           !important;
	background:    transparent !important;
	border:        none        !important;
	box-shadow:    none        !important;
	border-radius: 0           !important;
	padding:       0           !important;
	margin-bottom: 0           !important;
	display:       block       !important;
	box-sizing:    border-box  !important;
}

.zz-product-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.zz-product-image-wrap {
	position:     relative  !important;
	width:        100%      !important;
	aspect-ratio: 3 / 4    !important; /* portrait ratio — scales at any resolution */
	overflow:     hidden    !important;
	background:   none      !important;
	margin-bottom: 0.875rem;
	display:      block     !important;
	box-sizing:   border-box !important;
}

/* Both images fill the aspect-ratio container */
.zz-product-image-wrap .zz-img-primary,
.zz-product-image-wrap .zz-img-hover {
	position:        absolute     !important;
	top:             0            !important;
	left:            0            !important;
	width:           100%         !important;
	height:          100%         !important;
	object-fit:      cover        !important;
	object-position: center top   !important; /* favour top of image — shows faces/subject */
	display:         block        !important;
	border:          none         !important;
	margin:          0            !important;
	padding:         0            !important;
	max-width:       none         !important;
	max-height:      none         !important;
}

/* Primary visible by default */
.zz-product-image-wrap .zz-img-primary {
	opacity:    1 !important;
	transition: opacity 0.35s ease;
	z-index:    1;
}

/* Hover image stacked above, hidden by default */
.zz-product-image-wrap .zz-img-hover {
	opacity:    0 !important;
	transition: opacity 0.35s ease;
	z-index:    2;
}

/* Cross-fade on hover */
.zz-product-link:hover .zz-product-image-wrap.zz-has-hover .zz-img-primary {
	opacity: 0 !important;
}

.zz-product-link:hover .zz-product-image-wrap.zz-has-hover .zz-img-hover {
	opacity: 1 !important;
}

/* No hover image — subtle opacity dip */
.zz-product-link:hover .zz-product-image-wrap:not(.zz-has-hover) .zz-img-primary {
	opacity: 0.8 !important;
}

.zz-product-info {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}

/* Typography defaults — no !important so Elementor's Style tab controls
   (Products > Title, Products > Price) can override via inline styles */
.zz-product-name,
.zz-product-price,
.zz-product-price .woocommerce-Price-amount,
.zz-product-price .price {
	font-family: var(--zz-font-body);
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--zz-color-text);
	line-height: 1.4;
	letter-spacing: 0;
}

/* Mobile typography — also without !important */
.zz-product-name,
.zz-product-price {
	display: block;
}

/* Hide native WooCommerce elements we replace.
   Scoped to body.zz-skin-active so the Elementor editor preview
   (which never gets this class) still shows native WC markup. */
/* Hide native WC elements — .woocommerce-loop-product__title intentionally excluded
   since we now use that class on our own span. The native title's parent anchor
   is already hidden by a:not(.zz-product-link) below. */
body.zz-skin-active .elementor-widget-woocommerce-products ul.products li.product .button,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products li.product .add_to_cart_button,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products li.product mark,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products li.product .onsale,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products li.product > .price,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products li.product > a > img,
body.zz-skin-active .elementor-widget-woocommerce-products ul.products li.product > a:not(.zz-product-link),
body.zz-skin-active .elementor-widget-woocommerce-products ul.products li.product > img {
	display: none !important;
}

/* Ensure widget container never clips expanded content */
.elementor-widget-woocommerce-products {
	overflow: visible !important;
	position: relative !important;
	z-index: 1 !important;
}

.elementor-widget-woocommerce-products .elementor-widget-container {
	overflow: visible !important;
}

/* Footer must sit below the products widget stacking context */
.elementor-location-footer {
	position: relative !important;
	z-index: 0 !important;
}

/* Loading */
.elementor-widget-woocommerce-products ul.products.zz-loading {
	opacity: 0.28;
	pointer-events: none;
}

/* No products */
.zz-no-products { grid-column: 1 / -1; padding: 4rem 0; text-align: center; }
.zz-no-products p {
	font-family: var(--zz-font-body);
	font-size: 0.8rem;
	color: var(--zz-color-text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */
.zz-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: var(--zz-filter-mb);
	position: relative;
	z-index: 9999;
}

.zz-filter-bar-left,
.zz-filter-bar-right {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Glass pill — override ALL theme button styles
   -------------------------------------------------------------------------- */
.zz-filter-bar .zz-glass-btn,
.zz-filter-bar .zz-glass-btn:link,
.zz-filter-bar .zz-glass-btn:visited,
.zz-filter-bar .zz-glass-btn:hover,
.zz-filter-bar .zz-glass-btn:focus,
.zz-filter-bar .zz-glass-btn:active {
	/* Layout */
	display:         inline-flex !important;
	align-items:     center      !important;
	gap:             0.3rem      !important;
	/* Box */
	background:      var(--zz-glass-bg)     !important;
	border:          1px solid var(--zz-glass-border) !important;
	border-radius:   99px !important;
	height:          32px !important;
	padding:         0 0.9rem !important;
	/* Type */
	font-family:     var(--zz-font-body)  !important;
	font-size:       0.74rem              !important;
	font-weight:     400                  !important;
	line-height:     1                    !important;
	color:           var(--zz-color-text) !important;
	letter-spacing:  0.01em               !important;
	text-decoration: none                 !important;
	text-transform:  none                 !important;
	/* Glass */
	-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
	backdrop-filter:         blur(16px) saturate(180%) !important;
	box-shadow:       var(--zz-glass-shadow) !important;
	/* Misc */
	cursor:          pointer   !important;
	white-space:     nowrap    !important;
	appearance:      none      !important;
	-webkit-appearance: none   !important;
	outline:         none      !important;
	transition:      border-color var(--zz-ease), background var(--zz-ease) !important;
	margin:          0         !important;
	width:           auto      !important;
}

.zz-filter-bar .zz-glass-btn:hover {
	border-color: var(--zz-glass-border-hover) !important;
	background: rgba(255, 255, 255, 0.95) !important;
}

.zz-filter-bar .zz-glass-btn.zz-active {
	border-color: var(--zz-glass-border-hover) !important;
	background: rgba(255, 255, 255, 0.95) !important;
}

/* Prevent all buttons from changing size on tap/click.
   iOS Safari tap highlight and active state can cause layout shifts
   especially when backdrop-filter is involved. */
.zz-filter-bar .zz-glass-btn:active {
	height:                    32px                      !important;
	padding:                   0 0.9rem                  !important;
	-webkit-tap-highlight-color: transparent;
	transform:                 none                      !important;
}

/* Apply to all buttons regardless of state */
.zz-filter-bar .zz-glass-btn {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout:       none;
}

/* View toggle btn */
.zz-filter-bar .zz-view-btn {
	width:   32px   !important;
	height:  32px   !important;
	padding: 0      !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.zz-filter-bar .zz-view-btn svg {
	width:  14px;
	height: 14px;
	display: block;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

.zz-filter-bar .zz-view-btn:hover svg {
	opacity: 0.6;
}

/* Reset icon btn */
.zz-filter-bar .zz-btn-reset {
	width:   32px   !important;
	height:  32px   !important;
	padding: 0      !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.zz-filter-bar .zz-btn-reset svg {
	width:  13px;
	height: 13px;
	display: block;
	flex-shrink: 0;
	transition: transform 0.42s ease;
}

.zz-filter-bar .zz-btn-reset:hover svg {
	transform: rotate(-180deg);
}

/* Icon-only buttons must not grow on hover/focus/active.
   The base :hover rule has higher specificity and resets padding — fix that. */
.zz-filter-bar .zz-btn-reset:hover,
.zz-filter-bar .zz-btn-reset:focus,
.zz-filter-bar .zz-btn-reset:active,
.zz-filter-bar .zz-view-btn:hover,
.zz-filter-bar .zz-view-btn:focus,
.zz-filter-bar .zz-view-btn:active {
	width:   32px !important;
	height:  32px !important;
	padding: 0    !important;
}

/* Dismiss × */
.zz-tag-dismiss {
	display:     inline-flex;
	align-items: center;
	opacity:     0.45;
	font-size:   0.82em;
	line-height: 1;
	margin-left: 0.1rem;
	transition:  opacity 0.15s ease;
}

.zz-filter-bar .zz-glass-btn:hover .zz-tag-dismiss { opacity: 0.9; }

/* --------------------------------------------------------------------------
   Dropdown wrapper + panel
   -------------------------------------------------------------------------- */
.zz-dropdown-wrap {
	position: relative;
}

.zz-dropdown-panel {
	position:  absolute;
	top:       calc(100% + 7px);
	left:      0;
	min-width: 160px;
	/* Glass panel */
	background:              rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(24px) saturate(200%);
	backdrop-filter:         blur(24px) saturate(200%);
	border:       1px solid rgba(0, 0, 0, 0.09);
	border-radius: 14px;
	box-shadow:   0 6px 32px rgba(0, 0, 0, 0.10), 0 1px 6px rgba(0, 0, 0, 0.06);
	padding:      0.5rem 0;
	z-index:      10000;
	/* Hidden */
	opacity:        0;
	transform:      translateY(-5px);
	pointer-events: none;
	transition:     opacity 0.17s ease, transform 0.17s ease;
}

.zz-sort-panel { left: auto; right: 0; }

.zz-dropdown-wrap.open .zz-dropdown-panel {
	opacity:        1;
	transform:      translateY(0);
	pointer-events: auto;
}

/* Dropdown rows */
.zz-dropdown-panel .zz-dropdown-option {
	font-family:  var(--zz-font-body)  !important;
	font-size:    0.8rem               !important;
	font-weight:  400                  !important;
	color:        var(--zz-color-text) !important;
	background:   transparent         !important;
	border:       none                 !important;
	border-radius: 0                   !important;
	box-shadow:   none                 !important;
	width:        100%                 !important;
	text-align:   left                 !important;
	padding:      0.58rem 1.1rem       !important;
	cursor:       pointer              !important;
	line-height:  1.3                  !important;
	display:      block                !important;
	transition:   background 0.12s ease !important;
	appearance:   none                 !important;
	-webkit-appearance: none           !important;
	letter-spacing: 0                  !important;
	text-transform: none               !important;
	margin: 0                          !important;
}

.zz-dropdown-panel .zz-dropdown-option:hover {
	background: rgba(0, 0, 0, 0.04) !important;
}

.zz-dropdown-panel .zz-dropdown-option.active {
	opacity: 0.4;
}

/* Search panel */
.zz-search-panel {
	min-width: 220px;
	padding:   0.65rem 0.9rem !important;
}

.zz-search-input {
	font-family:   var(--zz-font-body)  !important;
	font-size:     0.8rem               !important;
	font-weight:   400                  !important;
	color:         var(--zz-color-text) !important;
	background:    transparent          !important;
	border:        none                 !important;
	border-bottom: 1px solid rgba(0,0,0,0.12) !important;
	border-radius: 0                    !important;
	box-shadow:    none                 !important;
	width:         100%                 !important;
	padding:       0.3rem 0             !important;
	outline:       none                 !important;
	line-height:   1.5                  !important;
	transition:    border-color 0.15s ease !important;
}

.zz-search-input::placeholder { color: var(--zz-color-text-muted); }
.zz-search-input:focus { border-bottom-color: rgba(0,0,0,0.35) !important; }

/* --------------------------------------------------------------------------
   Active tags area
   -------------------------------------------------------------------------- */
.zz-active-tags {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Staggered fade-in
   -------------------------------------------------------------------------- */
@keyframes zzFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0);   }
}

.elementor-widget-woocommerce-products ul.products li.product {
	animation: zzFadeIn 0.32s ease both;
}

.elementor-widget-woocommerce-products ul.products li.product:nth-child(1) { animation-delay: 0.00s; }
.elementor-widget-woocommerce-products ul.products li.product:nth-child(2) { animation-delay: 0.04s; }
.elementor-widget-woocommerce-products ul.products li.product:nth-child(3) { animation-delay: 0.08s; }
.elementor-widget-woocommerce-products ul.products li.product:nth-child(4) { animation-delay: 0.12s; }
.elementor-widget-woocommerce-products ul.products li.product:nth-child(5) { animation-delay: 0.16s; }
.elementor-widget-woocommerce-products ul.products li.product:nth-child(6) { animation-delay: 0.20s; }
.elementor-widget-woocommerce-products ul.products li.product:nth-child(7) { animation-delay: 0.24s; }
.elementor-widget-woocommerce-products ul.products li.product:nth-child(8) { animation-delay: 0.28s; }


/* ==========================================================================
   Responsive — ZZ Products Skin v1.8.0
   Columns driven by three CSS variables set from Elementor widget classes:
   --zz-columns (desktop), --zz-tablet-columns (tablet), --zz-mobile-columns (mobile)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile (≤ 767px) — filter bar + gap only; grid columns handled by JS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-widget-woocommerce-products ul.products {
		gap: 1rem !important;
	}

	:root {
		--zz-filter-mb: 1.5rem;
	}

	/* Single row: left group shrinks, right group pushed to end */
	.zz-filter-bar {
		flex-wrap:   nowrap !important;
		align-items: center !important;
		gap:         0.3rem !important;
	}

	.zz-filter-bar-left {
		flex:     1 1 auto !important;
		flex-wrap: nowrap  !important;
		gap:       0.3rem  !important;
		min-width: 0;
		overflow:  visible;
	}

	.zz-filter-bar-right {
		flex:        0 0 auto !important;
		flex-wrap:   nowrap   !important;
		gap:         0.3rem   !important;
		margin-left: auto     !important;
	}

	/* Smaller pills on mobile */
	.zz-filter-bar .zz-glass-btn {
		height:    28px       !important;
		font-size: 0.68rem    !important;
		padding:   0 0.7rem   !important;
	}

	.zz-filter-bar .zz-glass-btn:active {
		height:  28px    !important;
		padding: 0 0.7rem !important;
		transform: none  !important;
	}

	.zz-filter-bar .zz-btn-reset,
	.zz-filter-bar .zz-btn-reset:hover,
	.zz-filter-bar .zz-btn-reset:focus,
	.zz-filter-bar .zz-btn-reset:active,
	.zz-filter-bar .zz-view-btn,
	.zz-filter-bar .zz-view-btn:hover,
	.zz-filter-bar .zz-view-btn:focus,
	.zz-filter-bar .zz-view-btn:active {
		width:   28px !important;
		height:  28px !important;
		padding: 0    !important;
		flex-shrink: 0 !important;
	}

	.zz-filter-bar .zz-btn-reset svg,
	.zz-filter-bar .zz-view-btn svg {
		width:  12px;
		height: 12px;
	}

	/* Dropdown panels — never overflow viewport */
	.zz-dropdown-panel {
		max-width: calc(100vw - 2rem);
	}

	/* Sort panel sticks to right edge */
	.zz-sort-panel {
		right: 0;
		left:  auto;
	}

	/* Cat panel — open left-anchored, but clamp if too wide */
	.zz-cat-panel {
		left:      0;
		right:     auto;
		min-width: 140px;
	}

	/* Search panel — left-anchored, clamped to viewport */
	.zz-search-panel {
		left:      0;
		right:     auto;
		min-width: 200px;
		max-width: calc(100vw - 3rem);
	}

	/* Product name / price slightly smaller on mobile */
	.zz-product-name,
	.zz-product-price,
	.zz-product-price .woocommerce-Price-amount,
	.zz-product-price .price {
		font-size: 0.72rem;
	}

}

/* --------------------------------------------------------------------------
   Mobile small (≤ 480px) — gap + hide tags
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.elementor-widget-woocommerce-products ul.products {
		gap: 0.75rem !important;
	}

	/* Hide active tags on very small screens to keep bar from wrapping */
	.zz-active-tags {
		display: none !important;
	}
}