/**
 * Theme Name:     Abro
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   abro
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */


.elementor-shortcode > svg {
  width: 16px;
  height: 16px;
}

.elementor-shortcode > svg > path{
  stroke: #fff
}

/* ==========================================================================
   ABRO CUSTOM STYLES
   ==========================================================================

   Consolidated here on 23 Sep 2026. These rules used to live as separate
   files under wp-content/uploads/abro-search/, loaded by Elementor Custom
   Code snippets. They are now part of the child theme so they can be edited
   from Appearance > Theme File Editor. The snippets keep their markup and
   scripts; only their <link> tags were removed.

   Order below matches the old load order, because some blocks rely on it
   (the search overlay's button resets have to come after the normalizer).
   ========================================================================== */


/* ==========================================================================
   BUTTON NORMALIZER
   was: uploads/abro-search/abro-buttons.css   (Snippet 18400 "ABRO Button Styles")
   ========================================================================== */

/*!
 * ABRO button normalizer
 *
 * Reference: the homepage hero button "Explore Products" (element 23137ff)
 *   40px tall · 4px radius · 15px label · 20px side padding · 1px border
 *
 * The site had 19 different button variants and no global button styles in the
 * Elementor kit, so every button was sized per widget. This normalises only
 * GEOMETRY and LABEL SIZE — each button keeps its own colours, borders and
 * hover states.
 *
 * `!important` is required: Elementor writes per-element rules such as
 * `.elementor-19 .elementor-element.elementor-element-23137ff .elementor-button`,
 * which no practical class selector can outrank.
 *
 * Deliberately NOT matched: the header search toggle, the mobile menu toggle,
 * the overlay's Close button and Popular-search pills, and the results-page
 * tabs — those are icon or text controls, not buttons.
 */

:root{
  --abro-btn-height:40px;
  --abro-btn-radius:4px;
  --abro-btn-font-size:15px;
}

.elementor-button,
.elementor-button-wrapper .elementor-button,
.elementor-field-type-submit button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.added_to_cart,
.woocommerce .button.add_to_cart_button,
.wp-element-button,
.wpforms-submit,
.wpforms-form input[type="submit"],
.wpforms-form button[type="submit"],
.abro-search button.abro-search__submit,
.abro-results button.abro-search__submit{
  box-sizing:border-box !important;
  min-height:var(--abro-btn-height) !important;
  border-radius:var(--abro-btn-radius) !important;
  font-size:var(--abro-btn-font-size) !important;
  line-height:1.1 !important;
  /* Vertical padding is zeroed and the height comes from min-height + centring,
     so every button lands on exactly 40px whatever its label. Horizontal
     padding is deliberately left alone: link-style buttons such as "View
     Categories" are authored with 0 side padding and must stay flush. */
  padding-top:0 !important;
  padding-bottom:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  text-align:center;
}

/* Elementor wraps the label in its own flex box; keep it from adding height. */
.elementor-button .elementor-button-content-wrapper{
  align-items:center;
  line-height:inherit;
}
.elementor-button .elementor-button-text{
  line-height:inherit;
}

/* The search forms stretch their children to the tall input; let the submit
   keep the standard height instead. */
.abro-search__form{
  align-items:center !important;
}

/* Full-width buttons (forms, mobile stacks) keep the same height. */
.elementor-button.elementor-size-block,
.wpforms-submit.wpforms-full-width{
  width:100%;
}


/* ==========================================================================
   HEADERS, STORE ICON, HEADER ACTIONS
   was: uploads/abro-search/abro-header.css   (Snippet 18441 "ABRO Header Styles")
   ========================================================================== */

/*!
 * ABRO homepage header scrim
 *
 * The homepage header (template "Abro Header", post 16084) floats over the hero.
 * It needs a backdrop so the logo, nav and the white search icon stay readable,
 * without bleeding past the header onto the content scrolling underneath.
 *
 * Frosted glass: a blurred backdrop plus a light navy tint, both faded out with
 * a mask so there is no edge.
 *
 * Why the mask. `backdrop-filter` blurs a rectangle and stops dead at the
 * element bounds — that hard cut is exactly the shadow line we are avoiding, and
 * unlike a colour it cannot be gradient-faded directly. Masking the whole
 * pseudo-element fades the blur AND the tint together, so the effect dissolves
 * into the hero. The mask does the easing, so the tint itself can stay flat.
 *
 * The tint is still needed: the search toggle is forced white by the "Header
 * Search" snippet (18390), and blur alone over a pale hero leaves white on
 * light. Blur lets that tint be much lighter than it would otherwise need to be
 * (0.62 here, against 0.92 for tint alone).
 *
 * Pinned with `inset:0`, so it follows the header at every breakpoint
 * (120px desktop / 85px tablet / 65px mobile) with no media queries.
 *
 * The Elementor gradient is left in place underneath as a fallback: if this
 * snippet is ever disabled the header still gets a backdrop.
 *
 * Scoped with `.elementor-16084` because the homepage and the rest-of-site
 * header share the element id `1a9b598a`.
 */

.elementor-16084 .elementor-element.elementor-element-1a9b598a{
  background-image:none !important;
  background-color:transparent !important;
}

/* ------------------------------------------------------------------ *
 * DISABLED 23 Sep 2026 - frosted glass switched off at the client's
 * request. Nothing is deleted: the rules below sit inside a media query
 * that can never match, so they stay in the file and keep their comments.
 * To bring the effect back, delete this @media line and its closing brace
 * (marked "end DISABLED block" below), then bump the ver= on snippet 18441.
 * ------------------------------------------------------------------ */
@media (min-width:99999px){

.elementor-16084 .elementor-element.elementor-element-1a9b598a::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:rgba(28, 36, 75, 0.62);

  -webkit-backdrop-filter:blur(14px) saturate(115%);
  backdrop-filter:blur(14px) saturate(115%);

  /* Fades the blur and the tint together, so neither leaves an edge. */
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    rgba(0, 0, 0, 0.88) 60%,
    rgba(0, 0, 0, 0.68) 71%,
    rgba(0, 0, 0, 0.45) 80%,
    rgba(0, 0, 0, 0.25) 88%,
    rgba(0, 0, 0, 0.10) 94%,
    rgba(0, 0, 0, 0.03) 98%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    rgba(0, 0, 0, 0.88) 60%,
    rgba(0, 0, 0, 0.68) 71%,
    rgba(0, 0, 0, 0.45) 80%,
    rgba(0, 0, 0, 0.25) 88%,
    rgba(0, 0, 0, 0.10) 94%,
    rgba(0, 0, 0, 0.03) 98%,
    transparent 100%
  );
}

/* No blur support: carry the contrast on the tint alone. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .elementor-16084 .elementor-element.elementor-element-1a9b598a::before{
    background:rgba(28, 36, 75, 0.88);
  }
}


/* ------------------------------------------------------------------ *
 * Rest-of-site header ("Abro Header Rest Site", post 17114)
 *
 * This one is a solid #0088FF bar with a white logo and white nav, and it sits
 * in normal flow until Elementor makes it sticky. Two consequences:
 *
 *   - No mask fade. It is a defined bar with a bottom edge, not an overlay
 *     merging into a hero. Fading it would let content bleed into the nav.
 *   - Frost only once stuck. At page top there is white page behind it, so a
 *     translucent bar would wash out to a pale blue and drop white text to
 *     ~2.5:1. It stays solid at rest and only goes frosted while floating
 *     over content.
 *
 * The alpha is deliberately high (0.85). The bar has to stay blue enough for
 * white text to hold roughly its current contrast, so the frost here reads as
 * a subtle softening of what passes behind — not the strong glass effect the
 * homepage gets, where the header has no colour of its own to preserve.
 * ------------------------------------------------------------------ */

