/*
Theme Name: Green Telecoms
Template: storefront
*/

/* ==========================================================================
   1. Brand variables
   ========================================================================== */
:root {
	--gt-green: #15800e;
	--gt-green-dark: #0f5c0a;
	--gt-accent: #c8891f;
	--gt-border: #c9c9c9;
	--gt-card-bg: #fafafa;
	--gt-heading-font: 'Poppins', sans-serif;
	--gt-phone-font: 'Anton', sans-serif;
	--gt-radius: 8px;
}

/* ==========================================================================
   1b. Shop / category archive header (title above the product grid)
   ========================================================================== */
.woocommerce-products-header,
.storefront-full-width-content .woocommerce-products-header {
	margin: 0 0 1em;
	background: var(--gt-green);
	padding: 1.4em 2em !important;
	border-radius: var(--gt-radius);
	text-align: center;
}

.storefront-breadcrumb {
	margin-bottom: 0.5em;
	padding-bottom: 0;
}

.woocommerce-products-header__title.page-title {
	font-family: var(--gt-phone-font);
	font-weight: normal;
	letter-spacing: 0.02em;
	color: #fff;
	margin: 0;
}

/* ==========================================================================
   2. Shop / archive product grid
   Works with whatever "Products per row" value is set in
   WooCommerce > Settings > Products > Display (columns-2 through columns-6).
   Change that setting any time - no code changes needed here.
   ========================================================================== */
ul.products {
	display: grid !important;
	gap: 28px 20px;
	margin: 0 0 3em !important;
}

/* WooCommerce's default clearfix (leftover from the old float-based layout) generates
   an empty ::before/::after box on the grid container. In a float layout that's
   harmless, but in CSS Grid it counts as a real (invisible) grid item and pushes every
   product over by one slot. Kill it so the grid starts filling from the first product. */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1200px) {
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 992px) {
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
	ul.products {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}

/* ==========================================================================
   3. Product card
   ========================================================================== */
ul.products li.product {
	background: #fff;
	border: 1px solid var(--gt-border);
	border-radius: var(--gt-radius);
	padding: 16px 16px 20px;
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* everything above the button grows to fill the card, pinning the button to the bottom */
ul.products li.product a.woocommerce-LoopProduct-link {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

ul.products li.product a.button,
ul.products li.product a.add_to_cart_button {
	margin-top: 12px;
}

ul.products li.product:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* Image area - fixed aspect ratio so mixed old/new photos line up */
ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
}

ul.products li.product img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain;
	background: var(--gt-card-bg);
	border-radius: calc(var(--gt-radius) - 2px);
	margin-bottom: 12px;
}

/* Title - clamp to 2 lines so long technical names stay consistent */
ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.95em;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 6px;
}

/* Price */
ul.products li.product .price {
	color: var(--gt-green);
	font-weight: 600;
	font-size: 1.05em;
}

/* Add to cart button */
ul.products li.product a.button,
ul.products li.product a.add_to_cart_button {
	background: var(--gt-green);
	color: #fff;
	border-radius: 4px;
	padding: 0.6em 1em;
	font-size: 0.85em;
	transition: background 0.2s ease;
}

ul.products li.product a.button:hover,
ul.products li.product a.add_to_cart_button:hover {
	background: var(--gt-green-dark);
	color: #fff;
}

/* Sale badge - overlaid on the image corner instead of taking its own line */
ul.products li.product span.onsale {
	position: absolute;
	background: #d1382c;
	color: #fff;
	border: none;
	box-shadow: none;
	top: 12px;
	left: 12px;
	right: auto;
	border-radius: 4px;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 5px 8px;
	font-size: 0.75em;
	z-index: 2;
}

/* ==========================================================================
   4. Single product - gallery
   ========================================================================== */
.single-product div.product div.images {
	max-width: 100%;
}

/* WooCommerce's gallery markup starts at opacity:0 and relies on wc-single-product.js
   to fade it in once initialised. We dequeued that script for ARI Fancy Lightbox, so
   nothing ever reveals it - force it visible. */
.single-product div.product .woocommerce-product-gallery {
	opacity: 1 !important;
}

.single-product div.product div.images .woocommerce-product-gallery__wrapper {
	background: var(--gt-card-bg);
	border-radius: var(--gt-radius);
	overflow: hidden;
	border: 1px solid var(--gt-border);
}

.single-product div.product div.images .woocommerce-product-gallery__image img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
}

