/* assets/shop.css — shop archive, category, search results (shared markup),
   product filters, single-product buy-box. Only enqueued on shop/product/
   search/cart pages (see functions.php printerland_astra_enqueue_styles). */

/* Explicit grid instead of trusting Astra's/WC's default column count —
   wider minimum card width gives fewer, bigger columns on desktop and
   controls the row gap directly. */
.woocommerce ul.products {
	display: grid !important;
	/* !important — on attribute-taxonomy archives (e.g. /brand/epson/) each
	   li.product also carries Astra's OWN blog-grid classes
	   (.ast-grid-common-col.ast-full-width, applied generically to any
	   post-type loop) alongside WooCommerce's. Astra computes its own
	   per-column pixel width for that class via CSS custom properties that
	   assume a full-width (no-sidebar) column — this page has a left
	   sidebar, so that calc came out wrong and won over this rule without
	   !important, producing 4 wildly uneven column widths (176/531/644/
	   163px measured live) that overflowed the container by ~670px. */
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
	gap: 1.5rem;
}
.woocommerce ul.products li.product {
	background: #fff !important;
	border: none !important;
	box-shadow: var(--pl-shadow-card);
	border-radius: var(--pl-radius-card);
	padding: 1rem;
	transition: box-shadow 0.2s ease;
	position: relative;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	/* Without an explicit flex column, price/title/button just stacked in
	   normal flow — on narrow 2-column mobile grids (e.g. "Produse
	   similare") a longer title pushed the price down far enough to
	   visually overlap the add-to-cart button below it. gap replaces
	   whatever margin the button/price elements bring individually —
	   buttons below no longer add their own margin-top on top of this. */
	display: flex !important;
	flex-direction: column;
	gap: 0.6rem;
}
.woocommerce ul.products li.product img {
	aspect-ratio: 1 !important;
	max-height: 220px !important;
	width: 100% !important;
	object-fit: contain !important;
	border-radius: var(--pl-radius-sm);
	background: none;
}
/* Astra injects its own compact icon-only "add to cart" trigger
   (.ast-on-card-button) directly on the product thumbnail, on top of
   this theme's own full-width "Adaugă în coș" button below the card —
   two separate add-to-cart controls doing the same job on the same card.
   Same class of duplicate as .ast-onsale-card (already hidden above). */
.woocommerce ul.products li.product .ast-on-card-button {
	display: none !important;
}
/* Loading shimmer — native loading="lazy" images sitting on a flat gray
   background while they load read as "broken/missing" rather than
   "loading". printerlandTagImageLoadState() (this file) toggles this
   class off on the image's load event. */
.woocommerce ul.products li.product img.ph-img-loading {
	background: linear-gradient(100deg, var(--pl-gray-100) 30%, #e7ebef 45%, var(--pl-gray-100) 60%);
	background-size: 200% 100%;
	animation: ph-img-shimmer 1.3s ease-in-out infinite;
}
@keyframes ph-img-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -60% 0; }
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	/* 2-line clamp — stops title length from driving variable card height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.35;
	min-height: 2.7em;
}
/* PDP gallery — was rendering at native/full size, much larger than the
   buy-box column next to it. */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper img {
	max-height: 380px !important;
	width: 100% !important;
	object-fit: contain !important;
}
.woocommerce-product-gallery__trigger { top: 0.5rem; right: 0.5rem; }
.ph-loop-actions {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	z-index: 2;
}
.ph-loop-action {
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	border: none;
	background: #fff;
	box-shadow: var(--pl-shadow-card);
	cursor: pointer;
	font-size: 0.95rem;
	color: var(--pl-gray-600);
}
/* Astra's global button:hover/:focus rule fills an accent background —
   without an explicit override here (no background set on hover/focus at
   all previously) the icon went accent-on-accent and effectively
   disappeared. Same collision class fixed elsewhere (style.css) — clicking
   (not just hovering) these AJAX wishlist/compare toggles also focuses
   the button, and the browser keeps that :focus state after the click
   completes, so the bug persisted as a "stuck orange" look even with the
   mouse no longer over it. */
