/*!
Theme Name: BorealKettle
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: borealkettle
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

BorealKettle is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------

TABLE OF CONTENTS:

Generic

- Normalize
- Box sizing


Base

- Typography
- Elements
- Links
- Forms


Layouts

Components

- Navigation
- Posts and pages
- Comments
- Widgets
- Media
- Captions
- Galleries


plugins

- Jetpack infinite scroll


Utilities

- Accessibility
- Alignments


--------------------------------------------------------------*/

/*--------------------------------------------------------------

Generic

--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

/

Correct the line height in all browsers.

Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}

/* Sections
========================================================================== */

/

Remove the margin in all browsers.
*/
body {
margin: 0;
}

/

Render the main element consistently in IE.
*/
main {
display: block;
}

/

Correct the font size and margin on h1 elements within section and

article contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}

/* Grouping content
========================================================================== */

/

Add the correct box sizing in Firefox.

Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}

/

Correct the inheritance and scaling of font size in all browsers.

Correct the odd em font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
font-size: 1em;
}

/* Text-level semantics
========================================================================== */

/

Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}

/

Remove the bottom border in Chrome 57-

Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}

/

Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}

/

Correct the inheritance and scaling of font size in all browsers.

Correct the odd em font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}

/

Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}

/

Prevent sub and sup elements from affecting the line height in

all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

/* Embedded content
========================================================================== */

/

Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}

/* Forms
========================================================================== */

/

Change the font styles in all browsers.

Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}

/

Show the overflow in IE.

Show the overflow in Edge.
*/
button,
input {
overflow: visible;
}

/

Remove the inheritance of text transform in Edge, Firefox, and IE.

Remove the inheritance of text transform in Firefox.
*/
button,
select {
text-transform: none;
}

/

Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}

/

Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}

/

Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}

/

Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}

/

Correct the text wrapping in Edge and IE.

Correct the color inheritance from fieldset elements in IE.

Remove the padding so developers are not caught out when they zero out

fieldset elements in all browsers.
*/
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}

/

Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}

/

Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}

/

Add the correct box sizing in IE 10.

Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}

/

Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}

/

Correct the odd appearance in Chrome and Safari.

Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}

/

Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

/

Correct the inability to style clickable types in iOS and Safari.

Change font properties to inherit in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}

/* Interactive
========================================================================== */

/*

Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}

/*

Add the correct display in all browsers.
*/
summary {
display: list-item;
}

/* Misc
========================================================================== */

/

Add the correct display in IE 10+.
*/
template {
display: none;
}

/

Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
}

/*--------------------------------------------------------------

Base

--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
color: #404040;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1rem;
line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}

p {
margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
font-style: italic;
}

blockquote {
margin: 0 1.5em;
}

address {
margin: 0 0 1.5em;
}

pre {
background: #eee;
font-family: "Courier 10 Pitch", courier, monospace;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}

code,
kbd,
tt,
var {
font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}

mark,
ins {
background: #fff9c0;
text-decoration: none;
}

big {
font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
background: #fff;
}

hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}

ul,
ol {
margin: 0 0 1.5em 3em;
}

ul {
list-style: disc;
}

ol {
list-style: decimal;
}

li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}

dt {
font-weight: 700;
}

dd {
margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}

img {
height: auto;
max-width: 100%;
}

figure {
margin: 1em 0;
}

table {
margin: 0 0 1.5em;
width: 100%;
}

/* Links
--------------------------------------------- */
a {
color: #4169e1;
}

a:visited {
color: #800080;
}

a:hover,
a:focus,
a:active {
color: #191970;
}

a:focus {
outline: thin dotted;
}

a:hover,
a:active {
outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
color: rgba(0, 0, 0, 0.8);
line-height: 1;
padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #111;
}

select {
border: 1px solid #ccc;
}

textarea {
width: 100%;
}

/*--------------------------------------------------------------

Layouts

--------------------------------------------------------------*/