.single-product div.product div.images .flex-control-thumbs {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.single-product div.product div.images .flex-control-thumbs li {
	width: calc(25% - 8px);
}

.single-product div.product div.images .flex-control-thumbs img {
	border-radius: calc(var(--gt-radius) - 2px);
	border: 2px solid transparent;
	opacity: 0.7;
	transition: opacity 0.2s ease, border-color 0.2s ease;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--gt-card-bg);
}

.single-product div.product div.images .flex-control-thumbs img:hover,
.single-product div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--gt-green);
}

/* keep the gallery in view alongside a long description on wide screens */
@media (min-width: 993px) {
	.single-product div.product div.images {
		position: sticky;
		top: 90px;
		align-self: flex-start;
	}
}

/* ==========================================================================
   5. Single product - summary
   ========================================================================== */

/* wrap the whole gallery + summary in a card, with a green-to-gold accent
   stripe across the top so the page has more presence than a plain form */
.single-product div.product {
	position: relative;
	background: #fff;
	border: 1px solid var(--gt-border);
	border-radius: var(--gt-radius);
	padding: 2.5em 2em 2em;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	overflow: visible !important;
}

/* Gallery and summary are the two main flex children - keep them aligned to the
   same top edge and free of any inherited top margin. */
.single-product div.product div.images,
.single-product div.product div.summary {
	margin-top: 0;
}

/* The description block (appended via woocommerce_after_single_product_summary) is
   a third flex child in this row. Force it onto its own full-width line below the
   gallery/summary instead of letting the flex algorithm squeeze or overlap it. */
.single-product div.product .gt-product-description {
	flex: 1 1 100%;
	width: 100%;
}


/* Sale badge - WooCommerce outputs this as its own element before the gallery,
   so by default it sits above everything as a plain block (and its default
   border is what causes the faint line). Pull it out of the flow and overlay
   it on the image corner, matching the shop grid's sale badge. */
.single-product div.product span.onsale {
	position: absolute;
	top: 2.5em;
	left: 2em;
	background: #d1382c;
	color: #fff;
	font-weight: 700;
	border: none;
	box-shadow: none;
	border-radius: 5px;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 9px 14px;
	font-size: 1em;
	z-index: 2;
}

.single-product div.product::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: var(--gt-radius) var(--gt-radius) 0 0;
	background: linear-gradient(90deg, var(--gt-green), var(--gt-accent));
}

.single-product div.product h1.product_title {
	font-family: var(--gt-heading-font);
	font-weight: 700;
	font-size: 2em;
	line-height: 1.25;
	color: #1a1a1a;
	margin: 0 0 0.4em;
}

.single-product div.product div.summary {
	padding-left: 2em;
}

.single-product div.product div.summary .price {
	color: var(--gt-green);
	font-size: 1.6em;
	font-weight: 600;
}

/* SKU / categories meta row */
.single-product div.product .product_meta {
	margin-top: 1.5em;
	padding-top: 1em;
	border-top: 1px solid var(--gt-border);
	font-size: 0.8em;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.single-product div.product .product_meta a {
	color: var(--gt-accent);
	font-weight: 600;
	text-decoration: none;
}

.single-product div.product .product_meta a:hover {
	text-decoration: underline;
}

.single-product div.product .quantity input.qty {
	border: 1px solid var(--gt-border);
	border-radius: 4px;
}

.single-product div.product .quantity input.qty:focus {
	border-color: var(--gt-accent);
	outline: none;
}

.single-product div.product div.summary p.stock {
	font-weight: 600;
}

.single-product div.product div.summary .cart {
	margin-top: 1.5em;
}

.single-product div.product div.summary a.single_add_to_cart_button,
.single-product div.product div.summary button.single_add_to_cart_button {
	background: var(--gt-green);
	border-color: var(--gt-green);
	color: #fff;
	border-radius: 4px;
	padding: 0.9em 1.8em;
	font-size: 1em;
	transition: background 0.2s ease;
}

.single-product div.product div.summary a.single_add_to_cart_button:hover,
.single-product div.product div.summary button.single_add_to_cart_button:hover {
	background: var(--gt-green-dark);
	border-color: var(--gt-green-dark);
}

@media (max-width: 767px) {
	.single-product div.product div.summary {
		padding-left: 0;
		margin-top: 1.5em;
	}
}

/* ==========================================================================
   6. Single product - plain description (replaces the old tab UI)
   ========================================================================== */
.single-product .gt-product-description {
	max-width: 900px;
	margin: 0 auto 2em;
	padding: 1em 2.5em;
	background: #f2f2f2;
	border-radius: var(--gt-radius);
}

.single-product .gt-product-description h2 {
	font-family: var(--gt-heading-font);
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 0.6em;
}

.single-product .gt-product-description p {
	line-height: 1.7;
}

.single-product .related.products h2 {
	font-family: var(--gt-heading-font);
	font-weight: 600;
	color: #1a1a1a;
}

/* ==========================================================================
   7. Site header - top bar / logo+phone+search / green primary menu
   ========================================================================== */
.gt-site-header {
	padding: 0;
	margin: 0 !important;
	display: block !important;
	/* Establish a stacking context so the header (and the mobile menu it
	   contains, once opened) reliably sits above the page content that
	   follows it in the DOM, rather than being at the mercy of whatever
	   z-index/stacking that content happens to create. */
	position: relative;
	z-index: 100;
}

/* Storefront's own .site-header CSS may treat direct children as flex items with
   their own sizing rules. Force these three rows to be plain, unconstrained
   full-width blocks so nothing upstream can affect their width before our own
   max-width/centering rules run on their inner content. */
.gt-site-header > .gt-top-bar,
.gt-site-header > .gt-header-main,
.gt-site-header > .gt-primary-nav {
	display: block !important;
	width: 100% !important;
	flex: none !important;
	float: none !important;
}

/* --- Top bar: date/time + account/cart links --- */
.gt-top-bar {
	background: var(--gt-green);
	color: #fff;
}

.gt-top-bar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2em;
	max-width: 66.4989378333em !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0.5em 20px !important;
	font-size: 0.85em;
	box-sizing: border-box;
}

