/* ==========================================================================
   ERS — CONTENT / EDITORIAL COMPONENTS
   Elk River Sports. Added 2026-09-07. Reviews block added 2026-09-08.

   Every value here comes from 00-tokens.css. Change a token, every guide,
   hub and landing page follows. Do not hard-code colors or spacing below.

   Components
     .ers-article      article shell + reading rhythm
     .ers-lede         opening paragraph
     .ers-callout      --key / --warn / --reg
     .ers-figure       image + caption
     .ers-table-wrap   scrollable data table
     .ers-shop         commerce band inside editorial
     .ers-cta          conversion panel
     .ers-hub          hub grid + cards
     .ers-sources      citation list
   ========================================================================== */

/* ---------- Article shell ---------- */
.ers-article{
  font-family: var(--ers-body);
  font-size: var(--ers-fs-body);
  line-height: var(--ers-lh-body);
  color: var(--ers-text);
}
.ers-article > p,
.ers-article > ul,
.ers-article > ol{ max-width: var(--ers-measure); }
.ers-article > * + *{ margin-top: var(--ers-space-3); }
.ers-article > h2{
  font-family: var(--ers-head);
  line-height: var(--ers-lh-tight);
  margin-top: var(--ers-space-6);
  margin-bottom: var(--ers-space-2);
}
.ers-article > h3{
  font-family: var(--ers-head);
  line-height: var(--ers-lh-tight);
  margin-top: var(--ers-space-5);
  margin-bottom: var(--ers-space-2);
}
.ers-article a{ color: var(--ers-link); }
.ers-article a:hover{ color: var(--ers-link-hover); }

.ers-lede{
  font-size: var(--ers-fs-lede);
  color: var(--ers-text);
  max-width: var(--ers-measure-lede);
}

.ers-kicker{
  font-family: var(--ers-head);
  font-size: var(--ers-fs-kicker);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ers-cta);
  display: block;
  margin-bottom: var(--ers-space-1);
}

/* ---------- Callouts ---------- */
.ers-callout{
  border-left: 4px solid var(--ers-callout-key-edge);
  background: var(--ers-callout-key-bg);
  padding: var(--ers-space-3) var(--ers-space-4);
  margin: var(--ers-space-4) 0;
  border-radius: 0 var(--ers-radius-sm) var(--ers-radius-sm) 0;
  max-width: var(--ers-measure);
}
.ers-callout > :first-child{ margin-top: 0; }
.ers-callout > :last-child{ margin-bottom: 0; }
.ers-callout--warn{
  border-left-color: var(--ers-callout-warn-edge);
  background: var(--ers-callout-warn-bg);
}
.ers-callout--reg{
  border-left-color: var(--ers-callout-reg-edge);
  background: var(--ers-callout-reg-bg);
}

/* ---------- Figures ---------- */
.ers-figure{ margin: var(--ers-space-5) 0; }
.ers-figure img{
  width: 100%;
  /* Constrain the frame so a tall source photo cannot swallow the page.
     Same 16:9 contract as the hub cards, so editorial imagery stays uniform. */
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  display: block;
  border-radius: var(--ers-radius-sm);
  background: var(--ers-panel);
}
.ers-figure figcaption{
  font-size: var(--ers-fs-small);
  color: var(--ers-muted);
  margin-top: var(--ers-space-2);
  max-width: var(--ers-measure);
}

/* ---------- Data tables ---------- */
.ers-table-wrap{ overflow-x: auto; margin: var(--ers-space-4) 0; }
.ers-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ers-fs-small);
}
.ers-table th,
.ers-table td{
  border: 1px solid var(--ers-border);
  padding: var(--ers-space-2) var(--ers-space-3);
  text-align: left;
  vertical-align: top;
}
.ers-table th{
  background: var(--ers-surface-raised);
  font-family: var(--ers-head);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--ers-fs-kicker);
}
.ers-table tbody tr:hover{ background: rgba(255,255,255,.03); }

