/**
 * Davelline Custom Plugin — Cart page brand styling
 * Palette matches the store's black/white + dusty mauve look.
 */

:root {
	--davelline-ink: #1a1a1a;
	--davelline-rose: #a97c82;
	--davelline-rose-light: #f5ecec;
}

/* ---------- Checkout section headings ---------- */
/* "Billing & Shipping" / "Your order" / "Additional information": the theme
   gives these an underline (border-bottom) plus a 24px margin-bottom, which
   leaves a big gap between the underline and the fields/table below it. */
.woocommerce-checkout.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading {
	margin-bottom: 12px !important;
	font-size: 13px !important;
}

/* Field labels (First Name, Last Name, etc.) */
.woocommerce-checkout.woocommerce-checkout .form-row label {
	font-size: 12px !important;
}

/* "Have a coupon?" toggle line — drop the top border */
.woocommerce-form-coupon-toggle .woocommerce-info {
	border-top: none !important;
}

/* ---------- Single product page ---------- */
/* The Elementor product-page container (gallery + summary row) has its own
   40px padding-top baked into the template — that's the real space above
   the image, not main.site-main (which has none by default). */
.single-product .elementor-element-37bfb38 {
	padding-top: 20px !important;
}

/* ---------- "Added to cart" notice ---------- */
/* Base box styling only (no forced flex here) so the notice still looks
   reasonable even if the .davelline-message-inner wrapper isn't present. */
.woocommerce-message {
	background: var(--davelline-rose-light) !important;
	border-top: none !important;
	border-left: 4px solid var(--davelline-rose) !important;
	border-radius: 4px;
	padding: 18px 20px !important;
	box-shadow: none !important;
	color: var(--davelline-ink);
}

.woocommerce-message::before {
	display: none !important;
}

/* thumbnail (left) + content column (right) */
.davelline-message-inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	flex-wrap: wrap;
}

.davelline-message-thumb {
	display: block;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}

.davelline-message-thumb img.davelline-added-thumb {
	width: 56px !important;
	height: 56px !important;
	max-width: 56px !important;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	display: block;
}

/* text on top, "Continue shopping" button below it */
.davelline-message-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	flex: 1 1 200px;
	min-width: 0;
}

.davelline-message-content a.button.wc-forward {
	order: 2;
}

/* ---------- "Continue shopping" button ---------- */

.woocommerce-message .button.wc-forward {
	background: transparent !important;
	border: 1px solid var(--davelline-ink);
	color: var(--davelline-ink) !important;
	padding: 10px 22px;
	border-radius: 2px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
	align-self: flex-start;
	transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-message .button.wc-forward:hover {
	background: var(--davelline-ink) !important;
	color: #fff !important;
}

/* ---------- Checkout "Your Order" thumbnails ---------- */

.woocommerce-checkout-review-order-table td.product-name {
	padding: 14px 12px !important;
	vertical-align: top;
}

.davelline-checkout-item {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
}

.davelline-checkout-thumb-wrap {
	display: block;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

.davelline-checkout-thumb-wrap img.davelline-checkout-thumb {
	width: 48px !important;
	height: 48px !important;
	max-width: 48px !important;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
	display: block;
}

.davelline-checkout-name {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.4;
}

/* the "× qty" strong tag WooCommerce prints right after our wrapper —
   indent it so it lines up under the product name instead of the thumbnail.
   WooCommerce's own template leaves a literal space between the name and
   this tag; once both are forced to display:block that whitespace renders
   as an ~16px empty line, so we pull it back up with a negative margin. */
.product-name .davelline-checkout-item + .product-quantity {
	display: block !important;
	margin-left: 60px !important;
	margin-top: -14px !important;
	font-weight: 400;
	color: #6b6b6b;
	font-size: 12.5px;
}

/* ---------- Checkout "Have a coupon?" form ---------- */
/* Default WooCommerce lays this out as two 47%-wide floated columns (meant
   for side-by-side fields like First/Last name), which leaves a large gap
   between the input and the button. Switch it to flex with a small gap. */

.woocommerce-form-coupon {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px !important;
}

.woocommerce-form-coupon.woocommerce-form-coupon .form-row-first,
.woocommerce-form-coupon.woocommerce-form-coupon .form-row-last {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-form-coupon .form-row-first {
	flex: 0 1 260px;
	max-width: 260px;
}

.woocommerce-form-coupon .form-row-last {
	flex: 0 0 auto;
}

.woocommerce-form-coupon .clear {
	display: none;
}

.woocommerce-form-coupon input#coupon_code {
	font-size: 12px !important;
}

.woocommerce-form-coupon button.button {
	background: transparent !important;
	border: 1px solid var(--davelline-ink) !important;
	color: var(--davelline-ink) !important;
	padding: 0 22px !important;
	min-height: 100%;
	border-radius: 2px;
	font-size: 13px !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-form-coupon button.button:hover {
	background: var(--davelline-ink) !important;
	color: #fff !important;
}

@media (max-width: 768px) {
	.woocommerce-form-coupon button.button {
		font-size: 12px !important;
		padding: 12px 22px !important;
		min-height: 0 !important;
	}
}

/* ---------- Cart table polish ---------- */

.woocommerce-cart-form table.shop_table,
.cart-collaterals .cart_totals table {
	border-radius: 6px;
	overflow: hidden;
}

table.shop_table tfoot tr:last-child th,
table.shop_table tfoot tr:last-child td {
	font-weight: 600;
}