/* ═══════════════════════════════════════════════════════════════════════════
   Quick view
   ═══════════════════════════════════════════════════════════════════════════

   The dialog holds the product page's own summary now, so it is styled as a
   surface of the shop rather than as a widget with its own ideas: the same
   plate, the same hairline, the same cut corner, the same display face. What it
   adds on top of the page is the only thing a dialog has to add — a way out.

   Two arrangements, chosen in Theme Options:

     .urartu-qv--horizontal   photograph left, summary right (the desktop page)
     .urartu-qv--vertical     photograph on top, summary beneath (the phone page)

   Below 900px both are vertical: there is no second column to put anything in.

   The old file laid this out with floats and pinned the panel to 55vh, which is
   why a summary of any length was a scrollbar inside a scrollbar. The panel is
   a grid, and it scrolls once.
   ═══════════════════════════════════════════════════════════════════════════ */

.product__quick_view {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	background: rgba(36, 31, 28, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity var(--dur-base, 220ms) var(--u-ease, cubic-bezier(.2, 0, 0, 1));
}

#quick-view-container.opened .product__quick_view {
	z-index: 1002;
	opacity: 1;
}

/* The page behind does not scroll while the dialog is open — scrolling it is
   how a modal loses its own position on a phone. */
body.urartu-qv-open {
	overflow: hidden;
}

.close_quick_view {
	position: absolute;
	inset: 0;
	z-index: 100;
}


/* ── The panel ──────────────────────────────────────────────────────────── */

/*
 * The surface is the outer box; the inner one only scrolls.
 *
 * They used to be the same element: border, background, shadow, the cut corner
 * and `overflow-y: auto` all on .procuct__quick_view__container. That works
 * until something inside it is composited on its own layer — which is exactly
 * what Slick does, since it moves the track with translate3d. Chrome then
 * clipped the slider's layer against the clip-path wrongly and painted nothing
 * at all where the photograph was: the image was in the DOM, at the right size,
 * at the right place, and elementFromPoint returned it — there were simply no
 * pixels. Splitting the two apart is the fix, and it costs nothing: a dialog
 * has a frame and a scrolling area, and they were never the same thing.
 */
.urartu-qv.procuct__quick_view {
	position: relative;
	z-index: 101;
	display: flex;
	width: 100%;
	max-height: 88vh;
	outline: none;
	border: 1px solid var(--u-border, rgba(36, 31, 28, .14));
	background: var(--u-surface, #fff);
	box-shadow: 0 32px 80px rgba(36, 31, 28, .28);
	transform: translateY(12px);
	transition: transform var(--dur-base, 220ms) var(--u-ease, cubic-bezier(.2, 0, 0, 1));

	/* The signature: one cut corner, the same one the cards and the plates in
	   the shop carry. */
	--u-cut: var(--u-chamfer, 14px);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--u-cut)), calc(100% - var(--u-cut)) 100%, 0 100%);
	border-radius: 0;
}

#quick-view-container.opened .urartu-qv.procuct__quick_view {
	transform: none;
}

.urartu-qv--horizontal.procuct__quick_view { max-width: 1040px; }
.urartu-qv--vertical.procuct__quick_view   { max-width: 560px; }

/* Nothing but the scroll. No clip, no frame — see the note above. */
.urartu-qv .procuct__quick_view__container {
	position: relative;
	width: 100%;
	max-height: 100%;
	padding: clamp(20px, 2.6vw, 36px);
	border: 0;
	background: none;
	box-shadow: none;
	clip-path: none;
	border-radius: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Horizontal: two columns, the photograph holding its own width. */
.urartu-qv--horizontal .procuct__quick_view__container {
	display: grid;
	grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 36px);
	align-items: start;
}

.urartu-qv--vertical .procuct__quick_view__container {
	display: block;
}


/* ── Close ──────────────────────────────────────────────────────────────── */

.urartu-qv .quick_view__close_button {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 12;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--u-border, rgba(36, 31, 28, .14));
	border-radius: 0;
	background: var(--u-surface, #fff);
	font-size: 14px;
	line-height: 1;
	color: var(--u-muted-fg, rgba(36, 31, 28, .58));
	cursor: pointer;
	transition:
		color var(--dur-base, 220ms) var(--u-ease, ease),
		border-color var(--dur-base, 220ms) var(--u-ease, ease);
}

