/* SazKit – Product Gallery for WooCommerce v1.0.6 */

/*
 * Selectors below double the leading class (e.g. `.sazkit-gallery.sazkit-gallery`)
 * to raise specificity above typical theme rules, AND most structurally or
 * functionally critical properties additionally carry `!important`.
 *
 * That second part is deliberate, not accidental scope creep: real-world
 * themes have been observed applying broad generic rules (e.g. a
 * `button:not(.fa)::before` "shine" hover effect applied to every button on
 * the page below a breakpoint, using its own `!important` and enough
 * specificity to beat plain class selectors) that silently break the
 * gallery's layout, images, arrows, or lightbox. Specificity doubling alone
 * cannot defend against a theme rule that is itself `!important` or that
 * targets a bare element type + pseudo-element/class, which often out-scores
 * two of our classes. Purely cosmetic details (hover-transition timing,
 * exact shadow blur, etc.) are left without `!important` — only things that
 * would visibly break if overridden carry it.
 */

.sazkit-gallery.sazkit-gallery:not(.sazkit-layout-left):not(.sazkit-layout-right) {
	position: relative !important;
	display: flex !important;
	flex-wrap: wrap !important;
}

/*
 * Block themes render the gallery inside the `woocommerce/product-image-gallery`
 * block's own column/flex wrapper, which already handles layout — the legacy
 * core "float: left; width: 48%" rule for div.product div.images doesn't
 * apply there the way it does on classic themes, so it needs to be reset
 * only for this block-rendered case (see sazkit-in-block-template).
 */
.sazkit-gallery.sazkit-gallery.sazkit-in-block-template {
	float: none !important;
	width: 100% !important;
}

/* Prevent flash of unstyled stacked images before Swiper initialises */
.sazkit-main.sazkit-main:not(.swiper-initialized) .sazkit-slide:not(:first-child),
.sazkit-thumbs.sazkit-thumbs:not(.swiper-initialized) .sazkit-thumb:not(:first-child) {
	display: none !important;
}

.sazkit-main.sazkit-main {
	position: relative !important;
	width: 100% !important;
}

.sazkit-main.sazkit-main .sazkit-slide img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

/* --------------------------------------------------------------------
 * Fixed height mode: constrain the stage, scale images down, center them
 * ------------------------------------------------------------------ */

.sazkit-height-fixed.sazkit-height-fixed .sazkit-main {
	height: var(--sazkit-height, 550px) !important;
}

@media (max-width: 600px) {

	.sazkit-height-fixed.sazkit-height-fixed .sazkit-main {
		height: var(--sazkit-height-mobile, 400px) !important;
	}
}

.sazkit-height-fixed.sazkit-height-fixed .sazkit-main .sazkit-slide-link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100% !important;
}

.sazkit-height-fixed.sazkit-height-fixed .sazkit-main .sazkit-slide img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 auto !important;
	object-fit: contain !important;
}

/*
 * Cover mode: the image fills the fixed-height stage edge-to-edge
 * (cropping as needed) instead of scaling down to fit inside it.
 * Needs !important to win over the fixed-height base rules just above,
 * which are also !important.
 */
.sazkit-height-fixed.sazkit-height-fixed.sazkit-fit-cover .sazkit-main .sazkit-slide-link {
	display: block !important;
}

.sazkit-height-fixed.sazkit-height-fixed.sazkit-fit-cover .sazkit-main .sazkit-slide img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* Auto height mode keeps the image full width, centered */
.sazkit-height-auto.sazkit-height-auto .sazkit-main .sazkit-slide img {
	margin: 0 auto !important;
}

.sazkit-slide-link.sazkit-slide-link {
	display: block !important;
	position: relative !important;
	overflow: hidden !important;
	outline: none !important;
	cursor: zoom-in;
}

.sazkit-no-zoom.sazkit-no-zoom .sazkit-slide-link {
	cursor: default;
}

