/* -----------------------------------------------------------------------
   30-conversion.css — commerce & conversion, site 1
   Pairs with inc/40-conversion.php. Finding IDs are on each block.

   About !important: revo/header.php prints app-default.css with a hardcoded
   <link> AFTER wp_head(), so a stylesheet enqueued the normal way always loses
   the cascade to it no matter how specific the selector. Overrides of parent
   rules therefore carry !important; rules for markup the child theme invents
   (everything prefixed .dga-) do not, and must not.
   -------------------------------------------------------------------- */

:root {
	--dga-green: var(--primary-color, #228b22);
	--dga-ink: #2d2d2d;
	--dga-muted: #6b6b6b;
	--dga-line: #e2e2e2;
	--dga-soft: #f6f7f5;
	--dga-radius: 6px;
}

/* =======================================================================
   Buy box: two identical green buttons, no hierarchy — DGA-083
   BUY NOW is the higher-intent action, so it becomes the filled primary and
   ADD TO CART steps back to an outline.
   ==================================================================== */

.product_detail .addcart-wrapper .single_add_to_cart_button.button {
	background-color: #fff !important;
	color: var(--dga-green) !important;
	border: 2px solid var(--dga-green) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

.product_detail .addcart-wrapper .single_add_to_cart_button.button:hover,
.product_detail .addcart-wrapper .single_add_to_cart_button.button:focus {
	background-color: var(--dga-soft) !important;
	color: var(--dga-green) !important;
	border-color: var(--dga-green) !important;
}

.product_detail .addcart-wrapper .button-buynow {
	background-color: var(--dga-green) !important;
	border: 2px solid var(--dga-green) !important;
	color: #fff !important;
	font-weight: 700 !important;
}

.product_detail .addcart-wrapper .button-buynow:hover,
.product_detail .addcart-wrapper .button-buynow:focus {
	background-color: #1b6f1b !important;
	border-color: #1b6f1b !important;
	color: #fff !important;
}

/* =======================================================================
   Gallery arrows render as an X box — DGA-083
   revo asks for Font Awesome 4 glyphs (content "\f0d9"/"\f0da") in a family
   called "Fontawesome". When that family does not resolve the browser draws
   the missing-glyph box, which is the circular "X" sitting over the 4th
   thumbnail. Plain characters cannot fail this way.
   ==================================================================== */

.product_detail .product-images-container .slick-prev:before,
.product_detail .product-images-container .slick-next:before {
	font-family: inherit !important;
	font-size: 18px !important;
	line-height: 22px !important;
	font-weight: 700 !important;
}

.product_detail .product-images-container .slick-prev:before {
	content: "\2039" !important; /* ‹ */
}

.product_detail .product-images-container .slick-next:before {
	content: "\203A" !important; /* › */
}

.product_detail .product-images-container .slick-prev,
.product_detail .product-images-container .slick-next {
	color: var(--dga-ink) !important;
	border-color: var(--dga-line) !important;
	background-color: rgba(255, 255, 255, .95) !important;
}

/* Stray list markers above every product tile — DGA-081 */
ul.products-loop,
ul.products-loop > li,
ul.products,
ul.products > li {
	list-style: none !important;
}

/* revo's product-search template emits its own empty rating row, outside the
   hook the PHP side suppresses. Both rules are needed: :has() removes the whole
   row on modern browsers, the :empty rule alone still kills the stars if not. */
.reviews-content .star:empty {
	display: none !important;
}

.reviews-content:has(.star:empty) {
	display: none !important;
}

/* The empty 5-star row is suppressed in PHP; this is what replaces it. */
.dga-be-first {
	display: inline-block;
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--dga-muted);
	text-decoration: underline;
}

.dga-be-first:hover {
	color: var(--dga-green);
}

/* Honeypot on the review form — never visible, never focusable. */
.dga-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =======================================================================
   Delivery cost visibility — DGA-017, DGA-018, DGA-074
   ==================================================================== */

.dga-cart-delivery-note {
	margin: 0 0 18px;
	padding: 12px 16px;
	background: var(--dga-soft);
	border-left: 3px solid var(--dga-green);
	border-radius: 0 var(--dga-radius) var(--dga-radius) 0;
}

.dga-cart-delivery-note p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--dga-ink);
}