.gt-top-bar__links a {
	color: #fff;
	text-decoration: none;
	margin-left: 1.5em;
}

.gt-top-bar__links a:hover {
	text-decoration: underline;
}

/* --- Middle row: logo, phone, search --- */
.gt-header-main {
	background: #fff;
	border-bottom: 1px solid var(--gt-border);
}

.gt-header-main__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2em;
	max-width: 66.4989378333em !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 1.2em 20px !important;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.gt-header-main__branding {
	flex: 0 0 auto;
}

.gt-header-main__branding img,
.gt-site-header .site-branding img {
	max-height: 100px !important;
	height: 100px;
	max-width: none !important;
	width: auto !important;
}

.gt-header-main__phone {
	flex: 1 1 auto;
	text-align: center;
	transform: translateX(3em);
}

.gt-header-main__phone a {
	font-family: var(--gt-phone-font);
	font-weight: normal;
	font-size: 2.1em;
	letter-spacing: 0.02em;
	color: #1a1a1a;
	text-decoration: none;
}

.gt-header-main__search {
	flex: 0 0 auto;
	max-width: 340px;
}

.gt-header-main__search .woocommerce-product-search {
	display: flex;
}

.gt-header-main__search input[type="search"] {
	border: 1px solid var(--gt-border);
	border-radius: 4px 0 0 4px;
	padding: 0.6em 0.8em;
	min-width: 240px;
}

.gt-header-main__search button {
	background: var(--gt-green);
	color: #fff;
	border: none;
	border-radius: 0 4px 4px 0;
	padding: 0 1em;
	cursor: pointer;
}

.gt-header-main__search button:hover {
	background: var(--gt-green-dark);
}

/* --- Green primary menu bar --- */
.gt-primary-nav {
	background: var(--gt-green);
}

/* Same exact container box as .gt-top-bar__inner and .gt-header-main__inner above -
   hardcoded to match rather than relying on Storefront's .col-full, since that was
   computing differently between rows. */
.gt-nav-inner {
	max-width: 66.4989378333em !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
}

.gt-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gt-menu li {
	position: relative;
}

.gt-menu a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 0.9em 1.1em;
	font-size: 0.95em;
	white-space: nowrap;
	transition: background-color 0.25s ease;
}

.gt-menu li:hover > a,
.gt-menu a:focus {
	background: var(--gt-green-dark);
}

.gt-menu ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 220px;
	background: var(--gt-green);
	list-style: none;
	margin: 0;
	padding: 0;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.gt-menu li:hover > ul.sub-menu {
	display: block;
}

.gt-menu ul.sub-menu li a {
	padding: 0.75em 1.1em;
	white-space: normal;
}

.gt-menu ul.sub-menu li a:hover {
	background: var(--gt-green-dark);
}

/* --- Mobile hamburger toggle - hidden on desktop, shown via the media
   query below. --- */
