/*!
Theme Name: ABI Electrical Solutions
Theme URI: http://underscores.me/
Author: Mahendra Kumbhar
Author URI: https://mahendrakumbhar.com/
Description: This is a special theme for  one of the renowend musician Rahul Ranade. The theme lets you create a responsive website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a Altus website with WordPress has never been easier.
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: abi-electrical-solutions
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.

ABI Electrical Solutions 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:
----------------------------------------------------------------
# Google Fonts
# Reset / Normalize
# Variables
# Typography
# Layout
# Grid System
# Utilities
# Header
# Navigation
# Buttons
# Forms
# Cards
# Hero
# Blog
# Footer
# WordPress
# WooCommerce
# Animations
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Google Fonts
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap');

/*--------------------------------------------------------------
# Reset / Normalize
--------------------------------------------------------------*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
}
main {
	display: block;
}
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}
a {
	background-color: transparent;
}
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}
b,
strong {
	font-weight: bolder;
}
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}
small {
	font-size: 80%;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
img {
	border-style: none;
}
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}
button,
input {
	overflow: visible;
}
button,
select {
	text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}
fieldset {
	padding: 0.35em 0.75em 0.625em;
}
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}
progress {
	vertical-align: baseline;
}
textarea {
	overflow: auto;
}
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}
details {
	display: block;
}
summary {
	display: list-item;
}
template {
	display: none;
}
[hidden] {
	display: none;
}

/* Box sizing */
*,
*::before,
*::after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
	/* Colors */
	--color-primary: #0a58a3;
	--color-secondary: #00a859;
	--color-accent: #e6a800;
	--color-background: #ffffff;
	--color-text: #404040;
	--color-headings: #222222;
	--color-link: var(--color-primary);
	--color-link-hover: #191970;
	--color-link-visited: var(--color-secondary);

	--color-success: #28a745;
	--color-warning: #ffc107;
	--color-danger: #dc3545;
	--color-info: #17a2b8;

	--color-light: #f8f9fa;
	--color-dark: #343a40;
	--color-surface: #ffffff;
	--color-muted: #6c757d;

	--color-border: #cccccc;
	--color-border-light: #e5e5e5;

	/* Border Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-pill: 50rem;
	--radius-circle: 50%;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
	--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
	--shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
	--shadow-xl: 0 20px 50px rgba(0,0,0,0.2);

	/* Transitions */
	--transition-fast: 150ms ease-in-out;
	--transition-normal: 300ms ease-in-out;
	--transition-slow: 500ms ease-in-out;

	/* Layout */
	--header-height: 80px;
	--footer-height: 200px;

	--container-max-width: 1280px;
	--container-padding: 1.5rem;
	--container-sm: 540px;
	--container-md: 720px;
	--container-lg: 960px;

	/* Typography */
	--font-headings: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--font-monospace: 'Courier 10 Pitch', courier, monospace;

	--font-size-base: 1rem;
	--font-size-small: 0.875rem;
	--font-size-large: 1.125rem;

	/* Spacing scale (1 = 0.25rem = 4px) */
	--spacer: 0.25rem;
	--spacing-0: 0;
	--spacing-1: calc(var(--spacer) * 1);
	--spacing-2: calc(var(--spacer) * 2);
	--spacing-3: calc(var(--spacer) * 3);
	--spacing-4: calc(var(--spacer) * 4);
	--spacing-5: calc(var(--spacer) * 6);

	/* Z-index */
	--z-index-dropdown: 99999;
	--z-index-skip-link: 100000;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
html {
	font-size: 16px;
}
body {
	color: var(--color-text);
	background: var(--color-background);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: var(--font-headings);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-headings);
	margin-top: 0;
	margin-bottom: 1.5rem;
}
h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
}
h2 {
	font-size: clamp(1.75rem, 4vw, 2.8rem);
	font-weight: 600;
}
h3 {
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	font-weight: 600;
}
h4 {
	font-size: clamp(1.25rem, 2.5vw, 1.8rem);
	font-weight: 500;
}
h5 {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 500;
}
h6 {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 500;
}

p {
	margin-bottom: 1.5rem;
}
a {
	color: var(--color-link);
	text-decoration: underline;
	transition: color var(--transition-normal);
}
a:visited {
	color: var(--color-link-visited);
}
a:hover,
a:focus {
	color: var(--color-link-hover);
	text-decoration: none;
}
a:focus {
	outline: thin dotted;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.container {
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
	width: 100%;
	clear: both;
}

/*--------------------------------------------------------------
# Grid System
--------------------------------------------------------------*/
.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(-1 * var(--spacing-2));
	margin-right: calc(-1 * var(--spacing-2));
}
.row > * {
	padding-left: var(--spacing-2);
	padding-right: var(--spacing-2);
}

