/* PawKitty Quick-View (shared) — product quick-view content.
   The modal SHELL (overlay/card/footer/scroll-hint) lives in each consumer
   plugin; this file only styles the .pk-qv body so both share one copy. */

/* ── Quick-view content layout ───────────────────────────────────────────── */
.pk-qv {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	padding: 24px 24px 8px;
}

.pk-qv__media { min-width: 0; }

/* Neutralise theme float/width on the injected CommerceKit gallery */
.pk-qv__media .images,
.pk-qv__media #commercegurus-pdp-gallery-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
}

.pk-qv__media-fallback img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid #eef0f5;
}

/* Rounded corners to match the PDP gallery (8px main image, 6px thumbnails) */
.pk-qv__media .cg-main-swiper .swiper-slide img { border-radius: 8px; }
.pk-qv__media .cg-thumb-swiper img { border-radius: 6px; }

/* We never open the PhotoSwipe lightbox inside the quick-view; hide its
   container so it can't show as an empty block where photoswipe CSS is absent
   (e.g. non-PDP pages like cart / badge re-open). */
.pk-qv__media .pswp { display: none !important; }

/* Info column reuses the PDP's .summary classes so the theme styles each
   element identically — we neutralise the theme's summary LAYOUT and use a
   flex column so children always stack (flex items ignore the theme's float
   on .price, which on the PDP is cleared by a markup .clear div we don't have). */
.pk-qv__info.summary.entry-summary {
	min-width: 0;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	position: static !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch;
}

/* Title — inherits the page's global single-product title styles (Fraunces
   serif), so it matches the PDP. We only set spacing below it. */
.pk-qv__info .product_title.entry-title { margin: 0 0 10px; }

/* Spacing between summary blocks (rating has an inline margin we override).
   Price gets equal space above and below (above = rating's bottom margin). */
.pk-qv__info .woocommerce-product-rating { margin: 0 0 12px !important; }
.pk-qv__info .price { margin: 0 0 12px; float: none; }

/* The rating link is display:flex, which trims the literal space before "4.8";
   restore a gap between the stars and the score text. */
.pk-qv__info .woocommerce-product-rating .star-rating { margin-right: 6px; }

/* Price — replicate the PDP's price styling. The quick-view renders outside
   `.site-content`, so the theme's `.site-content`-scoped price rules don't
   reach it. These mirror them exactly, scoped to .pk-qv instead. */
.pk-qv p.price del {
	text-decoration: line-through;
	opacity: 0.45;
}
.pk-qv p.price del .woocommerce-Price-amount.amount {
	font-size: 15px;
	font-weight: 400;
	color: #1F1F1F;
}
.pk-qv p.price ins {
	text-decoration: none;
}
.pk-qv p.price ins .woocommerce-Price-amount,
.pk-qv p.price .woocommerce-Price-amount.amount {
	font-size: 20px;
	font-weight: 800;
	color: #3A6F5B;
}

/* Short description — let the theme's WooCommerce class style it; just spacing */
.pk-qv__info .woocommerce-product-details__short-description {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.6;
}
.pk-qv__info .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Reassurance — mirror the reassurance plugin's own values so it matches the
   PDP whether or not the plugin printed its inline CSS on this page. */
.pk-qv__info .reassurance-content-wrapper { margin: 0 0 0.67rem; }
.pk-qv__info .reassurance-line { font-size: 14px; color: #444; margin: 0 0 0.67rem; line-height: 1.5; }
.pk-qv__info .reassurance-tags-list {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 0 0 0.35rem; padding: 0;
}
.pk-qv__info .reassurance-tag {
	display: inline-flex; align-items: center;
	padding: 2px 10px;
	background: #f5f5f5;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
	font-weight: 500;
}

.pk-qv__error {
	padding: 48px 24px;
	text-align: center;
	font-size: 14px;
	color: #888;
}

/* Stack to a single column on smaller screens */
@media (max-width: 720px) {
	.pk-qv {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 18px 18px 6px;
	}
}