/*
Theme Name: Evergreens
Theme URI:
Description: Child theme of Storefront for Evergreens Aquarium Store.
Author: Evergreens
Template: storefront
Version: 1.0.0
Text Domain: evergreens
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */

:root {
	/* Greens */
	--eg-green: #3c5a43;
	--eg-green-dark: #2f4835;
	--eg-green-tint: #eef1e9;
	--eg-banner-from: #286430;
	--eg-banner-to: #6cc270;

	/* Ink + text */
	--eg-ink: #23261f;
	--eg-ink-soft: #4a4d42;
	--eg-muted: #8a8d80;
	--eg-muted-light: #a7a99d;

	/* Surfaces */
	--eg-surface: #fbfaf6;
	--eg-canvas: #d9d7cd;
	--eg-placeholder: #eeece4;

	/* Lines */
	--eg-border: #e6e3da;
	--eg-border-strong: #d8d5cc;

	/* Something went wrong: a failed checkout field, a coupon that didn't take */
	--eg-alert: #9c3b26;

	/* Footer */
	--eg-footer-bg: #23261f;
	--eg-footer-text: #c9cbc0;
	--eg-footer-meta: #8f9186;
	--eg-footer-rule: #3a3d34;

	/* Type */
	--eg-serif: 'Newsreader', 'Noto Serif Thai', Georgia, serif;
	--eg-sans: 'Hanken Grotesk', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
	--eg-thai-serif: 'Noto Serif Thai', 'Newsreader', serif;

	/* Layout */
	--eg-container: 1440px;
	--eg-gutter: 56px;
	--eg-radius: 2px;
	--eg-radius-img: 3px;
}

/* =========================================================================
   2. Base
   ========================================================================= */

body {
	font-family: var(--eg-sans);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--eg-ink-soft);
	background-color: var(--eg-surface);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.eg-serif {
	font-family: var(--eg-serif);
	font-weight: 400;
	color: var(--eg-ink);
	letter-spacing: 0;
}

a {
	color: var(--eg-green);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--eg-green-dark);
}

/* A Thai sub-line set in the serif companion — used under English headings. */
.eg-th {
	font-family: var(--eg-thai-serif);
	font-weight: 500;
}

/* Small uppercase label above a heading. */
.eg-eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--eg-green);
}

/* Storefront centres content in .col-full at 1170px; the design is wider. */
.col-full,
.eg-container {
	max-width: var(--eg-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--eg-gutter);
	padding-right: var(--eg-gutter);
	box-sizing: border-box;
}

/* =========================================================================
   3. Header
   ========================================================================= */

.site-header {
	padding: 0;
	background-color: var(--eg-surface);
	border-bottom: 0;
}

/* Storefront pushes content 4.236em below the header on the home page, with
   selectors up to four classes deep. The hero should sit flush against the
   navbar; the ID out-specifies those rules without !important. */
.home #masthead {
	margin-bottom: 0;
}

/* --- Row 1: logo + announcement strip --- */

.eg-brandbar__inner {
	display: flex;
	align-items: flex-end;
	gap: 32px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.eg-logo {
	flex: 0 0 auto;
	display: block;
}

.eg-logo img {
	display: block;
	width: auto;
	height: 112px;
}

.eg-announce {
	flex: 1;
	padding: 17px 24px;
	border-radius: var(--eg-radius);
	background: linear-gradient(
		100deg,
		var(--eg-banner-from),
		var(--eg-banner-from),
		var(--eg-banner-to),
		var(--eg-banner-from)
	);
	color: var(--eg-green-tint);
	text-align: center;
}

.eg-announce span {
	font-family: var(--eg-serif);
	font-size: 19px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --- Row 2: nav + utilities --- */

.eg-navbar {
	position: relative; /* anchors the mobile nav drawer (see §13) */
	border-bottom: 1px solid var(--eg-border);
}

.eg-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.eg-nav__list {
	display: flex;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eg-nav__list a {
	font-size: 14.5px;
	color: var(--eg-ink);
}

.eg-nav__list a:hover {
	color: var(--eg-green);
}

/* Sub-menus: revealed on hover, stacked on small screens (see §13). */
.eg-nav__list li {
	position: relative;
}

.eg-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	min-width: 200px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: var(--eg-surface);
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	box-shadow: 0 18px 40px -22px rgba(35, 38, 31, 0.5);
}

.eg-nav__list li:hover > .sub-menu,
.eg-nav__list li:focus-within > .sub-menu {
	display: block;
}

.eg-nav__list .sub-menu a {
	display: block;
	padding: 8px 20px;
}

.eg-utils {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto; /* stays right-aligned when the nav is absent (front page) */
}

.eg-util {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 14px;
	color: #3a3d34;
	cursor: pointer;
}

.eg-util:hover {
	color: var(--eg-green);
}

.eg-util__icon {
	flex-shrink: 0;
}

.eg-cartcount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--eg-green);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.eg-cartcount--empty {
	background: var(--eg-border-strong);
	color: var(--eg-ink-soft);
}

/* --- Search panel --- */

.eg-searchpanel {
	padding-top: 24px;
	padding-bottom: 24px;
	background: var(--eg-green-tint);
	border-bottom: 1px solid var(--eg-border);
}

.eg-searchpanel form {
	display: flex;
	gap: 10px;
	max-width: 640px;
	margin: 0 auto;
}

.eg-searchpanel input[type="search"] {
	flex: 1;
	padding: 13px 16px;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
	background: var(--eg-surface);
	font-family: inherit;
	font-size: 15px;
	box-shadow: none;
}

/* Hamburger — desktop hides it (see §13). */
.eg-navtoggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.eg-navtoggle span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--eg-ink);
}

/* =========================================================================
   4. Footer
   ========================================================================= */

.site-footer {
	padding: 64px 0 26px;
	background-color: var(--eg-footer-bg);
	color: var(--eg-footer-text);
	font-size: 13.5px;
}

.eg-footer__cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--eg-footer-rule);
}

.eg-footer__wordmark {
	font-family: var(--eg-serif);
	font-size: 26px;
	color: #f6f5ef;
}

.eg-footer__brand p {
	max-width: 300px;
	margin: 16px 0 0;
	line-height: 1.7;
}

.eg-footer__heading,
.site-footer .widget-title {
	display: block;
	margin-bottom: 15px;
	color: var(--eg-footer-meta);
	font-family: var(--eg-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.eg-footer__col ul,
.site-footer .widget ul {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer a,
.eg-footer__col a {
	color: var(--eg-footer-text);
}

.site-footer a:hover,
.eg-footer__col a:hover {
	color: #f6f5ef;
}

.eg-footer__baseline {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-top: 26px;
	color: var(--eg-footer-meta);
	font-size: 12.5px;
}

/* =========================================================================
   5. Buttons
   ========================================================================= */

button,
.button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	padding: 15px 28px;
	border-radius: var(--eg-radius);
	background-color: var(--eg-green);
	color: var(--eg-surface);
	font-family: var(--eg-sans);
	font-size: 15px;
	font-weight: 600;
	text-shadow: none;
}

button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--eg-green-dark);
	color: var(--eg-surface);
}

/* Outlined secondary button. */
.eg-button--ghost,
.woocommerce a.button.eg-button--ghost,
.woocommerce button.button.eg-button--ghost {
	border: 1px solid var(--eg-ink);
	background: transparent;
	color: var(--eg-ink);
}

.eg-button--ghost:hover,
.woocommerce a.button.eg-button--ghost:hover,
.woocommerce button.button.eg-button--ghost:hover {
	background: var(--eg-ink);
	color: var(--eg-surface);
}

/* =========================================================================
   6. Product grid + card
   ========================================================================= */

/* Storefront lays the loop out with floats and percentage widths. Swap that
   for a grid driven by WooCommerce's own .columns-N class. */
ul.products {
	display: grid;
	gap: 26px 24px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

ul.products::before,
ul.products::after {
	content: none;
}

/* !important is deliberate. Storefront sizes cards with a matrix of selectors
   — `.site-main ul.products.columns-4 li.product`, plus a
   `.storefront-full-width-content` variant of each — and those percentages
   resolve against the grid track once the parent is display:grid, collapsing
   a 217px column to 48px. Out-specifying every variant means chasing the list
   each time Storefront adds one; grid items need no width of their own. */
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	clear: none;
}

ul.products.columns-1 { grid-template-columns: 1fr; }
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); }

/* --- Card --- */

ul.products li.product > a {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.eg-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--eg-radius-img);
	background: var(--eg-placeholder);
}

.eg-card__media img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.5s ease;
}

ul.products li.product:hover .eg-card__media img {
	transform: scale(1.03);
}

.eg-card__brand,
.eg-card__sale {
	position: absolute;
	top: 12px;
	padding: 5px 9px;
	border-radius: var(--eg-radius);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}

.eg-card__brand {
	left: 12px;
	background: var(--eg-surface);
	color: var(--eg-green);
}

/* Sale sits opposite the brand so the two never collide. */
.eg-card__sale {
	right: 12px;
	background: var(--eg-green);
	color: var(--eg-surface);
}

ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-family: var(--eg-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--eg-ink);
}

ul.products li.product .price {
	display: block;
	margin: 7px 0 0;
	color: var(--eg-ink);
	font-family: var(--eg-sans);
	font-size: 15.5px;
	font-weight: 600;
}

ul.products li.product .price del {
	margin-right: 6px;
	color: var(--eg-muted);
	font-weight: 400;
	opacity: 1;
}

ul.products li.product .price ins {
	background: none;
	text-decoration: none;
}

/* =========================================================================
   7. Homepage
   ========================================================================= */

/* Storefront constrains everything to .col-full at 1170px. The homepage runs
   full-bleed instead and each section manages its own container. */
.home #content > .col-full,
.site-footer > .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Storefront's layout floats .content-area at 73.9% to leave room for a
   sidebar — and keeps reserving it even when no sidebar renders, which was
   squeezing the homepage into 1053px of a 1425px viewport. */
.home .content-area,
.storefront-full-width-content .content-area {
	width: 100%;
	float: none;
	margin-right: 0;
}

