/* Agroroof Commerce Suite — site-wide pieces (not loaded on cart/checkout). */

:root {
	--agr-s-forest: var(--ag-forest, #14532d);
	--agr-s-green: var(--ag-green, #4aa529);
	--agr-s-ink: var(--ag-ink, #17251c);
	--agr-s-muted: #5c6b61;
	--agr-s-line: #e3e9e4;
}

/* ===================== Floating "View cart" button ===================== */

.agr-fc {
	position: fixed;
	bottom: calc(22px + env(safe-area-inset-bottom, 0px));
	z-index: 9980; /* below the mobile action bar (9990) and drawers */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 18px 0 16px;
	border-radius: 999px;
	background: var(--agr-s-forest);
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 10px 28px rgba(20, 83, 45, .32), 0 2px 6px rgba(0, 0, 0, .12);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}
.agr-fc--right { right: 22px; }
.agr-fc--left { left: 22px; }
.agr-fc:hover { transform: translateY(-2px); background: #0f4424; color: #fff; box-shadow: 0 14px 32px rgba(20, 83, 45, .38); }
.agr-fc:focus-visible { outline: 3px solid var(--agr-s-green); outline-offset: 3px; }

.agr-fc svg { width: 26px; height: 26px; flex: 0 0 auto; }

.agr-fc__count {
	position: absolute;
	top: -6px;
	left: 34px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #f59e0b;
	color: #1f1300;
	font-size: 12px;
	font-weight: 800;
	line-height: 22px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.agr-fc__count[hidden] { display: none; }

.agr-fc__text { display: flex; flex-direction: column; line-height: 1.1; }
.agr-fc__label { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.agr-fc__total { font-size: 12.5px; font-weight: 600; opacity: .85; }
.agr-fc__total:empty { display: none; }

.agr-fc.is-bump { animation: agr-fc-bump .5s ease; }
@keyframes agr-fc-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.12); }
	70% { transform: scale(.97); }
	100% { transform: scale(1); }
}

/* Phones: a compact round button that sits above the Call / WhatsApp bar. */
@media (max-width: 921px) {
	.agr-fc {
		width: 56px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}
	.agr-fc__text { display: none; }
	.agr-fc__count { left: auto; right: -4px; }
	.agr-fc--right { right: 14px; }
	.agr-fc--left { left: 14px; }
	body.ags-has-bar .agr-fc { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
	/* The calculator's sticky price bar replaces the action bar there. */
	body.ags-sticky-on .agr-fc { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Never cover a photo that is open full-screen. */
body.ags-lb-open .agr-fc { display: none; }

@media (prefers-reduced-motion: reduce) {
	.agr-fc, .agr-fc.is-bump { transition: none; animation: none; }
}

@media print { .agr-fc { display: none !important; } }

/* ===================== Product cards (Roof Accessories grid) ===================== */

body .hfe-woo-products-grid .hfe-product-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--agr-s-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(23, 37, 28, .06);
	transition: transform .2s ease, box-shadow .2s ease;
}
body .hfe-woo-products-grid .hfe-product-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(23, 37, 28, .12);
}

/* Photo: whole image visible, never cut at the sides. */
body .hfe-woo-products-grid .hfe-product-image {
	position: relative;
	margin: 0;
	padding: 12px;
	background: #fff;
	border-bottom: 1px solid var(--agr-s-line);
}
body .hfe-woo-products-grid .hfe-product-image,
body .hfe-woo-products-grid .hfe-product-image a {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
body .hfe-woo-products-grid .hfe-product-image a { display: block; }
body .hfe-woo-products-grid .hfe-product-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: contain !important;
	object-position: center;
	border-radius: 10px;
	margin: 0 !important;
	max-width: 100%;
}

body .hfe-woo-products-grid .hfe-product-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 18px 18px !important;
	gap: 6px;
}
body .hfe-woo-products-grid .hfe-product-category {
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase;
	color: var(--agr-s-green) !important;
	margin: 0 !important;
}
body .hfe-woo-products-grid .hfe-product-title { margin: 0 !important; flex: 0 0 auto !important; height: auto !important; }
body .hfe-woo-products-grid .hfe-product-title a { text-decoration: none !important; }
body .hfe-woo-products-grid .hfe-product-title h2,
body .hfe-woo-products-grid .woocommerce-loop-product__title {
	font-size: clamp(17px, 1.5vw, 20px) !important;
	line-height: 1.3 !important;
	font-weight: 800 !important;
	color: var(--agr-s-ink) !important;
	margin: 0 !important;
	padding: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}
body .hfe-woo-products-grid .hfe-product-title a:hover h2 { color: var(--agr-s-forest) !important; }
body .hfe-woo-products-grid .hfe-product-rating:empty { display: none; }

/* Price row — a soft green "price tag" with a bright price and an amber Save badge. */
body .hfe-woo-products-grid .hfe-product-price {
	margin: 6px 0 0 !important;
	padding: 10px 12px;
	background: linear-gradient(135deg, #effaf0 0%, #e3f4e2 100%);
	border: 1px solid #cfe9cc;
	border-radius: 12px;
}
body .hfe-woo-products-grid .hfe-product-price .price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0 !important;
	color: #1f8a32 !important;
}
body .hfe-woo-products-grid .hfe-product-price ins,
body .hfe-woo-products-grid .hfe-product-price .price > .woocommerce-Price-amount {
	order: 1;
	text-decoration: none !important;
	background: none !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	line-height: 1.1;
	color: #1f8a32 !important;
	letter-spacing: -0.01em;
}
body .hfe-woo-products-grid .hfe-product-price ins .woocommerce-Price-amount,
body .hfe-woo-products-grid .hfe-product-price ins bdi { color: inherit !important; }
body .hfe-woo-products-grid .hfe-product-price .agr-per {
	order: 2;
	font-size: 14px !important;
	font-weight: 700;
	color: #3d5244 !important;
}
body .hfe-woo-products-grid .hfe-product-price del {
	order: 3;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #8a968e !important;
	opacity: 1 !important;
}
body .hfe-woo-products-grid .hfe-product-price del .woocommerce-Price-amount,
body .hfe-woo-products-grid .hfe-product-price del bdi { color: #8a968e !important; }
body .hfe-woo-products-grid .hfe-product-price .agr-save {
	order: 4;
	margin-left: auto;
	padding: 3px 10px;
	border-radius: 999px;
	background: #ffb020;
	color: #3b2500;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* Button pinned to the bottom so every card lines up. */
body .hfe-woo-products-grid .hfe-product-add-to-cart { margin-top: auto !important; padding-top: 12px; }
body .hfe-woo-products-grid .hfe-product-add-to-cart .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	margin: 0 !important;
	padding: 10px 16px !important;
	border-radius: 12px !important;
	background: var(--agr-s-forest) !important;
	color: #fff !important;
	border: 0 !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	transition: background .15s ease;
}
body .hfe-woo-products-grid .hfe-product-add-to-cart .button::after { content: "→"; font-weight: 800; }
body .hfe-woo-products-grid .hfe-product-add-to-cart .button:hover { background: var(--agr-s-green) !important; color: #fff !important; }

@media (max-width: 544px) {
	body .hfe-woo-products-grid .hfe-product-content { padding: 14px 14px 16px !important; }
	body .hfe-woo-products-grid .hfe-product-price ins,
	body .hfe-woo-products-grid .hfe-product-price .price > .woocommerce-Price-amount { font-size: 23px !important; }
}

/* ===================== v1.6.7: accessory card outline & price colour =====================
   Two things were wrong on the Roof Accessories grid.

   The card had a pale grey outline, which disappeared against the page and
   left the corners looking squared off where the photo panel met the edge.
   It now carries a green outline that follows the rounded corner all the
   way round, and deepens when the card is hovered or tabbed to.

   The price was meant to be green already, but something further down the
   theme was repainting the amount — the rupee sign and the figure sit in
   their own spans, and whichever of those loses the colour takes the whole
   price with it. Rather than guess which one, every part of the live price
   is set green here, with the struck-through old price left grey on
   purpose so the two can still be told apart at a glance.
   ======================================================================================== */

body .hfe-woo-products-grid .hfe-product-item {
	border: 1.5px solid #bcdcc1;
	border-radius: 18px;
}

body .hfe-woo-products-grid .hfe-product-item:hover,
body .hfe-woo-products-grid .hfe-product-item:focus-within {
	border-color: var(--agr-s-green);
}

/* The photo panel sits flush against the outline, so its own divider is
   tinted to match instead of cutting across in grey. */
body .hfe-woo-products-grid .hfe-product-image {
	border-bottom-color: #d8ebd9;
	border-radius: 16px 16px 0 0;
}

/* Every piece of the live price, whatever wraps it. */
body .hfe-woo-products-grid .hfe-product-price .price,
body .hfe-woo-products-grid .hfe-product-price .price *,
body .hfe-woo-products-grid .hfe-product-price ins,
body .hfe-woo-products-grid .hfe-product-price ins *,
body .hfe-woo-products-grid .hfe-product-price .woocommerce-Price-amount,
body .hfe-woo-products-grid .hfe-product-price .woocommerce-Price-amount *,
body .hfe-woo-products-grid .hfe-product-price .woocommerce-Price-currencySymbol {
	color: #1f8a32 !important;
}

/* …except the old price and the unit, which must stay quieter than it. */
body .hfe-woo-products-grid .hfe-product-price .price del,
body .hfe-woo-products-grid .hfe-product-price .price del *,
body .hfe-woo-products-grid .hfe-product-price .price del .woocommerce-Price-amount,
body .hfe-woo-products-grid .hfe-product-price .price del .woocommerce-Price-currencySymbol,
body .hfe-woo-products-grid .hfe-product-price .price del bdi {
	color: #8a968e !important;
}

body .hfe-woo-products-grid .hfe-product-price .price .agr-per {
	color: #3d5244 !important;
}

/* The Save badge keeps its own amber, which the blanket rule above would
   otherwise have turned green along with everything else. */
body .hfe-woo-products-grid .hfe-product-price .price .agr-save,
body .hfe-woo-products-grid .hfe-product-price .price .agr-save * {
	color: #3b2500 !important;
}

/* ===================== v1.6.8: the [agroroof_products] grid =====================
   The card design above is written against the old widget's class names, and
   this grid keeps them so the cards are identical. What the old widget never
   gave us was the grid itself — columns came from its own stylesheet — so the
   layout is set here, from the column count the shortcode was given.
   ============================================================================== */

.agr-prodgrid {
	display: grid;
	grid-template-columns: repeat(var(--agr-cols, 3), minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

/* Two across on a tablet, whatever the page asked for. */
@media (max-width: 1024px) {
	.agr-prodgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* One across on a phone: two cropped infographics side by side are unreadable. */
@media (max-width: 600px) {
	.agr-prodgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

.agr-grid-empty {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 12px;
	background: #fff;
	color: #50575e;
	font-size: 15px;
}