/* ===================================================================
   Outline Decor — Refinements Layer (v3)
   Loaded LAST (after global.css) so it wins specificity ties.
   Fully reversible: dequeue the "outline-refinements" handle to remove.
   Scope: premium depth on buttons & cards, generous whitespace,
          a11y focus states, and a mobile product-page overflow fix.
   =================================================================== */

/* ===== 1. Premium primary buttons =====
   Replaces the flat single-tone green with a subtle vertical gradient,
   soft directional shadow and a press-down micro-interaction. Works on
   WooCommerce buttons, the custom WhatsApp box and the YITH quote CTA. */
.btn.btn-style-default.btn-color-primary,
.btn.btn-style-default.btn-color-primary:visited,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit#submit,
.outline-whatsapp-buy-btn,
.outline-whatsapp-buy-btn:visited,
.outline-yith-quote-btn .add-request-quote-button,
.outline-yith-quote-btn .single_add_to_quote_button,
.outline-load-more-button,
.outline-trust-whatsapp {
	background: linear-gradient(180deg, #3a7230 0%, #2f5d27 52%, #244a1e 100%) !important;
	border: 1px solid #214017 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 16px rgba(36, 74, 30, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12) !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.btn.btn-style-default.btn-color-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.outline-whatsapp-buy-btn:hover,
.outline-yith-quote-btn .add-request-quote-button:hover,
.outline-yith-quote-btn .single_add_to_quote_button:hover,
.outline-load-more-button:hover,
.outline-trust-whatsapp:hover {
	background: linear-gradient(180deg, #437f37 0%, #346626 52%, #27501f 100%) !important;
	border-color: #1e3b15 !important;
	filter: brightness(1.03) !important;
	box-shadow: 0 10px 22px rgba(36, 74, 30, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
	transform: translateY(-1px) !important;
}

.btn.btn-style-default.btn-color-primary:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.outline-whatsapp-buy-btn:active,
.outline-yith-quote-btn .add-request-quote-button:active,
.outline-yith-quote-btn .single_add_to_quote_button:active,
.outline-load-more-button:active,
.outline-trust-whatsapp:active {
	transform: translateY(0) !important;
	box-shadow: 0 3px 8px rgba(36, 74, 30, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	filter: brightness(0.97) !important;
}

/* ===== 2. Cards: resting elevation so they read as real surfaces,
   with a stronger lift on hover (the existing transitions still apply). ===== */
.outline-category-card,
.outline-ambiente-card,
.outline-service-card,
.outline-content-card,
.outline-pdp-context-card,
.outline-whatsapp-buy-box,
.outline-product-card,
.products.wd-products .wd-product .product-wrapper,
.products.wd-products .wd-product,
.page .entry-content,
.single-post .entry-content {
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}

.outline-category-card:hover,
.outline-ambiente-card:hover,
.outline-service-card:hover,
.outline-content-card:hover,
.outline-product-card:hover {
	box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06), 0 22px 44px rgba(15, 23, 42, 0.12) !important;
}

/* ===== 3. Generous section whitespace (premium rhythm) ===== */
.outline-front-page .outline-hero,
.outline-front-page .outline-categories,
.outline-front-page .outline-manifesto,
.outline-front-page .outline-ambientes,
.outline-front-page .outline-products,
.outline-front-page .outline-service-strip {
	margin-top: 96px;
}

.outline-section-head {
	margin-bottom: 34px;
}

/* Tighten the hero copy contrast slightly for a crisper first read. */
.outline-hero-lead {
	color: #3d4655;
	font-weight: 500;
}

/* Kicker chip above hero / section titles — a little accent dot for rhythm. */
.outline-kicker {
	color: #2f5d27;
}

/* ===== 4. Header depth =====
   A soft resting separator + shadow so the header reads as a distinct layer. */
.whb-header {
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

/* ===== 5. Accessible focus-visible states =====
   Replaces the default removed outline with a clear, on-brand focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.outline-catalog-quick-links a:focus-visible,
.outline-product-link:focus-visible,
.outline-product-whatsapp:focus-visible {
	outline: 2px solid #2f5d27 !important;
	outline-offset: 2px !important;
	border-radius: 6px;
}

/* ===== 6. Mobile: fix horizontal overflow on single-product =====
   The price block + discount note could exceed the viewport at <=390px.
   Constrain widths and allow long tokens (prices, model codes) to wrap. */
@media (max-width: 767px) {
	.single-product .product,
	.single-product .summary,
	.single-product .summary > *,
	.single-product .woocommerce-product-gallery,
	.single-product .woocommerce-product-gallery__wrapper,
	.single-product .woocommerce-product-gallery__wrapper img,
	.single-product .price,
	.single-product .price *,
	.single-product .woocommerce-Price-amount,
	.single-product .outline-global-discount-note,
	.single-product .outline-global-discount-note-single,
	.single-product .outline-quote-flow-note,
	.single-product .outline-quote-flow-note-single,
	.single-product .outline-whatsapp-buy-box,
	.single-product .outline-whatsapp-buy-points,
	.single-product .outline-pdp-context-card,
	.single-product .outline-pdp-trust-strip {
		max-width: 100% !important;
		box-sizing: border-box;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Mobile sections can stay a touch tighter than desktop. */
	.outline-front-page .outline-hero,
	.outline-front-page .outline-categories,
	.outline-front-page .outline-manifesto,
	.outline-front-page .outline-ambientes,
	.outline-front-page .outline-products,
	.outline-front-page .outline-service-strip {
		margin-top: 56px;
	}
}

/* Respect users who prefer reduced motion — neutralise the new transforms. */
@media (prefers-reduced-motion: reduce) {
	.btn.btn-style-default.btn-color-primary,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.outline-whatsapp-buy-btn,
	.outline-yith-quote-btn .add-request-quote-button,
	.outline-yith-quote-btn .single_add_to_quote_button,
	.outline-load-more-button,
	.outline-trust-whatsapp,
	.outline-category-card,
	.outline-ambiente-card,
	.outline-service-card,
	.outline-content-card,
	.outline-product-card {
		transition: none !important;
		transform: none !important;
	}
}