.dga-cart-delivery-note p + p {
	margin-top: 6px;
	color: var(--dga-muted);
	font-size: 13px;
}

.dga-product-delivery {
	margin: 14px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--dga-line);
}

.dga-product-delivery .dga-pd-line {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dga-muted);
}

.dga-no-shipping {
	font-size: 14px;
	line-height: 1.5;
}

.dga-no-shipping p {
	margin: 0 0 6px;
}

.dga-whatsapp-inline,
.dga-wa-link {
	color: var(--dga-green);
	font-weight: 600;
	text-decoration: underline;
}

/* =======================================================================
   Floating WhatsApp — DGA-073
   ==================================================================== */

.dga-wa-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 999px;
	background: #25d366;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.dga-wa-float:hover,
.dga-wa-float:focus {
	background: #1da851;
	color: #fff !important;
}

.dga-wa-float-mark {
	font-size: 16px;
}

@media (max-width: 767px) {
	/* Icon only, but still a 44px tap target. */
	.dga-wa-float {
		right: 12px;
		bottom: 12px;
		width: 46px;
		height: 46px;
		padding: 0;
		justify-content: center;
	}

	.dga-wa-float-mark {
		font-size: 20px;
	}

	.dga-wa-float-text {
		display: none;
	}
}

/* =======================================================================
   Product grids: related, cross-sell, bestsellers — DGA-077, DGA-153
   ==================================================================== */

.dga-grid {
	margin: 34px 0;
}

.dga-grid-title,
.dga-section-title {
	margin: 0 0 16px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--dga-ink);
	text-transform: none;
}

.dga-grid-items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dga-grid-item {
	display: flex;
	flex-direction: column;
	padding: 12px;
	border: 1px solid var(--dga-line);
	border-radius: var(--dga-radius);
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
}

.dga-grid-item:hover {
	border-color: var(--dga-green);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

.dga-grid-media {
	display: block;
	margin-bottom: 10px;
}

.dga-grid-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.dga-grid-name {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--dga-ink);
	font-weight: 600;
}

.dga-grid-name:hover {
	color: var(--dga-green);
}

.dga-grid-rating .star-rating {
	margin-bottom: 6px;
	font-size: 12px;
}

.dga-grid-price {
	display: block;
	margin: auto 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--dga-ink);
}

.dga-grid-price del {
	font-weight: 400;
	color: var(--dga-muted);
}

.dga-grid .dga-grid-buy .button,
.dga-grid-buy .button {
	display: block;
	width: 100%;
	padding: 9px 8px;
	border: 2px solid var(--dga-green) !important;
	border-radius: var(--dga-radius);
	background: #fff !important;
	color: var(--dga-green) !important;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
}

.dga-grid .dga-grid-buy .button:hover,
.dga-grid .dga-grid-buy .button.added,
.dga-grid-buy .button:hover,
.dga-grid-buy .button.added {
	background: var(--dga-green) !important;
	color: #fff !important;
}

.dga-grid-buy .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	text-align: center;
	color: var(--dga-green);
}

@media (max-width: 991px) {
	.dga-grid-items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.dga-grid-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* =======================================================================
   Homepage — DGA-153, DGA-081, DGA-046
   ==================================================================== */

.dga-home-section {
	margin: 34px 0;
}

/* SEO prose: was running edge to edge at ~190 characters per line. */
.dga-home-prose {
	max-width: 68ch;
	margin: 34px 0;
}

.dga-home-prose h2 {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.3;
	text-transform: none;
}

.dga-home-prose p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--dga-muted);
}

.dga-usp {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.dga-usp li {
	padding: 14px 16px;
	border: 1px solid var(--dga-line);
	border-radius: var(--dga-radius);
	background: var(--dga-soft);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--dga-ink);
	text-align: center;
}

