/* Phase 2: product archive grid + product card redesign. Loads after
   ww-shop.css (design tokens) and after WooCommerce/Ollie's own block
   styles, on WooCommerce pages only. No !important anywhere — selectors
   are written specific enough to win the cascade on their own. */

/* ---------------------------------------------------------------------
   Archive grid: 5 columns desktop, 2 columns mobile.
   The Product Collection block renders
   <ul class="wc-block-product-template__responsive columns-5 wc-block-product-template">
   with an auto-fill grid-template-columns already set by WooCommerce core
   CSS; the extra ".woocommerce" ancestor below raises specificity so this
   rule wins regardless of stylesheet load order, without needing !important.
------------------------------------------------------------------------ */
.woocommerce .wc-block-product-template__responsive.columns-5,
.woocommerce-page .wc-block-product-template__responsive.columns-5 {
	grid-template-columns: repeat( 5, 1fr );
}

@media screen and ( max-width: 768px ) {
	.woocommerce .wc-block-product-template__responsive.columns-5,
	.woocommerce-page .wc-block-product-template__responsive.columns-5 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* ---------------------------------------------------------------------
   Card container: white background + border give the card a visible
   boundary against the page's off-white background (--shop-bg); a
   subtle always-on shadow (same pink family as the hover-lift shadow
   below, at a fraction of the opacity/blur) adds depth without
   competing with the more intense hover shadow. Padding keeps the
   image/text off the new border; box-sizing keeps the padded box at
   the grid track's assigned width.
------------------------------------------------------------------------ */
.woocommerce .wc-block-product-template .wc-block-product,
.woocommerce-page .wc-block-product-template .wc-block-product {
	box-sizing: border-box;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* ---------------------------------------------------------------------
   Card content fills the row's stretched height. WooCommerce's Product
   Collection grid is `display:grid` with default `align-items:normal`
   (=> stretch), so every <li class="wc-block-product"> in a row is
   already the same height — confirmed live: a row of 5 cards with wildly
   different content (franchise pill or not, 1-3 line titles, low-stock
   pill or not) all report the same getBoundingClientRect().height.
   What wasn't happening is any of that height reaching the actual
   content: .ollie-product-button-hover (a plain height:auto block) sized
   itself to its own content and left the rest of the taller <li> as dead
   space, so shorter cards' secondary content (ships-date, low-stock
   pill) landed higher up than taller cards' — confirmed live: two cards
   in the same row had low-stock pills 40px apart vertically. Piping
   height:100% down and turning "Product Card" into a column flexbox
   (image sized by its own fixed aspect-ratio, "Product Details" flex:1)
   closes that gap; an explicit empty 1fr row inside the details grid
   below absorbs the slack so ships-date/low-stock always land the same
   distance from the card's bottom edge regardless of title length.
   Follow-up fix: Details needs flex-basis 0% (not auto) — with `auto`,
   the flex item's hypothetical size resolves from its own grid content
   (the 1fr row contributes ~0 to that intrinsic size calc), so the browser
   was landing in a shrink scenario where .ollie-product-button-hover-group
   (which had no flex-shrink override, so used the default shrink:1) ate the
   overflow instead of Details growing — confirmed live: the button's
   rendered height varied 87-98px per card, shrinking exactly as much as
   Details' min-content grew with longer titles. flex-basis:0% on Details
   plus flex:0 0 auto (no grow, no shrink) on the button group makes the
   button a fixed-height block and Details the sole flexible item, so it
   fills whatever the row's tallest card leaves over and every button in
   a row lands on the same baseline.
------------------------------------------------------------------------ */
.woocommerce .wc-block-product-template .wc-block-product > .wp-block-template-part,
.woocommerce-page .wc-block-product-template .wc-block-product > .wp-block-template-part {
	height: 100%;
}

.woocommerce .wc-block-product-template .ollie-product-button-hover,
.woocommerce-page .wc-block-product-template .ollie-product-button-hover {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* "Product Details" — the only other direct child of .ollie-product-button-hover
   besides the image group — becomes the flexible remainder of the card and
   a grid so its children can be pinned to explicit rows. */
.woocommerce .wc-block-product-template .ollie-product-button-hover > .wp-block-group:not(.ollie-product-button-hover-image),
.woocommerce-page .wc-block-product-template .ollie-product-button-hover > .wp-block-group:not(.ollie-product-button-hover-image) {
	flex: 1 1 0%;
	min-height: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: max-content max-content max-content minmax(0, 1fr) max-content;
	padding: 0 23px;
	row-gap: 8px;
	column-gap: 8px;
	box-sizing: border-box;
}

.woocommerce .wc-block-product-template .ww-card-franchise,
.woocommerce-page .wc-block-product-template .ww-card-franchise {
	grid-row-start: 1;
	grid-column: 1 / -1;
}

.woocommerce .wc-block-product-template .wp-block-post-title,
.woocommerce-page .wc-block-product-template .wp-block-post-title {
	grid-row-start: 2;
	grid-column: 1 / -1;
}

.woocommerce .wc-block-product-template .wp-block-woocommerce-product-price,
.woocommerce-page .wc-block-product-template .wp-block-woocommerce-product-price {
	grid-row-start: 3;
	grid-column-start: 1;
	justify-self: stretch;
	align-self: center;
	width: 100%;
	margin: 0;
}

/* grid row 4 is deliberately left empty: minmax(0, 1fr) absorbs whatever
   slack the franchise pill / title / price leave unused, pushing row 5
   down to a consistent distance from the card's bottom edge. The low-stock
   pill shares row 3 with the price (price left, pill right) instead of
   getting its own row, so it no longer costs the card two extra rows of
   height when present. */

.woocommerce .wc-block-product-template .ww-card-ships-date,
.woocommerce-page .wc-block-product-template .ww-card-ships-date {
	grid-row-start: 5;
	grid-column: 1 / -1;
}

.woocommerce .wc-block-product-template .ww-card-lowstock-pill,
.woocommerce-page .wc-block-product-template .ww-card-lowstock-pill {
	grid-row-start: 3;
	grid-column-start: 2;
	align-self: center;
	justify-self: end;
	margin: 0;
}

/* ---------------------------------------------------------------------
   Product image: portrait clip-path "shield" shape.
------------------------------------------------------------------------ */
.woocommerce .ollie-product-button-hover-image,
.woocommerce-page .ollie-product-button-hover-image {
	position: relative;
	overflow: visible;
	flex-shrink: 0;
}

.woocommerce .ollie-product-button-hover-image .wc-block-components-product-image img,
.woocommerce-page .ollie-product-button-hover-image .wc-block-components-product-image img {
	clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

/* ---------------------------------------------------------------------
   Sold-out badge. WooCommerce has no built-in "Sold out" badge in the
   Product Collection grid (confirmed: no such markup ships in
   woocommerce/src/Blocks or its built CSS) — it only adds an "outofstock"
   class to the <li class="wc-block-product ..."> wrapper via the core
   post_class filter (wc_product_post_class()). This CSS-only badge uses
   that existing class rather than adding a fifth dynamic block.
------------------------------------------------------------------------ */
.woocommerce .wc-block-product.outofstock .ollie-product-button-hover-image::after,
.woocommerce-page .wc-block-product.outofstock .ollie-product-button-hover-image::after {
	content: "Sold Out";
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 9px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--shop-soldout-bg);
	color: #fff;
	padding: 4px 7px;
	border-radius: 4px;
	opacity: 0.85;
}

/* ---------------------------------------------------------------------
   Sold-out button: greyed out and non-clickable, matching the live
   Shopify reference (a disabled button, not a link to the product page —
   confirmed at waifuworld.us/collections/figures?page=3, every sold-out
   card shows a flat grey "SOLD OUT" chip instead of an active button).
   Text comes from waifuworld_ww_sold_out_button_text() in the main
   plugin file (WC_Product::add_to_cart_text() already runs that filter);
   this just neutralizes the button's normal gradient/shine/hover styling
   and blocks pointer interaction, scoped to the same `.outofstock` class
   the ribbon above uses.
------------------------------------------------------------------------ */
.woocommerce .wc-block-product-template .wc-block-product.outofstock .ollie-product-button-hover-group .wc-block-components-product-button__button,
.woocommerce-page .wc-block-product-template .wc-block-product.outofstock .ollie-product-button-hover-group .wc-block-components-product-button__button {
	background: var(--shop-border) !important;
	border-color: var(--shop-border);
	color: var(--shop-text-muted);
	text-shadow: none;
	box-shadow: none;
	pointer-events: none;
	cursor: default;
}

.woocommerce .wc-block-product-template .wc-block-product.outofstock .ollie-product-button-hover-group .wc-block-components-product-button__button::before,
.woocommerce-page .wc-block-product-template .wc-block-product.outofstock .ollie-product-button-hover-group .wc-block-components-product-button__button::before {
	display: none;
}

/* ---------------------------------------------------------------------
   Pre-order badge (waifuworld/preorder-badge dynamic block) — top-left
   overlay on the product image, only renders when release_date meta is set.
------------------------------------------------------------------------ */
.woocommerce .ww-card-preorder-badge,
.woocommerce-page .ww-card-preorder-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 9px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--shop-accent-gradient);
	padding: 4px 7px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------
   Franchise pill (waifuworld/franchise-pill dynamic block) — exact CSS
   from spec, only renders when anime_franchise meta is set (Phase 4).
------------------------------------------------------------------------ */
.ww-card-franchise {
	display: inline-flex;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--shop-accent-gradient);
	padding: 4px 10px;
	border-radius: 999px;
	text-decoration: none;
	line-height: 1.4;
	margin-bottom: 8px;
	position: relative;
	z-index: 3;
	isolation: isolate;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.ww-card-franchise::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 70%, transparent 100%);
	transform: skewX(-20deg);
	transition: left 0.5s ease;
	pointer-events: none;
}
.ww-card-franchise:hover::before { left: 125%; }
.ww-card-franchise:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(255,45,120,0.4), 0 0 0 2px rgba(255,45,120,0.12);
}

