/* =============================================================================
   PDP  —  assets/css/product.css                                [tuju-product]
   Loaded on is_product() only (inc/product.php), after tokens.css + base.css.

   Every number below was MEASURED over CDP against ugloz.is at 1440 / 820 / 390:
     scrape/source-cdp/pdp-phase4.json   (box model + type, 4 products x 3 viewports)
     scrape/source-cdp/pdp-phase4b.json  (per-side borders, shadows, hover states)
   generated by scrape/probe-pdp.mjs and scrape/probe-pdp2.mjs.

   Layout at 1440: content column 1280px  ->  gallery 614.4 (48%) | gap 51.2 (4%) |
   summary 614.4 (48%). At 820: 690px -> 331.2 | 27.6 | 331.2. At 390: stacked, 360px.
   That is WooCommerce's own float layout; the source does not replace it, so neither
   do we — this file only restyles it.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Page-title bar
   The PDP bar carries NO <h1 class="title">, only the crumb list, and it is
   SHORTER than the content-page bar: padding 20px 0 (height 70.4) vs 40px 0
   (height ~119) on /faq/ etc. The crumb list is centred (.breadcrumb-inner is
   justify-content:center here, not space-between).
   Scoped to body.single-product so the shared bar is untouched everywhere else.
   -------------------------------------------------------------------------- */
body.single-product .breadcrumb-area.breadcrumb-style-one {
	padding: 20px 0;
}
body.single-product .breadcrumb-style-one .breadcrumb-inner {
	justify-content: center;
}
@media only screen and (max-width: 767px) {
	/* separator padding halves at mobile: measured 0 10px, li width 20px */
	body.single-product .breadcrumb-style-one .breadcrumb-inner .page-list li.separator {
		padding: 0 10px;
	}
}

/* -----------------------------------------------------------------------------
   2. Product wrapper + SALE! flash
   The flash is a direct child of div.product, absolutely positioned 15px/15px
   from the TOP-LEFT of the gallery (the loop card puts it top-RIGHT — they
   differ). Woo's default is a 3.236em circle at top:-.5em;left:-.5em, so almost
   every property has to be reset.
   Measured: 52.6 x 25, padding 0 10px, 13px/25px, uppercase, #fff on #dd9933,
   radius 4px. Source text node is "Sale!"; CSS uppercases it to SALE!.
   -------------------------------------------------------------------------- */
.woocommerce div.product {
	position: relative;
}
.woocommerce div.product span.onsale {
	position: absolute;
	top: 15px;
	left: 15px;
	right: auto;
	z-index: 9;
	display: block;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	padding: 0 10px;
	margin: 0;
	font-family: var(--ugloz-font-primary);
	font-size: 13px;
	font-weight: var(--ugloz-w-regular);
	line-height: 25px;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--ugloz-primary);
	border-radius: var(--ugloz-radius-badge);
}

/* -----------------------------------------------------------------------------
   3. Gallery
   ONE image per product, 500x500 original, displayed at 614.4px. No zoom, no
   slider — the source enables PhotoSwipe ONLY (wc_single_product_params:
   photoswipe_enabled "1", zoom_enabled "", flexslider_enabled ""). The matching
   add_theme_support('wc-product-gallery-lightbox') lives in inc/product.php;
   it is also what makes Woo's JS fade the gallery's inline opacity:0 to 1.
   -------------------------------------------------------------------------- */
.woocommerce div.product div.images.woocommerce-product-gallery {
	width: 48%;
	float: left;
	margin: 0 0 32px;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	margin: 0;
	border-radius: var(--ugloz-radius-thumb);
	transform: none;
}
/* Measured: the gallery box is 629.4 tall while its only child (the wrapper) is 614.4, and
   both padding and margin compute to 0 on the source. A 15px tail sits under the image.
   Reproduced as a spacer pseudo-element so padding/margin stay 0 exactly as measured.
   It is not there at <=768px (source: gallery 360 = image 360). */
.woocommerce div.product div.images.woocommerce-product-gallery::after {
	content: "";
	display: block;
	height: 15px;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
}
.woocommerce div.product div.images img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: none;
	border-radius: var(--ugloz-radius-thumb);
}

/* -----------------------------------------------------------------------------
   4. Summary column
   -------------------------------------------------------------------------- */
.woocommerce div.product div.summary {
	width: 48%;
	float: right;
	clear: none;
	margin: 0 0 40px;
}

