/**
 * FRESHERS — Single Product Page
 * Styles for the custom markup output by functions.php.
 * Place in the child theme root: /wp-content/themes/organify-child/freshers-single-product.css
 */

:root {
	--fr-green:       #00853a;
	--fr-green-dark:  #006b2e;
	--fr-green-tint:  #e6f3ec;
	--fr-ink:         #1f2933;
	--fr-body:        #444444;
	--fr-muted:       #6b7280;
	--fr-line:        #e4e7ea;
	--fr-radius:      6px;
}

/* =========================================================
   1. LAYOUT FIXES
   ========================================================= */

/* The theme's summary row only ever renders `.col-xl-7`, leaving a dead
   41.7% gutter. Let the single column take the full width. */
.single-product .woocommerce-summary--entry.row > .woocommerce-summary-content {
	flex: 0 0 100%;
	max-width: 100%;
}

/* `.woocommerce-summary-wrap` is a Bootstrap `.row` (display:flex, -15px side
   margins). The gallery and summary carry `col-*` classes; the tabs and
   related-products blocks were dropped in WITHOUT one, so they collapse to
   `flex: 0 1 auto` with no gutter padding — which is why "Additional
   information" sits in a narrow 414px block beside the summary and why the
   related products run flush off the left edge. Give them a full row. */
.single-product .woocommerce-summary-wrap.row > .woocommerce-tabs,
.single-product .woocommerce-summary-wrap.row > .related.products,
.single-product .woocommerce-summary-wrap.row > .upsells.products,
.single-product .woocommerce-summary-wrap.row > .freshers-good-to-know {
	flex: 0 0 100%;
	max-width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}

/* Breathing room between the buy box and what follows it. */
.single-product .woocommerce-summary-wrap.row > .woocommerce-tabs {
	margin-top: 40px;
}

/* =========================================================
   2. IN SEASON BADGE
   ========================================================= */

.freshers-badge-in-season {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--fr-green-tint);
	color: var(--fr-green-dark);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* =========================================================
   3. PRICE UNIT ("per 1 LB")
   ========================================================= */

.freshers-price-unit {
	margin-left: 6px;
	color: var(--fr-muted);
	font-size: 14px;
	font-weight: 400;
}

/* =========================================================
   4. SIZE SWATCHES
   ========================================================= */

.freshers-size-label {
	margin: 22px 0 8px;
	color: var(--fr-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.freshers-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

/* The parent theme styles every <button> with `!important`, so the swatch
   colours have to be flagged too or they stay solid green. */
.freshers-swatches button.freshers-swatch {
	appearance: none;
	-webkit-appearance: none;
	min-width: 58px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid var(--fr-line) !important;
	border-radius: var(--fr-radius);
	background: #fff !important;
	box-shadow: none !important;
	color: var(--fr-ink) !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.freshers-swatches button.freshers-swatch strong {
	font-weight: inherit;
	color: inherit;
}

.freshers-swatches button.freshers-swatch:hover {
	border-color: var(--fr-green) !important;
	background: #fff !important;
	color: var(--fr-green-dark) !important;
}

.freshers-swatches button.freshers-swatch:focus-visible {
	outline: 2px solid var(--fr-green);
	outline-offset: 2px;
}

/* Selected state — covers the common class names a swatch script might set.
   Check freshers-swatches.js and keep whichever one it actually applies. */
.freshers-swatches button.freshers-swatch.is-active,
.freshers-swatches button.freshers-swatch.active,
.freshers-swatches button.freshers-swatch.selected,
.freshers-swatches button.freshers-swatch[aria-pressed="true"] {
	border-color: var(--fr-green) !important;
	background: var(--fr-green) !important;
	color: #fff !important;
}

.freshers-swatches button.freshers-swatch[disabled],
.freshers-swatches button.freshers-swatch.is-unavailable {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* =========================================================
   5. NATIVE VARIATION DROPDOWN
   ========================================================= */

/* Hide the duplicate WooCommerce dropdown, but ONLY where swatches actually
   rendered. `:has()` means that if the swatch markup is ever absent the
   dropdown stays visible and the product remains buyable. */
.summary:has(.freshers-swatches) form.variations_form table.variations {
	display: none;
}

/* Fallback styling for the dropdown wherever it IS shown (no `:has()`
   support, simple products, or if you remove the rule above).
   The default table layout leaves the label floating beside the select. */
.single-product form.variations_form table.variations {
	display: block;
	width: 100%;
	margin: 0 0 20px;
	border: 0;
}

.single-product form.variations_form table.variations tbody,
.single-product form.variations_form table.variations tr {
	display: block;
	width: 100%;
}

.single-product form.variations_form table.variations th,
.single-product form.variations_form table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
	vertical-align: baseline;
}

.single-product form.variations_form table.variations th label {
	display: block;
	margin: 0 0 6px;
	color: var(--fr-ink);
	font-size: 15px;
	font-weight: 600;
}

.single-product form.variations_form table.variations select {
	width: 100%;
	max-width: 320px;
}

/* =========================================================
   6. TRUST ROW
   ========================================================= */

.freshers-trust-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 16px;
	margin: 26px 0 22px;
	padding: 20px 0 20px;
	border-top: 1px solid var(--fr-line);
}

.freshers-trust-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.freshers-trust-item::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background-color: var(--fr-green-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300853a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

/* The inner wrapper holds <strong> + <span>, which are both inline by
   default — that is what produced "Free shippingOn orders over £20". */
.freshers-trust-item > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.freshers-trust-item strong {
	color: var(--fr-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.freshers-trust-item span {
	color: var(--fr-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* =========================================================
   7. GOOD TO KNOW
   ========================================================= */

.freshers-good-to-know {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	width: 100%;
	margin: 48px 0;
	padding: 32px 0 0;
	border-top: 1px solid var(--fr-line);
}

/* This theme fires `woocommerce_after_single_product_summary` INSIDE the
   `.summary` div, so "Good to know" renders in the 58%-wide right column
   rather than full width. Keep it single-column while it lives there. */
.summary > .freshers-good-to-know {
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 32px 0 0;
}

.freshers-good-to-know h2 {
	margin: 0 0 12px;
	color: var(--fr-ink);
	font-size: 26px;
	line-height: 1.25;
}

.freshers-good-to-know p {
	margin: 0;
	color: var(--fr-body);
	font-size: 16px;
	line-height: 1.65;
}

.freshers-good-to-know p:empty {
	display: none;
}

.freshers-attr-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 0;
	border-bottom: 1px solid var(--fr-line);
}

.freshers-attr-row:last-child {
	border-bottom: 0;
}

.freshers-attr-label {
	flex: 0 0 auto;
	color: var(--fr-muted);
	font-size: 14px;
}

.freshers-attr-value {
	min-width: 0;
	color: var(--fr-ink);
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	word-break: break-word;
}


/* =========================================================
   8. RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
	.freshers-good-to-know {
		grid-template-columns: 1fr;
		gap: 28px;
		margin: 36px 0;
	}
}

@media (max-width: 767px) {
	.freshers-trust-row {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.freshers-good-to-know h2 {
		font-size: 22px;
	}

	.freshers-swatches button.freshers-swatch {
		flex: 1 1 auto;
	}
}