/**
 * Groxx header-nav widgets — search bar + cart.
 *
 * Self-contained: each value uses a portal --grx-* token with a literal fallback,
 * so the widgets render correctly in the theme header whether or not portal.css
 * is also loaded on the page. grx-* BEM-lite, no utility classes (CLAUDE.md #9).
 * Font sizes never drop below 13px (xs) per the elderly-friendly minimum.
 */

/* ── Search ─────────────────────────────────────────────────────────────── */
.grx-wsearch {
  /* Chrome variables (colour/height/radius). Width + max-width are NOT set here —
     the component always fills its container, and sizing is owned by the parent:
     the Elementor wrapper (via controls), an inline style, or the shortcode's own
     max-width rule below. This is the native Elementor pattern: wrapper sizes the
     box, content fills it — so Width / Max width behave like every other widget. */
  --grx-wsearch-height: 48px;
  --grx-wsearch-radius: 12px;
  --grx-wsearch-field-bg: rgba(255, 255, 255, 0.12);
  --grx-wsearch-field-bg-focus: rgba(255, 255, 255, 0.18);
  --grx-wsearch-text: #ffffff;
  --grx-wsearch-placeholder: rgba(255, 255, 255, 0.6);
  --grx-wsearch-icon: #ffffff;

  position: relative;
  display: block;
  width: 100%;
  max-width: 480px;   /* shortcode default; Elementor sizes via {{WRAPPER}} instead */
  font-family: inherit;   /* follow the Elementor / theme global font (e.g. Neue Haas) */
}

/* Inside an Elementor widget, let the wrapper own width/max-width — the field
   fills whatever box the Width / Max width controls set on the wrapper. */
.elementor-widget-groxx-search .grx-wsearch { max-width: none; }

/* Borderless soft-rounded field with a leading icon. No submit button, no clear —
   Enter searches. !important throughout: the active theme/Elementor adds borders
   and text colour to bare form/input/button elements; single-class rules lose to
   that cascade, so the chrome we explicitly want is forced. */
.grx-wsearch__form {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: var(--grx-wsearch-height);
  margin: 0 !important;
  padding: 0 14px !important;
  background: var(--grx-wsearch-field-bg) !important;
  border: 0 !important;
  border-radius: var(--grx-wsearch-radius) !important;
  box-shadow: none !important;
  transition: background 140ms;
}
.grx-wsearch__form:focus-within {
  background: var(--grx-wsearch-field-bg-focus) !important;
}

.grx-wsearch__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--grx-wsearch-icon);
  pointer-events: none;
}
.grx-wsearch__icon .grx-wsearch__svg,
.grx-wsearch__icon svg { width: 20px; height: 20px; }

.grx-wsearch__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--grx-text-sm, 15px);
  font-weight: 500;
  color: var(--grx-wsearch-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.grx-wsearch__input::placeholder { color: var(--grx-wsearch-placeholder) !important; font-weight: 500; opacity: 1; }
/* Suppress the browser's native search clear/cancel control. */
.grx-wsearch__input::-webkit-search-cancel-button,
.grx-wsearch__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ── Dropdown panel ──────────────────────────────────────────────────────── */
.grx-wsearch__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--grx-color-white, #fff);
  border: 1px solid var(--grx-color-gray-200, #e8e8ed);
  border-radius: var(--grx-radius-lg, 14px);
  box-shadow: var(--grx-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.14));
  padding: var(--grx-space-3, 12px);
}

/* Icon-only search trigger — bare glyph, no button box/border/background, matching
   the Hero slider nav arrows (.grx-hero__arrow): just a glyph that shifts colour/opacity
   on hover. Opens the modal below; does not itself hold any dropdown. */
.grx-wsearch-icon {
  /* Default lives in the var()'s fallback, NOT redeclared here — a custom property
     declared directly on the element it's read from always wins over an ancestor's
     override (e.g. MadHeader's .mh-elem--widget), which silently defeated any attempt
     to theme this from outside. Same fix applied to .grx-wlogin's --grx-wlogin-icon. */
  --grx-wsearch-icon-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--grx-wsearch-icon-size);
  height: var(--grx-wsearch-icon-size);
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  color: var(--grx-wsearch-icon-color, currentColor);
  opacity: .85;
  transition: opacity 140ms, color 140ms;
}
.grx-wsearch-icon:hover,
.grx-wsearch-icon:focus-visible { opacity: 1; }
/* Icon_Loader wraps the SVG in a bare <span> with no sizing of its own — inline SVG
   sits on the text baseline by default, which reads as "pushed down" next to other
   flex-centred icons. Make the span itself a flex box the same size as the button so
   the glyph centres exactly like every other .mh-elem icon. */
.grx-wsearch-icon__svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.grx-wsearch-icon__svg svg,
.grx-wsearch-icon svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Search modal (icon trigger's dropdown target) ───────────────────────────
   TRUE full-screen overlay (not a centred card) — the search field sits large and
   prominent near the top, with results/suggestions filling the remaining screen
   below it, similar to a native app "search everything" overlay. ── */
body.grx-wsearch-modal-open { overflow: hidden; }
.grx-wsearch-modal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above admin bar, Elementor sticky headers, MadHeader's own drawer */
  display: flex;
  flex-direction: column;
  background: var(--grx-color-white, #fff);
}
.grx-wsearch-modal[hidden] { display: none; }

.grx-wsearch-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: var(--grx-space-5, 24px) var(--grx-space-4, 20px);
}

/* Position (left/right) and style (cross/arrow) are both configurable — no fixed header
   layout is assumed, so a deployment with the menu/logo/icons arranged differently can
   put this wherever it reads naturally instead of always top-right. */
