/**
 * Yazan Product Display — storefront styles.
 *
 * Three things live here: the CSS-level suppression of Astra's hover add-to-cart, the Quick View
 * modal, and the Compare bar + comparison table. All of it is token-driven off the child theme's
 * custom properties, with literal fallbacks so the plugin still renders sanely under a theme that
 * does not define them.
 */

/* ------------------------------------------------------------------ */
/* Add-to-cart hover suppression                                      */
/*                                                                    */
/* Astra's "Modern shop style" prints this from the PARENT theme's    */
/* own constructor. CLAUDE.md rule #1 forbids editing the parent and  */
/* the action is not cleanly unhookable, so the switch hides it.      */
/*                                                                    */
/* Targeted at .ast-select-options-trigger / .add_to_cart_button and  */
/* NOT at .ast-on-card-button, which the SALE BADGE (.ast-onsale-card)*/
/* also carries — hiding that class wholesale would silently take the */
/* sale badge with it.                                                */
/* ------------------------------------------------------------------ */

.yz-pd-no-atc-hover .astra-shop-thumbnail-wrap .ast-on-card-button.ast-select-options-trigger,
.yz-pd-no-atc-hover .astra-shop-thumbnail-wrap .ast-on-card-button.add_to_cart_button {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Card triggers — Quick View + Compare                               */
/*                                                                    */
/* The base block is qualified with `button` on purpose. These three   */
/* declarations — absolute, inline-flex, opacity 0 — make an element   */
/* invisible, so any node that matches by accident DISAPPEARS with no  */
/* error anywhere. That is exactly what happened once: the storefront  */
/* put a bare `yz-pd-compare` state flag on <body>, and the whole page */
/* went blank white with a complete DOM behind it. The body flags are  */
/* now `yz-pd-has-*`; the tag qualifier is the second lock.            */
/* ------------------------------------------------------------------ */

button.yz-pd-quick,
button.yz-pd-compare {
	position: absolute;
	/*
	 * Above 5, which is what the CHILD THEME's on-card add-to-cart bar carries
	 * (astra-child/assets/css/woocommerce.css: `.yazan .yz-card .ast-on-card-button`). At 3 the bar
	 * painted over the labelled-pill variant and swallowed its clicks — same strip, same hover, and
	 * no ancestor creates a stacking context, so the two z-indexes competed directly and 5 won.
	 */
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0;
	border: 0;
	background: var(--yz-surface, #fff);
	color: var(--yz-ink, #1a1a1a);
	border-radius: 999px;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--mo-fast, 180ms) ease, transform var(--mo-fast, 180ms) ease;
}

/*
 * EVERY VARIANT RULE BELOW IS QUALIFIED WITH `button.` TOO.
 *
 * The base block above is `button.yz-pd-quick` — specificity (0,1,1). A bare `.yz-pd-quick--icon`
 * is (0,1,0) and LOSES to it on any property both declare. That silently zeroed the labelled
 * pill's `padding: 0.5rem 0.9rem` against the base's `padding: 0`, rendering it as a bare word with
 * no hit area. Raising the base's specificity to protect <body> from the class collision is what
 * created this, so the two fixes have to move together.
 */

/* Icon variant: a circular button stacked under the wishlist heart. */
button.yz-pd-quick--icon,
button.yz-pd-compare--icon {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	inset-inline-end: 0.75rem;
	box-shadow: 0 1px 6px rgb(0 0 0 / 12%);
}

button.yz-pd-quick--icon { inset-block-start: 3.25rem; }
button.yz-pd-compare--icon { inset-block-start: 5.75rem; }

.yz-pd-quick--icon .yz-pd-quick__label,
.yz-pd-compare--icon .yz-pd-compare__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Button variant: a labelled pill across the bottom of the thumbnail. */
button.yz-pd-quick--button,
button.yz-pd-compare--button {
	inset-inline: 0.75rem;
	padding: 0.5rem 0.9rem;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

/*
 * Stacked ABOVE the child theme's on-card add-to-cart bar, which is ~3rem tall and slides up from
 * `bottom: 0` on the same hover that reveals these. z-index alone stopped the bar from stealing the
 * clicks; this stops the two from being drawn on top of each other. When the owner switches that
 * bar off, `yz-pd-no-atc-hover` is on <body> and there is nothing to clear, so the pills drop back
 * down to the edge of the thumbnail.
 */
button.yz-pd-quick--button { inset-block-end: 7rem; }
button.yz-pd-compare--button { inset-block-end: 4.25rem; }

.yz-pd-no-atc-hover button.yz-pd-quick--button { inset-block-end: 3.25rem; }
.yz-pd-no-atc-hover button.yz-pd-compare--button { inset-block-end: 0.75rem; }

.yz-pd-quick__icon,
.yz-pd-compare__icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* Revealed on hover/focus-within of the card, and always on touch — a control that only exists
   under a pointer is unreachable on the phones that are most of this store's traffic. */
.astra-shop-thumbnail-wrap:hover .yz-pd-quick,
.astra-shop-thumbnail-wrap:hover .yz-pd-compare,
.astra-shop-thumbnail-wrap:focus-within .yz-pd-quick,
.astra-shop-thumbnail-wrap:focus-within .yz-pd-compare,
.yz-pd-quick:focus-visible,
.yz-pd-compare:focus-visible {
	opacity: 1;
}

/* Qualified to match the base block's specificity — an unqualified `.yz-pd-quick` here would now
   LOSE to `button.yz-pd-quick { opacity: 0 }` above and leave touch devices with no trigger. */
@media (hover: none) {
	button.yz-pd-quick,
	button.yz-pd-compare { opacity: 1; }
}

.yz-pd-compare.is-active {
	background: var(--yz-agate, #8c2f24);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Quick View modal                                                   */
/* ------------------------------------------------------------------ */

/*
 * THE LADDER THIS SITS ON, measured against the child theme rather than guessed:
 *
 *      5   on-card add-to-cart bar      99990   chat bubble
 *      6   our card triggers            99999   promo launcher
 *    999   sticky header               100000   welcome popup
 *  99991   our compare bar             100010   sign-in modal
 *
 * At 999 this modal tied the sticky header and lost outright to the welcome popup: opening Quick
 * View drew the panel UNDER the popup, and `elementFromPoint` at the panel's centre returned
 * `.yz-promo__media`. A dialog the shopper opened on purpose has to outrank one that opened itself,
 * which is the same call the theme already made for the sign-in modal — so this goes just below it.
 * Auth still wins: being asked to sign in is never something a product preview should cover.
 */
.yz-pd-modal {
	position: fixed;
	inset: 0;
	z-index: 100005;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.yz-pd-modal[hidden] { display: none; }

.yz-pd-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 55%);
}

.yz-pd-modal__panel {
	position: relative;
	inline-size: min(56rem, 100%);
	max-block-size: min(90vh, 44rem);
	overflow-y: auto;
	background: var(--yz-surface, #fff);
	color: var(--yz-ink, #1a1a1a);
	border-radius: var(--yz-radius, 4px);
	padding: clamp(1.25rem, 4vw, 2.25rem);
}

.yz-pd-modal__close {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.75rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.yz-pd-qv {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 3vw, 2rem);
}

@media (min-width: 48em) {
	.yz-pd-qv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.yz-pd-qv__media img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--yz-radius, 4px);
}

.yz-pd-qv__gallery {
	display: flex;
	gap: 0.5rem;
	margin-block-start: 0.5rem;
}

.yz-pd-qv__gallery img {
	inline-size: 4rem;
	block-size: 4rem;
	object-fit: cover;
	border-radius: var(--yz-radius, 4px);
}

.yz-pd-qv__name {
	margin: 0 0 0.5rem;
	font-family: var(--yz-font-display, Georgia, serif);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	line-height: 1.2;
}

.yz-pd-qv__price {
	display: block;
	margin-block-end: 0.75rem;
	font-size: 1.125rem;
}

.yz-pd-qv__excerpt {
	margin-block-end: 1rem;
	line-height: 1.65;
	opacity: 0.85;
}

.yz-pd-qv__meta {
	inline-size: 100%;
	margin-block-end: 1.25rem;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.yz-pd-qv__meta th,
.yz-pd-qv__meta td {
	padding: 0.4rem 0;
	text-align: start;
	vertical-align: top;
	border-block-end: 1px solid var(--yz-hairline, rgb(0 0 0 / 8%));
}

.yz-pd-qv__meta th { font-weight: 500; opacity: 0.7; }

.yz-pd-qv__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.yz-pd-qv__sold { opacity: 0.7; }

/* ------------------------------------------------------------------ */
/* Compare bar                                                        */
/* ------------------------------------------------------------------ */

.yz-pd-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	/* Above the chat bubble (99990), below the promo launcher and popup — see the ladder above. */
	z-index: 99991;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem clamp(0.75rem, 3vw, 1.5rem);
	background: var(--yz-surface, #fff);
	color: var(--yz-ink, #1a1a1a);
	box-shadow: 0 -2px 16px rgb(0 0 0 / 12%);
}

.yz-pd-bar[hidden] { display: none; }

/*
 * Lift the chat bubble clear of the bar instead of stacking one on the other.
 *
 * The bar is a full-width strip ~72px tall at the bottom edge; the bubble is 56px square sitting
 * 1.25rem from the same edge, so the two ALWAYS intersect — measured `bar/chat overlap: true`, with
 * the bar's "Clear" button sitting under the bubble. Raising the bar's z-index alone would have
 * buried the bubble rather than fixed anything.
 *
 * `--yz-chat-y` is the child theme's own documented knob for exactly this (chat.css: `inset-block-end:
 * var( --yz-chat-y, 1.25rem )`), and it is declared nowhere by default — the computed value is
 * empty, so the fallback applies and setting it on <body> simply inherits down. The class is toggled
 * by the storefront JS, not `:has()`, so the two mechanisms that know whether the bar is open are
 * the same one.
 */
body.yz-pd-bar-open { --yz-chat-y: 6.5rem; }

.yz-pd-bar__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.yz-pd-bar__item {
	position: relative;
	inline-size: 3rem;
	block-size: 3rem;
}

.yz-pd-bar__item img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: var(--yz-radius, 4px);
}

.yz-pd-bar__remove {
	position: absolute;
	inset-block-start: -0.35rem;
	inset-inline-end: -0.35rem;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--yz-ink, #1a1a1a);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1;
	cursor: pointer;
}

.yz-pd-bar__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.yz-pd-bar__go {
	padding: 0.6rem 1.2rem;
	border-radius: var(--yz-radius, 4px);
	background: var(--yz-agate, #8c2f24);
	color: #fff;
	text-decoration: none;
}

.yz-pd-bar__go[aria-disabled='true'] {
	opacity: 0.45;
	pointer-events: none;
}

.yz-pd-bar__clear {
	border: 0;
	background: none;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Comparison page                                                    */
/* ------------------------------------------------------------------ */

.yz-pd-page__table { overflow-x: auto; }

.yz-pd-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.yz-pd-table th,
.yz-pd-table td {
	padding: 0.75rem;
	text-align: start;
	vertical-align: top;
	border: 1px solid var(--yz-hairline, rgb(0 0 0 / 8%));
}

.yz-pd-table thead th {
	inline-size: 14rem;
	font-weight: 500;
}

/* The heading cell holds an image and a name inside one link. Left inline, they sit shoulder to
   shoulder and the name reads as a caption floating beside the ring rather than under it. */
.yz-pd-table thead a {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	color: inherit;
	text-decoration: none;
}

.yz-pd-table thead a span {
	font-family: var(--yz-font-display, Georgia, serif);
	font-size: 1.0625rem;
	line-height: 1.3;
}

.yz-pd-table img {
	inline-size: 100%;
	max-inline-size: 10rem;
	block-size: auto;
	border-radius: var(--yz-radius, 4px);
}

.yz-pd-table__row-label {
	inline-size: 9rem;
	font-weight: 500;
	opacity: 0.7;
}

.yz-pd-page__empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	button.yz-pd-quick,
	button.yz-pd-compare { transition: none; }
}