.elementor-17114 .elementor-element.elementor-element-1a9b598a.elementor-sticky--active,
.elementor-17114 .elementor-element.elementor-element-1a9b598a.elementor-sticky--effects{
  background-color:rgba(0, 136, 255, 0.85) !important;
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .elementor-17114 .elementor-element.elementor-element-1a9b598a.elementor-sticky--active,
  .elementor-17114 .elementor-element.elementor-element-1a9b598a.elementor-sticky--effects{
    background-color:#0088FF !important;
  }
}

}
/* end DISABLED block */


/* ==== Header stacking ==== */

/*
 * Elementor's sticky setting had the header at z-index 9999, which painted it
 * over the WooCommerce product gallery lightbox (PhotoSwipe sits at 1500), so
 * the blue bar covered the lightbox toolbar. 1000 keeps the header above page
 * content - nothing on the site declares a z-index anywhere near it - while
 * leaving room for genuine overlays above.
 */
.elementor-16084 .elementor-element.elementor-element-1a9b598a,
.elementor-17114 .elementor-element.elementor-element-1a9b598a{
  z-index:10000 !important;
}


/* ==== USA store icon ==== */

.elementor-widget-icon.abro-store{
  position:relative;
  flex:0 0 auto;
  width:auto;
  margin-left:4px;
}
.abro-store .elementor-icon-wrapper{line-height:0;}

.abro-store .elementor-icon,
.abro-store a.elementor-icon,
.abro-store .elementor-icon:hover,
.abro-store .elementor-icon:focus,
.abro-store .elementor-icon:focus-visible,
.abro-store .elementor-icon:active{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  background-image:none;
  box-shadow:none;
  min-height:0;
  color:#fff !important;
  text-decoration:none;
}

/* Font Awesome's basket is a solid silhouette; the header's magnifier is a thin
   stroke. Hide the glyph and mask in a stroked basket so the two icons match. */
.abro-store .elementor-icon svg,
.abro-store .elementor-icon i{display:none !important;}

.abro-store .elementor-icon::before{
  content:"";
  display:block;
  width:23px;
  height:23px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 8.2 12 3l3.6 5.2'/%3E%3Cpath d='M3.2 10h17.6l-1.7 8.3a2 2 0 0 1-2 1.7H6.9a2 2 0 0 1-2-1.7L3.2 10Z'/%3E%3Cpath d='M9.6 13.6v3.1M14.4 13.6v3.1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 8.2 12 3l3.6 5.2'/%3E%3Cpath d='M3.2 10h17.6l-1.7 8.3a2 2 0 0 1-2 1.7H6.9a2 2 0 0 1-2-1.7L3.2 10Z'/%3E%3Cpath d='M9.6 13.6v3.1M14.4 13.6v3.1'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s ease;
}
.abro-store .elementor-icon:hover::before{transform:scale(1.1);}
.abro-store .elementor-icon:focus-visible{outline:2px solid currentColor;outline-offset:2px;}

