/**
 * Single product page polish.
 *
 * The summary column was an assortment of unrelated treatments: a square Add to
 * Cart button next to a rounded quantity box, a black "Check" button on the
 * pincode widget fighting the green everywhere else, underlined text links for
 * wishlist/compare, and a bare grid for the attribute table. Nothing here
 * changes layout or copy - it puts the existing pieces on one set of tokens:
 *
 *   green   #94c347  (the Add to Cart colour, already used by the swatches)
 *   hover   #83b03c
 *   hairline #e9e9e9
 *   radius  4px controls, 8px cards
 *
 * Scoped to .woocommerce div.product so shop/archive product cards, which have
 * their own treatment, are untouched.
 */

/* ------------------------------------------------ Quantity + Add to cart */

/*
 * The button measured 47px against the quantity box's 50px, so the two sat on
 * different baselines. Matching the height with inline-flex centring rather
 * than padding keeps the cart icon and label centred whatever the font does.
 * The quantity box's own height is left alone - the +/- stepper is positioned
 * against it by quantity-stepper.js.
 */
.woocommerce div.product .summary .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	border-radius: 4px;
	letter-spacing: 0.04em;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce div.product .summary .single_add_to_cart_button:hover,
.woocommerce div.product .summary .single_add_to_cart_button:focus {
	background-color: #83b03c;
	box-shadow: 0 4px 14px rgba(148, 195, 71, 0.32);
}

.woocommerce div.product .summary .quantity {
	border-radius: 4px;
}

/* ------------------------------------------------------- Pincode checker */

/*
 * No frame on the inner block. The plugin nests .inext_wpc_card_inner inside
 * .inext_wpc_wrapper, and giving the inner one a card treatment drew a second
 * rectangle starting a pixel above the "Use pincode" heading (measured: inner
 * border at y=889, heading text at y=890) inside the wrapper's own frame.
 * The wrapper is the frame; this stays bare so there is only one box.
 */
