/*
Theme Name: Richards Gear Custom
Theme URI: https://richardsgear.com
Author: Richards Gear
Description: Lightweight WooCommerce theme for Richards Gear with server-rendered templates and Vue-powered progressive enhancements.
Version: 0.8.2
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: richardsgear
*/

@import url("assets/css/email-signup.css");

:root {
	color-scheme: light;
	--rg-black: #050606;
	--rg-ink: #101313;
	--rg-graphite: #2d3331;
	--rg-muted: #7c8580;
	--rg-line: #d5dad7;
	--rg-paper: #e9ecea;
	--rg-panel: #f4f6f4;
	--rg-white: #ffffff;
	--rg-mint: #74f7ca;
	--rg-mint-strong: #28dca4;
	--rg-mint-dark: #0f7f63;
	--rg-radius: 8px;
	--rg-shadow-soft: 0 12px 28px rgba(8, 10, 10, 0.1);
	--rg-shadow-tight: 0 8px 18px rgba(8, 10, 10, 0.12);
	--rg-shadow-inset: inset 2px 2px 6px rgba(8, 10, 10, 0.05), inset -2px -2px 6px rgba(255, 255, 255, 0.72);
}

* { box-sizing: border-box; }
body {
	margin: 0;
	color: var(--rg-ink);
	background: #292929;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.6;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-color: rgba(40, 220, 164, 0.48); }
a:hover { color: var(--rg-mint-dark); }
.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 10000;
	padding: 10px 14px;
	color: var(--rg-black);
	background: var(--rg-mint);
	border-radius: var(--rg-radius);
	font-weight: 900;
}
.rg-container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.site-main:not(.rg-front) { background: var(--rg-paper); }
.site-header { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 0; }
.site-utility { color: rgba(255,255,255,.72); background: #303030; border-bottom: 1px solid #101010; font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.site-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 34px; }
.site-utility p { margin: 0; color: var(--rg-mint); }
.site-utility__links { display: flex; gap: 16px; align-items: center; }
.site-utility__region { display: inline-flex; align-items: center; gap: 6px; }
.site-utility__flag { position: relative; flex: 0 0 16px; width: 16px; height: 10px; overflow: hidden; background: repeating-linear-gradient(to bottom, #b31942 0 1px, #ffffff 1px 2px); border-radius: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.site-utility__flag::before { position: absolute; top: 0; left: 0; width: 7px; height: 5.5px; background: #3c3b6e; content: ""; }
.site-utility__flag::after { position: absolute; top: 1px; left: 1px; width: 1px; height: 1px; background: #ffffff; border-radius: 999px; box-shadow: 2px 0 #ffffff, 4px 0 #ffffff, 0 2px #ffffff, 2px 2px #ffffff, 4px 2px #ffffff; content: ""; opacity: .86; }
.site-utility__links a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-header__inner { display: grid; grid-template-columns: 116px minmax(0,1fr) auto auto; gap: 0; align-items: center; min-height: 62px; background: var(--rg-white); border: 1px solid #191919; border-top: 0; box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.site-branding { display: grid; align-self: stretch; place-items: center; min-height: 62px; background: var(--rg-black); }
.site-branding .custom-logo-link,
.site-branding__link { display: inline-flex; align-items: center; justify-content: center; min-height: 62px; padding: 0 18px; font-weight: 950; text-decoration: none; }
.site-branding img { width: auto; max-width: 52px; max-height: 38px; object-fit: contain; filter: invert(1) brightness(2.2); }
.primary-nav { display: flex; gap: 3px; align-items: center; justify-self: start; padding-left: 22px; }
.primary-nav__list,
.footer-nav__list { display: flex; gap: 3px; align-items: center; padding: 0; margin: 0; list-style: none; }
.primary-nav a,
.footer-nav a,
.site-actions__link { font-weight: 950; text-decoration: none; }
.primary-nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 11px; color: var(--rg-black); font-size: .73rem; text-transform: uppercase; }
.primary-nav .current-menu-item > a,
.primary-nav a.is-active,
.primary-nav a:hover { color: var(--rg-black); background: #f1f3f1; }
.site-actions { display: inline-flex; align-self: stretch; gap: 0; align-items: center; border-left: 1px solid #191919; }
.site-actions__link { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 62px; padding: 0 14px; color: var(--rg-black); background: var(--rg-white); border-right: 1px solid #191919; font-size: .75rem; text-transform: uppercase; }
.site-actions__link:hover { color: var(--rg-black); background: var(--rg-mint); }
.mobile-nav-mount { display: none; }

.rg-front { padding: 0 0 64px; background: #292929; }
.rg-front .rg-container { width: min(1220px, calc(100% - 42px)); }
.rg-storefront__inner { padding: 38px 20px 16px; background: var(--rg-white); box-shadow: 0 16px 36px rgba(0,0,0,.24); }
.rg-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--rg-mint); font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.rg-front .rg-eyebrow { color: var(--rg-mint-dark); }
.rg-eyebrow::before { display: inline-block; width: 8px; height: 8px; background: var(--rg-mint); border-radius: 50%; box-shadow: 0 0 0 6px rgba(116,247,202,.12); content: ""; }
.rg-mega-copy h1 { margin: 0 0 30px; color: var(--rg-black); font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif; font-size: clamp(4.6rem, 10.6vw, 9.6rem); font-weight: 950; line-height: .86; text-transform: uppercase; }
.rg-feature-layout { display: grid; grid-template-columns: minmax(0,3.1fr) minmax(270px,1fr); gap: 20px; }
.rg-field-panel { position: relative; display: block; min-height: 320px; overflow: hidden; color: var(--rg-white); background: linear-gradient(135deg,#111,#2b2b2b); text-decoration: none; }
.rg-field-panel::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(5,6,6,.82), transparent 58%), linear-gradient(0deg, rgba(5,6,6,.84), transparent 50%); }
.rg-field-panel img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; opacity: .78; filter: grayscale(.35) contrast(1.12) saturate(.78); }
.rg-field-panel__mark { position: absolute; bottom: 18px; left: 18px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; color: var(--rg-black); background: var(--rg-white); font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif; }
.rg-field-panel__caption { position: absolute; right: 20px; bottom: 18px; left: 78px; z-index: 2; display: grid; gap: 4px; text-align: right; }
.rg-field-panel__caption span { color: var(--rg-mint); font-size: .74rem; font-weight: 950; text-transform: uppercase; }
.rg-field-panel__caption strong { color: var(--rg-white); font-size: 1.02rem; line-height: 1.1; text-transform: uppercase; }
.rg-feature-product { display: grid; grid-template-rows: minmax(190px,1fr) auto; min-height: 320px; color: var(--rg-black); background: #f4f4f3; text-decoration: none; }
.rg-feature-product__media { display: grid; place-items: center; padding: 18px; background: #f7f7f6; }
.rg-feature-product__media img { width: 100%; max-height: 190px; object-fit: contain; mix-blend-mode: multiply; }
.rg-feature-product__content { display: grid; gap: 7px; padding: 18px 18px 16px; }
.rg-feature-product__kicker,
.rg-feature-product__link { color: var(--rg-mint-dark); font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.rg-feature-product__name { font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif; font-size: 1.42rem; line-height: .98; text-transform: uppercase; }
.rg-feature-product__price { font-size: .86rem; font-weight: 850; }

.rg-category-section { padding: 58px 0; background: linear-gradient(rgba(5,6,6,.86), rgba(5,6,6,.92)), #050606; }
.rg-split-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.rg-split-heading h2,
.rg-equipment-visual h2,
.rg-mission-grid h2 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif; font-size: clamp(2.4rem,4.6vw,4.6rem); font-weight: 950; line-height: .92; text-transform: uppercase; }
.rg-split-heading h2 { color: var(--rg-white); }
.rg-arrow-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--rg-black); background: var(--rg-mint); font-size: .74rem; font-weight: 950; text-decoration: none; text-transform: uppercase; }
.rg-category-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.rg-category-card { position: relative; display: grid; min-height: 170px; overflow: hidden; color: var(--rg-white); background: var(--rg-black); text-decoration: none; }
.rg-category-card::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(0deg, rgba(5,6,6,.88), rgba(5,6,6,.08) 58%), linear-gradient(90deg, rgba(5,6,6,.38), transparent); }
.rg-category-card__media { position: absolute; inset: 0; }
.rg-category-card__media img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.rg-category-card__body { position: relative; z-index: 2; display: grid; align-content: end; gap: 6px; min-height: 170px; padding: 14px; }
.rg-category-card__name { max-width: calc(100% - 34px); font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif; font-size: 1.18rem; font-weight: 950; line-height: 1; text-transform: uppercase; }
.rg-category-card__count { color: rgba(255,255,255,.74); font-weight: 850; }

.rg-equipment-section { padding: 58px 0; background: var(--rg-white); }
.rg-equipment-grid { display: grid; grid-template-columns: minmax(340px,.86fr) minmax(0,1.14fr); gap: 22px; }
.rg-equipment-visual { position: relative; min-height: 500px; overflow: hidden; color: var(--rg-white); background: var(--rg-black); }
.rg-equipment-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(5,6,6,.9), transparent 62%), linear-gradient(90deg, rgba(5,6,6,.7), transparent); }
.rg-equipment-visual img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; opacity: .82; }
.rg-equipment-visual > div { position: absolute; right: 24px; bottom: 24px; left: 24px; z-index: 1; }
.rg-equipment-visual h2 { color: var(--rg-white); }
.rg-equipment-list { display: grid; gap: 12px; }
.rg-equipment-row { display: grid; grid-template-columns: 132px minmax(0,1fr) 42px; gap: 14px; align-items: center; min-height: 118px; padding: 12px; color: var(--rg-black); background: #f3f4f3; border: 1px solid #e4e6e4; text-decoration: none; }
.rg-equipment-row:hover { color: var(--rg-white); background: var(--rg-black); }
.rg-equipment-row__media { display: grid; place-items: center; background: var(--rg-white); }
.rg-equipment-row__media img { width: 108px; height: 94px; object-fit: contain; mix-blend-mode: multiply; }
.rg-equipment-row__body { display: grid; gap: 6px; }
.rg-equipment-row__name { font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif; font-size: 1.18rem; line-height: 1; text-transform: uppercase; }
.rg-equipment-row__price { color: var(--rg-mint-dark); font-size: .84rem; font-weight: 900; }
.rg-equipment-row__action { display: grid; place-items: center; width: 34px; height: 34px; color: var(--rg-black); background: var(--rg-white); font-weight: 950; }

.rg-mission-section { padding: 70px 0; background: var(--rg-black); }
.rg-mission-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 42px; color: var(--rg-white); }
.rg-mission-grid h2 { color: var(--rg-white); }
.rg-mission-copy { display: grid; gap: 18px; max-width: 620px; color: rgba(255,255,255,.7); font-size: 1.04rem; }
.rg-mission-copy p { margin: 0; }

.rg-page,
.rg-commerce { padding: 56px 0 78px; }
.rg-entry { max-width: 900px; }
.rg-entry__header { margin-bottom: 24px; }
.rg-entry__header h1,
.rg-entry h1 { margin: 0; color: var(--rg-black); font-size: 2.08rem; line-height: 1.12; }
.rg-entry__content { padding: 24px; background: var(--rg-panel); border: 1px solid rgba(255,255,255,.74); border-radius: var(--rg-radius); box-shadow: var(--rg-shadow-soft); font-size: 1.02rem; }

.rg-button,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; color: var(--rg-white); background: var(--rg-black); border-radius: var(--rg-radius); font-weight: 950; text-decoration: none; text-transform: uppercase; }
.rg-button--primary,
.wp-block-button__link { color: var(--rg-black); background: var(--rg-mint); }

.site-footer { padding: 42px 0; color: var(--rg-white); background: var(--rg-black); }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: start; }
.site-footer__name,
.site-footer__tagline,
.site-footer__meta { margin: 0; }
.site-footer__name { color: var(--rg-white); font-weight: 950; }
.site-footer__tagline,
.site-footer__meta { color: rgba(255,255,255,.66); }
.site-footer__meta { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-nav a { color: rgba(255,255,255,.76); }

@media (max-width: 980px) {
	.site-header__inner { grid-template-columns: 96px minmax(0,1fr) auto; }
	.primary-nav,
	.site-actions { display: none; }
	.mobile-nav-mount { display: block; justify-self: end; padding-right: 14px; }
	.rg-feature-layout,
	.rg-equipment-grid,
	.rg-mission-grid { grid-template-columns: 1fr; }
	.rg-category-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
	.rg-container,
	.rg-front .rg-container { width: min(100% - 24px, 1220px); }
	.site-utility { display: none; }
	.rg-storefront__inner { padding: 20px 10px 10px; }
	.rg-mega-copy h1 { margin-bottom: 16px; font-size: clamp(2.9rem,14.4vw,4.7rem); }
	.rg-field-panel,
	.rg-field-panel img,
	.rg-feature-product { min-height: 230px; }
	.rg-category-strip { grid-template-columns: 1fr; }
	.rg-equipment-row { grid-template-columns: 96px minmax(0,1fr) 34px; }
	.rg-equipment-row__media img { width: 82px; height: 76px; }
}