/* ITEMPLS — single product page, mode selector, gallery, lightbox.
 *
 * The mode selector is the most important control on the site. A customer
 * who buys the wrong realm gets an item they cannot use, and the order has
 * to be unwound by hand. So it is not a dropdown: it is two large, always-
 * visible, mutually exclusive cards, each showing its own price, with the
 * chosen one restated next to Add to Cart.
 *
 * Nothing here relies on colour alone. Every mode surface carries the word
 * "Ladder" or "Non-Ladder" as text.
 */

.it-product { padding-block: var(--it-s5) var(--it-s8); }

.it-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: var(--it-s7);
	align-items: start;
}
@media (max-width: 900px) {
	.it-product__grid { grid-template-columns: minmax(0, 1fr); gap: var(--it-s5); }
}

/* ------------------------------------------------------------- gallery */
.it-gallery { position: sticky; top: 88px; }
@media (max-width: 900px) { .it-gallery { position: static; } }

.it-gallery__main {
	position: relative;
	background: radial-gradient(120% 90% at 50% 0%, #1b2130 0%, #10141b 70%);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
	overflow: hidden;
	aspect-ratio: var(--it-card-ratio);
	display: grid;
	place-items: center;
	cursor: zoom-in;
}
.it-gallery__main img {
	max-width: 100%; max-height: 100%;
	width: auto; height: auto;
	object-fit: contain;
	padding: var(--it-s6);
	display: block;
}
.it-gallery__hint {
	position: absolute; right: 10px; bottom: 10px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px;
	background: rgba(0,0,0,.55);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-pill);
	color: var(--it-text-muted);
	font-size: var(--it-fs-xs);
	pointer-events: none;
}
.it-gallery__thumbs {
	display: flex; gap: var(--it-s2); margin-top: var(--it-s3);
	overflow-x: auto; scrollbar-width: none;
}
.it-gallery__thumbs::-webkit-scrollbar { display: none; }
.it-gallery__thumbs button {
	flex: none; width: 66px; height: 66px;
	background: var(--it-surface-2);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r);
	padding: 4px; cursor: pointer;
}
.it-gallery__thumbs button[aria-current="true"] { border-color: var(--it-accent); }
.it-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* Replace the parent theme / WooCommerce gallery zoom entirely. */
.woocommerce-product-gallery__trigger,
.woocommerce div.product div.images .flex-control-thumbs { display: none !important; }

/* ------------------------------------------------------------- summary */
.it-summary > * + * { margin-top: var(--it-s4); }
.it-summary__class { display: flex; flex-wrap: wrap; gap: 6px; }
.it-summary h1 { font-size: var(--it-fs-2xl); margin: 0; }

.it-summary__price {
	display: flex; align-items: baseline; gap: var(--it-s3);
	font-size: var(--it-fs-3xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.it-summary__price .it-price-note {
	font-size: var(--it-fs-sm); font-weight: 500; color: var(--it-text-muted);
}

/* ------------------------------------------------------- MODE SELECTOR */
.it-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--it-s3); }
@media (max-width: 400px) { .it-modes { grid-template-columns: 1fr; } }

.it-mode {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--it-s4);
	background: var(--it-surface);
	border: 1.5px solid var(--it-line);
	border-radius: var(--it-r);
	cursor: pointer;
	transition: border-color var(--it-t), background var(--it-t);
	text-align: left;
}
.it-mode:hover { border-color: var(--it-line-strong); }
.it-mode input { position: absolute; opacity: 0; pointer-events: none; }

.it-mode__name {
	display: flex; align-items: center; gap: 8px;
	font-weight: 700; font-size: var(--it-fs-base); color: var(--it-text);
}
.it-mode__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.it-mode__price { font-size: var(--it-fs-lg); font-weight: 700; }
.it-mode__avail { font-size: var(--it-fs-xs); color: var(--it-text-muted); }

.it-mode--ladder .it-mode__dot { background: var(--it-ladder); }
.it-mode--nonladder .it-mode__dot { background: var(--it-nonladder); }

.it-mode[data-selected="true"].it-mode--ladder {
	border-color: var(--it-ladder); background: var(--it-ladder-soft);
}
.it-mode[data-selected="true"].it-mode--nonladder {
	border-color: var(--it-nonladder); background: var(--it-nonladder-soft);
}
.it-mode input:focus-visible + .it-mode__inner { box-shadow: var(--it-focus); border-radius: var(--it-r-sm); }