/* ---------- Season status pills ----------
   Filled in by ers-season-status.js on any table row carrying data-s / data-e.
   Colors come from the shared pill tokens so they match the rest of the site. */
.ers-pill{
  display: inline-block;
  font-family: var(--ers-head);
  font-size: var(--ers-fs-kicker);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .2em .6em;
  border-radius: 999px;
  border: 1px solid transparent;
}
.ers-pill--open{ color: var(--ers-green);      border-color: var(--ers-green);      background: rgba(92,184,122,.12); }
.ers-pill--soon{ color: var(--ers-cta);        border-color: var(--ers-cta);        background: rgba(200,168,75,.12); }
.ers-pill--done{ color: var(--ers-text-dim);   border-color: var(--ers-border); }

.ers-nowbox{
  margin: var(--ers-space-4) 0;
  padding: var(--ers-space-3);
  border-left: 3px solid var(--ers-green);
  background: var(--ers-callout-key-bg);
  border-radius: var(--ers-radius-sm);
  max-width: var(--ers-measure);
}
.ers-nowbox__label{
  font-family: var(--ers-head);
  font-size: var(--ers-fs-kicker);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ers-green);
  margin-bottom: var(--ers-space-1);
}

/* ---------- Commerce band inside editorial ---------- */
.ers-shop{
  margin: var(--ers-space-5) 0;
  padding-top: var(--ers-space-3);
  border-top: 1px solid var(--ers-line);
}
.ers-shop__intro{
  color: var(--ers-muted);
  font-size: var(--ers-fs-small);
  max-width: var(--ers-measure);
  margin-bottom: var(--ers-space-3);
}
.ers-shop__more{
  display: inline-block;
  margin-top: var(--ers-space-2);
  font-family: var(--ers-head);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: var(--ers-fs-kicker);
}

/* ---------- Conversion panel ---------- */
.ers-cta{
  background: var(--ers-panel-warm);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius);
  padding: var(--ers-space-4) var(--ers-space-4);
  margin: var(--ers-space-5) 0;
}
.ers-cta > :first-child{ margin-top: 0; }
.ers-cta > :last-child{ margin-bottom: 0; }
.ers-cta h3{ font-family: var(--ers-head); margin-bottom: var(--ers-space-2); }
.ers-cta--gold{ border-color: var(--ers-cta); }
.ers-cta h2{
  font-family: var(--ers-head);
  line-height: var(--ers-lh-tight);
  margin-bottom: var(--ers-space-2);
}
.ers-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ers-space-2);
  margin-top: var(--ers-space-3);
}
.ers-cta__more{
  margin-top: var(--ers-space-3);
  font-size: var(--ers-fs-small);
}

/* ---------- Button ----------
   The .ers-btn base and its --primary / --secondary color variants already
   live in 10-base.css. Do not redefine them here; this only adds the layout
   editorial content needs (inline-block + padding), so the colors stay in
   one place. Use: class="ers-btn ers-btn--primary".
   ------------------------------------------------------------------------ */
.ers-btn{
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* touch target */
  font-size: var(--ers-fs-small);
  padding: var(--ers-space-2) var(--ers-space-3);
}
/* Same cascade trap as the hub cards: the theme's `.page-content a` (0,1,1)
   underlines every link and out-specifies a bare `.ers-btn` (0,1,0). */
.ers-cta a.ers-btn,
.ers-article a.ers-btn,
.ers-cta a.ers-btn:hover,
.ers-article a.ers-btn:hover{ text-decoration: none; }

/* ---------- Honeypot ----------
   Off-screen rather than display:none. Bots that skip hidden inputs still see
   this one, and screen readers get a real label telling them to leave it empty. */
