/*
Theme Name:   AM Home Classic
Theme URI:    https://amhome.co.uk
Description:  Storefront child theme recreating the classic AM Home look (green/brown palette, Montserrat) on a maintained WooCommerce-native base. Replaces the unmaintained FoundationPress-based theme.
Author:       AM Home
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  amhome-classic
*/

:root {
	--am-green: #8bc53e;
	--am-green-dark: #7bb32e;
	--am-brown: #524641;
	--am-charcoal: #3d3d3c;
	--am-light-gray: #ebebeb;
	--am-medium-gray: #8a8a8a;
	--am-black: #0a0a0a;
	--am-white: #fefefe;
}

/* ---------- Base ---------- */
body,
button,
input,
select,
textarea,
.storefront-primary-navigation,
.site-header {
	font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
}
body {
	background: var(--am-white);
	color: var(--am-black);
}
a {
	color: var(--am-green);
}
a:hover {
	color: var(--am-green-dark);
}
h1, h2, h3, h4, h5, h6 {
	color: var(--am-charcoal);
	font-weight: 600;
}

/* ---------- Top bar ---------- */
.am-topbar {
	background: var(--am-brown);
	color: var(--am-white);
	font-size: 12px;
	padding: 6px 0;
}
.am-topbar .col-full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 0;
}
.am-topbar a {
	color: var(--am-white);
	text-decoration: none;
}
.am-topbar a:hover {
	color: var(--am-green);
}
.am-topbar-left,
.am-topbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.am-topbar-left .fa {
	font-size: 14px;
}
.am-ship {
	margin-left: 18px;
}
.am-search {
	display: flex;
	margin: 0;
}
.am-search input[type="search"] {
	background: #fff;
	border: 0;
	border-radius: 0;
	font-size: 12px;
	padding: 4px 8px;
	width: 180px;
	box-shadow: none;
}
.am-search button {
	background: #fff;
	border: 0;
	border-radius: 0;
	color: var(--am-medium-gray);
	padding: 4px 10px;
	font-size: 13px;
}
.am-search button:hover {
	background: #fff;
	color: var(--am-green);
}

/* ---------- Main header ---------- */
.site-header {
	background: #fff;
	border-bottom: 0;
	padding-top: 0;
}
.site-header .col-full {
	margin-bottom: 0;
}
.am-brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 18px 0;
}
.am-logo img {
	height: 78px;
	width: auto;
	display: block;
}
.am-contacts {
	display: flex;
	align-items: center;
	gap: 56px;
}
.am-contact {
	display: flex;
	align-items: center;
	gap: 14px;
}
.am-contact > .fa {
	color: var(--am-green);
	font-size: 40px;
}
.am-contact strong {
	display: block;
	font-size: 15px;
}
.am-contact strong a {
	color: var(--am-black);
	text-decoration: none;
}
.am-contact strong a:hover {
	color: var(--am-green);
}
.am-contact span {
	color: var(--am-medium-gray);
	font-size: 13px;
}

/* ---------- Primary navigation ---------- */
.storefront-primary-navigation {
	background: var(--am-brown);
	color: var(--am-white);
}
.storefront-primary-navigation a {
	color: var(--am-white);
}
.main-navigation ul li a,
.secondary-navigation ul li a {
	color: var(--am-white);
	font-size: 13px;
	font-weight: 500;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--am-green);
}
.main-navigation ul.menu > li > ul,
.main-navigation ul.nav-menu > li > ul {
	background: var(--am-brown);
}
.storefront-primary-navigation::before,
.storefront-primary-navigation::after {
	background: none;
}

/* Cart in nav bar */
.site-header-cart .cart-contents,
.site-header-cart .cart-contents:hover {
	color: var(--am-white);
	padding: 1em 0;
}
.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .count {
	color: var(--am-white);
}
.site-header-cart:hover .cart-contents {
	color: var(--am-green);
}

/* ---------- Focus styles ---------- */
/* replace the browser/Storefront default (purple ring) everywhere;
   keyboard users still get a visible brand-green outline */
a:focus, button:focus, .button:focus, .added_to_cart:focus,
input:focus, textarea:focus, select:focus,
.main-navigation ul li a:focus, .site-header-cart a:focus {
	outline: none !important;
	box-shadow: none;
}
a:focus-visible, button:focus-visible, .button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--am-green) !important;
	outline-offset: 1px;
}

/* ---------- Buttons ---------- */
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .added_to_cart, .widget a.button, .site-header-cart .widget_shopping_cart a.button {
	background: var(--am-green);
	color: #fff;
	border: 0;
	border-radius: 2px;
	font-weight: 500;
}
button:hover, .button:hover, .added_to_cart:hover,
input[type="submit"]:hover {
	background: var(--am-green-dark);
	color: #fff;
}
.button.alt, .button.checkout, .wc-block-cart__submit-button,
.single_add_to_cart_button {
	background: var(--am-green);
	color: #fff;
}
.button.alt:hover, .button.checkout:hover,
.single_add_to_cart_button:hover {
	background: var(--am-green-dark);
}