/* --- title: Montserrat 38/49.02/700 #c4cfde, mb 20 (NOT the 44px global h1) --- */
.woocommerce div.product .product_title {
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--ugloz-font-secondary);
	font-size: 38px;
	font-weight: var(--ugloz-w-bold);
	line-height: 49.02px;
	color: var(--ugloz-heading);
}

/* --- price ------------------------------------------------------------------
   The <p class="price"> BOX is 20px/38px, but the amount INSIDE it renders at
   16px / 30.4px in the heading colour #c4cfde — measured, and the reason the
   source's "$160.00" is 58.8px wide where a 20px render would be 73.4px.
   On sale: struck regular price at 70% opacity, a literal space, then the sale
   price in an <ins> with 5px side padding. Both amounts are the same size and
   colour; only the strike + opacity distinguish them.                        */
.woocommerce div.product p.price {
	display: inline-block;
	margin: 0 0 20px;
	font-family: var(--ugloz-font-primary);
	font-size: 20px;
	font-weight: var(--ugloz-w-regular);
	line-height: 38px;
	color: var(--ugloz-body);
}
.woocommerce div.product p.price del {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-weight: var(--ugloz-w-regular);
	color: inherit;
	opacity: 0.7;
	text-decoration: line-through;
}
.woocommerce div.product p.price ins {
	display: inline-block;
	margin: 0;
	padding: 0 5px;
	font-weight: var(--ugloz-w-bold);
	color: #fff;
	background: none;
	text-decoration: none;
}
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product p.price bdi,
.woocommerce div.product p.price .woocommerce-Price-currencySymbol {
	font-size: var(--ugloz-fs-body);
	font-weight: var(--ugloz-w-regular);
	line-height: 30.4px;
	color: var(--ugloz-heading);
}

/* --- div.product_meta = the "SKU:: XXX" line (priority 15) ------------------- */
.woocommerce div.product .summary .product_meta {
	display: flex;
	align-items: center;
	margin: 0 0 15px;
	padding: 0;
	border: 0;
	font-family: var(--ugloz-font-primary);
	font-size: var(--ugloz-fs-body);
	line-height: 30.4px;
	color: var(--ugloz-body);
}
.woocommerce div.product .summary .product_meta .sku {
	display: block;
	padding: 0 5px;
	line-height: 32px;
	color: #757589; /* rgb(117,117,137) — same muted tone as the card price */
}

/* --- ul.available_coupons_with_product: empty, but 40px tall in effect ------ */
.woocommerce div.product .summary ul.available_coupons_with_product {
	margin: 0 0 40px;
	padding: 0 0 0 20px;
	list-style: none;
}

/* -----------------------------------------------------------------------------
   5. Short description
   Only 2 of 59 products have one, and both are genuine "temporarily out of
   stock, try these instead" notices. Hairline rules above AND below, 15px 0.
   Product DESCRIPTIONS are being written in a later pass (brief Decision 4);
   nothing is invented here, but this block styles whatever arrives.
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 0 0 20px;
	padding: 15px 0;
	border-top: 1px solid var(--ugloz-border);
	border-bottom: 1px solid var(--ugloz-border);
}
.woocommerce div.product .woocommerce-product-details__short-description p {
	margin: 0 0 20px;
	font-size: var(--ugloz-fs-body);
	line-height: 30.4px;
	color: var(--ugloz-body);
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}
.woocommerce div.product .woocommerce-product-details__short-description a {
	color: var(--ugloz-heading);
	transition: 0.4s ease-in-out;
}
.woocommerce div.product .woocommerce-product-details__short-description a:hover {
	color: var(--ugloz-primary);
}
/* the source's short descriptions contain wp-embed fallbacks; keep them contained */
.woocommerce div.product .woocommerce-product-details__short-description iframe {
	max-width: 100%;
}

/* -----------------------------------------------------------------------------
   6. Stock line
   Woo already sizes it .92em (14.72px). Colours are InBio's, not Woo's.
   -------------------------------------------------------------------------- */
.woocommerce div.product p.stock {
	margin: 0 0 30px;
	font-family: var(--ugloz-font-primary);
	font-size: 14.72px;
	font-weight: var(--ugloz-w-regular);
	line-height: 27.968px;
}
.woocommerce div.product p.stock.in-stock {
	color: #958e09; /* rgb(149,142,9) */
}
.woocommerce div.product p.stock.out-of-stock {
	color: #a00; /* rgb(170,0,0) */
}