.ph-loop-action:hover,
.ph-loop-action:focus {
	background: #fff !important;
	color: var(--pl-navy);
}
.ph-loop-action.is-active,
.ph-loop-action.is-active:hover,
.ph-loop-action.is-active:focus {
	color: var(--pl-accent);
}

.ph-pdp-actions {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.ph-pdp-action {
	border: 1px solid rgb(0 0 0 / 0.1);
	border-radius: 9999px;
	background: #fff;
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
	color: var(--pl-navy);
	cursor: pointer;
}
/* Same fix as .ph-loop-action above — same button family, same missing
   hover/focus override, same orange-on-orange bug on hover AND on the
   lingering :focus state after a click. */
.ph-pdp-action:hover,
.ph-pdp-action:focus {
	background: #fff !important;
	color: var(--pl-navy);
}
.ph-pdp-action.is-active,
.ph-pdp-action.is-active:hover,
.ph-pdp-action.is-active:focus {
	border-color: var(--pl-accent);
	color: var(--pl-accent);
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--pl-shadow-card-lg);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--pl-navy);
	font-weight: 600;
}
.woocommerce ul.products li.product .price {
	color: var(--pl-navy);
	font-weight: 700;
	font-size: 1.15rem;
}
.woocommerce ul.products li.product .price del {
	color: var(--pl-gray-600);
	font-weight: 400;
	font-size: 0.85em;
	margin-right: 0.3em;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}
/* Real discount % (see functions.php woocommerce_sale_flash filter) — no
   styling existed for this at all before, so on-sale products rendered
   with WooCommerce's plain default "Sale!" badge, unstyled. */
/* Astra renders its own separate "Sale!" badge (.ast-onsale-card) independent
   of the woocommerce_sale_flash filter/.onsale span above — not an override,
   a genuinely separate DOM element, so both rendered simultaneously without
   this. Ours already carries the real -X%; Astra's generic one is redundant. */
.woocommerce ul.products li.product .ast-onsale-card {
	display: none;
}
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 1;
	background: var(--pl-accent);
	color: #fff;
	border-radius: 9999px;
	padding: 0.25rem 0.65rem;
	font-size: 0.78rem;
	font-weight: 800;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
	margin: 0;
}
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple {
	border-radius: 9999px !important;
	background: #fff !important;
	color: var(--pl-navy) !important;
	border: 1px solid var(--pl-navy) !important;
	font-weight: 600 !important;
	width: 100%;
	text-align: center;
	display: block;
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
	background: var(--pl-navy) !important;
	color: #fff !important;
}
.printerland-quick-buy {
	border-radius: 9999px;
	background: var(--pl-accent);
	color: #fff !important;
	border: none;
	font-weight: 700;
	width: 100%;
	text-align: center;
	display: block;
	padding: 0.6rem 0;
	text-decoration: none !important;
	font-size: 0.9rem;
}
.printerland-quick-buy:hover { background: var(--pl-accent-hover); }

/* Filter by Price / Filter by Attribute blocks (WooCommerce Blocks,
   wc-block-* classes are stable across WC versions). */
.wc-block-price-filter,
.wc-block-attribute-filter {
	border-radius: var(--pl-radius-card);
	box-shadow: var(--pl-shadow-card);
	padding: 1rem;
}
.wc-block-attribute-filter-list li,
.wc-block-price-filter__range-text {
	border-radius: 9999px;
}
.wc-block-components-checkbox {
	border-radius: 9999px !important;
}

/* Single-product buy-box (see functions.php printerland_buybox_open/close). */
.printerland-buybox {
	background: var(--pl-white-gradient);
	box-shadow: var(--pl-shadow-card);
	border-radius: var(--pl-radius-card);
	padding: 1.5rem;
}
.printerland-buybox .price {
	color: var(--pl-navy);
	font-size: 1.75rem;
	font-weight: 800;
}
.printerland-buybox .single_add_to_cart_button {
	border-radius: 9999px !important;
	background-color: var(--pl-accent) !important;
	border-color: var(--pl-accent) !important;
	padding: 0.85rem 2rem !important;
	font-weight: 700 !important;
}
.printerland-buybox .single_add_to_cart_button:hover {
	background-color: var(--pl-accent-hover) !important;
}

