/* Reusable WooCommerce catalogue and product-card presentation. */
.bw-product-catalogue {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0;
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4.5rem);
	background: var(--bw-color-surface, #f7f7f5);
	box-shadow: 0 0 0 100vmax var(--bw-color-surface, #f7f7f5);
	clip-path: inset(0 -100vmax);
}

.bw-product-catalogue__inner {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--bw-container-padding, 1.25rem))), 80rem);
	margin-inline: auto;
}

.bw-product-catalogue__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--bw-color-border, #e5e7eb);
}

.bw-product-catalogue__toolbar:empty {
	display: none;
}

.woocommerce .bw-product-catalogue .woocommerce-result-count,
.woocommerce .bw-product-catalogue .woocommerce-ordering {
	float: none;
	margin: 0;
}

.woocommerce .bw-product-catalogue .woocommerce-result-count {
	color: var(--bw-color-muted, #6b7280);
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.5;
}

.woocommerce .bw-product-catalogue .woocommerce-ordering select {
	min-width: min(100%, 15rem);
	min-height: 2.875rem;
	padding: 0.7rem 2.5rem 0.7rem 0.9rem;
	background-color: var(--bw-color-background, #fff);
	color: var(--bw-color-text, #111);
	border: 1px solid var(--bw-color-border, #d8dadd);
	border-radius: var(--bw-radius-sm, 0.25rem);
	font: inherit;
	cursor: pointer;
}

.woocommerce .bw-product-catalogue .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--bw-color-primary, #d71920);
	outline-offset: 2px;
}

.woocommerce .bw-product-catalogue ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.25vw, 1.75rem);
	margin: 0;
	padding: 0;
}

.woocommerce .bw-product-catalogue ul.products::before,
.woocommerce .bw-product-catalogue ul.products::after {
	display: none;
}

.woocommerce .bw-product-catalogue ul.products li.product {
	float: none;
	display: flex;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.bw-product-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	background: var(--bw-color-background, #fff);
	border: 1px solid color-mix(in srgb, var(--bw-color-border, #d8dadd) 82%, transparent);
	border-radius: var(--bw-radius-md, 0.5rem);
	box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--bw-color-secondary, #111) 5%, transparent);
	overflow: hidden;
	transition: border-color var(--bw-transition-normal, 250ms), box-shadow var(--bw-transition-normal, 250ms), transform var(--bw-transition-normal, 250ms);
}

.woocommerce .bw-product-card .woocommerce-loop-product__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.bw-product-card__media {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: clamp(0.75rem, 2vw, 1.25rem);
	background: color-mix(in srgb, var(--bw-color-surface, #f3f4f6) 84%, white);
	overflow: hidden;
}

.woocommerce .bw-product-card__media img,
.woocommerce .bw-product-card__media img.woocommerce-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center;
	transition: transform var(--bw-transition-slow, 400ms);
}

.woocommerce .bw-product-card__media .onsale {
	position: absolute;
	top: 0.75rem;
	right: auto;
	left: 0.75rem;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.4rem 0.65rem;
	background: var(--bw-color-primary, #d71920);
	color: #fff;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bw-product-card__badges {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-end;
	max-width: calc(100% - 5.5rem);
}

.bw-product-card__badge {
	display: inline-flex;
	padding: 0.4rem 0.65rem;
	background: var(--bw-color-secondary, #111);
	color: var(--bw-color-accent, #fff);
	border-radius: 999px;
	font-size: 0.67rem;
	font-weight: 750;
	line-height: 1.15;
	letter-spacing: 0.045em;
	text-align: right;
	text-transform: uppercase;
}

.bw-product-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.1rem 1.1rem 1rem;
}

.woocommerce .bw-product-card .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	color: var(--bw-color-text, #111);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.woocommerce .bw-product-card .star-rating {
	margin: 0;
}

.woocommerce .bw-product-card .price {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	align-items: baseline;
	margin: auto 0 0;
	color: var(--bw-color-text, #111);
	font-size: 1rem;
	font-weight: 750;
}

.woocommerce .bw-product-card .price del {
	color: var(--bw-color-muted, #6b7280);
	font-size: 0.9em;
	opacity: 1;
}

.woocommerce .bw-product-card .price ins {
	color: var(--bw-color-primary, #d71920);
	font-weight: inherit;
	text-decoration: none;
}

.woocommerce .bw-product-card > .button,
.woocommerce .bw-product-card > a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	margin: 0 1.1rem 1.1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--bw-button-radius, 0.25rem);
	line-height: 1.2;
	text-align: center;
}

.woocommerce .bw-product-card a:focus-visible,
.woocommerce .bw-product-card .button:focus-visible {
	outline: 2px solid var(--bw-color-primary, #d71920);
	outline-offset: 3px;
}

.woocommerce .bw-product-catalogue .woocommerce-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
}

@media (hover: hover) and (pointer: fine) {
	.bw-product-card:hover {
		border-color: color-mix(in srgb, var(--bw-color-primary, #d71920) 32%, var(--bw-color-border, #d8dadd));
		box-shadow: 0 1rem 2.25rem color-mix(in srgb, var(--bw-color-secondary, #111) 10%, transparent);
		transform: translateY(-0.2rem);
	}

	.bw-product-card:hover .bw-product-card__media img {
		transform: scale(1.025);
	}
}

@media (max-width: 64rem) {
	.woocommerce .bw-product-catalogue ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 48rem) {
	.woocommerce .bw-product-catalogue ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 26.25rem) {
	.bw-product-catalogue__toolbar {
		align-items: stretch;
	}

	.woocommerce .bw-product-catalogue .woocommerce-ordering,
	.woocommerce .bw-product-catalogue .woocommerce-ordering select {
		width: 100%;
	}

	.woocommerce .bw-product-catalogue ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bw-product-card,
	.woocommerce .bw-product-card__media img {
		transition: none;
	}

	.bw-product-card:hover,
	.bw-product-card:hover .bw-product-card__media img {
		transform: none;
	}
}

/* ==========================================================
   BW WOO — REUSABLE SINGLE-PRODUCT TABS
   ========================================================== */

.single-product .woocommerce-tabs {
    width: 100%;
    border: 1px solid var(--bw-color-border, #ddd);
    border-radius: 0;
    background: var(--bw-color-background, #fff);
    overflow: hidden;
}

/* Remove WooCommerce's default inset tabs and decoration. */

.single-product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
    display: none;
    content: none;
}

/* Tabs begin flush against the container's left edge. */

.single-product .woocommerce-tabs ul.tabs li {
    position: relative;
    display: flex;
    align-items: stretch;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.single-product .woocommerce-tabs ul.tabs li a {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: 0.9rem 1.5rem;
    color: var(--bw-color-text, #222);
    font-weight: 700;
    text-decoration: none;
    border: 0;
    border-radius: 0;
}

/* Generic active state. */

.single-product .woocommerce-tabs ul.tabs li.active {
    background: var(--bw-color-secondary, #222);
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #fff;
}

/* Unified content panel. */

.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    margin: 0;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border-top: 1px solid var(--bw-color-border, #ddd);
}

/* Responsive tab navigation. */

@media (max-width: 48rem) {
    .single-product .woocommerce-tabs ul.tabs li a {
        min-height: 3rem;
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
}

/* ==========================================================
   BW WOO — WOOCOMMERCE PRODUCT IMAGE LIGHTBOX
   ==========================================================
   PURPOSE:
   Converts WooCommerce's native PhotoSwipe product-image
   viewer into a clearly defined modal image viewer.

   WHY THIS EXISTS:
   During KMD testing the standard PhotoSwipe viewer looked
   very similar to the browser simply opening the raw image.
   The standard controls were also extremely easy to miss.

   The BW treatment therefore:
   - Keeps the underlying product page visible behind the modal.
   - Centres the image viewer on desktop.
   - Removes PhotoSwipe's separate black toolbar appearance.
   - Provides a clearly labelled CLOSE control.
   - Adds a diagonal/slash-style entrance animation.

   SCOPE:
   PARENT THEME / GLOBAL WOOCOMMERCE STYLING.
   File: assets/css/woocommerce.css

   IMPORTANT:
   This file owns the generic STRUCTURE and behaviour styling.

   Client-specific branding (for example the KMD red animated
   CLOSE button) belongs in the child theme and should override
   these generic parent styles where required.

   FUNCTIONALITY:
   WooCommerce/PhotoSwipe provides the actual lightbox.
   Gallery support is enabled separately in:
   inc/woocommerce.php

   MARKUP CONFIRMED DURING KMD TESTING:
   .pswp
     .pswp__scroll-wrap
     .pswp__top-bar
       .pswp__button--fs
       .pswp__button--zoom
       .pswp__button--share
       .pswp__button--close

   MOBILE:
   The custom modal dimensions below are desktop-only.
   Mobile retains PhotoSwipe's full-screen viewer.

   ACCESSIBILITY:
   Custom movement is disabled when the visitor has enabled
   reduced-motion preferences.
   ========================================================== */


/* ----------------------------------------------------------
   LIGHTBOX — CLEAR CLOSE CONTROL

   PhotoSwipe normally uses a small sprite icon. We replace its
   visual appearance with a clearly labelled CLOSE × control.

   The button is positioned independently so its increased width
   does not interfere with PhotoSwipe's other toolbar controls.
   ---------------------------------------------------------- */

.pswp .pswp__button--close {
	position: absolute !important;
	top: 0.75rem !important;
	right: 0.75rem !important;

	width: auto !important;
	height: 2.75rem !important;
	min-width: 6.5rem !important;
	padding: 0 1rem !important;

	background: #fff !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0.2rem !important;
	box-shadow: 0 2px 10px rgb(0 0 0 / 25%) !important;

	color: #111 !important;
	opacity: 1 !important;

	font-size: 0 !important;
}


/* Visible label replaces PhotoSwipe's subtle sprite icon. */
.pswp .pswp__button--close::before {
	content: "CLOSE  ×";

	display: block;

	color: #111;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 2.75rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
}


/* ----------------------------------------------------------
   LIGHTBOX — CLOSE BUTTON HOVER / FOCUS

   Keeps the generic parent-theme close control visible when
   hovered or keyboard focused.

   Child themes may deliberately override this treatment.
   ---------------------------------------------------------- */

.pswp .pswp__button--close:hover,
.pswp .pswp__button--close:focus {
	background: #fff !important;
	color: #111 !important;
	opacity: 1 !important;
}

.pswp .pswp__button--close:hover::before,
.pswp .pswp__button--close:focus::before {
	color: #111 !important;
}


/* ----------------------------------------------------------
   LIGHTBOX — DESKTOP CENTRED MODAL VIEWER

   Presents PhotoSwipe as a centred modal rather than allowing
   the image viewer to visually consume the entire browser.

   The surrounding product page remains visible through the
   translucent backdrop, making it immediately obvious that
   the customer has NOT navigated away from the product.
   ---------------------------------------------------------- */

@media (min-width: 769px) {

	/* ------------------------------------------------------
   GLASS BACKDROP

   Keeps the original product page visible behind the
   PhotoSwipe viewer as a soft smoked-glass layer.

   WHY:
   Replaces the heavy black surround with a more premium
   effect while still keeping focus on the product image.
   ------------------------------------------------------ */

.pswp {
	background: rgb(12 12 14 / 42%) !important;

	-webkit-backdrop-filter:
		blur(12px)
		saturate(80%);

	backdrop-filter:
		blur(12px)
		saturate(80%);
}

/* ------------------------------------------------------
   GLASS BACKDROP — REMOVE PHOTOSWIPE'S INNER BLACK LAYER

   PhotoSwipe adds its own full-screen background element
   inside .pswp. Making only the outer viewer translucent
   is therefore not enough — this layer must also become
   transparent so the blurred product page can show through.
   ------------------------------------------------------ */

.pswp .pswp__bg {
	background: transparent !important;
}


/* ------------------------------------------------------
   CENTRED VIEWER PANEL — KMD POLISHED VERSION

   This is the actual visible PhotoSwipe modal.

   DESIGN:
   - Keeps the existing diagonal entrance animation.
   - Uses a softer near-black rather than flat black.
   - Adds a subtle KMD red atmosphere across the top.
   - Adds a fine red top edge.
   - Deepens the shadow so the panel floats above the
     frosted-glass product page.

   IMPORTANT:
   The animation and positioning are intentionally retained.
   ------------------------------------------------------ */

.pswp__scroll-wrap {
	top: 5vh !important;
	left: 50% !important;
	right: auto !important;

	width: min(60vw, 70rem) !important;
	height: 90vh !important;

	/* KMD dark panel with a very subtle red wash at the top. */
	background:
		linear-gradient(
			180deg,
			rgb(237 28 36 / 10%) 0,
			rgb(18 18 20 / 0%) 4rem
		),
		rgb(18 18 20 / 96%);

	/* Fine KMD accent — keeps the modal sharp rather than "card-like". */
	border-top: 2px solid var(--wp--preset--color--primary);

	/* Lift the viewer away from the frosted-glass backdrop. */
	box-shadow:
		0 1.5rem 4rem rgb(0 0 0 / 45%),
		0 0 2rem rgb(237 28 36 / 8%),
		0 0 0 1px rgb(255 255 255 / 5%);

	transform: translateX(-50%);
	transform-origin: center;

	/* Existing KMD diagonal PhotoSwipe entrance reveal. */
	animation:
		bw-woo-lightbox-reveal
		520ms
		cubic-bezier(0.16, 1, 0.3, 1)
		both;
}

	/* ------------------------------------------------------
	   PHOTOSWIPE TOOLBAR

	   PhotoSwipe normally renders a dark horizontal strip at
	   the top of the viewer.

	   We remove that visual strip so the controls appear to
	   belong directly to the modal rather than sitting inside
	   a separate black header.
	   ------------------------------------------------------ */

	.pswp__top-bar {
		left: 50% !important;
		right: auto !important;

		width: min(60vw, 70rem) !important;

		background: transparent !important;

		transform: translateX(-50%);
	}


	/* ------------------------------------------------------
	   DIAGONAL MODAL ENTRANCE

	   The viewer begins slightly reduced and diagonally clipped,
	   then rapidly opens across the screen.

	   This provides a more distinctive reveal while remaining
	   client-neutral in the parent theme.

	   KMD's child theme can build upon this using its own
	   diagonal/red visual language without altering the core
	   WooCommerce viewer.
	   ------------------------------------------------------ */

	@keyframes bw-woo-lightbox-reveal {

		0% {
			opacity: 0;

			clip-path: polygon(
				0 100%,
				0 100%,
				18% 100%,
				0 82%
			);

			transform:
				translateX(-50%)
				scale(0.96);
		}

		45% {
			opacity: 1;
		}

		100% {
			opacity: 1;

			clip-path: polygon(
				0 0,
				100% 0,
				100% 100%,
				0 100%
			);

			transform:
				translateX(-50%)
				scale(1);
		}
	}
}


/* ----------------------------------------------------------
   LIGHTBOX — REDUCED MOTION

   Visitors who request reduced motion still receive the centred
   modal presentation, but without the custom entrance animation.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.pswp__scroll-wrap {
		animation: none !important;
	}
}

/* ==========================================================
   BW WOO — PRODUCT LIGHTBOX GALLERY NAVIGATION
   ==========================================================
   PURPOSE:
   Makes PhotoSwipe's existing Previous / Next gallery
   controls obvious and gives them the KMD/BW visual treatment.

   IMPORTANT:
   These are WooCommerce / PhotoSwipe's native gallery
   controls. No separate gallery functionality is created here.

   The controls only become useful when the WooCommerce
   product contains multiple gallery images.
   ========================================================== */


/* ----------------------------------------------------------
   GALLERY — PREVIOUS / NEXT BUTTONS

   Large controls sit vertically centred at either side of
   the desktop viewer. The text arrows replace PhotoSwipe's
   small default sprite graphics.
   ---------------------------------------------------------- */

@media (min-width: 769px) {

	.pswp .pswp__button--arrow--left,
	.pswp .pswp__button--arrow--right {
		position: absolute !important;
		top: 50% !important;

		width: 3.5rem !important;
		height: 5rem !important;
		margin-top: -2.5rem !important;

		background: rgb(255 255 255 / 8%) !important;
		background-image: none !important;
		border: 1px solid rgb(255 255 255 / 12%) !important;

		color: #fff !important;
		opacity: 1 !important;

		transform: translateY(0);

		transition:
			background-color 180ms ease,
			border-color 180ms ease,
			transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.pswp .pswp__button--arrow--left {
		left: 1.25rem !important;
	}

	.pswp .pswp__button--arrow--right {
		right: 1.25rem !important;
	}


	/* Remove PhotoSwipe's original sprite arrows. */
	.pswp .pswp__button--arrow--left::before,
	.pswp .pswp__button--arrow--right::before {
		position: static !important;

		display: flex !important;
		align-items: center;
		justify-content: center;

		width: 100% !important;
		height: 100% !important;

		background: none !important;

		color: #fff;

		font-size: 2rem;
		font-weight: 300;
		line-height: 1;

		opacity: 1 !important;
	}


	/* Clear, deliberately simple gallery direction symbols. */
	.pswp .pswp__button--arrow--left::before {
		content: "‹";
	}

	.pswp .pswp__button--arrow--right::before {
		content: "›";
	}


	/* KMD interaction state — red rather than generic grey. */
	.pswp .pswp__button--arrow--left:hover,
	.pswp .pswp__button--arrow--left:focus,
	.pswp .pswp__button--arrow--right:hover,
	.pswp .pswp__button--arrow--right:focus {
		background: var(--wp--preset--color--primary) !important;
		border-color: var(--wp--preset--color--primary) !important;
	}


	/* Tiny directional movement makes the controls feel physical. */
	.pswp .pswp__button--arrow--left:hover,
	.pswp .pswp__button--arrow--left:focus {
		transform: translateX(-0.2rem);
	}

	.pswp .pswp__button--arrow--right:hover,
	.pswp .pswp__button--arrow--right:focus {
		transform: translateX(0.2rem);
	}
}

/* ----------------------------------------------------------
   GALLERY — ARROW PRESS FEEDBACK

   Gives Previous / Next a small physical response when clicked.
   This does not affect PhotoSwipe's image movement.
   ---------------------------------------------------------- */

@media (min-width: 769px) {

	.pswp .pswp__button--arrow--left:active {
		transform: translateX(0.1rem) scale(0.96);
	}

	.pswp .pswp__button--arrow--right:active {
		transform: translateX(-0.1rem) scale(0.96);
	}

}



/* ==========================================================
   BW WOO — PHOTOSWIPE GALLERY SLIDE TRANSITION
   ==========================================================
   PhotoSwipe already handles the horizontal movement between
   gallery images, but WooCommerce's supplied styling leaves
   the transition duration at 0s.

   Restoring a short duration allows PhotoSwipe's native
   Previous / Next movement to animate smoothly without
   interfering with its own transforms or gallery behaviour.
   ========================================================== */

.pswp .pswp__container {
	transition-duration: 350ms !important;
}


/* Respect visitors who have requested reduced motion. */
@media (prefers-reduced-motion: reduce) {

	.pswp .pswp__container {
		transition-duration: 0ms !important;
	}

}

/* ==========================================================
   BW WOO — MOBILE PHOTOSWIPE NAVIGATION
   ==========================================================
   Give the native gallery arrows a visible dark background
   on phones, without changing desktop styling or gallery JS.
   ========================================================== */

@media (max-width: 768px) {

    .pswp .pswp__button--arrow--left,
    .pswp .pswp__button--arrow--right {
        position: absolute !important;
        top: 50% !important;
        width: 2.75rem !important;
        height: 3.5rem !important;
        margin-top: -1.75rem !important;
        background: rgb(18 18 20 / 85%) !important;
        background-image: none !important;
        border: 1px solid rgb(255 255 255 / 20%) !important;
        border-radius: 0.2rem !important;
        opacity: 1 !important;
    }

    .pswp .pswp__button--arrow--left {
        left: 0.35rem !important;
    }

    .pswp .pswp__button--arrow--right {
        right: 0.35rem !important;
    }

    /* Replace the default sprite with clear white arrows. */
    .pswp .pswp__button--arrow--left::before,
    .pswp .pswp__button--arrow--right::before {
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: 100% !important;
        background: none !important;
        color: #fff !important;
        font-size: 1.75rem;
        line-height: 1;
        opacity: 1 !important;
    }

    .pswp .pswp__button--arrow--left::before {
        content: "‹";
    }

    .pswp .pswp__button--arrow--right::before {
        content: "›";
    }
}

/* ==========================================================
 * WOOCOMMERCE PRODUCT GALLERY — MOBILE TAP FIX
 * ==========================================================
 * WooCommerce's zoom image sits above the product image
 * and intercepts taps on mobile devices.
 *
 * Disable pointer events on that overlay so tapping the
 * product image opens our unified PhotoSwipe gallery.
 *
 * Desktop zoom behaviour remains unchanged.
 * ========================================================== */

@media (max-width: 768px) {
    .single-product .woocommerce-product-gallery .zoomImg {
        pointer-events: none !important;
    }
}

/* ==========================================================
 * PHOTOSWIPE — MOBILE TOOLBAR SPACING
 * ==========================================================
 * Hide the redundant fullscreen and zoom controls on mobile.
 * Keep the image counter and red CLOSE button visible.
 * Desktop controls remain unchanged.
 * ========================================================== */

@media (max-width: 768px) {
    .pswp .pswp__button--zoom,
    .pswp .pswp__button--fs {
        display: none !important;
    }
}

/* ==========================================================
 * PHOTOSWIPE — MOBILE RIGHT ARROW POSITION FIX
 * Keep the next-image control visible inside the viewport.
 * Desktop gallery remains unchanged.
 * ========================================================== */

@media (max-width: 768px) {
    .pswp .pswp__button--arrow--right {
        right: 12px !important;
        left: auto !important;
        background: rgb(20 20 20 / 85%) !important;
        opacity: 1 !important;
    }
}

/* ==========================================================
 * PHOTOSWIPE — MOBILE ARROW STATES
 * Keep navigation buttons visible after tapping.
 * Override hover, focus and active appearance on touchscreens.
 * ========================================================== */

@media (max-width: 768px) {
    .pswp .pswp__button--arrow--left,
    .pswp .pswp__button--arrow--right,
    .pswp .pswp__button--arrow--left:hover,
    .pswp .pswp__button--arrow--right:hover,
    .pswp .pswp__button--arrow--left:focus,
    .pswp .pswp__button--arrow--right:focus,
    .pswp .pswp__button--arrow--left:active,
    .pswp .pswp__button--arrow--right:active {
        background-color: rgba(187, 16, 16, 0.85) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}