/* ==========================================================================
   HomePezzo Vendor Product Page (VP2)
   Enqueued ONLY on a single gd_place page whose hp_listing_kind resolves to
   vendor_product — see includes/hp-vp2-enqueue.php. Never loaded on
   classifieds, archives, or any other page.

   Built directly on the canonical token vocabulary in hp-tokens.css
   (:root custom properties) and the section-accent variables in
   homepezzo-section-colors.css (.hp-section-* scopes, applied via
   homepezzo_get_listing_section_class() on the outer .hp-vp2 wrapper) —
   no new colors are introduced; every color below is a var() reference.
   ========================================================================== */

.hp-vp2 {
	max-width: var(--hp-max, 1200px);
	margin: 0 auto;
	padding: var(--hp-space-6, 32px) var(--hp-gutter, 24px) var(--hp-space-9, 96px);
	color: var(--hp-ink, #2B3038);
	font-family: var(--hp-font-sans);
	font-size: var(--hp-type-body-size, 16px);
	line-height: var(--hp-type-body-leading, 1.65);
}

.hp-vp2 * { box-sizing: border-box; }

/* -- Section badge -------------------------------------------------------- */
.hp-vp2-badge-row { margin-bottom: var(--hp-space-4, 16px); }
.hp-vp2-badge {
	display: inline-block;
	background: var(--hp-accent-badge, var(--hp-accent, #315E9E));
	color: var(--hp-accent-badge-ink, #FFFFFF);
	font-size: var(--hp-type-chip-size, 11px);
	font-weight: var(--hp-type-chip-weight, 700);
	letter-spacing: var(--hp-type-chip-tracking, 0.04em);
	text-transform: var(--hp-type-chip-transform, uppercase);
	padding: 6px 12px;
	border-radius: var(--hp-radius-pill, 999px);
}

/* -- Hero ------------------------------------------------------------------ */
.hp-vp2-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--hp-space-7, 48px);
	background: var(--hp-surface, #FFFFFF);
	border: 1px solid var(--hp-line, #E0DCD2);
	border-radius: var(--hp-radius-md, 4px);
	padding: var(--hp-space-6, 32px);
	margin-bottom: var(--hp-space-7, 48px);
}

.hp-vp2-hero__media { min-width: 0; }
.hp-vp2-hero__info { min-width: 0; }

/* -- Gallery ---------------------------------------------------------------
   Fixed-ratio stage prevents layout shift while the main image loads;
   object-fit:contain avoids stretching regardless of source aspect ratio. */
.hp-vp2-gallery__stage {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--hp-surface-sunken, #EDEAE3);
	border-radius: var(--hp-radius-md, 4px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hp-vp2-gallery__main {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.hp-vp2-gallery--empty {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--hp-surface-sunken, #EDEAE3);
	border-radius: var(--hp-radius-md, 4px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hp-vp2-gallery__empty-icon {
	font-size: 40px;
	color: var(--hp-line-strong, #CFC9BC);
}

.hp-vp2-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2, 8px);
	margin-top: var(--hp-space-3, 12px);
}

.hp-vp2-gallery__thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--hp-radius-sm, 2px);
	overflow: hidden;
	background: var(--hp-surface-sunken, #EDEAE3);
	cursor: pointer;
	flex-shrink: 0;
	/* Touch-sized target (brief requires touch-usable controls). */
	min-width: 44px;
	min-height: 44px;
}
.hp-vp2-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-vp2-gallery__thumb.is-active { border-color: var(--hp-accent, #315E9E); }
.hp-vp2-gallery__thumb:focus-visible {
	outline: 3px solid var(--hp-accent, #315E9E);
	outline-offset: 2px;
}

/* -- Title / meta / summary ------------------------------------------------ */
.hp-vp2-title {
	font-size: var(--hp-type-h1-size, 40px);
	font-weight: var(--hp-type-h1-weight, 700);
	line-height: var(--hp-type-h1-leading, 1.1);
	letter-spacing: var(--hp-type-h1-tracking, -0.015em);
	color: var(--hp-ink-strong, #14171C);
	margin: 0 0 var(--hp-space-3, 12px);
	overflow-wrap: break-word;
	word-break: break-word;
}

.hp-vp2-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hp-space-2, 8px);
	color: var(--hp-ink-muted, #565D69);
	font-size: var(--hp-type-small-size, 14px);
	margin-bottom: var(--hp-space-4, 16px);
}
.hp-vp2-meta__item { overflow-wrap: anywhere; }
.hp-vp2-meta__label {
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--hp-type-meta-size, 13px);
	letter-spacing: 0.04em;
	margin-right: 4px;
	color: var(--hp-ink-muted, #565D69);
}
.hp-vp2-meta__sep { color: var(--hp-line-strong, #CFC9BC); }

.hp-vp2-summary {
	color: var(--hp-ink, #2B3038);
	font-size: var(--hp-type-lede-size, 19px);
	line-height: var(--hp-type-lede-leading, 1.6);
	margin: 0 0 var(--hp-space-5, 24px);
}

/* -- Price / availability --------------------------------------------------- */
.hp-vp2-price {
	font-size: var(--hp-type-h2-size, 28px);
	font-weight: 700;
	color: var(--hp-ink-strong, #14171C);
	margin: 0 0 var(--hp-space-2, 8px);
	overflow-wrap: break-word;
}
.hp-vp2-price--contact {
	font-size: var(--hp-type-h3-size, 20px);
	color: var(--hp-ink, #2B3038);
}

.hp-vp2-availability {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: var(--hp-type-small-size, 14px);
	margin: 0 0 var(--hp-space-4, 16px);
}
.hp-vp2-availability__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--hp-ink-muted, #565D69);
	flex-shrink: 0;
}
.hp-vp2-availability--in-stock .hp-vp2-availability__dot { background: var(--hp-success-text, #146C43); }
.hp-vp2-availability--in-stock { color: var(--hp-success-text, #146C43); }
.hp-vp2-availability--out-of-stock .hp-vp2-availability__dot { background: var(--hp-danger-text, #B42318); }
.hp-vp2-availability--out-of-stock { color: var(--hp-danger-text, #B42318); }
.hp-vp2-availability--made-to-order .hp-vp2-availability__dot,
.hp-vp2-availability--pre-order .hp-vp2-availability__dot { background: var(--hp-info-text, #2A5086); }
.hp-vp2-availability--made-to-order,
.hp-vp2-availability--pre-order { color: var(--hp-info-text, #2A5086); }

.hp-vp2-vendor-line {
	font-size: var(--hp-type-small-size, 14px);
	color: var(--hp-ink-muted, #565D69);
	margin: 0 0 var(--hp-space-5, 24px);
	overflow-wrap: break-word;
}
.hp-vp2-vendor-line a { color: var(--hp-accent-text, var(--hp-accent, #315E9E)); font-weight: 600; text-decoration: none; }
.hp-vp2-vendor-line a:hover { text-decoration: underline; }

/* -- CTAs -------------------------------------------------------------------
   HomePezzo is not the seller: primary CTA always routes to the vendor
   (external link, or a mailto: contact/quote action) — never a cart/checkout
   affordance. See includes/hp-vp2-product-page.php for the destination rules. */
.hp-vp2-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-3, 12px);
	margin-top: var(--hp-space-2, 8px);
}

.hp-vp2-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 24px;
	border-radius: var(--hp-radius-sm, 2px);
	font-size: var(--hp-type-button-size, 15px);
	font-weight: var(--hp-type-button-weight, 600);
	text-decoration: none;
	text-align: center;
	border: 2px solid transparent;
	min-height: 44px;
	overflow-wrap: break-word;
}
.hp-vp2-cta--primary {
	background: var(--hp-accent-solid, var(--hp-accent, #315E9E));
	color: #FFFFFF;
	border-color: var(--hp-accent-solid, var(--hp-accent, #315E9E));
}
.hp-vp2-cta--primary:hover { filter: brightness(0.92); }
.hp-vp2-cta--secondary {
	background: transparent;
	color: var(--hp-accent-text, var(--hp-accent, #315E9E));
	border-color: var(--hp-accent, #315E9E);
}
.hp-vp2-cta--secondary:hover { background: var(--hp-surface-sunken, #EDEAE3); }
.hp-vp2-cta:focus-visible { outline: 3px solid var(--hp-accent, #315E9E); outline-offset: 2px; }
.hp-vp2-cta__ext { font-size: 0.85em; }

/* -- Anchor nav --------------------------------------------------------------- */
.hp-vp2-anchor-nav {
	display: flex;
	gap: var(--hp-space-5, 24px);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--hp-line, #E0DCD2);
	margin-bottom: var(--hp-space-6, 32px);
	padding-bottom: var(--hp-space-2, 8px);
}
.hp-vp2-anchor-nav a {
	color: var(--hp-ink-muted, #565D69);
	font-weight: 600;
	font-size: var(--hp-type-small-size, 14px);
	text-decoration: none;
	white-space: nowrap;
	padding: 4px 2px;
}
.hp-vp2-anchor-nav a:hover,
.hp-vp2-anchor-nav a:focus-visible { color: var(--hp-accent-text, var(--hp-accent, #315E9E)); }

/* -- Generic content sections ------------------------------------------------- */
.hp-vp2-section {
	padding-top: var(--hp-space-7, 48px);
	border-top: 1px solid var(--hp-line, #E0DCD2);
	margin-top: var(--hp-space-7, 48px);
	scroll-margin-top: 90px; /* keeps the anchor target clear of a fixed header */
}
.hp-vp2-hero + .hp-vp2-anchor-nav + .hp-vp2-section:first-of-type,
.hp-vp2-hero + .hp-vp2-section:first-of-type {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

.hp-vp2-section__heading {
	font-size: var(--hp-type-h2-size, 28px);
	font-weight: var(--hp-type-h2-weight, 700);
	color: var(--hp-ink-strong, #14171C);
	margin: 0 0 var(--hp-space-4, 16px);
}

.hp-vp2-prose { max-width: var(--hp-measure, 740px); }
.hp-vp2-prose p { margin: 0 0 var(--hp-space-4, 16px); }
.hp-vp2-prose ul, .hp-vp2-prose ol { margin: 0 0 var(--hp-space-4, 16px); padding-left: 1.4em; }
.hp-vp2-prose a { color: var(--hp-accent-text, var(--hp-accent, #315E9E)); }

/* -- Specifications ------------------------------------------------------------ */
.hp-vp2-spec-group__heading {
	font-size: var(--hp-type-h3-size, 20px);
	font-weight: 700;
	color: var(--hp-ink-strong, #14171C);
	margin: var(--hp-space-5, 24px) 0 var(--hp-space-2, 8px);
}
.hp-vp2-spec-group__heading:first-of-type { margin-top: 0; }

.hp-vp2-spec-table { margin: 0 0 var(--hp-space-4, 16px); }
.hp-vp2-spec-row {
	display: grid;
	grid-template-columns: minmax(140px, 240px) 1fr;
	gap: var(--hp-space-4, 16px);
	padding: var(--hp-space-3, 12px) var(--hp-space-4, 16px);
	border-bottom: 1px solid var(--hp-line, #E0DCD2);
}
.hp-vp2-spec-row:nth-child(odd) { background: var(--hp-surface-warm, #FAF7F1); }
.hp-vp2-spec-row__label {
	font-weight: 700;
	font-size: var(--hp-type-meta-size, 13px);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hp-ink-muted, #565D69);
	overflow-wrap: break-word;
}
.hp-vp2-spec-row__value { color: var(--hp-ink, #2B3038); overflow-wrap: break-word; word-break: break-word; }
.hp-vp2-spec-row__unit { color: var(--hp-ink-muted, #565D69); }

/* -- Documents --------------------------------------------------------------- */
.hp-vp2-documents { list-style: none; margin: 0; padding: 0; }
.hp-vp2-document {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp-space-3, 12px);
	padding: var(--hp-space-4, 16px);
	border: 1px solid var(--hp-line, #E0DCD2);
	border-radius: var(--hp-radius-md, 4px);
	margin-bottom: var(--hp-space-3, 12px);
}
.hp-vp2-document__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: inherit;
	text-decoration: none;
	min-width: 0;
	flex: 1 1 auto;
}
.hp-vp2-document__label {
	font-weight: 700;
	color: var(--hp-ink-strong, #14171C);
	overflow-wrap: break-word;
	word-break: break-word;
}
.hp-vp2-document__action {
	color: var(--hp-accent-text, var(--hp-accent, #315E9E));
	font-size: var(--hp-type-small-size, 14px);
	font-weight: 600;
}
.hp-vp2-document__link:hover .hp-vp2-document__action { text-decoration: underline; }
.hp-vp2-document__type {
	font-size: var(--hp-type-meta-size, 13px);
	color: var(--hp-ink-muted, #565D69);
	white-space: nowrap;
	flex-shrink: 0;
}

/* -- Warranty ------------------------------------------------------------------ */
.hp-vp2-warranty { max-width: var(--hp-measure, 740px); margin: 0 0 var(--hp-space-2, 8px); }
.hp-vp2-warranty__note {
	font-size: var(--hp-type-meta-size, 13px);
	color: var(--hp-ink-muted, #565D69);
	font-style: italic;
	margin: 0;
}

/* -- Installation Guides (VP5) ---------------------------------------------------- */
/* Cards reuse the site-wide .hp-card-* recipe (homepezzo-section-colors.css)
   rather than a bespoke system — only grid/link rules are new here.
   The card shell is a plain <div>, NOT an <a>: the publisher line can itself
   contain a vendor-profile link, and a nested <a> inside another <a> is
   invalid HTML that browsers silently split apart. The title and the CTA
   are each their own real link instead of one card-wide anchor. */
.hp-vp2-guides-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hp-space-5, 24px);
}
.hp-vp2-guide-card {
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hp-vp2-guide-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}
.hp-vp2-guide-card__title-link {
	color: var(--hp-ink-strong, #14171C);
	text-decoration: none;
}
.hp-vp2-guide-card__title-link:hover,
.hp-vp2-guide-card__title-link:focus-visible { text-decoration: underline; }
.hp-vp2-guide-card__publisher { margin-bottom: 8px; }
.hp-vp2-guide-card__publisher a { color: var(--hp-accent-text, var(--hp-accent, #315E9E)); }
.hp-vp2-guide-card__summary {
	font-size: var(--hp-type-small-size, 14px);
	line-height: 1.5;
	color: var(--hp-ink-muted, #565D69);
	margin: 0 0 12px;
}
.hp-vp2-guide-card .hp-card-cta { text-decoration: none; }

/* -- Vendor identity panel ------------------------------------------------------- */
.hp-vp2-vendor-panel { background: var(--hp-surface-warm, #FAF7F1); border-radius: var(--hp-radius-md, 4px); padding: var(--hp-space-6, 32px); border-top: none !important; }
.hp-vp2-vendor-panel__body { display: flex; gap: var(--hp-space-5, 24px); align-items: flex-start; flex-wrap: wrap; }
.hp-vp2-vendor-panel__logo img { max-width: 96px; max-height: 96px; object-fit: contain; border-radius: var(--hp-radius-sm, 2px); }
.hp-vp2-vendor-panel__info { flex: 1 1 260px; min-width: 0; }
.hp-vp2-vendor-panel__name { font-size: var(--hp-type-h3-size, 20px); font-weight: 700; margin: 0 0 var(--hp-space-3, 12px); overflow-wrap: break-word; }
.hp-vp2-vendor-panel__name a { color: var(--hp-ink-strong, #14171C); text-decoration: none; }
.hp-vp2-vendor-panel__name a:hover { color: var(--hp-accent-text, var(--hp-accent, #315E9E)); }

.hp-vp2-vendor-details { margin: 0 0 var(--hp-space-4, 16px); }
.hp-vp2-vendor-details__row { display: flex; gap: 8px; margin-bottom: var(--hp-space-2, 8px); font-size: var(--hp-type-small-size, 14px); flex-wrap: wrap; }
.hp-vp2-vendor-details__row dt { font-weight: 700; color: var(--hp-ink-muted, #565D69); min-width: 90px; }
.hp-vp2-vendor-details__row dd { margin: 0; overflow-wrap: anywhere; }
.hp-vp2-vendor-details__row a { color: var(--hp-accent-text, var(--hp-accent, #315E9E)); }

/* ==========================================================================
   RESPONSIVE — breakpoint vocabulary per hp-tokens.css §10
   ========================================================================== */

/* Tablet portrait and below: stack the hero, media first (source order
   already puts media first, so no reordering is needed — see the brief's
   "preserve logical reading order without relying on CSS rearrangement"). */
@media (max-width: 991px) {
	.hp-vp2-hero {
		grid-template-columns: 1fr;
		gap: var(--hp-space-5, 24px);
		padding: var(--hp-space-5, 24px);
	}
	.hp-vp2-guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.hp-vp2 { padding: var(--hp-space-5, 24px) var(--hp-gutter-sm, 16px) var(--hp-space-8, 64px); }
	.hp-vp2-title { font-size: 30px; }
	.hp-vp2-price { font-size: 22px; }
	.hp-vp2-cta { width: 100%; }
	.hp-vp2-cta-row { flex-direction: column; }
	.hp-vp2-spec-row { grid-template-columns: 1fr; gap: 2px; }
	.hp-vp2-spec-row__label { font-size: 12px; }
	.hp-vp2-vendor-panel__body { flex-direction: column; align-items: center; text-align: left; }
	.hp-vp2-guides-grid { grid-template-columns: 1fr; }
}

@media (max-width: 478px) {
	.hp-vp2-hero { padding: var(--hp-space-4, 16px); }
	.hp-vp2-gallery__thumb { width: 56px; height: 56px; }
}

/* Reduced motion: the only motion this page has is a hover filter/underline,
   already instant-by-default; this rule exists so any future transition
   addition is safe without a follow-up audit. */
@media (prefers-reduced-motion: reduce) {
	.hp-vp2 * { transition: none !important; scroll-behavior: auto !important; }
}