/* Phase 3: single-product page (PDP) redesign. Loads after ww-shop.css
   (design tokens), on single product pages only (see is_product() check in
   waifuworld-custom-assets.php). No !important anywhere — selectors are
   written specific enough to win the cascade on their own, same approach as
   ww-shop-cards.css. */

/* ---------------------------------------------------------------------
   Related Products carousel: WooCommerce's own "carousel" display layout
   is overflow-x + scroll-snap only — real touch devices scroll it
   natively, but it ships no prev/next buttons for this block (the
   next/previous block WC has only belongs to the product gallery, a
   different block entirely) and a mouse click-drag does nothing by
   default in any browser. ww-shop-pdp.js wraps the carousel in
   .ww-carousel-holder and adds both; this just styles what it adds.
------------------------------------------------------------------------ */
.ww-carousel-holder {
	position: relative;
}
.is-product-collection-layout-carousel {
	touch-action: pan-x;
	cursor: grab;
}
.is-product-collection-layout-carousel.ww-carousel-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}
.ww-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var( --shop-accent-gradient );
	color: #fff;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
}
.ww-carousel-arrow--prev {
	left: 8px;
}
.ww-carousel-arrow--next {
	right: 8px;
}
.ww-carousel-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}
@media ( hover: none ) and ( pointer: coarse ) {
	/* Real touch devices already swipe-scroll the carousel natively; the
	   overlay buttons would just sit on top of the cards. Matches
	   WooCommerce's own choice to hide its equivalent gallery buttons on
	   touch (see the product-collection.css touch media query). */
	.ww-carousel-arrow {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   Price — Montserrat 900 italic, --shop-price, matching the Phase 2 card
   price spec. The Product Price block always renders the same
   wc-block-components-product-price classes regardless of context; scoped
   to single-product so the (differently-sized) grid price is untouched.
------------------------------------------------------------------------ */
.woocommerce.single-product .wc-block-components-product-price,
.woocommerce-page.single-product .wc-block-components-product-price,
.woocommerce.single-product .wc-block-components-product-price__value,
.woocommerce-page.single-product .wc-block-components-product-price__value {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-style: italic;
	font-size: 28px;
	color: var(--shop-price);
}

/* ---------------------------------------------------------------------
   Spec strip (waifuworld/pdp-spec-strip) — up to 3 pills: franchise,
   vendor, product type. Same gradient visual language as the Phase 2
   franchise pill, without the shine-sweep animation (grid-specific).
------------------------------------------------------------------------ */
.ww-pdp-spec-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}
.ww-pdp-pill {
	display: inline-flex;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--shop-accent-gradient);
	padding: 5px 12px;
	border-radius: 999px;
	text-decoration: none;
	line-height: 1.4;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.ww-pdp-pill:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(255,45,120,0.35);
	color: #fff;
}

/* ---------------------------------------------------------------------
   Pre-order line (waifuworld/pdp-preorder-line) — plain/restrained, per
   spec section 5a; only the spec-strip pills get the gradient treatment.
------------------------------------------------------------------------ */
.ww-pdp-preorder-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--shop-text);
	margin: 6px 0;
}
.ww-pdp-preorder-line svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--shop-text-muted);
}

/* ---------------------------------------------------------------------
   Low-stock notice (waifuworld/pdp-low-stock) — PDP-sized version of the
   Phase 2 card pill, same tokens.
------------------------------------------------------------------------ */
.ww-pdp-lowstock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--shop-lowstock-bg);
	color: var(--shop-lowstock-text);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	padding: 6px 12px;
	border-radius: 6px;
	margin: 6px 0;
}
.ww-pdp-lowstock svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Add to cart — full width, plain/restrained (no gradient/glow — that
   treatment is grid-quick-add-only, scoped there to
   .ollie-product-button-hover-group and never touches this selector).
   The button sits next to the quantity selector in a flex row; making it
   flex-grow + 100%-wide fills all the remaining row width rather than
   fighting the quantity stepper for space.
------------------------------------------------------------------------ */
.woocommerce.single-product .wc-block-add-to-cart-with-options .wp-block-woocommerce-product-button {
	flex: 1 1 auto;
}
.woocommerce.single-product .wc-block-add-to-cart-with-options .wc-block-components-product-button__button {
	width: 100%;
	background: var(--shop-accent-gradient);
	color: #fff;
	border: none;
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce.single-product h1.wp-block-post-title,
.woocommerce-page.single-product h1.wp-block-post-title {
	font-family: Montserrat, sans-serif;
	font-weight: 900;
	font-style: italic;
	color: var(--shop-card-title);
}

/* ---------------------------------------------------------------------
   Trust bar (static content, no dynamic block) — 3 icon+text items.
------------------------------------------------------------------------ */
.ww-pdp-trustbar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0;
	padding-top: 16px;
	border-top: 1px solid var(--shop-border);
}
.ww-pdp-trustbar__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: var(--shop-text-muted);
}
.ww-pdp-trustbar__item svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--shop-text-muted);
}