/* --------------------------------------------------------------------
 * Badges (rendered by add-ons via the `sazkit_slide_badges` filter)
 * ------------------------------------------------------------------ */

.sazkit-slide.sazkit-slide {
	position: relative !important;
}

.sazkit-badges.sazkit-badges {
	position: absolute !important;
	top: 10px;
	/* Right, not left: WooCommerce's own default "Sale!" badge is
	   typically positioned top-left, and would otherwise overlap these. */
	right: 10px;
	z-index: 3 !important;
	display: flex !important;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	pointer-events: none;
}

.sazkit-badge.sazkit-badge {
	padding: 4px 10px;
	border-radius: 3px;
	background: #333;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.sazkit-badge-sale.sazkit-badge-sale {
	background: #d63638;
}

.sazkit-badge-new.sazkit-badge-new {
	background: #2271b1;
}

.sazkit-badge-custom.sazkit-badge-custom {
	background: #2c3338;
}

/* --------------------------------------------------------------------
 * Hover zoom lens
 * ------------------------------------------------------------------ */

.sazkit-zoom-lens.sazkit-zoom-lens {
	position: absolute !important;
	inset: 0 !important;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0 !important;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.sazkit-slide-link.sazkit-zooming .sazkit-zoom-lens {
	opacity: 1 !important;
}

/* --------------------------------------------------------------------
 * Arrows (self-contained, no Swiper navigation theme needed)
 * ------------------------------------------------------------------ */

/*
 * !important throughout this button's own appearance too, not just its
 * ::before below — themes commonly apply generic `button { ... }` resets
 * (border-radius, box-shadow, background, padding) that would otherwise
 * strip this arrow's circular pill styling.
 */
.sazkit-arrow.sazkit-arrow {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 2 !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.85) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	font-size: 0 !important;
	line-height: 0 !important;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

/*
 * !important throughout: some themes (seen with a Divi-style button "shine"
 * hover effect) apply a generic `button:not(.fa):not(.close-style)::before`
 * rule below a breakpoint (e.g. max-width: 991px) that repurposes every
 * button's ::before for a decorative overlay — forcing its own content,
 * position (with its own !important), z-index, opacity and visibility.
 * Since our arrows are <button> elements, that rule can silently replace
 * this chevron mark with an invisible/mispositioned one.
 *
 * Naming every property here (not just the ones we care about) beats most
 * of that rule outright: a theme rule setting a property we never declare
 * isn't a specificity contest, it's just the only declaration for it. But
 * `position` is a real specificity contest, since the theme rule is
 * !important there too — and its selector (a bare `button` type selector
 * plus two `:not()` classes plus `::before`) edges out our doubled-class
 * selector once both sides are !important. Tripling the class here (not
 * just doubling) is what actually wins that specific property, regardless
 * of which stylesheet loads first.
 */
.sazkit-arrow.sazkit-arrow.sazkit-arrow::before {
	content: "" !important;
	display: block !important;
	position: static !important;
	width: 10px !important;
	height: 10px !important;
	margin: 0 auto !important;
	border-top: 2px solid var(--sazkit-arrow-color, #333) !important;
	border-right: 2px solid var(--sazkit-arrow-color, #333) !important;
	border-bottom: 0 !important;
	border-left: 0 !important;
	background: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 2 !important;
	transition: none !important;
}

.sazkit-arrow.sazkit-arrow:hover,
.sazkit-arrow.sazkit-arrow:focus {
	background-color: #fff !important;
	outline: none;
}

.sazkit-arrow.sazkit-arrow:focus-visible {
	outline: 2px solid #333;
	outline-offset: 2px;
}

.sazkit-prev.sazkit-prev {
	left: 12px !important;
}

.sazkit-prev.sazkit-prev::before {
	transform: translateX(2px) rotate(-135deg) !important;
}

.sazkit-next.sazkit-next {
	right: 12px !important;
}

.sazkit-next.sazkit-next::before {
	transform: translateX(-2px) rotate(45deg) !important;
}

.sazkit-arrow.swiper-button-disabled {
	opacity: 0.35 !important;
	cursor: default;
}

.sazkit-arrow.swiper-button-lock {
	display: none !important;
}

/* --------------------------------------------------------------------
 * Dots (self-contained; Swiper injects .swiper-pagination-bullet spans)
 * ------------------------------------------------------------------ */

.sazkit-dots.sazkit-dots {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px;
	position: absolute !important;
	bottom: 12px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 9 !important;
}

.sazkit-dots.sazkit-dots .swiper-pagination-bullet {
	width: 10px !important;
	height: 10px !important;
	margin: 0;
	background: #c9c9c9 !important;
	opacity: 1 !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sazkit-dots.sazkit-dots .swiper-pagination-bullet:hover {
	background: #999 !important;
}

.sazkit-dots.sazkit-dots .swiper-pagination-bullet-active {
	background: var(--sazkit-dot-color, #333) !important;
	transform: scale(1.2) !important;
}

/* --------------------------------------------------------------------
 * Thumbnails
 * ------------------------------------------------------------------ */

.sazkit-thumbs.sazkit-thumbs {
	position: relative !important;
	width: 100% !important;
	margin-top: 12px;
}

.sazkit-thumbs-has-arrows.sazkit-thumbs-has-arrows {
	padding: 0;
}

.sazkit-thumb-arrow.sazkit-thumb-arrow {
	width: 28px !important;
	height: 28px !important;
}

.sazkit-thumb-arrow.sazkit-thumb-arrow.sazkit-thumb-arrow::before {
	/* Overrides the base .sazkit-arrow::before size, which is now
	   triple-classed (see its own comment) — this needs to match that
	   specificity (tripled here too) to still win via this rule coming
	   later in the file. */
	width: 8px !important;
	height: 8px !important;
}

.sazkit-thumb-prev.sazkit-thumb-prev {
	left: 0 !important;
}

.sazkit-thumb-prev.sazkit-thumb-prev::before {
	transform: translateX(2px) rotate(-135deg) !important;
}

.sazkit-thumb-next.sazkit-thumb-next {
	right: 0 !important;
}

.sazkit-thumb-next.sazkit-thumb-next::before {
	transform: translateX(-2px) rotate(45deg) !important;
}

.sazkit-thumbs.sazkit-thumbs .sazkit-thumb {
	padding: 0 5px;
	cursor: pointer;
}

.sazkit-thumbs.sazkit-thumbs .sazkit-thumb img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	border: 2px solid transparent !important;
	border-radius: 4px;
	opacity: 0.7 !important;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.sazkit-thumbs.sazkit-thumbs .sazkit-thumb:hover img {
	opacity: 1 !important;
}

.sazkit-thumbs.sazkit-thumbs .swiper-slide-thumb-active img {
	opacity: 1 !important;
	border-color: currentColor !important;
}

/* --------------------------------------------------------------------
 * Lightbox
 * ------------------------------------------------------------------ */

body.sazkit-lightbox-open {
	overflow: hidden !important;
}

/*
 * Position/z-index/display here are non-negotiable for the lightbox to work
 * at all as a fullscreen overlay — a theme's own modal CSS, sticky headers,
 * or z-index scheme could otherwise bury it or keep it visually collapsed.
 */
.sazkit-lightbox.sazkit-lightbox {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
}

.sazkit-lightbox.is-open {
	display: flex !important;
}

.sazkit-lightbox-backdrop.sazkit-lightbox-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, 0.9);
}

.sazkit-lightbox-figure.sazkit-lightbox-figure {
	position: relative !important;
	z-index: 1 !important;
	margin: 0 !important;
	max-width: 92vw !important;
	max-height: 88vh !important;
	overflow: hidden;
}

.sazkit-lightbox-image.sazkit-lightbox-image {
	display: block !important;
	max-width: 92vw !important;
	max-height: 88vh !important;
	width: auto !important;
	height: auto !important;
	cursor: zoom-in;
	transition: transform 0.2s ease;
}

.sazkit-lightbox-image.is-zoomed {
	transform: scale(2) !important;
	cursor: zoom-out;
}

/*
 * !important throughout this button's own appearance too, not just its
 * ::before/::after below — see the matching comment on .sazkit-arrow.
 */
.sazkit-lightbox-close.sazkit-lightbox-close,
.sazkit-lightbox-prev.sazkit-lightbox-prev,
.sazkit-lightbox-next.sazkit-lightbox-next {
	position: absolute !important;
	z-index: 2 !important;
	width: 48px !important;
	height: 48px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.9) !important;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	font-size: 0 !important;
	line-height: 0 !important;
	transition: background-color 0.2s ease;
}

.sazkit-lightbox-close.sazkit-lightbox-close:hover,
.sazkit-lightbox-prev.sazkit-lightbox-prev:hover,
.sazkit-lightbox-next.sazkit-lightbox-next:hover {
	background-color: #fff !important;
}

.sazkit-lightbox-close.sazkit-lightbox-close:focus-visible,
.sazkit-lightbox-prev.sazkit-lightbox-prev:focus-visible,
.sazkit-lightbox-next.sazkit-lightbox-next:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.sazkit-lightbox-close.sazkit-lightbox-close {
	top: 16px !important;
	right: 16px !important;
}

/* See the comment on .sazkit-arrow.sazkit-arrow.sazkit-arrow::before for why
   this needs !important throughout AND a tripled class: a generic themed
   `button::before`/`::after` rule can otherwise silently replace these with
   its own decorative overlay below ~991px, and it can out-specify a merely
   doubled class when both sides are !important on the same property. */
.sazkit-lightbox-close.sazkit-lightbox-close.sazkit-lightbox-close::before,
.sazkit-lightbox-close.sazkit-lightbox-close.sazkit-lightbox-close::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	width: 18px !important;
	height: 2px !important;
	background: #333 !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 1 !important;
}

.sazkit-lightbox-close.sazkit-lightbox-close.sazkit-lightbox-close::before {
	transform: translate(-50%, -50%) rotate(45deg) !important;
}

.sazkit-lightbox-close.sazkit-lightbox-close.sazkit-lightbox-close::after {
	transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.sazkit-lightbox-prev.sazkit-lightbox-prev {
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.sazkit-lightbox-next.sazkit-lightbox-next {
	right: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.sazkit-lightbox-prev.sazkit-lightbox-prev.sazkit-lightbox-prev::before,
.sazkit-lightbox-next.sazkit-lightbox-next.sazkit-lightbox-next::before {
	content: "" !important;
	display: block !important;
	position: static !important;
	width: 12px !important;
	height: 12px !important;
	margin: 0 auto !important;
	border-top: 2px solid var(--sazkit-arrow-color, #333) !important;
	border-right: 2px solid var(--sazkit-arrow-color, #333) !important;
	border-bottom: 0 !important;
	border-left: 0 !important;
	background: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 1 !important;
}

.sazkit-lightbox-prev.sazkit-lightbox-prev.sazkit-lightbox-prev::before {
	transform: translateX(2px) rotate(-135deg) !important;
}

.sazkit-lightbox-next.sazkit-lightbox-next.sazkit-lightbox-next::before {
	transform: translateX(-2px) rotate(45deg) !important;
}

.sazkit-lightbox-counter.sazkit-lightbox-counter {
	position: absolute !important;
	bottom: 16px;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 2 !important;
	padding: 4px 12px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
}

@media (max-width: 600px) {

	.sazkit-lightbox-close.sazkit-lightbox-close,
	.sazkit-lightbox-prev.sazkit-lightbox-prev,
	.sazkit-lightbox-next.sazkit-lightbox-next {
		width: 40px !important;
		height: 40px !important;
	}
}