/*
Theme Name:   Pro Quartz
Theme URI:    https://proquartz.co
Description:  Dark metal + lava child theme for Storefront. Ports the Pro Quartz static design onto WooCommerce.
Author:       Pro Quartz
Author URI:   https://proquartz.co
Template:     storefront
Version:      1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  proquartz
*/

/* =========================================================
   1. TOKENS  (carried over verbatim from index.html)
   ========================================================= */
:root {
	--bg-dark:      #121212;
	--bg-card:      #1a1a1a;
	--bg-alt:       #161616;
	--metal-silver: #b5b8b9;
	--metal-dark:   #2c2e30;
	--lava-glow:    #ff4500;
	--lava-dim:     #992200;
	--text-light:   #e0e0e0;
	--text-muted:   #888888;
	--pq-border:    1px solid var(--metal-dark);
}

/* =========================================================
   2. GLOBAL / STOREFRONT RESET TO DARK
   ========================================================= */
body,
body.woocommerce-page,
#page,
.site-content,
.site {
	background-color: var(--bg-dark);
	color: var(--text-light);
}

body {
	line-height: 1.6;
	overflow-x: hidden;
}

body,
button, input, select, textarea,
.widget h1, .widget h2, .widget h3 {
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.woocommerce-loop-product__title,
.product_title {
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}

/* Storefront reserves this margin for its own "Homepage" page-template
   mechanism; this theme uses front-page.php instead, so it just leaves an
   unwanted gap between the header and the hero. */
.site-header { margin-bottom: 0 !important; }

a { color: var(--metal-silver); }
a:hover, a:focus { color: var(--lava-glow); }

/* Keyboard focus stays visible — Storefront's default outline vanishes on dark */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--lava-glow);
	outline-offset: 2px;
}

hr, .site-content .col-full > hr { background-color: var(--metal-dark); }

/* =========================================================
   3. BUTTONS
   ========================================================= */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.widget a.button,
.added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: linear-gradient(135deg, var(--metal-dark), #111);
	color: var(--metal-silver);
	padding: 0.8rem 2rem;
	font-weight: bold;
	text-transform: uppercase;
	border: 2px solid var(--metal-silver);
	border-radius: 4px;
	text-shadow: none;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	transition: color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

button:hover,
.button:hover,
.added_to_cart:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: linear-gradient(135deg, var(--metal-dark), #111);
	color: #fff;
	border-color: var(--lava-glow);
	box-shadow: 0 0 15px var(--lava-dim);
	text-shadow: 0 0 5px var(--lava-glow);
}

/* Disabled state must not read as hoverable */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	opacity: .45;
	border-color: var(--metal-dark);
	color: var(--text-muted);
}

/* =========================================================
   4. FORM FIELDS  (checkout depends on these being legible)
   ========================================================= */
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"],
textarea, select,
.select2-container .select2-selection--single {
	background-color: #0f0f0f;
	border: var(--pq-border);
	color: var(--text-light);
	border-radius: 4px;
	box-shadow: none;
}

input::placeholder, textarea::placeholder { color: #666; }

input:focus, textarea:focus, select:focus {
	border-color: var(--lava-glow);
	background-color: #141414;
}

label, .woocommerce-form__label { color: var(--text-light); }

/* select2 (country/state pickers) */
.select2-dropdown,
.select2-container--default .select2-results > .select2-results__options {
	background-color: var(--bg-card);
	border: var(--pq-border);
	color: var(--text-light);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--lava-dim);
	color: #fff;
}

/* =========================================================
   5. HEADER + NAVIGATION
   ========================================================= */
.site-header {
	background-color: rgba(18, 18, 18, .95);
	border-bottom: 2px solid var(--metal-dark);
	padding-top: 1rem;
	padding-bottom: 1rem;
	position: sticky;
	top: 0;
	z-index: 1000;
	backdrop-filter: blur(6px);
}

/* Single row: logo left, nav + cart grouped on the right — matches the
   mockup's .nav-container. functions.php re-closes the header's .col-full
   after the cart instead of Storefront's default two-row split. */
.site-header .col-full {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 1.5rem;
}

/* Storefront's own CSS gives these elements fixed widths/floats sized for
   its default two-row header (some rules scoped to .woocommerce-active with
   higher specificity than a plain descendant selector) — neutralize those
   so flex sizing above wins. */
.site-header .site-branding,
.site-header .main-navigation,
.site-header .site-header-cart {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	margin-right: 0 !important;
}

.site-header .site-branding {
	display: flex !important;
	align-items: center;
	gap: 1rem;
}

.main-navigation { margin-left: auto; }