.eg-section {
	padding-top: 76px;
}

.eg-sectionhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 34px;
}

.eg-sectionhead h2 {
	margin: 0;
	font-size: 33px;
	line-height: 1.15;
}

.eg-viewall {
	padding-bottom: 3px;
	border-bottom: 1px solid var(--eg-border-strong);
	color: var(--eg-ink);
	font-size: 14.5px;
	white-space: nowrap;
}

/* --- Hero --- */

.eg-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 440px;
	/* Keeps the copy off the edges when it's taller than min-height (small screens). */
	padding: 48px 0;
	box-sizing: border-box;
	background-color: #e3e1d8;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Darkens the left side so the headline stays readable over any photo. */
.eg-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(24, 28, 22, 0.72) 0%,
		rgba(24, 28, 22, 0.35) 45%,
		rgba(24, 28, 22, 0) 70%
	);
}

.eg-hero__inner {
	position: relative;
	width: 100%;
}

.eg-hero__copy {
	max-width: 560px;
	color: #f6f5ef;
}

.eg-hero__eyebrow {
	color: #f6f5ef;
	opacity: 0.85;
}

.eg-hero__heading {
	margin: 18px 0 10px;
	color: #f6f5ef;
	font-size: 58px;
	line-height: 1.08;
}

.eg-hero__th {
	margin: 0 0 22px;
	font-size: 23px;
	line-height: 1.3;
	opacity: 0.9;
}

.eg-hero__text {
	max-width: 430px;
	margin: 0 0 28px;
	font-size: 15.5px;
	line-height: 1.6;
	opacity: 0.9;
}

.eg-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.eg-button--light,
.button.eg-button--light {
	background: var(--eg-surface);
	color: var(--eg-ink);
}

.eg-button--light:hover,
.button.eg-button--light:hover {
	background: #fff;
	color: var(--eg-ink);
}

.eg-button--outline-light,
.button.eg-button--outline-light {
	border: 1px solid rgba(246, 245, 239, 0.6);
	background: transparent;
	color: #f6f5ef;
}

.eg-button--outline-light:hover,
.button.eg-button--outline-light:hover {
	background: rgba(246, 245, 239, 0.12);
	color: #fff;
}

/* --- Category grid --- */

.eg-catgrid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.eg-cat {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eg-cat__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--eg-radius-img);
	background: var(--eg-placeholder);
}

.eg-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.eg-cat:hover .eg-cat__media img {
	transform: scale(1.04);
}

.eg-cat__name {
	margin: 0;
	color: var(--eg-ink);
	font-family: var(--eg-serif);
	font-size: 17px;
	line-height: 1.3;
}

/* --- Editorial band --- */

.eg-editorial {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 76px;
	background: var(--eg-green-tint);
}

.eg-editorial__media {
	min-height: 380px;
	background-color: #e3e1d8;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.eg-editorial__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 72px;
}

.eg-editorial__body h2 {
	margin: 20px 0 8px;
	font-size: 36px;
	line-height: 1.18;
}

.eg-editorial__th {
	margin: 0 0 22px;
	color: #5a5d51;
	font-size: 20px;
}

.eg-editorial__text {
	max-width: 440px;
	margin: 0 0 30px;
	line-height: 1.75;
}

.eg-editorial__cta {
	align-self: flex-start;
}

/* --- Brand strip --- */

.eg-brands {
	padding: 56px 0;
	border-top: 1px solid var(--eg-border);
	text-align: center;
}

.eg-brands__label {
	margin: 0 0 26px;
	color: #9a9c90;
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.eg-brands__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 64px;
}

.eg-brands__list a {
	color: #6c7064;
	font-family: var(--eg-serif);
	font-size: 26px;
}

.eg-brands__list a:hover {
	color: var(--eg-green);
}

/* --- Trust bar --- */

.eg-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--eg-border);
}

.eg-trust__item {
	padding: 36px 48px;
	border-right: 1px solid var(--eg-border);
}

.eg-trust__item:last-child {
	border-right: 0;
}

.eg-trust__title {
	margin: 0 0 5px;
	color: var(--eg-ink);
	font-family: var(--eg-serif);
	font-size: 19px;
}

.eg-trust__text {
	margin: 0;
	color: var(--eg-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

/* =========================================================================
   8. About page
   ========================================================================= */

/* Same full-bleed treatment as the homepage: the heading band spans the
   viewport and each section manages its own container. */
.eg-page-about #content > .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Storefront spaces the breadcrumb ~57px off the content; the band below
   provides its own separation. */
.eg-page-about .storefront-breadcrumb {
	margin-bottom: 0;
}

.eg-pagehead {
	padding: 72px 0 64px;
	background: var(--eg-green-tint);
}

.eg-pagehead__heading {
	margin: 18px 0 0;
	font-size: 52px;
	line-height: 1.1;
}

.eg-about__intro {
	padding-top: 64px;
}

.eg-about__intro .entry-content {
	max-width: 680px;
	font-size: 17px;
	line-height: 1.75;
}

.eg-about__details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-top: 64px;
	padding-bottom: 76px;
}

.eg-about__block {
	padding-right: 56px;
}

.eg-about__block + .eg-about__block {
	padding-right: 0;
	padding-left: 56px;
	border-left: 1px solid var(--eg-border);
}

.eg-about__label {
	margin: 0 0 20px;
	color: var(--eg-muted);
	font-family: var(--eg-sans);
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.eg-about__company {
	margin: 0 0 12px;
	color: var(--eg-ink);
	font-family: var(--eg-serif);
	font-size: 30px;
	line-height: 1.2;
}

.eg-about__address {
	margin: 0 0 24px;
	font-size: 16px;
	font-style: normal;
	line-height: 1.8;
}

.eg-about__contact {
	margin: 0;
	border-top: 1px solid var(--eg-border);
}

.eg-about__contact div {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 16px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--eg-border);
}

/* Storefront bolds <dt> and spaces <dd> for prose lists. */
.eg-about__contact dt {
	color: var(--eg-muted);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.eg-about__contact dd {
	margin: 0;
	font-size: 16px;
	overflow-wrap: anywhere;
}

.eg-about__contact a {
	color: var(--eg-ink);
}

.eg-about__contact a:hover {
	color: var(--eg-green);
}

/* =========================================================================
   9. Product page
   ========================================================================= */

/* --- Breadcrumb (every inner page) --- */

.woocommerce-breadcrumb {
	color: var(--eg-ink);
	font-size: 13px;
}

.woocommerce-breadcrumb a,
.woocommerce-breadcrumb .breadcrumb-separator {
	color: var(--eg-muted);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--eg-ink);
}

/* Storefront hides the " / " off-screen and draws a Font Awesome chevron in its
   place. Inline rather than inline-block, so the spaces around the slash show. */
.woocommerce-breadcrumb .breadcrumb-separator {
	display: inline;
	padding: 0;
	text-indent: 0;
}

.woocommerce-breadcrumb .breadcrumb-separator::after {
	content: none;
}

/* Storefront puts a Font Awesome house before "Home". */
.woocommerce-breadcrumb a:first-of-type::before {
	content: none;
}

/* Storefront leaves a wide gap under the breadcrumb; the design has 32px. */
.single-product .storefront-breadcrumb {
	margin-bottom: 32px;
	padding: 14px 0 0;
}

/* --- Gallery + summary --- */

/* Gallery and summary side by side; everything after them (details, related
   products) spans both columns. minmax(0, …) stops the gallery slider's wide
   inner strip from stretching its track. */
.single-product div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 56px;
	align-items: start;
}

.single-product div.product::before,
.single-product div.product::after {
	content: none;
}

.single-product div.product > * {
	grid-column: 1 / -1;
}

/* Storefront floats these two at 39% / 57%; as grid items those widths would
   resolve against the tracks. */
.storefront-full-width-content.single-product div.product .woocommerce-product-gallery,
.storefront-full-width-content.single-product div.product .summary {
	width: auto;
	float: none;
	margin: 0 0 64px;
}

.storefront-full-width-content.single-product div.product .woocommerce-product-gallery {
	grid-column: 1;
}

.storefront-full-width-content.single-product div.product .summary {
	grid-column: 2;
	padding-top: 6px;
}

/* Pinned to the image like the card's badge. Absolutely positioned, it takes
   no grid cell. */
.single-product div.product > .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
	margin: 0;
	padding: 5px 9px;
	border: 0;
	border-radius: var(--eg-radius);
	background: var(--eg-green);
	color: var(--eg-surface);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	line-height: 1;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport,
.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	overflow: hidden;
	border-radius: 4px;
	background: var(--eg-placeholder);
}

.single-product div.product .woocommerce-product-gallery .flex-viewport {
	margin-bottom: 16px;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::before,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after {
	content: none;
}

/* !important for the reason given in §6: Storefront sizes thumbnails with a
   selector per column count, and those percentages would resolve against the
   grid tracks. */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1.5px solid transparent;
	border-radius: var(--eg-radius-img);
	background: var(--eg-placeholder);
	opacity: 1;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	border-color: var(--eg-green);
}

/* --- Summary --- */

.eg-product__brand {
	letter-spacing: 0.22em;
}

.single-product div.product .product_title {
	margin: 12px 0 4px;
	font-size: 36px;
	line-height: 1.15;
}

.single-product div.product p.price {
	margin: 0 0 4px;
	color: var(--eg-ink);
	font-size: 26px;
	font-weight: 600;
}

.single-product div.product p.price del {
	margin-right: 8px;
	color: var(--eg-muted);
	font-size: 0.75em;
	font-weight: 400;
	opacity: 1;
}

.single-product div.product p.price ins {
	background: none;
	text-decoration: none;
}

.eg-product__tax {
	margin: 0 0 24px;
	color: var(--eg-muted);
	font-size: 12.5px;
}

.single-product div.product .woocommerce-product-details__short-description {
	max-width: 460px;
	margin-bottom: 30px;
	font-size: 15px;
	line-height: 1.75;
}

.woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

/* --- Options --- */

.single-product div.product table.variations {
	margin: 0 0 8px;
	border: 0;
}