.woocommerce div.product .summary .inext_wpc_card_inner {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce div.product .summary .inext_wpc_heading .inext_wpc_title {
	font-size: 14px;
	letter-spacing: 0.02em;
	color: #333;
}

/*
 * The field carried a hard #444 border, heavier than anything around it.
 * padding-left is left as the plugin sets it - that space is reserved for the
 * location icon it positions absolutely inside the field.
 */
.woocommerce div.product .summary .inext_wpc_input {
	border: 1px solid #e9e9e9;
	border-radius: 4px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce div.product .summary .inext_wpc_input:focus {
	border-color: #94c347;
	box-shadow: 0 0 0 3px rgba(148, 195, 71, 0.14);
	outline: 0;
}

/* Was #333 - the only dark button on the page, right beside a green one. */
.woocommerce div.product .summary .inext_wpc_button {
	background-color: #94c347;
	border: 0;
	border-radius: 4px;
	color: #fff;
	letter-spacing: 0.03em;
	transition: background-color 0.25s ease;
}

.woocommerce div.product .summary .inext_wpc_button:hover {
	background-color: #83b03c;
}

/* Kept visibly inert until a pincode has been typed. */
.woocommerce div.product .summary .inext_wpc_button.disabled {
	background-color: #dcdcdc;
	color: #fff;
	cursor: not-allowed;
}

/* -------------------------------------------------- Wishlist and compare */

/*
 * Both were underlined text links of slightly different colours. As quiet
 * outlined pills they read as the secondary actions they are, and they pick up
 * the page's green on hover instead of a browser underline.
 */
/*
 * YITH 4.x renders the wishlist control as .yith-add-to-wishlist-button-block,
 * not the legacy .yith-wcwl-add-to-wishlist - both are matched so the pill
 * survives either version of the plugin.
 */
/*
 * The #content variant is required, not decorative: organico-base.css styles
 * this control through a selector list that includes
 * ".woocommerce #content div.product .summary .compare" (1,4,1), which outranks
 * a plain .summary a.compare (0,4,2). That same rule also forces a grey
 * background, #999 text, a fixed 35px height and radius 0, so each of those has
 * to be restated here rather than just the ones being changed.
 */
.woocommerce #content div.product .summary .yith-add-to-wishlist-button-block,
.woocommerce #content div.product .summary .yith-wcwl-add-to-wishlist,
.woocommerce #content div.product .summary a.compare,
.woocommerce div.product .summary .yith-add-to-wishlist-button-block,
.woocommerce div.product .summary .yith-wcwl-add-to-wishlist,
.woocommerce div.product .summary a.compare {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/*
	 * Same 50px as .single_add_to_cart_button, so the secondary actions line up
	 * with the primary one above them. min-height rather than height because
	 * the label can wrap on a narrow screen; align-items keeps the icon and
	 * text centred in whatever height results. "height: auto" still has to be
	 * stated to clear the theme's fixed 35px on .compare.
	 */
	height: auto;
	min-height: 50px;
	margin: 0 10px 10px 0;
	padding: 8px 18px;
	background-color: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.2;
	color: #666;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/*
 * The underline sat on the inner <a>/<span>, not on the element being turned
 * into a pill, so it had to be cleared on the descendants too.
 */
.woocommerce div.product .summary .yith-add-to-wishlist-button-block,
.woocommerce div.product .summary .yith-add-to-wishlist-button-block a,
.woocommerce div.product .summary .yith-add-to-wishlist-button-block span,
.woocommerce div.product .summary .yith-wcwl-add-to-wishlist a,
.woocommerce div.product .summary a.compare,
.woocommerce div.product .summary a.compare span {
	text-decoration: none;
	border-bottom: 0;
	color: inherit;
}

/*
 * The label inside each pill carries a fixed 35px height/line-height from the
 * theme, which added up to 53px once padding and border were included - 3px
 * taller than Add to Cart, and immune to the pill's own min-height. Letting the
 * label size to its text hands control back to min-height, so both pills land
 * on exactly 50px.
 */
.woocommerce #content div.product .summary a.compare span,
.woocommerce div.product .summary a.compare span,
.woocommerce #content div.product .summary .yith-add-to-wishlist-button-block a,
.woocommerce #content div.product .summary .yith-add-to-wishlist-button-block span,
.woocommerce div.product .summary .yith-add-to-wishlist-button-block a,
.woocommerce div.product .summary .yith-add-to-wishlist-button-block span {
	height: auto;
	min-height: 0;
	line-height: 1.2;
}

/*
 * The compare icon is a :before glyph the theme gives "float:left" and
 * "line-height:35px", which inflated the pill to 53px against the wishlist's
 * 37px. Inside a flex row the float is meaningless and the tall line box is
 * what stretches it, so both are normalised and the glyph is centred by the
 * flex container instead.
 */
.woocommerce #content div.product .summary a.compare::before,
.woocommerce div.product .summary a.compare::before {
	float: none;
	line-height: 1;
	margin: 0;
	font-size: 14px;
	color: inherit;
}

.woocommerce #content div.product .summary .yith-add-to-wishlist-button-block:hover,
.woocommerce #content div.product .summary .yith-wcwl-add-to-wishlist:hover,
.woocommerce #content div.product .summary a.compare:hover,
.woocommerce div.product .summary .yith-add-to-wishlist-button-block:hover,
.woocommerce div.product .summary .yith-wcwl-add-to-wishlist:hover,
.woocommerce div.product .summary a.compare:hover {
	color: #94c347;
	border-color: #94c347;
	background-color: rgba(148, 195, 71, 0.06);
}

/* --------------------------------------------------------------- Meta */

.woocommerce div.product .summary .product_meta {
	padding-top: 18px;
	border-top: 1px solid #f0f0f0;
	font-size: 14px;
	color: #777;
}

.woocommerce div.product .summary .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

.woocommerce div.product .summary .product_meta a {
	color: #94c347;
}

.woocommerce div.product .summary .product_meta a:hover {
	color: #83b03c;
}

/* --------------------------------------------------------------- Share */

.woocommerce div.product .summary .product-social-share ul.ftc-social-sharing li a {
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.woocommerce div.product .summary .product-social-share ul.ftc-social-sharing li a:hover {
	color: #fff;
	border-color: #94c347;
	background-color: #94c347;
}

/* ------------------------------------------------- Summary -> tabs gap */

/*
 * .woocommerce-tabs ships as "margin: 0 -15px 55px" - 55px underneath, nothing
 * above - so the tab row started at exactly the pixel the summary column ended
 * (measured: share row bottom 1189, tabs top 1189). The share icons ran
 * straight into the tabs with no separation at all.
 *
 * The space goes on the tabs rather than under the share row because either
 * column can be the taller one: on a product with a tall gallery the summary
 * is not what the tabs sit under, and a margin on the share row would then do
 * nothing.
 *
 * It has to be padding, not margin. .summary and .images are floated and the
 * tab row clears them, and clearance absorbs a top margin - setting
 * margin-top:50px moved the tabs by exactly nothing (measured: still top=1189,
 * flush against the summary). Padding is applied inside the box, so clearance
 * cannot eat it. The -15px side bleed and the existing 55px below are left
 * alone.
 */
.woocommerce div.product .woocommerce-tabs {
	padding-top: 50px;
}

@media only screen and (max-width: 767px) {
	.woocommerce div.product .woocommerce-tabs {
		padding-top: 34px;
	}
}

/* ---------------------------------------- "Additional information" table */

/*
 * WooCommerce's attribute table ships as a plain bordered grid, and the theme
 * only lightly patches its borders, so the panel read as a bare spreadsheet
 * sitting inside a second, unrelated box. This turns it into one card: rounded,
 * softly shadowed, the label column set as a quiet uppercase caption against a
 * tinted rail, with the green used as a marker rather than as decoration.
 *
 * The .woocommerce-Tabs-panel--additional_information prefix keeps Description
 * and Reviews untouched, and lifts specificity above organico-base.css's own
 * "tr:nth-child(even) td" zebra and "tr:last-child td{border:1px solid}" rules
 * (0,3,3), which would otherwise keep repainting these cells.
 */
.woocommerce div.product .woocommerce-Tabs-panel--additional_information {
	border: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes {
	width: 100%;
	margin: 0;
	/* separate + hidden overflow is what lets the corners actually round;
	   with collapsed borders the cells paint over the radius. */
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #ebebeb;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes th,
.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	padding: 18px 26px;
	vertical-align: middle;
	text-align: left;
	font-style: normal;
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes tr:last-child th,
.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes tr:last-child td {
	border-bottom: 0;
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes th {
	position: relative;
	width: 230px;
	background: #fafafa;
	border-right: 1px solid #f0f0f0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #777;
}

/* Small green marker so each row reads as an entry, not a spreadsheet cell. */
.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes th::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 20px;
	border-radius: 0 2px 2px 0;
	background: #94c347;
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes td {
	background: #fff;
	color: #444;
	font-size: 15px;
	line-height: 27px;
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes tr:hover td {
	background: #fbfdf7;
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes tr:hover th {
	background: #f6f8f2;
}

/* ----------------------------------------------------------- Responsive */

@media only screen and (max-width: 575px) {
	/* Full-width primary action, and the secondary pills side by side under it. */
	.woocommerce div.product .summary .single_add_to_cart_button {
		width: 100%;
		margin-top: 12px;
	}

	.woocommerce div.product .summary .yith-wcwl-add-to-wishlist,
	.woocommerce div.product .summary a.compare {
		margin-bottom: 8px;
	}

	/*
	 * A 230px label rail leaves almost nothing for a long value like the full
	 * list of weights, so below this width each row stacks: caption on top,
	 * value under it. The cells have to become blocks for that.
	 */
	.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes th,
	.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes td {
		display: block;
		width: auto;
		padding: 14px 18px;
	}

	.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes th {
		border-right: 0;
		padding-bottom: 6px;
	}

	.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes td {
		padding-top: 8px;
	}

	.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes th::before {
		height: 14px;
	}
}