.grx-wsearch-modal__close {
  position: absolute;
  top: var(--grx-space-4, 20px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  color: var(--grx-color-gray-500, #767676);
  opacity: .8;
  transition: opacity 140ms, color 140ms;
}
.grx-wsearch-modal__close--right { right: var(--grx-space-4, 20px); }
.grx-wsearch-modal__close--left  { left: var(--grx-space-4, 20px); }
.grx-wsearch-modal__close:hover,
.grx-wsearch-modal__close:focus-visible {
  opacity: 1;
  color: var(--grx-color-brand-red, #bf0000);
}
/* Bare CSS-drawn glyphs — no bundled icon dependency (matches the minimal-glyph pattern
   used elsewhere; there is no bundled close/x/arrow icon in the Lucide set shipped here).
   Cross: an "×" made of two crossed bars. Arrow: a chevron + shaft, pointing OUTWARD
   toward its own side (left button → points left, right button → points right) so it
   always reads as "dismiss this way", never as a mirrored/backwards glyph. */
.grx-wsearch-modal__closeicon { position: relative; width: 18px; height: 18px; display: inline-block; }
.grx-wsearch-modal__close--cross .grx-wsearch-modal__closeicon::before,
.grx-wsearch-modal__close--cross .grx-wsearch-modal__closeicon::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.grx-wsearch-modal__close--cross .grx-wsearch-modal__closeicon::before { transform: translateY(-50%) rotate(45deg); }
.grx-wsearch-modal__close--cross .grx-wsearch-modal__closeicon::after  { transform: translateY(-50%) rotate(-45deg); }

.grx-wsearch-modal__close--arrow .grx-wsearch-modal__closeicon::before,
.grx-wsearch-modal__close--arrow .grx-wsearch-modal__closeicon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
/* Shaft: a horizontal bar spanning most of the icon's width. */
.grx-wsearch-modal__close--arrow .grx-wsearch-modal__closeicon::before {
  top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%);
}
/* Chevron: a short bar rotated to form the arrowhead at the outward end. */
.grx-wsearch-modal__close--arrow .grx-wsearch-modal__closeicon::after {
  top: 50%; width: 9px; height: 2px;
}
.grx-wsearch-modal__close--arrow.grx-wsearch-modal__close--left .grx-wsearch-modal__closeicon::after {
  left: 0; transform-origin: left center; transform: translateY(-50%) rotate(45deg);
}
.grx-wsearch-modal__close--arrow.grx-wsearch-modal__close--right .grx-wsearch-modal__closeicon::after {
  right: 0; left: auto; transform-origin: right center; transform: translateY(-50%) rotate(-45deg);
}

/* The modal's own .grx-wsearch fills the panel: field on top (large, prominent, its own
   full-width row with room for the close button), dropdown content filling the rest of
   the screen below it — no absolute positioning/anchoring math needed since the panel
   is already the modal's whole content area. */
.grx-wsearch--modal {
  max-width: none;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.grx-wsearch--modal {
  /* Field vars are designed for a dark header bar by default (white text on a
     translucent-white pill); override for the modal's light, full-screen context so
     the field is clearly visible AND reads as prominent/large, per the "search bar
     field on top clearly" requirement. */
  --grx-wsearch-height: 64px;
  --grx-wsearch-field-bg: var(--grx-color-gray-100, #f5f5f7);
  --grx-wsearch-field-bg-focus: var(--grx-color-gray-100, #f5f5f7);
  --grx-wsearch-text: var(--grx-color-gray-900, #1f1f24);
  --grx-wsearch-placeholder: var(--grx-color-gray-400, #a1a1a6);
  --grx-wsearch-icon: var(--grx-color-gray-500, #767676);
}
.grx-wsearch--modal .grx-wsearch__form {
  flex: 0 0 auto;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
/* Field clearance matches whichever side the close control actually renders on. */
.grx-wsearch-modal__panel--close-right .grx-wsearch--modal .grx-wsearch__form { padding-right: 48px !important; }
.grx-wsearch-modal__panel--close-left  .grx-wsearch--modal .grx-wsearch__form { padding-left: 48px !important; }
.grx-wsearch--modal .grx-wsearch__input { font-size: 20px !important; font-weight: 600; }
.grx-wsearch--modal .grx-wsearch__icon,
.grx-wsearch--modal .grx-wsearch__icon svg { width: 24px; height: 24px; }
.grx-wsearch--modal .grx-wsearch__panel {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 720px;
  margin: var(--grx-space-4, 20px) auto 0;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-height: none;
}

.grx-wsearch__sect + .grx-wsearch__sect {
  margin-top: var(--grx-space-3, 12px);
  padding-top: var(--grx-space-3, 12px);
  border-top: 1px solid var(--grx-color-gray-100, #f5f5f7);
}

.grx-wsearch__secttitle {
  margin: 0 0 var(--grx-space-2, 8px);
  font-size: var(--grx-text-xs, 13px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grx-color-gray-400, #a1a1a6);
}

/* Trending chips */
.grx-wsearch__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--grx-space-2, 8px);
}
.grx-wsearch__chip {
  display: inline-block;
  padding: 6px 12px;
  font-size: var(--grx-text-xs, 13px);
  color: var(--grx-color-gray-800, #333);
  background: var(--grx-color-gray-100, #f5f5f7);
  border-radius: var(--grx-radius-pill, 999px);
  text-decoration: none;
  transition: background 140ms, color 140ms;
}
.grx-wsearch__chip:hover {
  background: var(--grx-color-brand-red, #bf0000);
  color: var(--grx-color-white, #fff);
}

/* Category list — each row carries a representative image (category thumbnail,
   else first product's image), mirroring the portal Style #1 category cards. */
.grx-wsearch__cats { list-style: none; margin: 0; padding: 0; }
.grx-wsearch__cat {
  display: flex;
  align-items: center;
  gap: var(--grx-space-3, 12px);
  padding: 7px 8px;
  border-radius: var(--grx-radius-md, 10px);
  text-decoration: none;
  color: var(--grx-color-gray-900, #1d1d1f);
  font-size: var(--grx-text-sm, 15px);
  transition: background 120ms;
}
.grx-wsearch__cat:hover { background: var(--grx-color-gray-100, #f5f5f7); }
.grx-wsearch__catimg {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--grx-radius-sm, 6px);
  overflow: hidden;
  background: var(--grx-color-gray-100, #f5f5f7);
}
.grx-wsearch__catimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grx-wsearch__catname {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grx-wsearch__catcount {
  flex: 0 0 auto;
  font-size: var(--grx-text-xs, 13px);
  color: var(--grx-color-gray-500, #767676);
}
.grx-wsearch__catchev {
  flex: 0 0 auto;
  font-size: var(--grx-text-sm, 15px);
  line-height: 1;
  color: var(--grx-color-gray-400, #a1a1a6);
  transition: transform 120ms, color 120ms;
}
.grx-wsearch__cat:hover .grx-wsearch__catchev {
  color: var(--grx-color-brand-red, #bf0000);
  transform: translateX(2px);
}

/* Live results */
.grx-wsearch__loading,
.grx-wsearch__empty {
  margin: 0;
  padding: var(--grx-space-3, 12px);
  font-size: var(--grx-text-sm, 15px);
  color: var(--grx-color-gray-500, #767676);
  text-align: center;
}

.grx-wsearch__hits { list-style: none; margin: 0; padding: 0; }
.grx-wsearch__hit {
  display: flex;
  align-items: center;
  gap: var(--grx-space-3, 12px);
  padding: 8px 10px;
  border-radius: var(--grx-radius-md, 10px);
  text-decoration: none;
  color: var(--grx-color-gray-900, #1d1d1f);
}
.grx-wsearch__hit:hover { background: var(--grx-color-gray-100, #f5f5f7); }
.grx-wsearch__hitthumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--grx-radius-sm, 6px);
  overflow: hidden;
  background: var(--grx-color-gray-100, #f5f5f7);
}
.grx-wsearch__hitthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Text column: SKU small + grey on top, product name big + bold + black below. */
.grx-wsearch__hittext {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.grx-wsearch__hitsku {
  font-size: var(--grx-text-xs, 13px);
  font-weight: 500;
  color: var(--grx-color-gray-500, #767676);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.grx-wsearch__hitname {
  font-size: var(--grx-text-base, 16px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--grx-color-gray-900, #1d1d1f);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.grx-wsearch__hitprice {
  flex: 0 0 auto;
  align-self: center;
  font-size: var(--grx-text-sm, 15px);
  font-weight: 600;
  color: var(--grx-color-gray-900, #1d1d1f);
  white-space: nowrap;
}

.grx-wsearch__seeall {
  display: block;
  margin-top: var(--grx-space-2, 8px);
  padding: 10px;
  text-align: center;
  font-size: var(--grx-text-xs, 13px);
  font-weight: 600;
  color: var(--grx-color-brand-red, #bf0000);
  text-decoration: none;
  border-top: 1px solid var(--grx-color-gray-200, #e8e8ed);
}
.grx-wsearch__seeall:hover { text-decoration: underline; }

/* ── Cart ───────────────────────────────────────────────────────────────── */
/* White by default (the theme's own dark header), with no hover shift. Themeable via
   --grx-wcart-icon so an embedding context (e.g. MadHeader) can override it — same
   variable convention as .grx-wsearch-icon's --grx-wsearch-icon-color, just defaulting
   to a literal white instead of currentColor so every existing deployment looks
   unchanged unless something explicitly sets the variable. !important beats the
   theme's link-colour rules that otherwise tint the cart on hover/visited.

   Box-chrome variables (height/padding/radius/border/background) mirror .grx-wlogin's
   convention so an embedding context can turn Cart into a matching bordered "button" —
   e.g. MadHeader's drawer-widget row pairs it next to Login. All default to a no-op
   (auto/0/transparent) so a bare Cart link looks exactly as it always has unless
   something explicitly sets these variables. */
.grx-wcart,
.grx-wcart:hover,
.grx-wcart:focus,
.grx-wcart:visited {
  display: inline-flex;
  align-items: center;
  justify-content: var(--grx-wcart-justify, flex-start);
  gap: var(--grx-space-2, 8px);
  text-decoration: none;
  color: var(--grx-wcart-icon, #ffffff) !important;
  font-size: var(--grx-text-sm, 15px);
  font-weight: 500;
  box-sizing: border-box;
  height: var(--grx-wcart-height, auto);
  padding: 0 var(--grx-wcart-padding-x, 0);
  border-radius: var(--grx-wcart-radius, 0) !important;
  border: var(--grx-wcart-border, 0) !important;
  background: var(--grx-wcart-bg, transparent) !important;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.grx-wcart__iconwrap {
  position: relative;
  display: inline-flex;
  width: 26px;
  height: 26px;
}
.grx-wcart__icon,
.grx-wcart__iconwrap svg { width: 24px; height: 24px; }

.grx-wcart__count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;          /* badge digit — intentionally small, non-body text */
  font-weight: 700;
  line-height: 1;
  color: var(--grx-color-white, #fff);
  background: var(--grx-color-brand-red, #bf0000);
  border-radius: var(--grx-radius-pill, 999px);
}
.grx-wcart__count.is-empty { display: none; }

/* ── Login / account button ─────────────────────────────────────────────── */
.grx-wlogin {
  /* Variable-driven chrome — Elementor controls override these per instance.
     Defaults use the same hover sweep as portal buttons: red into yellow. */
  --grx-wlogin-height: 44px;
  --grx-wlogin-radius: 4px !important;
  --grx-wlogin-bg: var(--grx-color-brand-red, #bf0000);
  --grx-wlogin-bg-hover: var(--grx-color-brand-yellow, #fbb03b);
  --grx-wlogin-text: #ffffff;
  --grx-wlogin-text-hover: #111111;
  --grx-wlogin-icon: #ffffff;
  --grx-wlogin-border: transparent !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--grx-wlogin-height);
  padding: 0 18px;
  font-size: var(--grx-text-sm, 15px) !important;
  font-weight: 600;
  line-height: 1;
  color: var(--grx-wlogin-text) !important;
  background: var(--grx-wlogin-bg) !important;
  background-clip: padding-box !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  box-shadow: none !important;
  transition: color 160ms ease;
}
.grx-wlogin::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--grx-wlogin-bg-hover);
  border-radius: inherit;
  transition: width 420ms cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1;
}
.grx-wlogin:hover,
.grx-wlogin:focus {
  color: var(--grx-wlogin-text-hover) !important;
  border-color: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.grx-wlogin:hover::before,
.grx-wlogin:focus::before { width: 100%; }
.grx-wlogin:visited { color: var(--grx-wlogin-text) !important; }
.grx-wlogin:hover:visited,
.grx-wlogin:focus:visited { color: var(--grx-wlogin-text-hover) !important; }

.grx-wlogin__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--grx-wlogin-icon);
  transition: color 160ms ease;
}
.grx-wlogin:hover .grx-wlogin__icon,
.grx-wlogin:focus .grx-wlogin__icon { color: var(--grx-wlogin-text-hover); }
.grx-wlogin__icon .grx-wlogin__svg,
.grx-wlogin__icon svg { width: 18px; height: 18px; }

.grx-wlogin__label { display: inline-block; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 782px) {
  .grx-wsearch { max-width: 100%; }
  .grx-wcart__label { display: none; }  /* icon + badge only on small screens */
}

/* ── Product breadcrumbs ─────────────────────────────────────────────────── */
.grx-pcrumbs {
  --grx-pcrumb-max: 1600px;
  --grx-pcrumb-text: var(--grx-color-gray-900, #1f1f24);
  --grx-pcrumb-style: var(--grx-color-brand-red, #bf0000);
  --grx-pcrumb-muted: var(--grx-color-gray-500, #767676);
  --grx-pcrumb-sep-size: 18px;
  --grx-pcrumb-sep-space: 5px;
  --grx-pcrumb-sep-y: 1px;

  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--grx-pcrumb-text);
  font-family: inherit;   /* follow the Elementor / theme global font (e.g. Neue Haas) */
  font-size: var(--grx-text-xs, 13px);
  font-weight: 600;
  line-height: 1.4;
}
.grx-pcrumbs__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  max-width: var(--grx-pcrumb-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}
.grx-pcrumbs__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--grx-pcrumb-muted);
}
.grx-pcrumbs__link,
.grx-pcrumbs__link:visited {
  display: inline-flex;
  align-items: center;
  color: var(--grx-pcrumb-text) !important;
  text-decoration: none !important;
  transition: color 140ms ease;
}
.grx-pcrumbs__link:hover,
.grx-pcrumbs__link:focus {
  color: var(--grx-pcrumb-style) !important;
  text-decoration: none !important;
}
.grx-pcrumbs__home-icon,
.grx-pcrumbs__home-icon svg {
  width: 16px;
  height: 16px;
}
.grx-pcrumbs__home-icon {
  display: inline-flex;
  color: currentColor;
}
.grx-pcrumbs__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.grx-pcrumbs__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: var(--grx-pcrumb-sep-size);
  height: var(--grx-pcrumb-sep-size);
  margin: 0 var(--grx-pcrumb-sep-space);
  color: var(--grx-pcrumb-style);
  font-size: var(--grx-pcrumb-sep-size);
  font-weight: 300;
  line-height: 1;
}
.grx-pcrumbs__sep-glyph {
  display: block;
  line-height: 1;
  transform: translateY(var(--grx-pcrumb-sep-y));
}

/* ════════════════════════════════════════════════════════════════════════════
   Hero slider — DeWalt-style full-screen carousel
   ════════════════════════════════════════════════════════════════════════════ */
.grx-hero {
  --grx-hero-offset: 0px;       /* optional header height to subtract */
  --grx-hero-min-h: 600px;      /* THE height control (set via "Minimum height") */
  --grx-hero-content-w: 560px;
  --grx-hero-nav-color: #ffffff;
  --grx-hero-nav-accent: #bf0000;

  position: relative;
  width: 100%;
  /* DEFINITE height (driven by the Height control) — NOT min-height. A min-height
     leaves the height "auto", so the track/slide/image `height:100%` chain can't
     resolve and the image collapses to its natural size (doesn't cover). An explicit
     height makes the % chain resolve, so the image always fills the hero. A small
     min-height is just a collapse safety net. */
  height: calc(var(--grx-hero-min-h) - var(--grx-hero-offset));
  min-height: 320px;
  overflow: hidden;
  background: #000;
}
.grx-hero--empty {
  display: flex; align-items: center; justify-content: center;
  height: auto; min-height: 160px; padding: 40px;
  color: var(--grx-color-gray-500, #767676); background: var(--grx-color-gray-100, #f5f5f7);
}

/* Full-width breakout: span the whole viewport regardless of the Elementor column
   the widget sits in — and regardless of that column's own padding/max-width. We
   anchor to the viewport centre (left:50% + margin-left:-50vw) rather than the
   parent (calc(50% - 50vw)), so the hero is always truly centred on the screen.
   Because it IS centred on the viewport, the inner 1600px container then lines up
   with a header whose 1600px container is likewise centred on the viewport. */
.grx-hero-fw-yes .grx-hero,
.grx-hero-fw-yes.elementor-widget-groxx-hero {
  position: relative;
  /* 100vw includes the scrollbar and can cause a tiny horizontal scroll on the
     page; subtracting any scrollbar gap and clipping keeps it edge-to-edge with no
     overflow. The hero itself clips its children below. */
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.grx-hero { --grx-hero-speed: 2000ms; }
.grx-hero { overflow: hidden; }          /* hard guard: nothing escapes the hero box */
/* touch-action: pan-y lets the browser keep handling vertical page scroll natively while
   ceding the horizontal axis to JS (swipe-to-navigate) — without this, a horizontal drag
   gesture fights the browser's own touch scrolling/zoom heuristics on mobile. */
.grx-hero__viewport { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }

/* In the Elementor editor the canvas is already a constrained device frame, so the
   100vw breakout would push the hero off-centre (the vw is the whole editor window,
   not the device). Neutralise the breakout in edit mode so the preview is accurate. */
.grx-hero--editor.grx-hero,
.grx-hero--editor .grx-hero {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important; right: auto !important;
  margin-left: 0 !important; margin-right: 0 !important;
}

/* ── PUSH (default): one flex track of full-width slides; the JS translates the
   whole track by -index * 100%. Both neighbouring images are always on-screen
   during the move, so it's a true two-image push with no flash. (Swiper model.) */
.grx-hero__track {
  display: flex !important;     /* a theme/stale rule must not change this layout */
  flex-wrap: nowrap !important;
  height: 100%;
  width: 100%;
  will-change: transform;
  transform: translate3d(var(--grx-hero-tx, 0%), 0, 0);
  transition: transform var(--grx-hero-speed) cubic-bezier(.22,.61,.36,1);
}
.grx-hero__track.is-instant { transition: none !important; }  /* for loop jumps */

/* Each slide is EXACTLY the viewport width and cannot shrink — !important + a
   min-width floor so neither a flex default, a theme rule, nor a stale cached
   stylesheet can collapse them into a side-by-side row. */
.grx-hero__slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  position: relative;
}

/* ── FADE: collapse the track (no horizontal flow) and cross-fade stacked slides. */
.grx-hero-trans-fade .grx-hero__track {
  display: block;
  transform: none !important;
  transition: none;
}
.grx-hero-trans-fade .grx-hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--grx-hero-speed) ease;
  z-index: 0;
}
.grx-hero-trans-fade .grx-hero__slide.is-active { opacity: 1; z-index: 1; }

.grx-hero__media { position: absolute; inset: 0; overflow: hidden; }
.grx-hero__img {
  position: absolute; inset: 0;
  /* !important beats Elementor's `.elementor img { height:auto; max-width:100% }`
     (specificity 0,1,1) which otherwise collapses the image to its natural height
     so it can't cover. This is THE fix for "image doesn't fill the slider height". */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* No ghost-drag of the image, no accidental text selection of slide content. */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.grx-hero__slide { user-select: none; }


/* Content OVERLAY layer — fixed above the sliding track (does NOT move with the
   image). Default position: LEFT + BOTTOM. The position controls override the
   alignment. */
.grx-hero__content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center;                          /* centre the constrained container */
  justify-content: flex-end;                    /* default bottom (control overrides) */
  padding-bottom: var(--grx-hero-content-bottom, 28px);
  pointer-events: none;
}

/* When the slider has a nav, RESERVE a band for it at the very bottom and stop the
   content above that band — so the text/button can never overlap the nav. The band
   = nav offset + nav height; content's padding-bottom then sits above it. */
.grx-hero--has-nav .grx-hero__content {
  bottom: calc(var(--grx-hero-nav-bottom, 28px) + var(--grx-hero-nav-band, 40px));
}
/* The nav lives in that reserved band. */
.grx-hero--has-nav .grx-hero__nav { z-index: 6; }

/* Constrained container — matches the header's content width + side padding.
   min(container, 100%) caps to the container on desktop (1600, centred to line up
   with the header) and to 100% on small screens — and it survives the containment
   block below (which must NOT flatten this to a plain 100%). */
.grx-hero__inner {
  position: relative;
  width: 100%;
  max-width: min(var(--grx-hero-container-w, 1600px), 100%);
  /* Side padding is fluid + has a guaranteed 3% minimum: max(3%, control). The 3%
     is relative to the hero width, so as the window narrows/widens the gutter scales
     continuously (no breakpoint jumps) and never drops below 3% on either side. The
     "Side gutter" control can only ADD beyond that minimum. */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: max(3%, var(--grx-hero-gutter, 0px));
  padding-right: max(3%, var(--grx-hero-gutter, 0px));
  box-sizing: border-box;
}

/* Each slide's content is a stacked panel; only the active one shows + animates. */
.grx-hero__panel {
  display: flex; flex-direction: column;
  align-items: flex-start;                      /* horizontal alignment (control overrides) */
  text-align: left;
  gap: var(--grx-hero-content-gap, 20px);       /* spacing between title/subtitle/button */
  min-width: 0;                                 /* allow children to shrink, never overflow */
}
/* Stack inactive panels on top of each other so the layer height is stable. */
.grx-hero__inner { display: grid; min-width: 0; }
.grx-hero__panel { grid-area: 1 / 1; }
/* Children never exceed the padded container: min() caps to the smaller of the vw
   preference and 100% of the available (gutter-aware) width — so text wraps inside
   the screen instead of bleeding past the left edge. */
.grx-hero__panel > * {
  max-width: min(var(--grx-hero-content-w, 100%), 100%);
  min-width: 0;
  pointer-events: auto;
  margin: 0;
  overflow-wrap: break-word;                    /* long words wrap, never overflow */
}

/* Only the active panel is visible + interactive. */
.grx-hero__panel { opacity: 0; visibility: hidden; pointer-events: none; }
.grx-hero__panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* ── Framer-style entrance: each element fades up, staggered (title→subtitle→btn).
   Re-triggered per slide by toggling .is-animating on the active panel (JS). */
.grx-hero__anim {
  opacity: 0;
  transform: translateY(var(--grx-hero-anim-shift, 24px));
}
.grx-hero__panel.is-animating .grx-hero__anim {
  animation: grx-hero-rise var(--grx-hero-anim-dur, 700ms) cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--grx-anim-i, 0) * var(--grx-hero-anim-stagger, 120ms));
}
@keyframes grx-hero-rise {
  from { opacity: 0; transform: translateY(var(--grx-hero-anim-shift, 24px)); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .grx-hero__anim { opacity: 1 !important; transform: none !important; }
  .grx-hero__panel.is-animating .grx-hero__anim { animation: none !important; }
}

/* Elementor EDITOR: the slider JS doesn't run in the canvas, so .is-animating is
   never added and the content would stay invisible (opacity:0). The widget adds
   .grx-hero--editor server-side when in edit mode; show the first panel's content
   statically so the editor preview reflects the real text. */
.grx-hero--editor .grx-hero__panel[data-grx-panel="0"] {
  opacity: 1 !important; visibility: visible !important;
}
.grx-hero--editor .grx-hero__panel[data-grx-panel="0"] .grx-hero__anim {
  opacity: 1 !important; transform: none !important; animation: none !important;
}

/* Text inherits the theme/Elementor font-family by default — so global fonts apply
   out of the box. Size/weight here are gentle FALLBACKS only; setting the widget's
   Typography control (or an Elementor Global font) overrides them cleanly. */
.grx-hero__heading {
  font-family: inherit;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.grx-hero__subtitle {
  font-family: inherit;
  color: rgba(255,255,255,0.9);
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  line-height: 1.4;
}
/* Subtitle gets its OWN width cap (defaults to the shared content width). Higher
   specificity than .grx-hero__panel > * so its control actually wins. */
.grx-hero__panel .grx-hero__subtitle {
  max-width: min(var(--grx-hero-subtitle-w, var(--grx-hero-content-w, 100%)), 100%);
}
/* Heading gets its own width cap too (defaults to the shared content width). */
.grx-hero__panel .grx-hero__heading {
  max-width: min(var(--grx-hero-heading-w, var(--grx-hero-content-w, 100%)), 100%);
}
.grx-hero__btn {
  display: inline-block;
  font-family: inherit;
  padding: 14px 28px;
  font-size: var(--grx-text-sm, 15px);
  font-weight: 700;
  color: #fff;
  background: var(--grx-color-brand-red, #bf0000);
  border-radius: 4px;
  text-decoration: none;
  transition: background 140ms, transform 140ms;
}
.grx-hero__btn:hover { background: var(--grx-color-brand-red-dark, #8c0000); transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════════════════════
   CONTAINMENT GUARANTEES — no control value can push content out of the DOM.
   These are deliberately blunt and high-specificity so they win over any saved
   Elementor setting: whatever width/size a user (or a stale saved value) sets, the
   element still cannot exceed its container or cause page overflow.
   ════════════════════════════════════════════════════════════════════════════ */

/* The hero box itself clips everything inside it (no element can escape it). */
.grx-hero { overflow: hidden; max-width: 100%; }

/* Content layers can never be wider than the hero, and flex/grid children may
   shrink (min-width:0) so long text wraps instead of forcing overflow. NOTE: the
   __inner is intentionally NOT flattened to 100% here — it keeps its own
   min(container,100%) cap above so the 1600 centring survives. */
.grx-hero__content { max-width: 100%; }
.grx-hero__inner,
.grx-hero__panel { min-width: 0; }

/* Every text element wraps and is capped to the available width — a huge font or
   a long unbroken word can't bleed past the edge. */
.grx-hero__heading,
.grx-hero__subtitle,
.grx-hero__btnwrap,
.grx-hero__btn {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Overlay graphics are capped to the container regardless of their width setting,
   so an oversized px value just maxes out at the edge instead of overflowing. */
.grx-hero__overlay { max-width: min(100%, var(--grx-hero-container-w, 1600px)); }
.grx-hero__overlay img { max-width: 100%; height: auto; }

/* The nav keeps its own min(container,100%) cap (set on its rule); here we only
   ensure glyphs never wrap or push out. */
.grx-hero__nav { box-sizing: border-box; }

/* Overlay graphics — positioned via Elementor controls (width, h-align, offset),
   per breakpoint. Defaults: full-width, centred, flush to the edge. */
/* Overlays are constrained to the SAME content container as the text (centred,
   max container width, same gutter) — so they sit within the 1600px boundary, not
   the full bleed. Width/align/offset controls still fine-tune within that. */
.grx-hero__overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--grx-hero-container-w, 1600px);
  padding: 0 var(--grx-hero-gutter, clamp(20px, 5vw, 64px));
  z-index: 3;
  pointer-events: none;
  line-height: 0;
}
.grx-hero__overlay--top { top: 0; }
.grx-hero__overlay--bottom { bottom: 0; }
.grx-hero__overlay img { width: 100%; height: auto; display: block; }

/* ── Overlay CSS effects (static — set via Elementor controls) ───────────────
   Blend mode lets the graphic interact with the photo beneath (multiply/screen/
   overlay/etc.); filters (blur, grayscale, brightness, contrast, saturate) and
   opacity are driven by --grx-hero-ov-* variables the controls write. */
.grx-hero__overlay img {
  mix-blend-mode: var(--grx-hero-ov-blend, normal);
  opacity: var(--grx-hero-ov-opacity, 1);
  filter:
    blur(var(--grx-hero-ov-blur, 0px))
    grayscale(var(--grx-hero-ov-grayscale, 0))
    brightness(var(--grx-hero-ov-brightness, 1))
    contrast(var(--grx-hero-ov-contrast, 1))
    saturate(var(--grx-hero-ov-saturate, 1));
}

/* ── Navigation (DeWalt-style): minimal, borderless ──────────────────────────
   Every nav control is a bare <button>/<ol>/<li> the theme would otherwise box
   with its own borders + backgrounds. We hard-reset them so the nav is just
   glyphs + a thin progress line, never boxes. */
.grx-hero__nav,
.grx-hero__nav *,
.grx-hero__nav *::before,
.grx-hero__nav *::after { box-sizing: border-box; }

.grx-hero__nav button,
.grx-hero__nav ol,
.grx-hero__nav li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  list-style: none !important;
  color: var(--grx-hero-nav-color) !important;
  font-family: inherit;
  line-height: 1;
}

.grx-hero__nav {
  /* Sit inside the content container so the nav's left edge lines up with the
     heading above: span the container width (centred, same gutter), then keep the
     controls left-aligned. The container-width/gutter vars are inherited from
     .grx-hero, so the nav and the content box share one boundary. */
  --grx-hero-nav-speed: 1000ms;   /* nav line + number shift: 1s (independent of the image push) */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--grx-hero-nav-bottom, 28px);
  width: 100%;
  max-width: min(var(--grx-hero-container-w, 1600px), 100%);
  /* Same fluid 3%-minimum gutter as the content, so the nav lines up with it. */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: max(3%, var(--grx-hero-gutter, 0px));
  padding-right: max(3%, var(--grx-hero-gutter, 0px));
  box-sizing: border-box;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  color: var(--grx-hero-nav-color);
}
.grx-hero__nav > * { flex: 0 0 auto; }
/* The numbered-steps track is the only flexible part; its width is controllable. */
.grx-hero__nav .grx-hero__steps { flex: 0 1 auto; }

.grx-hero__arrow,
.grx-hero__pause {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  /* Font sized to fit WITHIN the box (was 34px > 32px box, which pushed the glyph
     low). line-height:1 + flex centring keeps the chevron centred on the numbers. */
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  color: var(--grx-hero-nav-color) !important;
  transition: opacity 140ms, color 140ms;
}
/* Chevron glyphs sit on the math axis (slightly below the digits' optical centre);
   a 1px lift makes the whole nav row read as one clean line. */
.grx-hero__arrow { transform: translateY(-1px); }
/* Hover → brand red; press (:active) → brand yellow. Tokens with literal
   fallbacks so it works whether or not portal.css :root is on the page. */
.grx-hero__arrow:hover,
.grx-hero__pause:hover {
  opacity: 1;
  color: var(--grx-color-brand-red, #bf0000) !important;
}
.grx-hero__arrow:active,
.grx-hero__pause:active {
  opacity: 1;
  color: var(--grx-color-brand-yellow, #fbb03b) !important;
}

/* Numbered steps row. The numbers hug content and are left-aligned; the active
   step's animated track width pushes the trailing numbers along, so they slide to
   their new positions as the active line moves:  1 ——— 2 3 4 → 1 2 ——— 3 4 → … */
.grx-hero__steps {
  flex: 0 1 auto;
  display: flex; align-items: center;
  gap: 16px;                /* breathing room between adjacent (collapsed) numbers */
}
/* Each step is a flex row: [number-button][track]. Non-active steps hug their
   number (track has 0 width). The ACTIVE step grows to fill the row, and its track
   flex-grows — so the long line opens BETWEEN the active number and the next. */
/* Steps all hug content; the active step's track has a real (animated) width that
   pushes the following numbers along, so they slide to their new positions. */
.grx-hero__step {
  display: flex; align-items: center;
  gap: 0;
  flex: 0 0 auto;
  /* Nav motion runs on its OWN duration (--grx-hero-nav-speed, 1s) — independent
     of the slower image push (--grx-hero-speed). Track + gap share it so the line
     shift and number slide stay one cohesive, width-conserving move. */
  transition: gap var(--grx-hero-nav-speed, 1000ms) cubic-bezier(.22,.61,.36,1);
}
.grx-hero__step.is-active { gap: 16px; }

.grx-hero__stepbtn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  cursor: pointer;
}
.grx-hero__stepnum {
  display: inline-block;
  font-size: 16px; font-weight: 700;
  opacity: 0.55;
  transition: opacity 300ms ease;
}
.grx-hero__step.is-active .grx-hero__stepnum { opacity: 1; }
.grx-hero__step.is-done .grx-hero__stepnum { opacity: 0.8; }

/* Track: a concrete width (0 collapsed → line width when active) so it can ANIMATE.
   The leaving track shrinks and the entering track grows SIMULTANEOUSLY over the
   same duration + easing — so the total nav width is conserved (no shrink-then-
   expand pulse) and the numbers glide smoothly to their new positions in one move.
   !important guards the bare <span>s against theme span rules. */
.grx-hero__steptrack {
  flex: 0 0 auto;
  width: 0;
  min-width: 0;
  height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 2px !important;
  display: block !important;
  opacity: 0;
  transition:
    width   var(--grx-hero-nav-speed, 1000ms) cubic-bezier(.22,.61,.36,1),
    opacity var(--grx-hero-nav-speed, 1000ms) cubic-bezier(.22,.61,.36,1);
}
.grx-hero__step.is-active .grx-hero__steptrack {
  width: var(--grx-hero-line, 120px);
  background: rgba(255,255,255,0.4) !important;
  opacity: 1;
}
.grx-hero__stepfill {
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 0%;
  background: var(--grx-hero-progress, #ffffff) !important;
  display: block !important;
}
/* Non-active last step keeps no trailing line; when it IS active, the active rule
   above shows its track so the line trails after the final number (1 2 3 4 ———). */
.grx-hero__step:last-child:not(.is-active) .grx-hero__steptrack { display: none; }

/* Pause / play glyph drawn in CSS (no icon dependency). */
.grx-hero__pauseicon { position: relative; width: 10px; height: 12px; display: inline-block; }
.grx-hero__pauseicon::before,
.grx-hero__pauseicon::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 3px;
  background: currentColor;
}
.grx-hero__pauseicon::before { left: 1px; }
.grx-hero__pauseicon::after  { right: 1px; }
.grx-hero__pause.is-paused .grx-hero__pauseicon::after { display: none; }
.grx-hero__pause.is-paused .grx-hero__pauseicon::before {
  left: 2px; width: 0; height: 0; background: transparent;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

/* ── Responsive (tablet / mobile) ───────────────────────────────────────────
   - Nav keeps a CONSTANT footprint at the bottom, inside the container (it does
     not shrink/shift — only the gutter tightens).
   - Content stays within the viewport (full width, smaller gutter, no overflow).
   - Image already covers (object-fit:cover); we just trim the gutter.
   - Overlay graphics scale DOWN so they don't dominate small screens. */
@media (max-width: 1024px) {
  /* Gutter is handled fluidly by max(3%, control) on the inner/nav — no breakpoint
     override needed here. */
  .grx-hero__heading  { font-size: clamp(1.75rem, 7vw, 3rem); }
  .grx-hero__subtitle { font-size: clamp(0.95rem, 2.4vw, 1.2rem); }
  /* Overlays scale to ~60% on tablet. */
  .grx-hero__overlay { max-width: min(60%, var(--grx-hero-container-w, 1600px)); }
}

@media (max-width: 600px) {
  .grx-hero {
    /* Gutter stays fluid via max(3%, control) on the inner/nav; just tighten the
       distance from the nav here so text clears it on phones. */
    --grx-hero-content-bottom: 90px;
  }
  /* Content fills the width and never overflows the screen. */
  .grx-hero__panel { --grx-hero-content-w: 100%; }
  .grx-hero__panel > * { max-width: 100%; }
  .grx-hero__heading  { font-size: clamp(1.6rem, 9vw, 2.4rem); line-height: 1.08; }
  .grx-hero__subtitle { font-size: clamp(0.9rem, 4vw, 1.05rem); }
  .grx-hero__btn { padding: 12px 22px; }

  /* Nav: constant full-container-width bar at the bottom; only the gutter tightens
     so its layout stays stable across phones (no shrinking/reflow). */
  .grx-hero__nav {
    bottom: 16px;
    gap: 12px;
  }
  .grx-hero__arrow, .grx-hero__pause { width: 28px; height: 28px; font-size: 24px; }
  .grx-hero__stepnum { font-size: 14px; }

  /* Overlays scale further on phones so they read as accents, not full-bleed. */
  .grx-hero__overlay { max-width: min(72%, var(--grx-hero-container-w, 1600px)); }
}

@media (prefers-reduced-motion: reduce) {
  .grx-hero__track { transition: none !important; }
  .grx-hero-trans-fade .grx-hero__slide { transition: none !important; }
  .grx-hero__stepfill { transition: none !important; }
}

/* ==========================================================================
   Single product widget
   ========================================================================== */
.grx-product {
  --grx-product-max: 1600px;
  --grx-product-gap: 64px;
  --grx-product-stage-h: 620px;
  --grx-product-surface: #ffffff;
  --grx-product-muted: #6b6f76;
  --grx-product-text: #1f1f24;
  --grx-product-line: #e5e7eb;
  --grx-product-soft: #f6f7f8;
  --grx-product-accent: #bf0000;
  --grx-product-accent-dark: #8c0000;
  --grx-product-yellow: #f4b223;
  --grx-product-image-bg: #ffffff;
  --grx-catalog-text: var(--grx-product-text);
  --grx-catalog-accent: var(--grx-product-accent);
  --grx-catalog-accent-tint: #fce8e8;
  --grx-catalog-radius: 4px;

  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(24px, 4vw, 56px) 0;
  color: var(--grx-product-text);
  background: var(--grx-product-surface);
  font-family: inherit;   /* follow the Elementor / theme global font (e.g. Neue Haas) */
}
.grx-product,
.grx-product * { box-sizing: border-box; }

.grx-product--empty {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grx-product-muted);
  background: var(--grx-product-soft);
}

.grx-product__inner,
.grx-product__related {
  width: 100%;
  max-width: var(--grx-product-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}

.grx-product__crumbs {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--grx-product-muted);
}
.grx-product__crumbs a {
  color: var(--grx-product-text);
  text-decoration: none;
}
.grx-product__crumbs a:hover { color: var(--grx-product-accent); }
.grx-product__crumb-sep {
  display: inline-block;
  margin: 0 8px;
  color: #a1a5ad;
}

.grx-product__top {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: max(50px, var(--grx-product-gap));
  align-items: start;
}

.grx-product__media {
  position: sticky;
  top: 24px;
  min-width: 0;
}
.grx-product__stage {
  height: var(--grx-product-stage-h);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--grx-product-image-bg);
  border: 1px solid transparent;
}
.grx-product__stage img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 220ms ease, filter 220ms ease, opacity 160ms ease;
}
.grx-product--fit-cover .grx-product__stage img { object-fit: cover; }
.grx-product--fit-scale-down .grx-product__stage img { object-fit: scale-down; }
.grx-product--fx-lift .grx-product__stage:hover img {
  filter: contrast(1.03) saturate(1.03);
  transform: translateY(-2px) translateZ(0);
}
.grx-product--fx-zoom .grx-product__stage:hover img { transform: scale(1.035) translateZ(0); }

.grx-product__thumbs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.grx-product__thumb {
  width: 74px;
  height: 74px;
  padding: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  border: 1px solid var(--grx-product-line) !important;
  border-radius: 6px !important;
  cursor: pointer;
}
.grx-product__thumb.is-active {
  border-color: var(--grx-product-accent) !important;
  box-shadow: inset 0 -3px 0 var(--grx-product-accent);
}
.grx-product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.grx-product__summary { min-width: 0; }
.grx-product__meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  margin: 0 0 10px;
  color: var(--grx-product-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}
.grx-product__sku {
  font-weight: 400;
}
.grx-product__cats {
  font-weight: 400;
}
.grx-product__cats a,
.grx-product__cats a:hover,
.grx-product__cats a:focus,
.grx-product__cats a:visited {
  color: inherit;
  text-decoration: none;
}
.grx-product__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 6px;
  align-items: center;
  color: var(--grx-product-yellow);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.grx-product__tag-sep {
  color: var(--grx-product-yellow);
}
.grx-product__title {
  margin: 0 0 24px;
  color: var(--grx-product-text);
  font-family: inherit;
  font-size: clamp(1.75rem, 2.8vw, 3rem);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: 0;
  overflow-wrap: break-word;
  text-align: left;
  text-transform: uppercase;
}
.grx-product__brief {
  margin-top: 22px;
  color: #343840;
  font-size: 15px;
  line-height: 1.6;
}
.grx-product__brief > :first-child { margin-top: 0; }
.grx-product__brief > :last-child { margin-bottom: 0; }
.grx-product__brief--accordion {
  margin-top: 28px;
}
.grx-product__summary-accordion > .grx-product__short-accordion:first-of-type {
  border-top: 1px solid var(--grx-product-line);
}
.grx-product__brief-title {
  margin: 0 0 22px;
  padding-bottom: 22px;
  color: var(--grx-product-text);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.grx-product__short-accordion {
  border-top: 1px solid var(--grx-product-line);
  transition: height 220ms ease;
}
.grx-product__short-accordion[open] + .grx-product__short-accordion {
  border-top: 0;
}
.grx-product__short-accordion.is-animating {
  overflow: hidden;
}
.grx-product__short-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 0;
  color: var(--grx-product-text);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.grx-product__short-accordion summary::-webkit-details-marker { display: none; }
.grx-product__short-accordion summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 140ms ease;
}
.grx-product__short-accordion[open] summary::after {
  transform: rotate(225deg);
}
.grx-product__short-accordion-content {
  padding: 0 0 28px;
  color: #2d3138;
  font-size: 15px;
  line-height: 1.55;
}
.grx-product__short-accordion-content > :first-child { margin-top: 0; }
.grx-product__short-accordion-content > :last-child { margin-bottom: 0; }
.grx-product__short-accordion-content ul,
.grx-product__short-accordion-content ol {
  margin: 0 0 16px 1.2em;
  padding: 0;
}
.grx-product__short-accordion-content li + li { margin-top: 6px; }
.grx-product__short-accordion-content hr,
.grx-product__description-content hr {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.grx-product__description-content h2,
.grx-product__description-content h3 {
  margin: 24px 0 10px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 900;
}
.grx-product__description-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  border: 0;
  background: transparent !important;
  background-color: transparent !important;
  font-size: 14px;
}
.grx-product__description-content thead,
.grx-product__description-content tbody,
.grx-product__description-content tfoot,
.grx-product__description-content tr,
.grx-product__description-content tr:nth-child(even),
.grx-product__description-content tr:nth-child(odd),
.grx-product__description-content tbody > tr:nth-child(even),
.grx-product__description-content tbody > tr:nth-child(odd),
.grx-product__description-content tbody > tr:hover {
  background: transparent !important;
  background-color: transparent !important;
}
.grx-product__description-content th,
.grx-product__description-content td {
  padding: 10px 12px;
  background: transparent !important;
  background-color: transparent !important;
  border: 0;
  border-bottom: 1px solid var(--grx-product-line);
  text-align: left;
}
.grx-product__description-content tbody > tr:nth-child(even) > th,
.grx-product__description-content tbody > tr:nth-child(even) > td,
.grx-product__description-content tbody > tr:nth-child(odd) > th,
.grx-product__description-content tbody > tr:nth-child(odd) > td,
.grx-product__description-content tbody > tr:hover > th,
.grx-product__description-content tbody > tr:hover > td {
  background: transparent !important;
  background-color: transparent !important;
}
.grx-product__description-content th {
  font-weight: 900;
}

.grx-product__summary-buy {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 0;
  clear: both;
  float: none;
  width: 100%;
}
.grx-product__price {
  margin-bottom: 18px;
  color: var(--grx-product-yellow);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1;
  font-weight: 900;
}
.grx-product__price del {
  margin-right: 10px;
  color: #9ca3af;
  font-size: .5em;
}
.grx-product__price ins {
  color: var(--grx-product-yellow);
  text-decoration: none;
}

.grx-product__cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
}
.grx-product__cart--variable {
  display: block;
  width: 100%;
}
.grx-product__cart--grouped {
  display: block;
  width: 100%;
}
.grx-product__variations {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  margin: 0 0 16px;
}
.grx-product__variation-row {
  display: grid;
  gap: 6px;
  text-transform: uppercase;
}
.grx-product__variation-reset {
  justify-self: start;
  margin: 0;
}
.grx-product__variation-reset a {
  color: inherit;
  text-decoration: none !important;
}
.grx-product__variation-summary {
  display: grid;
  gap: 12px;
}
.grx-product__variation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.grx-product__variation-summary .woocommerce-variation-description,
.grx-product__variation-summary .woocommerce-variation-availability {
  margin: 0;
}
.grx-product__variation-summary .woocommerce-variation-price {
  display: none;
}
.grx-product__grouped {
  display: grid;
  width: 100%;
  max-width: 640px;
  border-top: 1px solid var(--grx-product-line);
}
.grx-product__grouped-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--grx-product-line);
}
.grx-product__grouped-copy {
  min-width: 0;
}
.grx-product__grouped-copy strong {
  display: block;
  color: var(--grx-product-text);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
}
.grx-product__grouped-copy .grx-product__meta-line {
  margin: 5px 0 0;
}
.grx-product__grouped-actions {
  margin-top: 14px;
}
.grx-product__qty {
  display: inline-grid;
  grid-template-columns: 36px 54px 36px;
  height: 44px;
  border: 1px solid #cfd3d8;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.grx-product__qty button,
.grx-product__qty input {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--grx-product-text) !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
}
.grx-product__qty button {
  cursor: pointer;
}
.grx-product__qty button:hover {
  color: var(--grx-product-accent) !important;
  background: var(--grx-product-soft) !important;
}
.grx-product__qty input::-webkit-outer-spin-button,
.grx-product__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.grx-product__qty input[type=number] { -moz-appearance: textfield; }

.grx-product__add,
.grx-product__add:hover,
.grx-product__add:focus,
.grx-product__add:visited,
.grx-product__login,
.grx-product__login:hover,
.grx-product__login:focus,
.grx-product__login:visited {
  --grx-product-button-bg: #111111;
  --grx-product-button-hover: var(--grx-product-accent);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px !important;
  color: #fff !important;
  background: var(--grx-product-button-bg) !important;
  border: 1px solid var(--grx-product-button-bg) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 140ms ease;
}
.grx-product__add::before,
.grx-product__login::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--grx-product-button-hover);
  border-radius: inherit;
  transition: width 420ms cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1;
}
.grx-product__add:hover,
.grx-product__add:focus,
.grx-product__login:hover,
.grx-product__login:focus {
  border-color: var(--grx-product-button-hover) !important;
  box-shadow: 0 2px 8px rgba(191, 0, 0, 0.24) !important;
  transform: translateY(-1px);
}
.grx-product__add:hover::before,
.grx-product__add:focus::before,
.grx-product__login:hover::before,
.grx-product__login:focus::before { width: 100%; }
.grx-product__add:hover,
.grx-product__login:hover {
  transform: translateY(-1px);
}
.grx-product__add.disabled,
.grx-product__add:disabled,
.grx-product__add.wc-variation-selection-needed {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
}
.grx-product__add.disabled::before,
.grx-product__add:disabled::before,
.grx-product__add.wc-variation-selection-needed::before {
  width: 0;
}
.grx-product__login,
.grx-product__login:hover,
.grx-product__login:focus,
.grx-product__login:visited {
  display: inline-grid;
  grid-template-areas: "label";
}
.grx-product__login-label {
  grid-area: label;
  place-self: center;
  text-align: center;
  transition: opacity 180ms ease;
}
.grx-product__login-label--hover {
  opacity: 0;
}
.grx-product__login:hover .grx-product__login-label--default,
.grx-product__login:focus .grx-product__login-label--default {
  opacity: 0;
}
.grx-product__login:hover .grx-product__login-label--hover,
.grx-product__login:focus .grx-product__login-label--hover {
  opacity: 1;
}
.grx-product__add-ic,
.grx-product__add-ic svg { width: 18px; height: 18px; }
.grx-product__stock {
  margin: 0;
  color: var(--grx-product-muted);
  font-weight: 700;
}

.grx-product__downloads {
  margin-top: 32px;
}
.grx-product__summary-downloads {
  margin-top: 24px;
  clear: both;
  float: none;
  width: 100%;
}
.grx-product__downloads h2,
.grx-product__related h2,
.grx-product__section h2 {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.grx-product__download {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 80px;
  padding: 0 18px 0 0;
  color: var(--grx-product-text) !important;
  background: #fff;
  border: 1px solid #d8dadd;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none !important;
}
.grx-product__download + .grx-product__download { margin-top: 16px; }
.grx-product__download:hover {
  border-color: #d8dadd;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.grx-product__download span { min-width: 0; }
.grx-product__download strong,
.grx-product__download em,
.grx-product__download small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grx-product__download strong {
  font-size: 14px;
  line-height: 1.25;
}
.grx-product__download em {
  margin-top: 3px;
  color: var(--grx-product-text);
  font-size: 14px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 700;
}
.grx-product__download small {
  color: var(--grx-product-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}
.grx-product__download-file {
  width: 48px;
  height: 100%;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grx-product-muted);
  background: #f4f4f4;
  border-radius: 7px 0 0 7px;
}
.grx-product__download-file svg {
  width: 22px;
  height: 22px;
}
.grx-product__download-ic,
.grx-product__download-ic svg {
  width: 20px;
  height: 20px;
}
.grx-product__download-ic,
.grx-product__download:hover .grx-product__download-ic,
.grx-product__download:focus .grx-product__download-ic {
  color: var(--grx-product-text) !important;
}

.grx-product__related {
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 34px;
  border-top: 1px solid var(--grx-product-line);
}
.grx-product__related .grx-pcard {
  --grx-pcard-min-h: 360px;
  --grx-pcard-media-h: 220px;
}
@media (max-width: 1024px) {
  .grx-product__top {
    grid-template-columns: 1fr;
  }
  .grx-product__media { position: static; }
}

@media (max-width: 600px) {
  .grx-product__inner,
  .grx-product__related {
    padding-left: 14px;
    padding-right: 14px;
  }
  .grx-product__stage {
    height: min(var(--grx-product-stage-h), 430px);
    min-height: 280px;
  }
  .grx-product__title {
    font-size: clamp(1.65rem, 9.5vw, 2.6rem);
  }
  .grx-product__cart,
  .grx-product__login {
    width: 100%;
  }
  .grx-product__qty {
    width: min(50vw, 240px);
    min-width: 156px;
    grid-template-columns: 42px minmax(48px, 1fr) 42px;
  }
  .grx-product__variation-actions {
    align-items: center;
  }
  .grx-product__variation-actions .grx-product__add,
  .grx-product__cart:not(.grx-product__cart--variable) .grx-product__add {
    width: auto;
    min-width: 142px;
  }
  .grx-product__grouped-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .grx-product__download {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .grx-product__download-ic { display: none; }
}

/* ==========================================================================
   Product card widget
   ========================================================================== */
.grx-pcard {
  --grx-pcard-min-h: 430px;
  --grx-pcard-media-h: 300px;
  --grx-pcard-bg: #ffffff;
  --grx-pcard-border: #d8d8d8;
  --grx-pcard-text: #050505;
  --grx-pcard-muted: #4b5563;
  --grx-pcard-soft: #f4f4f4;
  --grx-pcard-badge-bg: #fbb03b;
  --grx-pcard-badge-text: #050505;
  --grx-pcard-accent: #bf0000;

  position: relative;
  min-height: var(--grx-pcard-min-h);
  background: var(--grx-pcard-bg);
  border: 1px solid var(--grx-pcard-border);
  border-radius: 0;
  color: var(--grx-pcard-text);
  font-family: inherit;   /* follow the Elementor / theme global font (e.g. Neue Haas) */
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
.grx-pcard,
.grx-pcard * { box-sizing: border-box; }
.grx-pcard:hover {
  border-color: #b9bdc4;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.grx-pcard--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  color: var(--grx-pcard-muted);
  background: var(--grx-pcard-soft);
}
.grx-pcard__link,
.grx-pcard__link:hover,
.grx-pcard__link:focus,
.grx-pcard__link:visited {
  display: grid;
  grid-template-rows: var(--grx-pcard-media-h) 1fr;
  min-height: var(--grx-pcard-min-h);
  color: var(--grx-pcard-text) !important;
  text-decoration: none !important;
}
.grx-pcard__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(28px, 5vw, 54px) clamp(20px, 4vw, 44px) 18px;
  overflow: hidden;
  background: #fff;
}
.grx-pcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  transform: translateZ(0);
  transition: transform 180ms ease, filter 180ms ease;
}
.grx-pcard:hover .grx-pcard__media img {
  filter: contrast(1.025) saturate(1.025);
  transform: scale(1.018) translateZ(0);
}
.grx-pcard--fit-cover .grx-pcard__media img { object-fit: cover; }
.grx-pcard--fit-scale-down .grx-pcard__media img { object-fit: scale-down; }

.grx-pcard__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  color: var(--grx-pcard-badge-text);
  background: var(--grx-pcard-badge-bg);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.grx-pcard__body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 0 clamp(18px, 3vw, 28px) clamp(20px, 3vw, 30px);
}
.grx-pcard__meta {
  /* min-height:0 (was 26px) drops the reserved dead space that pushed the SKU
     away from the title; the row now hugs the SKU/rating. */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--grx-pcard-muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}
.grx-pcard__sku {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.02em;
}
/* Pull the name up snug under the SKU without tightening the title/price gap. */
.grx-pcard__meta + .grx-pcard__title { margin-top: -2px; }
.grx-pcard__rating {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: #111;
  background: #f1f1f1;
  border-radius: 999px;
  font-weight: 900;
}
.grx-pcard__rating span {
  color: #111;
  line-height: 1;
}
.grx-pcard__title {
  display: block;
  color: var(--grx-pcard-text);
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0;
  overflow-wrap: break-word;
}
.grx-pcard:hover .grx-pcard__title { color: var(--grx-pcard-accent); }
.grx-pcard__price {
  display: block;
  margin-top: 2px;
  color: #f4a51c;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}
/* Unpriced items ("quote required"). Deliberately quieter than a real figure — it is
   not an amount, and it should not compete with the cards that do show one. */
.grx-price-req {
  color: var(--grx-color-gray-500, #767676);
  font-size: var(--grx-text-xs, 13px);
  font-weight: 700;
  letter-spacing: 0.3px;
}
.grx-pcard__button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: 6px;
  padding: 0 14px;
  color: #fff;
  background: var(--grx-pcard-accent);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 900;
}

.grx-pcards {
  --grx-pcards-cols: 3;
  --grx-pcards-gap: 32px;

  display: grid;
  grid-template-columns: repeat(var(--grx-pcards-cols), minmax(0, 1fr));
  gap: var(--grx-pcards-gap);
  width: 100%;
}
.grx-pcards-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 28px;
  color: var(--grx-color-gray-500, #767676);
  background: var(--grx-color-gray-100, #f5f5f7);
  border: 1px solid var(--grx-color-gray-200, #e8e8ed);
}
.grx-pcards-empty p { margin: 0; }

@media (max-width: 1024px) {
  .grx-pcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones keep TWO columns — a single full-width column wastes the viewport and
   turns a 56-product category into an endless scroll. The card is designed to
   survive the narrower track: media box shortens, padding and type step down. */
@media (max-width: 600px) {
  .grx-pcards {
    --grx-pcards-gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* At half width the media row is capped at 150px and the type steps down, so
     the desktop min-height floor just pads dead space under the body. Zero the
     token (it feeds both min-height references) and let grid-stretch keep each
     row even. The .grx-product__related selector (0,2,0) is needed to beat the
     related-section token override above, which otherwise pins those tiles to
     360px while every other surface shrinks. */
  .grx-pcard,
  .grx-product__related .grx-pcard {
    --grx-pcard-min-h: 0;
  }
  /* Match the base rule's pseudo-state group — otherwise tapping the card gives
     the anchor :focus, and .grx-pcard__link:focus (0,2,0) out-specifies a plain
     .grx-pcard__link (0,1,0) and springs the media row back to its 300px desktop
     height. */
  .grx-pcard__link,
  .grx-pcard__link:hover,
  .grx-pcard__link:focus,
  .grx-pcard__link:visited {
    grid-template-rows: min(var(--grx-pcard-media-h), 150px) 1fr;
  }
  .grx-pcard__media {
    padding-left: 10px;
    padding-right: 10px;
  }
  .grx-pcard__body {
    padding: 10px 12px 14px;
  }
  .grx-pcard__title {
    font-size: 13px;
    line-height: 1.3;
  }
  .grx-pcard__price {
    font-size: 14px;
  }
  .grx-pcard__badge {
    top: 8px;
    left: 8px;
  }
  /* The SKU/rating row runs out of width at half-size — let it wrap instead of
     squeezing both onto one line. */
  .grx-pcard__meta {
    flex-wrap: wrap;
    gap: 2px 8px;
    min-height: 0;
  }
  .grx-pcard__button {
    justify-self: stretch;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* Only genuinely tiny screens fall back to one column. */
@media (max-width: 340px) {
  .grx-pcards {
    grid-template-columns: 1fr;
  }
}

/* ── Catalog surface (shop / category / search: grid + filter rail) ──────────
   widgets.css is NOT wrapped in the portal defensive reset, so the host theme /
   Elementor can style bare <button>/<h*>/<input>/<a>. Structural props on the
   interactive filter chrome are therefore !important (per styles.md defensive
   rule) so a loud theme button style can't turn a facet header into a red block. */
.grx-catalog {
  --grx-catalog-accent:      var(--grx-color-brand-red, #bf0000);
  --grx-catalog-accent-tint: var(--grx-color-brand-red-light, #fce8e8);
  --grx-catalog-rail-w:      264px;
  --grx-catalog-content-width: 1600px;
  --grx-catalog-edge-gap:    48px;
  --grx-catalog-effective-width: min(var(--grx-catalog-content-width), calc(100vw - var(--grx-catalog-edge-gap)));
  --grx-catalog-text:        var(--grx-color-gray-900, #1a1a1a);
  --grx-catalog-muted:       var(--grx-color-gray-500, #767676);
  --grx-catalog-line:        var(--grx-color-gray-200, #e8e8ed);
  --grx-catalog-fill:        #f6f6f7;
  /* Groxx house style is crisp 4px corners (--grx-radius-md) on cards/inputs/
     buttons; 999px pills are reserved for count chips only. */
  --grx-catalog-radius:      var(--grx-radius-md, 4px);
  /* Sticky offset: clears the wp-admin bar for logged-in members; the theme sets
     --grx-sticky-top to its own fixed header height if it has one. */
  --grx-catalog-sticky-top:  var(--grx-sticky-top, 24px);

  display: block;
  width: 100%;
  max-width: var(--grx-catalog-content-width);
  margin-inline: auto;
  color: var(--grx-catalog-text);
  font-family: inherit;   /* follow the Elementor / theme global font (e.g. Neue Haas) */
}
.grx-catalog-page {
  width: min(var(--grx-catalog-content-width, 1600px), calc(100vw - 48px));
  max-width: none !important;
  margin-inline: auto;
  /* Body breathing room for EVERY catalog surface — shop, product categories,
     subcategories, tags and search. This was previously hardcoded to two term
     slugs, so every other archive rendered flush against the header/footer. */
  padding-block: 32px 56px;
}
.grx-catalog-page .grx-catalog { max-width: none; }
.elementor-widget-groxx-catalog { width: 100%; }
.elementor-widget-groxx-catalog > .elementor-widget-container > .grx-catalog {
  position: relative;
  left: 50%;
  width: var(--grx-catalog-effective-width);
  max-width: none;
  margin-inline: 0;
  transform: translateX(-50%);
}
.grx-catalog *,
.grx-catalog *::before,
.grx-catalog *::after { box-sizing: border-box; }
/* Clear the wp-admin bar so the sticky rail doesn't hide under it. */
.admin-bar .grx-catalog { --grx-catalog-sticky-top: calc(var(--grx-sticky-top, 24px) + 32px); }
@media (max-width: 782px) {
  .admin-bar .grx-catalog { --grx-catalog-sticky-top: calc(var(--grx-sticky-top, 24px) + 46px); }
}

.grx-catalog__head { margin: 0 0 22px; }
.grx-catalog__title {
  margin: 0;
  font-size: var(--grx-text-2xl, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--grx-catalog-text);
}
.grx-catalog__layout {
  display: grid;
  grid-template-columns: var(--grx-catalog-rail-w) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.grx-catalog--no-filters .grx-catalog__layout { grid-template-columns: minmax(0, 1fr); }
.grx-catalog__main { min-width: 0; }

/* Toolbar: count + tools (filter toggle for mobile, sort) */
.grx-catalog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--grx-catalog-line);
}
.grx-catalog__count {
  margin: 0;
  font-size: var(--grx-text-sm, 15px);
  color: var(--grx-catalog-muted);
}
.grx-catalog__count strong { color: var(--grx-catalog-text); font-weight: 600; }
.grx-catalog__tools { display: flex; align-items: center; gap: 12px; }

.grx-catalog__filter-toggle {
  display: none;   /* mobile only — see breakpoint */
  align-items: center;
  gap: 7px;
  padding: 9px 15px !important;
  font-size: var(--grx-text-sm, 15px) !important;
  font-weight: 600 !important;
  color: var(--grx-catalog-text) !important;
  background: #fff !important;
  border: 1px solid var(--grx-color-gray-300, #c4c4c4) !important;
  border-radius: var(--grx-catalog-radius) !important;
  cursor: pointer;
  line-height: 1.1 !important;
}
.grx-catalog__filter-ic { width: 17px; height: 17px; flex: 0 0 auto; }

.grx-catalog__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--grx-text-sm, 15px);
  color: var(--grx-catalog-muted);
}
.grx-catalog__sort-select {
  height: 42px !important;
  padding: 0 38px 0 14px !important;
  font-size: var(--grx-text-sm, 15px) !important;
  font-weight: 500 !important;
  color: var(--grx-catalog-text) !important;
  background-color: #fff !important;
  border: 1px solid var(--grx-color-gray-300, #c4c4c4) !important;
  border-radius: var(--grx-catalog-radius) !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.grx-catalog__sort-select:hover { border-color: var(--grx-color-gray-500, #767676) !important; }
.grx-catalog__sort-select:focus { outline: none; border-color: var(--grx-catalog-accent) !important; box-shadow: 0 0 0 3px var(--grx-catalog-accent-tint) !important; }

/* Filter rail — sticky within the container */
.grx-catalog__filters {
  min-width: 0;
  position: sticky;
  top: var(--grx-catalog-sticky-top);
  align-self: start;
  /* Never taller than the viewport; the option lists scroll internally instead.
     overflow-x hidden so a tight column never shows a phantom horizontal bar. */
  max-height: calc(100vh - var(--grx-catalog-sticky-top) - 16px);
  overflow: hidden auto;
  overscroll-behavior: contain;
  /* Thin scrollbar so the rail feels light. */
  scrollbar-width: thin;
  scrollbar-color: var(--grx-color-gray-300, #c4c4c4) transparent;
}
.grx-catalog__filters::-webkit-scrollbar { width: 6px; }
.grx-catalog__filters::-webkit-scrollbar-thumb { background: var(--grx-color-gray-300, #c4c4c4); border-radius: 999px; }

.grx-catalog__filter-form {
  border: 1px solid var(--grx-catalog-line);
  border-radius: var(--grx-catalog-radius);
  padding: 6px 18px 18px;
  background: #fff;
}
.grx-catalog__filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 2px 13px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--grx-catalog-line);
}
.grx-catalog__filters-title {
  flex: 1 1 auto;
  margin: 0 !important;
  font-size: var(--grx-text-md, 17px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--grx-catalog-text) !important;
}
.grx-catalog__filters-clear {
  flex: 0 0 auto;
  font-size: var(--grx-text-xs, 13px) !important;
  font-weight: 600 !important;
  color: var(--grx-catalog-muted) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.grx-catalog__filters-clear:hover { color: var(--grx-catalog-accent) !important; }

/* Close affordances (mobile drawer only — hidden on desktop where the rail is
   a static column). Shown by the ≤900px block. */
.grx-catalog__filters-close {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: -6px -6px -6px 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--grx-catalog-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--grx-catalog-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
}
.grx-catalog__filters-close:hover { color: var(--grx-catalog-text) !important; background: var(--grx-catalog-fill) !important; }
.grx-catalog__close-btn {
  display: none;
  width: 100%;
  min-height: 44px;
  margin-top: 10px !important;
  padding: 10px 18px !important;
  font-size: var(--grx-text-sm, 15px) !important;
  font-weight: 600 !important;
  color: var(--grx-catalog-text) !important;
  background: #fff !important;
  border: 1px solid var(--grx-color-gray-300, #c4c4c4) !important;
  border-radius: var(--grx-catalog-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
  font-family: inherit;
}
.grx-catalog__close-btn:hover { background: var(--grx-catalog-fill) !important; }
.grx-catalog__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 220ms ease;
}
.grx-catalog__backdrop.is-open { opacity: 1; }

.grx-catalog__facet { border-bottom: 1px solid var(--grx-catalog-line); }
.grx-catalog__facet:last-of-type { border-bottom: 0; }
.grx-catalog__facet-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100% !important;
  padding: 16px 2px 14px !important;
  margin: 0 !important;
  font-size: var(--grx-text-xs, 13px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--grx-catalog-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  text-align: left !important;
  line-height: 1.1 !important;
}
.grx-catalog__facet-head:hover { color: var(--grx-catalog-accent) !important; }
.grx-catalog__facet-chev {
  transition: transform 180ms ease;
  color: var(--grx-catalog-muted);
  font-size: 17px;
  line-height: 1;
  transform: rotate(90deg);   /* points down when expanded */
}
.grx-catalog__facet-head[aria-expanded="false"] .grx-catalog__facet-chev { transform: rotate(0deg); }
.grx-catalog__facet-body { padding: 2px 2px 16px; }
.grx-catalog__facet-head[aria-expanded="false"] + .grx-catalog__facet-body { display: none; }

.grx-catalog__optlist { list-style: none !important; margin: 0 !important; padding: 2px 0 !important; max-height: 264px; overflow: hidden auto; }
.grx-catalog__optlist li { margin: 0 !important; padding: 0 !important; }
.grx-catalog__optlist li::before { display: none !important; content: none !important; }
.grx-catalog__opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin: 0 -8px;
  border-radius: var(--grx-catalog-radius);
  font-size: var(--grx-text-sm, 15px);
  color: var(--grx-catalog-text);
  cursor: pointer;
  transition: background 120ms ease;
}
.grx-catalog__opt:hover { background: var(--grx-catalog-fill); }
.grx-catalog__opt input {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--grx-catalog-accent);
  flex: 0 0 auto;
  cursor: pointer;
}
.grx-catalog__opt-name { flex: 1 1 auto; line-height: 1.35; }
.grx-catalog__opt-count {
  flex: 0 0 auto;
  min-width: 26px;
  text-align: center;
  padding: 1px 7px;
  font-size: var(--grx-text-xs, 13px);
  font-variant-numeric: tabular-nums;
  color: var(--grx-catalog-muted);
  background: var(--grx-catalog-fill);
  border-radius: var(--grx-radius-pill, 999px);
}
/* A checked row reads as active. */
.grx-catalog__opt:has(input:checked) { color: var(--grx-catalog-text); font-weight: 600; }
.grx-catalog__opt:has(input:checked) .grx-catalog__opt-count { color: var(--grx-catalog-accent); background: var(--grx-catalog-accent-tint); }

.grx-catalog__price { display: flex; align-items: center; gap: 10px; }
.grx-catalog__price-field {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--grx-color-gray-300, #c4c4c4);
  border-radius: var(--grx-catalog-radius);
  padding: 0 10px;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.grx-catalog__price-cap { font-size: var(--grx-text-sm, 15px); color: var(--grx-catalog-muted); flex: 0 0 auto; }
.grx-catalog__price-field input {
  width: 100% !important;
  min-width: 0;
  height: 40px !important;
  border: 0 !important;
  padding: 0 4px !important;
  margin: 0 !important;
  font-size: var(--grx-text-sm, 15px) !important;
  background: transparent !important;
  color: var(--grx-catalog-text) !important;
  box-shadow: none !important;
}
.grx-catalog__price-field input:focus { outline: none !important; box-shadow: none !important; }
.grx-catalog__price-field:focus-within { border-color: var(--grx-catalog-accent); box-shadow: 0 0 0 3px var(--grx-catalog-accent-tint); }
.grx-catalog__price-sep { color: var(--grx-color-gray-300, #c4c4c4); flex: 0 0 auto; }

.grx-catalog__filter-actions { padding-top: 18px; }
.grx-catalog__apply {
  width: 100% !important;
  justify-content: center;
  border-radius: var(--grx-catalog-radius) !important;
}

/* Grid + empty + pagination */
.grx-pcards--catalog { --grx-pcards-gap: 22px; }
/* While a desktop AJAX filter is in flight, dim the grid so the swap reads. */
.grx-pcards.is-loading { opacity: 0.5; transition: opacity 160ms ease; pointer-events: none; }
.grx-catalog__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 64px 24px;
  color: var(--grx-catalog-muted);
}
.grx-catalog__empty-ic { width: 34px; height: 34px; color: var(--grx-color-gray-300, #c4c4c4); }
.grx-catalog__empty-title { margin: 10px 0 0 !important; font-size: var(--grx-text-md, 17px); font-weight: 600; color: var(--grx-color-gray-700, #3d3d3d); }
.grx-catalog__empty-body { margin: 0 !important; font-size: var(--grx-text-sm, 15px); }

/* Load more (infinite scroll button + spinner) */
.grx-catalog__loadmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 8px;
  margin-top: 32px;
}
.grx-catalog__loadmore[hidden] { display: none; }
.grx-catalog__loadmore-btn {
  min-height: 46px;
  padding: 11px 26px !important;
  font-size: var(--grx-text-sm, 15px) !important;
  font-weight: 600 !important;
  color: var(--grx-catalog-text) !important;
  background: #fff !important;
  border: 1px solid var(--grx-color-gray-300, #c4c4c4) !important;
  border-radius: var(--grx-catalog-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.grx-catalog__loadmore-btn:hover { border-color: var(--grx-color-gray-500, #767676) !important; background: var(--grx-catalog-fill) !important; }
.grx-catalog__loadmore-btn:disabled { opacity: 0.55; cursor: default; }
.grx-catalog__loadmore-spin {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--grx-color-gray-200, #e8e8ed);
  border-top-color: var(--grx-catalog-accent);
  border-radius: 50%;
  animation: grx-catalog-spin 0.7s linear infinite;
}
.grx-catalog__loadmore-spin[hidden] { display: none; }
@keyframes grx-catalog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .grx-catalog__loadmore-spin { animation-duration: 1.4s; } }

.grx-catalog__pagination { margin-top: 36px; }
.grx-catalog__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center;
}
.grx-catalog__pages li { margin: 0 !important; }
.grx-catalog__pages li::before { display: none !important; content: none !important; }
.grx-catalog__pages .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  font-size: var(--grx-text-sm, 15px);
  font-weight: 500;
  color: var(--grx-catalog-text);
  text-decoration: none !important;
  background: #fff;
  border: 1px solid var(--grx-catalog-line);
  border-radius: var(--grx-catalog-radius);
  transition: border-color 120ms ease, background 120ms ease;
}
.grx-catalog__pages .page-numbers:hover { border-color: var(--grx-color-gray-500, #767676); background: var(--grx-catalog-fill); }
.grx-catalog__pages .page-numbers.current {
  color: #fff;
  background: var(--grx-catalog-accent);
  border-color: var(--grx-catalog-accent);
}
.grx-catalog__pages .page-numbers.dots { border: 0; background: none; }

/* Mobile: rail becomes a slide-in drawer toggled by the toolbar button */
@media (max-width: 900px) {
  .grx-catalog__layout { grid-template-columns: 1fr; }
  .grx-catalog__filter-toggle { display: inline-flex; }
  .grx-catalog__filters {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    width: min(360px, 90vw);
    max-height: none;
    height: 100%;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.28);
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .grx-catalog__filters.is-open { transform: translateX(0); }
  .grx-catalog__filter-form { border: 0; padding: 0; }
  /* Header sticks to the top of the scrolling drawer so ✕ is always reachable. */
  .grx-catalog__filters-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 6px;
    background: #fff;
  }
  .grx-catalog__filters-close { display: inline-flex; }
  .grx-catalog__close-btn { display: inline-flex; align-items: center; justify-content: center; }
  .grx-catalog__backdrop { display: block; }
  /* When the drawer is open, freeze the page behind it. */
  body.grx-catalog-locked { overflow: hidden; }
}

/* Phones: tighter title + toolbar; grid to a single column. */
@media (max-width: 560px) {
  .grx-catalog__title { font-size: var(--grx-text-xl, 24px); }
  .grx-catalog__head { margin-bottom: 16px; }
  .grx-catalog__toolbar { gap: 12px; padding-bottom: 14px; margin-bottom: 18px; }
  .grx-catalog__tools { flex: 1 1 auto; justify-content: flex-end; }
  .grx-catalog__sort { flex: 0 1 auto; min-width: 0; }
  .grx-catalog__sort-label { display: none; }   /* the select value already reads "Latest" etc. */
  .grx-catalog__sort-select { max-width: 100%; }
  .grx-pcards--catalog { --grx-pcards-cols: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .grx-catalog__filters, .grx-catalog__facet-chev, .grx-catalog__opt, .grx-catalog__pages .page-numbers, .grx-catalog__backdrop { transition: none !important; }
}

/* ── Gear Showcase (tabbed category hero + product grid) ─────────────────────
   Groxx-design-system version of [gear_showcase]: dark hero + brand-red tabs,
   grid reuses the .grx-pcard tile. Token-driven with literal fallbacks so it
   renders standalone. */
.grx-gshow {
  --grx-gshow-accent:  var(--grx-color-brand-red, #bf0000);
  --grx-gshow-yellow:  var(--grx-color-brand-yellow, #fbb03b);
  --grx-gshow-text:    var(--grx-color-gray-900, #1a1a1a);
  --grx-gshow-muted:   var(--grx-color-gray-500, #767676);
  --grx-gshow-line:    var(--grx-color-gray-200, #e8e8ed);
  --grx-gshow-max:     1600px;
  --grx-gshow-hero-h:  380px;
  --grx-gshow-gap:     12px;
  --grx-gshow-radius:  var(--grx-radius-md, 4px);

  display: block;
  width: 100%;
  max-width: var(--grx-gshow-max);
  margin: 0 auto;
  padding: 48px 0 32px;
  color: var(--grx-gshow-text);
  font-family: inherit;   /* follow the Elementor / theme global font (e.g. Neue Haas) */
}
.grx-gshow *, .grx-gshow *::before, .grx-gshow *::after { box-sizing: border-box; }
.grx-gshow--empty { padding: 40px 0; color: var(--grx-gshow-muted); text-align: center; }

/* Top bar: heading + tabs */
.grx-gshow__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.grx-gshow__heading {
  margin: 0;
  font-size: clamp(26px, 4vw, 35px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--grx-gshow-text);
}
.grx-gshow__titlewrap { display: flex; flex-direction: column; min-width: 0; }
.grx-gshow__desc {
  /* Top margin lifts it off the heading; bottom margin lifts it off the tab
     baseline (the top bar is bottom-aligned, so this reads as a real gap). The
     Elementor "Description max width" control overrides max-width per breakpoint. */
  margin: 12px 0 10px;
  max-width: 62ch;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--grx-gshow-muted);
}

.grx-gshow__tabs {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-end;
  border-bottom: 2px solid var(--grx-gshow-line);
}
.grx-gshow__tab {
  padding: 9px 16px !important;
  font-family: inherit;
  font-size: var(--grx-text-xs, 13px) !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--grx-gshow-text) !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.1 !important;
  transition: color 180ms ease, border-color 180ms ease;
}
.grx-gshow__tab:hover { color: var(--grx-gshow-yellow) !important; }
.grx-gshow__tab.is-on { color: var(--grx-gshow-accent) !important; border-bottom-color: var(--grx-gshow-accent) !important; }

/* Secondary tab row — child categories of the active tab. Visually subordinate to
   the main row (no uppercase, lighter weight, pill shape) so the hierarchy reads at
   a glance instead of children looking like siblings of their own parent. */
.grx-gshow__subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 18px;
}
.grx-gshow__subtabs:empty { display: none; }
.grx-gshow__subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px !important;
  font-family: inherit;
  font-size: var(--grx-text-xs, 13px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--grx-gshow-muted) !important;
  background: transparent !important;
  border: 1px solid var(--grx-gshow-line) !important;
  border-radius: 999px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.grx-gshow__subtab:hover {
  color: var(--grx-gshow-text) !important;
  border-color: var(--grx-gshow-text) !important;
}
.grx-gshow__subtab.is-on {
  color: #fff !important;
  background: var(--grx-gshow-text) !important;
  border-color: var(--grx-gshow-text) !important;
}
.grx-gshow__subcount {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.55;
}

/* Body: hero (left) + product grid (right) */
.grx-gshow__body {
  --grx-gshow-cols: 4;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(var(--grx-gshow-cols), 1fr);
  gap: var(--grx-gshow-gap);
  align-items: stretch;
}

/* Hero panel */
.grx-gshow__hero {
  position: relative;
  border-radius: var(--grx-gshow-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--grx-gshow-hero-h);
  align-self: stretch;
  cursor: pointer;
  transition: box-shadow 300ms ease;
}
.grx-gshow__hero:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32); }
.grx-gshow__herobg { position: absolute; inset: 0; transition: transform 600ms ease; }
.grx-gshow__hero:hover .grx-gshow__herobg { transform: scale(1.05); }
.grx-gshow__heroscrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.05) 100%); }
.grx-gshow__herotag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 4px 10px;
  background: var(--grx-gshow-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 2px;
}
.grx-gshow__herocon { position: relative; z-index: 3; padding: 20px 18px 22px; }
.grx-gshow__herolabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 7px;
}
.grx-gshow__herotitle {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 6px;
}
.grx-gshow__herotitle em { font-style: normal; color: var(--grx-gshow-yellow); }
.grx-gshow__herodesc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grx-gshow__herodivider { width: 32px; height: 2px; background: var(--grx-gshow-accent); margin: 14px 0; border-radius: 2px; opacity: 0.85; }
.grx-gshow__herocount {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}
.grx-gshow__herobtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: #fff;
  color: var(--grx-gshow-text) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: var(--grx-gshow-radius);
  transition: background 180ms ease, color 180ms ease, transform 150ms ease;
}
.grx-gshow__herobtn:hover { background: var(--grx-gshow-accent); color: #fff !important; transform: translateX(3px); }

/* Product grid — reuses the .grx-pcard tile; here it just spans the right cols. */
.grx-gshow__grid {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grx-gshow-cols), 1fr);
  gap: var(--grx-gshow-gap);
  /* Stretch, not start: the hero has a 380px floor, so a start-aligned grid left the
     card bottoms sitting ~30px short of the hero's — visibly ragged. */
  align-content: stretch;
  align-self: stretch;
}
.grx-gshow__grid.is-loading { opacity: 0.5; transition: opacity 160ms ease; pointer-events: none; }
.grx-gshow__grid .grx-pcard {
  --grx-pcard-min-h: 300px;
  --grx-pcard-media-h: 200px;
  height: 100%;
}
/* A sparse category (1–3 tiles on the page) must NOT stretch its tiles wide + tall
   to fill the hero-height grid — that blew the product shot up into a warped/cropped
   box. Above the stacked breakpoint, cap the product columns at a normal tile width
   (the hero absorbs the freed space) and let the tiles sit at their natural height,
   top-aligned, instead of matching the 380px hero. */
@media (min-width: 1101px) {
  .grx-gshow__body[data-cols="1"],
  .grx-gshow__body[data-cols="2"],
  .grx-gshow__body[data-cols="3"] {
    grid-template-columns: minmax(220px, 1fr) repeat(var(--grx-gshow-cols), minmax(0, 320px));
  }
  .grx-gshow__body[data-cols="1"] .grx-gshow__grid,
  .grx-gshow__body[data-cols="2"] .grx-gshow__grid,
  .grx-gshow__body[data-cols="3"] .grx-gshow__grid {
    align-self: start;
    align-content: start;
  }
  .grx-gshow__body[data-cols="1"] .grx-gshow__grid .grx-pcard,
  .grx-gshow__body[data-cols="2"] .grx-gshow__grid .grx-pcard,
  .grx-gshow__body[data-cols="3"] .grx-gshow__grid .grx-pcard {
    height: auto;
  }
}
.grx-gshow__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--grx-gshow-muted);
}
.grx-gshow__empty p { margin: 0; font-size: var(--grx-text-sm, 15px); }

/* Pagination */
.grx-gshow__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 16px;
}
.grx-gshow__pager:empty { display: none; }
.grx-gshow__pginfo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--grx-gshow-muted);
  margin-right: 6px;
}
.grx-gshow__pgbtn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--grx-gshow-text) !important;
  background: #fff !important;
  border: 1px solid var(--grx-gshow-line) !important;
  border-radius: var(--grx-gshow-radius) !important;
  cursor: pointer;
  line-height: 1 !important;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.grx-gshow__pgbtn:hover:not(:disabled) { border-color: var(--grx-gshow-text) !important; background: var(--grx-gshow-text) !important; color: #fff !important; }
.grx-gshow__pgbtn.is-on { border-color: var(--grx-gshow-accent) !important; background: var(--grx-gshow-accent) !important; color: #fff !important; }
.grx-gshow__pgbtn:disabled { opacity: 0.3; cursor: default; }

/* Responsive */
@media (max-width: 1100px) {
  .grx-gshow__body { grid-template-columns: 1fr 1fr; }
  .grx-gshow__grid { grid-column: auto; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grx-gshow__body { grid-template-columns: 1fr; }
  .grx-gshow__grid { grid-column: auto; grid-template-columns: repeat(2, 1fr); }
  .grx-gshow__hero { min-height: 240px; }
  /* Drop the 300px card floor (set unconditionally above) on phones so the
     two-up cards size to content instead of padding dead space. Must live here,
     after that rule, to win the equal-specificity tie on source order. */
  .grx-gshow__grid .grx-pcard { --grx-pcard-min-h: 0; }
}
@media (max-width: 400px) {
  .grx-gshow__grid { grid-template-columns: 1fr; }
  .grx-gshow__tab { padding: 7px 10px !important; }
}
/* Below the tablet breakpoint the body drops to explicit column counts, so the
   sparse-grid media bump above would apply on phones too — where tracks are narrow,
   not wide. Restore the base height there. */
@media (max-width: 1100px) {
  .grx-gshow__body[data-cols] .grx-pcard { --grx-pcard-media-h: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .grx-gshow__herobg, .grx-gshow__hero, .grx-gshow__herobtn, .grx-gshow__pgbtn, .grx-gshow__grid, .grx-gshow__subtab { transition: none !important; }
}

/* ── Groxx Articles (DeWalt-style post carousel) ─────────────────────────────
   Token-driven with literal fallbacks so it renders standalone (shortcode) and
   under Elementor (widget writes the tokens via responsive selectors). Sharp
   edges, one strong accent — per styles.md's DeWalt design principles. */
.grx-articles {
  --grx-articles-cols:   4;
  --grx-articles-gap:    24px;
  --grx-articles-max:    1600px;
  --grx-articles-accent: var(--grx-color-brand-red, #bf0000);
  --grx-articles-line:   var(--grx-color-gray-200, #e0e0e0);
  --grx-articles-text:   var(--grx-color-gray-900, #1a1a1a);
  --grx-articles-muted:  var(--grx-color-gray-500, #767676);

  display: block;
  width: 100%;
  max-width: var(--grx-articles-max);
  margin: 0 auto;
  padding: 40px 0;
  font-family: inherit;   /* follow the Elementor / theme global font (e.g. Neue Haas) */
  color: var(--grx-articles-text);
}
.grx-articles *, .grx-articles *::before, .grx-articles *::after { box-sizing: border-box; }
.grx-articles--empty { padding: 40px 0; color: var(--grx-articles-muted); text-align: center; }

/* Top bar: heading (+ description) left, nav arrows right. */
.grx-articles__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.grx-articles__titlewrap { display: flex; flex-direction: column; min-width: 0; }
.grx-articles__heading {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.02;
}
.grx-articles__desc {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--grx-articles-muted);
}

/* DeWalt-feel arrows: square, bordered, glyph flips to white on brand fill. */
.grx-articles__nav { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.grx-articles__arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grx-color-white, #fff);
  border: 1.5px solid var(--grx-color-gray-300, #c4c4c4);
  border-radius: 0;
  color: var(--grx-articles-text);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.grx-articles__arrow svg { width: 20px; height: 20px; }
.grx-articles__arrow:hover:not(:disabled),
.grx-articles__arrow:focus-visible:not(:disabled) {
  background: var(--grx-articles-accent);
  border-color: var(--grx-articles-accent);
  color: #fff;
}
.grx-articles__arrow:disabled { opacity: 0.3; cursor: default; }

/* Track: horizontal scroll that overflows to the right; scrollbar hidden. */
.grx-articles__track {
  display: flex;
  gap: var(--grx-articles-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.grx-articles__track::-webkit-scrollbar { display: none; }
.grx-articles__track.is-dragging { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }

.grx-articles__card {
  flex: 0 0 calc((100% - (var(--grx-articles-cols) - 1) * var(--grx-articles-gap)) / var(--grx-articles-cols));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--grx-color-white, #fff);
  border: 1px solid var(--grx-articles-line);
  border-radius: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.grx-articles__card:hover {
  border-color: #b9bdc4;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.grx-articles__imglink {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--grx-color-gray-100, #f4f4f4);
}
.grx-articles__imglink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.grx-articles__card:hover .grx-articles__imglink img { transform: scale(1.04); }
.grx-articles__imgph { position: absolute; inset: 0; background: linear-gradient(135deg, #f4f4f4, #e6e6e6); }
.grx-articles__cat {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  background: var(--grx-articles-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.grx-articles__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 16px 18px 20px;
}
.grx-articles__meta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--grx-articles-muted);
}
.grx-articles__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 800;
  line-height: 1.25;
  /* Case is controllable (Elementor "Title case" / shortcode title_transform);
     defaults to uppercase for the DeWalt look. */
  text-transform: var(--grx-articles-title-tt, uppercase);
  color: var(--grx-articles-text) !important;
  text-decoration: none !important;
}
.grx-articles__card:hover .grx-articles__title { color: var(--grx-articles-accent) !important; }
.grx-articles__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--grx-color-gray-700, #3d3d3d);
}
.grx-articles__more {
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--grx-articles-accent) !important;
  text-decoration: none !important;
}
.grx-articles__more svg { width: 15px; height: 15px; }
.grx-articles__more:hover { gap: 9px; }

@media (max-width: 1024px) {
  .grx-articles { --grx-articles-cols: 2.2; }
}
@media (max-width: 600px) {
  .grx-articles { --grx-articles-cols: 1.15; --grx-articles-gap: 14px; padding: 28px 0; }
  .grx-articles__nav { display: none; }   /* touch swipe on phones */
}
@media (prefers-reduced-motion: reduce) {
  .grx-articles__track { scroll-behavior: auto; }
  .grx-articles__card, .grx-articles__imglink img { transition: none !important; }
}