/**
 * IGSHOP Shop Kit — single product gallery.
 *
 * Desktop and tablet: main image full width, the rest tiled in two columns.
 * Mobile: the same images become a snap-scrolling carousel.
 *
 * All tunable values are custom properties. Override in your child theme:
 *
 *   .qav-gallery {
 *       --qav-gallery-gap: 8px;
 *       --qav-gallery-columns: 3;
 *       --qav-gallery-ratio: auto;   <- keeps every image's natural shape
 *   }
 */

:root {
	--qav-mpb-h: 72px;
}

.qav-gallery {
	--qav-gallery-gap: 5px;
	--qav-gallery-columns: 2;
	/* Uniform crop for the tiled images so grid rows line up. Set to `auto` to
	   show each image at its natural proportions instead. */
	--qav-gallery-ratio: 2 / 3;
	/* Hello Commerce draws a 1px grey box around the whole gallery, which reads
	   as a stray outline once the images are tiled. Set a border value here to
	   bring it back. */
	--qav-gallery-border: 0;
	--qav-gallery-dot-size: 8px;
	--qav-gallery-dot: rgba(0, 0, 0, 0.25);
	--qav-gallery-dot-active: #333;
}

/* WooCommerce ships the gallery with an inline `opacity: 0` and fades it in
   from its own script. Force it visible so a deferred or missing script can
   never leave the shopper looking at a blank column. */
.qav-gallery.woocommerce-product-gallery {
	opacity: 1 !important;
}

/* Themes sometimes frame the gallery box. The extra `.woocommerce` ancestor
   keeps this a notch more specific than Hello Commerce's own rule, so it wins
   regardless of which stylesheet the site happens to load first. */
.woocommerce .qav-gallery.woocommerce-product-gallery {
	border: var(--qav-gallery-border);
}

/* ---------------------------------------------------------------------------
   Desktop and tablet grid
   --------------------------------------------------------------------------- */

.qav-gallery .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(var(--qav-gallery-columns), minmax(0, 1fr));
	gap: var(--qav-gallery-gap);
	width: auto;
	margin: 0;
	padding: 0;
	/* FlexSlider is off, so clear any transform or transition a theme still
	   expects to animate. */
	transform: none;
	transition: none;
}

.qav-gallery .woocommerce-product-gallery__wrapper > * {
	/* Themes routinely float gallery items or give them a percentage width for
	   the old thumbnail strip. Both break grid placement, and both are set with
	   enough specificity that they have to be overridden outright. */
	float: none !important;
	width: auto !important;
	max-width: none;
	margin: 0;
	padding: 0;
}

.qav-gallery .woocommerce-product-gallery__wrapper img {
	display: block;
	width: 100%;
	height: auto;
	/* Every image — the first included — is cropped to the same shape, so each
	   pair of tiles lines up as a clean row. */
	aspect-ratio: var(--qav-gallery-ratio);
	object-fit: cover;
}

/* Every image opens the lightbox, so say so on hover. */
.qav-gallery .woocommerce-product-gallery__image a {
	display: block;
	cursor: zoom-in;
}

.woocommerce div.product .product_title {
	text-align: left;
	margin-top: -15px !important;
}

/* ---------------------------------------------------------------------------
   Price on the single product page
   Same treatment as the listings: old price struck through in red, new price
   near-black, both bold. Only applies while the "Sale price styling" setting
   is on (the .qav-price-style body class). Covers both the classic summary
   and Elementor Pro's Product Price widget. The variables fall back to the
   same defaults used on the archive stylesheet.
   --------------------------------------------------------------------------- */

