/**
 * Amitry Slider Pro - frontend styles.
 *
 * Scoped under Pro marker classes so nothing affects free sliders.
 */

/* ── Hover image swap ───────────────────────────────────────────────
   The free plugin renders the main image as .wcsp-img inside
   .wcsp-img-wrap. We inject .wcsp-pro-hover-img as a sibling and
   cross-fade it in on hover. Only active when the slider carries
   .wcsp-pro-has-hover-swap. */
.wcsp-pro-has-hover-swap .wcsp-img-wrap {
	position: relative;
}
.wcsp-pro-has-hover-swap .wcsp-pro-hover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
	z-index: 2;
}
.wcsp-pro-has-hover-swap .wcsp-card:hover .wcsp-pro-hover-img {
	opacity: 1;
}

/* Respect reduced motion: still swap, but instantly. */
@media (prefers-reduced-motion: reduce) {
	.wcsp-pro-has-hover-swap .wcsp-pro-hover-img {
		transition: none;
	}
}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM DESIGNS (Pro)

   Scoped with .wcsp-outer.wcsp-style-{name} to match the free plugin's
   selector specificity (it uses the same double-class pattern), and built
   on the free card structure + CSS variables (--wcsp-radius,
   --wcsp-card-pad-current) so they cooperate rather than fight.
   ════════════════════════════════════════════════════════════════════ */

/* ── OVERLAY ─────────────────────────────────────────────────────────
   Content overlaps the image; a gradient scrim guarantees legibility.
   The card becomes a single image canvas with text pinned to the bottom. */
.wcsp-outer.wcsp-style-overlay .wcsp-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--wcsp-radius, 14px);
	background: #1a1a1a;
}
/* The media link should fill the whole card. */
.wcsp-outer.wcsp-style-overlay .wcsp-card__link--media {
	display: block;
}
/* Force a tall, consistent canvas regardless of chosen aspect ratio. */
.wcsp-outer.wcsp-style-overlay .wcsp-img-wrap {
	aspect-ratio: 3 / 4;
	border-radius: var(--wcsp-radius, 14px);
}
/* Stronger, full-height gradient (overrides the free .wcsp-overlay scrim). */
.wcsp-outer.wcsp-style-overlay .wcsp-img-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	height: 100%;
	background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 70%);
	z-index: 1;
	pointer-events: none;
}
/* Pin content over the image. */
.wcsp-outer.wcsp-style-overlay .wcsp-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 18px 18px 16px;
	text-align: left;
}
.wcsp-outer.wcsp-style-overlay .wcsp-title,
.wcsp-outer.wcsp-style-overlay .wcsp-title a,
.wcsp-outer.wcsp-style-overlay .wcsp-price,
.wcsp-outer.wcsp-style-overlay .wcsp-count,
.wcsp-outer.wcsp-style-overlay .wcsp-excerpt {
	color: #fff !important;
}
.wcsp-outer.wcsp-style-overlay .wcsp-price { opacity: .95; }
.wcsp-outer.wcsp-style-overlay .wcsp-excerpt { opacity: .85; }

/* ── CIRCLE ──────────────────────────────────────────────────────────
   Round image, centered text. Free already has a circle shape mechanic;
   we lean on it and just center + clean the card. */