.single-product div.product table.variations th.label {
	padding-bottom: 12px;
	color: var(--eg-ink-soft);
	font-size: 13.5px;
	font-weight: 400;
}

.single-product div.product table.variations td.value {
	margin-bottom: 20px;
}

/* The buttons replace the dropdown once WooCommerce's script is running. The
   select stays in the form, hidden, for WooCommerce to read. */
.woocommerce-js table.variations td.value:has(.eg-options) select,
.woocommerce-no-js .eg-options {
	display: none;
}

.eg-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Long option names (some run to 90 characters) read better as a list. */
.eg-options--list {
	flex-direction: column;
	gap: 8px;
}

.eg-option {
	padding: 11px 20px;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
	background: transparent;
	color: var(--eg-ink-soft);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
}

.eg-option:hover,
.eg-option:focus {
	border-color: var(--eg-green);
	background: transparent;
	color: var(--eg-ink);
}

/* The inset shadow thickens the border without shifting the text. */
.eg-option[aria-pressed="true"] {
	border-color: var(--eg-green);
	background: var(--eg-green-tint);
	box-shadow: inset 0 0 0 0.5px var(--eg-green);
	color: var(--eg-green);
	font-weight: 600;
}

.eg-option:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.single-product div.product .reset_variations {
	margin: 10px 0 0;
	color: var(--eg-muted);
	font-size: 13px;
	text-decoration: underline;
}

.single-product div.product .single_variation .price {
	margin: 0 0 16px;
	color: var(--eg-ink);
	font-size: 20px;
	font-weight: 600;
}

.single-product div.product .stock {
	margin: 0 0 16px;
	font-size: 14px;
}

/* --- Quantity + buttons --- */

.single-product div.product form.cart {
	margin: 0 0 28px;
	padding: 0;
}

/* Quantity and Add to cart share a row; Buy now takes the next. */
.single-product div.product form.cart:not(.variations_form),
.single-product div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 14px;
	padding: 0;
}

.single-product div.product form.cart::before,
.single-product div.product form.cart::after,
.single-product div.product .variations_button::before,
.single-product div.product .variations_button::after {
	content: none;
}

.single-product div.product form.cart .single_add_to_cart_button {
	flex: 1;
	font-size: 15.5px;
}

.single-product div.product form.cart .eg-buy-now {
	flex: 1 0 100%;
	padding: 14px;
}

.single-product div.product form.cart .quantity {
	display: flex;
	float: none;
	margin: 0;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
}

/* Sold-individually products get a hidden quantity field; the steppers go with it. */
.single-product div.product form.cart .quantity:has(input[type="hidden"]) {
	display: none;
}

.single-product div.product form.cart .quantity .qty {
	width: 44px;
	padding: 0;
	border: 0;
	border-right: 1px solid var(--eg-border);
	border-left: 1px solid var(--eg-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--eg-ink);
	font-size: 15px;
	-moz-appearance: textfield;
	appearance: textfield;
}

.single-product div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.single-product div.product form.cart .quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.eg-qty {
	width: 44px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--eg-muted);
	font-size: 18px;
	font-weight: 400;
}

.eg-qty:hover,
.eg-qty:focus {
	background: var(--eg-green-tint);
	color: var(--eg-ink);
}

/* --- Meta --- */

.single-product div.product .eg-product__meta {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-top: 22px;
	border-top: 1px solid var(--eg-border);
	color: #6c7064;
	font-size: 13.5px;
}

.eg-product__meta p {
	margin: 0;
}

.single-product div.product .product_meta .sku_wrapper {
	display: inline;
}

.eg-product__stock {
	color: var(--eg-green);
	font-weight: 600;
}

.sku_wrapper + .eg-product__stock::before {
	content: "·";
	margin: 0 6px;
	color: #6c7064;
	font-weight: 400;
}

/* --- Description + specs --- */

.eg-product__details {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 56px;
	padding: 52px 0 64px;
	border-top: 1px solid var(--eg-border);
}

.eg-product__details h2 {
	margin: 0 0 18px;
	font-size: 26px;
}

.eg-product__description .entry-content {
	font-size: 15px;
	line-height: 1.8;
}

.eg-specs {
	margin: 0;
	font-size: 14.5px;
}

.eg-specs div {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 13px 0;
	border-bottom: 1px solid var(--eg-border);
}

.eg-specs div:last-child {
	border-bottom: 0;
}

/* Storefront bolds <dt> and spaces <dd> for prose lists. */
.eg-specs dt {
	color: var(--eg-muted);
	font-weight: 400;
}

.eg-specs dd {
	margin: 0;
	color: var(--eg-ink);
	text-align: right;
}

.eg-specs a {
	color: var(--eg-ink);
}

.eg-specs a:hover {
	color: var(--eg-green);
}

/* --- Related products --- */

.single-product div.product .related,
.single-product div.product .upsells {
	padding: 52px 0 64px;
	border-top: 1px solid var(--eg-border);
}

.single-product div.product .related > h2:first-child,
.single-product div.product .upsells > h2:first-child {
	margin: 0 0 30px;
	font-size: 28px;
	text-align: left;
}

/* =========================================================================
   10. Shop listing
   ========================================================================= */

/* Shop, category, brand and product-search pages; inc/shop.php adds the body class. */

.eg-shop-listing .storefront-breadcrumb {
	margin-bottom: 0;
	padding: 14px 0 0;
}

/* --- Heading band --- */

.eg-shophead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0 40px;
	border-bottom: 1px solid var(--eg-border);
}

.eg-shophead__title {
	margin: 0;
	font-size: 40px;
	line-height: 1.1;
}

.eg-shophead__text .term-description,
.eg-shophead__text .page-description {
	max-width: 640px;
	margin-top: 14px;
}

.eg-shophead__text .term-description > :last-child,
.eg-shophead__text .page-description > :last-child {
	margin-bottom: 0;
}

.eg-shophead__count {
	margin: 0;
	color: var(--eg-muted);
	font-size: 14px;
	white-space: nowrap;
}

/* --- Filter column --- */

.eg-shop {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
	padding: 40px 0 64px;
}

/* Small screens only (§13). */
.eg-filtertoggle {
	display: none;
}

.eg-filters {
	display: flex;
	flex-direction: column;
	gap: 30px;
	font-size: 14.5px;
}

.eg-filter + .eg-filter {
	padding-top: 30px;
	border-top: 1px solid var(--eg-border);
}

.eg-filter__title {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.3;
}

.eg-filter__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eg-filter__link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--eg-ink-soft);
	line-height: 1.35;
}

.eg-filter__link:hover,
.eg-filter__link.is-active {
	color: var(--eg-ink);
}

.eg-filter__list--link .eg-filter__link.is-active {
	font-weight: 600;
}

.eg-filter__count {
	margin-left: auto;
	color: var(--eg-muted-light);
	font-size: 13px;
	font-weight: 400;
}

/* Each option is a link that toggles its filter; the box is drawn here. */
.eg-filter__list--check .eg-filter__link::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 1.5px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
}

.eg-filter__list--check .eg-filter__link:hover::before {
	border-color: var(--eg-green);
}

.eg-filter__list--check .eg-filter__link.is-active::before {
	border-color: var(--eg-green);
	background: var(--eg-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fbfaf6' stroke-width='2'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.eg-filter__more summary {
	margin-top: 12px;
	color: var(--eg-green);
	font-size: 13.5px;
	cursor: pointer;
	list-style: none;
}

.eg-filter__more summary::-webkit-details-marker {
	display: none;
}

/* Opened, the rest of the list follows straight on; there's no "show fewer". */
.eg-filter__more[open] > summary {
	display: none;
}

.eg-filter__more .eg-filter__list {
	margin-top: 12px;
}

/* --- Price slider --- */

/* Storefront spaces every form off what follows; the group gap already does. */
.eg-price {
	margin: 0;
}

/* Two range inputs stacked on one track. The inputs overhang the track by
   half a handle each side, so a handle's centre sits exactly on its value;
   --eg-from / --eg-to (set by shop.js) colour the chosen stretch. */
.eg-price__slider {
	--eg-from: 0%;
	--eg-to: 100%;
	position: relative;
	height: 22px;
	margin: 0 7px;
}

.eg-price__slider::before {
	content: "";
	position: absolute;
	top: 10px;
	right: 0;
	left: 0;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--eg-border-strong) var(--eg-from),
		var(--eg-green) var(--eg-from),
		var(--eg-green) var(--eg-to),
		var(--eg-border-strong) var(--eg-to)
	);
}

.eg-price__slider input {
	position: absolute;
	top: 0;
	left: -7px;
	width: calc(100% + 14px);
	height: 22px;
	margin: 0;
	padding: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.eg-price__slider input::-webkit-slider-runnable-track {
	height: 22px;
	background: none;
}

.eg-price__slider input::-moz-range-track {
	background: none;
}

/* Only the handles take the pointer, so one input's track never blocks the other's handle. */
.eg-price__slider input::-webkit-slider-thumb {
	width: 14px;
	height: 14px;
	margin-top: 4px;
	box-sizing: border-box;
	border: 2px solid var(--eg-green);
	border-radius: 50%;
	background: var(--eg-surface);
	cursor: pointer;
	-webkit-appearance: none;
	pointer-events: auto;
}

.eg-price__slider input::-moz-range-thumb {
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 2px solid var(--eg-green);
	border-radius: 50%;
	background: var(--eg-surface);
	cursor: pointer;
	pointer-events: auto;
}

.eg-price__slider input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(60, 90, 67, 0.25);
}

.eg-price__slider input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(60, 90, 67, 0.25);
}

.eg-price__values {
	display: flex;
	justify-content: space-between;
	margin: 12px 0 0;
	color: var(--eg-muted);
	font-size: 13px;
}

/* The slider needs shop.js; without it the group is hidden rather than inert. */
.woocommerce-no-js .eg-filter--price {
	display: none;
}

/* --- Toolbar: active filters + sorting --- */

.eg-shop .storefront-sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 26px;
	font-size: 14px;
}

