/* ==========================================================================
   Pink Vial Co. — Storefront (homepage) stylesheet
   Only enqueued on the page containing [pink_vial_storefront].
   ========================================================================== */

.pvc-site { background: var(--pvc-ivory); color: var(--pvc-ink); font-family: var(--pvc-sans); }
.pvc-site h1, .pvc-site h2, .pvc-site h3, .pvc-site h4 { color: var(--pvc-burgundy); }
.pvc-site a:not(.pvc-btn) { color: var(--pvc-burgundy); }

/* The Page template renders its own post title (e.g. "The Pink Vial
   Co.") plus generous top spacing above wherever the page's actual
   content starts — normal and fine for an ordinary page, but on this
   storefront it just leaves a large blank gap above the hero since the
   video/hero already carries its own heading. Two separate wrapper
   layers contribute to that gap (confirmed via HTML export): an inner
   group using `padding-top`, and an outer <main> wrapper using
   `margin-top` instead — both needed zeroing, not just one. :has() lets
   this be scoped precisely to the group(s) wrapping .pvc-site, rather
   than hiding the title/spacing globally on every page. */
.wp-block-group.has-global-padding:has(.pvc-site) {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.wp-block-group:has(.pvc-site) > .wp-block-post-title {
	display: none;
}

.pvc-hero--video { position: relative; min-height: 640px; overflow: hidden; display: block; background: #1a1418; }
.pvc-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pvc-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(15, 10, 13, 0.72) 0%, rgba(15, 10, 13, 0.4) 42%, rgba(15, 10, 13, 0.05) 70%);
	z-index: 1;
}
.pvc-hero-content {
	position: relative;
	z-index: 2;
	max-width: 560px;
	padding: 110px 0;
	/* .pvc-wrap (shared base class) centers itself with margin:auto — that's
	   right for normal sections, but here it was centering this now-narrower
	   560px box within the full-bleed hero, making the text look centered
	   instead of left-aligned. This pins it to the same left inset a
	   centered 1180px .pvc-wrap would have, without also centering the
	   smaller box within that space. */
	margin-left: max(24px, calc((100% - 1180px) / 2));
	margin-right: auto;
}
.pvc-hero-content .pvc-eyebrow { color: #f2c9d1; }
.pvc-hero--video .pvc-hero-content h1 { font: 400 clamp(40px, 6vw, 72px) var(--pvc-serif); line-height: 1.03; margin: 14px 0 16px; color: #fff; }
.pvc-hero-content p { color: rgba(255, 255, 255, 0.86); font-size: 14px; line-height: 1.8; max-width: 460px; margin: 0 0 26px; }

.pvc-btn { display: inline-block; padding: 15px 22px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; border-radius: var(--pvc-radius); }
.pvc-btn-dark { background: var(--pvc-burgundy); color: #fff; }
.pvc-btn-dark:hover, .pvc-btn-dark:focus-visible { background: var(--pvc-ink); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	/* Video stays visible (still shows the poster frame / paused imagery
	   via JS below) — only the autoplay motion is suppressed, not the
	   photography itself. */
}

.pvc-ribbon { padding: 13px; text-align: center; background: var(--pvc-burgundy); color: #fff; font-size: 9px; letter-spacing: 0.16em; }

/* -------------------------------------------------------------------------
 * Announcement bar — merchant-editable via WooCommerce → PVC Setup.
 * Only rendered at all when the merchant has entered text; see
 * class-pvc-storefront.php::render_announcement_bar().
 * ------------------------------------------------------------------------- */
.pvc-announcement-bar {
	display: block;
	padding: 11px 20px;
	text-align: center;
	background: var(--pvc-ink);
	color: #fff;
	font: 600 11px/1.4 var(--pvc-sans);
	letter-spacing: 0.04em;
	text-decoration: none;
}
a.pvc-announcement-bar:hover, a.pvc-announcement-bar:focus-visible { background: var(--pvc-burgundy); }

/* -------------------------------------------------------------------------
 * Trust badge strip — same three assurance messages as the product page,
 * for brand consistency.
 * ------------------------------------------------------------------------- */
.pvc-trust-strip { background: #fff; border-bottom: 1px solid var(--pvc-line); }
.pvc-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px 0; }
.pvc-trust-grid > div { text-align: center; padding: 0 16px; border-right: 1px solid var(--pvc-line); }
.pvc-trust-grid > div:last-child { border-right: 0; }
.pvc-trust-grid strong { display: block; color: var(--pvc-burgundy); font: 600 11px/1.3 var(--pvc-sans); text-transform: uppercase; letter-spacing: 0.08em; }
.pvc-trust-grid span { display: block; margin-top: 5px; color: #77717a; font: 11px/1.5 var(--pvc-sans); }

.pvc-section { padding: 90px 0; }
.pvc-section h2 { font: 400 clamp(40px, 5vw, 68px) var(--pvc-serif); line-height: 0.95; margin: 16px 0; }

/* -------------------------------------------------------------------------
 * Featured-products carousel. Cards are WooCommerce's own default
 * product-loop markup (wc_get_template_part('content','product')), so
 * only the card chrome is styled here — not the internal
 * title/price/button structure, which stays theme-standard.
 * ------------------------------------------------------------------------- */
.pvc-carousel { position: relative; margin-top: 28px; }
/* The actual flex container needs to be the <ul class="products"> that
   woocommerce_product_loop_start() outputs *inside* .pvc-carousel-track
   — not .pvc-carousel-track itself. That div only ever has this one <ul>
   as its direct child, so flexing the div did nothing useful; the real
   layout was coming from WooCommerce's own "columns-4" grid/column CSS
   on the <ul>, one level deeper than the previous rule targeted.
   Confirmed directly via DevTools before this fix, not guessed. */
.pvc-carousel-track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
}
.pvc-carousel-track > ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 20px;
	list-style: none;
	margin: 0 !important;
	padding-left: 0 !important; /* overrides WooCommerce's default ul.products padding */
	width: max-content; /* prevents the row from shrinking to fit the visible viewport, which would force wrapping instead of horizontal scroll */
}
.pvc-carousel-track li.product {
	list-style: none;
	flex: 0 0 260px !important;
	width: 260px !important; /* overrides WooCommerce's default li.product width:X% grid-column sizing */
	float: none !important;  /* overrides WooCommerce's default li.product float for older grid layouts */
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--pvc-line);
	padding: 16px;
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pvc-carousel-track li.product:hover { box-shadow: 0 16px 32px rgba(62, 44, 48, 0.08); transform: translateY(-2px); }
.pvc-carousel-track li.product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 12px; }
.pvc-carousel-track li.product .woocommerce-loop-product__title { font: 500 15px/1.3 var(--pvc-serif); color: var(--pvc-ink); margin: 0 0 6px; }
.pvc-carousel-track li.product .price { font: 500 14px/1 var(--pvc-sans); color: var(--pvc-burgundy); }
.pvc-carousel-track li.product .price del { color: #999; font-size: 12px; }
.pvc-carousel-track li.product a.button {
	/* Pinned to the bottom of the card via margin-top:auto (the card is a
	   flex column) so Add to Cart / Select Options lines up at the same
	   height across every card regardless of how many lines the title or
	   price above it wraps to. */
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	background: var(--pvc-ink); color: #fff;
	border-radius: var(--pvc-radius);
	font: 600 9px/1 var(--pvc-sans); letter-spacing: 0.1em; text-transform: uppercase;
	padding: 9px 14px; text-decoration: none;
}
.pvc-carousel-track li.product a.button:hover { background: var(--pvc-burgundy); }
.pvc-carousel .pvc-sale-badge, .pvc-carousel-track li.product span.onsale {
	position: absolute; top: 12px; left: 12px;
	background: hotpink; color: #fff;
	font: 700 10px/1 var(--pvc-sans); letter-spacing: 0.03em;
	padding: 5px 8px; border-radius: var(--pvc-radius);
}

.pvc-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--pvc-line);
	background: #fff;
	color: var(--pvc-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: grid;
	place-items: center;
}
.pvc-carousel-arrow:hover { border-color: var(--pvc-burgundy); color: var(--pvc-burgundy); }
.pvc-carousel-arrow:focus-visible { outline: 2px solid var(--pvc-ink); outline-offset: 2px; }
.pvc-carousel-arrow--prev { left: -20px; }
.pvc-carousel-arrow--next { right: -20px; }
/* No arrows needed (or room for them) once the carousel wraps to a single
   column on narrow screens — everything's visible without scrolling. */
@media (max-width: 640px) { .pvc-carousel-arrow { display: none; } }

@media (max-width: 860px) {
	.pvc-hero--video { min-height: 520px; }
	.pvc-hero-content { padding: 70px 0; max-width: 100%; }
	.pvc-hero-scrim { background: linear-gradient(180deg, rgba(15, 10, 13, 0.35) 0%, rgba(15, 10, 13, 0.75) 75%); }
	.pvc-trust-grid { grid-template-columns: 1fr; gap: 12px; }
	.pvc-trust-grid > div { border-right: 0; border-bottom: 1px solid var(--pvc-line); padding-bottom: 12px; }
	.pvc-trust-grid > div:last-child { border-bottom: 0; }
}