/**
 * CaterOS quick view modal (archive only).
 * Branding fallbacks match palette_defaults (coral / slate).
 */

.cateros-quick-view {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}

.cateros-quick-view[hidden] {
	display: none !important;
}

.cateros-quick-view__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.cateros-quick-view__panel {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 10px;
	width: min(920px, 100%);
	max-height: 90vh;
	overflow: auto;
	box-shadow: 0 14px 50px rgba(0, 0, 0, 0.22);
	padding: 1rem;
	box-sizing: border-box;
}

/* Solid circle rather than a bare glyph: the panel scrolls, so this can sit over
   a product image. Contrast comes from the button's own background, which makes
   it independent of whatever is behind it. --cateros-text is a FIXED neutral (not
   merchant-configurable), so a colour choice cannot break legibility here. */
.cateros-quick-view__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--cateros-text, #1f2937);
	color: var(--cateros-btn-text, #ffffff);
	line-height: 0;
	cursor: pointer;
	padding: 0;
}

/* Block removes the inline-baseline gap that would otherwise offset the icon. */
.cateros-quick-view__close svg {
	display: block;
}

.cateros-quick-view__close:hover {
	opacity: 0.88;
}

.cateros-quick-view__close:focus-visible {
	outline: 2px solid var(--cateros-btn-text, #ffffff);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--cateros-text, #1f2937);
}

.cateros-qv__loading,
.cateros-qv__error {
	padding: 1rem;
	text-align: center;
	color: #50575e;
}

.cateros-qv__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 720px) {
	.cateros-qv__grid {
		grid-template-columns: 360px 1fr;
		align-items: start;
	}
}

.cateros-qv__img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

.cateros-qv__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.cateros-qv__price {
	margin: 0 0 0.5rem;
}

.cateros-qv__meta {
	margin: 0 0 0.75rem;
	color: #374151;
}

.cateros-qv__fields {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.cateros-qv__field-label {
	display: block;
	font-size: 0.9rem;
	color: #50575e;
	margin-bottom: 0.25rem;
}

.cateros-qv__select {
	width: 100%;
	max-width: 460px;
}

.cateros-qv__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

/* Secondary navigation action, styled as an outline button beside the primary
   "Add to Selection" CTA.
   Two deliberate choices:
   1. --cateros-text / --cateros-border (FIXED neutrals) carry legibility, NOT
      --cateros-primary. Merchant primaries are chosen to sit BEHIND white button
      text, not to BE text on white — a bright brand orange like #ff9500 is only 2.20:1 on white
      and fails AA. --cateros-secondary is worse still (1.12:1): it is a
      background tint, and using it as a text colour was the original bug.
   2. The selector is .cateros-quick-view .cateros-qv__link (0,2,0) with :link and
      :visited stated explicitly, because themes ship bare `a:visited { color }`
      rules at 0,1,1 which would otherwise outrank a single-class selector and
      recolour the link once a customer had visited that product. */
.cateros-quick-view .cateros-qv__link,
.cateros-quick-view .cateros-qv__link:link,
.cateros-quick-view .cateros-qv__link:visited {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--cateros-text, #1f2937);
	background: transparent;
	border: 1px solid var(--cateros-border, #e5e7eb);
	border-radius: var(--cateros-radius, 6px);
	text-decoration: none;
}

.cateros-quick-view .cateros-qv__link:hover,
.cateros-quick-view .cateros-qv__link:focus-visible {
	color: var(--cateros-text, #1f2937);
	border-color: var(--cateros-primary, #2271B1);
}

.cateros-quick-view .cateros-qv__link:focus-visible {
	outline: 2px solid var(--cateros-primary, #2271B1);
	outline-offset: 2px;
}

.cateros-qv__note {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: #b45309;
}