/* Tooltip, anchored on the widget so the icon's own pseudo-element stays free */
.abro-store::after{
  content:"Our USA STORE";
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  white-space:nowrap;
  background:#17171B;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.2;
  padding:6px 10px;
  border-radius:4px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:10001;
}
.abro-store::before{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  width:0;
  height:0;
  transform:translateX(-50%) translateY(-4px);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:6px solid #17171B;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:10001;
}
.abro-store:hover::after,
.abro-store:hover::before,
.abro-store:focus-within::after,
.abro-store:focus-within::before{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* Keep the tooltip from being clipped by the header shell. */
.elementor-16084 .elementor-element-1a9b598a,
.elementor-17114 .elementor-element-1a9b598a,
.elementor-17114 .elementor-element-46e3630{overflow:visible;}

@media (max-width:767px){
  .elementor-widget-icon.abro-store{margin-left:0;}
  .abro-store .elementor-icon,
  .abro-store a.elementor-icon{width:38px;height:38px;}
  .abro-store .elementor-icon::before{width:21px;height:21px;}
  .abro-store::after,
  .abro-store::before{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .abro-store .elementor-icon::before,
  .abro-store::after,
  .abro-store::before{transition:none;}
}

/* The search icon and the store icon travel together as one flex item. */
.abro-header-actions,
.elementor-16084 .elementor-element.elementor-element-abrowr1{
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
  align-self:center;
  overflow:visible;
}
.abro-header-actions .header-search,
.elementor-element-abrowr1 .header-search{order:99;}

/* ==== Footer newsletter form ==== */
/* The field labels exist for screen readers; the design uses placeholders. */
.elementor-element-2b62d87 .elementor-field-label{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.elementor-element-2b62d87 .elementor-field-type-acceptance .elementor-field-label{display:none !important;}

/* ==== Footer link hover: white + underline (3 Oct 2026) ==== */

/*
 * The footer is accent blue, and Elementor hovered its links to accent (the
 * footer menu, Distributors and Resources lists) or primary (contact list) -
 * near-invisible. Links stay white and get an underline on hover/focus instead.
 * The footer menu's active item ("Home" on the homepage) is held white too.
 */
.elementor-16152 .elementor-nav-menu--main .elementor-item,
.elementor-16152 .elementor-nav-menu--main .elementor-item:hover,
.elementor-16152 .elementor-nav-menu--main .elementor-item:focus,
.elementor-16152 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-16152 .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-16152 .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.elementor-16152 .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text,
.elementor-16152 .elementor-element-dc468d7 a:hover,
.elementor-16152 .elementor-element-dc468d7 a:focus-visible{
  color:#FFFFFF !important;
}
.elementor-16152 .elementor-nav-menu--main .elementor-item:hover,
.elementor-16152 .elementor-nav-menu--main .elementor-item:focus-visible,
.elementor-16152 .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.elementor-16152 .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text,
.elementor-16152 .elementor-element-dc468d7 a:hover,
.elementor-16152 .elementor-element-dc468d7 a:focus-visible{
  text-decoration:underline !important;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
/* ==== Search toggle tap target ==== */
/* The magnifier button was only 23x23 inside its 44px slot, under the 24px
   minimum tap target and smaller than the store icon beside it. */
.header-search button.abro-search-toggle{
  width:44px;
  height:44px;
}
@media (max-width:767px){
  .header-search button.abro-search-toggle{width:38px;height:38px;}
}

/* ==== Header actions: nav | divider | basket | search ==== */

/*
 * Both headers put the nav menu, the search widget and the store icon in one
 * right-aligned flex container (abrowr1 on the homepage, 46e3630 on the rest of
 * the site). Order is set here rather than in the markup so the two templates
 * stay identical and Elementor edits cannot reshuffle them.
 *
 *   nav menu   order 0   (Elementor default)
 *   divider    order 97  (this container's ::before)
 *   store      order 98
 *   search     order 99  (set by the "Header Search" snippet)
 */

.elementor-element-abrowr1,
.elementor-element-46e3630{
  overflow:visible;
}

.elementor-element-abrowr1::before,
.elementor-element-46e3630::before{
  content:"" !important;
  display:block !important;
  position:relative !important;
  inset:auto !important;
  order:97;
  flex:0 0 1px;
  width:1px;
  height:22px;
  align-self:center;
  margin:0 6px 0 14px;
  background:rgba(255, 255, 255, 0.4) !important;
  background-image:none !important;
  border-radius:1px;
  pointer-events:none;
  z-index:auto;
}

.elementor-widget-icon.abro-store{
  order:98;
}

/* Mobile: hamburger at the far right, search before it, no store icon. The
   store lives in the menu instead, as the "Our USA Store" item. */
/* Elementor swaps the menu for a burger from its tablet breakpoint down
   (1024px), so the burger goes last across that whole range, not just on
   phones. The nav widget is flex:1 0 auto, which left an 88px hole between the
   search icon and the burger; shrinking it closes that. Elementor stretches the
   dropdown to the viewport, so a narrow widget does not narrow the menu. */
@media (max-width:1024px){
  .elementor-element-abrowr1 .elementor-widget-nav-menu,
  .elementor-element-46e3630 .elementor-widget-nav-menu{
    order:200;
    flex:0 0 auto !important;
    width:auto !important;
  }
  /* The rule exists to separate the icons from the menu links. Once the menu
     is a burger there are no links to separate from, so it goes. */
  .elementor-element-abrowr1::before,
  .elementor-element-46e3630::before{
    display:none !important;
  }
}

@media (max-width:767px){
  .elementor-widget-icon.abro-store{
    display:none !important;
  }
}

/* The menu carries the store link for phones only. */
@media (min-width:768px){
  .abro-mobile-only{
    display:none !important;
  }
}


/* ==== Header icon + nav colours ==== */

/*
 * Homepage (16084) is transparent at the top of the page, so the icons take the
 * primary blue there and go white on hover. Once .abro-header-scrolled lands
 * the bar is primary blue, so icons, nav links and the active item are all
 * white; hover goes primary.
 *
 * Rest of site (17114) is the accent-blue bar at all times, scrolled or not, so
 * its icons stay white throughout and hover to primary — the same pair the nav
 * links there already use.
 *
 * Everything is !important: Elementor's kit sets
 * .elementor-widget-icon.elementor-view-default .elementor-icon{color:…} at
 * (0,3,0), and the Header Search snippet (18390) paints the toggle white from a
 * <style> block that loads after the theme stylesheet.
 */

/* --- Homepage, at the top: primary, white on hover --- */
.elementor-16084 .abro-store .elementor-icon,
.elementor-16084 .abro-store a.elementor-icon,
.elementor-16084 .abro-store .elementor-icon:focus,
.elementor-16084 .abro-store .elementor-icon:active,
.elementor-16084 .header-search button.abro-search-toggle,
.elementor-16084 .header-search button.abro-search-toggle:focus,
.elementor-16084 .header-search button.abro-search-toggle:active{
  color:#0047BB !important;
  transition:color .18s ease;
}

.elementor-16084 .abro-store .elementor-icon:hover,
.elementor-16084 .abro-store .elementor-icon:focus-visible,
.elementor-16084 .header-search button.abro-search-toggle:hover,
.elementor-16084 .header-search button.abro-search-toggle:focus-visible{
  color:#FFFFFF !important;
}

/* --- Homepage, scrolled: white, including the active item --- */
.elementor-16084 .header-sticky.abro-header-scrolled .abro-store .elementor-icon,
.elementor-16084 .header-sticky.abro-header-scrolled .abro-store .elementor-icon:focus,
.elementor-16084 .header-sticky.abro-header-scrolled .abro-store .elementor-icon:active,
.elementor-16084 .header-sticky.abro-header-scrolled .header-search button.abro-search-toggle,
.elementor-16084 .header-sticky.abro-header-scrolled .header-search button.abro-search-toggle:focus,
.elementor-16084 .header-sticky.abro-header-scrolled .header-search button.abro-search-toggle:active,
.elementor-16084 .header-sticky.abro-header-scrolled .elementor-nav-menu--main .elementor-item,
.elementor-16084 .header-sticky.abro-header-scrolled .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-16084 .header-sticky.abro-header-scrolled .elementor-nav-menu--main .elementor-item.highlighted{
  color:#FFFFFF !important;
}

.elementor-16084 .header-sticky.abro-header-scrolled .abro-store .elementor-icon:hover,
.elementor-16084 .header-sticky.abro-header-scrolled .abro-store .elementor-icon:focus-visible,
.elementor-16084 .header-sticky.abro-header-scrolled .header-search button.abro-search-toggle:hover,
.elementor-16084 .header-sticky.abro-header-scrolled .header-search button.abro-search-toggle:focus-visible{
  color:#0047BB !important;
}

/* --- Rest of site: white at rest and while stuck, primary on hover --- */
.elementor-17114 .abro-store .elementor-icon,
.elementor-17114 .abro-store a.elementor-icon,
.elementor-17114 .abro-store .elementor-icon:focus,
.elementor-17114 .abro-store .elementor-icon:active,
.elementor-17114 .header-search button.abro-search-toggle,
.elementor-17114 .header-search button.abro-search-toggle:focus,
.elementor-17114 .header-search button.abro-search-toggle:active,
.elementor-17114 .elementor-sticky--active .abro-store .elementor-icon,
.elementor-17114 .elementor-sticky--active .header-search button.abro-search-toggle{
  color:#FFFFFF !important;
  transition:color .18s ease;
}

.elementor-17114 .abro-store .elementor-icon:hover,
.elementor-17114 .abro-store .elementor-icon:focus-visible,
.elementor-17114 .header-search button.abro-search-toggle:hover,
.elementor-17114 .header-search button.abro-search-toggle:focus-visible,
.elementor-17114 .elementor-sticky--active .abro-store .elementor-icon:hover,
.elementor-17114 .elementor-sticky--active .abro-store .elementor-icon:focus-visible,
.elementor-17114 .elementor-sticky--active .header-search button.abro-search-toggle:hover,
.elementor-17114 .elementor-sticky--active .header-search button.abro-search-toggle:focus-visible{
  color:#0047BB !important;
}


/* ==== Nav hover: white + underline (3 Oct 2026) ==== */

/*
 * The scrolled homepage bar is primary blue, so the old primary hover vanished
 * into it (1.40:1). Hover now keeps the text white and signals state with the
 * Elementor underline pointer, also white. The rest-of-site header gets the same
 * treatment so both headers behave identically. Active items are untouched.
 */
.elementor-16084 .header-sticky.abro-header-scrolled .elementor-nav-menu--main .elementor-item:hover,
.elementor-16084 .header-sticky.abro-header-scrolled .elementor-nav-menu--main .elementor-item:focus-visible,
.elementor-17114 .elementor-nav-menu--main .elementor-item:hover,
.elementor-17114 .elementor-nav-menu--main .elementor-item:focus-visible{
  color:#FFFFFF !important;
}
.elementor-16084 .header-sticky.abro-header-scrolled .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after,
.elementor-17114 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{
  background-color:#FFFFFF !important;
}
/* ==== Homepage header, scrolled ==== */

/*
 * The homepage header is position:fixed and transparent at the top of the page.
 * Once scrolled it takes a flat shade of the primary blue so the white logo and
 * the reverted white icons have something to sit on. 0.85 alpha, so a little of
 * the page still reads through.
 */

.elementor-16084 .elementor-element.elementor-element-1a9b598a{
  transition:background-color .35s ease;
}

.elementor-16084 .elementor-element.elementor-element-1a9b598a.abro-header-scrolled{
  background-color:rgba(0, 71, 187, 0.85) !important;
}


/* ==========================================================================
   PRODUCT DETAIL PAGE
   was: uploads/abro-search/abro-product.css   (Snippet 18451 "ABRO Product Page")
   ========================================================================== */

/*!
 * ABRO product detail page
 *
 * Puts everything in one frame: gallery left, and in the right column the
 * title, the feature lines, the Part No. / Size / Pcs-per-case table and the
 * spec-sheet download — matching abro.com's live product layout.
 *
 * The table markup is generated into each product's post_content between
 * `<!-- abro:specs:start -->` / `<!-- abro:specs:end -->` markers, so the
 * Elementor "Product Content" widget renders it server-side in the right
 * column. Regenerate with the `rebuild-abro-product-specs` Novamira skill.
 */

:root{
  --abro-p-blue:#0047BB;
  --abro-p-accent:#0088FF;
  --abro-p-ink:#17171B;
  --abro-p-muted:#6B7280;
  --abro-p-line:#E4E8EF;
  --abro-p-zebra:#F5F8FD;
  --abro-p-font:"Gilroy Regular","Gilroy Medium",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --abro-p-font-strong:"Gilroy Medium","Gilroy Regular",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.abro-spec{
  margin-top:28px;
  font-family:var(--abro-p-font);
  color:var(--abro-p-ink);
}

.abro-spec .abro-spec__heading,
h3.abro-spec__heading{
  font-family:var(--abro-p-font-strong);
  font-size:20px;
  line-height:1.3;
  font-weight:600;
  color:var(--abro-p-blue);
  margin:0 0 14px;
}

/* Table scrolls rather than breaking the layout on narrow screens. */
.abro-spec__scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.abro-spec table.abro-spec__table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  margin:0;
  font-size:15px;
  line-height:1.45;
  background:none;
}
.abro-spec .abro-spec__table th,
.abro-spec .abro-spec__table td{
  text-align:left;
  padding:11px 16px;
  border:0;
  white-space:nowrap;
}
.abro-spec .abro-spec__table thead th{
  font-family:var(--abro-p-font-strong);
  font-weight:600;
  color:#fff;
  background:var(--abro-p-blue);
}
.abro-spec .abro-spec__table thead th:first-child{border-top-left-radius:4px;}
.abro-spec .abro-spec__table thead th:last-child{border-top-right-radius:4px;}
.abro-spec .abro-spec__table tbody tr{background:#fff;}
.abro-spec .abro-spec__table tbody tr:nth-child(odd){background:var(--abro-p-zebra);}
.abro-spec .abro-spec__table tbody td{border-bottom:1px solid var(--abro-p-line);}

.abro-spec__note{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--abro-p-muted);
}

.abro-spec__docs{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.abro-spec__docs li{margin:0;padding:0;}

.abro-spec__docs a.abro-spec__doc{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 18px;
  border:1px solid var(--abro-p-line);
  border-radius:4px;
  background:#fff;
  font-family:var(--abro-p-font-strong);
  font-size:15px;
  font-weight:600;
  color:var(--abro-p-blue);
  text-decoration:none;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.abro-spec__docs a.abro-spec__doc:hover,
.abro-spec__docs a.abro-spec__doc:focus-visible{
  border-color:var(--abro-p-blue);
  background:var(--abro-p-zebra);
  color:var(--abro-p-blue);
}
.abro-spec__docs a.abro-spec__doc span{
  font-family:var(--abro-p-font);
  font-weight:400;
  font-size:13px;
  color:var(--abro-p-muted);
}

@media (max-width:767px){
  .abro-spec .abro-spec__table th,
  .abro-spec .abro-spec__table td{padding:10px 12px;font-size:14px;}
}

/* The WooCommerce tabs widget was removed from the Single Product Template
   (18112) — the Description tab duplicated the right column, and Additional
   Information is superseded by the spec table. Nothing to hide here. */

/* ==== Document button icon ==== */

/* A stroked page glyph, masked in so it takes the button's own colour and needs
   no extra request. The button is already inline-flex with an 8px gap, so the
   pseudo-element lines up on its own. */
.abro-spec__docs a.abro-spec__doc::before{
  content:"";
  flex:0 0 auto;
  width:17px;
  height:17px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.2 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7.8z'/%3E%3Cpath d='M14 3.2V8h4.8'/%3E%3Cpath d='M8.6 13.2h6.8M8.6 16.6h4.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.2 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7.8z'/%3E%3Cpath d='M14 3.2V8h4.8'/%3E%3Cpath d='M8.6 13.2h6.8M8.6 16.6h4.4'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* ==========================================================================
   FULL-SCREEN SEARCH OVERLAY + RESULTS PAGE
   was: uploads/abro-search/abro-search.css   (Snippet 18398 "ABRO Full-Screen Search")
   ========================================================================== */

:root{
  --abro-s-blue:#0047BB;
  --abro-s-red:#E21F2C;
  --abro-s-ink:#17171B;
  --abro-s-accent:#0088FF;
  --abro-s-muted:#6B7280;
  --abro-s-line:#E4E8EF;
  --abro-s-hover:#F5F8FD;
  --abro-s-font:"Gilroy Regular","Gilroy Medium",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --abro-s-font-strong:"Gilroy Medium","Gilroy Regular",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* The stock Elementor dropdown is replaced by this overlay; its toggle icon stays. */
.header-search .e-search{display:none !important;}

.abro-search{
  position:fixed;
  inset:0;
  z-index:999999;
  background:#fff;
  overflow-y:auto;
  overscroll-behavior:contain;
  font-family:var(--abro-s-font);
  color:var(--abro-s-ink);
  -webkit-font-smoothing:antialiased;
}
.abro-search[hidden]{display:none !important;}
.abro-search__inner{
  max-width:1300px;
  margin:0 auto;
  padding:28px 24px 96px;
}
@media (min-width:1024px){
  .abro-search__inner{padding:40px 40px 120px;}
}

.abro-search__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:26px;
}
.abro-search__eyebrow{
  font-family:var(--abro-s-font-strong);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--abro-s-blue);
  margin:0;
}
.abro-search__close{
  appearance:none;
  background:none;
  border:0;
  padding:8px 4px;
  cursor:pointer;
  font-family:var(--abro-s-font-strong);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--abro-s-muted);
  transition:color .15s ease;
}
.abro-search__close:hover,
.abro-search__close:focus-visible{color:var(--abro-s-ink);}

.abro-search__form{
  display:flex;
  align-items:stretch;
  gap:12px;
  border-bottom:2px solid var(--abro-s-ink);
  padding-bottom:10px;
}
.abro-search input.abro-search__field,
.abro-results input.abro-search__field{
  flex:1 1 auto;
  min-width:0;
  -webkit-appearance:none;
  appearance:none;
  border:0;
  border-radius:0;
  outline:0;
  box-shadow:none;
  background:transparent;
  font-family:var(--abro-s-font);
  font-size:30px;
  line-height:1.25;
  color:var(--abro-s-ink);
  padding:10px 0;
}
.abro-search__field::placeholder{color:#B6BCC8;}
.abro-search__field::-webkit-search-cancel-button{display:none;}
.abro-search button.abro-search__submit,
.abro-results button.abro-search__submit{
  flex:0 0 auto;
  appearance:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  cursor:pointer;
  background:var(--abro-s-blue);
  color:#fff;
  font-family:var(--abro-s-font-strong);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:16px 34px;
  transition:background .15s ease;
}
.abro-search__submit:hover,
.abro-search__submit:focus-visible{background:#00379A;}
@media (max-width:640px){
  .abro-search__form{flex-wrap:wrap;gap:0;border-bottom:0;padding-bottom:0;}
  .abro-search input.abro-search__field,
  .abro-results input.abro-search__field{font-size:22px;flex:1 1 100%;border-bottom:2px solid var(--abro-s-ink);padding-bottom:12px;}
  .abro-search button.abro-search__submit,
  .abro-results button.abro-search__submit{flex:1 1 100%;padding:14px 20px;margin-top:16px;}
}

.abro-search__chips{margin-top:22px;}
.abro-search .abro-search__chips-label,
.abro-search h2.abro-search__group-label{
  font-family:var(--abro-s-font-strong);
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--abro-s-ink);
  margin:0 0 12px;
}
.abro-search__chips-list{display:flex;flex-wrap:wrap;gap:10px;}
.abro-search__chip{
  appearance:none;
  cursor:pointer;
  background:#fff;
  border:1px solid var(--abro-s-line);
  border-radius:999px;
  padding:8px 16px;
  font-family:var(--abro-s-font);
  font-size:14px;
  color:var(--abro-s-ink);
  transition:border-color .15s ease,background .15s ease;
}
.abro-search__chip:hover,
.abro-search__chip:focus-visible{border-color:var(--abro-s-blue);background:var(--abro-s-hover);}

.abro-search__status{
  margin-top:28px;
  font-size:15px;
  color:var(--abro-s-muted);
}
.abro-search__status[hidden]{display:none;}

.abro-search__results{
  margin-top:30px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 56px;
  align-items:start;
}
.abro-search__col{min-width:0;}
.abro-search__col:empty{display:none;}
.abro-search__col .abro-search__group + .abro-search__group{margin-top:36px;}
.abro-search__col--secondary .abro-search__group:first-child{margin-top:0;}
@media (max-width:900px){
  .abro-search__results{grid-template-columns:minmax(0,1fr);gap:0;}
  .abro-search__col--secondary{margin-top:36px;}
}
.abro-search__group-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:6px;
}
.abro-search__group-count{
  font-size:13px;
  color:var(--abro-s-muted);
}

.abro-search__item{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding:13px 10px 13px 0;
  border-bottom:1px solid var(--abro-s-line);
  text-decoration:none;
  color:inherit;
  transition:background .12s ease;
}
.abro-search__item:hover,
.abro-search__item:focus-visible{background:var(--abro-s-hover);}
.abro-search__thumb{
  width:56px;
  height:56px;
  border:1px solid var(--abro-s-line);
  border-radius:4px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}
.abro-search__thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
  display:block;
}
.abro-search__thumb svg{width:20px;height:20px;color:#AEB6C4;}
.abro-search__body{min-width:0;display:block;}
.abro-search__title{
  display:block;
  font-family:var(--abro-s-font-strong);
  font-size:16px;
  font-weight:600;
  line-height:1.35;
  margin:0;
  overflow-wrap:anywhere;
}
.abro-search__title mark{
  background:none;
  color:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.abro-search__sub{
  display:-webkit-box;
  margin:3px 0 0;
  font-size:13.5px;
  line-height:1.45;
  color:var(--abro-s-muted);
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width:640px){
  .abro-search__item{grid-template-columns:44px minmax(0,1fr);gap:12px;}
  .abro-search__thumb{width:44px;height:44px;}
  .abro-search__title{font-size:15px;}
}

.abro-search__all{
  display:inline-block;
  margin-top:14px;
  font-family:var(--abro-s-font-strong);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--abro-s-blue);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.abro-search__all:hover,
.abro-search__all:focus-visible{color:var(--abro-s-red);}

.abro-search__empty strong{font-family:var(--abro-s-font-strong);color:var(--abro-s-ink);}

.abro-search :focus-visible,
.abro-results :focus-visible{outline:2px solid var(--abro-s-accent);outline-offset:2px;}

/* ------------------------------------------------------------------ *
 * Search results page (/?s=…)
 * ------------------------------------------------------------------ */

.abro-results{
  font-family:var(--abro-s-font);
  color:var(--abro-s-ink);
  padding:48px 0 32px;
}
.abro-results .abro-search__form{margin-bottom:0;}
.abro-results__count{
  font-family:var(--abro-s-font-strong);
  font-size:26px;
  line-height:1.3;
  margin:0 0 20px;
}
.abro-results__count em{font-style:italic;color:var(--abro-s-blue);}

.abro-results__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:2px 28px;
  margin-top:26px;
  padding-bottom:14px;
  border-bottom:1px solid var(--abro-s-line);
}
.abro-results__tab{
  appearance:none;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  padding:6px 0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--abro-s-font-strong);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--abro-s-muted);
  transition:color .15s ease,border-color .15s ease;
}
.abro-results__tab:hover{color:var(--abro-s-ink);}
.abro-results__tab.is-active{color:var(--abro-s-blue);border-bottom-color:var(--abro-s-blue);}
.abro-results__tab-count{
  font-family:var(--abro-s-font);
  font-size:11px;
  font-weight:400;
  letter-spacing:.04em;
}

.abro-results__group{margin-top:44px;}
.abro-results__group[hidden]{display:none;}
.abro-results h2.abro-results__heading{
  font-family:var(--abro-s-font-strong);
  font-size:22px;
  line-height:1.3;
  margin:0 0 14px;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.abro-results__heading-count{
  font-family:var(--abro-s-font);
  font-size:13px;
  font-weight:400;
  color:var(--abro-s-muted);
}
.abro-results__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:56px;
  align-items:start;
}
@media (max-width:900px){
  .abro-results{padding-top:24px;}
  .abro-results__grid{grid-template-columns:minmax(0,1fr);column-gap:0;}
  .abro-results__count{font-size:21px;}
}
.abro-results__note{
  margin:16px 0 0;
  font-size:13.5px;
  color:var(--abro-s-muted);
}
.abro-results__empty{
  margin-top:34px;
  font-size:16px;
  line-height:1.6;
  color:var(--abro-s-muted);
  max-width:62ch;
}

html.abro-search-lock,
body.abro-search-lock{overflow:hidden !important;}

@media (prefers-reduced-motion:no-preference){
  .abro-search{animation:abro-search-in .18s ease-out;}
  @keyframes abro-search-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
}


/* ------------------------------------------------------------------ *
 * Button overrides
 *
 * The theme styles every <button> and repaints it on hover (a red fill).
 * These rules are last in the file and element-qualified so the overlay and
 * the results page keep their own states: colour changes, never a fill.
 * ------------------------------------------------------------------ */

.abro-search button,
.abro-results button{
  background-image:none;
  box-shadow:none;
  text-shadow:none;
}

/* Header search toggle (the magnifier icon) — icon only, never a fill. */
button.abro-search-toggle,
button.abro-search-toggle:hover,
button.abro-search-toggle:focus,
button.abro-search-toggle:focus-visible,
button.abro-search-toggle:active,
.header-search button.abro-search-toggle,
.header-search button.abro-search-toggle:hover,
.header-search button.abro-search-toggle:focus,
.header-search button.abro-search-toggle:focus-visible,
.header-search button.abro-search-toggle:active{
  background:none;
  background-image:none;
  box-shadow:none;
  border:0;
  border-radius:0;
  min-height:0;
  padding:0;
  color:#fff;
}

/* Close */
.abro-search button.abro-search__close,
.abro-search button.abro-search__close:hover,
.abro-search button.abro-search__close:focus,
.abro-search button.abro-search__close:focus-visible,
.abro-search button.abro-search__close:active{
  background:none;
  border:0;
}
.abro-search button.abro-search__close{color:var(--abro-s-muted);}
.abro-search button.abro-search__close:hover,
.abro-search button.abro-search__close:focus-visible{color:var(--abro-s-blue);}

/* Popular-search pills */
.abro-search button.abro-search__chip,
.abro-search button.abro-search__chip:hover,
.abro-search button.abro-search__chip:focus,
.abro-search button.abro-search__chip:focus-visible,
.abro-search button.abro-search__chip:active{
  background:#fff;
  color:var(--abro-s-ink);
}
.abro-search button.abro-search__chip:hover,
.abro-search button.abro-search__chip:focus-visible{
  border-color:var(--abro-s-blue);
}

/* Results-page tabs */
.abro-results button.abro-results__tab,
.abro-results button.abro-results__tab:hover,
.abro-results button.abro-results__tab:focus,
.abro-results button.abro-results__tab:focus-visible,
.abro-results button.abro-results__tab:active{
  background:none;
}
.abro-results button.abro-results__tab:hover{color:var(--abro-s-ink);}
.abro-results button.abro-results__tab.is-active{color:var(--abro-s-blue);}

/* Submit keeps its fill — it is the one button that should have one. */
.abro-search button.abro-search__submit,
.abro-results button.abro-search__submit{
  background:var(--abro-s-blue);
  color:#fff;
}
.abro-search button.abro-search__submit:hover,
.abro-search button.abro-search__submit:focus-visible,
.abro-results button.abro-search__submit:hover,
.abro-results button.abro-search__submit:focus-visible{
  background:#00379A;
  color:#fff;
}


/* ==========================================================================
   LANGUAGE SWITCHER
   was: uploads/abro-search/abro-lang.css   (Snippet 18436 "ABRO Language Switcher")
   ========================================================================== */

/*!
 * ABRO language switcher
 *
 * Replaces the GTranslate flag strip in the top bar with a globe + "Language"
 * trigger that opens a full-width panel of flagged languages.
 *
 * The original GTranslate links stay in the DOM and are only hidden once the
 * custom UI has successfully built (.abro-lang-ready), so if the script fails
 * the flag strip is still there.
 */

:root{
  --abro-lang-blue:#0047BB;
  --abro-lang-ink:#17171B;
  --abro-lang-muted:#6B7280;
  --abro-lang-line:#E4E8EF;
  --abro-lang-hover:#F5F8FD;
  --abro-lang-font:"Gilroy Regular","Gilroy Medium",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --abro-lang-font-strong:"Gilroy Medium","Gilroy Regular",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.gtranslate_wrapper.abro-lang-ready a.glink,
html.abro-lang-ready .gtranslate_wrapper a.glink{display:none !important;}

/* ---------------------------------------------------------------- Trigger */

.abro-lang{display:inline-flex;}

.abro-lang__trigger{
  appearance:none;
  background:none;
  border:0;
  border-radius:4px;
  padding:6px 8px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--abro-lang-font);
  font-size:15px;
  line-height:1;
  color:var(--abro-lang-ink);
  transition:color .15s ease;
}
.abro-lang__trigger:hover,
.abro-lang__trigger:focus-visible{color:var(--abro-lang-blue);}
.abro-lang__trigger:focus-visible{outline:2px solid #0088FF;outline-offset:2px;}

.abro-lang__flag{
  width:20px;
  height:14px;
  object-fit:cover;
  display:block;
  border-radius:2px;
  flex:0 0 auto;
}
.abro-lang__globe{width:17px;height:17px;flex:0 0 auto;}
.abro-lang__label{white-space:nowrap;}
.abro-lang__chevron{
  width:12px;
  height:12px;
  flex:0 0 auto;
  transition:transform .18s ease;
}
.abro-lang__trigger[aria-expanded="true"] .abro-lang__chevron{transform:rotate(180deg);}

/* The theme fills every <button> on hover; keep that out of the trigger.
   Element-qualified and covering every state so no fill can appear. */
button.abro-lang__trigger,
button.abro-lang__trigger:hover,
button.abro-lang__trigger:focus,
button.abro-lang__trigger:focus-visible,
button.abro-lang__trigger:active,
button.abro-lang__trigger[aria-expanded="true"]{
  background:none;
  background-image:none;
  box-shadow:none;
  border:0;
  min-height:0;
}
button.abro-lang__trigger{color:var(--abro-lang-ink);}
button.abro-lang__trigger:hover,
button.abro-lang__trigger:focus-visible,
button.abro-lang__trigger[aria-expanded="true"]{color:var(--abro-lang-blue);}

/* ------------------------------------------------------------------ Panel */

.abro-lang__panel{
  position:fixed;
  left:0;
  right:0;
  z-index:99998;
  background:#fff;
  border-top:1px solid var(--abro-lang-line);
  border-bottom:1px solid var(--abro-lang-line);
  box-shadow:0 18px 40px rgb(23 23 27 / 12%);
  max-height:70vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  font-family:var(--abro-lang-font);
}
.abro-lang__panel[hidden]{display:none !important;}

.abro-lang__inner{
  max-width:1300px;
  margin:0 auto;
  padding:26px 24px 30px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:40px;
  row-gap:2px;
}
@media (min-width:1100px){
  .abro-lang__inner{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:640px){
  .abro-lang__inner{grid-template-columns:minmax(0,1fr);padding:18px 20px 22px;}
}

.abro-lang__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:4px;
  text-decoration:none;
  color:var(--abro-lang-ink);
  font-size:15px;
  line-height:1.3;
  transition:background .12s ease,color .12s ease;
}
.abro-lang__item:hover,
.abro-lang__item:focus-visible{background:var(--abro-lang-hover);color:var(--abro-lang-blue);}
.abro-lang__item:focus-visible{outline:2px solid #0088FF;outline-offset:-2px;}

.abro-lang__bar{
  width:3px;
  align-self:stretch;
  min-height:20px;
  border-radius:2px;
  background:var(--abro-lang-line);
  flex:0 0 auto;
  transition:background .12s ease;
}
.abro-lang__item:hover .abro-lang__bar{background:var(--abro-lang-blue);}

.abro-lang__item img{
  width:22px;
  height:16px;
  object-fit:cover;
  display:block;
  border-radius:2px;
  flex:0 0 auto;
}

.abro-lang__item.is-current{
  font-family:var(--abro-lang-font-strong);
  font-weight:600;
  color:var(--abro-lang-blue);
}
.abro-lang__item.is-current .abro-lang__bar{background:var(--abro-lang-blue);}

@media (prefers-reduced-motion:no-preference){
  .abro-lang__panel{animation:abro-lang-in .16s ease-out;}
  @keyframes abro-lang-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
}

/* ==== Back to top ==== */

/*
 * Lives in the footer template (16152) but is position:fixed, so it floats over
 * the page from 400px of scroll onwards. Element-qualified and !important
 * because the theme repaints every <button> red on hover.
 */

button.abro-to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:900;
  display:grid !important;
  place-items:center;
  width:44px;
  height:44px;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:4px !important;
  background:#0047BB !important;
  background-image:none !important;
  color:#FFFFFF !important;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.18);
  transition:opacity .22s ease, transform .22s ease, visibility .22s, background-color .18s ease;
}

button.abro-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}

button.abro-to-top svg{
  display:block;
  width:20px;
  height:20px;
}

button.abro-to-top:hover,
button.abro-to-top:focus,
button.abro-to-top:focus-visible,
button.abro-to-top:active{
  background:#00379A !important;
  background-image:none !important;
  color:#FFFFFF !important;
}

button.abro-to-top:focus-visible{
  outline:2px solid #FFFFFF;
  outline-offset:2px;
}

@media (max-width:767px){
  button.abro-to-top{
    right:16px;
    bottom:16px;
    width:40px;
    height:40px;
  }
}

@media (prefers-reduced-motion:reduce){
  button.abro-to-top{transition:none;}
}


/* ==========================================================================
   DETAIL-PAGE MEDIA  (news / blog / newsletter)
   added 24 Sep 2026
   ==========================================================================

   Three separate problems, all of them "media at whatever size the upload
   happened to be":

   1. The hero image widget (241b36d3, shared by the Single Blog Post and
      Newsletter templates) was pinned to height:400px with width:100%. A fixed
      height against a fluid width means the crop ratio changes with the
      viewport - 2.8:1 on a 1440 desktop, near-square on a phone.

   2. The [video] shortcode prints <div style="width:720px"><video width="720"
      height="1280">. A portrait clip in a 720px box left roughly 900px of dead
      space below it in the article column - the gap reported on
      /abro-specialty-car-event-copan-honduras/.

   3. The [gallery] shortcode defaults to size="thumbnail" and floats its items,
      so six photos rendered as a narrow stack of 150x150 crops down the left
      edge of a 760px column.

   Everything below normalises media to 16:9 inside the content column. Video
   uses object-fit:contain so portrait footage is letterboxed rather than
   cropped through the middle; stills use cover.
   ========================================================================== */

:root{
  --abro-media-radius:12px;
  --abro-media-gap:28px;
}

/* ==== Hero featured image ==== */

/* Both post templates use the same widget id. Elementor writes
   `.elementor-17931 .elementor-element-241b36d3 img{height:400px}` at (0,2,1),
   so the height override has to be !important; aspect-ratio is unopposed. */
.elementor-widget-image.elementor-element-241b36d3 img{
  width:100%;
  height:auto !important;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
}


/* ==== In-content video: the [video] shortcode ==== */

/*
 * The wrapper carries an inline `width:720px`, and MediaElement.js then clones
 * that width and height onto .mejs-container once it upgrades the player. Both
 * are overridden here and the real sizing comes from aspect-ratio on the
 * wrapper, so the box is right whether or not MEJS ever initialises.
 */
.elementor-widget-theme-post-content .wp-video,
.elementor-widget-woocommerce-product-content .wp-video{
  position:relative;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9;
  margin:var(--abro-media-gap) 0;
  background:#000;
  border-radius:var(--abro-media-radius);
  overflow:hidden;
}

.elementor-widget-theme-post-content .wp-video .mejs-container,
.elementor-widget-theme-post-content .wp-video .mejs-inner,
.elementor-widget-theme-post-content .wp-video .mejs-mediaelement,
.elementor-widget-theme-post-content .wp-video .mejs-overlay,
.elementor-widget-theme-post-content .wp-video .mejs-poster,
.elementor-widget-theme-post-content .wp-video video.wp-video-shortcode,
.elementor-widget-woocommerce-product-content .wp-video .mejs-container,
.elementor-widget-woocommerce-product-content .wp-video video.wp-video-shortcode{
  position:absolute !important;
  top:0; left:0;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  background:transparent;
}

/* Portrait clips are letterboxed, not centre-cropped - the ABRO reels are shot
   9:16 and cropping them to 16:9 would cut the product out of frame. */
.elementor-widget-theme-post-content .wp-video video,
.elementor-widget-woocommerce-product-content .wp-video video{
  object-fit:contain;
}

/* MEJS puts the controls at the bottom of .mejs-container; that is now the
   bottom of the 16:9 box, but the bar still has to clear the poster layer. */
.elementor-widget-theme-post-content .wp-video .mejs-controls{z-index:3;}


/* ==== In-content embeds: YouTube, Vimeo, oEmbed ==== */

.elementor-widget-theme-post-content iframe[src*="youtube"],
.elementor-widget-theme-post-content iframe[src*="youtu.be"],
.elementor-widget-theme-post-content iframe[src*="vimeo"],
.elementor-widget-theme-post-content iframe[src*="wistia"],
.elementor-widget-theme-post-content .wp-block-embed__wrapper iframe,
.elementor-widget-theme-post-content .wp-embed-aspect-16-9 iframe{
  display:block;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9;
  margin:var(--abro-media-gap) 0;
  border:0;
  border-radius:var(--abro-media-radius);
}

/* WordPress's own responsive-embed shim fights aspect-ratio (it sets a
   padding-top percentage from the provider's reported dimensions, which is not
   16:9 for portrait uploads). Neutralise it and let aspect-ratio win. */
.elementor-widget-theme-post-content .wp-block-embed__wrapper{
  padding:0 !important;
  height:auto !important;
}


/* ==== In-content stills ==== */

/*
 * Deliberate, standalone media only: block images and gallery tiles. Inline
 * images inside a paragraph (small logos, badges, signatures) keep their own
 * size and are only stopped from overflowing the column.
 */
.elementor-widget-theme-post-content figure.wp-block-image img,
.elementor-widget-theme-post-content figure.alignnone > img,
.elementor-widget-theme-post-content figure.aligncenter > img{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
  margin:var(--abro-media-gap) 0;
  border-radius:var(--abro-media-radius);
}

.elementor-widget-theme-post-content img{
  max-width:100%;
  height:auto;
}

.elementor-widget-theme-post-content figure.wp-block-image{margin:0;}

.elementor-widget-theme-post-content figcaption,
.elementor-widget-theme-post-content .wp-caption-text{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:#6B7280;
}


/* ==== The [gallery] shortcode ==== */

/*
 * WordPress prints an inline <style> per gallery - `#gallery-1 .gallery-item
 * {float:left;width:33.33%}` - at id specificity (1,1,0) plus a float layout
 * from the 2008 default theme. Replacing it with a grid needs !important on
 * the three properties that stylesheet sets; everything else is unopposed.
 */
.elementor-widget-theme-post-content .gallery{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin:var(--abro-media-gap) 0 !important;
}
@media (max-width:1024px){
  .elementor-widget-theme-post-content .gallery{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:600px){
  .elementor-widget-theme-post-content .gallery{grid-template-columns:minmax(0, 1fr);}
}

.elementor-widget-theme-post-content .gallery .gallery-item{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0;
  text-align:left;
}
.elementor-widget-theme-post-content .gallery .gallery-icon{margin:0;line-height:0;}
.elementor-widget-theme-post-content .gallery .gallery-icon a{
  display:block;
  border-radius:10px;
  overflow:hidden;
}

.elementor-widget-theme-post-content .gallery img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
  margin:0 !important;
  border:0 !important;
  border-radius:10px;
  transition:transform .3s ease;
}
.elementor-widget-theme-post-content .gallery .gallery-icon a:hover img,
.elementor-widget-theme-post-content .gallery .gallery-icon a:focus-visible img{
  transform:scale(1.04);
}
.elementor-widget-theme-post-content .gallery .gallery-caption{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#6B7280;
}

@media (prefers-reduced-motion:reduce){
  .elementor-widget-theme-post-content .gallery img{transition:none;}
  .elementor-widget-theme-post-content .gallery .gallery-icon a:hover img{transform:none;}
}


/* ==== Trailing whitespace in post content ==== */

/* Several posts end with `<p>&nbsp;</p>` left behind by the editor. CSS cannot
   match on content, but zeroing the trailing margin stops the article column
   from pushing an extra gap into the section below it. */
.elementor-widget-theme-post-content > *:last-child{margin-bottom:0;}


/* ==========================================================================
   PRODUCT GALLERY NAVIGATION
   added 24 Sep 2026
   ==========================================================================

   WooCommerce runs FlexSlider on .woocommerce-product-gallery but passes
   directionNav:false, and the only supported way to change that is the
   `woocommerce_single_product_carousel_options` PHP filter - which this host
   will not let us write. So the arrows are our own markup (snippet "ABRO
   Product Gallery Nav"), driven through the FlexSlider instance's public
   flexAnimate() API. Styling lives here.
   ========================================================================== */

.woocommerce-product-gallery{
  position:relative;
}

button.abro-gal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:grid !important;
  place-items:center;
  width:42px;
  height:42px;
  min-height:0 !important;
  padding:0 !important;
  border:1px solid rgba(0, 71, 187, 0.12) !important;
  border-radius:50% !important;
  background:rgba(255, 255, 255, 0.92) !important;
  background-image:none !important;
  color:#0047BB !important;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(23, 23, 27, 0.12);
  opacity:0;
  transition:opacity .2s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Revealed on hover on pointer devices, always visible on touch (below). */
.woocommerce-product-gallery:hover button.abro-gal-nav,
.woocommerce-product-gallery button.abro-gal-nav:focus-visible{
  opacity:1;
}

button.abro-gal-nav--prev{left:12px;}
button.abro-gal-nav--next{right:12px;}

button.abro-gal-nav:hover,
button.abro-gal-nav:focus,
button.abro-gal-nav:focus-visible,
button.abro-gal-nav:active{
  background:#0047BB !important;
  background-image:none !important;
  color:#FFFFFF !important;
  box-shadow:0 4px 14px rgba(0, 71, 187, 0.3);
}
button.abro-gal-nav:focus-visible{
  outline:2px solid #0088FF;
  outline-offset:2px;
}

button.abro-gal-nav svg{
  display:block;
  width:20px;
  height:20px;
}

/* Slide counter, bottom-right of the main image. */
.abro-gal-count{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:60;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(23, 23, 27, 0.62);
  color:#fff;
  font-family:"Gilroy Medium","Gilroy Regular",system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.5;
  pointer-events:none;
}

/* The zoom trigger sits top-right at z-index 99; keep the counter clear of it. */
.woocommerce-product-gallery__trigger{z-index:70;}

/* Hover is not a gesture on touch, so the arrows stay put there. */
@media (hover:none),(max-width:767px){
  button.abro-gal-nav{opacity:1;width:38px;height:38px;}
  button.abro-gal-nav--prev{left:8px;}
  button.abro-gal-nav--next{right:8px;}
  button.abro-gal-nav svg{width:18px;height:18px;}
}

@media (prefers-reduced-motion:reduce){
  button.abro-gal-nav{transition:none;}
}

/* ==== Thumbnail strip ==== */

/*
 * FlexSlider's controlNav:'thumbnails' prints a bare <ol> with floated <li>s
 * and no active state beyond a class. Grid + a ring on .flex-active makes it
 * read as navigation rather than a row of stray images.
 */
.woocommerce-product-gallery ol.flex-control-thumbs{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  margin:16px 0 0 !important;
  padding:0;
  list-style:none;
}
@media (max-width:480px){
  .woocommerce-product-gallery ol.flex-control-thumbs{grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px;}
}

.woocommerce-product-gallery ol.flex-control-thumbs li{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  list-style:none;
  line-height:0;
}

.woocommerce-product-gallery ol.flex-control-thumbs img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1;
  object-fit:contain;
  display:block;
  padding:6px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #E4E8EF;
  border-radius:6px;
  opacity:.72;
  cursor:pointer;
  transition:opacity .18s ease, border-color .18s ease;
}
.woocommerce-product-gallery ol.flex-control-thumbs img:hover{
  opacity:1;
  border-color:#B6C6E4;
}
.woocommerce-product-gallery ol.flex-control-thumbs img.flex-active,
.woocommerce-product-gallery ol.flex-control-thumbs li img[aria-current="true"]{
  opacity:1;
  border-color:#0047BB;
  box-shadow:0 0 0 1px #0047BB inset;
}

@media (prefers-reduced-motion:reduce){
  .woocommerce-product-gallery ol.flex-control-thumbs img{transition:none;}
}
/* The controls are relocated into .flex-viewport by the snippet, so that box
   has to be the containing block. FlexSlider already sets overflow:hidden on
   it to clip the slides; the controls are inset far enough to stay clear. */
.woocommerce-product-gallery .flex-viewport{
  position:relative;
}


/* ==========================================================================
   PRODUCT VIDEOS
   added 24 Sep 2026
   ==========================================================================

   88 products carry YouTube links in the ACF repeater `video_urls_repeat`
   (0_video_url / 0_video_language, 1_...), imported with the rest of the
   catalogue - the same 88 that show a video on abro.com. Nothing was missing;
   the Single Product Template simply never rendered the field.

   Elementor Pro has no ACF-repeater widget and a shortcode would need PHP,
   which this host will not let us write, so the markup is generated into each
   product's post_content between `<!-- abro:video:start -->` and
   `<!-- abro:video:end -->` - the same mechanism the spec table already uses,
   and regenerated the same way.
   ========================================================================== */

.abro-video{
  margin-top:32px;
  font-family:var(--abro-p-font);
}

.abro-video .abro-video__heading,
h3.abro-video__heading{
  font-family:var(--abro-p-font-strong);
  font-size:20px;
  line-height:1.3;
  font-weight:600;
  color:var(--abro-p-blue);
  margin:0 0 14px;
}

.abro-video__item{margin:0;}
.abro-video__item + .abro-video__item{margin-top:20px;}

.abro-video__frame{
  position:relative;
  aspect-ratio:16 / 9;
  border-radius:10px;
  overflow:hidden;
  background:#000;
}
.abro-video__frame iframe{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.abro-video__lang{
  display:inline-block;
  margin:9px 0 0;
  padding:3px 9px;
  border:1px solid var(--abro-p-line);
  border-radius:999px;
  font-family:var(--abro-p-font-strong);
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--abro-p-muted);
}

/* wpautop wraps the standalone <!-- abro:specs --> / <!-- abro:video --> markers
   in their own paragraphs. They render as empty blocks with real margins, so
   they are collapsed here. Comment-only elements match :empty in every browser
   this site supports. */
.elementor-widget-woocommerce-product-content p:empty,
.elementor-widget-theme-post-content p:empty{display:none;}


/* ==========================================================================
   PRODUCT MEDIA & DOWNLOADS SECTION
   added 24 Sep 2026
   ==========================================================================

   Full-width band below the product frame. The spec table stays in the right
   column next to the title; the PDF buttons and the videos are moved down here
   at runtime by snippet "ABRO Product Media Section" (18550), because Elementor
   cannot render the same post_content twice and splitting it would need PHP.

   The section is [hidden] in the markup and only revealed once the script has
   actually moved something into it, so a product with neither videos nor
   documents shows nothing at all rather than an empty heading.
   ========================================================================== */

.abro-media[hidden],
.abro-media__group[hidden]{display:none !important;}

.abro-media{
  font-family:var(--abro-p-font);
  color:var(--abro-p-ink);
  padding-top:8px;
  border-top:1px solid var(--abro-p-line);
}

.abro-media .abro-media__title,
h2.abro-media__title{
  font-family:var(--abro-p-font-strong);
  font-size:28px;
  line-height:1.25;
  font-weight:600;
  color:var(--abro-p-blue);
  margin:24px 0 0;
}

.abro-media__group{margin-top:26px;}

.abro-media .abro-media__sub,
h3.abro-media__sub{
  font-family:var(--abro-p-font-strong);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--abro-p-muted);
  margin:0 0 14px;
}

/* Two up on desktop - the section is full width now, so a single column would
   put a 1200px-wide video on the page. */
.abro-media__videos{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 560px));
  gap:24px;
}
@media (max-width:767px){
  .abro-media__videos{grid-template-columns:minmax(0, 1fr);gap:18px;}
}

/* The figures arrive with .abro-video__item, which carries a stacking margin
   from its old home in the right column. The grid owns spacing here. */
.abro-media__videos .abro-video__item,
.abro-media__videos .abro-video__item + .abro-video__item{margin:0;}

/* The <ul> keeps its own flex/gap rules from the spec-sheet block. */
.abro-media__docs .abro-spec__docs{margin:0;}

@media (max-width:767px){
  .abro-media .abro-media__title,
  h2.abro-media__title{font-size:23px;}
}


/* ==== Trailing media in post content ==== */

/* The last-child margin trim above exists to stop a stray `<p>&nbsp;</p>` from
   padding the article column. It should not apply to media: a video or gallery
   that ends the article was landing flush against the bottom of the section. */
.elementor-widget-theme-post-content > .wp-video:last-child,
.elementor-widget-theme-post-content > .gallery:last-child,
.elementor-widget-theme-post-content > figure:last-child,
.elementor-widget-theme-post-content > .wp-block-embed:last-child{
  margin-bottom:var(--abro-media-gap) !important;
}