/* ---------------------------------------------------------------------
   Title + price typography.
------------------------------------------------------------------------ */
.woocommerce .wc-block-product-template h3.wp-block-post-title,
.woocommerce-page .wc-block-product-template h3.wp-block-post-title,
.woocommerce .wc-block-product-template .wp-block-post-title,
.woocommerce-page .wc-block-product-template .wp-block-post-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-style: italic;
	font-size: 14px;
	color: var(--shop-card-title);
}

.woocommerce .wc-block-product-template .wp-block-post-title a,
.woocommerce-page .wc-block-product-template .wp-block-post-title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--shop-card-title);
	transition: color 0.15s ease;
}

.woocommerce .wc-block-product-template .wp-block-post-title a:hover,
.woocommerce-page .wc-block-product-template .wp-block-post-title a:hover {
	color: var(--shop-card-title-hover);
}

.woocommerce .wc-block-product-template .wc-block-components-product-price,
.woocommerce-page .wc-block-product-template .wc-block-components-product-price,
.woocommerce .wc-block-product-template .wc-block-components-product-price__value,
.woocommerce-page .wc-block-product-template .wc-block-components-product-price__value {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-style: italic;
	font-size: 20px;
	color: var(--shop-price);
}

/* ---------------------------------------------------------------------
   Ships date (waifuworld/ships-date dynamic block).
------------------------------------------------------------------------ */
.ww-card-ships-date {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 12px;
	color: #666;
	margin-top: 4px;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Low-stock pill (waifuworld/low-stock-pill dynamic block).
------------------------------------------------------------------------ */
.ww-card-lowstock-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--shop-lowstock-bg);
	color: var(--shop-lowstock-text);
	font-size: 13px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
	white-space: nowrap;
}
.ww-card-lowstock-pill svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Quick-add button: always visible AND in normal card flow below the
   image/title/price (matches Shopify), not overlaid on the product
   image. Ollie's own woocommerce.css defines
   `.ollie-product-button-hover-group` as a small pill that sits
   `position:absolute; bottom:12px; right:12px` over the bottom-right
   corner of the image (`opacity:0`/`translateY(100%)` by default,
   revealed on `:hover` of the `.ollie-product-button-hover` ancestor —
   it already has a max-width:722px media query forcing it visible+
   absolute on mobile, since hover doesn't exist there). Simply toggling
   opacity/transform (as an earlier pass here did) left the button
   floating on top of every product image at every width instead of
   below the card content. Fixed in two parts: (1) the block itself was
   relocated in the product-card template (wp_template_part id 2995)
   from inside the "Product Image" group to a sibling after "Product
   Details", so it now sits in normal flow after the price; (2) this
   rule cancels Ollie's absolute-overlay positioning and its dark-pill
   "background-blur" chip styling (meant for an on-image badge, not a
   full-width footer button — that styling comes from inline
   style/class attributes baked into the saved block HTML, which is why
   background/padding/border-radius need !important to beat them).
   `position` and `margin` also carry !important in Ollie's rule, so
   this needs !important there too — the extra
   ".woocommerce .wc-block-product-template" prefix gives this higher
   specificity (0,3,0 vs 0,1,0) so it wins regardless of stylesheet
   load order.
   Note: this class is also the exact scoping selector
   `.ollie-product-button-hover-group .add_to_cart_button` that
   ww-shop-quickadd.js's capture-phase click listener matches to open the
   quick-add modal instead of adding straight to cart — do not rename or
   remove this class, only override its position/appearance here.
------------------------------------------------------------------------ */
.woocommerce .wc-block-product-template .ollie-product-button-hover-group,
.woocommerce-page .wc-block-product-template .ollie-product-button-hover-group {
	opacity: 1;
	transform: none;
	position: static !important;
	margin: 8px 0 0 !important;
	width: 100% !important;
	background: transparent !important;
	padding: 0 23px !important;
	border-radius: 0 !important;
	flex: 0 0 auto !important;
}

/* The Product Button block's own wrapper div
   (.wp-block-button.wc-block-components-product-button) never gets a
   width itself: WooCommerce's width-100 CSS only sets width on the
   *inner* .wp-block-button__link, and core WP's width-100/flex-basis
   rule only applies to a `.wp-block-button` that's a direct child of a
   `.wp-block-buttons` (plural) container — which this standalone
   WooCommerce block isn't. Left alone it just shrinks to its text
   content width (the "too thin" button), floating inside the now
   full-width .ollie-product-button-hover-group above. Force it to fill
   that group so the inner link's own width:100% has something full-width
   to be 100% of. */
.woocommerce .wc-block-product-template .ollie-product-button-hover-group .wp-block-button.wc-block-components-product-button,
.woocommerce-page .wc-block-product-template .ollie-product-button-hover-group .wp-block-button.wc-block-components-product-button {
	width: 100%;
}

/* ---------------------------------------------------------------------
   Quick-add button. WooCommerce's Product Button block always renders the
   actual clickable element (<a> for non-ajax, <button> for ajax add-to-cart)
   with the class "wc-block-components-product-button__button" regardless of
   which HTML tag is used (confirmed in
   woocommerce/src/Blocks/BlockTypes/ProductButton.php). Scoped to Ollie's
   hover-pill wrapper so it doesn't affect the single-product "Add to Cart"
   button elsewhere.
   WooCommerce's own inline critical CSS sets `border-style: none` on this
   element via ".wp-block-button.wc-block-components-product-button
   .wc-block-components-product-button__button" (3 classes, specificity
   0,3,0) — enough to beat a 2-class selector regardless of load order and
   collapse any border to 0px. The extra ".woocommerce .wc-block-product-template"
   prefix below raises this to 4 classes (0,4,0) so the border actually shows,
   without needing !important.
------------------------------------------------------------------------ */
.woocommerce .wc-block-product-template .ollie-product-button-hover-group .wc-block-components-product-button__button {
	width: 100% !important;
	min-height: 48px;
	border: 1px solid rgba(0,229,255,0.72);
	border-radius: 0.8rem;
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, rgba(255,45,120,0.96) 0%, rgba(155,93,229,0.96) 54%, rgba(0,229,255,0.92) 100%);
	color: #ffffff;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(4,4,15,0.7);
	box-shadow: 0 0 0 1px rgba(255,45,120,0.2), 0 0 16px rgba(255,45,120,0.28), 0 0 26px rgba(0,229,255,0.16), inset 0 0 18px rgba(4,4,15,0.35);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}