/* WP admin bar would otherwise sit on top of the sticky header */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header .custom-logo-link img,
.site-header .site-logo-anchor img {
	max-width: 50px;
	border-radius: 50%;
	border: 1px solid var(--metal-silver);
}

.site-branding .site-title a,
.beta.site-title a {
	color: var(--metal-silver);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.site-branding .site-title,
.beta.site-title {
	margin: 0;
}

/* Mockup's header has no tagline under the wordmark — kept in the DB
   (blogdescription) for SEO/meta use, just not shown here. */
.site-header .site-description { display: none; }

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
	background-color: var(--bg-dark);
}

.main-navigation ul li a,
.site-header-cart .cart-contents,
.site-header ul.menu li.current-menu-item > a {
	color: var(--text-light);
	text-transform: uppercase;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: 1px;
}

.main-navigation ul li:hover > a,
.main-navigation ul li a:focus,
.site-header-cart .cart-contents:hover {
	color: var(--lava-glow);
}

.main-navigation ul.menu > li.current-menu-item > a {
	box-shadow: inset 0 -3px 0 var(--lava-glow);
}

.site-header-cart .widget_shopping_cart {
	background-color: var(--bg-card);
	border: var(--pq-border);
}

.menu-toggle,
button.menu-toggle:hover {
	border-color: var(--metal-silver);
	color: var(--metal-silver);
	background: transparent;
}

/* =========================================================
   6. HERO  (front-page.php)
   ========================================================= */
.pq-hero {
	position: relative;
	background: radial-gradient(circle at center, #251008 0%, var(--bg-dark) 70%);
	padding: 8rem 1.5rem;
	text-align: center;
	border-bottom: var(--pq-border);
	margin-bottom: 0;
}

.pq-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.8));
	z-index: 1;
}

.pq-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto;
}

.pq-hero__logo {
	display: inline-block;
	width: 180px;
	height: 180px;
	margin-bottom: 1.5rem;
	border-radius: 50%;
	box-shadow: 0 0 30px rgba(255, 69, 0, .2);
}

.pq-hero h1 {
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: 900;
	letter-spacing: 3px;
	line-height: 1.6;
	margin-bottom: 1rem;
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0,0,0,.8);
}

.pq-hero p {
	font-size: 1.25rem;
	color: var(--metal-silver);
	margin-bottom: 2rem;
}

/* =========================================================
   7. SECTION HEADINGS
   ========================================================= */
.pq-section { padding: 4rem 0; }
.pq-section--alt { background-color: var(--bg-alt); }

.pq-section-title,
.storefront-product-section .section-title,
.woocommerce .products > h2 {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 3rem;
	color: var(--metal-silver);
	text-align: center;
}

.pq-section-title::after,
.storefront-product-section .section-title::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background-color: var(--lava-glow);
	margin: .5rem auto 0;
	box-shadow: 0 0 8px var(--lava-glow);
}

.pq-prose {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	color: var(--text-muted);
	font-size: 1.1rem;
}

.pq-prose a { color: var(--lava-glow); }
.pq-prose a:hover { color: #fff; }

/* =========================================================
   8. FEATURE CARDS
   ========================================================= */
.pq-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2.5rem;
}

.pq-card {
	background-color: var(--bg-card);
	border: var(--pq-border);
	border-radius: 6px;
	padding: 2.5rem 1.5rem;
	text-align: center;
	transition: transform .3s ease, border-color .3s ease;
}

.pq-card:hover {
	transform: translateY(-5px);
	border-color: var(--lava-glow);
}

.pq-card__icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: 1rem;
	display: block;
}

.pq-card h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.pq-card p  { color: var(--text-muted); font-size: .95rem; }

/* =========================================================
   9. PRODUCT LOOP  (replaces the static .product-showcase blocks)
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background-color: var(--bg-card);
	border: var(--pq-border);
	border-radius: 6px;
	padding: 1rem;
	transition: transform .3s ease, border-color .3s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-5px);
	border-color: var(--lava-glow);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem;
	color: #fff;
	padding-top: .75rem;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--lava-glow);
	font-weight: 700;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--text-muted);
	opacity: 1;
}

.woocommerce span.onsale {
	background-color: var(--lava-glow);
	color: #111;
	font-weight: 800;
	text-transform: uppercase;
	box-shadow: 0 0 12px var(--lava-dim);
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--lava-glow); }

/* Single product */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs .panel {
	background-color: var(--bg-card);
	border-color: var(--metal-dark);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--text-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--lava-glow); }

.woocommerce table.shop_attributes th,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--metal-dark);
	color: var(--text-light);
}

/* Product tag ("Flagship Series", "Daily Drivers") — ported from index.html's
   .product-tag, used in the mock products' descriptions. */