/* -----------------------------------------------------------------------------
   7. Add-to-cart form
   Quantity keeps Woo's 3.631em width (= 65.34px at 18px) and gets InBio's
   neumorphic inset-free shadow; the button is the standard gold pill-less
   button, 14px/500/uppercase, radius 6px, and inverts on hover.
   -------------------------------------------------------------------------- */
.woocommerce div.product form.cart {
	margin: 0 0 17px;
}
.woocommerce div.product form.cart::after {
	content: "";
	display: table;
	clear: both;
}
.woocommerce div.product form.cart div.quantity {
	float: left;
	margin: 0 8px 0 0;
}
.woocommerce div.product form.cart .quantity input.qty {
	width: 3.631em;
	height: 47px;
	padding: 5px;
	margin: 0;
	font-family: var(--ugloz-font-primary);
	font-size: 18px;
	font-weight: var(--ugloz-w-regular);
	line-height: 28px;
	text-align: center;
	color: var(--ugloz-body);
	background: transparent;
	border: 0;
	border-radius: var(--ugloz-radius-btn);
	box-shadow: var(--ugloz-shadow-1);
	transition: 0.4s ease-out;
}
.woocommerce div.product form.cart .quantity input.qty:focus {
	outline: none;
	color: var(--ugloz-heading);
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
	display: block;
	float: left;
	width: auto;
	padding: 12px 20px;
	margin: 0;
	font-family: var(--ugloz-font-primary);
	font-size: 14px;
	font-weight: var(--ugloz-w-medium);
	line-height: 14px;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	background: var(--ugloz-primary);
	border: var(--ugloz-border-width) solid transparent;
	border-radius: var(--ugloz-radius-btn);
	cursor: pointer;
	transition: 0.3s;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:focus {
	background: transparent;
	color: var(--ugloz-primary);
	border-color: var(--ugloz-primary);
}

/* -----------------------------------------------------------------------------
   8. div.product-meta = the Category / Categories line (priority 40)
   -------------------------------------------------------------------------- */
.woocommerce div.product .summary .product-meta {
	margin: 0;
	font-family: var(--ugloz-font-primary);
	font-size: var(--ugloz-fs-body);
	line-height: 30.4px;
	color: var(--ugloz-body);
}
.woocommerce div.product .summary .product-meta a {
	color: var(--ugloz-heading);
	transition: 0.4s ease-in-out;
}
.woocommerce div.product .summary .product-meta a:hover {
	color: var(--ugloz-primary);
}

/* =============================================================================
   9. BACK-IN-STOCK NOTIFIER  (net-new — brief "Net-new work" item 1)
   Panel DOM + every dimension copied from the source's rendered out-of-stock
   PDP. The source runs a plugin we deliberately do NOT install; only the
   submit path differs (real POST -> admin email -> /subscription-confirmation/).
   Bootstrap's .panel/.col-md-12/.center-block are not in base.css, so the few
   rules those need are declared here, scoped to the panel.
   ========================================================================== */
.cwginstock-subscribe-form {
	display: block;
}
.cwginstock-subscribe-form .cwginstock-panel-primary {
	margin: 0 0 20px;
	border: 1px solid var(--ugloz-e-text);
	border-radius: var(--ugloz-radius-badge);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
/* The heading holds the H4 and, on 6 of the 17 out-of-stock products, a verbatim
   per-product stock note underneath it (see inc/product.php + tools/import-bis-notices.php). */
.cwginstock-subscribe-form .cwginstock-panel-heading {
	padding: 10px 15px;
	background-color: var(--ugloz-e-text);
	border-bottom: 1px solid var(--ugloz-e-text);
	border-radius: var(--ugloz-radius-sm) var(--ugloz-radius-sm) 0 0;
	font-family: var(--ugloz-font-primary);
	font-size: var(--ugloz-fs-body);
	line-height: 30.4px;
	color: #fff;
}
.cwginstock-subscribe-form .cwginstock-panel-heading h4 {
	margin: 0 0 20px;
	font-family: var(--ugloz-font-secondary);
	font-size: 18px;
	font-weight: var(--ugloz-w-bold);
	line-height: 22.5px;
	color: #fff;
}
.cwginstock-subscribe-form .cwginstock-panel-body {
	padding: 15px;
}
.cwginstock-subscribe-form .ugloz-bis-form {
	margin: 0;
}
.cwginstock-subscribe-form .col-md-12 {
	position: relative;
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
	padding-right: 15px;
	padding-left: 15px;
}
.cwginstock-subscribe-form .form-group {
	margin: 0 0 15px;
}
.cwginstock-subscribe-form input.cwgstock_email {
	display: inline-block;
	height: 50px;
	padding: 0 20px;
	margin: 0 0 15px;
	font-family: var(--ugloz-font-primary);
	font-size: 22px;
	font-weight: var(--ugloz-w-regular);
	line-height: 28px;
	text-align: center;
	color: var(--ugloz-body);
	background-color: #f0f2f5;
	border: 1px solid transparent;
	border-radius: var(--ugloz-radius-badge);
	transition: 0.4s;
}
.cwginstock-subscribe-form input.cwgstock_email:focus {
	outline: none;
	border-color: var(--ugloz-primary);
}
.cwginstock-subscribe-form input.cwgstock_button {
	display: inline-block;
	height: 50px;
	padding: 0 30px;
	margin: 0;
	font-family: var(--ugloz-font-primary);
	font-size: var(--ugloz-fs-body);
	font-weight: var(--ugloz-w-medium);
	line-height: 27.2px;
	text-align: center;
	color: #fff;
	background-color: var(--ugloz-e-text);
	border: var(--ugloz-border-width) solid var(--ugloz-primary);
	border-radius: 500px;
	cursor: pointer;
	transition: 0.4s;
}
.cwginstock-subscribe-form input.cwgstock_button:hover,
.cwginstock-subscribe-form input.cwgstock_button:focus {
	background-color: var(--ugloz-primary);
	color: #fff;
}
.cwginstock-subscribe-form .cwgstock_output {
	margin: 0;
}
.cwginstock-subscribe-form .ugloz-bis-error {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 22px;
	text-align: center;
	color: #ff6b6b;
}
/* honeypot — never visible, never announced */
.cwginstock-subscribe-form .ugloz-hnp-wrap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =============================================================================
   9b. INLINE PRODUCT DESCRIPTION  (brief Decision 4b, 2026-08-02)
   ⚠ NOT SOURCE-DERIVED. ugloz.is has no product descriptions and no tab block
   anywhere, so there is nothing to measure against. Decision 4 adds all 59 as a
   deliberate scope add; Decision 4b renders them as INLINE PROSE, not in a tab —
   a one-tab bar would be UI the source never had, and it would hide the page's
   only unique text behind an interaction.

   inc/product.php now removes Woo's tab block unconditionally and echoes the
   description here instead. It emits NOTHING when the description is empty, so a
   PDP without copy stays byte-identical to the source.

   Type scale below is the theme's own body scale (16px / 30.4px, --ugloz-body),
   matching the short-description block above so the two read as one column.
   ========================================================================== */
.woocommerce div.product .ugloz-product-description {
	clear: both;
	margin: 0;
	padding-top: 40px;
	color: var(--ugloz-body);
}
.woocommerce div.product .ugloz-product-description p {
	margin: 0 0 30px;
	font-family: var(--ugloz-font-primary);
	font-size: var(--ugloz-fs-body);
	line-height: 30.4px;
	color: var(--ugloz-body);
}
.woocommerce div.product .ugloz-product-description p:last-child {
	margin-bottom: 0;
}
.woocommerce div.product .ugloz-product-description a {
	color: var(--ugloz-heading);
	transition: 0.4s ease-in-out;
}
.woocommerce div.product .ugloz-product-description a:hover {
	color: var(--ugloz-primary);
}
.woocommerce div.product .ugloz-product-description ul,
.woocommerce div.product .ugloz-product-description ol {
	margin: 0 0 30px 20px;
	padding: 0;
}
.woocommerce div.product .ugloz-product-description li {
	margin: 0 0 10px;
	font-size: var(--ugloz-fs-body);
	line-height: 30.4px;
}
.woocommerce div.product .ugloz-product-description img {
	max-width: 100%;
	height: auto;
}

/* =============================================================================
   10. Responsive
   768px is WooCommerce's own smallscreen breakpoint, which is where the source
   stops floating the two columns (measured: 2 columns at 820, stacked at 390).
   ========================================================================== */
@media screen and (max-width: 768px) {
	.woocommerce div.product div.images.woocommerce-product-gallery {
		width: 100%;
		float: none;
		margin: 0 0 40px;
	}
	.woocommerce div.product div.images.woocommerce-product-gallery::after {
		display: none;
	}
	.woocommerce div.product div.summary {
		width: 100%;
		float: none;
		margin: 0 0 40px;
	}
	.woocommerce div.product p.stock {
		margin-bottom: 20px;
	}
	.woocommerce div.product form.cart .quantity input.qty {
		height: 42px;
	}
}