.ers-hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Guide breadcrumb ---------- */
.ers-crumb{
  font-family: var(--ers-head);
  font-size: var(--ers-fs-kicker);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--ers-space-3);
}
.ers-crumb a{ color: var(--ers-muted); text-decoration: none; }
.ers-crumb a:hover{ color: var(--ers-cta); }

/* ---------- Header navigation ----------
   Six top-level items share one row with the logo (200px) and the account/cart
   icons (86px). At Elementor's tablet breakpoint (1024px) that leaves roughly
   698px for the menu; the six items measure ~678px, so they fit and Elementor's
   own burger takes over below 1024.

   This is why the menu is six items and not seven: at seven it measured 762px,
   overflowed its container, and — because the nav's parent is overflow:visible —
   painted straight over the account and cart icons instead of wrapping. Keep new
   top-level items out of this bar; put them in a dropdown. */
.elementor-widget-nav-menu{ min-width: 0; }
.elementor-widget-nav-menu ul.elementor-nav-menu{ min-width: 0; max-width: 100%; }

.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;
}
@media (max-width: 1200px){
  .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{
    padding-left: 7px;
    padding-right: 7px;
    font-size: 12.5px;
  }
}
/* Submenus: readable, on-brand, and never clipped.
   Elementor's default sub-item color is near-black, which is invisible on the
   dark panel, and the panel sizes to the parent rather than its own labels. */
.elementor-nav-menu--dropdown,
.elementor-nav-menu__container.elementor-nav-menu--dropdown{
  background: var(--ers-panel-2);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius-sm);
  box-shadow: var(--ers-shadow-card);
  width: max-content;
  min-width: 210px;
}
.elementor-nav-menu--dropdown a.elementor-sub-item,
.elementor-nav-menu--dropdown a.elementor-sub-item:visited,
.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown a.elementor-item:visited{
  color: var(--ers-text);
  font-size: var(--ers-fs-small);
  padding: 11px 20px;
  white-space: nowrap;
}
.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-item:focus,
.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
  color: var(--ers-cta);
  background: var(--ers-surface-raised);
}

/* Mobile flyout: full width, solid, comfortable tap targets. */
@media (max-width: 1024px){
  .elementor-nav-menu--dropdown{
    width: 100% !important;
    min-width: 0;
  }
  .elementor-nav-menu--dropdown a.elementor-item,
  .elementor-nav-menu--dropdown a.elementor-sub-item{
    min-height: 48px;
    display: flex;
    align-items: center;
    white-space: normal;
  }
}

/* ---------- Category archive hero ----------
   Rendered server-side by mu-plugins/ers-category-hero.php from the real term.
   Replaced a hardcoded JS map that drifted out of sync with the taxonomy. */