/*--------------------------------------------------------------

Components

--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
display: block;
width: 100%;
}

.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
}

.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}

.main-navigation ul ul ul {
left: -999em;
top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
display: block;
left: auto;
}

.main-navigation ul ul a {
width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}

.main-navigation li {
position: relative;
}

.main-navigation a {
display: block;
text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}

@media screen and (min-width: 37.5em) {

.menu-toggle {
	display: none;
}

.main-navigation ul {
	display: flex;
}


}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
display: block;
}

.post,
.page {
margin: 0 0 1.5em;
}

.updated:not(.published) {
display: none;
}

.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}

.page-links {
clear: both;
margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
word-wrap: break-word;
}

.bypostauthor {
display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
margin: 0 0 1.5em;
}

.widget select {
max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}

.wp-caption-text {
text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
}

.gallery-item {
display: inline-block;
text-align: center;
width: 100%;
}

.gallery-columns-2 {
grid-template-columns: repeat(2, 1fr);
}

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

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

.gallery-columns-5 {
grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
display: block;
}

/*--------------------------------------------------------------

Plugins

--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
display: block;
}

/*--------------------------------------------------------------

Utilities

--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}

.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
/rtl:ignore/
float: left;
/rtl:ignore/
margin-right: 1.5em;
margin-bottom: 1.5em;
}

.alignright {
/rtl:ignore/
float: right;
/rtl:ignore/
margin-left: 1.5em;
margin-bottom: 1.5em;
}

.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;
}

/* STREAMING_CHUNK: Setting up CSS variables for our brand colors /
/ ==========================================================================
BOREAL KETTLE CUSTOM STYLES
========================================================================== */

:root {
--brand-primary: #1F3625; /* Deep Boreal Forest Green /
--brand-secondary: #D4A373; / Warm Coffee/Tea Tone /
--brand-accent: #E9EDC9; / Light Sage /
--text-main: #333333;
--text-light: #666666;
--bg-light: #FDFBF7; / Off-white slightly warm background */
--border-color: #E0E0E0;
--radius: 8px;
}

/* STREAMING_CHUNK: Applying base typography and background */
body {
background-color: var(--bg-light);
color: var(--text-main);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.6;
}

/* STREAMING_CHUNK: Fixing the layout and adding margins (The Container) */
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.site-header {
background-color: var(--brand-primary);
color: #ffffff;
padding: 1.5rem 0;
}

.site-header a {
color: #ffffff;
text-decoration: none;
}

.site-content {
flex: 1;
width: 100%;
max-width: 1200px; /* This creates the main container width /
margin: 0 auto;    / This centers the container /
padding: 2rem 20px; / This adds padding so it never touches the screen edge on mobile */
}

/* STREAMING_CHUNK: Styling the main navigation */
.main-navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.5rem;
}

/* STREAMING_CHUNK: Basic WooCommerce Product Grid Styling */
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 2rem;
}

.woocommerce ul.products li.product {
width: 100% !important;
margin: 0 !important;
background: #ffffff;
border-radius: var(--radius);
padding: 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
text-align: center;
}

.woocommerce ul.products li.product:hover {
transform: translateY(-5px);
}

.woocommerce ul.products li.product img {
border-radius: var(--radius);
margin-bottom: 1rem;
max-width: 100%;
height: auto;
}

/* STREAMING_CHUNK: Styling standard buttons */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button {
background-color: var(--brand-secondary) !important;
color: #ffffff !important;
border: none;
border-radius: var(--radius);
padding: 0.75rem 1.5rem;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;
}

button:hover,
.woocommerce a.button:hover {
background-color: #b88a5d !important;
}

/* STREAMING_CHUNK: Custom Homepage Hero Section Styles */
.boreal-hero {
background-color: var(--brand-primary);
color: #fff;
padding: 4rem 20px;
text-align: center;
border-radius: var(--radius);
margin-bottom: 3rem;
}

.boreal-hero h1 {
color: #fff;
font-size: 2.5rem;
margin-bottom: 1rem;
}

.boreal-hero p {
font-size: 1.25rem;
color: var(--brand-accent);
max-width: 600px;
margin: 0 auto 2rem auto;
}

/
/ STREAMING_CHUNK: Fixing the layout and adding margins (The Container) */
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.site-header {
background-color: var(--brand-primary);
color: #ffffff;
padding: 1.5rem 0;
}