.ph-stock-badge {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: #16833e;
	font-weight: 600;
	font-size: 0.9rem;
	margin: 0.5rem 0 0;
}
.ph-stock-badge .ph-svg-icon { width: 17px; height: 17px; flex-shrink: 0; }

/* Product gallery — read as a rounded card matching the buy-box. */
.woocommerce-product-gallery {
	background: #fff;
	box-shadow: var(--pl-shadow-card);
	border-radius: var(--pl-radius-card);
	overflow: hidden;
	padding: 0.5rem;
}

.printerland-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 1rem 0;
	font-size: 0.9rem;
	color: var(--pl-navy);
}
.printerland-trust-strip span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.printerland-trust-strip .ph-svg-icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	color: var(--pl-accent);
}
.printerland-payment-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.printerland-payment-chips span {
	border: 1px solid rgb(0 0 0 / 0.1);
	border-radius: 9999px;
	padding: 0.25rem 0.85rem;
	font-size: 0.8rem;
	color: var(--pl-gray-600);
}

.printerland-mobile-buy-bar {
	display: none;
}
@media (max-width: 767px) {
	.single-product .printerland-mobile-buy-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background: #fff;
		border-top: 1px solid rgb(0 0 0 / 0.08);
		box-shadow: var(--pl-shadow-card-lg);
		padding: 0.75rem 1rem;
	}
	.printerland-mobile-buy-bar-price {
		color: var(--pl-navy);
		font-weight: 800;
		font-size: 1.1rem;
	}
	.printerland-mobile-buy-bar-cta {
		border-radius: 9999px !important;
		background-color: var(--pl-accent) !important;
		border-color: var(--pl-accent) !important;
		color: #fff !important;
		padding: 0.7rem 1.5rem !important;
		font-weight: 700 !important;
		text-decoration: none;
	}
	/* Keep content clear of the fixed bar. */
	.single-product .printerland-buybox {
		margin-bottom: 4.5rem;
	}
}

/* Shop/category sidebar (see inc/shop-sidebar.php — forces Astra's
   left-sidebar layout on these archives, populated with WooCommerce's own
   classic filter widgets: category tree, price range, brand attribute). */
#secondary .widget,
.ast-sidebar .widget {
	border-radius: var(--pl-radius-card);
	box-shadow: var(--pl-shadow-card);
	padding: 1rem;
	margin-bottom: 1rem;
}
#secondary .widget-title,
.ast-sidebar .widget-title {
	color: var(--pl-navy);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.65rem;
}
.woocommerce ul.product-categories,
.woocommerce ul.wc-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
/* WooCommerce renders <li><a>Label</a> <span class="count">(N)</span><ul
   class="children">...nested subcats...</ul></li> — count is a sibling of
   the link, not nested inside it. A flexed <li> was tried first, but a
   parent category li's direct children include that nested <ul>, which got
   swallowed into the flex row instead of stacking below (subcategories
   rendered as a squeezed one-letter-per-line column). float keeps the
   count right-aligned on the label's line without touching how the nested
   list flows below it. */
/* Background hover/active states go on the <a> itself (not the <li>) — a
   parent category li's box also contains its nested <ul class="children">
   subcategory rows, and an li-level background would bleed down behind
   those too. */
.woocommerce ul.product-categories li a,
.woocommerce ul.wc-layered-nav-list li a {
	color: var(--pl-navy);
	text-decoration: none;
	font-size: 0.88rem;
	padding: 0.35rem 0.5rem;
	border-radius: var(--pl-radius-sm);
	transition: background 0.15s ease;
}
.woocommerce ul.product-categories .count,
.woocommerce ul.wc-layered-nav-list .count {
	float: right;
	flex-shrink: 0;
	color: var(--pl-gray-600);
	font-size: 0.78rem;
	font-weight: 400;
	padding-right: 0.5rem;
}
.woocommerce ul.product-categories li a:hover,
.woocommerce ul.wc-layered-nav-list li a:hover {
	background: color-mix(in srgb, var(--pl-navy) 6%, transparent);
	color: var(--pl-accent);
}
.woocommerce ul.product-categories li.current-cat > a,
.woocommerce ul.wc-layered-nav-list li.chosen a {
	background: color-mix(in srgb, var(--pl-accent) 8%, transparent);
	color: var(--pl-accent);
	font-weight: 700;
}
/* Category tree icons + collapsible subcategories (assets/shop.js
   printerlandEnhanceCategoryTree) — top-level category links get a small
   icon (same set as the homepage category strip), and any top-level
   category with subcategories collapses behind a chevron toggle instead of
   dumping the full nested list — the branch containing the current
   category auto-expands. */