.ollie-product-button-hover-group .wc-block-components-product-button__button::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent), repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0 1px, transparent 1px 9px);
	opacity: 0.28;
	transform: translateX(-120%);
	transition: transform 420ms ease, opacity 180ms ease;
	pointer-events: none;
}
.ollie-product-button-hover-group .wc-block-components-product-button__button:hover::before {
	opacity: 0.48;
	transform: translateX(120%);
}
.ollie-product-button-hover-group .wc-block-components-product-button__button::after {
	content: '';
	position: absolute;
	inset: 2px;
	z-index: 1;
	border-radius: calc(0.8rem - 2px);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 0 18px rgba(4,4,15,0.18);
	pointer-events: none;
}
.ollie-product-button-hover-group .wc-block-components-product-button__button > span {
	position: relative;
	z-index: 2;
}
.ollie-product-button-hover-group .wc-block-components-product-button__button:not([disabled]):hover {
	transform: translateY(-2px);
	border-color: rgba(255,45,120,0.95);
	filter: saturate(1.16) brightness(1.08);
	box-shadow: 0 0 0 1px rgba(0,229,255,0.34), 0 0 22px rgba(255,45,120,0.46), 0 0 36px rgba(0,229,255,0.28), 0 14px 28px rgba(4,4,15,0.38), inset 0 0 22px rgba(4,4,15,0.22);
}
.ollie-product-button-hover-group .wc-block-components-product-button__button:not([disabled]):active {
	transform: translateY(0);
	filter: saturate(1.05) brightness(0.96);
}
.ollie-product-button-hover-group .wc-block-components-product-button__button:focus-visible {
	outline: 2px solid #00e5ff;
	outline-offset: 3px;
	box-shadow: 0 0 0 4px rgba(0,229,255,0.18), 0 0 24px rgba(255,45,120,0.48), 0 0 36px rgba(0,229,255,0.28);
}
.ollie-product-button-hover-group .wc-block-components-product-button__button[disabled] {
	border-color: rgba(155,93,229,0.28);
	background: linear-gradient(135deg, #1a1535 0%, #0d0b22 100%);
	color: rgba(255,255,255,0.46);
	text-shadow: none;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
	filter: grayscale(0.35);
}
@media screen and (max-width:749px) {
	.ollie-product-button-hover-group .wc-block-components-product-button__button {
		min-height: 4.4rem;
		font-size: 1.25rem;
		letter-spacing: 0.06em;
		border-radius: 0.7rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ollie-product-button-hover-group .wc-block-components-product-button__button,
	.ollie-product-button-hover-group .wc-block-components-product-button__button::before {
		transition: none;
	}
	.ollie-product-button-hover-group .wc-block-components-product-button__button:not([disabled]):hover {
		transform: none;
	}
}