.ers-cathero{
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--ers-space-3) 0;
}
.ers-cathero .ers-kicker{ margin-bottom: var(--ers-space-2); }
.ers-cathero__title{
  font-family: var(--ers-head);
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 700;
  color: var(--ers-text);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.05;
  margin: 0 0 var(--ers-space-2);
}
.ers-cathero__dek{
  color: var(--ers-muted);
  font-size: var(--ers-fs-body);
  line-height: var(--ers-lh-body);
  max-width: 560px;
  margin: 0 auto var(--ers-space-4);
}
.ers-cathero__subs{
  display: flex;
  gap: var(--ers-space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.ers-chip{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;              /* touch target */
  padding: var(--ers-space-2) var(--ers-space-3);
  background: var(--ers-surface-raised);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius-sm);
  font-family: var(--ers-body);
  font-size: var(--ers-fs-small);
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
/* Theme underlines every .page-content a at (0,1,1); out-specify it. */
.ers-cathero a.ers-chip,
.ers-cathero a.ers-chip:hover{
  text-decoration: none;
  color: var(--ers-text);
}
.ers-cathero a.ers-chip:hover{
  background: rgba(200,168,75,.15);
  border-color: var(--ers-cta);
}
.ers-chip__n{
  color: var(--ers-text-dim);
  font-size: var(--ers-fs-kicker);
}

/* ---------- Hub grid ---------- */
.ers-hub{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ers-space-4);
  margin: var(--ers-space-5) 0;
}
.ers-hub__card{
  display: flex;
  flex-direction: column;
  background: var(--ers-panel-2);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: var(--ers-text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ers-hub__card:hover{
  transform: translateY(-3px);
  border-color: var(--ers-cta);
  box-shadow: var(--ers-shadow-card);
}
.ers-hub__media{
  aspect-ratio: 16 / 9;
  background: var(--ers-panel);
  overflow: hidden;
}
.ers-hub__media img{ width:100%; height:100%; object-fit: cover; display:block; }
.ers-hub__body{ padding: var(--ers-space-3); display:flex; flex-direction:column; gap: var(--ers-space-1); }
.ers-hub__title{
  font-family: var(--ers-head);
  font-size: 1.15rem;
  line-height: var(--ers-lh-tight);
  color: var(--ers-text);
}
.ers-hub__dek{ font-size: var(--ers-fs-small); color: var(--ers-muted); }
.ers-hub__meta{
  font-size: var(--ers-fs-kicker);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ers-text-dim);
  margin-top: var(--ers-space-1);
}
.ers-hub__card--soon{ opacity: .55; pointer-events: none; }
.ers-hub__card--soon .ers-hub__meta{ color: var(--ers-cta); }

/* The theme ships `.comments-area a, .page-content a { text-decoration: underline }`
   at specificity (0,1,1), and Elementor's kit sets `.elementor-kit-6 a { color }`
   at the same weight — both out-specify a bare `.ers-hub__card` (0,1,0). An
   ancestor's underline also PROPAGATES into descendants and cannot be switched
   off by the child, so the whole card renders as underlined link text unless the
   card itself wins. `.ers-hub a.ers-hub__card` is (0,2,1) and does. */
.ers-hub a.ers-hub__card,
.ers-hub a.ers-hub__card:hover,
.ers-hub a.ers-hub__card:focus{
  text-decoration: none;
  color: var(--ers-text);
}

/* ---------- WooCommerce product loop ----------
   WooCommerce ships `ul.products` as display:block with floated `li.product`.
   Floats do not equalize height, so one short product image (a 4:3 flashlight
   next to a 1:1 binocular) leaves the next row starting at a different
   baseline — the ragged stagger visible on the home page grid and every
   category archive. Grid fixes the row; the fixed-ratio media box and the
   flex card fix the card, so titles, prices and buttons line up across the row
   no matter how tall the source photo is.

   auto-fill/minmax rather than the theme's `columns-N` class so the same rule
   works in a full-width archive, a narrow sidebar layout and an Elementor
   shortcode widget without a per-context override. */
.woocommerce ul.products,
ul.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ers-space-4);
  margin: var(--ers-space-4) 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after{ content: none !important; display: none !important; }

.woocommerce ul.products li.product,
ul.products li.product,
ul.products li.product-category{
  display: flex !important;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}

/* Uniform media box. `contain` (not `cover`) because product photography is
   shot on white with the item framed edge to edge — cropping it would cut the
   muzzle off a scope or the head off a flashlight. */
.woocommerce ul.products li.product a img,
ul.products li.product a img{
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: var(--ers-radius-sm);
  margin-bottom: var(--ers-space-2);
}

/* Push price + button to the bottom of every card so the row reads as a row. */
.woocommerce ul.products li.product .price,
ul.products li.product .price{ margin-top: auto; }
.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
ul.products li.product .added_to_cart{
  align-self: flex-start;
  margin-top: var(--ers-space-2);
}

/* Phones: force two across rather than letting auto-fill drop to one. A 220px
   minimum collapses to a single column below ~500px, which turns the grid into
   a very long scroll of very large cards. Two narrow cards is what shoppers
   expect on a phone and keeps four products above the fold. */
@media (max-width: 767px){
  .woocommerce ul.products,
  ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ers-space-3);
  }
}