.woocommerce ul.product-categories li {
	position: relative;
}
.ph-cat-icon {
	display: inline-flex;
	margin-right: 0.5rem;
	color: var(--pl-navy);
	vertical-align: -3px;
}
.ph-cat-icon-sub {
	margin-right: 0.4rem;
	color: var(--pl-gray-600);
	vertical-align: -2px;
}
.woocommerce ul.product-categories li.current-cat > a .ph-cat-icon {
	color: var(--pl-accent);
}
.woocommerce ul.product-categories button.ph-cat-toggle {
	position: absolute;
	top: 0.25rem;
	right: 2.75rem;
	width: 1.5rem !important;
	height: 1.5rem !important;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none !important;
	background: none !important;
	padding: 0 !important;
	margin: 0;
	color: #99a3b0;
	cursor: pointer;
	z-index: 1;
	box-shadow: none !important;
}
.ph-cat-chevron {
	transition: transform 0.15s ease;
}
.ph-cat-toggle.is-open .ph-cat-chevron {
	transform: rotate(180deg);
}
.woocommerce ul.product-categories ul.children {
	list-style: none;
	margin: 0.15rem 0 0.3rem 1.4rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.woocommerce ul.product-categories ul.children a {
	font-size: 0.82rem;
}

.price_slider_wrapper .ui-slider .ui-slider-range,
.price_slider_wrapper .ui-slider .ui-slider-handle { background: var(--pl-accent) !important; border-color: var(--pl-accent) !important; }
.woocommerce .price_slider_amount .button {
	border-radius: 9999px !important;
	background: var(--pl-accent) !important;
	border-color: var(--pl-accent) !important;
	/* Was navy text on the coral fill (poor contrast, inherited from a
	   generic .button rule elsewhere) — every other coral CTA sitewide
	   (add-to-cart hover, quick-buy) uses white text on this same fill. */
	color: #fff !important;
	float: none;
	margin-top: 0.75rem;
}
.woocommerce .price_slider_amount {
	font-size: 0.85rem;
	color: var(--pl-navy);
}
.woocommerce .price_slider_amount .price_label {
	font-weight: 600;
}
.woocommerce .reset_variations,
.woocommerce a.reset-layered-nav-link {
	color: var(--pl-accent);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

/* Category FAQ/description block (inc/category-faq.php). */
.printerland-category-faq {
	max-width: 900px;
	margin: 3rem auto 0;
	padding: 0 1rem;
	/* Astra's mobile stacking reverses the primary/secondary flex order for
	   left-sidebar layouts — confirmed live: this block rendered ABOVE the
	   category heading and product grid on a phone viewport instead of
	   below everything. order:999 pins it last regardless of that reversal
	   (no-op if there's no flex ancestor, so safe either way). */
	order: 999;
	width: 100%;
}
.printerland-category-faq h2 {
	color: var(--pl-navy);
	font-size: 1.3rem;
	margin: 1.5rem 0 0.75rem;
}
.printerland-category-faq details {
	border-radius: var(--pl-radius-card);
	box-shadow: var(--pl-shadow-card);
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
}
.printerland-category-faq summary {
	color: var(--pl-navy);
	font-weight: 600;
	cursor: pointer;
}
.printerland-category-faq details p {
	margin-top: 0.6rem;
	color: var(--pl-gray-600);
}

/* PDP description spec grid + compatibility chips (see
   inc/pdp-description-format.php). */
.ph-spec-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0 0 1.5rem;
	border-radius: var(--pl-radius-card);
	overflow: hidden;
	box-shadow: var(--pl-shadow-card);
}
@media (min-width: 640px) {
	.ph-spec-grid { grid-template-columns: 1fr 1fr; }
}
.ph-spec-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 1.1rem;
	background: #fff;
	border-bottom: 1px solid rgb(0 0 0 / 0.06);
}
.ph-spec-row:nth-child(odd) { background: var(--pl-gray-100); }
.ph-spec-row dt {
	color: var(--pl-gray-600);
	font-size: 0.85rem;
	flex-shrink: 0;
}
.ph-spec-row dd {
	margin: 0;
	color: var(--pl-navy);
	font-weight: 600;
	font-size: 0.85rem;
	text-align: right;
}
.ph-compat-heading {
	color: var(--pl-navy);
	font-size: 1.05rem;
	margin: 0 0 0.75rem;
}
.ph-compat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.ph-compat-chip {
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--pl-navy) 6%, transparent);
	color: var(--pl-navy);
	font-size: 0.8rem;
	font-weight: 600;
}