.it-mode[data-selected="true"]::after {
	content: "Selected";
	position: absolute; top: 8px; right: 10px;
	font-size: 10px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: inherit; opacity: .85;
}
.it-mode[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Restated beside the CTA, so the chosen mode is on screen at the moment
 * of purchase and not only further up the page. */
.it-buyrow { display: grid; gap: var(--it-s3); }
.it-buyrow__confirm {
	display: flex; align-items: center; gap: 8px;
	font-size: var(--it-fs-sm); color: var(--it-text-muted);
}
.it-buyrow__confirm strong { color: var(--it-text); }

.woocommerce div.product form.cart { margin: 0; }
.woocommerce div.product form.cart .variations,
.woocommerce div.product .woocommerce-variation-price,
.woocommerce div.product .woocommerce-variation-availability { display: none !important; }
.woocommerce div.product .single_add_to_cart_button { width: 100%; min-height: 52px; font-size: var(--it-fs-md); }
.woocommerce div.product form.cart div.quantity { margin-right: var(--it-s3); }

/* ------------------------------------------------------- delivery panel */
.it-delivery { display: grid; gap: var(--it-s3); }
.it-delivery__row { display: flex; gap: var(--it-s3); align-items: flex-start; }
.it-delivery__ico {
	flex: none; width: 32px; height: 32px;
	display: grid; place-items: center;
	background: var(--it-surface-3); border-radius: var(--it-r-sm);
	color: var(--it-accent);
}
.it-delivery__t { font-weight: 650; }
.it-delivery__d { color: var(--it-text-muted); font-size: var(--it-fs-sm); }

/* ------------------------------------------------------------- lightbox */
.it-lb {
	position: fixed; inset: 0; z-index: 500;
	display: none;
	background: rgba(6, 8, 12, .93);
}
.it-lb[data-open="true"] { display: grid; grid-template-rows: auto 1fr auto; }
.it-lb__bar {
	display: flex; align-items: center; gap: var(--it-s3);
	padding: var(--it-s3) var(--it-s4);
	border-bottom: 1px solid var(--it-line);
}
.it-lb__title { font-weight: 650; font-size: var(--it-fs-sm); color: var(--it-text-muted); }
.it-lb__bar .it-iconbtn { margin-left: auto; }
.it-lb__stage {
	/* The old popup left a large empty box around small item art. The stage
	 * fits the image and no more, and scrolls only when zoomed in. */
	display: grid; place-items: center;
	overflow: auto;
	padding: var(--it-s4);
	-webkit-overflow-scrolling: touch;
}
.it-lb__img {
	max-width: min(100%, 900px);
	max-height: 100%;
	object-fit: contain;
	transition: transform var(--it-t);
	transform-origin: center center;
	cursor: zoom-in;
}
.it-lb[data-zoom="true"] .it-lb__img { transform: scale(2); cursor: zoom-out; }
.it-lb__foot {
	display: flex; gap: var(--it-s2); justify-content: center;
	padding: var(--it-s3); border-top: 1px solid var(--it-line);
}
@media (max-width: 600px) {
	.it-lb__img { max-width: 100%; }
	.it-lb__foot { overflow-x: auto; }
}

/* --------------------------------------------------------- related items */
.it-related { margin-top: var(--it-s8); }
.it-related h2 { font-size: var(--it-fs-lg); margin-bottom: var(--it-s4); }

/* Tabs / extra Shoptimizer product furniture we are not using. */
.woocommerce div.product .woocommerce-tabs ul.tabs { border: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--it-accent); background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--it-text-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--it-text); }

/* ------------------------------------------------------------------------
 * The product page as it actually renders.
 *
 * This file styled .it-product__grid, but nothing ever emitted that element:
 * WooCommerce wraps the gallery and summary in .product-details-wrapper
 * (Shoptimizer's), not in anything of ours. So the grid never formed, the
 * gallery stretched the full content width at 1:1, and the mode selector --
 * the most important control on the site -- landed below the fold on every
 * screen size, including 1920x1080. Found in the first real-browser pass.
 * ------------------------------------------------------------------------ */
.single-product div.product .product-details-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--it-s7);
	align-items: start;
	max-width: var(--it-max);
	margin: 0 auto;
	padding: var(--it-s5) var(--it-gutter) 0;
}
@media (max-width: 900px) {
	.single-product div.product .product-details-wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--it-s5);
	}
}
/* Shoptimizer floats the summary at a fixed width; inside a grid that fights. */
.single-product div.product .summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
.single-product div.product .it-gallery { max-width: 560px; width: 100%; }
@media (max-width: 900px) { .single-product div.product .it-gallery { max-width: none; } }