.eg-shop .storefront-sorting::before,
.eg-shop .storefront-sorting::after {
	content: none;
}

.eg-shop .storefront-sorting .woocommerce-notices-wrapper {
	flex-basis: 100%;
}

.eg-shop .storefront-sorting .woocommerce-notices-wrapper:empty {
	display: none;
}

.eg-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

/* No products: the chips stand alone above the notice. */
.eg-shop__main > .eg-chips {
	margin-bottom: 26px;
}

.eg-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px 7px 14px;
	border-radius: var(--eg-radius);
	background: var(--eg-green-tint);
	color: var(--eg-green);
	font-size: 13px;
}

.eg-chip:hover {
	background: var(--eg-green);
	color: var(--eg-surface);
}

.eg-chip__x {
	font-size: 10px;
}

.eg-chips__clear {
	margin-left: 4px;
	color: var(--eg-muted);
	font-size: 13px;
	text-decoration: underline;
}

.eg-shop .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
	margin: 0 0 0 auto;
	padding: 0;
}

.eg-shop .woocommerce-ordering label {
	color: var(--eg-muted);
}

.eg-shop .woocommerce-ordering select {
	padding: 8px 36px 8px 16px;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234a4d42' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center / 10px no-repeat;
	color: var(--eg-ink);
	font-family: var(--eg-sans);
	font-size: 14px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* --- Grid, pagination, empty state --- */

.eg-shop ul.products {
	margin-bottom: 0;
}

/* The toolbar below the grid holds only pagination. */
.eg-shop ul.products + .storefront-sorting {
	justify-content: center;
	margin: 48px 0 0;
}

.eg-shop .woocommerce-pagination {
	float: none;
	padding: 0;
	border: 0;
}

.eg-shop .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	border: 0;
}

.eg-shop .woocommerce-pagination ul.page-numbers::before,
.eg-shop .woocommerce-pagination ul.page-numbers::after {
	content: none;
}

.eg-shop .woocommerce-pagination .page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
	background: transparent;
	color: var(--eg-ink);
	font-size: 14px;
}

.eg-shop .woocommerce-pagination .page-numbers li a.page-numbers:hover {
	border-color: var(--eg-green);
	background: transparent;
	color: var(--eg-green);
}

.eg-shop .woocommerce-pagination .page-numbers li .page-numbers.current {
	border-color: var(--eg-green);
	background: var(--eg-green);
	color: #fff;
}

.eg-shop .woocommerce-pagination .page-numbers li .page-numbers.dots {
	border-color: transparent;
}

.eg-shop .woocommerce-pagination .page-numbers li .page-numbers.prev,
.eg-shop .woocommerce-pagination .page-numbers li .page-numbers.next {
	color: var(--eg-muted);
}

.eg-shop .woocommerce-no-products-found .woocommerce-info {
	padding: 20px 24px;
	border: 0;
	background: var(--eg-green-tint);
	color: var(--eg-ink);
}

.eg-shop .woocommerce-no-products-found .woocommerce-info::before {
	content: none;
}

/* =========================================================================
   11. Cart + checkout
   ========================================================================= */

/* The cart, checkout and order-received pages, all on WooCommerce's classic
   templates. inc/cart-checkout.php adds the body class, the heading band and
   the two wrappers these grids need; the rest is WooCommerce's own markup,
   restyled here. The account pages (§12) take the same body class, so the
   band, form fields, notices and order details here apply there too. */

.eg-copage .storefront-breadcrumb {
	margin-bottom: 0;
	padding: 14px 0 0;
}

/* Storefront spaces .entry-content off the page title the band replaces. */
.eg-copage .entry-content {
	margin-top: 0;
}

/* Storefront fills every WooCommerce table and stripes its alternate rows in
   tints of the page colour; on these pages the rules do the separating. */
.eg-copage table.shop_table,
.eg-copage table.shop_table tbody tr td,
.eg-copage table.shop_table tbody tr th {
	background: none;
}

/* --- Heading band --- */

.eg-cohead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0 28px;
	border-bottom: 1px solid var(--eg-border);
}

.eg-cohead__title {
	margin: 0;
	font-size: 40px;
	line-height: 1.1;
}

/* The cart's item count, or who is signed in to the account. */
.eg-cohead__count,
.eg-cohead__meta {
	margin: 12px 0 0;
	color: var(--eg-muted);
	font-size: 14px;
}

.eg-cohead__meta strong {
	color: var(--eg-ink);
	font-weight: 600;
}

/* Empty while the cart is. */
.eg-cohead__count:empty {
	display: none;
}

.eg-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.eg-steps__step {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--eg-muted-light);
}

/* A rule between the steps, rather than a character a screen reader reads out. */
.eg-steps__step + .eg-steps__step::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--eg-border-strong);
}

.eg-steps__step.is-done,
.eg-steps__step.is-done a {
	color: var(--eg-muted);
}

.eg-steps__step.is-done a:hover {
	color: var(--eg-ink);
}

.eg-steps__step.is-current {
	color: var(--eg-green);
	font-weight: 600;
}

/* --- Two columns --- */

/* Cart: the items form, then .cart-collaterals holding the totals. Checkout:
   the customer's details, then the summary wrapper. Storefront floats both
   columns at percentage widths — a grid item ignores the float but not the
   width, so the reset below matters. */
.eg-cart,
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 56px;
	align-items: start;
	padding: 40px 0 72px;
}

.eg-cart > *,
.woocommerce-checkout form.checkout > * {
	width: auto;
	float: none;
	margin: 0;
}

/* Storefront clears the floats it set with a pair of pseudo-elements, which in
   a grid container become two more grid items — and push the real ones along
   by one cell. */
.woocommerce-checkout form.checkout::before,
.woocommerce-checkout form.checkout::after {
	content: none;
}

/* Validation errors come back above both columns. */
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
	margin-bottom: 28px;
}

/* The summary follows the page down past a long cart or a long form. */
.eg-cart .cart-collaterals,
.eg-checkout__summary {
	position: sticky;
	top: 24px;
}

/* --- Cart items --- */

.eg-cart table.cart {
	margin: 0;
	background: none;
}

.eg-cart table.cart thead th {
	padding: 0 16px 14px;
	background: none;
	border-bottom: 1px solid var(--eg-border-strong);
	color: var(--eg-muted);
	font-family: var(--eg-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}

.eg-cart table.cart td,
.eg-cart table.cart th {
	padding: 20px 16px;
	border-bottom: 1px solid var(--eg-border);
	background: none;
	vertical-align: middle;
}

.eg-cart table.cart td:first-child,
.eg-cart table.cart thead th:first-child {
	padding-left: 0;
}

.eg-cart table.cart td:last-child,
.eg-cart table.cart thead th:last-child {
	padding-right: 0;
	text-align: right;
}

/* Storefront turns this cell into a spacer and hangs the × over the thumbnail's
   corner; the design gives it a narrow column of its own. */
.eg-cart table.cart td.product-remove {
	position: static;
	width: 26px;
	padding: 20px 0;
	border-top: 0;
}

/* Relative, not static: Storefront stretches an invisible ::before over the
   link to make it easier to hit, and without a positioned link that box
   stretches over the whole window — every click on the page removes the item. */
.eg-cart table.cart td.product-remove a.remove {
	position: relative;
	display: block;
	width: 26px;
	height: 26px;
	color: var(--eg-muted-light);
	font-size: 20px;
	line-height: 24px;
	text-align: center;
}

.eg-cart table.cart td.product-remove a.remove:hover {
	background: none;
	color: var(--eg-ink);
}

.eg-cart table.cart td.product-thumbnail {
	width: 88px;
}

.eg-cart table.cart td.product-thumbnail img {
	width: 88px;
	max-width: none;
	border-radius: var(--eg-radius-img);
}

.eg-cart table.cart td.product-name {
	font-size: 16px;
	line-height: 1.4;
	overflow-wrap: break-word;
	word-break: normal;
}

.eg-cart table.cart td.product-name a {
	color: var(--eg-ink);
	text-decoration: none;
}

.eg-cart table.cart td.product-name a:hover {
	color: var(--eg-green);
}

/* Variation names, which WooCommerce prints as a definition list. */
.eg-cart table.cart td.product-name dl.variation {
	margin: 6px 0 0;
	color: var(--eg-muted);
	font-size: 13.5px;
}

.eg-cart table.cart td.product-name dl.variation dt,
.eg-cart table.cart td.product-name dl.variation dd,
.eg-cart table.cart td.product-name dl.variation dd p {
	display: inline;
	margin: 0;
	font-weight: 400;
}

/* Each of these holds one short thing, so they are sized to it (width: 1% on a
   table cell shrinks it to its content) and the name column takes the rest. */
.eg-cart table.cart td.product-price,
.eg-cart table.cart td.product-quantity,
.eg-cart table.cart td.product-subtotal {
	width: 1%;
	white-space: nowrap;
}

.eg-cart table.cart td.product-price,
.eg-cart table.cart td.product-subtotal {
	color: var(--eg-ink);
	font-size: 15px;
}

.eg-cart table.cart td.product-subtotal {
	font-weight: 600;
}

/* The same field and stepper as the product page (§9). */
.eg-cart table.cart td.product-quantity .quantity {
	display: inline-flex;
	margin: 0;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
}

.eg-cart table.cart td.product-quantity .qty {
	width: 44px;
	padding: 6px 0;
	border: 0;
	border-right: 1px solid var(--eg-border);
	border-left: 1px solid var(--eg-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--eg-ink);
	font-size: 15px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.eg-cart table.cart td.product-quantity .qty::-webkit-inner-spin-button,
.eg-cart table.cart td.product-quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* --- Cart actions: coupon, update, continue --- */

/* A flex or grid parent here would take the cell out of the table's layout,
   and with it the colspan that makes this row span every column. */
.eg-cart table.cart td.actions {
	padding: 26px 0 0;
	border-top: 0;
	border-bottom: 0;
	background: none;
	text-align: right;
}

.eg-cart table.cart td.actions::after {
	content: "";
	display: block;
	clear: both;
}

.eg-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	float: left;
	gap: 10px;
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

/* Storefront blocks and full-widths every input in this cell. */
.eg-cart table.cart td.actions input.input-text {
	display: inline-block;
	width: 190px;
	margin: 0;
	padding: 13px 16px;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
	background: var(--eg-surface);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
}

.eg-cart table.cart td.actions .button {
	display: inline-block;
	width: auto;
	margin: 0;
	vertical-align: middle;
	padding: 13px 22px;
	border: 1px solid var(--eg-ink);
	background: transparent;
	color: var(--eg-ink);
	font-size: 14.5px;
}

.eg-cart table.cart td.actions .button:hover:not([disabled]) {
	background: var(--eg-ink);
	color: var(--eg-surface);
}

.eg-cart table.cart td.actions .button[disabled] {
	border-color: var(--eg-border-strong);
	color: var(--eg-muted-light);
}

.eg-cart table.cart td.actions .coupon-error-notice {
	flex: 1 0 100%;
	margin: 0;
	color: var(--eg-alert);
	font-size: 13.5px;
	text-align: left;
}

.eg-cart__continue {
	margin-left: 20px;
	color: var(--eg-green);
	font-size: 14.5px;
	vertical-align: middle;
	white-space: nowrap;
}

/* --- Totals and order summary card --- */

.eg-cart .cart-collaterals .cart_totals,
.eg-checkout__summary {
	width: auto;
	float: none;
	margin: 0;
	padding: 28px;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-green-tint);
}

/* Storefront floats these two at 41% of the checkout form; inside the card
   they are the whole of it. */
.eg-checkout__summary #order_review_heading,
.eg-checkout__summary #order_review {
	width: auto;
	float: none;
	clear: none;
	background: none;
}