.qav-price-style div.product p.price,
.qav-price-style .elementor-widget-woocommerce-product-price .price {
	color: var(--qav-price-new, #111111);
	font-weight: var(--qav-price-weight, 700);
}

.qav-price-style div.product p.price del,
.qav-price-style .elementor-widget-woocommerce-product-price .price del {
	color: var(--qav-price-old, #d32f2f);
	font-weight: var(--qav-price-weight, 700);
	opacity: 1;
	margin-right: var(--qav-price-gap, 0.5em);
	text-decoration: line-through;
	text-decoration-color: currentColor;
	text-decoration-thickness: 0.08em;
}

.qav-price-style div.product p.price del .amount,
.qav-price-style div.product p.price del bdi,
.qav-price-style .elementor-widget-woocommerce-product-price .price del .amount,
.qav-price-style .elementor-widget-woocommerce-product-price .price del bdi {
	color: inherit;
}

.qav-price-style div.product p.price ins,
.qav-price-style .elementor-widget-woocommerce-product-price .price ins {
	color: var(--qav-price-new, #111111);
	font-weight: var(--qav-price-weight, 700);
	background: none;
	text-decoration: none;
}

.qav-price-style div.product p.price ins .amount,
.qav-price-style div.product p.price ins bdi,
.qav-price-style .elementor-widget-woocommerce-product-price .price ins .amount,
.qav-price-style .elementor-widget-woocommerce-product-price .price ins bdi {
	color: inherit;
}

/* ---------------------------------------------------------------------------
   Sale label on the product page gallery
   Targets Elementor Pro's Product Images widget wrapper, so listings and other
   badges are unaffected.
   --------------------------------------------------------------------------- */

.woocommerce .elementor-widget-woocommerce-product-images span.onsale {
	padding: 0.5em 1em;
	background-color: var(--qav-brand-accent, var(--e-global-color-accent, #4db2b9));
}

/* ---------------------------------------------------------------------------
   Mobile carousel
   The script decides whether to autoplay by reading overflow-x from this rule,
   so this media query is the single source of truth for the breakpoint.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Phone slides crop to 4:5, per the TikTok-style layout. */
	.qav-gallery {
		--qav-gallery-ratio: 4 / 5;
	}

	.qav-gallery .woocommerce-product-gallery__wrapper {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		overflow-x: auto;
		/* Setting one axis to something other than `visible` makes the other
		   compute to `auto`, and Chrome then reserves a vertical scrollbar
		   gutter — which narrows each slide and leaves a sliver of the next
		   image showing at rest. Pinning it to hidden keeps slides exactly one
		   viewport wide. */
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		/* Hide the scrollbar: the dots communicate position instead. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.qav-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		display: none;
	}

	.qav-gallery .woocommerce-product-gallery__wrapper > * {
		flex: 0 0 100%;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* Equal height slides, so the page does not jump as the carousel advances. */
	.qav-gallery .woocommerce-product-gallery__wrapper > * img {
		aspect-ratio: var(--qav-gallery-ratio);
		object-fit: cover;
	}
}

/* "1/8" slide counter — carousel mode only. The mobile override must come
   AFTER this base rule; equal specificity means file order decides. */
.qav-gallery-counter {
	display: none;
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 5;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 999px;
	pointer-events: none;
}

@media (max-width: 767px) {
	.qav-gallery-counter {
		display: inline-block;
	}
}

/* ---------------------------------------------------------------------------
   Carousel dots
   Built by the script, hidden outside carousel mode.
   --------------------------------------------------------------------------- */

.qav-gallery-dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
}

/* Dots stay hidden everywhere — the "1/8" counter replaces them on mobile. */

.qav-gallery-dot {
	width: var(--qav-gallery-dot-size);
	height: var(--qav-gallery-dot-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--qav-gallery-dot);
	cursor: pointer;
	transition: background-color 180ms ease-out, transform 180ms ease-out;
	/* Keep the tap target comfortable without making the dot itself bigger. */
	box-shadow: 0 0 0 6px transparent;
}

.qav-gallery-dot[aria-current="true"] {
	background: var(--qav-gallery-dot-active);
	transform: scale(1.2);
}

.qav-gallery-dot:focus-visible {
	outline: 2px solid var(--qav-gallery-dot-active);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Description tables
   Product descriptions are pasted with fixed inline widths (width: 520px),
   which overflow phone screens. Force fluid width wherever product content
   renders; !important is required to beat the inline style.
   --------------------------------------------------------------------------- */

/* Elementor sections are flex containers, and a flex item will not shrink
   below its content width — so a 520px table blows the widget out of a 390px
   phone no matter what the table itself is told. min-width: 0 restores
   shrinking; overflow-x is the last-resort scroll if something still sticks.
   Covers both the WooCommerce Product Content widget and a Text Editor widget
   fed by the "Product Content" dynamic tag, in tabs or accordions. */
.elementor-widget-woocommerce-product-content,
.single-product .elementor-widget-text-editor,
.e-n-accordion .elementor-widget-text-editor,
.e-n-tabs-content .elementor-widget-text-editor {
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
}

.elementor-widget-woocommerce-product-content table,
.single-product .elementor-widget-text-editor table,
.e-n-accordion .elementor-widget-text-editor table,
.e-n-tabs-content .elementor-widget-text-editor table,
.woocommerce-Tabs-panel--description table,
div.product .woocommerce-product-details__short-description table {
	width: 100% !important;
	max-width: 100% !important;
	table-layout: auto;
}

.elementor-widget-woocommerce-product-content table td,
.elementor-widget-woocommerce-product-content table th,
.single-product .elementor-widget-text-editor table td,
.single-product .elementor-widget-text-editor table th {
	word-break: break-word;
}

/* Site-specific fix: cap the description table inside the mobile accordion.
   (The accordion only renders on tablet/mobile — hidden on desktop.) */
#e-n-accordion-item-2620 > div > div > table {
	max-width: 360px;
}

/* ---------------------------------------------------------------------------
   Measurement chart ([measurement_chart] shortcode)
   Light bordered table in the shop style; wide tables scroll sideways inside
   the wrapper instead of breaking the page.
   --------------------------------------------------------------------------- */

.qav-measurement-chart {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.qav-measurement-chart table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.qav-measurement-chart th,
.qav-measurement-chart td {
	border: 1px solid #e3dadd;
	padding: 10px 12px;
	text-align: center;
	font-size: 13px;
	line-height: 1.4;
}

.qav-measurement-chart th {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Product video plugin controls
   Buttons from the product-video plugin's player, recoloured to black on
   transparent so they read on the gallery.
   --------------------------------------------------------------------------- */

.pvp-video__full {
	color: black !important;
	background-color: transparent !important;
}

.pvp-video__close {
	color: black !important;
	background-color: transparent !important;
}

.pvp-video.is-closed .pvp-video__reopen {
	background-color: var(--qav-brand-accent, var(--e-global-color-accent, #4db2b9)) !important;
}

.pvp-video__reopen {
	font-size: 13px !important;
}

/* ---------------------------------------------------------------------------
   Reviews (Customer Reviews for WooCommerce plugin)
   Hides the ratings summary box and separator, cleans up the review form.
   --------------------------------------------------------------------------- */

.ivole-summaryBox {
	display: none;
}

.cr-summary-separator {
	display: none !important;
}

.cr-reviews-grid .cr-summaryBox-wrap {
	display: block;
	margin: 0;
	background-color: transparent;
}

/* "Add review" as a teal button matching the sale badge. */
.cr-reviews-grid .cr-summaryBox-wrap .cr-add-review-wrap .cr-all-reviews-add-review {
	display: block;
	background-color: var(--qav-brand-accent, var(--e-global-color-accent, #4db2b9));
	color: rgb(255, 255, 255);
	border: 0px;
	height: 40px;
	line-height: 20px;
	font-size: 15px;
	width: auto;
	padding: 10px 20px;
	margin: 0px;
}

.cr-review-form-wrap {
	background-color: white;
}

.cr-reviews-grid .cr-review-form-item span {
	font-size: unset !important;
}

.cr-reviews-grid .cr-review-form-item img {
	height: auto !important;
	width: 40px !important;
}

/* "Sorry, no reviews match your current selections" — pointless under an
   Add A Review button when the product simply has no reviews yet. */
.cr-reviews-grid-empty,
.cr-search-no-reviews {
	display: none !important;
}

/* Submit button on the review and Q&A forms, teal like the badge. */
.cr-reviews-grid .cr-review-form-wrap .cr-review-form-buttons .cr-review-form-submit,
.cr-qna-block .cr-review-form-buttons .cr-review-form-submit {
	background-color: var(--qav-brand-accent, var(--e-global-color-accent, #4db2b9));
}

/* ---------------------------------------------------------------------------
   Reduced motion
   The script also skips autoplay entirely when this preference is set.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.qav-gallery .woocommerce-product-gallery__wrapper {
		scroll-behavior: auto;
	}

	.qav-gallery-dot {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Mobile price bar (TikTok style) — rendered under the gallery, phones only.
   --------------------------------------------------------------------------- */

.qav-mpb {
	--qav-mpb-h: 72px;

	display: none;
	background: var(--qav-brand-primary, var(--e-global-color-primary, #330917));
	color: #fff;
	padding: 12px 14px;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.qav-mpb-left {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.qav-mpb-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.qav-mpb-pill {
	background: var(--qav-brand-accent, var(--e-global-color-accent, #14848c));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 6px;
}

.qav-mpb-now {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.qav-mpb-cur,
.qav-mpb-from {
	font-size: 14px;
	font-weight: 600;
}

.qav-mpb-was {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: line-through;
	/* Breathing room so the struck-through digits stay legible. */
	letter-spacing: 0.5px;
}

/* Right side: countdown */
.qav-mpb-ends {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.qav-mpb-lbl {
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	opacity: 0.85;
}

.qav-mpb-boxes {
	display: flex;
	align-items: center;
	gap: 4px;
}

.qav-mpb-t {
	background: var(--qav-brand-accent, var(--e-global-color-accent, #14848c));
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	padding: 3px 5px;
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
}

.qav-mpb-c {
	opacity: 0.6;
	font-size: 12px;
}

/* Days box (and its colon) drop off inside the final 24 hours. */
.qav-mpb-ends[data-days='0'] .qav-mpb-u-days,
.qav-mpb-ends[data-days='0'] .qav-mpb-c-days {
	display: none;
}

/* Flash sale (flag written by the WooCommerce Bulk Sales Manager plugin):
   red bar, black discount pill and ticker boxes, bold "Flash Sale" label. */
.qav-mpb.flash-sale {
	background: #ff0000;
}

.qav-mpb.flash-sale .qav-mpb-pill {
	background: #000;
}

.qav-mpb.flash-sale .qav-mpb-t {
	background: #000;
}

.qav-mpb.flash-sale .qav-mpb-lbl {
	font-weight: 800;
	opacity: 1;
}

/* Right side: free shipping */
.qav-mpb-ship {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 46%;
}

.qav-mpb-ship svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	opacity: 0.9;
}

.qav-mpb-fs-lines {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.qav-mpb-fs1 {
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	font-weight: 600;
}

.qav-mpb-fs2 {
	font-size: 10px;
	opacity: 0.75;
}

@media (max-width: 767px) {
	.qav-mpb {
		height: var(--qav-mpb-h, 72px);
		margin-top: calc(-1 * var(--qav-mpb-h, 72px));
		box-sizing: border-box;
	}

	/* The bar's discount pill replaces the sale badge on phones. */
	.woocommerce .elementor-widget-woocommerce-product-images span.onsale {
		display: none;
	}

	/* Elementor's wrapped-flex line sizing shorts the gallery column by ~32px
	   versus its real rendered height, which pulls the next section (title)
	   under the overlaid bar. Give the title explicit clearance on phones;
	   the bar is a fixed 72px so this is deterministic. */
	.single-product div.product .product_title {
		margin-top: 50px !important;
	}

	/* The template gives the image widget and its ancestor containers fixed
	   heights sized for the desktop tile grid. On phones that leaves a dead gap
	   under the 4:5 image, clips the price bar, and lets the title overlap it.
	   Let every box in the chain hug its content instead. */
	.single-product .e-con:has(.elementor-widget-woocommerce-product-images),
	.single-product .elementor-widget-woocommerce-product-images,
	.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery,
	.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery__wrapper {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		flex-basis: auto !important;
		flex-shrink: 0 !important;
	}

	/* Elementor's wrapped-flex line sizing tracks the gallery's box INCLUDING
	   its margins, but not a sibling added after it — so a bar in normal flow
	   gets overlapped by the next section. Trick: reserve exactly the bar's
	   height as gallery bottom margin (replacing Hello Commerce's 64px), then
	   pull the bar up into that reserved space. The layout engine counts the
	   margin; shoppers see the bar. */
	.single-product .woocommerce div.product div.images,
	.single-product div.product div.images {
		margin-bottom: var(--qav-mpb-h, 72px) !important;
	}

	.qav-mpb {
		display: flex;
	}

	/* The bar replaces the standard price widget and the countdown card on
	   phones. The archive overlay countdowns in product grids are excluded. */
	.single-product .elementor-widget-woocommerce-product-price,
	.single-product .wc-sale-countdown:not(.archive-countdown-wrapper .wc-sale-countdown) {
		display: none !important;
	}
}