.urartu-qv .quick_view__close_button:hover,
.urartu-qv .quick_view__close_button:focus-visible {
	border-color: var(--u-surface-fg, #241F1C);
	color: var(--u-surface-fg, #241F1C);
}


/* ── The photograph ─────────────────────────────────────────────────────── */

.urartu-qv .quick-product-gallery-container {
	position: relative;
	float: none;
	width: auto !important;
	overflow: visible;
}

.urartu-qv--horizontal .quick-product-gallery-container {
	position: sticky;
	top: 0;
}

.urartu-qv .quick-product-gallery-container img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	background: var(--u-stone, #EFEAE3);
}

.urartu-qv .product-image-link {
	display: block;
}

/*
 * Vertical: the picture is the top of the dialog, capped so the title and the
 * price are on screen when it opens — uncapped at 4:5 in a 560px column it was
 * 700px tall and everything a shopper came for started below the fold.
 *
 * Capped and cropped, though, it cut the top off the garment: a height limit
 * plus a fixed ratio plus object-fit:cover is a letterbox. So the height is the
 * only constraint and the photograph keeps its own shape inside it.
 */
.urartu-qv--vertical .quick-product-gallery-container .gallery-slide img,
.urartu-qv--vertical .product-image-link > img {
	width: auto;
	max-width: 100%;
	max-height: 42vh;
	margin-inline: auto;
	aspect-ratio: auto;
	object-fit: contain;
}

/*
 * And the frame is drawn round the photograph rather than round the column.
 *
 * With the image height-capped and centred, the container stayed the full width
 * of the dialog, so the badge — pinned to the container's top-left — sat in the
 * empty gutter beside the picture instead of on it. Capping the container at the
 * width a 4:5 photograph reaches at that height puts the two edges together
 * again; a taller or wider crop leaves a few pixels either side, which is the
 * width of the badge's own inset.
 */
.urartu-qv--vertical .quick-product-gallery-container {
	max-width: min(100%, calc(42vh * 4 / 5));
	margin-inline: auto;
}

.urartu-qv--horizontal .quick-product-gallery-container .gallery-slide img,
.urartu-qv--horizontal .product-image-link > img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Badges belong to the photograph, and are never a target. */
.urartu-qv .quick-product-gallery-container > .onsale,
.urartu-qv .quick-product-gallery-container > .urartu-badge {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 6;
	margin: 0;
	padding: 5px 12px;
	border-radius: 0;
	background: var(--u-basalt, #241F1C);
	font-family: var(--u-font-ui, var(--u-font-body, 'Montserrat', system-ui, sans-serif));
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	pointer-events: none;
}

.urartu-qv .quick-view-slider-nav {
	margin-top: 10px;
}

.urartu-qv .product-gallery-slider-nav .gallery-slide {
	padding: 0 4px;
	cursor: pointer;
}

/*
 * The strip is a strip, not a second gallery.
 *
 * Slick divides the row by however many slides there are, so a product with two
 * photographs got two half-width thumbnails the size of the main image — a
 * contact sheet under a photograph, competing with it. Capping the height and
 * letting the width follow keeps the strip the same size whether there are two
 * pictures or nine.
 */
.urartu-qv .product-gallery-slider-nav .gallery-slide img {
	width: auto;
	max-width: 100%;
	max-height: 84px;
	margin-inline: auto;
	aspect-ratio: 1;
	object-fit: cover;
	opacity: .55;
	transition: opacity var(--dur-base, 220ms) var(--u-ease, ease);
}

.urartu-qv .product-gallery-slider-nav .slick-current .gallery-slide img,
.urartu-qv .product-gallery-slider-nav .gallery-slide:hover img {
	opacity: 1;
}

.urartu-qv .product-gallery-slider .slick-arrow {
	z-index: 4;
}


/* ── The summary ────────────────────────────────────────────────────────── */

.urartu-qv .quick__view__content_container {
	float: none;
	width: auto;
	min-width: 0;
	padding: 0;
}

.urartu-qv--vertical .quick__view__content_container {
	margin-top: clamp(20px, 3vw, 28px);
}

.urartu-qv .quick_view__content.entry-summary {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

/*
 * The title states itself, but at dialog scale. On the page it is the largest
 * thing on the screen; here the photograph next to it is, and a heading set to
 * page size would fight it.
 */
.urartu-qv .quick_view__content .product_title {
	margin: 0 0 10px;
	padding-inline-end: 44px;
	font-family: var(--u-font-display, 'Forum', Georgia, serif);
	font-weight: var(--u-display-weight, 400);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	line-height: 1.12;
	letter-spacing: var(--u-display-track, .015em);
	color: var(--u-surface-fg, #241F1C);
	text-transform: none;
}

.urartu-qv .quick_view__content .price {
	display: block;
	margin: 0 0 14px;
	font-family: var(--u-font-body, 'Montserrat', system-ui, sans-serif);
	font-size: 1.375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--u-surface-fg, #241F1C);
}

.urartu-qv .quick_view__content .price del {
	margin-inline-end: 8px;
	font-size: 1rem;
	font-weight: 500;
	opacity: .5;
}

.urartu-qv .quick_view__content .price ins {
	text-decoration: none;
}

.urartu-qv .quick_view__content .woocommerce-product-details__short-description {
	margin: 0 0 18px;
	font-family: var(--u-font-body, 'Montserrat', system-ui, sans-serif);
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

.urartu-qv .quick_view__content .woocommerce-product-rating {
	margin: 0 0 12px;
}

/*
 * Rules between the blocks rather than boxes around them. The summary is a
 * sequence of unrelated facts — price, options, attributes, SKU — and a hairline
 * says "next thing" without adding a fourth border to a dialog that already has
 * three.
 */
.urartu-qv .quick_view__content .urartu-single-attrs,
.urartu-qv .quick_view__content .product_meta,
.urartu-qv .quick_view__content .urartu-single-tools {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-qv .quick_view__content .product_meta {
	font-family: var(--u-font-body, 'Montserrat', system-ui, sans-serif);
	font-size: .8125rem;
	line-height: 1.9;
	color: var(--u-muted-fg, rgba(36, 31, 28, .58));
}

.urartu-qv .quick_view__content .product_meta a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.urartu-qv .quick_view__content .product_meta a:hover {
	color: var(--u-patina, #2A6F62);
}


/* ── The buy form ───────────────────────────────────────────────────────── */

.urartu-qv .quick_view__content form.cart {
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-qv .quick_view__content .variations_form .variations {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
}

.urartu-qv .quick_view__content .variations td,
.urartu-qv .quick_view__content .variations th {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: start;
}

.urartu-qv .quick_view__content .variations tr + tr th {
	padding-top: 14px;
}

.urartu-qv .quick_view__content .variations .label label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--u-font-ui, var(--u-font-body, 'Montserrat', system-ui, sans-serif));
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--u-muted-fg, rgba(36, 31, 28, .58));
}

.urartu-qv .quick_view__content .reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: .75rem;
	color: var(--u-muted-fg, rgba(36, 31, 28, .58));
}

/* The row the quantity and the button share. They are one action, so they sit
   on one line — and the button takes what is left rather than a fixed 45%. */
.urartu-qv .quick_view__content form.cart .quantity-row,
.urartu-qv .quick_view__content form.cart > .quantity {
	float: none;
	width: auto;
}

.urartu-qv .quick_view__content form.cart,
.urartu-qv .quick_view__content .variations_button,
.urartu-qv .quick_view__content .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.urartu-qv .quick_view__content .variations_form.cart {
	display: block;
}

.urartu-qv .quick_view__content .quantity {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

.urartu-qv .quick_view__content .single_add_to_cart_button {
	flex: 1 1 180px;
	float: none;
	width: auto;
	min-height: 52px;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: 0;
	font-family: var(--u-font-ui, var(--u-font-body, 'Montserrat', system-ui, sans-serif));
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.urartu-qv .quick_view__content .woocommerce-variation-price {
	flex: 1 1 100%;
	margin-bottom: 4px;
}

.urartu-qv .quick_view__content .woocommerce-variation-availability {
	flex: 1 1 100%;
	font-size: .8125rem;
}

.urartu-qv .quick_view__content .stock.out-of-stock {
	margin: 14px 0 0;
	font-size: .875rem;
	color: #B3261E;
}


/* ── Out of the dialog ──────────────────────────────────────────────────── */

/*
 * A dialog has to say where the rest is. Quiet, at the bottom, under a rule —
 * it is the exit, not the offer.
 */
.urartu-qv .urartu-qv__full {
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-qv .urartu-qv__full a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--u-font-ui, var(--u-font-body, 'Montserrat', system-ui, sans-serif));
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--u-surface-fg, #241F1C);
	text-decoration: none;
}

.urartu-qv .urartu-qv__full a span {
	transition: transform var(--dur-base, 220ms) var(--u-ease, ease);
}

.urartu-qv .urartu-qv__full a:hover {
	color: var(--u-patina, #2A6F62);
}

.urartu-qv .urartu-qv__full a:hover span {
	transform: translateX(4px);
}

/* Things the product page shows that a dialog has no room for, and one — the
   previous/next pager — that would navigate the page behind the dialog. */
.urartu-qv .quick_view__content .panolens-fullscreen-button,
.urartu-qv .quick_view__content .previous-next-product-buttons,
.urartu-qv .quick_view__content .woocommerce-tabs,
.urartu-qv .quick_view__content .order-one-click-link {
	display: none !important;
}


/* ── One column ─────────────────────────────────────────────────────────── */

@media (max-width: 899px) {

	.urartu-qv--horizontal.procuct__quick_view,
	.urartu-qv--vertical.procuct__quick_view {
		max-width: 560px;
	}

	.urartu-qv--horizontal .procuct__quick_view__container {
		display: block;
	}

	.urartu-qv--horizontal .quick-product-gallery-container {
		position: static;
	}

	.urartu-qv--horizontal .quick__view__content_container {
		margin-top: clamp(20px, 3vw, 28px);
	}

	.urartu-qv .quick-product-gallery-container .gallery-slide img,
	.urartu-qv .product-image-link > img {
		max-height: 42vh;
	}
}

@media (max-width: 575px) {

	.product__quick_view {
		padding: 12px;
	}

	.urartu-qv .procuct__quick_view__container {
		max-height: 92vh;
		padding: 18px;
	}

	.urartu-qv .quick_view__content .single_add_to_cart_button {
		flex: 1 1 100%;
	}
}

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

	.product__quick_view,
	.urartu-qv.procuct__quick_view,
	.urartu-qv .urartu-qv__full a span {
		transition: none;
	}
}


/* ── Loose ends in WooCommerce's own form ───────────────────────────────── */

/*
 * .woocommerce-variation is the box the price and the stock line of the chosen
 * variation are written into. Before a choice is made it is empty — but it still
 * carries WooCommerce's margin, so the dialog opened with a band of nothing
 * between the buy button and the wishlist row.
 */
.urartu-qv .quick_view__content .woocommerce-variation:empty,
.urartu-qv .quick_view__content .woocommerce-variation-description:empty {
	display: none;
}

.urartu-qv .quick_view__content .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.urartu-qv .quick_view__content .woocommerce-variation-add-to-cart {
	margin: 0;
}

/* The reset link is shown and hidden by WooCommerce's own script (it toggles
   visibility once something is chosen), so it is only styled here, never
   hidden — a rule that hid it would hide it for good. */


/* ── Gallery arrows ─────────────────────────────────────────────────────── */

/*
 * Slick's default is a grey disc with a serif chevron. Square, hairline, and
 * only as loud as it needs to be: the photograph is the thing being looked at.
 */
.urartu-qv .product-gallery-slider .slick-prev,
.urartu-qv .product-gallery-slider .slick-next {
	width: 38px;
	height: 38px;
	border: 1px solid var(--u-border, rgba(36, 31, 28, .14));
	border-radius: 0;
	background: rgba(255, 255, 255, .92);
	opacity: 0;
	transition: opacity var(--dur-base, 220ms) var(--u-ease, ease);
}

.urartu-qv .quick-product-gallery-container:hover .slick-prev,
.urartu-qv .quick-product-gallery-container:hover .slick-next,
.urartu-qv .product-gallery-slider .slick-arrow:focus-visible {
	opacity: 1;
}

.urartu-qv .product-gallery-slider .slick-prev { inset-inline-start: 12px; }
.urartu-qv .product-gallery-slider .slick-next { inset-inline-end: 12px; }

.urartu-qv .product-gallery-slider .slick-prev::before,
.urartu-qv .product-gallery-slider .slick-next::before {
	color: var(--u-basalt, #241F1C);
	font-size: 16px;
	opacity: 1;
}