/* Simple grid */
.grid {
	display: grid;
	gap: var(--spacing-4);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Display */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.d-block { display: block; }

/* Flex */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.flex-wrap { flex-wrap: wrap; }

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Font weights */
.fw-light { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-bold { font-weight: 700; }

/* Spacing (margin & padding) */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }

.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }

.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }

.pt-1 { padding-top: var(--spacing-1); }
.pt-2 { padding-top: var(--spacing-2); }
.pt-3 { padding-top: var(--spacing-3); }
.pt-4 { padding-top: var(--spacing-4); }
.pt-5 { padding-top: var(--spacing-5); }

.pb-1 { padding-bottom: var(--spacing-1); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-5 { padding-bottom: var(--spacing-5); }

.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }

.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Rounded */
.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-circle { border-radius: var(--radius-circle); }

/* Shadow */
.shadow { box-shadow: var(--shadow-md); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Positioning */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.sticky-top { position: sticky; top: 0; }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
	height: var(--header-height);
	background: var(--color-background);
	border-bottom: 1px solid var(--color-border-light);
	display: flex;
	align-items: center;
	position: fixed;
	z-index: 100;
	width:100%;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
}
.site-header .main-navigation {
  float: right;
  width: auto;
  clear: none;
  padding-right: 20px;
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.main-navigation {
	display: block;
	width: 100%;
}
.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding-left: 0;
	gap:1rem;
}
.main-navigation ul ul {
	box-shadow: var(--shadow-md);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: var(--z-index-dropdown);
}
.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; color:var(--color-primary); text-transform:uppercase;}

.menu-toggle,
.main-navigation.toggled ul {
	display: none;
}
.main-navigation a::after {content: ''; position: absolute; bottom: 0; left: 0;width: 0; height: 3px; background:var(--color-secondary);  transition: width 0.3s ease;}

.main-navigation a:hover::after {  width: 100%;}
/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn {
	display: inline-block;
	font-family: var(--font-headings);
	font-weight: 500;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.6rem 1.2rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: var(--radius-sm);
	transition: all var(--transition-normal);
	cursor: pointer;
	text-decoration: none;
}
.btn:hover,
.btn:focus {
	text-decoration: none;
}

.btn-primary {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}
.btn-primary:hover {
	background: var(--color-link-hover);
	border-color: var(--color-link-hover);
	color: #fff;
}

.btn-secondary {
	background: var(--color-secondary);
	color: #fff;
	border-color: var(--color-secondary);
}
.btn-secondary:hover {
	background: #5a005a;
	border-color: #5a005a;
	color: #fff;
}

.btn-accent {
	background: var(--color-accent);
	color: #222;
	border-color: var(--color-accent);
}
.btn-accent:hover {
	background: #c49000;
	border-color: #c49000;
}

.btn-dark {
	background: var(--color-dark);
	color: #fff;
	border-color: var(--color-dark);
}
.btn-dark:hover {
	background: #23272b;
	border-color: #23272b;
}

.btn-light {
	background: var(--color-light);
	color: #222;
	border-color: #ddd;
}
.btn-light:hover {
	background: #e2e6ea;
}

.btn-outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn-outline:hover {
	background: var(--color-primary);
	color: #fff;
}

.btn-outline-light {
	background: transparent;
	color: #fff;
	border-color: #fff;
}
.btn-outline-light:hover {
	background: #fff;
	color: #222;
}

.btn-sm {
	padding: 0.3rem 0.8rem;
	font-size: 0.875rem;
}
.btn-lg {
	padding: 0.8rem 2rem;
	font-size: 1.125rem;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/* Base input styles */
.form-control {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-input-text);
	background: var(--color-input-bg);
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
	color: var(--color-input-focus-text);
	border-color: var(--color-primary);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(65,105,225,0.25);
}
.form-control.is-valid {
	border-color: var(--color-success);
}
.form-control.is-invalid {
	border-color: var(--color-danger);
}

/* Floating labels */
.form-floating {
	position: relative;
	margin-bottom: 1.5rem;
}
.form-floating > .form-control {
	height: calc(3.5rem + 2px);
	padding: 1rem 0.75rem;
}
.form-floating > label {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	padding: 1rem 0.75rem;
	pointer-events: none;
	border: 1px solid transparent;
	transform-origin: 0 0;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	color: var(--color-muted);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
	opacity: 0.65;
	transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control::placeholder {
	color: transparent;
}

/* Checkbox & Radio */
.form-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--color-primary);
	cursor: pointer;
}
.form-check label {
	cursor: pointer;
}

