/**
 * Performance T-Shirt Extras — frontend styles.
 *
 * Loaded only on single product pages via wp_enqueue_style() in the main
 * plugin file. Kept deliberately minimal and scoped under the .pt- prefix
 * (and standard WooCommerce class names like .price/.stock/.variations,
 * which are safe to target here since this file only loads on single
 * product pages) so nothing here leaks into or overrides unrelated
 * theme styles.
 *
 * No !important declarations and no inline styles are used anywhere —
 * specificity is handled through scoped class names instead.
 */

/* ---------------------------------------------------------------------
 * Variation selectors (Task 6)
 * ------------------------------------------------------------------- */
.variations {
	width: 100%;
	margin: 1em 0;
	border-collapse: collapse;
}

.variations th.label {
	text-align: left;
	font-weight: 600;
	padding: 0.4em 0.75em 0.4em 0;
	vertical-align: middle;
}

.variations td.value {
	padding: 0.4em 0;
	vertical-align: middle;
}

.variations select {
	min-width: 160px;
	padding: 0.5em 0.75em;
	font-size: 0.95em;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
}

.variations .reset_variations {
	margin-left: 0.75em;
	font-size: 0.85em;
}

/* Mobile: a two-column table is cramped on narrow screens — stack each
   label above its own select instead. */
@media ( max-width: 480px ) {
	.variations,
	.variations tbody,
	.variations tr,
	.variations th.label,
	.variations td.value {
		display: block;
		width: 100%;
	}

	.variations th.label {
		padding: 0.4em 0;
	}

	.variations select {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------
 * Price and sale-price presentation (Task 6)
 * ------------------------------------------------------------------- */
.price {
	font-size: 1.2em;
	font-weight: 600;
}

.price del {
	margin-right: 0.4em;
	font-weight: 400;
	opacity: 0.6;
}

.price ins {
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Stock status (Task 6)
 *
 * Styles WooCommerce's standard ".stock.in-stock" / ".stock.out-of-
 * stock" markup — which also automatically styles our own custom
 * "This combination is currently unavailable." message from Task 2,
 * since it reuses that same class pattern, keeping both consistent
 * with no extra rules needed.
 * ------------------------------------------------------------------- */
.stock {
	display: block;
	margin: 0.5em 0;
	font-size: 0.9em;
	font-weight: 700;
}

.stock.in-stock {
	color: #2e7d32;
}

.stock.out-of-stock {
	color: #b71c1c;
}

/* ---------------------------------------------------------------------
 * On-sale styling (Task 4 / Task 6)
 *
 * The 'pt-product-on-sale' class is added to <body> in PHP (see
 * pt_extras_add_on_sale_body_class()) only when the current product is
 * on sale. These rules are the actual *purpose* of that class: rather
 * than repeating "is this on sale?" checks in multiple places, PHP
 * checks once and stamps a flag on <body> that any CSS can key off.
 *
 * Selector deliberately targets plain ".price" rather than assuming a
 * classic-theme ".summary" wrapper — block-based (FSE) product
 * templates use different container markup, so ".price" alone is the
 * more portable target. Safe to keep broad here since this stylesheet
 * only loads on single product pages, and the body class itself is
 * only ever added there.
 * ------------------------------------------------------------------- */
body.pt-product-on-sale .price {
	color: #c0392b;
}

body.pt-product-on-sale .price ins {
	font-weight: 700;
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * SKU beneath the product title (Task 4 / Task 6)
 * ------------------------------------------------------------------- */
.pt-product-sku {
	margin: 0.15em 0 1em;
	font-size: 0.85em;
	color: #666;
}

/* ---------------------------------------------------------------------
 * Dispatch message (Task 2 / Task 6)
 * ------------------------------------------------------------------- */
.pt-dispatch-message {
	margin: 0.75em 0;
	padding: 0.6em 0.9em;
	font-size: 0.95em;
	color: #2e7d32;
	background-color: #eef7ee;
	border-left: 3px solid #2e7d32;
	border-radius: 3px;
}

/* ---------------------------------------------------------------------
 * "Why buy from us?" section (Task 3 / Task 6)
 * ------------------------------------------------------------------- */
.pt-why-buy {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid #e2e2e2;
}

.pt-why-buy__heading {
	font-size: 1.15em;
	margin-bottom: 0.75em;
}

.pt-why-buy__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-why-buy__item {
	padding: 0.25em 0;
}

.pt-why-buy__icon {
	font-size: 1em;
	margin-right: 0.35em;
}

.pt-why-buy__label {
	font-size: 0.95em;
}

/* This layout is naturally responsive already — a plain vertical list
   needs no breakpoint changes for mobile, so no media query is required
   here (unlike the flex-grid version this replaced). */

/* ---------------------------------------------------------------------
 * Free shipping promo message (Task 5 / Task 6 — added when that task
 * is implemented; class name reserved here so styling stays together)
 * ------------------------------------------------------------------- */
.pt-free-shipping-message {
	display: none; /* toggled visible via JS when the threshold is met */
	margin: 0.75em 0;
	padding: 0.6em 0.9em;
	font-size: 0.95em;
	color: #0b5394;
	background-color: #e8f1fb;
	border-left: 3px solid #0b5394;
	border-radius: 3px;
}

.pt-free-shipping-message.is-visible {
	display: block;
}