.product-tag {
	color: var(--lava-glow);
	text-transform: uppercase;
	font-weight: bold;
	font-size: .85rem;
	letter-spacing: 2px;
	margin-bottom: .5rem;
	display: inline-block;
}

/* Spec bullets ported from .specs-list */
.pq-specs { list-style: none; margin: 0 0 2rem; padding: 0; }
.pq-specs li {
	margin-bottom: .5rem;
	padding-left: 1.5rem;
	position: relative;
	color: var(--text-light);
}
.pq-specs li::before {
	content: '\25C6';
	position: absolute;
	left: 0;
	color: var(--lava-glow);
}

/* Editorial product showcase — the #hardware section's actual layout,
   ported from index.html's .product-showcase (originally dropped when this
   section moved to a live WooCommerce loop). Uses .pq-showcase-list rather
   than WooCommerce's own .products class so it can't leak into shop/related
   product grids elsewhere on the site. */
.pq-showcase-list { display: flex; flex-direction: column; }

.product-showcase {
	display: flex;
	align-items: center;
	gap: 4rem;
	margin-bottom: 4rem;
}

.product-showcase:last-child { margin-bottom: 0; }

.product-showcase:nth-child(even) { flex-direction: row-reverse; }

.product-img-placeholder {
	flex: 1;
	height: 400px;
	background: linear-gradient(135deg, #222, #111);
	border: 2px solid var(--metal-dark);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.product-img-placeholder img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-img-placeholder::before {
	content: '';
	position: absolute;
	width: 150%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 69, 0, .05), transparent);
	transform: rotate(-45deg);
	animation: sweep 4s infinite linear;
}

@keyframes sweep {
	0% { transform: translate(-100%, -100%) rotate(-45deg); }
	100% { transform: translate(100%, 100%) rotate(-45deg); }
}

.product-info { flex: 1; text-align: left; }

.product-info h3 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.product-info p {
	color: var(--text-muted);
	margin-bottom: 1.5rem;
	font-size: 1.1rem;
}

@media (max-width: 768px) {
	.product-showcase,
	.product-showcase:nth-child(even) {
		flex-direction: column;
		gap: 2rem;
	}
	.product-img-placeholder { width: 100%; height: 300px; }
}

/* =========================================================
   10. CART / CHECKOUT / MESSAGES
   ========================================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: var(--bg-card);
	color: var(--text-light);
	border-top: 3px solid var(--lava-glow);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--lava-glow); }

.woocommerce-checkout #payment,
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout-review-order-table tfoot {
	background-color: var(--bg-card);
	color: var(--text-light);
}

.woocommerce-checkout #payment div.payment_box {
	background-color: #0f0f0f;
	color: var(--text-light);
	border: var(--pq-border);
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #0f0f0f;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: var(--pq-border);
}

/* EMT gateway instructions — plugin ships these unstyled on purpose (v2.0.3) */
.aemt-instructions,
.aemt-instructions--thankyou {
	background-color: var(--bg-card);
	border: var(--pq-border);
	border-left: 4px solid var(--lava-glow);
	border-radius: 4px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	color: var(--text-light);
}

.aemt-instructions__body { font-size: 1rem; line-height: 1.7; }

.aemt-instructions strong,
.aemt-instructions__body strong { color: var(--lava-glow); }

/* =========================================================
   11. WOOCOMMERCE BLOCKS  (Cart & Checkout block templates —
   the default since WooCommerce 8.3+; the classic markup rules
   in section 10 no longer apply to these two pages)
   ========================================================= */
.wc-block-components-checkout-step,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper {
	background-color: var(--bg-card) !important;
	border: var(--pq-border) !important;
	border-radius: 6px;
}