/* Shoptimizer's sticky buy bar: white, reads "Select options", ignores the
 * chosen mode, and was taking a cell in the new grid. The page's own CTA
 * restates the mode at the point of purchase, which this bar cannot. */
.shoptimizer-sticky-add-to-cart { display: none !important; }

/* Prev/next product arrows beside the title: navigation noise on a page
 * whose job is one decision. */
.shoptimizer-product-prevnext { display: none !important; }

/* After consolidation the parent product has no SKU of its own -- each mode
 * carries its own, shown on its mode card -- so this line read "SKU: N/A". */
.single-product .product_meta .sku_wrapper { display: none !important; }

.single-product .product_title { font-size: var(--it-fs-2xl); margin-bottom: var(--it-s2); }
.single-product div.product p.price,
.single-product div.product span.price { color: var(--it-text); font-size: var(--it-fs-lg); }

/* Tabs and related products sat on white panels with faint headings. */
.single-product .woocommerce-tabs,
.single-product .woocommerce-tabs .panel,
.single-product .related-wrapper,
.single-product section.related {
	background: transparent !important;
	color: var(--it-text);
}
.single-product .woocommerce-tabs,
.single-product .related-wrapper {
	max-width: var(--it-max);
	margin: var(--it-s7) auto 0;
	padding: 0 var(--it-gutter);
}
.woocommerce table.shop_attributes,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	background: var(--it-surface) !important;
	color: var(--it-text);
	border-color: var(--it-line) !important;
}

/* Second real-browser pass. */

/* Breadcrumb links rendered near-black on the dark page. */
.woocommerce-breadcrumb, .woocommerce-breadcrumb a,
.single-product .woocommerce-breadcrumb { color: var(--it-text-faint) !important; }
.woocommerce-breadcrumb a:hover { color: var(--it-text) !important; }

/* Shoptimizer's .quantity .qty outranks the generic input rule, so the
 * quantity box stayed white. */
.woocommerce div.product form.cart .quantity .qty,
.woocommerce .quantity input.qty {
	background: var(--it-surface-3) !important;
	color: var(--it-text) !important;
	border: 1px solid var(--it-line) !important;
	border-radius: var(--it-r) !important;
	min-height: 52px;
}

/* width:100% beside the quantity box inside a flex row overflowed the summary
 * column. Let the button take the remaining space instead. */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex; align-items: stretch; gap: var(--it-s3);
}
.woocommerce div.product .single_add_to_cart_button {
	width: auto !important; flex: 1 1 auto; margin: 0 !important;
}

/* The product meta ("Category: Runes") sat on a white band. */
.single-product .product_meta {
	background: transparent !important;
	color: var(--it-text-muted);
	border-color: var(--it-line) !important;
}
.single-product .product_meta a { color: var(--it-accent); }

/* Correction to the rule above. The mode selector and the "You are buying"
 * line are emitted on woocommerce_before_add_to_cart_button, which renders
 * INSIDE .woocommerce-variation-add-to-cart. Making that container a flex
 * row put the mode cards, the confirmation, the quantity and the button all
 * in one squeezed row -- caught by the above-the-fold screenshot. So it
 * wraps: the mode cards and the confirmation take a full row each, and the
 * quantity and button share the last one. */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	flex-wrap: wrap;
	align-items: center;
}
.woocommerce div.product .woocommerce-variation-add-to-cart > .it-modes,
.woocommerce div.product .woocommerce-variation-add-to-cart > .it-buyrow__confirm,
.woocommerce div.product form.cart > .it-modes,
.woocommerce div.product form.cart > .it-buyrow__confirm {
	flex: 1 1 100%;
	width: 100%;
}
.woocommerce div.product .woocommerce-variation-add-to-cart > .quantity { flex: 0 0 auto; margin: 0 !important; }

/* Shoptimizer's quantity stepper buttons are separate white elements. */
.woocommerce .quantity { display: inline-flex; align-items: stretch; }
.woocommerce .quantity button,
.woocommerce .quantity .quantity-button,
.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
	background: var(--it-surface-3) !important;
	color: var(--it-text) !important;
	border: 1px solid var(--it-line) !important;
	min-height: 0;
	height: auto;
}
.woocommerce .quantity .qty { width: 64px; text-align: center; }

/* A <fieldset> carries default padding, border and min-width, which indented
 * the mode cards against the title above them. */
