/*
  Overkado Custom CSS
  -------------------
  Put user/project-specific CSS overrides here.

  This file is loaded after the template core CSS and dynamic settings.
  Future Overkado template updates should preserve this file so your manual
  styling changes are not overwritten.

  The uploaded base.css was checked against Overkado v7.0 and no separate
  manual CSS differences were found, so this file starts clean.
*/

/* Example:
.ok-story-title {
  font-size: clamp(36px, 5vw, 62px) !important;
}

*/

/* Homepage Latest News and Media background image
   Replace this file to change it later:
   templates/overkado/images/backgrounds/news-media-bg.png */
.ok-home-updates {
  --ok-news-bg: url('../images/backgrounds/news-media-bg.png');
  --ok-news-bg-opacity: .78;
}

.ok-home-updates::before {
  background-position: center center !important;
}

/* Overkado offcanvas rebuild: safe step 1 */
.ok-mobile-panel {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(1.01);
  transition: opacity .28s ease, transform .32s ease, visibility 0s linear .32s;
}
body.ok-menu-open .ok-mobile-panel,
body.ok-menu-closing .ok-mobile-panel {
  visibility: visible;
}
body.ok-menu-open .ok-mobile-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
body.ok-menu-closing .ok-mobile-panel {
  opacity: 0;
  transform: translateY(-10px) scale(1.01);
}
body.ok-menu-open .ok-offcanvas-search,
body.ok-menu-open .ok-offcanvas-nav > ul > li,
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li {
  animation: okOffcanvasItemIn .34s ease both;
}
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(1),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(1) { animation-delay: .05s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(2),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(2) { animation-delay: .09s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(3),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(3) { animation-delay: .13s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(4),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(4) { animation-delay: .17s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(5),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(5) { animation-delay: .21s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(6),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(6) { animation-delay: .25s; }
@keyframes okOffcanvasItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.ok-offcanvas-nav ul ul,
.ok-offcanvas-nav .ok-offcanvas-submenu {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .34s ease, opacity .22s ease, transform .28s ease;
}
.ok-offcanvas-nav li.ok-submenu-open > ul,
.ok-offcanvas-nav li.ok-submenu-open > .ok-offcanvas-submenu {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
}
.ok-offcanvas-nav li.parent > a:after,
.ok-offcanvas-nav li.deeper > a:after,
.ok-offcanvas-nav li.parent > span:after,
.ok-offcanvas-nav li.deeper > span:after {
  transition: transform .22s ease;
}
.ok-offcanvas-nav li.ok-submenu-open > a:after,
.ok-offcanvas-nav li.ok-submenu-open > span:after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.ok-offcanvas-nav ul ul a,
.ok-offcanvas-nav ul ul span {
  font-size: clamp(.9rem, 1.1vw, 1.08rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 8px 18px;
  color: rgba(255,255,255,.78);
}
.ok-offcanvas-nav ul ul li {
  border-bottom: 0 !important;
}
.ok-offcanvas-nav ul ul a:hover,
.ok-offcanvas-nav ul ul li.active > a {
  color: var(--brand-accent);
}
.ok-menu-close {
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.ok-menu-close:hover {
  transform: rotate(90deg) scale(1.04);
}

/* Overkado offcanvas rebuild: step 2 animation + editable styling */
.ok-mobile-panel {
  --ok-menu-origin-x: calc(100% - 58px);
  --ok-menu-origin-y: 58px;
  background: var(--offcanvas-overlay-color, #020f1d) !important;
  visibility: hidden;
  opacity: 0;
  transform: none !important;
  clip-path: circle(0 at var(--ok-menu-origin-x) var(--ok-menu-origin-y));
  transition:
    clip-path .58s cubic-bezier(.19, 1, .22, 1),
    opacity .22s ease,
    visibility 0s linear .58s;
  will-change: clip-path, opacity;
}
.ok-mobile-panel::before {
  opacity: var(--offcanvas-bg-opacity, .36) !important;
}
.ok-mobile-panel::after {
  background: linear-gradient(
    90deg,
    rgba(2,16,30,var(--offcanvas-overlay-opacity, .84)),
    rgba(2,16,30,calc(var(--offcanvas-overlay-opacity, .84) - .16)) 48%,
    rgba(2,16,30,calc(var(--offcanvas-overlay-opacity, .84) - .06))
  ) !important;
}
body.ok-menu-open .ok-mobile-panel,
body.ok-menu-closing .ok-mobile-panel {
  visibility: visible;
}
body.ok-menu-open .ok-mobile-panel {
  opacity: 1;
  clip-path: circle(155% at var(--ok-menu-origin-x) var(--ok-menu-origin-y));
  transition-delay: 0s;
}
body.ok-menu-closing .ok-mobile-panel {
  opacity: 0;
  clip-path: circle(0 at var(--ok-menu-origin-x) var(--ok-menu-origin-y));
}

/* Fallback for browsers without clip-path */
@supports not (clip-path: circle(10px at 10px 10px)) {
  .ok-mobile-panel {
    transform: translate(22px, -22px) scale(.98) !important;
    transition: opacity .32s ease, transform .38s ease, visibility 0s linear .38s;
  }
  body.ok-menu-open .ok-mobile-panel {
    transform: translate(0, 0) scale(1) !important;
  }
}

/* Menu content entrance */
body.ok-menu-open .ok-offcanvas-search,
body.ok-menu-open .ok-offcanvas-nav > ul > li,
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li,
body.ok-menu-open .ok-mobile-donate {
  animation: okOffcanvasItemIn .42s cubic-bezier(.19, 1, .22, 1) both;
}
body.ok-menu-open .ok-offcanvas-search { animation-delay: .14s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(1),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(1) { animation-delay: .18s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(2),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(2) { animation-delay: .22s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(3),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(3) { animation-delay: .26s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(4),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(4) { animation-delay: .30s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(5),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(5) { animation-delay: .34s; }
body.ok-menu-open .ok-offcanvas-nav > ul > li:nth-child(6),
body.ok-menu-open .ok-offcanvas-nav .nav.menu > li:nth-child(6) { animation-delay: .38s; }
body.ok-menu-open .ok-mobile-donate { animation-delay: .42s; }
@keyframes okOffcanvasItemIn {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Submenu refine */
.ok-offcanvas-nav ul ul,
.ok-offcanvas-nav .ok-offcanvas-submenu {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .34s cubic-bezier(.19, 1, .22, 1), opacity .22s ease, transform .28s ease;
}
.ok-offcanvas-nav li.ok-submenu-open > ul,
.ok-offcanvas-nav li.ok-submenu-open > .ok-offcanvas-submenu {
  max-height: 680px;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 10px;
}
.ok-offcanvas-nav ul ul a,
.ok-offcanvas-nav ul ul span {
  font-size: clamp(.92rem, 1vw, 1.08rem) !important;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 7px 18px !important;
  color: rgba(255,255,255,.78) !important;
}
.ok-offcanvas-nav ul ul a:hover,
.ok-offcanvas-nav ul ul li.active > a {
  color: var(--brand-accent) !important;
}
.ok-offcanvas-nav li.parent > a:after,
.ok-offcanvas-nav li.deeper > a:after,
.ok-offcanvas-nav li.parent > span:after,
.ok-offcanvas-nav li.deeper > span:after {
  transition: transform .22s ease;
}
.ok-offcanvas-nav li.ok-submenu-open > a:after,
.ok-offcanvas-nav li.ok-submenu-open > span:after {
  transform: rotate(225deg) translate(-2px, -2px) !important;
}

/* Close + donate button polish */
.ok-menu-close {
  transition: transform .22s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ok-menu-close:hover {
  transform: rotate(90deg) scale(1.04);
  box-shadow: 0 0 0 8px rgba(255,255,255,.06);
}
.ok-mobile-donate {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 50px;
  min-width: var(--offcanvas-donate-min-width, 132px);
  margin: 34px auto 0;
  padding: var(--offcanvas-donate-padding-y, 14px) var(--offcanvas-donate-padding-x, 42px);
  border: 1px solid var(--offcanvas-donate-border, #FFD10F) !important;
  border-radius: var(--offcanvas-donate-radius, 8px) !important;
  background: var(--offcanvas-donate-bg, #FFD10F) !important;
  color: var(--offcanvas-donate-text, #0A223B) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  white-space: nowrap;
  letter-spacing: .03em;
}
.ok-mobile-donate:hover {
  transform: translateY(-2px);
  filter: brightness(.98);
}

@media (max-width: 640px) {
  .ok-mobile-panel {
    --ok-menu-origin-x: calc(100% - 40px);
    --ok-menu-origin-y: 40px;
  }
  .ok-offcanvas-search {
    margin-bottom: 28px !important;
  }
  .ok-mobile-donate {
    margin-top: 24px;
  }
}

/* Overkado v8.0 module-section architecture
   Template homepage wrappers now only provide positions.
   Journey modules control their own backgrounds, overlays and spacing. */
body.site-home .ok-home-identity,
body.site-home .ok-home-work,
body.site-home .ok-home-impact,
body.site-home .ok-home-proof,
body.site-home .ok-home-updates,
body.site-home .ok-home-resources,
body.site-home .ok-home-action {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}
body.site-home .ok-home-identity::before,
body.site-home .ok-home-identity::after,
body.site-home .ok-home-work::before,
body.site-home .ok-home-work::after,
body.site-home .ok-home-impact::before,
body.site-home .ok-home-impact::after,
body.site-home .ok-home-proof::before,
body.site-home .ok-home-proof::after,
body.site-home .ok-home-updates::before,
body.site-home .ok-home-updates::after,
body.site-home .ok-home-resources::before,
body.site-home .ok-home-resources::after,
body.site-home .ok-home-action::before,
body.site-home .ok-home-action::after {
  display: none !important;
}
body.site-home .ok-home-section > .ok-container {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Overkado v8.1.1 African Beekeepers Corporate preset helpers */
body.ok-preset-abl-corporate {
  --abl-forest: #2F6B2F;
  --abl-leaf: #6F9F3A;
  --abl-honey: #F6C600;
  --abl-cream: #FFF7D6;
  --abl-charcoal: #242424;
}
body.ok-preset-abl-corporate .ok-btn-primary,
body.ok-preset-abl-corporate .ok-header-cta {
  background: var(--abl-honey);
  color: var(--abl-charcoal);
}
body.ok-preset-abl-corporate .ok-section-kicker,
body.ok-preset-abl-corporate .ok-kicker {
  color: var(--abl-forest);
  letter-spacing: .18em;
}
body.ok-preset-abl-corporate .ok-card,
body.ok-preset-abl-corporate .ok-resource-card {
  border-radius: 12px;
}


/* =========================================================
   ABL internal page source patch v1.0.2
   Rebrands shared internal heroes and removes PROCMURA/dove treatment.
   ========================================================= */
body:not(.home) .ok-inner-hero,
body:not(.home) .ok-page-title,
body:not(.home) .ok-subhero,
body:not(.home) .page-hero,
body:not(.home) .ok-page-hero {
  background: linear-gradient(135deg, #2F6B2F 0%, #164333 52%, #0F2A23 100%) !important;
  min-height: 300px !important;
  padding-top: 118px !important;
  padding-bottom: 62px !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

body:not(.home) .ok-inner-hero::before,
body:not(.home) .ok-page-title::before,
body:not(.home) .ok-subhero::before,
body:not(.home) .page-hero::before,
body:not(.home) .ok-page-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 82% 28%, rgba(246,198,0,.18), transparent 32%),
              radial-gradient(circle at 18% 82%, rgba(127,175,75,.18), transparent 34%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body:not(.home) .ok-inner-hero::after,
body:not(.home) .ok-page-title::after,
body:not(.home) .ok-subhero::after,
body:not(.home) .page-hero::after,
body:not(.home) .ok-page-hero::after {
  content: "" !important;
  position: absolute !important;
  right: -100px !important;
  bottom: -120px !important;
  width: 430px !important;
  height: 280px !important;
  background: radial-gradient(circle, rgba(246,198,0,.16), transparent 66%) !important;
  pointer-events: none !important;
}

body:not(.home) .ok-inner-hero .ok-container,
body:not(.home) .ok-page-title > *,
body:not(.home) .ok-subhero > *,
body:not(.home) .page-hero > *,
body:not(.home) .ok-page-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

body:not(.home) .ok-inner-hero .ok-eyebrow,
body:not(.home) .ok-inner-hero .ok-kicker,
body:not(.home) .ok-page-kicker,
body:not(.home) .ok-kicker,
body:not(.home) .ok-subhero-kicker,
body:not(.home) .ok-page-title-kicker,
body:not(.home) .page-subtitle,
body:not(.home) .ok-page-title small {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #F6C600 !important;
}

/* Disable old CSS-injected PROCMURA labels. The label now comes from inner-hero.php. */
body:not(.home) .ok-page-kicker::before,
body:not(.home) .ok-kicker::before,
body:not(.home) .ok-subhero-kicker::before,
body:not(.home) .ok-page-title-kicker::before,
body:not(.home) .page-subtitle::before,
body:not(.home) .ok-page-title small::before {
  content: none !important;
  display: none !important;
}

body:not(.home) .ok-inner-hero h1,
body:not(.home) .ok-page-title h1,
body:not(.home) .ok-subhero h1,
body:not(.home) .page-hero h1,
body:not(.home) .ok-page-hero h1 {
  color: #ffffff !important;
  font-size: clamp(42px, 5.6vw, 76px) !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  letter-spacing: -.055em !important;
}

/* Prevent duplicated ABL native hero inside article/category overrides; shared hero above is the source of truth. */
.abl-native-hero {
  display: none !important;
}

/* Better spacing now that only one hero is displayed. */
.abl-native-shell {
  padding-top: 76px !important;
}
.abl-category-intro {
  padding-top: 56px !important;
}

/* ABL article body refinement. */
.abl-native-content .abl-intro-grid {
  grid-template-columns: 1.08fr .92fr !important;
  gap: 62px !important;
}
.abl-native-content .abl-highlight-card,
.abl-native-content .abl-vision-band {
  border-radius: 10px !important;
}
.abl-native-content .abl-image-grid img,
.abl-category-card,
.abl-category-card img {
  border-radius: 10px !important;
}

@media (max-width: 900px) {
  .abl-native-content .abl-intro-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ABL PRODUCT CATALOGUE
   Scoped to Hives & Accessories and similar catalogue pages
   Does not affect Stories, About or standard articles
   ========================================================= */

.abl-product-catalog {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 28px 0;
  box-sizing: border-box;
}


/* =========================================================
   CATALOGUE INTRODUCTION
   ========================================================= */

.abl-product-catalog .abl-catalog-intro {
  max-width: 900px;
  margin: 0 0 58px;
}

.abl-product-catalog .abl-catalog-intro h2 {
  margin: 8px 0 20px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
}

.abl-product-catalog .abl-catalog-intro .abl-lead {
  max-width: 820px;
  margin-bottom: 16px;
}


/* =========================================================
   INDIVIDUAL PRODUCT ROW
   Text and image are locked to the same row
   ========================================================= */

.abl-product-catalog .abl-product-row {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 430px) !important;
  grid-template-rows: auto !important;
  column-gap: 64px !important;
  row-gap: 0 !important;
  align-items: center !important;

  width: 100%;
  min-height: 360px;
  margin: 0 !important;
  padding: 48px 0 !important;

  border-top: 1px solid rgba(15, 54, 42, 0.12);
  box-sizing: border-box;
}


/* Do not place a border above the first product */

.abl-product-catalog .abl-product-row:first-of-type {
  border-top: 0;
  padding-top: 20px !important;
}


/* =========================================================
   FORCE TEXT TO LEFT AND IMAGE TO RIGHT
   This overrides the order used in the HTML
   ========================================================= */

.abl-product-catalog .abl-product-row > .abl-article-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 100% !important;
  max-width: 650px;
  margin: 0 !important;
  padding: 0 !important;

  align-self: center !important;
}

.abl-product-catalog .abl-product-row > .abl-article-media {
  grid-column: 2 !important;
  grid-row: 1 !important;

  position: static !important;
  top: auto !important;

  width: 100% !important;
  max-width: 430px;
  margin: 0 !important;
  padding: 0 !important;

  align-self: center !important;
  justify-self: end !important;
}


/* =========================================================
   PRODUCT TYPOGRAPHY
   ========================================================= */

.abl-product-catalog .abl-product-row .abl-kicker {
  margin: 0 0 10px;
  color: #4f7f3d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.abl-product-catalog .abl-product-row h2 {
  margin: 0 0 18px;
  color: #101c17;
  font-size: clamp(30px, 3vw, 43px);
  line-height: 1.02;
}

.abl-product-catalog .abl-product-row h3 {
  margin: 20px 0 12px;
  color: #267334;
  font-size: 22px;
  line-height: 1.2;
}

.abl-product-catalog .abl-product-row p {
  max-width: 640px;
  margin: 0 0 16px;
  color: #45514c;
  font-size: 16px;
  line-height: 1.75;
}

.abl-product-catalog .abl-product-row ul,
.abl-product-catalog .abl-product-row ol {
  max-width: 630px;
  margin: 18px 0 0;
  padding-left: 23px;
}

.abl-product-catalog .abl-product-row li {
  margin: 0 0 9px;
  color: #36433d;
  font-size: 15px;
  line-height: 1.6;
}


/* =========================================================
   PRODUCT IMAGE CARD
   Every image gets the same visible area
   ========================================================= */

.abl-product-catalog .abl-product-row .abl-article-figure {
  display: flex;
  flex-direction: column;

  width: 100%;
  margin: 0 !important;

  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 54, 42, 0.1);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(11, 43, 33, 0.12);
}

.abl-product-catalog .abl-product-row .abl-article-figure img {
  display: block;
  width: 100% !important;
  height: 300px !important;
  margin: 0 !important;
  padding: 20px;

  object-fit: contain;
  object-position: center;
  background: #f0f5f3;
  box-sizing: border-box;
}

.abl-product-catalog .abl-product-row .abl-article-figure figcaption {
  min-height: 58px;
  margin: 0;
  padding: 13px 16px 15px;

  color: #5c665f;
  background: #ffffff;
  border-top: 3px solid #f4c400;

  font-size: 12px;
  line-height: 1.45;
  box-sizing: border-box;
}


/* =========================================================
   PREVENT GENERIC ARTICLE RULES FROM CAUSING DRIFT
   ========================================================= */

.abl-product-catalog .abl-product-row .abl-content-block,
.abl-product-catalog .abl-product-row .abl-article-copy > :first-child {
  margin-top: 0 !important;
}

.abl-product-catalog .abl-product-row .abl-article-media,
.abl-product-catalog .abl-product-row .abl-article-figure {
  transform: none !important;
  float: none !important;
  clear: none !important;
}


/* =========================================================
   PRODUCT CTA BAND
   ========================================================= */

.abl-product-catalog > .abl-vision-band {
  width: 100%;
  max-width: none;
  margin: 70px 0 0;
  padding: 68px 54px;
  box-sizing: border-box;
}

.abl-product-catalog > .abl-vision-band h2 {
  max-width: 760px;
}

.abl-product-catalog > .abl-vision-band p:not(.abl-kicker) {
  max-width: 820px;
}


/* =========================================================
   MEDIUM DESKTOP AND TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .abl-product-catalog {
    padding: 56px 24px 0;
  }

  .abl-product-catalog .abl-product-row {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(270px, 350px) !important;

    column-gap: 38px !important;
    min-height: 320px;
    padding: 40px 0 !important;
  }

  .abl-product-catalog .abl-product-row .abl-article-figure img {
    height: 250px !important;
    padding: 16px;
  }

  .abl-product-catalog .abl-product-row h2 {
    font-size: clamp(27px, 3.5vw, 36px);
  }

}


/* =========================================================
   MOBILE
   Text followed immediately by its corresponding image
   ========================================================= */

@media (max-width: 700px) {

  .abl-product-catalog {
    padding: 42px 18px 0;
  }

  .abl-product-catalog .abl-catalog-intro {
    margin-bottom: 34px;
  }

  .abl-product-catalog .abl-product-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 24px !important;

    min-height: 0;
    padding: 38px 0 !important;

    align-items: start !important;
  }

  .abl-product-catalog .abl-product-row > .abl-article-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;

    max-width: none;
  }

  .abl-product-catalog .abl-product-row > .abl-article-media {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: 100% !important;
    max-width: none;
    justify-self: stretch !important;
  }

  .abl-product-catalog .abl-product-row .abl-article-figure img {
    height: 280px !important;
  }

  .abl-product-catalog .abl-product-row h2 {
    font-size: 31px;
  }

  .abl-product-catalog > .abl-vision-band {
    margin-top: 42px;
    padding: 48px 24px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .abl-product-catalog {
    padding-left: 15px;
    padding-right: 15px;
  }

  .abl-product-catalog .abl-product-row {
    padding: 32px 0 !important;
  }

  .abl-product-catalog .abl-product-row .abl-article-figure img {
    height: 235px !important;
    padding: 14px;
  }

  .abl-product-catalog .abl-product-row p {
    font-size: 15px;
    line-height: 1.7;
  }

  .abl-product-catalog .abl-product-row li {
    font-size: 14px;
  }

}


/* =========================================================
   JOOMLA 3 CATEGORY BLOG PAGINATION
   Scoped to blog pages so article lists remain unaffected
   ========================================================= */

.blog .pagination,
.blog-featured .pagination,
.category-blog .pagination {
  clear: both !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 48px 0 20px !important;
  padding: 0 !important;
  text-align: center !important;
}

.blog .pagination > ul,
.blog .pagination ul.pagination-list,
.blog ul.pagination,
.blog-featured .pagination > ul,
.blog-featured .pagination ul.pagination-list,
.blog-featured ul.pagination,
.category-blog .pagination > ul,
.category-blog .pagination ul.pagination-list,
.category-blog ul.pagination {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

.blog .pagination li,
.blog-featured .pagination li,
.category-blog .pagination li {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blog .pagination li::before,
.blog .pagination li::marker,
.blog-featured .pagination li::before,
.blog-featured .pagination li::marker,
.category-blog .pagination li::before,
.category-blog .pagination li::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
}

.blog .pagination li > a,
.blog .pagination li > span,
.blog-featured .pagination li > a,
.blog-featured .pagination li > span,
.category-blog .pagination li > a,
.category-blog .pagination li > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  padding: 8px 13px !important;
  border: 1px solid #dfe6df !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #174f2a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.blog .pagination li.active > a,
.blog .pagination li.active > span,
.blog-featured .pagination li.active > a,
.blog-featured .pagination li.active > span,
.category-blog .pagination li.active > a,
.category-blog .pagination li.active > span,
.blog .pagination li > a:hover,
.blog-featured .pagination li > a:hover,
.category-blog .pagination li > a:hover {
  border-color: #ffcc00 !important;
  background: #ffcc00 !important;
  color: #112b1d !important;
}

.blog .pagination li.disabled > a,
.blog .pagination li.disabled > span,
.blog-featured .pagination li.disabled > a,
.blog-featured .pagination li.disabled > span,
.category-blog .pagination li.disabled > a,
.category-blog .pagination li.disabled > span {
  border-color: #edf0ed !important;
  background: #f5f7f5 !important;
  color: #9aa49d !important;
  cursor: default !important;
}

.blog .pagination .counter,
.blog-featured .pagination .counter,
.category-blog .pagination .counter {
  flex-basis: 100% !important;
  margin: 12px 0 0 !important;
  color: #68756d !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

@media (max-width: 600px) {
  .blog .pagination > ul,
  .blog .pagination ul.pagination-list,
  .blog ul.pagination,
  .blog-featured .pagination > ul,
  .blog-featured .pagination ul.pagination-list,
  .blog-featured ul.pagination,
  .category-blog .pagination > ul,
  .category-blog .pagination ul.pagination-list,
  .category-blog ul.pagination {
    gap: 5px !important;
  }

  .blog .pagination li > a,
  .blog .pagination li > span,
  .blog-featured .pagination li > a,
  .blog-featured .pagination li > span,
  .category-blog .pagination li > a,
  .category-blog .pagination li > span {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   DESKTOP DROPDOWN CONSISTENCY
   Use the compact homepage dropdown dimensions everywhere.
   This deliberately excludes the off-canvas/mobile menu.
   ========================================================= */
@media (min-width: 992px) {
  .ok-desktop-nav ul ul > li > a,
  .ok-desktop-nav ul ul > li > span {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 18px !important;
    line-height: 1.35 !important;
  }
}


/* =========================================================
   ABL STORIES CATEGORY PAGINATION
   Matches the category override: .abl-pagination > ul
   ========================================================= */

.abl-native-page .abl-pagination {
  clear: both !important;
  width: 100% !important;
  margin: 48px 0 20px !important;
  padding: 0 !important;
  text-align: center !important;
}

.abl-native-page .abl-pagination > ul {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

.abl-native-page .abl-pagination > ul > li {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.abl-native-page .abl-pagination > ul > li::before,
.abl-native-page .abl-pagination > ul > li::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
}

.abl-native-page .abl-pagination > ul > li > a,
.abl-native-page .abl-pagination > ul > li > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  border: 1px solid #dfe6df !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #174f2a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.abl-native-page .abl-pagination > ul > li > a:hover,
.abl-native-page .abl-pagination > ul > li.active > a,
.abl-native-page .abl-pagination > ul > li.active > span {
  border-color: #ffcc00 !important;
  background: #ffcc00 !important;
  color: #112b1d !important;
}

.abl-native-page .abl-pagination > ul > li.disabled > a,
.abl-native-page .abl-pagination > ul > li.disabled > span {
  border-color: #edf0ed !important;
  background: #f5f7f5 !important;
  color: #9aa49d !important;
  cursor: default !important;
}

@media (max-width: 600px) {
  .abl-native-page .abl-pagination > ul {
    gap: 5px !important;
  }

  .abl-native-page .abl-pagination > ul > li > a,
  .abl-native-page .abl-pagination > ul > li > span {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }
}