/* assets/home-v2.css — homepage v2 layout (inc/homepage-v2.php), modeled on
   ultra.md's structure (persistent category sidebar + hero + promo cards,
   then a large category tile grid up front) but built entirely from this
   theme's own navy/coral design tokens (style.css :root) — no new colors,
   radii or shadows are defined here. Loaded only on the front page when v2
   is the active homepage version (functions.php). .phv2- prefix keeps this
   fully separate from v1's .ph- component CSS in style.css. */

/* ---------- Hero row: sidebar + carousel + promo cards ---------- */
.phv2-herorow {
	/* Full-bleed, same 100vw technique as .ph-bleed (style.css) — was
	   capped at max-width:1280px inside Astra's own (wider) content column,
	   so the hero/promo row read visibly narrower than the full-bleed brand
	   strip and category grid sections right below it. max-width here is a
	   ceiling for ultra-wide monitors, not the everyday width — on common
	   1440-1920px screens this now renders edge-to-edge (minus padding). */
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 1600px;
	margin: 0.5rem 0 var(--pl-section-gap-lg);
	padding: 0 1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
/* Same fix v1's .ph-herorow needs — .printerland-hero-wrap carries its own
   max-width/margin/padding for standalone use, which double-applies once
   nested inside a grid column that already provides that spacing. */
.phv2-herorow .printerland-hero-wrap { max-width: none; margin: 0; padding: 0; }
@media (min-width: 1024px) {
	/* Was 3 columns (sidebar + hero + a 280px promo-card side column) — the
	   2 promo cards moved into their own strip below (.phv2-promo-strip),
	   so the hero now claims that freed width instead of sharing it. */
	.phv2-herorow { grid-template-columns: 240px minmax(0, 1fr); align-items: stretch; }
	/* Grid stretch already makes .phv2-herorow-main as tall as the sidebar
	   (its content-driven height, the tallest of the 3 columns) — but the
	   carousel itself kept sizing off its own aspect-ratio inside that box,
	   leaving empty space below it while the 2 promo cards on the other
	   side filled their column exactly. height:100% down the chain (slide
	   images already use object-fit:cover, see .ph-slide-img in style.css)
	   makes the carousel fill the same height the row already allocated it,
	   so all 3 columns read as one consistent row instead of 2 matching
	   banners plus a shorter one with a gap underneath. */
	.phv2-herorow-main,
	.phv2-herorow-main .printerland-hero-wrap,
	.phv2-herorow-main .printerland-hero-carousel {
		height: 100%;
	}
	.phv2-herorow-main .printerland-hero-carousel { aspect-ratio: auto; }

	/* Subcategory flyout (assets/home-v2.js) — ultra.md's sidebar opens a
	   panel like this on hover, overlaying the hero/promo columns rather
	   than pushing the page down. Only relevant at this breakpoint; the
	   sidebar itself (and the JS that opens this) is desktop-only. Content
	   markup reuses .ph-mega-menu-subcats/-subcat-pill/-subcat-img
	   (style.css) as-is — same subcategory list styling as the header
	   Catalog dropdown, not a second implementation to keep in sync. */
	.phv2-flyout {
		position: absolute;
		top: 0;
		bottom: 0;
		/* left/width are set inline by assets/home-v2.js from the sidebar's
		   actual measured rect when it opens, not fixed here — .phv2-herorow
		   is now a full-bleed, viewport-relative width (see above), so a
		   hand-derived CSS calc() offset would drift out of sync with it. */
		background: var(--pl-white-gradient);
		border-radius: var(--pl-radius-card);
		box-shadow: var(--pl-shadow-card-lg);
		padding: 1.5rem;
		overflow-y: auto;
		z-index: 20;
	}
	.phv2-flyout[hidden] { display: none; }
	.phv2-sidebar-item.is-active { background: rgba(var(--pl-navy-rgb), 0.06); color: var(--pl-navy) !important; }
}

/* Persistent category sidebar — desktop only. A fourth stacked column below
   the carousel would read as an odd afterthought on mobile/tablet, and the
   same categories are already one tap away via the Catalog dropdown and the
   category grid further down this page. */
.phv2-sidebar {
	display: none;
	background: var(--pl-white-gradient);
	border-radius: var(--pl-radius-card);
	box-shadow: var(--pl-shadow-card);
	padding: 0.75rem 0.5rem;
	flex-direction: column;
}
@media (min-width: 1024px) {
	.phv2-sidebar { display: flex; }
}
/* Refined from a flat 2px accent rule under the label to a small gradient
   chip echoing the same navy-gradient treatment already used on badges/
   buttons site-wide — a plain colored underline under a text label reads
   as a leftover default, a matching chip reads as designed. */
.phv2-sidebar-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pl-navy);
	padding: 0.5rem 0.75rem 0.85rem;
	margin-bottom: 0.4rem;
	border-bottom: 1px solid var(--pl-gray-100);
}
.phv2-sidebar-title::before {
	content: "";
	display: block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 4px;
	background: var(--pl-navy-gradient);
	box-shadow: var(--pl-shadow-chip);
}
.phv2-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	overflow-y: auto;
}
.phv2-sidebar-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.75rem 0.65rem 1rem;
	border-radius: var(--pl-radius-sm);
	color: var(--pl-navy);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