.dga-cats-items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dga-cats-items a {
	display: block;
	padding: 16px;
	border: 1px solid var(--dga-line);
	border-radius: var(--dga-radius);
	background: #fff;
	transition: border-color .2s, background .2s;
}

.dga-cats-items a:hover {
	border-color: var(--dga-green);
	background: var(--dga-soft);
}

.dga-cat-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--dga-ink);
	line-height: 1.35;
}

.dga-cat-count {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--dga-muted);
}

/* The three 2018 clip-art banners, rebuilt as one template — DGA-081 */
.dga-promo-rail {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dga-promo {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--dga-line);
	border-radius: var(--dga-radius);
	background: #fff;
}

.dga-promo:hover {
	border-color: var(--dga-green);
}

.dga-promo-media {
	flex: 0 0 72px;
}

.dga-promo-media img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.dga-promo-body {
	min-width: 0;
}

.dga-promo-name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dga-ink);
}

.dga-promo-price {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-weight: 700;
	color: var(--dga-ink);
}

.dga-promo-cta {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--dga-green);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.dga-reviews-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dga-review {
	padding: 16px;
	border: 1px solid var(--dga-line);
	border-radius: var(--dga-radius);
	background: #fff;
}

.dga-review-stars {
	display: block;
	margin-bottom: 8px;
	color: #f5a623;
	font-size: 15px;
	letter-spacing: .08em;
}

.dga-review blockquote {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dga-ink);
	font-style: normal;
}

.dga-review cite {
	font-size: 12px;
	font-style: normal;
	color: var(--dga-muted);
}

.dga-review cite a {
	color: var(--dga-muted);
	text-decoration: underline;
}

@media (max-width: 991px) {
	.dga-usp,
	.dga-cats-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dga-reviews-items {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.dga-usp,
	.dga-cats-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.dga-usp li {
		padding: 10px;
		font-size: 12px;
	}
}

/* The bold green all-caps delivery line repeated on every page — DGA-046 */
.top-header .contact-us b {
	font-weight: 500 !important;
	font-size: 12px !important;
	text-transform: none !important;
}

/* =======================================================================
   Checkout — DGA-078
   ==================================================================== */

.dga-trust {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--dga-line);
	border-radius: var(--dga-radius);
	background: var(--dga-soft);
}

.dga-trust-pay {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--dga-ink);
}

.dga-trust-points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dga-trust-points li {
	margin: 0 0 5px;
	padding-left: 18px;
	position: relative;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dga-muted);
}

.dga-trust-points li:before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--dga-green);
	font-weight: 700;
}

.dga-trust-points a {
	color: var(--dga-green);
	text-decoration: underline;
}

.dga-review-thumb img {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-right: 8px;
	vertical-align: middle;
	object-fit: contain;
	border: 1px solid var(--dga-line);
	border-radius: 4px;
}

/* Strip the mega menu and category bar from checkout so the page stops
   inviting the customer back out of it. Logo, contact details and cart stay. */
body.woocommerce-checkout .header-mid .main-menu,
body.woocommerce-checkout .mid-header {
	display: none !important;
}

/* =======================================================================
   Store <-> clinic — DGA-113, DGA-114
   ==================================================================== */

.dga-clinic-strip {
	margin-top: 30px;
	padding: 18px 0;
	background: var(--dga-soft);
	border-top: 1px solid var(--dga-line);
}

.dga-clinic-inner {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
}

.dga-clinic-lead {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--dga-ink);
}

.dga-clinic-copy {
	margin: 0;
	flex: 1 1 260px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dga-muted);
}

.dga-clinic-link {
	display: inline-block;
	padding: 8px 16px;
	border: 2px solid var(--dga-green);
	border-radius: var(--dga-radius);
	color: var(--dga-green);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.dga-clinic-link:hover {
	background: var(--dga-green);
	color: #fff;
}