/* ==========================================================================
   Product Manage — Product Gallery Selector (frontend)
   Self-contained styles, namespaced with the "pm-" prefix so this widget
   can't clash with the active theme. Override the accent color per-instance
   via the widget's Style tab (writes --pm-accent on .pm-product-gallery).
   ========================================================================== */

.pm-product-gallery {
	--pm-accent: #ff6402;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
	box-sizing: border-box;
}
.pm-product-gallery *,
.pm-product-gallery *::before,
.pm-product-gallery *::after {
	box-sizing: border-box;
}

.pm-empty-notice {
	padding: 1.5rem;
	border: 1px dashed #ccc;
	color: #888;
	text-align: center;
}

/* --- Image grid (left) --- */
.pm-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
.pm-gallery-grid.pm-columns-1 { grid-template-columns: repeat(1, 1fr); }
.pm-gallery-grid.pm-columns-2 { grid-template-columns: repeat(2, 1fr); }
.pm-gallery-grid.pm-columns-3 { grid-template-columns: repeat(3, 1fr); }
.pm-gallery-grid.pm-columns-4 { grid-template-columns: repeat(4, 1fr); }

.pm-gallery-item {
	background: #fff;
	border: 2px solid #eee;
	border-radius: 12px;
	padding: 1rem;
	cursor: pointer;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}
.pm-gallery-item:hover,
.pm-gallery-item:focus-visible {
	border-color: var(--pm-accent);
	outline: none;
}
.pm-gallery-item.active {
	border-color: var(--pm-accent);
	box-shadow: 0 10px 25px rgba(255, 100, 2, 0.12);
}

.pm-gallery-img-wrap {
	position: relative;
	background: #f4f4f4;
	border-radius: 8px;
	overflow: hidden;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm-gallery-img-wrap img {
	max-width: 85%;
	max-height: 85%;
	transition: transform 0.4s ease;
}
.pm-gallery-item:hover .pm-gallery-img-wrap img { transform: scale(1.05); }

.pm-zoom-btn {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, color 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	padding: 0;
	text-decoration: none;
}
.pm-gallery-item:hover .pm-zoom-btn,
.pm-gallery-img-wrap:focus-within .pm-zoom-btn,
.pm-zoom-btn:focus-visible {
	opacity: 1;
	transform: translateY(0);
}
.pm-zoom-btn:hover,
.pm-zoom-btn:focus-visible {
	background: var(--pm-accent);
	color: #fff;
	outline: none;
}

.pm-gallery-item-title {
	margin: 0.85rem 0 0;
	font-size: 0.95rem;
	text-align: center;
	color: #333;
}
.pm-gallery-item.active .pm-gallery-item-title {
	color: var(--pm-accent);
	font-weight: 700;
}

/* --- Carousel gallery style: featured image + thumbnail row ---
   Only rendered when the widget's "Gallery Style" is set to "Carousel". The
   thumbnail row below reuses .pm-gallery-grid/.pm-gallery-item as-is (see
   above), just at a shorter image height via .pm-carousel-thumbs. */
.pm-carousel-main {
	position: relative;
	height: clamp(240px, 32vw, 380px);
	margin-bottom: 1.25rem;
	background: #f4f4f4;
	border-radius: 12px;
	overflow: hidden;
}
.pm-carousel-viewport {
	position: relative;
	width: 100%;
	height: 100%;
}
.pm-carousel-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.pm-carousel-slide.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.pm-carousel-slide img {
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
}
.pm-carousel-slide .pm-zoom-btn {
	top: 1rem;
	right: 1rem;
	/* Unlike the small hover-only thumbnails, the featured image's zoom button
	   stays visible at all times — it's the primary "view larger" affordance
	   here, and hover-to-reveal wouldn't work at all on touch devices anyway. */
	opacity: 1;
	transform: translateY(0);
}
.pm-carousel-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.95);
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	padding: 0;
}
.pm-carousel-nav:hover,
.pm-carousel-nav:focus-visible {
	background: var(--pm-accent);
	color: #fff;
	outline: none;
}
.pm-carousel-prev { left: 14px; }
.pm-carousel-next { right: 14px; }

.pm-carousel-thumbs .pm-gallery-img-wrap {
	height: 110px;
}

/* --- Info panel (right) ---
   Sticks in view while the left-hand image grid scrolls past it, on
   viewports wide enough for the two columns to sit side by side.
   --pm-sticky-top is written by the widget's "Right Column Sticky Offset"
   style control (defaults to 100px if that control was never touched). */