.wc-block-components-checkout-step {
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title,
.wc-block-cart__totals-title,
.wc-block-components-order-summary__content .wc-block-components-product-name {
	color: #fff !important;
}

.wc-block-components-checkout-step__description,
.wc-block-checkout__guest-checkout-notice {
	color: var(--text-muted) !important;
}

/* Text inputs, selects — background/border/text only, so the
   floating-label positioning WooCommerce controls via JS is untouched. */
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-textarea textarea {
	background-color: #0f0f0f !important;
	border: var(--pq-border) !important;
	color: var(--text-light) !important;
	border-radius: 4px !important;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-textarea textarea:focus {
	border-color: var(--lava-glow) !important;
	background-color: #141414 !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	color: var(--text-muted) !important;
	background-color: transparent !important;
}

.wc-block-components-text-input.is-active label,
.wc-blocks-components-select__container.is-active .wc-blocks-components-select__label {
	color: var(--text-muted) !important;
}

.wc-blocks-components-select__expand { color: var(--text-muted) !important; }

.wc-block-components-checkbox__mark { color: var(--text-light) !important; }
.wc-block-components-checkbox__input:checked ~ .wc-block-components-checkbox__mark {
	color: var(--lava-glow) !important;
}

/* Buttons — same dark-metal treatment as the rest of the site */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: linear-gradient(135deg, var(--metal-dark), #111) !important;
	color: var(--metal-silver) !important;
	border: 2px solid var(--metal-silver) !important;
	border-radius: 4px !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	color: #fff !important;
	border-color: var(--lava-glow) !important;
	box-shadow: 0 0 15px var(--lava-dim);
}

.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__button {
	background-color: #0f0f0f !important;
	border-color: var(--metal-dark) !important;
	color: var(--text-light) !important;
}

.wc-block-cart-item__remove-link { color: var(--text-muted) !important; }
.wc-block-cart-item__remove-link:hover { color: var(--lava-glow) !important; }

.wc-block-cart-items__header { border-bottom: var(--pq-border) !important; color: var(--metal-silver) !important; }
.wc-block-cart-items__row { border-bottom-color: var(--metal-dark) !important; }

.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item {
	color: var(--text-light) !important;
	border-top-color: var(--metal-dark) !important;
}

.wc-block-components-panel__button { color: var(--text-light) !important; }
.wc-block-components-panel__button-icon { color: var(--lava-glow) !important; }

/* Notices — mirrors the classic .woocommerce-message treatment in section 10 */
.wc-block-components-notice-banner {
	background-color: var(--bg-card) !important;
	color: var(--text-light) !important;
	border: var(--pq-border) !important;
	border-top: 3px solid var(--lava-glow) !important;
	border-radius: 4px;
}

.wc-block-components-notice-banner.is-error { border-top-color: #cc4444 !important; }
.wc-block-components-notice-banner.is-success { border-top-color: var(--lava-glow) !important; }

.wc-block-components-order-summary-item__individual-price,
.wc-block-components-product-price__value {
	color: var(--text-muted) !important;
}

.wc-block-components-order-summary-item__total-price .wc-block-components-formatted-money-amount,
.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
	color: var(--lava-glow) !important;
}

/* =========================================================
   12. WIDGETS / SIDEBAR
   ========================================================= */
.widget { color: var(--text-light); }
.widget-area .widget { background: transparent; }
.widget h2.widget-title,
.widget .widget-title {
	color: var(--metal-silver);
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: var(--pq-border);
	padding-bottom: .5rem;
}
.widget ul li { border-bottom-color: var(--metal-dark); }

/* =========================================================
   13. FOOTER
   ========================================================= */
.site-footer {
	background-color: #0d0d0d;
	border-top: 2px solid var(--metal-dark);
	color: var(--text-muted);
	font-size: .9rem;
	padding-top: 3rem;
}

.site-footer a { color: var(--metal-silver); }
.site-footer a:hover { color: var(--lava-glow); }
.site-footer h1, .site-footer h2, .site-footer h3 { color: var(--metal-silver); }

.pq-footer-logo {
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-bottom: 1rem;
}

.pq-legal-notice {
	border: 1px solid #331111;
	background-color: #1a0808;
	color: #cc6666;
	padding: 1rem;
	border-radius: 4px;
	margin: 2rem auto 0;
	max-width: 900px;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
}

/* =========================================================
   14. AGE GATE
   ========================================================= */
.pq-agegate {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(6, 6, 6, .97);
	padding: 1.5rem;
}

.pq-agegate__panel {
	background-color: var(--bg-card);
	border: 1px solid var(--metal-silver);
	border-radius: 8px;
	padding: 2.5rem 2rem;
	max-width: 460px;
	width: 100%;
	text-align: center;
	box-shadow: 0 0 40px rgba(255, 69, 0, .15);
}

.pq-agegate__panel img { display: inline-block; width: 110px; border-radius: 50%; margin-bottom: 1.25rem; }
.pq-agegate__panel h2 { font-size: 1.5rem; margin-bottom: .75rem; }
.pq-agegate__panel p { color: var(--text-muted); margin-bottom: 1.75rem; }
.pq-agegate__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.pq-agegate__deny {
	background: transparent;
	border-color: var(--metal-dark);
	color: var(--text-muted);
}

/* =========================================================
   15. RESPONSIVE + MOTION
   ========================================================= */
@media (max-width: 768px) {
	.pq-hero { padding: 4rem 1rem; }
	.pq-hero__logo { width: 130px; height: 130px; }
	.pq-section { padding: 2.5rem 0; }
	.site-header { position: static; }
	.site-header .col-full { justify-content: space-between; gap: 1rem; }
	.main-navigation { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.pq-card:hover,
	.woocommerce ul.products li.product:hover { transform: none; }
}