/* ---------- Single product gallery ----------
   Product photography arrives from the distributors shot on white, and some of
   it carries a transparent background. On our dark page a transparent PNG has
   nothing behind it and the product reads as a black shape on a black panel.
   Give the gallery the same white plate the loop cards use, so a product looks
   the same in the grid and on its own page. */
.woocommerce-product-gallery{ background: transparent; }
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image{
  background: #fff;
  border-radius: var(--ers-radius-sm);
  overflow: hidden;
}
.woocommerce-product-gallery__image img{
  display: block;
  width: 100%;
  height: auto;
}
.flex-control-thumbs li img{
  background: #fff;
  border-radius: var(--ers-radius-sm);
}

/* ---------- Product page assurance list ----------
   Sits directly under Add to Cart on the single product template. This is the
   spot where a first-time visitor decides whether a shop they have never heard
   of gets their card number, so every line is something we can actually stand
   behind — no invented shipping windows, no "easy returns" (ours are not; the
   policy carries a restocking fee, so we link it rather than characterize it). */
.ers-assure{
  list-style: none;
  margin: var(--ers-space-3) 0 0;
  padding: var(--ers-space-3);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius-sm);
  background: var(--ers-panel-2);
  display: grid;
  gap: var(--ers-space-2);
}
.ers-assure__item{
  display: flex;
  gap: var(--ers-space-2);
  align-items: flex-start;
  font-size: var(--ers-fs-small);
  line-height: var(--ers-lh-body);
  color: var(--ers-muted);
  margin: 0;
}
.ers-assure__item strong{ color: var(--ers-text); font-weight: 600; }
.ers-assure__icon{
  color: var(--ers-green);
  font-weight: 700;
  line-height: inherit;
  flex: 0 0 auto;
}
/* Same (0,1,1) theme underline trap as the hub cards. */
.ers-assure a,
.ers-assure a:hover{ color: var(--ers-link); text-decoration: underline; }
.ers-assure a:hover{ color: var(--ers-link-hover); }

/* ---------- Product reviews ----------
   There was nowhere on the site to leave a review: the single-product template
   never rendered a reviews block, and WooCommerce only exposes the review form
   inside the product tabs. So the Product Data Tabs widget is now on the
   template, and `woocommerce_product_tabs` in ers-filters.php strips the
   description and additional-information tabs off it — the template already
   renders both as their own widgets under Details and Specifications.

   One tab left means the tab strip reads as a section heading, so it is styled
   like one rather than like a control.

   Reviews are verified-owner-only (woocommerce_review_rating_verification_
   required = yes), so the form appears for buyers and no one else. Everyone
   else sees the list. */
.ers-reviews .woocommerce-tabs ul.tabs{
  list-style: none;
  margin: 0 0 var(--ers-space-4);
  padding: 0 0 var(--ers-space-2);
  border-bottom: 1px solid var(--ers-line);
}
.ers-reviews .woocommerce-tabs ul.tabs li{ display: inline-block; margin: 0; padding: 0; }
.ers-reviews .woocommerce-tabs ul.tabs li a{
  font-family: var(--ers-head);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  letter-spacing: .02em;
  color: var(--ers-text);
  text-decoration: none;
  padding: 0;
}

/* Woo prints the count as "Reviews (0)"; an empty product should not lead with
   a zero, so the count is hidden until there is something to count. */
.ers-reviews .woocommerce-tabs ul.tabs li a .count:empty{ display: none; }