.eg-cart .cart-collaterals .cart_totals h2,
.eg-checkout__summary #order_review_heading {
	margin: 0 0 20px;
	font-size: 24px;
	line-height: 1.2;
}

.eg-cart .cart_totals table.shop_table,
.eg-checkout__summary table.shop_table {
	margin: 0;
	border: 0;
	background: none;
}

.eg-cart .cart_totals table.shop_table th,
.eg-cart .cart_totals table.shop_table td,
.eg-checkout__summary table.shop_table th,
.eg-checkout__summary table.shop_table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--eg-border-strong);
	background: none;
	color: var(--eg-ink-soft);
	font-family: var(--eg-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
}

.eg-cart .cart_totals table.shop_table td,
.eg-checkout__summary table.shop_table td {
	color: var(--eg-ink);
	overflow-wrap: anywhere;
	text-align: right;
}

/* The review table's own header row only repeats the card's heading. */
.eg-checkout__summary table.shop_table thead {
	display: none;
}

.eg-checkout__summary table.shop_table td.product-name {
	color: var(--eg-ink);
	text-align: left;
	white-space: normal;
}

.eg-checkout__summary table.shop_table td.product-name .product-quantity {
	color: var(--eg-muted);
	font-weight: 400;
}

.eg-cart .cart_totals table.shop_table tr.order-total th,
.eg-cart .cart_totals table.shop_table tr.order-total td,
.eg-checkout__summary table.shop_table tr.order-total th,
.eg-checkout__summary table.shop_table tr.order-total td {
	padding-top: 16px;
	border-bottom: 0;
	color: var(--eg-ink);
	font-size: 19px;
}

.eg-cart .cart_totals table.shop_table tr.order-total td,
.eg-checkout__summary table.shop_table tr.order-total td {
	font-weight: 600;
}

.eg-cart .cart_totals table.shop_table tr.order-total small,
.eg-checkout__summary table.shop_table tr.order-total small {
	display: block;
	color: var(--eg-muted);
	font-size: 12.5px;
	font-weight: 400;
}

/* Shipping choices, in the cart totals and in the order review. */
#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

#shipping_method li {
	margin: 0 0 8px;
	padding: 0;
	text-align: right;
}

#shipping_method li:last-child {
	margin-bottom: 0;
}

#shipping_method label {
	display: inline;
	color: var(--eg-ink);
}

.woocommerce-shipping-destination {
	margin: 10px 0 0;
	color: var(--eg-muted);
	font-size: 13px;
}

.shipping-calculator-button {
	display: inline-block;
	margin-top: 8px;
	font-size: 13.5px;
}

.shipping-calculator-form {
	margin-top: 14px;
	text-align: left;
}

.eg-cart .wc-proceed-to-checkout {
	margin: 24px 0 0;
	padding: 0;
}

.eg-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	margin: 0;
	padding: 17px 24px;
	font-size: 16px;
	text-align: center;
}

/* --- Empty cart --- */

.eg-copage .wc-empty-cart-message .cart-empty {
	margin: 0;
	padding: 72px 0 0;
	border: 0;
	background: none;
	color: var(--eg-ink);
	font-family: var(--eg-serif);
	font-size: 28px;
	text-align: center;
}

.eg-copage .wc-empty-cart-message .cart-empty::before {
	content: none;
}

.eg-copage .return-to-shop {
	margin: 0;
	padding: 24px 0 96px;
	text-align: center;
}

/* --- Checkout: the customer's details --- */

.woocommerce-checkout #customer_details {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	margin: 0 0 22px;
	font-size: 24px;
	line-height: 1.2;
}

/* The name and the postcode/city pairs share a row; the rest run full width.
   The field rules from here on cover the account's address and details forms
   too, hence the :is(). */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row {
	margin: 0 0 20px;
	padding: 0;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row-wide,
:is(.woocommerce-checkout, .woocommerce-account) .form-row.notes {
	grid-column: 1 / -1;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row-first,
:is(.woocommerce-checkout, .woocommerce-account) .form-row-last {
	width: auto;
	float: none;
	margin-right: 0;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row label {
	display: block;
	margin: 0 0 8px;
	color: var(--eg-muted);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Thai captions (inc/cart-checkout.php). Thai has no capitals, its stacked
   vowel and tone marks don't take letter-spacing well, and at the Latin labels'
   12px it is hard to read. */
:is(.woocommerce-checkout, .woocommerce-account) .form-row label.eg-label-th {
	color: var(--eg-ink-soft);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row .required {
	border: 0;
	color: var(--eg-green);
	text-decoration: none;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row .input-text,
:is(.woocommerce-checkout, .woocommerce-account) .form-row select,
:is(.woocommerce-checkout, .woocommerce-account) .form-row textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
	background: var(--eg-surface);
	box-shadow: none;
	color: var(--eg-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row textarea {
	min-height: 110px;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row .input-text:focus,
:is(.woocommerce-checkout, .woocommerce-account) .form-row select:focus,
:is(.woocommerce-checkout, .woocommerce-account) .form-row textarea:focus {
	border-color: var(--eg-green);
	box-shadow: 0 0 0 3px var(--eg-green-tint);
	outline: none;
}

/* Thailand is the only country the store ships to, so WooCommerce prints it as
   text with a hidden field behind it. */
:is(.woocommerce-checkout, .woocommerce-account) .form-row strong {
	display: block;
	padding: 13px 0;
	color: var(--eg-ink);
	font-weight: 400;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row .description {
	margin: 8px 0 0;
	color: var(--eg-muted);
	font-size: 13px;
}

/* Storefront marks a field that failed validation with an inset red bar. */
:is(.woocommerce-checkout, .woocommerce-account) .form-row.woocommerce-invalid input.input-text,
:is(.woocommerce-checkout, .woocommerce-account) .form-row.woocommerce-invalid select {
	border-color: var(--eg-alert);
	box-shadow: none;
}

:is(.woocommerce-checkout, .woocommerce-account) .form-row.woocommerce-validated input.input-text {
	box-shadow: none;
}

/* "Ship to a different address?" is a checkbox inside a heading. */
.woocommerce-checkout #ship-to-different-address {
	margin: 0;
}

.woocommerce-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--eg-ink);
	font-family: var(--eg-serif);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Storefront pins this one checkbox to the right-hand end of its heading. */
.woocommerce-checkout #ship-to-different-address .input-checkbox {
	position: static;
	width: 16px;
	height: 16px;
	margin: 0;
}

.woocommerce-checkout .shipping_address {
	padding-top: 24px;
}

/* The province list is a select2, which brings its own markup — and appends the
   dropdown to the end of the page, so these hang off the body class. */
.eg-copage .select2-container--default .select2-selection--single {
	height: auto;
	padding: 12px 16px;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
	background: var(--eg-surface);
}

.eg-copage .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--eg-ink);
	font-size: 15px;
	line-height: 1.5;
}

.eg-copage .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.eg-copage .select2-dropdown {
	border-color: var(--eg-border-strong);
	border-radius: var(--eg-radius);
	background: var(--eg-surface);
}

.eg-copage .select2-container--default .select2-results__option--highlighted[aria-selected],
.eg-copage .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--eg-green);
	color: var(--eg-surface);
}

.eg-copage .select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 8px 10px;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
}

/* --- Checkout: coupon --- */

.woocommerce-checkout .woocommerce-form-coupon-toggle {
	padding-top: 28px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--eg-muted);
	font-size: 14px;
}

.woocommerce-checkout form.checkout_coupon {
	max-width: 520px;
	margin: 20px 0 0;
	padding: 0;
	border: 0;
}

/* WooCommerce's script sets the display property on this form itself, which a
   flex or grid parent here would lose a fight with; hence floated rows. */
.woocommerce-checkout form.checkout_coupon .form-row-first {
	width: 58%;
	float: left;
	margin-right: 2%;
}

.woocommerce-checkout form.checkout_coupon .form-row-last {
	width: 40%;
	float: left;
}

.woocommerce-checkout form.checkout_coupon .button {
	width: 100%;
	padding: 13px 20px;
	border: 1px solid var(--eg-ink);
	background: transparent;
	color: var(--eg-ink);
	font-size: 14.5px;
}

.woocommerce-checkout form.checkout_coupon .button:hover {
	background: var(--eg-ink);
	color: var(--eg-surface);
}

/* --- Checkout: payment and place order --- */