/* Sliding accent bar (was a flat background tint alone, same treatment on
   both hover and active so a visitor couldn't tell "I'm hovering this" from
   "this is the open category") — a left accent bar that grows in on hover
   and stays solid on the active item is the standard, legible way to
   distinguish the two states in a sidebar nav. */
.phv2-sidebar-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	bottom: 0.35rem;
	width: 3px;
	border-radius: 9999px;
	background: var(--pl-accent-gradient);
	transform: scaleY(0);
	transition: transform 0.15s ease;
}
/* Astra's global a:hover rule sets an accent/orange text color — without an
   explicit override here it bled through on this plain <a>, same collision
   class already fixed on the search submit/lang-switcher/wishlist buttons
   (see style.css). Force it back to the navy this component was designed
   with instead of relying on the default. */
.phv2-sidebar-item:hover {
	background: rgba(var(--pl-navy-rgb), 0.06);
	color: var(--pl-navy) !important;
	transform: translateX(2px);
}
.phv2-sidebar-item:hover::before,
.phv2-sidebar-item.is-active::before {
	transform: scaleY(1);
}
.phv2-sidebar-item.is-active {
	background: rgba(var(--pl-navy-rgb), 0.06);
}
.phv2-sidebar-item:hover .phv2-sidebar-chevron {
	color: var(--pl-navy);
}
/* Tinted circle chip — matches the icon treatment already used on the
   promo cards/contact card; bare stroke icons directly on the white
   sidebar background read flat next to those. Gradient (was a flat flat
   tint) for the same reason the title chip above got one — a solid navy
   fill on hover/active read a little heavy next to the rest of the site's
   gradient-badge language. */
.phv2-sidebar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 9999px;
	background: rgba(var(--pl-navy-rgb), 0.08);
	color: var(--pl-navy);
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.phv2-sidebar-icon .ph-svg-icon { width: 16px; height: 16px; }
.phv2-sidebar-item:hover .phv2-sidebar-icon,
.phv2-sidebar-item.is-active .phv2-sidebar-icon {
	background: var(--pl-navy-gradient);
	box-shadow: var(--pl-shadow-chip);
	color: #fff;
}
.phv2-sidebar-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.phv2-sidebar-chevron { color: var(--pl-gray-600); display: flex; flex-shrink: 0; }
.phv2-sidebar-chevron .ph-svg-icon { width: 14px; height: 14px; }

/* Promo cards — finance/installments (informational) + live sale card
   (real numbers, same data source as v1's promo banner). Was a 2-row
   sidebar column next to the hero (.phv2-herorow-side) — now a slim
   horizontal strip right below it, same max-width/centering as the rest
   of the homepage's contained sections so it lines up with the hero
   above and the category grid below instead of full-bleeding. */