.ers-reviews #reviews{ color: var(--ers-text); }
.ers-reviews #reviews p,
.ers-reviews #reviews label,
.ers-reviews #reviews .woocommerce-review__author,
.ers-reviews #reviews .woocommerce-review__published-date{ color: var(--ers-muted); }
.ers-reviews .comment-reply-title{
  font-family: var(--ers-head);
  font-size: 1.1rem;
  color: var(--ers-text);
  display: block;
  margin: 0 0 var(--ers-space-2);
}
.ers-reviews ol.commentlist{ list-style: none; margin: 0 0 var(--ers-space-4); padding: 0; }
.ers-reviews ol.commentlist li{
  border: 1px solid var(--ers-line);
  border-radius: var(--ers-radius-sm);
  padding: var(--ers-space-3);
  margin: 0 0 var(--ers-space-3);
  background: var(--ers-surface-raised);
}
.ers-reviews .star-rating span{ color: var(--ers-cta); }

/* The comment form inherits the theme's light inputs, which are unreadable on
   the dark product page. Same treatment the checkout fields get. */
.ers-reviews #review_form input[type="text"],
.ers-reviews #review_form input[type="email"],
.ers-reviews #review_form textarea{
  width: 100%;
  background: var(--ers-surface-raised);
  color: var(--ers-text);
  border: 1px solid var(--ers-border);
  border-radius: var(--ers-radius-sm);
  padding: 12px 14px;
  font-family: var(--ers-body);
  font-size: var(--ers-fs-body);
}
.ers-reviews #review_form input::placeholder,
.ers-reviews #review_form textarea::placeholder{ color: var(--ers-muted); }
.ers-reviews #review_form input[type="submit"]{
  background: var(--ers-cta);
  color: var(--ers-cta-contrast);
  border: 0;
  border-radius: var(--ers-radius-sm);
  padding: 13px 26px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}
.ers-reviews #review_form input[type="checkbox"]{ width: 20px; height: 20px; }
.ers-reviews .comment-form-cookies-consent{ display: flex; gap: 10px; align-items: center; }

/* ---------- Elementor loop-grid product cards ----------
   Category archives, search and related products all render through Elementor's
   loop-grid with the C2205 loop item (79777) — NOT `ul.products`, so the
   WooCommerce rules above never reach them.

   The source photos vary wildly in shape: on one flashlights row the images
   measured 200px, 98px and 134px tall inside the same 277px column, and a 66px
   sliver of a product reads as a broken card. Give every card the same square
   media box and the row becomes a row.

   Masonry is off at the widget level (it staggered the rows); this keeps the
   cards themselves the same shape so the grid stays honest even where a loop
   grid elsewhere still has it on. */
.e-loop-item .elementor-widget-image{ width: 100%; }
.e-loop-item .elementor-widget-image .elementor-widget-container,
.e-loop-item .elementor-widget-image a{ display: block; width: 100%; }
.e-loop-item .elementor-widget-image img{
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  /* contain, not cover: product shots are framed edge to edge on white, so a
     crop cuts the objective off a scope or the head off a light. */
  object-fit: contain;
  background: #fff;
  border-radius: var(--ers-radius-sm);
  display: block;
}

/* Equal-height cards with the price and button pinned to the bottom edge, so a
   two-line product title never pushes its buy button out of line with its
   neighbors'. */