/* ---------- Shop grid ---------- */
.woocommerce-products-header .woocommerce-products-header__title,
.page-template-default .entry-title {
	font-size: 2em;
	font-weight: 500;
	color: var(--am-charcoal);
}
/* equal-height cards on a grid; Storefront's float widths overridden */
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}
/* Storefront's clearfix pseudo-elements would become phantom grid cells */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}
@media (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
ul.products li.product {
	text-align: left;
	background: #f7f7f7;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 62px;   /* reserved row for price + button */
}
/* whole card clickable: stretch the product link over the card */
ul.products li.product > a:first-of-type::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--am-charcoal);
	line-height: 1.35;
	padding: 0 14px;
}
ul.products li.product a:first-of-type:hover .woocommerce-loop-product__title {
	color: var(--am-green);
}
ul.products li.product img {
	background: var(--am-light-gray);
	width: 100%;
	margin-bottom: 12px;
}
ul.products li.product .price {
	color: var(--am-black);
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	position: absolute;
	left: 14px;
	bottom: 20px;
	z-index: 2;
}
ul.products li.product .price del {
	color: var(--am-medium-gray);
	font-weight: 400;
}
ul.products li.product .button {
	margin: 0;
	font-size: 11px;
	padding: 8px 12px;
	text-transform: none;
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
}
ul.products li.product .added_to_cart {
	margin: 0;
	font-size: 11px;
	padding: 8px 12px;
	position: absolute;
	right: 14px;
	bottom: 52px;   /* "View basket" appears above the button after ajax add */
	z-index: 2;
}
ul.products li.product .star-rating {
	color: var(--am-green);
}
.onsale {
	z-index: 2;
}
.onsale {
	background: var(--am-green);
	color: #fff;
	border: 0;
	border-radius: 2px;
}

/* single product */
/* stack the layout: gallery on top (capped so images stay sharp),
   summary at full content width below — like mobile, instead of
   Storefront's 50/50 float split that left a big empty gutter */
.single-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 760px;
	float: none !important;
	margin-bottom: 2em;
}
.single-product div.product .entry-summary {
	width: 100% !important;
	float: none !important;
	margin: 0 0 2em !important;
	clear: both;
}
.single-product div.product .price {
	color: var(--am-black);
	font-weight: 700;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--am-green);
}
.star-rating span::before,
p.stars a:hover::after,
p.stars a::after {
	color: var(--am-green);
}

/* ---------- Sidebar widgets ---------- */
.widget-area .widget {
	font-size: 13px;
}
.widget a,
.am-topbar a,
.site-footer .widget a,
ul.products li.product a {
	text-decoration: none !important;
}
.widget-area .widget a:not(.button) {
	color: var(--am-charcoal);
}
.widget-area .widget a:not(.button):hover {
	color: var(--am-green);
}
.widget .widget-title,
.widget .wp-block-heading,
.widget .gamma {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--am-charcoal);
	border-bottom: 0;
	margin-bottom: 0.8em;
}
.widget-area .widget a {
	color: var(--am-charcoal);
	font-weight: 400;
}
.widget-area .widget a:hover {
	color: var(--am-green);
}
.widget_product_categories ul li,
.widget_layered_nav ul li {
	list-style: square;
	color: var(--am-green);
	margin-left: 1em;
}
/* Storefront injects folder/misc glyphs before widget list items — drop them */
.widget_product_categories ul li::before,
.widget_layered_nav ul li::before,
.widget .product-categories li::before {
	content: none !important;
	display: none !important;
}
.widget_product_categories ul li a {
	font-size: 12.5px;
}
.widget select {
	width: 100%;
	font-size: 13px;
	padding: 6px;
	border: 1px solid #ccc;
	background: #fff;
}
/* WooCommerce price slider */
.price_slider_wrapper .ui-slider {
	background: var(--am-light-gray);
}
.price_slider_wrapper .ui-slider .ui-slider-range {
	background: var(--am-green);
}
.price_slider_wrapper .ui-slider .ui-slider-handle {
	background: var(--am-green);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.price_slider_amount .button {
	font-size: 12px;
}
.widget_product_tag_cloud .tagcloud a {
	color: var(--am-charcoal);
	border: 0;
	padding: 0 2px;
}
.widget_product_tag_cloud .tagcloud a:hover {
	color: var(--am-green);
}

/* ---------- Newsletter band ---------- */
.am-newsletter {
	background: var(--am-brown);
	color: var(--am-white);
	text-align: center;
	padding: 44px 0 50px;
}
.am-newsletter h2 {
	color: #fff;
	font-weight: 700;
	font-size: 30px;
	margin-bottom: 0.4em;
}
.am-newsletter p {
	margin-bottom: 1.4em;
}
.am-newsletter .col-full {
	margin-bottom: 0;
}
.am-newsletter .input-group {
	display: flex;
	justify-content: center;
	gap: 0;
	max-width: 560px;
	margin: 0 auto;
}
.am-newsletter .input-group-button {
	flex: 0 0 auto;
}
.am-newsletter input[type="email"] {
	flex: 1 1 auto;
	width: auto;
	border: 0;
	border-radius: 0;
	padding: 10px 12px;
	font-size: 13px;
}
.am-newsletter input[type="submit"],
.am-newsletter button[type="submit"] {
	border-radius: 0;
	padding: 10px 22px;
	font-size: 13px;
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--am-green);
	color: var(--am-white);
	padding: 2.5em 0 0;
}
.site-footer .widget {
	font-size: 12.5px;
}
.site-footer .widget .widget-title,
.site-footer .widget .gamma {
	color: var(--am-charcoal);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	border: 0;
}
.site-footer a:not(.button),
.site-footer .widget a {
	color: var(--am-white) !important;   /* beat Storefront's customizer inline CSS */
	text-decoration: none !important;
}
.site-footer .widget a:hover {
	color: var(--am-charcoal) !important;
}
.site-footer,
.site-footer .widget {
	color: var(--am-white);
}
.site-footer .fa {
	margin-right: 6px;
}
.am-credit {
	background: var(--am-brown);
	color: var(--am-white);
	text-align: center;
	font-size: 13px;
	padding: 14px 0;
	margin: 0 -9999px;   /* bleed to full width inside footer col */
	padding-left: 9999px;
	padding-right: 9999px;
}
.site-footer .am-credit a,
.am-credit a {
	color: var(--am-white) !important;
	text-decoration: underline;
}
.am-cards {
	background: #fff;
	text-align: center;
	padding: 14px 0;
}
.am-cards img {
	max-height: 34px;
	width: auto;
	display: block;
	margin: 0 auto;
}