.site-header a {
color: #ffffff;
text-decoration: none;
}

/* STREAMING_CHUNK: Flexbox layout for the Top Menu and Logo */
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

.site-branding .custom-logo {
max-height: 60px; /* Keeps your logo from being massive */
width: auto;
}

.site-title {
margin: 0;
font-size: 1.5rem;
}

.site-content {
flex: 1;
width: 100%;
/* ... existing code ... /
/ STREAMING_CHUNK: Custom Homepage Hero Section Styles /
.boreal-hero {
background-color: var(--brand-primary);
background-size: cover;
background-position: center center;
position: relative;
color: #fff;
padding: 6rem 20px;
text-align: center;
border-radius: var(--radius);
margin-bottom: 3rem;
overflow: hidden; / Keeps the overlay inside the curved borders */
}

/* Adds a dark tint over the image so white text stays readable /
.boreal-hero .hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(31, 54, 37, 0.6); / Brand primary color with 60% opacity */
z-index: 1;
}

.boreal-hero .hero-content {
position: relative;
z-index: 2; /* Puts the text on top of the dark overlay */
}

.boreal-hero h1 {
color: #fff;
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Pop text off the background */
}

.boreal-hero p {
font-size: 1.25rem;
color: var(--brand-accent);
max-width: 600px;
margin: 0 auto 2rem auto;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* STREAMING_CHUNK: Styling the professional footer layout... /
.site-footer {
background-color: #1a3622; / Added a fallback dark green color */
/*

IMPORTANT CHECK: Look at the CSS code IMMEDIATELY ABOVE this box.
Ensure the previous rule ends with a closing bracket "}"
If it doesn't, add one right above this line!

*/

.site-footer {
background-color: #1a3622;
color: #fff;
margin-top: auto;
clear: both; /* Added to clear any floating elements above it */
}

.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.footer-newsletter {
background-color: #e9edc9;
color: #1a3622;
text-align: center;
padding: 3rem 20px;
}

.footer-newsletter h3 {
margin-top: 0;
margin-bottom: 0.5rem;
}

.newsletter-form {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 1.5rem;
max-width: 500px;
margin-inline: auto;
}

.newsletter-form input {
flex: 1;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}

/*

THE DESKTOP GRID - This forces the 3 columns

*/
.footer-widgets {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr !important;
gap: 2rem;
padding-top: 4rem;
padding-bottom: 4rem;
}

.footer-column {
display: flex;
flex-direction: column;
}

.footer-title {
color: #fff;
margin-top: 0;
margin-bottom: 1rem;
}

.footer-brand p {
color: #ccc;
max-width: 300px;
}

.footer-links h4 {
color: #e9edc9;
margin-top: 0;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}

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

.footer-links li {
margin-bottom: 0.75rem;
}

.footer-links a {
color: #ccc;
text-decoration: none;
transition: color 0.2s ease;
}

.footer-links a:hover {
color: #fff;
}

.footer-bottom {
background-color: #132217;
text-align: center;
padding: 1.5rem 0;
font-size: 0.875rem;
}

.footer-bottom p {
margin: 0;
color: #aaa;
}

.footer-legal a {
color: #aaa;
text-decoration: none;
margin: 0 0.5rem;
}

.footer-legal a:hover {
color: #fff;
}

/*

MOBILE RESPONSIVENESS - Snaps to 1 column on phones

*/
@media screen and (max-width: 768px) {

.header-container {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
}

.main-navigation ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.boreal-hero {
    padding: 3rem 15px;
}

.boreal-hero h1 {
    font-size: 2rem;
}

.woocommerce ul.products {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.woocommerce ul.products li.product {
    padding: 0.75rem;
}

.woocommerce ul.products li.product h2 {
    font-size: 1rem;
}

.boreal-value-props {
    grid-template-columns: 1fr !important; 
}

/* This forces 1 column on mobile! */
.footer-widgets {
    grid-template-columns: 1fr !important;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.footer-brand p {
    margin: 0 auto;
}

.newsletter-form {
    flex-direction: column;
}

.newsletter-form button {
    width: 100%;
}


}