/*
Theme Name: AO Store
Theme URI: https://ao.com
Description: AO-branded child theme of Storefront for the AO Store (WooCommerce). Requires the free "Storefront" parent theme.
Author: AO Retail Limited
Author URI: https://ao.com
Template: storefront
Version: 1.7.2
Text Domain: ao-store
*/

:root {
	--ao-green: #12c35a;
	--ao-green-dark: #0f5200;
	--ao-navy: #011f44;
	--ao-grey-dark: #242422;
	--ao-grey-light: #f5f5f1;
	--ao-red: #de2417;
}

@font-face {
	font-family: "SmileyFace-Headline";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/SmileyFace-Headline.woff2") format("woff2"),
		url("fonts/SmileyFace-Headline.woff") format("woff");
}

@font-face {
	font-family: "SmileyFace";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/SmileyFace-Regular.woff2") format("woff2"),
		url("fonts/SmileyFace-Regular.woff") format("woff");
}

@font-face {
	font-family: "SmileyFace";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/SmileyFace-Medium.woff2") format("woff2"),
		url("fonts/SmileyFace-Medium.woff") format("woff");
}

@font-face {
	font-family: "SmileyFace";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/SmileyFace-Bold.woff2") format("woff2"),
		url("fonts/SmileyFace-Bold.woff") format("woff");
}

body {
	font-family: "SmileyFace", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ao-grey-dark);
	background: var(--ao-grey-light);
}

/* Form controls don't inherit body's font-family in most browsers */
input,
select,
textarea,
button {
	font-family: inherit;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title {
	font-family: "SmileyFace-Headline", "SmileyFace", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ao-navy);
}

a {
	color: var(--ao-green-dark);
}

a:hover,
a:focus {
	color: var(--ao-navy);
}

/* Header */
.site-header {
	background-color: #fff;
	border-bottom: 1px solid #e1e1db;
}

.site-header .site-title a,
.site-header .site-description {
	color: var(--ao-navy);
}

.site-header a {
	color: var(--ao-navy);
}

.site-header .col-full {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.site-header .site-branding {
	order: 1;
	width: auto !important;
	flex: 0 0 auto !important;
}

.site-header .custom-logo-link img {
	max-height: 70px;
	width: auto;
	height: auto;
}

.site-header .site-search {
	order: 2;
	flex: 1 1 auto;
	max-width: 420px;
	margin: 0 32px;
}

.site-header .site-search input[type="search"] {
	width: 100%;
}

/* Utility links in the header widget area (Appearance > Widgets > Header) */
.header-widget-region {
	display: flex;
	align-items: center;
	order: 3;
	margin-left: auto;
}

.header-widget-region ul {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-widget-region ul li {
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0 10px;
	border-left: 1px solid #d5d6d6;
}

.header-widget-region ul li:first-child {
	border-left: none;
	padding-left: 0;
}

/* Primary buttons: add to cart, checkout, place order */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
button,
input[type="submit"] {
	background-color: var(--ao-green);
	border-color: var(--ao-green);
	color: #fff;
}

/* Primary nav bar now just holds the basket - the menu itself is hidden */
.storefront-primary-navigation {
	display: none;
}

/* WooCommerce shows the sorting bar both above and below the product grid - keep only the top one */
.storefront-sorting:nth-of-type(2) {
	display: none;
}

/* Product image corners */
.woocommerce ul.products li.product img,
.woocommerce div.images img {
	border-radius: 12px;
}

/* Storefront leaves a large gap below the "Shop" title by default */
.woocommerce-products-header {
	padding-bottom: 16px !important;
}

/* WooCommerce's default "info" notice (e.g. no search results) is bright blue by default */
.woocommerce-info {
	background-color: #fff;
	border: 1px solid #e1e1db;
	border-left: 4px solid var(--ao-navy);
	color: var(--ao-grey-dark);
	padding: 16px 20px;
	list-style: none;
}

.woocommerce-info::before {
	content: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--ao-green-dark);
	border-color: var(--ao-green-dark);
	color: #fff;
}

/* Price + sale badge */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ao-navy);
	font-weight: 600;
}

.woocommerce span.onsale {
	background-color: var(--ao-red);
}

/* Footer */
.site-footer,
.storefront-handheld-footer-bar {
	background-color: #fff;
	color: var(--ao-grey-dark);
	border-top: 1px solid #e1e1db;
}

.site-footer a {
	color: var(--ao-green-dark);
}

/* Storefront's own divider above the copyright bar duplicates ours */
.footer-widgets {
	border-bottom: none;
}

.site-footer .widget-title {
	color: var(--ao-navy);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.site-footer .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .widget ul li {
	margin-bottom: 8px;
	font-size: 14px;
}

.site-footer .site-info {
	border-top: 1px solid #e1e1db;
	margin-top: 24px;
	padding: 16px 0;
	font-size: 12px;
	color: #676763;
}

.site-footer .site-info p {
	margin: 0 0 4px;
}