.wcsp-outer.wcsp-style-circle .wcsp-card {
	background: transparent;
	box-shadow: none !important;
	border: 0;
	text-align: center;
}
.wcsp-outer.wcsp-style-circle .wcsp-img-wrap {
	aspect-ratio: 1 / 1;
	width: 72%;
	max-width: 220px;
	margin: 0 auto;
	border-radius: 50%;
	box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.wcsp-outer.wcsp-style-circle .wcsp-img-wrap img,
.wcsp-outer.wcsp-style-circle .wcsp-img-wrap .wcsp-img {
	border-radius: 50%;
}
.wcsp-outer.wcsp-style-circle .wcsp-content {
	margin-top: 16px;
	text-align: center;
}
.wcsp-outer.wcsp-style-circle .wcsp-title,
.wcsp-outer.wcsp-style-circle .wcsp-price,
.wcsp-outer.wcsp-style-circle .wcsp-count,
.wcsp-outer.wcsp-style-circle .wcsp-rating {
	text-align: center;
}
/* The rating stars are an inline-flex row; center it within the card. */
.wcsp-outer.wcsp-style-circle .wcsp-rating {
	display: flex;
	justify-content: center;
}

/* ── Circle design: overlay elements follow the round image ──────────
   All overlays (sale badge, heart, New/Bestseller, Quick View) live
   inside .wcsp-img-wrap, which is a circle. Corner positions would sit
   in the empty corners of the bounding box, so we move each element onto
   the circle's arc (~11% inset = on the 45-degree arc). The wrap keeps
   its round clipping; the placeholder is rounded too so it stays circular. */
.wcsp-outer.wcsp-style-circle .wcsp-img-fallback {
	border-radius: 50%;
}
/* Keep the round clip via overflow:hidden (the base default). All overlay
   elements are positioned INSIDE the circle so they are never clipped by
   the round mask, and the image/placeholder stay perfectly circular. */
.wcsp-outer.wcsp-style-circle .wcsp-img-wrap {
	overflow: hidden;
}
/* Sale badge -> inside the upper-left of the circle */
.wcsp-outer.wcsp-style-circle .wcsp-badge {
	top: 16%;
	left: 16%;
	right: auto;
}
/* Wishlist heart -> inside the upper-right of the circle */
.wcsp-outer.wcsp-style-circle .wcsp-pro-wishlist-btn {
	top: 14%;
	right: 14%;
	left: auto;
}
/* New / Bestseller pills -> inside the lower area, centered */
.wcsp-outer.wcsp-style-circle .wcsp-pro-badges {
	top: auto;
	bottom: 16%;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	flex-direction: row;
	align-items: center;
}
/* Quick View -> bottom edge inside the circle (on hover) */
.wcsp-outer.wcsp-style-circle .wcsp-pro-quickview-btn {
	top: auto;
	bottom: 14%;
	left: 50%;
	transform: translate(-50%, 12px);
}
.wcsp-outer.wcsp-style-circle.wcsp-pro-has-quickview .wcsp-card:hover .wcsp-pro-quickview-btn {
	transform: translate(-50%, 0);
}

/* ── 3D CAROUSEL ─────────────────────────────────────────────────────
   The coverflow motion is set in pro.js. CSS here only refines depth
   perception via opacity. Shadow is left to the free plugin's shadow
   setting (None/Soft/Medium/Strong) - we don't force one, so it never
   clashes with the card's overflow clipping. */
.wcsp-outer.wcsp-style-carousel-3d .wcsp-card {
	border-radius: var(--wcsp-radius, 14px);
	overflow: hidden;
	transition: opacity .35s ease;
}
.wcsp-outer.wcsp-style-carousel-3d .swiper-slide:not(.swiper-slide-active) .wcsp-card {
	opacity: .55;
}

/* ── MASONRY ─────────────────────────────────────────────────────────
   A true masonry grid can't live in a single-row Swiper track. Instead
   we vary image aspect ratios per slide for an editorial, non-uniform
   rhythm while remaining a horizontal slider. No vertical offset (that
   looked broken); the varied heights alone create the masonry feel. */
.wcsp-outer.wcsp-style-masonry .wcsp-card {
	border-radius: var(--wcsp-radius, 14px);
	overflow: hidden;
}
.wcsp-outer.wcsp-style-masonry .swiper-slide:nth-child(3n+1) .wcsp-img-wrap {
	aspect-ratio: 4 / 5;
}
.wcsp-outer.wcsp-style-masonry .swiper-slide:nth-child(3n+2) .wcsp-img-wrap {
	aspect-ratio: 1 / 1;
}
.wcsp-outer.wcsp-style-masonry .swiper-slide:nth-child(3n) .wcsp-img-wrap {
	aspect-ratio: 4 / 3;
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 3 - CONVERSION FEATURES (Pro)
   ════════════════════════════════════════════════════════════════════ */

/* ── Custom badges ───────────────────────────────────────────────────
   Stacked in the top-left of the image, below/around the free Sale badge.
   The free Sale badge sits top-left too; we offset our stack to top-right
   to avoid collision. */
.wcsp-pro-badges {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-end;
	pointer-events: none;
}
.wcsp-pro-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.wcsp-pro-badge--new {
	background: #16a34a;
}
.wcsp-pro-badge--bestseller {
	background: #d97706;
}

/* ── Quick View button ───────────────────────────────────────────────
   Hidden by default, slides up on card hover. Centered on the image. */
.wcsp-pro-quickview-btn {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translate(-50%, 12px);
	z-index: 4;
	opacity: 0;
	pointer-events: none;
	border: 0;
	cursor: pointer;
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(255,255,255,.95);
	color: #111;
	font-size: 0.82rem;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(0,0,0,.2);
	transition: opacity .25s ease, transform .25s ease, background .15s ease;
	backdrop-filter: blur(4px);
}
.wcsp-pro-has-quickview .wcsp-img-wrap { position: relative; }
.wcsp-pro-has-quickview .wcsp-card:hover .wcsp-pro-quickview-btn {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.wcsp-pro-quickview-btn:hover {
	background: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.wcsp-pro-quickview-btn { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* ── Quick View modal ────────────────────────────────────────────────
   Lightweight, minimal popup built in pro.js. */
.wcsp-pro-qv-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.wcsp-pro-qv-modal.is-open { display: flex; }
.wcsp-pro-qv-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 42, 34, .5);
	backdrop-filter: blur(3px);
}
.wcsp-pro-qv-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 680px;
	max-height: 88vh;
	overflow: auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(14, 42, 34, .22);
	animation: wcsp-pro-qv-in .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes wcsp-pro-qv-in {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wcsp-pro-qv-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: #0e2a22;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 10px rgba(14, 42, 34, .12);
	transition: background .15s ease, transform .15s ease;
}
.wcsp-pro-qv-close:hover { background: #fff; transform: rotate(90deg); }
.wcsp-pro-qv-loading {
	padding: 72px;
	text-align: center;
	font-size: 1.8rem;
	color: #c7d2cc;
}
body.wcsp-pro-qv-lock { overflow: hidden; }

/* Quick View fragment layout */
.wcsp-pro-qv {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 0;
}
.wcsp-pro-qv__media {
	background: #f4f6f5;
}
.wcsp-pro-qv__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px 0 0 20px;
}
.wcsp-pro-qv__body {
	padding: 36px 34px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.wcsp-pro-qv__title {
	margin: 0;
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #0e2a22;
}
.wcsp-pro-qv__price {
	font-size: 1.2rem;
	font-weight: 600;
	color: #16a34a;
}
.wcsp-pro-qv__price del {
	color: #9aa8a0;
	font-weight: 400;
	margin-right: 6px;
}
.wcsp-pro-qv__excerpt {
	color: #51635b;
	line-height: 1.6;
	font-size: .94rem;
}
.wcsp-pro-qv__actions {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wcsp-pro-qv-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 13px 22px;
	border-radius: 12px;
	background: #16a34a;
	color: #fff !important;
	font-weight: 600;
	font-size: .98rem;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(22, 163, 74, .25);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wcsp-pro-qv-cart:hover {
	background: #15803d;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(22, 163, 74, .32);
}
.wcsp-pro-qv__details {
	text-align: center;
	color: #6b7a72 !important;
	font-size: .88rem;
	text-decoration: none;
	transition: color .15s ease;
}
.wcsp-pro-qv__details:hover {
	color: #16a34a !important;
}
@media (max-width: 600px) {
	.wcsp-pro-qv { grid-template-columns: 1fr; }
	.wcsp-pro-qv__media img { border-radius: 20px 20px 0 0; max-height: 260px; }
	.wcsp-pro-qv__body { padding: 26px 24px; }
}

/* ── AJAX cart button feedback ───────────────────────────────────────── */
.wcsp-pro-ajax-cart .wcsp-cart-btn.wcsp-pro-loading {
	opacity: .65;
	pointer-events: none;
}
.wcsp-pro-ajax-cart .wcsp-cart-btn.wcsp-pro-added {
	background: #16a34a !important;
	color: #fff !important;
	border-color: #16a34a !important;
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 4 - URGENCY & ENGAGEMENT (Pro)
   ════════════════════════════════════════════════════════════════════ */

/* ── Sale countdown ──────────────────────────────────────────────────── */
.wcsp-pro-countdown {
	display: flex;
	gap: 6px;
	margin-top: 10px;
}
.wcsp-pro-cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 38px;
	padding: 5px 4px;
	border-radius: 8px;
	background: #fef2f2;
	border: 1px solid #fee2e2;
}
.wcsp-pro-cd-unit b {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	color: #dc2626;
	font-variant-numeric: tabular-nums;
}
.wcsp-pro-cd-unit i {
	font-style: normal;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #b91c1c;
	margin-top: 3px;
}

/* ── Wishlist heart button ───────────────────────────────────────────── */
.wcsp-pro-wishlist-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 8px rgba(14, 42, 34, .14);
	backdrop-filter: blur(4px);
	transition: transform .15s ease, background .15s ease;
}
/* When the wishlist button is present, push the custom badges down so
   they don't sit under the heart (both are top-right). */
.wcsp-pro-has-wishlist .wcsp-pro-badges {
	top: 56px;
}
.wcsp-pro-wishlist-btn:hover {
	transform: scale(1.08);
	background: #fff;
}
.wcsp-pro-heart {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: #6b7a72;
	stroke-width: 1.8;
	transition: fill .18s ease, stroke .18s ease, transform .18s ease;
}
.wcsp-pro-wishlist-btn.is-active .wcsp-pro-heart {
	fill: #ef4444;
	stroke: #ef4444;
}
.wcsp-pro-wishlist-btn.wcsp-pro-pop .wcsp-pro-heart {
	animation: wcsp-pro-heart-pop .32s ease;
}
@keyframes wcsp-pro-heart-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.wcsp-pro-wishlist-btn.wcsp-pro-pop .wcsp-pro-heart { animation: none; }
}

/* ── Stock bar + low-stock label ─────────────────────────────────────── */
.wcsp-pro-stock {
	margin-top: 10px;
}
.wcsp-pro-stock-bar {
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: #eef2f0;
	overflow: hidden;
}
.wcsp-pro-stock-bar__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
	transition: width .4s ease;
}
.wcsp-pro-stock-label {
	margin-top: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #c2410c;
}

/* ════════════════════════════════════════════════════════════════════
   WISHLIST PAGE (Pro - big wishlist)
   ════════════════════════════════════════════════════════════════════ */
.wcsp-pro-wishlist-page {
	max-width: 820px;
	margin: 0 auto;
}
.wcsp-pro-wl-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e7ebe8;
}
.wcsp-pro-wl-count {
	font-size: .95rem;
	font-weight: 600;
	color: #51635b;
}
.wcsp-pro-wl-share {
	border: 1px solid #d5ddd8;
	background: #fff;
	color: #0e2a22;
	font-size: .85rem;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.wcsp-pro-wl-share:hover {
	background: #f4f6f5;
	border-color: #16a34a;
}
.wcsp-pro-wl-loading,
.wcsp-pro-wl-empty {
	padding: 48px 20px;
	text-align: center;
	color: #8a988f;
	font-size: 1rem;
}
.wcsp-pro-wl-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #eef2f0;
	transition: opacity .2s ease;
}
.wcsp-pro-wl-item:last-child { border-bottom: 0; }
.wcsp-pro-wl-thumb {
	flex: 0 0 72px;
	width: 72px;
}
.wcsp-pro-wl-thumb img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.wcsp-pro-wl-info {
	flex: 1 1 auto;
	min-width: 0;
}
.wcsp-pro-wl-title {
	display: block;
	font-weight: 600;
	color: #0e2a22;
	text-decoration: none;
	font-size: 1rem;
	margin-bottom: 4px;
}
.wcsp-pro-wl-title:hover { color: #16a34a; }
.wcsp-pro-wl-price {
	color: #16a34a;
	font-weight: 600;
	font-size: .95rem;
}
.wcsp-pro-wl-price del { color: #9aa8a0; font-weight: 400; margin-right: 5px; }
.wcsp-pro-wl-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}
.wcsp-pro-wl-cart {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 10px;
	background: #16a34a;
	color: #fff !important;
	font-weight: 600;
	font-size: .88rem;
	text-decoration: none;
	transition: background .15s ease;
}
.wcsp-pro-wl-cart:hover { background: #15803d; }
.wcsp-pro-wl-remove {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: #f3f4f6;
	color: #6b7a72;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.wcsp-pro-wl-remove:hover {
	background: #fee2e2;
	color: #dc2626;
}
@media (max-width: 600px) {
	.wcsp-pro-wl-item { flex-wrap: wrap; }
	.wcsp-pro-wl-actions { width: 100%; justify-content: space-between; }
}

/* ── Wishlist toast ──────────────────────────────────────────────────── */
.wcsp-pro-wl-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: 12px;
	background: #0e2a22;
	color: #fff;
	box-shadow: 0 10px 30px rgba(14, 42, 34, .3);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	max-width: calc(100vw - 32px);
}
.wcsp-pro-wl-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.wcsp-pro-wl-toast__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	fill: #4ade9b;
	stroke: #4ade9b;
}
.wcsp-pro-wl-toast__text {
	font-size: .9rem;
	font-weight: 500;
	white-space: nowrap;
}
.wcsp-pro-wl-toast__link {
	margin-left: 4px;
	padding-left: 12px;
	border-left: 1px solid rgba(255, 255, 255, .2);
	color: #4ade9b !important;
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.wcsp-pro-wl-toast__link:hover {
	color: #6ee7b0 !important;
	text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
	.wcsp-pro-wl-toast { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* ───────────────────────── Thumbnail strip ─────────────────────────
   A row of clickable thumbnails below the slider, synced with the main
   slides. Enabled per slider via the "Thumbnail Strip" option. The strip
   markup is built by pro.js; these styles theme it.

   The active ring is a BORDER (inside the slide box), not a box-shadow:
   Swiper puts overflow:hidden on the container, which would clip any
   shadow drawn outside the slides. pro.js adds .is-centered while all
   thumbnails fit (Swiper "locked"); once they overflow, the strip
   left-aligns and scrolls normally. */
.wcsp-pro-thumbstrip {
	margin-top: 12px;
	width: 100%;
	overflow: hidden;
}
.wcsp-pro-thumbstrip.is-hidden {
	display: none;
}
/* Self-contained layout: the strip must not depend on Swiper's own
   stylesheet. Inside the editor-canvas iframe only the block styles
   and pro.css exist (Swiper's CSS lives in the parent window), so the
   flex row is declared here too. Redundant on the front end, harmless
   there, and it keeps the strip horizontal everywhere. */
.wcsp-pro-thumbstrip .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}
.wcsp-pro-thumbstrip.is-centered .swiper-wrapper {
	justify-content: center;
}
.wcsp-pro-thumbstrip .swiper-slide.wcsp-pro-thumb {
	width: 112px;
	height: auto;
	flex: 0 0 auto;
	box-sizing: border-box;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	opacity: 0.5;
	transition: opacity 0.2s ease, border-color 0.2s ease;
	background: #f2f2f2;
}
.wcsp-pro-thumbstrip .wcsp-pro-thumb img {
	display: block;
	width: 100%;
	height: 76px;
	object-fit: cover;
}
.wcsp-pro-thumbstrip .wcsp-pro-thumb:hover {
	opacity: 0.85;
}
.wcsp-pro-thumbstrip .swiper-slide.wcsp-pro-thumb.swiper-slide-thumb-active {
	opacity: 1;
	border-color: var( --wcsp-thumb-active, #16a34a );
}

/* Thumbnails act as the navigation, so hide the pagination dots. */
.wcsp-outer.wcsp-pro-thumbs .wcsp-dots {
	display: none;
}

@media (max-width: 600px) {
	.wcsp-pro-thumbstrip .swiper-slide.wcsp-pro-thumb {
		width: 84px;
	}
	.wcsp-pro-thumbstrip .wcsp-pro-thumb img {
		height: 56px;
	}
}

/* ───────────────────────── Hover zoom (magnifier) ──────────────────
   A round lens follows the pointer over product images and magnifies
   the area underneath, fed by the original image (data-wcsp-full).
   Hover-capable devices only; the lens never captures clicks, so the
   product link keeps working. Built by pro.js. */
.wcsp-outer.wcsp-pro-zoom .wcsp-img-wrap {
	cursor: crosshair;
}
.wcsp-pro-lens {
	position: absolute;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 2px solid var( --wcsp-lens-accent, #16a34a );
	background-color: #fff;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 5;
	display: none;
}

/* While the lens is active, pause conflicting image hover effects. */
.wcsp-outer.wcsp-pro-zoom.wcsp-hover-zoom .wcsp-card:hover .wcsp-img-wrap img,
.wcsp-outer.wcsp-pro-zoom.wcsp-hover-zoom .wcsp-card:hover .wcsp-img-wrap .wcsp-img,
.wcsp-outer.wcsp-pro-zoom.wcsp-hover-lift_zoom .wcsp-card:hover .wcsp-img-wrap img,
.wcsp-outer.wcsp-pro-zoom.wcsp-hover-lift_zoom .wcsp-card:hover .wcsp-img-wrap .wcsp-img {
	transform: none;
}
.wcsp-outer.wcsp-pro-zoom .wcsp-pro-hover-img {
	display: none;
}

/* ───────────────────────── Lightbox ────────────────────────────────
   Expand button on each image (injected by pro.js) plus the full
   screen viewer overlay with prev/next, counter and close. */
.wcsp-outer.wcsp-pro-lightbox .wcsp-img-wrap .wcsp-pro-lb-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba( 17, 17, 17, 0.55 );
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 6;
}
.wcsp-outer.wcsp-pro-lightbox .wcsp-img-wrap:hover .wcsp-pro-lb-btn,
.wcsp-outer.wcsp-pro-lightbox .wcsp-pro-lb-btn:focus-visible {
	opacity: 1;
}
@media (hover: none) {
	.wcsp-outer.wcsp-pro-lightbox .wcsp-img-wrap .wcsp-pro-lb-btn {
		opacity: 1;
	}
}

.wcsp-pro-lb-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba( 10, 10, 10, 0.92 );
	display: none;
	align-items: center;
	justify-content: center;
}
.wcsp-pro-lb-overlay.is-open {
	display: flex;
}
.wcsp-pro-lb-fig {
	margin: 0;
	max-width: 90vw;
	text-align: center;
}
.wcsp-pro-lb-fig img {
	max-width: 90vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}
.wcsp-pro-lb-fig figcaption {
	color: #ddd;
	font-size: 13px;
	margin-top: 10px;
}
.wcsp-pro-lb-close,
.wcsp-pro-lb-prev,
.wcsp-pro-lb-next {
	position: fixed;
	background: rgba( 255, 255, 255, 0.08 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 999px;
	width: 44px;
	height: 44px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wcsp-pro-lb-close { top: 16px; right: 16px; font-size: 16px; }
.wcsp-pro-lb-prev  { left: 16px;  top: 50%; transform: translateY( -50% ); }
.wcsp-pro-lb-next  { right: 16px; top: 50%; transform: translateY( -50% ); }
.wcsp-pro-lb-close:hover,
.wcsp-pro-lb-prev:hover,
.wcsp-pro-lb-next:hover {
	background: rgba( 255, 255, 255, 0.2 );
}
.wcsp-lb-single .wcsp-pro-lb-prev,
.wcsp-lb-single .wcsp-pro-lb-next {
	display: none;
}
.wcsp-pro-lb-count {
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translateX( -50% );
	color: #ccc;
	font-size: 13px;
}
body.wcsp-lb-lock {
	overflow: hidden;
}

/* ───────────────────────── Grid view toggle (masonry) ──────────────
   A two-button control switches between the slider and a true masonry
   grid of the same products. pro.js tears Swiper down before adding
   .wcsp-grid-active, so no !important is needed to beat inline styles.
   The grid is CSS columns: uncropped photos at natural heights flow
   into columns for a Pinterest rhythm. */
.wcsp-pro-viewtoggle {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-bottom: 10px;
}
.wcsp-pro-viewtoggle .wcsp-vt-btn {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --wcsp-vt-border, #d8d8d8 );
	border-radius: 8px;
	background: #fff;
	color: #555;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.wcsp-pro-viewtoggle .wcsp-vt-btn:hover {
	color: #222;
}
.wcsp-pro-viewtoggle .wcsp-vt-btn.is-active {
	color: #fff;
	background: var( --wcsp-vt-active, #16a34a );
	border-color: var( --wcsp-vt-active, #16a34a );
}

/* Grid (masonry) mode. */
.wcsp-outer.wcsp-grid-active .wcsp-slider,
.wcsp-outer.wcsp-grid-active .wcsp-inner {
	overflow: visible;
}
.wcsp-outer.wcsp-grid-active .wcsp-track {
	display: block;
	column-gap: 16px;
	columns: 240px 4;
}
.wcsp-outer.wcsp-grid-active .wcsp-slide {
	width: 100%;
	margin: 0 0 16px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}
/* Natural heights = real masonry rhythm; photos stay uncropped. The
   base layout sets a fixed aspect-ratio per image; grid mode must beat
   it no matter the stylesheet order, hence !important on these two. */
.wcsp-outer.wcsp-grid-active .wcsp-img-wrap {
	aspect-ratio: auto !important;
	height: auto !important;
}
.wcsp-outer.wcsp-grid-active .wcsp-img-wrap img,
.wcsp-outer.wcsp-grid-active .wcsp-img-wrap .wcsp-img {
	height: auto !important;
	object-fit: contain;
}
/* Slider-only chrome makes no sense in grid mode. */
.wcsp-outer.wcsp-grid-active .wcsp-arrow,
.wcsp-outer.wcsp-grid-active .wcsp-dots,
.wcsp-outer.wcsp-grid-active .wcsp-scrollbar,
.wcsp-outer.wcsp-grid-active .wcsp-pro-thumbstrip {
	display: none !important;
}