@font-face{font-family:Roboto;src:url(fonts/roboto-v3.woff2) format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Roboto Condensed;src:url(fonts/roboto-condensed-v3.woff2) format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Jost;src:url(fonts/jost-v3.woff2) format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--aeri-black:#111111;--aeri-lime:#c8f000;--aeri-ink:#171717;--aeri-muted:#4e514d;--aeri-gray:#e7e8e3;--aeri-line:#b8b9b2;--aeri-mineral:#ffffff;--aeri-moss:#111111;--aeri-moss-dark:#111111;--aeri-clay:#f06a2e;--aeri-orange:#f06a2e;--aeri-signal-lime:#c8f000;--aeri-charcoal:#111111;--aeri-white:#fff;--aeri-max:1440px;--aeri-gutter:32px;--aeri-ease:cubic-bezier(.2,.7,.2,1);--aeri-motion:280ms;--aeri-header-height:142px}
/* Removed with the P1 reskin, each because nothing consumed it: --aeri-navy and --aeri-metal had
 * zero consumers, and --aeri-mineral-deep was a duplicate of --aeri-gray read in one place behind a
 * fallback to --aeri-gray. The alias group is still large: moss, moss-dark and charcoal all resolve
 * to #111111, and clay to orange, kept because separate files and admin settings name them. */
/* Lime as TEXT. #c8f000 scores 1.32:1 on white, so it can never be a text colour on a light
 * surface; the storefront had grown five ad-hoc dark-olive substitutes (#909514, #9b9f00,
 * #8a8d00, #949600, #7b7f00) for exactly that job, and two of them failed even the 3.0:1
 * large-text bar. This single value clears 4.5:1 on every surface in the palette - white 5.71,
 * mineral 5.22, gray 4.63 - so rules that need legible lime-family text use it instead.
 * For lime as a FILL, pair it with black text (14.32:1); never white (1.32:1). */
:root{--aeri-lime-text:#676b00}
/* Clay as TEXT on light surfaces. #f06a2e measures 3.08:1 on white and 2.80:1 on the workshop
 * #f4f4f4 - fine for rules, fills and focus rings (3:1 non-text), never for small text. This is
 * the same hue darkened: 5.18:1 on white, 4.71:1 on #f4f4f4. Clay on the black plates keeps the
 * original value - it clears 6.6:1 there, so only the light-surface text rules use this token. */
:root{--aeri-clay-text:#c2410c}
/* The action palette. Every button in the storefront - Elementor, WooCommerce, the commerce
 * components and the chrome - resolves to these values, so the resting and hover treatment is
 * defined once instead of per selector list. Lime is the INVERSION accent here: it appears on
 * hover/focus over the charcoal plate, never as the resting fill. A new button family points at
 * these tokens rather than writing its own colours.
 *
 * --aeri-action-bg/fg are deliberately not the PHP-emitted tokens: those are overridden at
 * runtime from the design config, and the action palette must stay stable under that. */
:root{--aeri-action-bg:var(--aeri-black);--aeri-action-fg:#fff;--aeri-action-hover-bg:var(--aeri-lime);--aeri-action-hover-fg:var(--aeri-black);--aeri-action-radius:0}
/* Geometry scale. The storefront had grown four unrelated radii - buttons 0, chips 999px,
 * cards 12px, mega tiles 4px - with no rule behind which was which. These four steps replace
 * the literals so a component's roundness is a decision rather than an accident.
 *   none  structural plates: buttons, inputs, cards that read as panels
 *   sm    small chrome: tiles, search fields, dialogs
 *   md    content surfaces inside a panel
 *   pill  status markers only (chips, badges) - never an action */
:root{--aeri-radius-none:0;--aeri-radius-sm:4px;--aeri-radius-md:10px;--aeri-radius-pill:999px}
/* Type ramp. Headings were a single 44/36/24px step at every width, which reads as a blog
 * rather than a storefront: a product page and a homepage both got the same modest h1. Each
 * step is fluid between a floor and a ceiling, so the page keeps its proportion instead of
 * jumping at the two breakpoints it used to. Weight is 700, not 800: the display face is
 * Jost, and at 800 the counters close up at the large sizes this ramp reaches. */
:root{--aeri-type-display:clamp(44px,6.4vw,88px);--aeri-type-h1:clamp(34px,4.6vw,60px);--aeri-type-h2:clamp(28px,3.4vw,44px);--aeri-type-h3:clamp(21px,2vw,28px);--aeri-type-h4:18px;--aeri-type-lead:clamp(17px,1.5vw,21px)}
body.aeri-storefront{margin:0;background:var(--aeri-mineral);color:var(--aeri-ink);font:400 16px/1.6 Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.aeri-storefront *{box-sizing:border-box}
.aeri-storefront h1,.aeri-storefront h2,.aeri-storefront h3,.aeri-storefront h4,.aeri-storefront .elementor-heading-title{font-family:Jost,Arial,sans-serif;font-weight:700;line-height:1.06;color:var(--aeri-ink);letter-spacing:-.03em;text-transform:none}
/* Sizes come from the type ramp, which is already fluid, so the old per-breakpoint heading
 * overrides further down this file were doing the same job twice and are gone. */
.aeri-storefront h1{font-size:var(--aeri-type-h1)}.aeri-storefront h2{font-size:var(--aeri-type-h2)}.aeri-storefront h3{font-size:var(--aeri-type-h3)}.aeri-storefront h4{font-size:var(--aeri-type-h4)}
.aeri-storefront a{color:var(--aeri-ink)}
.aeri-storefront button,.aeri-storefront input,.aeri-storefront select,.aeri-storefront textarea{font-family:inherit}
.aeri-storefront button{cursor:pointer}.aeri-storefront button:disabled{cursor:not-allowed}
/* Chrome's user-agent sheet gives every <button> and <input> a resting box-shadow. Nothing in this
 * storefront floats, so the theme resets it once here. Focus rings set their own shadow and are
 * more specific, so they survive. */
.aeri-storefront :where(button,input){box-shadow:none}
/* Themes that pad every button (Astra: 15px 30px) must never squash an inline icon to 0 width. */
.aeri-storefront button>svg{flex:none}
/* Astra repaints every focused/active <button> with its palette (background #045cb4, white text) at
 * specificity 0-1-1, which outranks our single-class rules — a clicked arrow turned blue and a saved
 * heart turned white. Each AERI control now declares its resting palette once through three custom
 * properties, and the two guard rules below re-apply it, so a new button only has to declare the
 * properties instead of editing a selector list. Anchors are untouched: the theme only repaints
 * <button> (and .button), never a bare link. */
.aeri-commerce-button,.aeri-card-cart,.aeri-thumb-arrow,
.aeri-gallery-close,.aeri-gallery-prev,.aeri-gallery-next{--aeri-btn-bg:var(--aeri-black);--aeri-btn-fg:var(--aeri-lime);--aeri-btn-border:var(--aeri-black)}
/* The arrow plate lives on the inner <svg>, so those buttons stay transparent. */
.aeri-gallery-arrow{--aeri-btn-bg:transparent;--aeri-btn-fg:var(--aeri-lime);--aeri-btn-border:transparent}
.aeri-rail-arrow{--aeri-btn-bg:transparent;--aeri-btn-fg:var(--aeri-black);--aeri-btn-border:transparent}
.aeri-gallery-thumb{--aeri-btn-bg:#fff;--aeri-btn-fg:#fff;--aeri-btn-border:#ccc}
.aeri-review-photo{--aeri-btn-bg:#fff;--aeri-btn-fg:#fff;--aeri-btn-border:#ddd}
.aeri-product-action{--aeri-btn-bg:transparent;--aeri-btn-fg:var(--aeri-black);--aeri-btn-border:transparent}
.aeri-product-actions--labels .aeri-product-action{--aeri-btn-bg:transparent}
.aeri-vote,.aeri-report,.aeri-show-more,.aeri-reviews-clear,.aeri-icon-button,.aeri-saved-card-remove{--aeri-btn-bg:transparent;--aeri-btn-fg:var(--aeri-black);--aeri-btn-border:transparent}
.aeri-show-more--group{--aeri-btn-bg:var(--aeri-lime);--aeri-btn-fg:var(--aeri-black);--aeri-btn-border:var(--aeri-lime)}
.aeri-filter-toggle{--aeri-btn-bg:var(--aeri-black);--aeri-btn-fg:#fff;--aeri-btn-border:#777}
.aeri-clear-filters{--aeri-btn-bg:#6d6d6d;--aeri-btn-fg:#fff;--aeri-btn-border:transparent}
.aeri-clear-filters.is-idle{--aeri-btn-bg:#9a9a9a}
.aeri-storefront button[class*="aeri-"]:focus,.aeri-storefront button[class*="aeri-"]:active{background-color:var(--aeri-btn-bg,transparent);color:var(--aeri-btn-fg,inherit);border-color:var(--aeri-btn-border,currentColor)}
/* State modifiers keep their own look while focused (the saved heart is solid, never a lime plate). */
.aeri-storefront .aeri-product-action[aria-pressed=true]:focus,.aeri-storefront .aeri-product-action[aria-pressed=true]:active{background-color:var(--aeri-btn-bg,transparent);color:var(--aeri-btn-fg,inherit)}
.aeri-storefront .aeri-gallery-thumb[aria-pressed=true]:focus,.aeri-storefront .aeri-gallery-thumb[aria-pressed=true]:active{border-color:var(--aeri-black)}
/* Prose links carry a 2px top rule, not a button plate. */
.aeri-storefront a.aeri-commerce-text-link:focus,.aeri-storefront a.aeri-commerce-text-link:active{background-color:transparent;color:var(--aeri-lime);border-color:var(--aeri-lime)}
/* WooCommerce's add-to-cart button has no aeri- class, so it keeps an explicit guard. */
.aeri-storefront .aeri-commerce button.button:focus,.aeri-storefront .aeri-commerce button.button:active,
.aeri-storefront .aeri-commerce .single_add_to_cart_button:focus,.aeri-storefront .aeri-commerce .single_add_to_cart_button:active{background-color:var(--aeri-black)!important;color:var(--aeri-lime)!important;border-color:var(--aeri-black)!important}
/* Astra's WooCommerce grid stylesheet repaints a disabled add-to-cart button blue while the AJAX
 * request runs (.woocommerce-js button.button.alt:disabled); keep the storefront palette instead. */
.aeri-storefront .aeri-commerce button.button.alt:disabled,.aeri-storefront .aeri-commerce button.button.alt:disabled:hover,
.aeri-storefront .aeri-commerce .single_add_to_cart_button:disabled,.aeri-storefront .aeri-commerce .single_add_to_cart_button:disabled:hover,
.aeri-storefront .aeri-commerce button.button:disabled,.aeri-storefront .aeri-commerce button.button:disabled:hover{background-color:var(--aeri-black);color:var(--aeri-lime);border-color:var(--aeri-black);opacity:.85}
.aeri-storefront a:focus-visible,.aeri-storefront button:focus-visible,.aeri-storefront input:focus-visible,.aeri-storefront select:focus-visible,.aeri-storefront textarea:focus-visible,.aeri-storefront summary:focus-visible{outline:3px solid var(--aeri-clay);outline-offset:4px;box-shadow:0 0 0 1px var(--aeri-moss-dark)}
/* Arrow buttons are icon-sized, so the offset lime ring read as a stray green box around them;
 * they show keyboard focus by inverting the plate instead (see the component styles). */
.aeri-storefront .aeri-gallery-arrow:focus-visible,.aeri-storefront .aeri-thumb-arrow:focus-visible,.aeri-storefront .aeri-rail-arrow:focus-visible{outline:0;box-shadow:none}
/* The rings above are for keyboard navigation, but iOS Safari also matches :focus-visible after a
 * tap, so every button pressed on a phone wore a 3px orange box. storefront.js records the last
 * input modality; pointer input drops the ring and the native tap highlight. */
:root{-webkit-tap-highlight-color:transparent}
html[data-aeri-input=pointer] :focus-visible{outline:0!important;box-shadow:none!important}
/* Catalog category circles: the ring keeps its size while the product picture grows past it. */
.aeri-storefront .aeri-category-circle-image{overflow:hidden;border-radius:50%;display:flex;align-items:center;justify-content:center}
.aeri-storefront .aeri-category-circle-image img{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply;transform-origin:center;transition:scale var(--aeri-motion) var(--aeri-ease)}
@media(hover:hover) and (pointer:fine){
.aeri-storefront .aeri-category-circles>a:hover .aeri-category-circle-image img{scale:1.1}
}
.aeri-storefront .aeri-category-circles>a:focus-visible .aeri-category-circle-image img{scale:1.1}
.aeri-storefront img{max-width:100%;height:auto}
.aeri-storefront .elementor-widget:not(:last-child){margin-block-end:0}
.aeri-storefront .elementor{--e-global-color-primary:var(--aeri-black);--e-global-color-secondary:var(--aeri-lime);--e-global-color-text:var(--aeri-ink);--e-global-color-accent:var(--aeri-lime);--e-global-typography-primary-font-family:Jost;--e-global-typography-text-font-family:Roboto;--widgets-spacing:0px}
.aeri-storefront .elementor-button,.aeri-storefront .aeri-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 25px;border-radius:var(--aeri-action-radius);border:1px solid var(--aeri-action-bg);background:var(--aeri-action-bg);color:var(--aeri-action-fg);text-decoration:none;font:700 16px/1.2 Jost,Arial,sans-serif;transition:background var(--aeri-motion) var(--aeri-ease),color var(--aeri-motion) var(--aeri-ease),border-color var(--aeri-motion) var(--aeri-ease)}
.aeri-storefront .elementor-button:hover,.aeri-storefront .aeri-btn:hover{background:var(--aeri-action-hover-bg);color:var(--aeri-action-hover-fg);border-color:var(--aeri-action-hover-bg)}
.aeri-main{min-height:55vh}.aeri-standard-page{max-width:var(--aeri-max);margin:0 auto;padding:48px var(--aeri-gutter) 90px;min-height:50vh}
.aeri-standard-page>h1{margin:0 0 36px}.aeri-breadcrumb-wrap{max-width:var(--aeri-max);margin:0 auto;padding:24px var(--aeri-gutter) 8px;font-size:13px}
.aeri-storefront .aeri-product-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;max-width:var(--aeri-max);margin:auto;padding:24px var(--aeri-gutter) 56px}
.aeri-storefront .aeri-product-gallery-col,.aeri-storefront .aeri-product-buybox-col{min-width:0}
.aeri-storefront .aeri-template-wrap{padding:0;gap:0;max-width:none;width:100%}
.aeri-skip-link{position:fixed;top:-100px;left:20px;background:var(--aeri-lime);color:var(--aeri-black);z-index:999999;padding:15px}.aeri-skip-link:focus{top:10px}
.aeri-storefront [hidden]{display:none!important}.aeri-storefront dialog::backdrop{background:rgba(0,0,0,.65)}
.aeri-storefront .woocommerce input.input-text,.aeri-storefront .woocommerce select,.aeri-storefront .woocommerce textarea,.aeri-storefront .wc-block-components-text-input input{border:1px solid #b9b9b9;border-radius:0;background:white;color:var(--aeri-ink);min-height:46px}
.aeri-storefront .woocommerce a.button,.aeri-storefront .woocommerce button.button,.aeri-storefront .woocommerce input.button,.aeri-storefront .wc-block-components-button:not(.is-link){font-family:Jost,Arial,sans-serif;font-weight:700;background:var(--aeri-action-bg);color:var(--aeri-action-fg);border-color:var(--aeri-action-bg);transition:background .3s,color .3s}
.aeri-storefront .woocommerce a.button:hover,.aeri-storefront .woocommerce button.button:hover,.aeri-storefront .wc-block-components-button:not(.is-link):hover{background:var(--aeri-lime);color:var(--aeri-black)}
.aeri-storefront .woocommerce-message,.aeri-storefront .woocommerce-info{border-top-color:var(--aeri-black);background:#f3f3f3;color:var(--aeri-ink)}.aeri-storefront .woocommerce-message:before,.aeri-storefront .woocommerce-info:before{color:var(--aeri-black)}
.aeri-storefront .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--aeri-line)}.aeri-storefront .woocommerce-MyAccount-navigation a{display:block;padding:14px 18px;border-bottom:1px solid var(--aeri-line);font-weight:700;text-decoration:none}
.aeri-storefront .wc-block-cart,.aeri-storefront .wc-block-checkout{font-family:Roboto,Arial,sans-serif}.aeri-storefront .wc-block-components-sidebar{background:#f3f3f3;padding:24px}.aeri-storefront .wc-block-cart-items__header,.aeri-storefront .wc-block-components-title{font-family:Jost,Arial,sans-serif;font-weight:800;text-transform:uppercase}
@media(max-width:1279px){:root{--aeri-gutter:24px;--aeri-header-height:112px}}
@media(max-width:1023px){.aeri-storefront .aeri-product-top{grid-template-columns:minmax(0,1fr);gap:30px}}
@media(max-width:767px){:root{--aeri-gutter:16px;--aeri-header-height:110px}.aeri-standard-page{padding-top:28px;padding-bottom:56px}.aeri-storefront .aeri-product-top{padding-top:16px;padding-bottom:32px}.aeri-breadcrumb-wrap{font-size:11px;padding-top:16px}.aeri-storefront .wc-block-components-sidebar{padding:16px}}
@media(prefers-reduced-motion:reduce){.aeri-storefront *,.aeri-storefront *:before,.aeri-storefront *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
/* Reduced motion flattens everything above; the allow-list below is the whole set of motions the
 * storefront keeps on purpose. They are short and they carry meaning - a slide change, a hover
 * affordance - and without them the component reads as broken rather than as calmer. Add a new
 * component here instead of opening a second reduced-motion block in its own stylesheet. */
.aeri-storefront .aeri-gallery-current,.aeri-storefront .aeri-gallery-incoming{transition:opacity 320ms ease-out,transform 320ms ease-out!important}
.aeri-storefront .aeri-product-card{transition:transform 260ms var(--aeri-ease),box-shadow 260ms var(--aeri-ease),border-color 260ms var(--aeri-ease)!important}
.aeri-storefront .aeri-rail-arrow{transition:width 280ms cubic-bezier(.4,0,.2,1)!important}
/* Category circles keep the same motion as every other card image in the storefront. */
.aeri-storefront .aeri-category-circle-image img{transition:scale var(--aeri-motion) var(--aeri-ease)!important}}

/* Surfaces. The button palette is defined once at the top of this file through the
 * --aeri-action-* tokens; the previous orange override block that lived here was removed with
 * the P1 reskin, because it re-declared the same selectors and made the tokens unreachable. */
.aeri-storefront .elementor,.aeri-storefront .aeri-standard-page{background:var(--aeri-mineral)}
/* Chips are state markers, not actions: they keep the accent fill that a button gives up. */
.aeri-storefront .aeri-card-chips span{background:var(--aeri-signal-lime);color:var(--aeri-charcoal);border-radius:0;text-transform:uppercase}
.aeri-storefront .aeri-card-chips small{background:var(--aeri-gray);color:var(--aeri-ink);border-radius:0}
/* The resting plate for component buttons. The --aeri-btn-* properties above only feed the
 * :focus/:active guards, so without this rule a component button has no resting background of
 * its own and Astra's WooCommerce stylesheet paints one (#046bd2) instead. !important is
 * required: Astra's selector for the cart button is more specific than a single class. */
.aeri-storefront .aeri-commerce-button,.aeri-storefront .aeri-card-cart,.aeri-storefront .aeri-chrome-button{background:var(--aeri-action-bg)!important;color:var(--aeri-action-fg)!important;border-color:var(--aeri-action-bg)!important}
.aeri-storefront .aeri-commerce-button:hover,.aeri-storefront .aeri-card-cart:hover,.aeri-storefront .aeri-chrome-button:hover{background:var(--aeri-action-hover-bg)!important;color:var(--aeri-action-hover-fg)!important;border-color:var(--aeri-action-hover-bg)!important}
/* Legacy alias: kept so an older template that still emits it is not left unstyled. */
.aeri-storefront .aeri-skip-link{background:var(--aeri-action-bg);color:#fff!important}
/* The action palette reaches WooCommerce's own buttons through their generic selectors, since
 * those carry no aeri- class and cannot inherit the component rules. */
.aeri-storefront .woocommerce a.button,.aeri-storefront .woocommerce button.button,.aeri-storefront .woocommerce input.button,.aeri-storefront .wc-block-components-button:not(.is-link){background:var(--aeri-action-bg);color:var(--aeri-action-fg);border-color:var(--aeri-action-bg)}
.aeri-storefront .woocommerce a.button:hover,.aeri-storefront .woocommerce button.button:hover,.aeri-storefront .woocommerce input.button:hover,.aeri-storefront .wc-block-components-button:not(.is-link):hover{background:var(--aeri-action-hover-bg);color:var(--aeri-action-hover-fg);border-color:var(--aeri-action-hover-bg)}
.aeri-storefront .aeri-commerce button.button:focus,.aeri-storefront .aeri-commerce button.button:active,.aeri-storefront .aeri-commerce .single_add_to_cart_button:focus,.aeri-storefront .aeri-commerce .single_add_to_cart_button:active{background:var(--aeri-action-bg)!important;color:var(--aeri-action-fg)!important;border-color:var(--aeri-action-bg)!important}
.aeri-storefront .aeri-commerce button.button:disabled,.aeri-storefront .aeri-commerce button.button:disabled:hover,.aeri-storefront .aeri-commerce .single_add_to_cart_button:disabled,.aeri-storefront .aeri-commerce .single_add_to_cart_button:disabled:hover{background:var(--aeri-charcoal)!important;color:var(--aeri-signal-lime)!important;border-color:var(--aeri-charcoal)!important}