fieldset.it-modes { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Shoptimizer's stepper arrows collapsed to a thin white sliver between the
 * quantity box and the button. The number input already accepts typing and
 * the keyboard; the stepper added nothing but a rendering defect. */
.woocommerce .quantity .quantity-nav,
.woocommerce .quantity .quantity-button,
.woocommerce .quantity button.plus,
.woocommerce .quantity button.minus,
.woocommerce .quantity .qib-button { display: none !important; }

/* Item art arrives as small images with a white background baked in, which
 * no stylesheet can remove. Shown at its real size (~100px) inside a 560px
 * stage it read as a loading failure. Scaled to a deliberate size with a
 * rounded tile edge, the white square reads as a presented card rather than
 * a missing asset. Transparent art is the real fix, and is a media task. */
.it-gallery__main img {
	width: min(62%, 360px) !important;
	height: auto !important;
	max-height: 80%;
	padding: 0 !important;
	border-radius: var(--it-r);
	box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

/* Phones. The first real mobile screenshot put the mode choice a full screen
 * below the top: a square gallery as wide as the phone showing a small rune,
 * under a header that stayed pinned at ~160px. On a 740px-tall screen that is
 * most of the view spent before the product's name. The gallery is capped so
 * the name, price and the two mode cards arrive sooner. */
@media (max-width: 900px) {
	.single-product div.product .it-gallery__main {
		aspect-ratio: auto;
		height: min(52vw, 230px);
	}
	.it-gallery__main img { width: auto !important; max-height: 78% !important; }
	.it-gallery__thumbs button { width: 52px; height: 52px; }
	.single-product .product_title { font-size: var(--it-fs-xl); }
}

/* A percentage max-height on the image did not resolve inside the capped
 * box, so the rune tile overflowed and was cut off. A fixed cap does. */
@media (max-width: 900px) {
	.it-gallery__main img { max-height: min(40vw, 180px) !important; }
}

/* Smallest phones (320px wide, 740 tall): the mode cards still began 666px
 * down. The breadcrumb costs ~45px and repeats what the category nav already
 * says; the thumbnails can be smaller. Together that brings the choice into
 * the first screen. */
@media (max-width: 480px) {
	.single-product .woocommerce-breadcrumb { display: none !important; }
	.it-gallery__thumbs { margin-top: var(--it-s2); }
	.it-gallery__thumbs button { width: 42px; height: 42px; }
	.single-product div.product .product-details-wrapper { padding-top: var(--it-s3); gap: var(--it-s3); }
}

/* Both modes side by side at EVERY width. Stacked at 320px, only "Ladder"
 * fitted on the first screen and "Non-Ladder" sat below it -- a phone user
 * could buy without ever seeing that the other realm existed. Two narrow
 * cards keep the choice a choice. On small screens each card keeps its name
 * and price; the availability/SKU line goes, since the SKU is also in the
 * cart and on the order. */
@media (max-width: 400px) {
	.it-modes { grid-template-columns: 1fr 1fr !important; gap: var(--it-s2); }
	.it-mode { padding: var(--it-s3); }
	.it-mode__avail { display: none; }
	.it-mode__price { font-size: var(--it-fs-md); }
	.it-mode[data-selected="true"]::after { display: none; }
}

/* WooCommerce's hidden variation price/availability elements still carried
 * margins, leaving a ~50px gap between the price and the mode cards. */
.woocommerce div.product .single_variation_wrap .woocommerce-variation,
.woocommerce div.product table.variations { margin: 0 !important; padding: 0 !important; }
.woocommerce div.product form.cart { margin-top: var(--it-s4) !important; }

/* Stats on the product page (inc/v2.php). Follows the chosen specification:
 * its own tooltip when its listing published one, else the product's
 * reference, labelled as such. Never printed without an image behind it. */
.it-pstats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 12px; }
.it-pstats[hidden] { display: none; }
.it-pstats__btn {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
	border: 1px solid var(--it-accent-line); border-radius: var(--it-r-pill); background: var(--it-accent-soft);
	color: inherit; font: inherit; font-size: var(--it-fs-sm, 14px); cursor: pointer;
}
.it-pstats__btn:hover, .it-pstats__btn:focus-visible { border-color: var(--it-accent); }
.it-pstats__note { color: var(--it-text-muted); font-size: var(--it-fs-xs, 12px); }
.it-pstats[data-kind="reference"] .it-pstats__note { color: var(--it-warn); }