/* hide storefront handheld footer bar visual clash with brown credit */
.storefront-handheld-footer-bar {
	background: var(--am-brown);
}

/* breadcrumb removed via php; safety */
.storefront-breadcrumb {
	display: none;
}

/* ---------- Checkout: stack "Your order" below "Billing details" ---------- */
.woocommerce-checkout .col2-set {
	width: 100% !important;
	float: none !important;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	width: 100% !important;
	float: none !important;
	clear: both;
}
.woocommerce-checkout #order_review_heading {
	margin-top: 1.2em;
}

/* brand-colored store notices instead of Storefront blue */
.woocommerce-info,
.woocommerce-message {
	background-color: var(--am-brown);
	color: var(--am-white);
}
.woocommerce-info a,
.woocommerce-message a {
	color: var(--am-green);
}

/* old theme showed pagination only below the grid */
.storefront-sorting:first-of-type .woocommerce-pagination {
	display: none;
}

/* ---------- Basket: cross-sells get the full width below the totals ----------
   Storefront floats .cross-sells and .cart_totals 48/48, which crushes the
   "You may be interested in…" product cards into a sliver. Stack instead. */
.cart-collaterals {
	display: flex;
	flex-direction: column;
}
.cart-collaterals .cart_totals {
	width: 100% !important;
	float: none !important;
	order: 1;
}
.cart-collaterals .cross-sells {
	width: 100% !important;
	float: none !important;
	order: 2;
	margin-top: 2.5em;
}
.cart-collaterals .cross-sells ul.products {
	margin-bottom: 0;
}

/* ---------- Price filter: price text on its own line above the button ---------- */
.price_slider_amount {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.price_slider_amount .price_label {
	order: -1;
	margin: 0 !important;
	float: none !important;
	text-align: left !important;
	white-space: nowrap;
}
.price_slider_amount .button {
	float: none !important;
	margin: 0 !important;
}
.widget_price_filter form {
	margin-bottom: 0;
}
/* slider handles: no default blue/purple focus ring */
.price_slider_wrapper .ui-slider .ui-slider-handle:focus {
	outline: none !important;
}

/* ---------- Shop toolbars: identical layout top & bottom ----------
   WooCommerce drops an empty notices-wrapper into the top bar only; as a
   flex child it adds a phantom 16px gap, shifting the top row right.
   The bottom bar also sat flush against the product grid. */
.storefront-sorting {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}
.storefront-sorting .woocommerce-notices-wrapper:empty {
	display: none;
}
.storefront-sorting .woocommerce-ordering,
.storefront-sorting .woocommerce-result-count,
.storefront-sorting form {
	margin: 0;
	float: none;
}
.storefront-sorting .woocommerce-pagination {
	margin: 0 0 0 auto;
	border: 0;
	padding: 0;
	float: none;
}
ul.products + .storefront-sorting {
	margin-top: 2.2em;
}