.eg-checkout__summary #payment {
	margin-top: 24px;
	background: none;
}

.eg-checkout__summary #payment .payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
}

.eg-checkout__summary #payment .payment_methods > li:not(.woocommerce-notice) {
	margin: 0 0 10px;
	border: 1px solid var(--eg-border-strong);
	border-radius: var(--eg-radius);
	background: var(--eg-surface);
}

.eg-checkout__summary #payment .payment_methods > li:not(.woocommerce-notice):hover {
	border-color: var(--eg-green);
	background: var(--eg-surface);
}

.eg-checkout__summary #payment .payment_methods > li > label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	color: var(--eg-ink);
	font-size: 15px;
}

.eg-checkout__summary #payment .payment_methods > li .payment_box {
	margin: 0;
	padding: 0 16px 16px;
	border-radius: 0;
	background: none;
	color: var(--eg-ink-soft);
	font-size: 14px;
}

/* Storefront draws a little arrow pointing up at the method's label. */
.eg-checkout__summary #payment .payment_methods > li .payment_box::before {
	content: none;
}

.eg-checkout__summary #payment .payment_methods > li .payment_box p:last-child {
	margin-bottom: 0;
}

.eg-checkout__summary #payment .place-order {
	margin: 20px 0 0;
	padding: 0;
	background: none;
}

.eg-checkout__summary #payment .place-order .button {
	width: 100%;
	padding: 17px 24px;
	font-size: 16px;
}

.eg-checkout__summary #payment .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 16px;
	font-size: 14px;
}

.eg-checkout__summary #payment .woocommerce-privacy-policy-text p {
	margin: 0 0 14px;
	color: var(--eg-muted);
	font-size: 13px;
	line-height: 1.6;
}

/* --- Order received --- */

.woocommerce-order,
.woocommerce-order-pay .woocommerce {
	max-width: 760px;
	padding: 40px 0 80px;
}

.woocommerce-order p.woocommerce-notice--success {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--eg-ink);
	font-family: var(--eg-serif);
	font-size: 30px;
	line-height: 1.2;
}

.woocommerce-order p.woocommerce-notice--success::before {
	content: none;
}

.woocommerce-order ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px 28px;
	margin: 32px 0;
	padding: 26px 28px;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-green-tint);
}

/* Storefront cuts zigzag edges into this list with a pair of gradients. */
.woocommerce-order ul.order_details::before,
.woocommerce-order ul.order_details::after {
	content: none;
}

.woocommerce-order ul.order_details li {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--eg-muted);
	font-size: 11.5px;
	letter-spacing: 0.14em;
}

.woocommerce-order ul.order_details li strong {
	margin-top: 6px;
	color: var(--eg-ink);
	font-family: var(--eg-sans);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
}

.woocommerce-order h2,
.woocommerce-order h3 {
	margin: 40px 0 18px;
	font-size: 24px;
	line-height: 1.2;
}

/* Bank details, which is how most orders will be paid for. WooCommerce gives
   that list the order summary's own class, so it arrives styled as the same
   card; only the account-holder heading above it needs pulling in. */
.woocommerce-order .woocommerce-bacs-bank-details h3 {
	margin-bottom: 14px;
	font-size: 20px;
}

/* The order details table and the addresses under it are one template, which
   an order opened from the account (§12) renders as well. */
.eg-copage table.woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	border: 0;
	background: none;
}

.eg-copage table.woocommerce-table--order-details th,
.eg-copage table.woocommerce-table--order-details td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--eg-border);
	background: none;
	font-family: var(--eg-sans);
	font-size: 14.5px;
	font-weight: 400;
	text-align: left;
}

.eg-copage table.woocommerce-table--order-details th:last-child,
.eg-copage table.woocommerce-table--order-details td:last-child {
	text-align: right;
}

.eg-copage table.woocommerce-table--order-details a {
	color: var(--eg-ink);
	text-decoration: none;
}

.eg-copage table.woocommerce-table--order-details a:hover {
	color: var(--eg-green);
}

.eg-copage table.woocommerce-table--order-details tfoot tr:last-child th,
.eg-copage table.woocommerce-table--order-details tfoot tr:last-child td {
	color: var(--eg-ink);
	font-size: 18px;
	font-weight: 600;
}

.eg-copage .woocommerce-customer-details address {
	padding: 22px 26px;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	font-size: 15px;
	font-style: normal;
	line-height: 1.8;
}

/* --- Notices --- */

/* Storefront paints these solid green, blue or red with a Font Awesome glyph.
   Scoped to these pages, where most of them turn up, so the shop and product
   pages keep the treatment they were designed with. */
.eg-copage .woocommerce-message,
.eg-copage .woocommerce-info,
.eg-copage .woocommerce-error {
	margin: 0 0 26px;
	padding: 16px 20px;
	border: 1px solid var(--eg-border);
	border-left: 3px solid var(--eg-green);
	border-radius: var(--eg-radius);
	background: var(--eg-green-tint);
	color: var(--eg-ink);
	font-size: 14.5px;
	line-height: 1.6;
}

.eg-copage .woocommerce-message::before,
.eg-copage .woocommerce-info::before,
.eg-copage .woocommerce-error::before {
	content: none;
}

.eg-copage .woocommerce-message a,
.eg-copage .woocommerce-info a,
.eg-copage .woocommerce-error a {
	color: var(--eg-green);
}

.eg-copage .woocommerce-error {
	border-left-color: var(--eg-alert);
	background: var(--eg-surface);
}

.eg-copage .woocommerce-error li {
	margin: 0;
	padding: 2px 0;
	list-style: none;
}

/* Storefront floats a borderless button into the notice ("View cart", or the
   account's "Browse products" when there are no orders). */
.eg-copage .woocommerce-message .button,
.eg-copage .woocommerce-info .button {
	float: none;
	margin: 0 0 0 14px;
	padding: 0 0 0 14px;
	border-left: 1px solid var(--eg-border-strong);
	background: none;
	color: var(--eg-green);
	font-size: 14.5px;
}

.eg-copage .woocommerce-message .button:hover,
.eg-copage .woocommerce-info .button:hover {
	background: none;
	color: var(--eg-green-dark);
}

/* =========================================================================
   12. Account
   ========================================================================= */

/* My account and its endpoints. inc/account.php gives the page §11's body
   class, so the heading band, notices, form fields and order details table
   come from there; this is what the account adds. Storefront's WooCommerce
   stylesheet and its icons are enqueued after this file (inc/setup.php), so a
   selector here that only ties with one of theirs can't be counted on to win —
   several below are longer than they look like they need to be for that. */

/* --- Signing in --- */

/* Signed out, the page is one form — sign in, lost password or choose a new
   password — under its heading, in a narrow column. If registration is ever
   switched on (WooCommerce > Settings > Accounts), sign in and register sit
   side by side. */
.eg-account:not(.logged-in) .entry-content > .woocommerce {
	max-width: 440px;
	margin: 0 auto;
	padding: 48px 0 96px;
}

.eg-account:not(.logged-in) .entry-content > .woocommerce:has(#customer_login) {
	max-width: 940px;
}

.eg-account .col2-set#customer_login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	width: auto;
	float: none;
}

.eg-account .col2-set#customer_login::before,
.eg-account .col2-set#customer_login::after {
	content: none;
}

.eg-account .col2-set#customer_login .col-1,
.eg-account .col2-set#customer_login .col-2 {
	width: auto;
	float: none;
	margin: 0;
}

.eg-account:not(.logged-in) .entry-content > .woocommerce h2 {
	margin: 0 0 18px;
	font-size: 28px;
	line-height: 1.2;
}

/* The form is the card; the heading sits above it. */
.eg-account form.login,
.eg-account form.register,
.eg-account form.lost_reset_password {
	margin: 0;
	padding: 30px;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-green-tint);
}

.eg-account form.login > p:last-of-type,
.eg-account form.register > p:last-of-type,
.eg-account form.lost_reset_password > p:last-of-type {
	margin-bottom: 0;
}

/* "Lost your password? Please enter …" */
.eg-account form.lost_reset_password > p:first-child {
	margin: 0 0 22px;
	font-size: 14.5px;
}

/* "Remember me" shares a row with the Log in button in the markup; the button
   drops under it, full width. */
.eg-account form.login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	color: var(--eg-ink-soft);
	font-size: 14.5px;
	letter-spacing: 0;
	text-transform: none;
}

.eg-account form.login .button,
.eg-account form.register .button,
.eg-account form.lost_reset_password .button {
	display: block;
	width: 100%;
	float: none;
	margin: 0;
	padding: 15px 24px;
	font-size: 15.5px;
}

.eg-account .woocommerce-LostPassword {
	margin: 18px 0 0;
	font-size: 14px;
	text-align: center;
}

/* The show-password toggle, a Font Awesome eye that Storefront lays over the
   field's right-hand end. Checkout has one too, when it offers an account. */
.eg-copage .password-input {
	display: block;
	position: relative;
}

.eg-copage .password-input .input-text {
	padding-right: 52px;
}

.eg-copage .show-password-input {
	top: 0;
	bottom: 0;
	padding: 0 16px;
	border: 0;
	background: none;
	color: var(--eg-muted);
}

.eg-copage .show-password-input:hover,
.eg-copage .show-password-input:focus {
	background: none;
	color: var(--eg-ink);
}

.eg-copage .show-password-input.display-password::after {
	color: var(--eg-green);
}

/* --- Signed in: the menu beside the page --- */

.eg-account.logged-in .entry-content > .woocommerce {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding: 40px 0 88px;
}

/* Storefront floats the two at percentage widths. */
.eg-account .woocommerce-MyAccount-navigation,
.eg-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	margin: 0;
}

.eg-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: 24px;
}

/* A rail down the left, with the current page marked on it. */
.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border-top: 0;
}

.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	border-bottom: 0;
}

.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
	padding: 10px 16px;
	border-left: 2px solid var(--eg-border);
	color: var(--eg-ink-soft);
	font-size: 15px;
}

.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover {
	color: var(--eg-ink);
}

/* Storefront gives each link a Font Awesome glyph. */
.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a::before {
	content: none;
}