.pm-info-col {
	min-width: 0;
	position: sticky;
	top: var(--pm-sticky-top, 100px);
	align-self: start;
}
@media (max-width: 991px) {
	.pm-info-col {
		position: static !important;
		top: auto !important;
	}
}
/* --- Theme compatibility: unblock sticky from a clipping ancestor ---
   position: sticky silently stops working (renders as if it were static —
   scrolling away with the page instead of holding at `top`) when ANY
   ancestor between the sticky element and the actual scrolling element has
   overflow set to anything but visible on both axes, no matter how tall
   that ancestor's own box is. Several popular themes (The7 among them)
   wrap the entire site in a `#page` container with `overflow: hidden` —
   added to contain off-canvas mobile menus and full-bleed sections — which
   breaks sticky for every element on the page, including this one.
   Note this can't be trimmed to just `overflow-y: visible`: per the CSS
   Overflow spec, pairing `visible` on one axis with a non-visible value on
   the other silently resolves the visible one to `auto` instead — which is
   still non-visible and still breaks sticky (confirmed against the live
   site: overflow-y alone left it broken, both axes visible fixed it).
   Freeing up overflow-x here doesn't reopen the horizontal-scroll problem
   the theme wrapper guards against, because `body` already clips that
   independently (confirmed against the live site: document width stayed
   equal to viewport width before and after this rule). Scoped with :has()
   to pages that actually render this widget, so other pages/themes are
   unaffected. Safe to remove if a theme is confirmed not to need it. */
body:has(.pm-product-gallery) #page {
	overflow: visible !important;
}
.pm-info-title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: -0.5px;
	text-transform: uppercase;
	transition: opacity 0.3s ease;
}
.pm-info-desc {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #555;
	margin: 0 0 1.5rem;
}
.pm-info-specs {
	background: #fff;
	padding: 1.5rem;
	border-radius: 12px;
	border: 1px solid #eee;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}
.pm-spec-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #eee;
}
.pm-spec-row:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.pm-spec-label {
	font-weight: 600;
	color: #111;
	text-transform: uppercase;
	font-size: 0.85rem;
}
.pm-spec-value {
	font-weight: 600;
	color: #555;
	text-align: right;
}

.pm-cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 1.5rem;
	padding: 1rem 1.5rem;
	background: var(--pm-accent);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	transition: opacity 0.3s ease, transform 0.3s ease;
	box-sizing: border-box;
}
.pm-cta-btn:hover,
.pm-cta-btn:focus-visible {
	opacity: 0.9;
	color: #fff;
	outline: none;
}
.pm-cta-arrow {
	transition: transform 0.3s ease;
}
.pm-cta-btn:hover .pm-cta-arrow {
	transform: translateX(4px);
}

/* --- Default Popup (enquiry form) ---
   Only rendered when the widget's Button is set to "Default Popup". */
body.pm-modal-open {
	overflow: hidden;
}
.pm-enquiry-modal {
	position: fixed;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(20, 15, 10, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pm-enquiry-modal.active {
	opacity: 1;
	visibility: visible;
}
.pm-enquiry-content {
	background: #fff;
	width: 100%;
	max-width: 900px;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 16px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 36%) minmax(0, 64%);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
	transform: translateY(20px);
	transition: transform 0.3s ease;
}
.pm-enquiry-modal.active .pm-enquiry-content {
	transform: translateY(0);
}
/* Thin, unobtrusive scrollbar for the rare case content still doesn't fit
   (very short viewports) — the layout below is tightened specifically to
   avoid needing this in the common case. */
.pm-enquiry-content::-webkit-scrollbar {
	width: 8px;
}
.pm-enquiry-content::-webkit-scrollbar-track {
	background: transparent;
}
.pm-enquiry-content::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 8px;
}
.pm-enquiry-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.06);
	color: #333;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.pm-enquiry-close:hover,
.pm-enquiry-close:focus-visible {
	background: var(--pm-accent);
	color: #fff;
	outline: none;
}