/* Select */
.form-select {
	display: block;
	width: 100%;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-input-text);
	background: var(--color-input-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-sm);
	appearance: none;
}
.form-select:focus {
	border-color: var(--color-primary);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(65,105,225,0.25);
}

/* Validation feedback */
.invalid-feedback {
	display: none;
	width: 100%;
	margin-top: 0.25rem;
	font-size: 0.875em;
	color: var(--color-danger);
}
.is-invalid ~ .invalid-feedback {
	display: block;
}

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background: var(--color-surface);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-normal);
}
.card:hover {
	box-shadow: var(--shadow-md);
}
.card-header {
	padding: 0.75rem 1.25rem;
	margin-bottom: 0;
	background: var(--color-light);
	border-bottom: 1px solid var(--color-border-light);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.card-body {
	flex: 1 1 auto;
	padding: 1.25rem;
}
.card-footer {
	padding: 0.75rem 1.25rem;
	background: var(--color-light);
	border-top: 1px solid var(--color-border-light);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
	background: var(--color-light);
	padding: 4rem 0;
	text-align: center;
}
.hero .hero-title {
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 800;
}
.hero .hero-subtitle {
	font-size: 1.25rem;
	color: var(--color-muted);
	margin-bottom: 2rem;
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.entry-title {
	font-size: clamp(1.5rem, 3vw, 2.5rem);
}
.entry-meta {
	font-size: 0.875rem;
	color: var(--color-muted);
	margin-bottom: 1rem;
}
.entry-content {
	margin:	0;
}
.sticky {
	display: block;
}
.updated:not(.published) {
	display: none;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
	background: var(--color-light);
	/*color: #ccc;*/
	padding: 2rem 0;
	
}
.site-footer .site-info {
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    color: var(--color-muted);
    text-align: center;
    padding: 1rem 0;
}
.site-footer .site-info a {
    color: var(--color-accent);
    text-decoration: none;
}
.site-footer .site-info a:hover {
    text-decoration: underline;
/*--------------------------------------------------------------
# WordPress
--------------------------------------------------------------*/
/* Alignments */
.alignwide {
	margin-left: -10%;
	margin-right: -10%;
	max-width: 120%;
}
.alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

/* Block styles */
.wp-block-group {
	margin-bottom: 2rem;
}
.wp-block-columns {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}
.wp-block-column {
	flex: 1;
	min-width: 0;
}
.wp-block-button .wp-block-button__link {
	@extend .btn;
}
.wp-block-image img {
	max-width: 100%;
	height: auto;
}
.wp-block-cover {
	background-size: cover;
	background-position: center;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

/*--------------------------------------------------------------
# WooCommerce
--------------------------------------------------------------*/
.woocommerce .products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 2rem;
}
.woocommerce .product {
	border: 1px solid var(--color-border-light);
	padding: 1rem;
	border-radius: var(--radius-md);
}
.woocommerce .product .button {
	@extend .btn;
	@extend .btn-primary;
}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes scaleIn {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
@keyframes slideLeft {
	from { transform: translateX(30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes slideRight {
	from { transform: translateX(-30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

.fade-up { animation: fadeUp 0.6s ease forwards; }
.fade-in { animation: fadeIn 0.6s ease forwards; }
.scale { animation: scaleIn 0.4s ease forwards; }
.slide-left { animation: slideLeft 0.5s ease forwards; }
.slide-right { animation: slideRight 0.5s ease forwards; }

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

/* Small devices (≥576px) */
@media (min-width: 576px) {
	.container { max-width: var(--container-sm); }
	.grid-2-sm { grid-template-columns: repeat(2, 1fr); }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
	.container { max-width: var(--container-md); }
	.menu-toggle { display: none; }
	.main-navigation ul { display: flex; display: flex;   flex-wrap: wrap;    gap: 1rem; }
	.grid-2-md { grid-template-columns: repeat(2, 1fr); }
	.grid-3-md { grid-template-columns: repeat(3, 1fr); }
	.grid-4-md { grid-template-columns: repeat(4, 1fr); }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
	.container { max-width: var(--container-lg); }
	.grid-3-lg { grid-template-columns: repeat(3, 1fr); }
	.grid-4-lg { grid-template-columns: repeat(4, 1fr); }
	.grid-5-lg { grid-template-columns: repeat(5, 1fr); }
	.grid-6-lg { grid-template-columns: repeat(6, 1fr); }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
	.container { max-width: var(--container-max-width); }
}

/* Extra extra large (≥1400px) */
@media (min-width: 1400px) {
	.container { max-width: 1320px; }
}

/* Contact Form 7 integration */
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 1rem;
}
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-textarea {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.wpcf7-form .wpcf7-submit {
	@extend .btn;
	@extend .btn-primary;
}