.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a {
	border-left-color: var(--eg-green);
	color: var(--eg-green);
	font-weight: 600;
}

/* Log out stands apart from the pages. */
.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 18px;
}

.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
	border-left-color: transparent;
	color: var(--eg-muted);
}

.eg-account .woocommerce-MyAccount-content h2 {
	margin: 0 0 18px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
}

/* --- Dashboard overview --- */

.eg-overview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 32px;
}

.eg-overview__orders {
	grid-column: 1 / -1;
}

.eg-panel {
	padding: 24px 26px;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
}

.eg-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 16px;
}

.eg-account .woocommerce-MyAccount-content .eg-panel__title {
	margin: 0;
	font-size: 21px;
}

.eg-panel__head a {
	font-size: 14px;
	white-space: nowrap;
}

/* Storefront underlines every link in the page's content. Prose keeps that;
   these read as controls and labels. */
.eg-account .entry-content .eg-panel a,
.eg-account .entry-content .woocommerce-Address-title .edit,
.eg-account .entry-content table.my_account_orders a {
	text-decoration: none;
}

.eg-panel address,
.eg-panel p {
	margin: 0;
	color: var(--eg-ink);
	font-size: 15px;
	font-style: normal;
	line-height: 1.7;
}

.eg-panel p.eg-panel__empty {
	color: var(--eg-muted);
}

.eg-overview .eg-orderlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Fixed outer columns keep the numbers and totals lined up from row to row. */
.eg-orderlist__row {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr) auto 110px;
	gap: 6px 20px;
	align-items: center;
	padding: 13px 0;
	border-top: 1px solid var(--eg-border);
	font-size: 14.5px;
}

.eg-orderlist__number {
	color: var(--eg-ink);
	font-weight: 600;
}

.eg-orderlist__date {
	color: var(--eg-muted);
}

.eg-orderlist__total {
	color: var(--eg-ink);
	text-align: right;
}

/* --- Order status --- */

.eg-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--eg-radius);
	background: var(--eg-placeholder);
	color: var(--eg-ink-soft);
	font-size: 12.5px;
	line-height: 1.5;
	white-space: nowrap;
}

/* Paid for, or on its way. */
.eg-status--processing,
.eg-status--completed {
	background: var(--eg-green-tint);
	color: var(--eg-green);
}

/* Went nowhere. */
.eg-status--cancelled,
.eg-status--failed,
.eg-status--refunded {
	background: none;
	box-shadow: inset 0 0 0 1px var(--eg-border-strong);
	color: var(--eg-muted);
}

/* --- Orders --- */

.eg-account table.my_account_orders {
	margin: 0;
	border: 0;
}

.eg-account table.my_account_orders thead th {
	padding: 0 16px 14px;
	border-bottom: 1px solid var(--eg-border-strong);
	color: var(--eg-muted);
	font-family: var(--eg-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}

.eg-account table.my_account_orders tbody th,
.eg-account table.my_account_orders tbody td {
	padding: 18px 16px;
	border-bottom: 1px solid var(--eg-border);
	color: var(--eg-ink);
	font-family: var(--eg-sans);
	font-size: 15px;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

.eg-account table.my_account_orders tr > :first-child {
	padding-left: 0;
}

.eg-account table.my_account_orders tr > :last-child {
	padding-right: 0;
	text-align: right;
}

.eg-account table.my_account_orders tbody th a {
	color: var(--eg-ink);
	font-weight: 600;
}

.eg-account table.my_account_orders tbody th a:hover {
	color: var(--eg-green);
}

.eg-account table.my_account_orders .woocommerce-orders-table__cell-order-date {
	color: var(--eg-muted);
}

/* View, Pay, Cancel — in the orders table and under an order's details. */
.eg-account table.my_account_orders .button,
.eg-account .woocommerce-order-details .order-actions-button,
.eg-account .woocommerce-order-details .order-again .button,
.eg-account .woocommerce-Pagination .button {
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--eg-ink);
	background: transparent;
	color: var(--eg-ink);
	font-size: 13.5px;
}

/* Storefront hangs a Font Awesome eye off View. */
.eg-account table.my_account_orders .button.view::after {
	content: none;
}

.eg-account table.my_account_orders .button + .button,
.eg-account .woocommerce-order-details .order-actions-button + .order-actions-button {
	margin-left: 6px;
}

.eg-account table.my_account_orders .button:hover,
.eg-account .woocommerce-order-details .order-actions-button:hover,
.eg-account .woocommerce-order-details .order-again .button:hover,
.eg-account .woocommerce-Pagination .button:hover {
	background: var(--eg-ink);
	color: var(--eg-surface);
}

/* --- A single order --- */

/* "Order #1234 was placed on … and is currently …", the facts in <mark>s. */
.eg-account .woocommerce-MyAccount-content mark {
	color: var(--eg-ink);
}

.eg-account .woocommerce-order-details,
.eg-account .woocommerce-customer-details {
	margin-top: 36px;
}

/* Messages the store has sent about the order. */
.eg-account ol.woocommerce-OrderUpdates {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.eg-account .woocommerce-OrderUpdate {
	margin: 0 0 14px;
	padding: 2px 0 2px 16px;
	border-left: 2px solid var(--eg-green);
}

.eg-account .woocommerce-OrderUpdate-meta {
	margin: 0 0 4px;
	color: var(--eg-muted);
	font-size: 13px;
}

.eg-account .woocommerce-OrderUpdate-description p {
	margin: 0;
}

/* --- Addresses --- */

/* Billing beside shipping, on the Addresses page and under an order. */
.eg-account .woocommerce-MyAccount-content .col2-set.addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	width: auto;
	float: none;
	margin: 24px 0 0;
}

.eg-account .woocommerce-MyAccount-content .col2-set.addresses::before,
.eg-account .woocommerce-MyAccount-content .col2-set.addresses::after {
	content: none;
}

.eg-account .woocommerce-MyAccount-content .col2-set.addresses > .col-1,
.eg-account .woocommerce-MyAccount-content .col2-set.addresses > .col-2 {
	width: auto;
	float: none;
	margin: 0;
}

.eg-account .woocommerce-MyAccount-content .woocommerce-Address {
	padding: 24px 26px;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
}

/* "Add Shipping address" is long enough to crowd a narrow card's heading, so
   it drops under the heading instead. */
.eg-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 16px;
}

.eg-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	margin: 0;
	font-size: 21px;
}

/* Storefront hides this link's text ("Edit Billing address") behind a Font
   Awesome pencil. */
.eg-account .woocommerce-MyAccount-content .addresses header.title a.edit {
	position: static;
	display: inline;
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	font-size: 14px;
	text-indent: 0;
	white-space: nowrap;
}

.eg-account .woocommerce-MyAccount-content .addresses header.title a.edit::before {
	content: none;
}

.eg-account .woocommerce-Address address {
	margin: 0;
	color: var(--eg-ink);
	font-size: 15px;
	font-style: normal;
	line-height: 1.7;
}

/* --- Editing an address or the account's details --- */

.eg-account .woocommerce-address-fields,
.eg-account form.edit-account {
	max-width: 640px;
}

/* Storefront sizes paired fields in here by percentage; the grids replace it. */
.eg-account .woocommerce-MyAccount-content .form-row-first,
.eg-account .woocommerce-MyAccount-content .form-row-last {
	width: auto;
	float: none;
	margin-right: 0;
}

.eg-account form.edit-account {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

.eg-account form.edit-account > * {
	grid-column: 1 / -1;
}

.eg-account form.edit-account > .form-row-first {
	grid-column: 1;
}

.eg-account form.edit-account > .form-row-last {
	grid-column: 2;
}

.eg-account form.edit-account > .clear {
	display: none;
}

.eg-account #account_display_name_description {
	display: block;
	margin-top: 8px;
	color: var(--eg-muted);
	font-size: 13px;
}

.eg-account #account_display_name_description em {
	font-style: normal;
}

.eg-account form.edit-account fieldset {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
}

.eg-account form.edit-account legend {
	margin: 0 0 18px;
	padding: 0;
	color: var(--eg-ink);
	font-family: var(--eg-serif);
	font-size: 21px;
	font-weight: 400;
}

.eg-account form.edit-account .button,
.eg-account .woocommerce-address-fields .button {
	margin-top: 8px;
	padding: 15px 28px;
	font-size: 15.5px;
}

/* =========================================================================
   13. Responsive
   ========================================================================= */

@media (max-width: 1100px) {
	:root {
		--eg-gutter: 32px;
	}

	.eg-logo img {
		height: 84px;
	}

	.eg-announce span {
		font-size: 15px;
		letter-spacing: 0.1em;
	}

	.eg-catgrid {
		grid-template-columns: repeat(4, 1fr);
	}

	.eg-hero__heading {
		font-size: 46px;
	}

	.eg-editorial__body {
		padding: 48px 44px;
	}

	.eg-brands__list {
		gap: 40px;
	}

	.eg-trust__item {
		padding: 30px 32px;
	}

	.single-product div.product {
		column-gap: 40px;
	}

	.single-product div.product .product_title {
		font-size: 32px;
	}

	.eg-shop {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 32px;
	}

	.eg-shophead__title {
		font-size: 34px;
	}

	.eg-cart,
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 36px;
	}

	/* Six columns of cell padding, and the thumbnail, come out of the space the
	   product name has to wrap in. */
	.eg-cart table.cart td,
	.eg-cart table.cart thead th {
		padding-right: 10px;
		padding-left: 10px;
	}

	.eg-cart table.cart td.product-thumbnail,
	.eg-cart table.cart td.product-thumbnail img {
		width: 64px;
	}

	.eg-cohead__title {
		font-size: 34px;
	}

	.eg-account.logged-in .entry-content > .woocommerce {
		grid-template-columns: 190px minmax(0, 1fr);
		gap: 36px;
	}
}