.phv2-promo-strip {
	max-width: 1280px;
	margin: 0 auto var(--pl-section-gap-lg);
	padding: 0 1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px) {
	.phv2-promo-strip { grid-template-columns: 1fr 1fr; }
}
.phv2-promo-card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	border-radius: var(--pl-radius-card);
	padding: 1.1rem 1.25rem;
	min-height: 0;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.2s ease;
}
.phv2-promo-card:hover { transform: translateY(-2px); }
.phv2-promo-card-finance {
	background: var(--pl-gray-100);
	border: 1px solid rgba(var(--pl-navy-rgb), 0.1);
}
.phv2-promo-card-sale {
	background: var(--pl-navy-sheen);
	box-shadow: var(--pl-shadow-card-lg);
}
.phv2-promo-card-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	margin-bottom: 0.15rem;
}
.phv2-promo-card-finance .phv2-promo-card-icon { background: rgba(var(--pl-navy-rgb), 0.08); color: var(--pl-navy); }
.phv2-promo-card-sale .phv2-promo-card-icon { background: rgb(255 255 255 / 0.15); color: #fff; }
.phv2-promo-card-icon .ph-svg-icon { width: 18px; height: 18px; }
.phv2-promo-card-title { font-weight: 800; font-size: 1rem; }
.phv2-promo-card-finance .phv2-promo-card-title { color: var(--pl-navy); }
.phv2-promo-card-sale .phv2-promo-card-title { color: #fff; }
.phv2-promo-card-sub { font-size: 0.78rem; }
.phv2-promo-card-finance .phv2-promo-card-sub { color: var(--pl-gray-600); }
.phv2-promo-card-sale .phv2-promo-card-sub { color: rgb(255 255 255 / 0.75); }
.phv2-promo-card-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.phv2-promo-card-cta {
	/* Was a column layout (margin-top spacing below title/sub) — the card
	   is a horizontal strip row now, so the CTA pins to the row's right
	   edge instead of stacking below. */
	margin-left: auto;
	align-self: center;
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 9999px;
	padding: 0.4rem 0.9rem;
	white-space: nowrap;
}
.phv2-promo-card-finance .phv2-promo-card-cta { background: var(--pl-navy-gradient); box-shadow: var(--pl-shadow-chip); color: #fff; }
.phv2-promo-card-sale .phv2-promo-card-cta { background: var(--pl-accent-gradient); box-shadow: var(--pl-shadow-chip); color: #fff; }

/* ---------- Brand pills ---------- */
/* -gap-lg, not the plain -gap — every other full-bleed-band-to-content
   transition on this page (category grid -> deal band, deal band ->
   product rows, etc.) uses the larger gap; this one was the one outlier
   still on the smaller value, measured live as a visibly tighter 40px
   next to the 64px used everywhere else. */
/* Redesigned as a deliberate closing section (moved to the very bottom of
   the homepage, was a thin strip right after the hero competing with it
   for attention) — a real heading, generous whitespace, and a classic
   "trust bar" treatment: logos sit muted/grayscale until hovered, which
   reads as more premium than the previous bordered-card-per-logo grid and
   doesn't visually compete with the product cards above it. */
.phv2-brands-section {
	max-width: 1280px;
	margin: 0 auto var(--pl-section-gap-lg);
	padding: var(--pl-section-gap-lg) 1rem 0;
	border-top: 1px solid var(--pl-gray-100);
	text-align: center;
}
.phv2-brands-title {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--pl-gray-600);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 2.5rem;
}
.phv2-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 3rem;
	justify-content: center;
	align-items: center;
}
.phv2-brand-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.phv2-brand-pill:hover {
	transform: translateY(-2px);
}
/* Muted-until-hover trust-bar treatment scoped to the logo image only —
   applying it via opacity/filter on the parent .phv2-brand-pill instead
   also dimmed the text fallback below WCAG's 4.5:1 floor, and a child's
   own opacity:1 can't undo a parent's reduced opacity (opacity composites
   the whole subtree as one layer, it isn't an inheritable/overridable
   property like color) — confirmed live via computed style. */
.phv2-brand-pill img {
	max-width: 100px;
	max-height: 34px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.phv2-brand-pill:hover img {
	filter: grayscale(0);
	opacity: 1;
}
.phv2-brand-pill-text { font-weight: 700; color: var(--pl-navy); font-size: 1rem; letter-spacing: -0.01em; }

/* ---------- Category tile grid — the dominant homepage feature ---------- */
/* Full-bleed gray band, matching the brand-strip/deal-band alternating
   rhythm — was a plain white div, blending directly into the white page
   background above (brand strip) and below (first product row) with no
   visual separation at all (reported/confirmed live). Same 100vw
   technique as .phv2-herorow. */
.phv2-catgrid-wrap {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 1600px;
	/* Was a navy-tinted gradient here — that background had been coded but
	   was actually invisible for its whole existence (an unrelated invalid-
	   CSS bug elsewhere silently dropped it, fixed 2026-08 as part of a
	   sitewide rgb()->rgba() pass), so nobody had ever actually seen it
	   rendered until that fix made it appear for the first time. Reported
	   live right after: doesn't want the tint, wants plain white — this is
	   that explicit revert, not a bug. */
	background: transparent;
	margin: 0 0 var(--pl-section-gap-lg);
	padding: 2.5rem 1rem;
}
.phv2-catgrid-title {
	max-width: 1280px;
	margin: 0 auto 1.25rem;
	color: var(--pl-navy);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: center;
}
/* Flexbox, not grid — with 8 real categories, a fixed grid-template-
   columns leaves the last row's leftover cells empty (e.g. 6-col grid,
   row 2 has only 2 tiles, 4 empty slots beside them — reported live).
   Flex-wrap + justify-content:center centers whatever's in the last row
   instead, same tile sizing per breakpoint via flex-basis. */
.phv2-catgrid {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
.phv2-catgrid > .phv2-cattile { flex: 0 0 calc((100% - 1rem) / 2); }
@media (min-width: 640px) {
	.phv2-catgrid > .phv2-cattile { flex-basis: calc((100% - 2rem) / 3); }
}
@media (min-width: 1024px) {
	/* 4 columns at every desktop width, not 6 above 1280px — with 8 real
	   categories, 4 columns divides evenly into 2 full rows (6 left an
	   orphan row of 2, reported live as looking unfinished). Bonus: larger
	   tiles at wide desktop instead of shrinking further at 6-up. */
	.phv2-catgrid > .phv2-cattile { flex-basis: calc((100% - 3rem) / 4); }
}
.phv2-cattile {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Solid white, not the gray-tinted --pl-white-gradient — against this
	   section's now-tinted panel bg, the gradient's gray-100 corner read as
	   a dirty/gray card instead of a crisp surface (reported live). */
	background: #fff;
	box-shadow: var(--pl-shadow-card);
	border-radius: var(--pl-radius-card);
	padding: 1.25rem 1rem 1rem;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}
.phv2-cattile:hover { box-shadow: var(--pl-shadow-card-lg); }
.phv2-cattile-arrow {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: var(--pl-gray-100);
	color: var(--pl-navy);
}
.phv2-cattile-arrow .ph-svg-icon { width: 14px; height: 14px; }
.phv2-cattile-img {
	width: 100%;
	aspect-ratio: 1;
	max-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.75rem;
	color: var(--pl-navy);
	/* Was a separate white well behind each photo — with the card itself
	   now solid white, that just created a visible seam where the photo's
	   own white background met a very slightly different container white
	   (reported live as a "gray" box). Transparent lets photos sit
	   directly on the card. */
	background: transparent;
	border-radius: var(--pl-radius-sm);
}
.phv2-cattile-img img { max-width: 78%; max-height: 78%; object-fit: contain; }
.phv2-cattile-name {
	font-weight: 700;
	color: var(--pl-navy);
	font-size: 0.95rem;
	line-height: 1.3;
	padding-right: 1.5rem; /* clears the corner arrow on narrow tiles */
}
.phv2-cattile-count { font-size: 0.8rem; color: var(--pl-gray-600); margin-top: 0.2rem; }

/* ---------- SEO text + contact card + static map link ---------- */
.phv2-seo-bleed { background: var(--pl-gray-100); margin: var(--pl-section-gap-lg) 0 0; }
.phv2-seo-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
@media (min-width: 900px) {
	.phv2-seo-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}
.phv2-contact-card {
	background: var(--pl-white-gradient);
	border-radius: var(--pl-radius-card);
	box-shadow: var(--pl-shadow-card);
	padding: 1.5rem;
}
.phv2-contact-card h3 {
	margin: 0 0 1rem;
	color: var(--pl-navy);
	font-size: 1.1rem;
	font-weight: 700;
}
.phv2-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--pl-gray-100);
}
.phv2-contact-row:last-of-type { border-bottom: none; }
.phv2-contact-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: rgba(var(--pl-navy-rgb), 0.08);
	color: var(--pl-navy);
}
.phv2-contact-icon .ph-svg-icon { width: 16px; height: 16px; }
.phv2-contact-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pl-gray-600);
}
.phv2-contact-value { display: block; color: var(--pl-navy); font-size: 0.9rem; font-weight: 600; line-height: 1.5; }
.phv2-contact-value a { color: inherit; text-decoration: none; }
.phv2-contact-map {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: var(--pl-radius-card);
	background: var(--pl-navy-gradient);
	box-shadow: var(--pl-shadow-chip);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.85rem;
}
.phv2-contact-map:hover { background: var(--pl-ink); color: #fff !important; }

/* ---------- Hover text-color lock ----------
   Astra's global a:hover rule sets an accent/orange text color on every
   plain <a> — the .phv2-sidebar-item flyout trigger actually shipped with
   this bug (icon+label flashed orange on hover, only the background tint
   this component was designed with was showing through). Same collision
   class already fixed for the search submit/lang-switcher/wishlist buttons
   in style.css. Every other clickable card in this file is a plain <a>
   too, so lock text color explicitly on each rather than wait for the
   same bug to resurface component by component. */
.phv2-cattile:hover .phv2-cattile-name { color: var(--pl-navy) !important; }
.phv2-cattile:hover .phv2-cattile-count { color: var(--pl-gray-600) !important; }
.phv2-brand-pill:hover .phv2-brand-pill-text { color: var(--pl-navy) !important; }
.phv2-promo-card-finance .phv2-promo-card-cta:hover { color: #fff !important; }
.phv2-promo-card-sale:hover .phv2-promo-card-title,
.phv2-promo-card-sale:hover .phv2-promo-card-sub,
.phv2-promo-card-sale:hover .phv2-promo-card-cta { color: #fff !important; }