/* Mobile filter sidebar toggle (assets/shop.js) — #secondary rendered as
   one long uncollapsed ~300-line category/price/brand widget list below
   the product grid on mobile; wrapped behind a "Filtre" button instead. */
.ph-filter-toggle {
	display: none;
}
.ph-filter-close {
	display: none;
}
@media (max-width: 921px) {
	.ph-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0 0 1rem;
		padding: 0.75rem 1.25rem;
		border: 1px solid var(--pl-navy);
		border-radius: 9999px;
		background: #fff;
		color: var(--pl-navy);
		font-weight: 700;
		cursor: pointer;
	}
	.ph-filter-toggle[aria-expanded="true"] {
		background: var(--pl-navy-gradient);
		box-shadow: var(--pl-shadow-chip);
		color: #fff;
	}
	/* #secondary sits in the DOM after the entire product grid (WooCommerce/
	   Astra's own layout order) — just removing [hidden] revealed it right
	   there, meaning "tap Filters near the top" opened a panel the visitor
	   then had to scroll ~30+ products down to actually see (confirmed
	   live). A fixed full-screen overlay makes its DOM position irrelevant
	   — the standard filter-drawer pattern, not a plain inline reveal. */
	#secondary:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: 1200;
		background: #fff;
		overflow-y: auto;
		padding: 4.5rem 1rem 2rem;
		/* Astra's own #secondary has a margin-top for its normal in-flow
		   sidebar position — margin doesn't get absorbed by inset:0 on a
		   fixed element, so it was still pushing the overlay down from the
		   true viewport top (confirmed live: ~58px gap at the top with page
		   content visible behind it). */
		margin: 0 !important;
	}
	body.ph-filters-open {
		overflow: hidden;
	}
	.ph-filter-close {
		position: fixed;
		top: 1rem;
		right: 1rem;
		z-index: 1201;
		width: 2.75rem;
		height: 2.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 9999px;
		border: none;
		background: var(--pl-navy-gradient);
		box-shadow: var(--pl-shadow-chip);
		color: #fff;
		cursor: pointer;
	}
}
@media (min-width: 922px) {
	/* Desktop keeps the sidebar always visible — the JS-added [hidden]
	   attribute is mobile-only behavior. */
	#secondary[hidden] {
		display: block !important;
	}
}

/* Pagination — WooCommerce's default markup had zero theme styling
   (confirmed: no pagination selectors existed anywhere), rendering as
   plain square-bordered boxes instead of the rounded-pill language used
   everywhere else on the site (buttons, category chips, brand pills). */
.woocommerce-pagination {
	margin: 2rem 0;
}
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none !important;
}
.woocommerce-pagination ul.page-numbers li {
	border: none !important;
}
.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border-radius: 9999px;
	border: 1px solid rgb(0 0 0 / 0.1);
	color: var(--pl-navy);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
	border-color: var(--pl-accent);
	color: var(--pl-accent);
}
.woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background: var(--pl-accent);
	border-color: var(--pl-accent);
	color: #fff;
}
.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
	border: none;
	color: var(--pl-gray-600);
}