/**
 * PDP gallery styling — Premier Polysteel.
 *
 * #439.1 — Main WooThumbs gallery prev/next arrows (.iconic-woothumbs-images__arrow).
 *
 * WooThumbs defaults (from iconic-woothumbs/.../main.min.css):
 *   - arrow anchor: position:absolute; width:40px; height:58%; top:21% — a tall box, so a
 *     plain border-radius:50% renders a tall ellipse, not a circle.
 *   - arrow glyph: .iconic-woothumbs-images__arrow svg path { stroke:#ffffff !important } —
 *     printed inline further down the page, equal specificity (0,1,2) to a bare override,
 *     so it wins on source order and the arrows stay white.
 *
 * Miranda's mockup wants black arrows with a pale-blue circle on hover (the product /
 * project "park" carousel treatment). So we:
 *   (a) beat WooThumbs' white with a higher-specificity (0,2,2) ancestor-scoped stroke, and
 *   (b) pin the anchor to a fixed 48x48 square, vertically centered, and flex-center the
 *       18px chevron inside it — now border-radius:50% is a true circle.
 *
 * NOTE: #439.2 (square featured-image frame) was reverted 2026-07-07 — forcing the
 * slick-list to a square gave the template's SECOND (normally responsive-hidden) WooThumbs
 * gallery a full height, producing a "double gallery" on scroll at some viewports. Needs a
 * fix scoped to the single visible gallery (or the template's duplicate-gallery resolved)
 * before re-attempting. See session log.
 */

/* (a) Black chevron — ancestor class raises specificity above WooThumbs' inline white. */
.iconic-woothumbs-all-images-wrap .iconic-woothumbs-images__arrow svg path {
	stroke: #0e141b !important;
}

/* (b) Fixed square, vertically centered → circle-able; transparent at rest. */
.iconic-woothumbs-all-images-wrap .iconic-woothumbs-images__arrow {
	top: 50% !important;
	bottom: auto !important;
	width: 48px !important;
	height: 48px !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background-color: transparent !important;
}

/* Center the chevron in the flex box (override WooThumbs' absolute svg offsets). */
.iconic-woothumbs-all-images-wrap .iconic-woothumbs-images__arrow svg {
	position: static !important;
	margin: 0 !important;
}

/* Hover = pale-blue circle, matching the product/project carousel arrows. */
.iconic-woothumbs-all-images-wrap .iconic-woothumbs-images__arrow:hover {
	background-color: #e1ebf4 !important;
}

/**
 * #439 double-gallery guard.
 *
 * WooThumbs sometimes builds the desktop product gallery TWICE inside the same
 * woocommerce-product-images widget at runtime (a second .iconic-woothumbs-all-images-wrap
 * appears on scroll) → a doubled featured image. This is a WooThumbs re-render, not our
 * CSS (proven by fully disabling this module — the double persisted). Keep only the first
 * gallery within each widget. No-op when there's a single gallery (the normal case).
 * The JS backstop (pdp-gallery-styling.js) covers duplicates injected after load and any
 * non-sibling DOM arrangement this selector can't reach.
 */
.elementor-widget-woocommerce-product-images .iconic-woothumbs-all-images-wrap ~ .iconic-woothumbs-all-images-wrap {
	display: none !important;
}