/* Left panel: peach gradient, heading, product image, tagline */
.pm-enquiry-left {
	min-width: 0;
	background: linear-gradient(165deg, #fdeee3 0%, #ffe1c8 55%, #ffd4b0 100%);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	border-radius: 16px 0 0 16px;
}
.pm-enquiry-heading {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	margin-bottom: 1.1rem;
}
.pm-enquiry-heading-line1 {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #1a1a1a;
}
.pm-enquiry-heading-line2 {
	font-size: 1.3rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--pm-accent);
}
.pm-enquiry-heading-dash {
	display: block;
	width: 28px;
	height: 4px;
	margin-top: 0.6rem;
	background: var(--pm-accent);
	border-radius: 2px;
}
.pm-enquiry-image {
	flex: 1 1 auto;
	min-height: 110px;
	max-height: 220px;
	border-radius: 16px 140px 140px 140px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.5);
	margin-bottom: 1.1rem;
}
.pm-enquiry-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pm-enquiry-tagline {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.pm-enquiry-tagline-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pm-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm-enquiry-tagline-text {
	min-width: 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: #444;
	overflow-wrap: break-word;
}

/* Right panel: "Enquiring for" + form */
.pm-enquiry-right {
	min-width: 0;
	padding: 2rem;
}
.pm-enquiry-for {
	margin: 0 0 1rem;
	font-size: 1rem;
	color: #444;
	overflow-wrap: break-word;
}
.pm-enquiry-product-title {
	color: var(--pm-accent);
	margin-left: 4px;
}
/* 3 columns on desktop (Name/Email/Phone, then Country/Quantity) instead of 2
   — trims a whole row of fields off the form's height so the popup fits
   without a scrollbar on typical screens. Drops to 1 column on narrow/mobile
   viewports below (see the max-width: 767px block). */
.pm-enquiry-form-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}
.pm-enquiry-field {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}
.pm-enquiry-form-grid .pm-enquiry-field {
	margin-bottom: 0;
}
.pm-enquiry-field span {
	font-size: 0.85rem;
	font-weight: 700;
	color: #1a1a1a;
}
.pm-enquiry-field input,
.pm-enquiry-field select,
.pm-enquiry-field textarea {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	font: inherit;
	padding: 0.6rem 0.85rem;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fff;
	color: #1a1a1a;
	resize: vertical;
}
.pm-enquiry-field input:focus,
.pm-enquiry-field select:focus,
.pm-enquiry-field textarea:focus {
	outline: none;
	border-color: var(--pm-accent);
}
.pm-enquiry-field input::placeholder,
.pm-enquiry-field textarea::placeholder {
	color: #aaa;
}
.pm-enquiry-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px;
	padding-right: 2.5rem;
	cursor: pointer;
}
.pm-enquiry-field select:invalid {
	color: #aaa;
}

/* --- "I accept the Terms and Conditions" checkbox — only rendered when enabled
   under Product Enquiry → Settings → Terms & Conditions. --- */
.pm-enquiry-terms {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #444;
	cursor: pointer;
}
.pm-enquiry-terms input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 0.2rem;
	accent-color: var(--pm-accent);
	cursor: pointer;
}
.pm-enquiry-terms a {
	color: var(--pm-accent);
	font-weight: 600;
	text-decoration: underline;
}

/* Honeypot — invisible to real visitors, most bots fill every field regardless.
   display:none (not just off-screen positioning) matters here: browser/password-
   manager autofill can still find and fill an off-screen-but-laid-out field —
   especially one named anything like "website" or "url" — which would silently
   swallow a real visitor's submission as if it were spam. display:none is what
   autofill reliably skips. */
.pm-hp-field {
	display: none !important;
}

.pm-enquiry-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.85rem 1.5rem;
	background: var(--pm-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
.pm-enquiry-submit:hover,
.pm-enquiry-submit:focus-visible {
	opacity: 0.9;
	outline: none;
}
.pm-enquiry-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.pm-enquiry-privacy {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: #888;
}
.pm-enquiry-privacy svg {
	flex-shrink: 0;
	color: var(--pm-accent);
}

.pm-enquiry-success {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	background: #eafaf0;
	color: #1d7a46;
	font-size: 0.9rem;
}
.pm-enquiry-error {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	background: #fdecea;
	color: #b3261e;
	font-size: 0.9rem;
}

@media (max-width: 767px) {
	.pm-enquiry-content {
		grid-template-columns: minmax(0, 1fr);
		max-height: 95vh;
	}
	.pm-enquiry-left {
		border-radius: 16px 16px 0 0;
		padding: 1.5rem 1.5rem 1.25rem;
	}
	.pm-enquiry-image {
		min-height: 120px;
		max-height: 180px;
		margin-bottom: 0.75rem;
		border-radius: 12px 60px 60px 60px;
	}
	.pm-enquiry-right {
		padding: 1.5rem 1.5rem 1.75rem;
	}
	.pm-enquiry-form-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* Safety net for short/landscape viewports where even the tightened layout
   above may still not fit: shrink the overlay's own padding and let the
   card use more of the viewport height before its internal scrollbar
   (styled above) kicks in. */
@media (max-height: 700px) {
	.pm-enquiry-modal {
		padding: 0.75rem;
	}
	.pm-enquiry-content {
		max-height: 96vh;
	}
	.pm-enquiry-image {
		display: none;
	}
}

/* --- Responsive ---
   Note: the fullscreen lightbox popup itself (image + title) is rendered by
   Elementor's own built-in lightbox, not this stylesheet — customize its
   look under Elementor's Site Settings → Lightbox. */
@media (max-width: 991px) {
	.pm-product-gallery {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}
@media (max-width: 480px) {
	.pm-gallery-grid.pm-columns-3,
	.pm-gallery-grid.pm-columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.pm-carousel-nav {
		width: 32px;
		height: 32px;
	}
	.pm-carousel-prev { left: 8px; }
	.pm-carousel-next { right: 8px; }
}