@media (max-width: 860px) {
	.eg-brandbar__inner {
		align-items: center;
		gap: 20px;
	}

	.eg-logo img {
		height: 64px;
	}

	.eg-announce {
		padding: 12px 16px;
	}

	.eg-announce span {
		font-size: 13px;
	}

	.eg-navtoggle {
		display: flex;
		order: -1;
	}

	/* Without an explicit `top`, the drawer sits at its flex position — centred
	   on the nav row — so a tall drawer starts far above the screen. */
	.eg-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		display: none;
		padding: 8px var(--eg-gutter) 20px;
		/* Tinted, like the search panel, so the drawer reads apart from the page. */
		background: var(--eg-green-tint);
		border-bottom: 1px solid var(--eg-border-strong);
		box-shadow: 0 20px 40px -28px rgba(35, 38, 31, 0.6);
	}

	.eg-nav.is-open {
		display: block;
	}

	.eg-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.eg-nav__list > li {
		border-bottom: 1px solid var(--eg-border-strong);
	}

	.eg-nav__list a {
		display: block;
		padding: 14px 0;
		font-size: 16px;
	}

	/* Drop-downs stack inline rather than floating. */
	.eg-nav__list .sub-menu {
		position: static;
		display: block;
		padding: 0 0 10px 16px;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.eg-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.eg-footer__brand {
		grid-column: 1 / -1;
	}

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

	.eg-section {
		padding-top: 52px;
	}

	.eg-sectionhead h2 {
		font-size: 27px;
	}

	.eg-catgrid {
		grid-template-columns: repeat(3, 1fr);
	}

	.eg-hero {
		min-height: 380px;
	}

	.eg-hero__heading {
		font-size: 38px;
	}

	/* One column: the photo reads as a banner above the copy. */
	.eg-editorial {
		grid-template-columns: 1fr;
		margin-top: 52px;
	}

	.eg-editorial__media {
		min-height: 220px;
	}

	.eg-editorial__body {
		padding: 40px var(--eg-gutter);
	}

	.eg-editorial__body h2 {
		font-size: 29px;
	}

	.eg-trust {
		grid-template-columns: 1fr;
	}

	.eg-trust__item {
		border-right: 0;
		border-bottom: 1px solid var(--eg-border);
	}

	.eg-trust__item:last-child {
		border-bottom: 0;
	}

	.eg-pagehead {
		padding: 52px 0 44px;
	}

	.eg-pagehead__heading {
		font-size: 38px;
	}

	.eg-about__intro {
		padding-top: 48px;
	}

	/* Company stacks above contact. */
	.eg-about__details {
		grid-template-columns: 1fr;
		gap: 48px;
		padding-top: 48px;
		padding-bottom: 52px;
	}

	.eg-about__block,
	.eg-about__block + .eg-about__block {
		padding: 0;
		border-left: 0;
	}

	.eg-about__company {
		font-size: 25px;
	}

	/* Gallery above the summary. */
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
	}

	.storefront-full-width-content.single-product div.product .woocommerce-product-gallery,
	.storefront-full-width-content.single-product div.product .summary {
		grid-column: 1;
	}

	.storefront-full-width-content.single-product div.product .woocommerce-product-gallery {
		margin-bottom: 32px;
	}

	.storefront-full-width-content.single-product div.product .summary {
		margin-bottom: 48px;
	}

	.eg-product__details {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding: 40px 0 48px;
	}

	.single-product div.product .related,
	.single-product div.product .upsells {
		padding: 40px 0 48px;
	}

	.eg-shophead {
		padding: 20px 0 28px;
	}

	.eg-shophead__title {
		font-size: 30px;
	}

	/* One column: the filters fold behind a toggle above the grid. Without
	   JavaScript they simply stay open. */
	.eg-shop {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding-top: 24px;
	}

	.woocommerce-js .eg-filtertoggle {
		display: inline-flex;
		align-items: center;
		justify-self: start;
		gap: 8px;
		padding: 10px 18px;
		border: 1px solid var(--eg-border-strong);
		background: transparent;
		color: var(--eg-ink);
		font-size: 14px;
	}

	.woocommerce-js .eg-filtertoggle:hover,
	.woocommerce-js .eg-filtertoggle[aria-expanded="true"] {
		border-color: var(--eg-green);
		background: transparent;
		color: var(--eg-green);
	}

	.eg-filtertoggle__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 19px;
		height: 19px;
		border-radius: 50%;
		background: var(--eg-green);
		color: #fff;
		font-size: 11px;
		font-weight: 600;
	}

	.woocommerce-js .eg-filters {
		display: none;
		padding-bottom: 24px;
		border-bottom: 1px solid var(--eg-border);
	}

	.woocommerce-js .eg-filters.is-open {
		display: flex;
	}

	.eg-shop ul.products + .storefront-sorting {
		margin-top: 36px;
	}

	/* One column, so there is nothing left for the summary to stick beside. */
	.eg-cart,
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding-top: 32px;
	}

	.eg-cart .cart-collaterals,
	.eg-checkout__summary {
		position: static;
	}

	.eg-cohead {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.eg-steps {
		padding-bottom: 0;
	}

	/* One column: the account menu turns into a row of tabs above the page,
	   scrolling sideways when it doesn't fit. */
	.eg-account.logged-in .entry-content > .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-top: 24px;
	}

	.eg-account .woocommerce-MyAccount-navigation {
		position: static;
	}

	/* No scrollbar: it would draw a second rule under the tabs, and the last
	   tab cut off at the edge already says there is more. */
	.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
		border-bottom: 1px solid var(--eg-border);
		scrollbar-width: none;
	}

	.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
		padding: 12px 14px;
		border-bottom: 2px solid transparent;
		border-left: 0;
		white-space: nowrap;
	}

	.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a {
		border-bottom-color: var(--eg-green);
	}

	.eg-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0 0 0 auto;
	}
}

/* Below 768px WooCommerce's tables stack each row into "label: value" lines —
   Storefront switches them there, which is not one of the widths above. */
@media (max-width: 767px) {
	.eg-cart table.cart tr {
		display: block;
		padding: 18px 0;
		border-bottom: 1px solid var(--eg-border);
	}

	.eg-cart table.cart td {
		padding: 3px 0;
		border-bottom: 0;
	}

	.eg-cart table.cart td[data-title]::before {
		color: var(--eg-muted);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.eg-cart table.cart td.product-remove {
		width: auto;
		padding: 0;
	}

	/* Rows are right-aligned in this mode, the × included. */
	.eg-cart table.cart td.product-remove a.remove {
		margin-left: auto;
	}

	.eg-cart table.cart td.product-thumbnail {
		width: auto;
		padding-bottom: 10px;
	}

	.eg-cart table.cart td.product-thumbnail img {
		width: 72px;
		margin: 0;
	}

	.eg-cart table.cart td.actions {
		padding-top: 20px;
	}

	.eg-cart table.cart td.actions .coupon,
	.eg-cart table.cart td.actions input.input-text,
	.eg-cart table.cart td.actions .button {
		width: 100%;
	}

	.eg-cart .cart-collaterals .cart_totals,
	.eg-checkout__summary {
		padding: 22px;
	}

	.eg-overview,
	.eg-account .col2-set#customer_login,
	.eg-account .woocommerce-MyAccount-content .col2-set.addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Number and status on one line, date and total on the next. */
	.eg-orderlist__row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.eg-orderlist__row .eg-status {
		order: 1;
	}

	.eg-orderlist__date {
		order: 2;
	}

	.eg-orderlist__total {
		order: 3;
	}

	.eg-account table.my_account_orders tr {
		display: block;
		padding: 16px 0;
		border-bottom: 1px solid var(--eg-border);
	}

	/* Storefront hides the order number in this mode, its cell being a <th>. */
	.eg-account table.my_account_orders tbody th {
		display: block;
		padding: 0 0 6px;
		border-bottom: 0;
		font-size: 16px;
		text-align: left;
	}

	.eg-account table.my_account_orders tbody td {
		padding: 3px 0;
		border-bottom: 0;
		text-align: right;
	}

	.eg-account table.my_account_orders td[data-title]::before {
		color: var(--eg-muted);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
}

@media (max-width: 560px) {
	:root {
		--eg-gutter: 20px;
	}

	.eg-brandbar__inner {
		flex-wrap: wrap;
	}

	/* Below this width the strip reads better on its own line. */
	.eg-announce {
		flex: 1 0 100%;
		order: 3;
	}

	.eg-utils {
		gap: 14px;
	}

	.eg-util {
		font-size: 13px;
	}

	.eg-footer__cols {
		grid-template-columns: 1fr;
	}

	.eg-footer__baseline {
		flex-direction: column;
		gap: 8px;
	}

	ul.products {
		gap: 20px 14px;
	}

	ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px;
	}

	.eg-catgrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.eg-hero {
		min-height: 340px;
	}

	.eg-hero__heading {
		font-size: 32px;
	}

	.eg-hero__th {
		font-size: 19px;
	}

	.eg-hero__ctas .button {
		flex: 1;
		text-align: center;
	}

	.eg-brands__list {
		gap: 22px 30px;
	}

	.eg-brands__list a {
		font-size: 21px;
	}

	.eg-pagehead__heading {
		font-size: 31px;
	}

	.eg-about__contact div {
		grid-template-columns: 84px 1fr;
	}

	.single-product div.product .product_title {
		font-size: 28px;
	}

	.single-product div.product p.price {
		font-size: 22px;
	}

	.eg-product__details h2 {
		font-size: 23px;
	}

	/* The count drops under the title. */
	.eg-shophead {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.eg-shophead__title {
		font-size: 27px;
	}

	.eg-shop .storefront-sorting {
		gap: 12px;
	}

	.eg-shop .woocommerce-ordering {
		margin-left: 0;
	}

	.eg-cohead__title {
		font-size: 27px;
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-account .woocommerce-address-fields__field-wrapper,
	.eg-account form.edit-account {
		grid-template-columns: 1fr;
	}

	.eg-account form.edit-account > .form-row-last {
		grid-column: 1;
	}

	.eg-panel,
	.eg-account .woocommerce-MyAccount-content .woocommerce-Address {
		padding: 20px;
	}

	.woocommerce-order ul.order_details {
		padding: 20px 22px;
	}
}