/* ---------------------------------------------------------------------
   SKU / barcode / weight row (waifuworld/pdp-sku-row).
------------------------------------------------------------------------ */
.ww-pdp-sku-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: var(--shop-text-muted);
	margin: 8px 0;
}
.ww-pdp-sku-row__item strong {
	color: var(--shop-text);
	font-weight: 700;
}
.ww-pdp-sku-row__sep {
	opacity: 0.5;
}

/* ---------------------------------------------------------------------
   Share row (waifuworld/pdp-share).
------------------------------------------------------------------------ */
.ww-pdp-share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
}
.ww-pdp-share__label {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--shop-text-muted);
}
.ww-pdp-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--shop-border);
	color: var(--shop-text-muted);
	background: transparent;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.ww-pdp-share__link svg {
	width: 16px;
	height: 16px;
}
.ww-pdp-share__link:hover {
	border-color: var(--shop-text-muted);
	color: var(--shop-text);
}
.ww-pdp-share__copy--done {
	color: #2e7d32;
	border-color: #2e7d32;
}

/* ---------------------------------------------------------------------
   "Why WaifuWorld" 3-item feature block — static content, below the main
   product section.
------------------------------------------------------------------------ */
.ww-why-waifuworld {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--large, 24px);
}
.ww-why-waifuworld__item {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	text-align: left;
}
.ww-why-waifuworld__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--shop-accent-gradient);
	color: #fff;
	flex-shrink: 0;
}
.ww-why-waifuworld__icon svg {
	width: 20px;
	height: 20px;
}
.ww-why-waifuworld__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 15px;
	color: var(--shop-text);
	margin: 0;
}
.ww-why-waifuworld__text {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--shop-text-muted);
	margin: 0;
}

@media screen and (max-width: 600px) {
	.ww-pdp-trustbar {
		gap: 12px;
	}
	.ww-why-waifuworld {
		flex-direction: column;
	}
}


/* ---------------------------------------------------------------------
   Gallery lightbox — WooCommerce's <dialog>. Woo's own layout stacks every
   image at full width in one long vertical scroll, so a 1600x2400 photo
   opens taller than the screen and the viewer lands mid-image with no way
   to see one whole. Give each image its own viewport-sized page and snap
   between them, so the dialog reads as a one-image-at-a-time viewer.
------------------------------------------------------------------------ */
.wc-block-product-gallery-dialog__content {
	gap: 0;
	padding: 0;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;
}
.wc-block-product-gallery-dialog__content::-webkit-scrollbar {
	display: none;
}
.wc-block-product-gallery-dialog__content > img {
	box-sizing: border-box;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	scroll-snap-align: center;
}

/* ---------------------------------------------------------------------
   Hover-to-magnify on the main image (see ww-shop-pdp.js). The source
   files are ~1920px wide but display at ~512, so there is real detail to
   uncover — the transform-origin follows the cursor and the frame's own
   overflow:hidden does the masking. Pointer-capable devices only; on
   touch the tap still opens the lightbox.
------------------------------------------------------------------------ */
.wc-block-product-gallery-large-image__wrapper {
	cursor: zoom-in;
}

@media (hover: hover) and (pointer: fine) {
	.wc-block-product-gallery-large-image__wrapper img {
		transition: transform 250ms cubic-bezier(0, 0, 0.3, 1);
	}
	.wc-block-product-gallery-large-image__wrapper.ww-zooming img {
		transform: scale(var(--ww-zoom-scale, 1.5));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product-gallery-large-image__wrapper img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   Lightbox magnifier (see ww-shop-pdp.js). One mechanism, everywhere: a
   scale transform driven by --ww-lightbox-zoom, so the strength is always
   whatever the script sets.

   An earlier version used `object-view-box` with an `object-fit: none`
   fallback for engines that lack it. That fallback paints the source 1:1,
   which is a fixed ~4x here and, crucially, ignores the zoom setting
   entirely — on any browser taking that branch every adjustment to the
   number did nothing at all.

   Scaling does spill horizontal scrollable overflow (measured 1914 ->
   3037), so clip that axis; `clip` on x beside `auto` on y is a legal
   pairing and leaves the vertical snap scrolling intact. Keep the factor
   modest: at 2.6x the composited layer reached ~4160x1973 and Chrome
   started dropping frames as blank white. Around 1.5x it is ~2400x1139,
   well inside what rasterises comfortably.
------------------------------------------------------------------------ */
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content {
	overflow-x: clip;
}
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content > img {
	cursor: zoom-in;
}
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content > img.ww-lightbox-zoom {
	transform: scale(var(--ww-lightbox-zoom, 1.5));
	cursor: crosshair;
}