.elementor-loop-container .e-loop-item{
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* The C2205 loop item nests two containers deep: .e-loop-item > .e-con (card)
   > .e-con (the text block holding category, brand, title, price, buttons).
   BOTH have to grow, or the inner block sizes to its content and a two-line
   title pushes its buy button below its neighbors'.

   `:not(.e-grid)` matters. Loop item "product loop" (58066), used by the
   related-products grid, is authored as a CSS GRID container with
   `grid-template-columns: 1fr 3fr`. Forcing display:flex on it silently threw
   away that author's layout. Grid containers already equalize their own rows,
   so leave them alone. */
.elementor-loop-container .e-loop-item > .e-con:not(.e-grid),
.elementor-loop-container .e-loop-item > .elementor-section{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.elementor-loop-container .e-loop-item > .e-con:not(.e-grid) > .e-con:not(.e-grid){
  flex: 1 1 auto;
}
.e-loop-item .elementor-widget-woocommerce-product-price{ margin-top: auto; }

/* ---------- Signup form in a narrow column ----------
   FluentForm #2 lays its three fields out as one row, which is right in the
   home page band (660px) and wrong in the footer's third-width column, where
   the name and email inputs collapsed to about 48px — "Fir" and "Yo". Stack
   the rows anywhere the form is in a narrow container. */
[data-elementor-type="footer"] .fluentform .ff-el-group,
[data-elementor-type="footer"] .fluentform .ff-t-container{
  display: block;
  width: 100%;
}
[data-elementor-type="footer"] .fluentform .ff-t-cell{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0;
  padding-right: 0;
}
[data-elementor-type="footer"] .fluentform .ff-el-group:not(.ers-hp){
  margin-bottom: var(--ers-space-2);
}
[data-elementor-type="footer"] .fluentform input[type="text"],
[data-elementor-type="footer"] .fluentform input[type="email"],
[data-elementor-type="footer"] .fluentform .ff-btn-submit{
  width: 100%;
}
/* The honeypot must stay off-screen even inside the footer override above. */
[data-elementor-type="footer"] .fluentform .ers-hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Home page category cards ----------
   Three cards in a row whose copy runs to two or three lines. Without this the
   cards size to their own content and the three buy buttons land at three
   different heights, which reads as sloppy at a glance even when nobody can say
   why. Equalize the card, then push the button to the floor.

   NOTE ON THE SELECTOR: `_css_classes` was set to `ers-cards` on the row
   container and it IS saved in the Elementor data — but it does not render into
   the container's class attribute on the front end, so a `.ers-cards` selector
   never matches. Verified by fetching the served HTML. The element-id class
   Elementor always emits is used instead; keep `.ers-cards` in the selector list
   so this starts working for free if that control is ever honored. */
.ers-cards,
.elementor-element-d89409d{ align-items: stretch; }
/* `height: 100%` here was the bug, not the fix. On a flex child of a row whose
   own height is content-driven, a percentage height has nothing to resolve
   against, so it collapses to auto and CANCELS the stretch it was meant to
   reinforce — cards measured 515/491/515 inside a 535px row. Let align-items:
   stretch do the work and only set the flex basis so the columns are even. */
.ers-cards > .e-con.e-child,
.elementor-element-d89409d > .e-con.e-child{
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
.ers-cards > .e-con.e-child > .elementor-widget-button,
.elementor-element-d89409d > .e-con.e-child > .elementor-widget-button{
  margin-top: auto;
}
.ers-cards .elementor-widget-image img,
.elementor-element-d89409d .elementor-widget-image img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ---------- Home page brand-story band ----------
   Text column ran 604px against a 367px image column, leaving a wedge of dead
   dark space beside the photo. Let the image fill its column so the two halves
   read as one band. `cover` is right here (unlike product shots) — this is a
   landscape photograph, and cropping it is what a magazine would do. */
.elementor-element-3ff483d{ display: flex; }
.elementor-element-3ff483d .elementor-widget-image,
.elementor-element-3ff483d .elementor-widget-image .elementor-widget-container,
.elementor-element-3ff483d .elementor-widget-image a{
  display: block;
  width: 100%;
  height: 100%;
}
.elementor-element-3ff483d .elementor-widget-image img{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--ers-radius-sm);
  display: block;
}

/* ---------- Sources ---------- */
.ers-sources{
  margin-top: var(--ers-space-5);
  padding-top: var(--ers-space-3);
  border-top: 1px solid var(--ers-line);
  font-size: var(--ers-fs-small);
  color: var(--ers-muted);
}
.ers-sources h2{ font-size: 1rem; }
.ers-sources ul{ margin: var(--ers-space-2) 0 0; padding-left: 1.1rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ers-hub__card{ transition: none; }
  .ers-hub__card:hover{ transform: none; }
}