.gt-menu-toggle {
	display: none;
	align-items: center;
	gap: 0.6em;
	width: 100%;
	/* iOS/Safari paints its own grey button chrome on <button> elements
	   unless appearance is explicitly reset - that's what was showing
	   instead of the green nav background. */
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	border: none;
	color: #fff;
	font-size: 1em;
	font-weight: 600;
	padding: 0.9em 1.1em;
	cursor: pointer;
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}

.gt-menu-toggle__bars,
.gt-menu-toggle__bars::before,
.gt-menu-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

.gt-menu-toggle__bars {
	position: relative;
}

.gt-menu-toggle__bars::before,
.gt-menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.gt-menu-toggle__bars::before {
	top: -7px;
}

.gt-menu-toggle__bars::after {
	top: 7px;
}

@media (max-width: 767px) {
	/* Small gap at the very top of the page so the language-switcher widget
	   (fixed to the top of the viewport) doesn't sit flush over the green
	   top bar's date/time text. */
	body {
		margin-top: 30px !important;
	}

	.gt-top-bar__inner {
		flex-direction: column;
		gap: 0.4em;
		text-align: center;
	}

	.gt-header-main__inner {
		justify-content: center;
		text-align: center;
		gap: 0.5em;
	}

	.gt-header-main__phone {
		transform: none;
		width: 100%;
		margin-bottom: -0.6em;
	}

	.gt-header-main__phone a {
		font-size: 1.3em;
	}

	.gt-menu-toggle {
		display: flex;
	}

	.gt-menu {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.gt-menu.is-open {
		display: flex;
	}

	.gt-menu ul.sub-menu {
		position: static;
		box-shadow: none;
		width: 100%;
	}
}

/* ==========================================================================
   8. Homepage
   ========================================================================== */

/* --- Remove Storefront's default top spacing above the main content area so
   the slider sits flush under the header on the homepage only. --- */
body.home #content,
body.home #content > .col-full,
body.home .gt-homepage,
body.home .gt-homepage #main {
	padding-top: 0 !important;
	margin-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* --- Slider: full viewport width, breaking out of the .col-full wrapper it's
   nested inside via the page template --- */
.gt-slider {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* --- 3-box row (shipping / contact / shipping) --- */
.gt-info-boxes {
	padding: 2.5em 0;
}

.gt-info-boxes__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Same fix as the shop grid earlier: .col-full carries its own clearfix
   ::before/::after, which counts as a real (invisible) item in CSS Grid and
   pushes every box over by one slot. Kill it on all three grid sections. */
.gt-info-boxes__grid::before,
.gt-info-boxes__grid::after,
.gt-feature-boxes__grid::before,
.gt-feature-boxes__grid::after,
.gt-brand-strip__grid::before,
.gt-brand-strip__grid::after {
	content: none !important;
	display: none !important;
}

.gt-info-box {
	background: linear-gradient(120deg, #F0F0F0 10%, #D7F4D7 10%, #D7F4D7 27%, #F0F0F0 27%, #F0F0F0 50%, #F0F0F0 50%, #F0F0F0 74.81%, #D7F4D7 73.81%, #D7F4D7 76.19%, #F0F0F0 76.19%, #F0F0F0 100%);
	background-size: 593.97px 593.97px;
	border: 2px solid var(--gt-green);
	border-radius: var(--gt-radius);
	padding: 2em 1.5em;
	text-align: center;
}

.gt-info-box__icon {
	display: block;
	width: 150px;
	height: 86px;
	margin: 0 auto 0.8em;
}

.gt-info-box h3 {
	font-family: var(--gt-heading-font);
	font-weight: 700;
	font-size: 1.2em;
	margin: 0 0 0.4em;
}

.gt-info-box p {
	color: var(--gt-green);
	font-weight: 600;
	margin: 0;
}

.gt-info-box--contact .gt-info-box__phone a,
.gt-info-box--contact .gt-info-box__email a {
	color: #1a1a1a;
	font-weight: 700;
	text-decoration: none;
}

/* --- Sale products section --- */
.gt-sale-products {
	padding: 0.3em 0 0;
}

.gt-sale-products ul.products {
	margin-bottom: 1.5em !important;
}

.gt-sale-products .gt-section-title {
	font-family: var(--gt-phone-font);
	font-weight: normal;
	letter-spacing: 0.02em;
}

.gt-section-title {
	font-family: var(--gt-heading-font);
	font-weight: 700;
	text-align: center;
	margin: 0 0 1em;
}

/* --- Repair centre callout --- */
.gt-repair-centre {
	padding: 0 0 1.5em;
	text-align: center;
}

.gt-repair-centre .gt-section-title {
	font-family: var(--gt-phone-font);
	font-weight: normal;
	letter-spacing: 0.02em;
	margin-bottom: 0.3em;
}

.gt-repair-centre p {
	max-width: 46em;
	margin: 0 auto;
	line-height: 1.6;
	color: #444;
}

/* --- 4-box row --- */
.gt-feature-boxes {
	padding: 2.5em 0;
}

.gt-feature-boxes__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.gt-feature-box {
	background: linear-gradient(120deg, #F0F0F0 10%, #D7F4D7 10%, #D7F4D7 27%, #F0F0F0 27%, #F0F0F0 50%, #F0F0F0 50%, #F0F0F0 74.81%, #D7F4D7 73.81%, #D7F4D7 76.19%, #F0F0F0 76.19%, #F0F0F0 100%);
	background-size: 593.97px 593.97px;
	border: 2px solid var(--gt-green);
	border-radius: var(--gt-radius);
	padding: 1.8em 1.2em;
	text-align: center;
}

.gt-feature-box__icon {
	display: block;
	width: 100px;
	height: 99px;
	margin: 0 auto 0.6em;
}

.gt-feature-box h3 {
	font-family: var(--gt-heading-font);
	font-weight: 700;
	font-size: 1.05em;
	margin: 0 0 0.3em;
}

.gt-feature-box p {
	color: var(--gt-green);
	font-weight: 600;
	font-size: 0.9em;
	margin: 0;
}

/* --- Brand logos strip --- */
.gt-brand-strip {
	background: var(--gt-green);
	padding: 1.2em 0;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.gt-brand-strip__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 16px;
}

.gt-brand-logo {
	background: #fff;
	border-radius: 4px;
	padding: 0.8em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gt-brand-logo img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.gt-info-boxes__grid {
		grid-template-columns: 1fr;
	}

	.gt-feature-boxes__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

/* Storefront's own markup is <div class="col-full footer-widgets"> with
   .footer-widget-1/2/3 as the three columns - .col-full carries its own
   clearfix ::before/::after, which (same bug as the homepage grids) counts
   as an invisible item once this becomes a CSS Grid, so kill it here too. */
.footer-widgets::before,
.footer-widgets::after {
	content: none !important;
	display: none !important;
}

/* Storefront also puts padding-top on .site-footer itself, which was the
   white gap between the brand strip and the grey footer background. */
.site-footer {
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.site-info {
	text-align: center;
	padding-top: 1em !important;
	padding-bottom: 1.5em !important;
	margin: 0 !important;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 3em 0;
}

.footer-widget-1,
.footer-widget-2,
.footer-widget-3 {
	/* Storefront's own footer CSS floats these at ~30.6% width, meant for a
	   plain flex/float row. Inside our grid, that percentage is worked out
	   against the grid TRACK (already a third of the row), so the box was
	   shrinking to roughly a third of a third. Force it to fill its track. */
	width: 100% !important;
	float: none !important;
	box-sizing: border-box;
	background: var(--gt-green);
	color: #fff;
	border-radius: var(--gt-radius);
	padding: 1.6em 1.8em 1.2em;
}

.footer-widget-1 .widget-title,
.footer-widget-2 .widget-title,
.footer-widget-3 .widget-title {
	/* Storefront renders widget titles as low-opacity "ghost" text by design -
	   fine on its default light background, but it made white text on green
	   nearly invisible. Force full opacity so the white actually reads. */
	color: #fff !important;
	opacity: 1 !important;
	font-weight: 700 !important;
	border-bottom-color: rgba(255, 255, 255, 0.35);
}

.footer-widget-1 p,
.footer-widget-2 p,
.footer-widget-3 p,
.footer-widget-1 li,
.footer-widget-2 li,
.footer-widget-3 li {
	color: #fff !important;
}

.footer-widget-1 a,
.footer-widget-2 a,
.footer-widget-3 a {
	/* !important because the contact text widget's content can carry an
	   inline color from the editor that would otherwise win over this. */
	color: #fff !important;
	text-decoration: underline;
}

.footer-widget-1 a:hover,
.footer-widget-2 a:hover,
.footer-widget-3 a:hover {
	color: #e5f5e4 !important;
}

@media (max-width: 767px) {
	.footer-widgets {
		grid-template-columns: 1fr;
	}
}