/*
  Theme: TF Master Theme HubSpot
  Author: Tradipar
*/

/* 1. TOKENS & DESIGN SYSTEM */
/* Missing Template at Path: \'TFAHUB251\/vibe-blueprint.json\' */

/* 2. GENERIC & RESET */
*, *:before, *:after {
  box-sizing: border-box;
}

/* 3. OBJECTS (Layout, Containers) */


/* -----------------------------------------------------------------------------
   GLOBAL GRID SYSTEM - LEGO ARCHITECTURE
   Responsive flex-grid that forces horizontal layout in the HubSpot Editor.
   ----------------------------------------------------------------------------- */

:root {
  --column-gap: 20px;
}

/* 1. BASE MOBILE LAYOUT (Stacked) */
.row-fluid {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 !important;
}

.row-fluid [class*="span"],
.row-fluid .widget-span {
  min-height: 1px !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  box-sizing: border-box !important;
}

/* 2. HORIZONTAL GRID LOGIC */


/* 3. RESPONSIVE DESKTOP (768px+) */
@media screen and (min-width: 768px) {
  
   .row-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

   .row-fluid:before,
   .row-fluid:after {
    display: none !important;
    content: none !important;
  }

  
     .row-fluid .span1,
     .row-fluid .widget-span.span1 {
      width: calc((1 / 12 * 100%) - (0.9166666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span2,
     .row-fluid .widget-span.span2 {
      width: calc((2 / 12 * 100%) - (0.8333333333333334 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span3,
     .row-fluid .widget-span.span3 {
      width: calc((3 / 12 * 100%) - (0.75 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span4,
     .row-fluid .widget-span.span4 {
      width: calc((4 / 12 * 100%) - (0.6666666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span5,
     .row-fluid .widget-span.span5 {
      width: calc((5 / 12 * 100%) - (0.5833333333333334 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span6,
     .row-fluid .widget-span.span6 {
      width: calc((6 / 12 * 100%) - (0.5 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span7,
     .row-fluid .widget-span.span7 {
      width: calc((7 / 12 * 100%) - (0.4166666666666667 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span8,
     .row-fluid .widget-span.span8 {
      width: calc((8 / 12 * 100%) - (0.3333333333333333 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span9,
     .row-fluid .widget-span.span9 {
      width: calc((9 / 12 * 100%) - (0.25 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span10,
     .row-fluid .widget-span.span10 {
      width: calc((10 / 12 * 100%) - (0.16666666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span11,
     .row-fluid .widget-span.span11 {
      width: calc((11 / 12 * 100%) - (0.08333333333333333 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
     .row-fluid .span12,
     .row-fluid .widget-span.span12 {
      width: calc((12 / 12 * 100%) - (0.0 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  

   .row-fluid [class*="span"]:first-child,
   .row-fluid .widget-span:first-child {
    margin-left: 0 !important;
  }

   .row-fluid .span12,
   .row-fluid .widget-span.span12 {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
  }

}

/* 4. FORCE HUB SPOT EDITOR HORIZONTAL (Lego Shield) */

  body.hs-edit-mode .row-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  body.hs-edit-mode .row-fluid:before,
  body.hs-edit-mode .row-fluid:after {
    display: none !important;
    content: none !important;
  }

  
    body.hs-edit-mode .row-fluid .span1,
    body.hs-edit-mode .row-fluid .widget-span.span1 {
      width: calc((1 / 12 * 100%) - (0.9166666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span2,
    body.hs-edit-mode .row-fluid .widget-span.span2 {
      width: calc((2 / 12 * 100%) - (0.8333333333333334 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span3,
    body.hs-edit-mode .row-fluid .widget-span.span3 {
      width: calc((3 / 12 * 100%) - (0.75 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span4,
    body.hs-edit-mode .row-fluid .widget-span.span4 {
      width: calc((4 / 12 * 100%) - (0.6666666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span5,
    body.hs-edit-mode .row-fluid .widget-span.span5 {
      width: calc((5 / 12 * 100%) - (0.5833333333333334 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span6,
    body.hs-edit-mode .row-fluid .widget-span.span6 {
      width: calc((6 / 12 * 100%) - (0.5 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span7,
    body.hs-edit-mode .row-fluid .widget-span.span7 {
      width: calc((7 / 12 * 100%) - (0.4166666666666667 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span8,
    body.hs-edit-mode .row-fluid .widget-span.span8 {
      width: calc((8 / 12 * 100%) - (0.3333333333333333 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span9,
    body.hs-edit-mode .row-fluid .widget-span.span9 {
      width: calc((9 / 12 * 100%) - (0.25 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span10,
    body.hs-edit-mode .row-fluid .widget-span.span10 {
      width: calc((10 / 12 * 100%) - (0.16666666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span11,
    body.hs-edit-mode .row-fluid .widget-span.span11 {
      width: calc((11 / 12 * 100%) - (0.08333333333333333 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid .span12,
    body.hs-edit-mode .row-fluid .widget-span.span12 {
      width: calc((12 / 12 * 100%) - (0.0 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  

  body.hs-edit-mode .row-fluid [class*="span"]:first-child,
  body.hs-edit-mode .row-fluid .widget-span:first-child {
    margin-left: 0 !important;
  }

  body.hs-edit-mode .row-fluid .span12,
  body.hs-edit-mode .row-fluid .widget-span.span12 {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
  }


  body.hs-edit-mode .row-fluid-wrapper .row-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  body.hs-edit-mode .row-fluid-wrapper .row-fluid:before,
  body.hs-edit-mode .row-fluid-wrapper .row-fluid:after {
    display: none !important;
    content: none !important;
  }

  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span1,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span1 {
      width: calc((1 / 12 * 100%) - (0.9166666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span2,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span2 {
      width: calc((2 / 12 * 100%) - (0.8333333333333334 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span3,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span3 {
      width: calc((3 / 12 * 100%) - (0.75 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span4,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span4 {
      width: calc((4 / 12 * 100%) - (0.6666666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span5,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span5 {
      width: calc((5 / 12 * 100%) - (0.5833333333333334 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span6,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span6 {
      width: calc((6 / 12 * 100%) - (0.5 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span7,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span7 {
      width: calc((7 / 12 * 100%) - (0.4166666666666667 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span8,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span8 {
      width: calc((8 / 12 * 100%) - (0.3333333333333333 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span9,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span9 {
      width: calc((9 / 12 * 100%) - (0.25 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span10,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span10 {
      width: calc((10 / 12 * 100%) - (0.16666666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span11,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span11 {
      width: calc((11 / 12 * 100%) - (0.08333333333333333 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .span12,
    body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span12 {
      width: calc((12 / 12 * 100%) - (0.0 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  

  body.hs-edit-mode .row-fluid-wrapper .row-fluid [class*="span"]:first-child,
  body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span:first-child {
    margin-left: 0 !important;
  }

  body.hs-edit-mode .row-fluid-wrapper .row-fluid .span12,
  body.hs-edit-mode .row-fluid-wrapper .row-fluid .widget-span.span12 {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
  }


  .dnd-section .row-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .dnd-section .row-fluid:before,
  .dnd-section .row-fluid:after {
    display: none !important;
    content: none !important;
  }

  
    .dnd-section .row-fluid .span1,
    .dnd-section .row-fluid .widget-span.span1 {
      width: calc((1 / 12 * 100%) - (0.9166666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span2,
    .dnd-section .row-fluid .widget-span.span2 {
      width: calc((2 / 12 * 100%) - (0.8333333333333334 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span3,
    .dnd-section .row-fluid .widget-span.span3 {
      width: calc((3 / 12 * 100%) - (0.75 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span4,
    .dnd-section .row-fluid .widget-span.span4 {
      width: calc((4 / 12 * 100%) - (0.6666666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span5,
    .dnd-section .row-fluid .widget-span.span5 {
      width: calc((5 / 12 * 100%) - (0.5833333333333334 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span6,
    .dnd-section .row-fluid .widget-span.span6 {
      width: calc((6 / 12 * 100%) - (0.5 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span7,
    .dnd-section .row-fluid .widget-span.span7 {
      width: calc((7 / 12 * 100%) - (0.4166666666666667 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span8,
    .dnd-section .row-fluid .widget-span.span8 {
      width: calc((8 / 12 * 100%) - (0.3333333333333333 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span9,
    .dnd-section .row-fluid .widget-span.span9 {
      width: calc((9 / 12 * 100%) - (0.25 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span10,
    .dnd-section .row-fluid .widget-span.span10 {
      width: calc((10 / 12 * 100%) - (0.16666666666666666 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span11,
    .dnd-section .row-fluid .widget-span.span11 {
      width: calc((11 / 12 * 100%) - (0.08333333333333333 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  
    .dnd-section .row-fluid .span12,
    .dnd-section .row-fluid .widget-span.span12 {
      width: calc((12 / 12 * 100%) - (0.0 * var(--column-gap, 20px))) !important;
      flex: 0 0 auto !important;
      margin-left: var(--column-gap, 20px) !important;
      max-width: 100% !important;
    }
  

  .dnd-section .row-fluid [class*="span"]:first-child,
  .dnd-section .row-fluid .widget-span:first-child {
    margin-left: 0 !important;
  }

  .dnd-section .row-fluid .span12,
  .dnd-section .row-fluid .widget-span.span12 {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
  }


/* 5. EDITOR PLACEHOLDER STABILITY */
body.hs-edit-mode .row-fluid [class*="span"],
body.hs-edit-mode .row-fluid .widget-span {
  display: block !important;
  float: none !important;
  min-height: 50px !important;
}

body.hs-edit-mode .dnd-column {
  background-clip: content-box !important;
}
/* Missing Template at Path: \'TFAHUB251\/css\/objects\/_containers.hubl.css\' */
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* 4. COMPONENTS */
/* -----------------------------------------------------------------------------
   GLASSMORPHISM STICKY HEADER - LEGO COMPATIBLE
   Modern glass-blur effect with sticky positioning.
   ----------------------------------------------------------------------------- */

/* 
   The .header class is the LEGO container. 
   We rely on the global grid (_layout.hubl.css) for column behavior.
*/

/* 1. EDITOR FIX: BASE COMPATIBILITY */
body.hs-edit-mode .header {
  position: relative !important;
  top: auto !important;
  z-index: 10 !important;
  width: 100% !important;
  transform: none !important;
}

/* 2. LOGO CONSTRAINTS */
.hs_cos_wrapper_type_logo a {
  display: block;
}

.hs_cos_wrapper_type_logo img {
  max-width: 100%;
  height: auto;
}

/* 3. SCOPED HEADER MODULE STYLES - Menu Item Layout */
.tfa-header-module .hs-menu-wrapper>ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  /* Allow wrap if items too many */
  align-items: center !important;
  gap: 24px;
}

.tfa-header-module .hs-menu-wrapper>ul>li {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
}

/* TYPOGRAPHY */
.tfa-header-module a {
  font-family: 'Arial Black', Gadget, sans-serif;
  font-weight: 900;
  font-size: 16px;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: all 0.3s ease;
}

/* Hover Effect Line */
.tfa-header-module .hs-menu-wrapper>ul>li>a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background: #D4A853;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tfa-header-module .hs-menu-wrapper>ul>li>a:hover::after {
  width: 100%;
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}

/* 5. UTILITIES */
/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}

/* 6. THEME OVERRIDES (Design Manager Customizations) */
{
    % import './tools/_macros.hubl.css' %
  }

  /* Industrial Design Tokens */
  :root {
    --brand-primary: #0A0A0A;
    --brand-secondary: #F0F0F0;
    --brand-accent: #D4A853;
    --industrial-black: #0A0A0A;
    --industrial-silver: #C0C0C0;
    --industrial-grafite: #1A1A1A;
    --industrial-cinza-solda: #888888;
  }

    {
    ## Table of contents 1. Variables 1a. Containers 1b. Colors 1c. Typography 1d. Buttons 1e. Forms 1f. Tables 1g. Website header 1h. Website footer 2. Containers / Grid / DND areas 3. Typography 4. Buttons 5. Forms 6. Tables 7. Website header 8. Website footer 9. Blog 10. System pages 11. Modules ##
  }

    {
    ###########################################################################
  }

    {
    ############################ 1. Variables #############################
  }

    {
    ###########################################################################
  }

  /* 1a. Containers */

    {
    % set container_width=theme.spacing.maximum_content_width~'px' %
  }

    {
    % set dnd_section_padding=theme.spacing.vertical_spacing~'px '~'1rem' %
  }

  /* 1b. Colors */

    {
    % set primary_color=theme.global_colors.primary.color %
  }

    {
    % set secondary_color=theme.global_colors.secondary.color %
  }

  /* 1c. Typography */

    {
    % set primary_font=theme.global_fonts.primary %
  }

    {
    % set secondary_font=theme.global_fonts.secondary %
  }

    {
    % set h1_font=theme.text.h1.font %
  }

    {
    % set h1_text_transform=theme.text.h1.transform %
  }

    {
    % set h2_font=theme.text.h2.font %
  }

    {
    % set h2_text_transform=theme.text.h2.transform %
  }

    {
    % set h3_font=theme.text.h3.font %
  }

    {
    % set h3_text_transform=theme.text.h3.transform %
  }

    {
    % set h4_font=theme.text.h4.font %
  }

    {
    % set h4_text_transform=theme.text.h4.transform %
  }

    {
    % set h5_font=theme.text.h5.font %
  }

    {
    % set h5_text_transform=theme.text.h5.transform %
  }

    {
    % set h6_font=theme.text.h6.font %
  }

    {
    % set h6_text_transform=theme.text.h6.transform %
  }

    {
    % set body_font=theme.text.body_font.font %
  }

    {
    % set anchor_font=theme.text.links.font %
  }

  /* 1d. Buttons */

    {
    % set button_font=theme.buttons.text.font %
  }

    {
    % set button_text_transform=theme.buttons.text.transform %
  }

    {
    % set button_bg_color=color(theme.buttons.background.color) %
  }

    {
    % set button_border=theme.buttons.border.border.hubl.css %
  }

    {
    % set button_corner_radius=theme.buttons.corner.radius~'px' %
  }

    {
    % set button_spacing=theme.buttons.spacing.spacing.hubl.css %
  }

    {
    % set button_color_hover=color(theme.buttons.hover.text.color) %
  }

    {
    % set button_background_hover=color(theme.buttons.hover.background.color) %
  }

    {
    % set button_border_hover=theme.buttons.hover.border.border.hubl.css %
  }

    {
    % set button_corner_radius_hover=theme.buttons.hover.corner.radius~'px' %
  }

  /* 1e. Forms */
    {
    % set form_bg_color=color(theme.forms.form.background.color) %
  }

    {
    % set form_title_font=theme.forms.title.text.font %
  }

    {
    % set form_title_bg_color=color(theme.forms.title.background.color) %
  }

    {
    % set form_title_spacing=theme.forms.title.spacing.spacing.hubl.css %
  }

    {
    % set form_title_border=theme.forms.title.border.border.hubl.css %
  }

    {
    % set form_title_top_left_corner_radius=theme.forms.title.corner.top_left_radius~"px" %
  }

    {
    % set form_title_top_right_corner_radius=theme.forms.title.corner.top_right_radius~"px" %
  }

    {
    % set form_title_bottom_left_corner_radius=theme.forms.title.corner.bottom_left_radius~"px" %
  }

    {
    % set form_title_bottom_right_corner_radius=theme.forms.title.corner.bottom_right_radius~"px" %
  }


    {
    % set form_label_font_color=theme.forms.labels.text.color.color %
  }

    {
    % set form_help_text_font_color=theme.forms.help_text.text.color.color %
  }

    {
    % set form_field_placeholder_color=theme.forms.fields.placeholder.color.color %
  }

    {
    % set form_field_font_color=theme.forms.fields.text.color.color %
  }

    {
    % set form_field_bg_color=color(theme.forms.fields.background.color) %
  }

    {
    % set form_field_border=theme.forms.fields.border.border.hubl.css %
  }

    {
    % set form_field_corner_radius=theme.forms.fields.corner.radius~'px' %
  }

    {
    % set form_bg_color=color(theme.forms.form.background.color) %
  }

    {
    % set form_padding=theme.forms.form.spacing.spacing.hubl.css %
  }

    {
    % set form_border=theme.forms.form.border.border.hubl.css %
  }

    {
    % set form_top_left_corner_radius=theme.forms.form.corner.top_left_radius~"px" %
  }

    {
    % set form_top_right_corner_radius=theme.forms.form.corner.top_right_radius~"px" %
  }

    {
    % set form_bottom_left_corner_radius=theme.forms.form.corner.bottom_left_radius~"px" %
  }

    {
    % set form_bottom_right_corner_radius=theme.forms.form.corner.bottom_right_radius~"px" %
  }


    {
    % set form_submit_button_font=theme.forms.button.text.font %
  }

    {
    % set form_submit_button_bg_color=color(theme.forms.button.background.color) %
  }

    {
    % set form_submit_button_border=theme.forms.button.border.border.hubl.css %
  }

    {
    % set form_submit_button_spacing=theme.forms.button.spacing.spacing.hubl.css %
  }

    {
    % set form_submit_button_bg_color_hover=color(theme.forms.button.hover.background.color) %
  }

    {
    % set form_submit_button_border_hover=theme.forms.button.hover.border.border.hubl.css %
  }

    {
    % set form_submit_button_color_hover=theme.forms.button.hover.text.color.color %
  }


  /* 1f. Tables */

    {
    % set table_head_bg_color=color(theme.tables.header.background.color) %
  }

    {
    % set table_head_font_color=theme.tables.header.text.color.color %
  }

    {
    % set table_bg_color=color(theme.tables.table_body.background.color) %
  }

    {
    % set table_font_color=theme.tables.table_body.text.color.color %
  }

    {
    % set table_footer_bg_color=color(theme.tables.footer.background.color) %
  }

    {
    % set table_footer_font_color=theme.tables.footer.text.color.color %
  }

    {
    % set table_cell_spacing=theme.tables.cells.spacing.spacing.hubl.css %
  }

    {
    % set table_border=theme.tables.cells.border.border.hubl.css %
  }

  /* 1g. Website header */

    {
    % set nav_font_color=theme.header.menu.text.color.color %
  }

    {
    % set nav_drop_down_font_color=theme.header.menu.drop_downs.text.color.color %
  }

    {
    % set nav_drop_down_bg_color=color(theme.header.menu.drop_downs.background.color) %
  }

    {
    % set nav_drop_down_border=theme.header.menu.drop_downs.border.border.hubl.css %
  }

    {
    % set header_bg_color=color(theme.header.background.color) %
  }

  /* 1h. Website footer */

    {
    % set footer_bg_color=color(theme.footer.background.color) %
  }

    {
    % set footer_font_color=theme.footer.text.color.color %
  }

    {
    ###########################################################################
  }

    {
    ################## 2. Containers / Grid / DND areas ###################
  }

    {
    ###########################################################################
  }

  .content-wrapper {
    max-width: {
        {
        container_width
      }
    }

    ;
  }

  .dnd-section,
  .content-wrapper--vertical-spacing {
    padding: {
        {
        dnd_section_padding
      }
    }

    ;
  }

  .dnd-section>.row-fluid {
    max-width: {
        {
        container_width
      }
    }

    ;
  }

    {
    ###########################################################################
  }

    {
    ########################### 3. Typography #############################
  }

    {
    ###########################################################################
  }

  html {
    font-size: {
        {
        body_font.size~body_font.size_unit
      }
    }

    ;
  }

  body {
      {
        {
        body_font.style
      }
    }

    ;

    color: {
        {
        body_font.color
      }
    }

    ;

    font-size: {
        {
        body_font.size~body_font.size_unit
      }
    }

    ;
  }

  /* Paragraphs */

  p {
      {
        {
        body_font.style
      }
    }

    ;
  }

  /* Anchors */

  a {
      {
        {
        anchor_font.style
      }
    }

    ;

    color: {
        {
        anchor_font.color
      }
    }

    ;
  }

  a:hover,
  a:focus {
      {
        {
        anchor_font.style
      }
    }

    ;

    color: {
        {
        color_variant(anchor_font.color, -40)
      }
    }

    ;
  }

  a:active {
      {
        {
        anchor_font.style
      }
    }

    ;

    color: {
        {
        color_variant(anchor_font.color, 40)
      }
    }

    ;
  }

  /* Headings */

  h1,
  .h1 {
      {
        {
        h1_font.style
      }
    }

    ;

    color: {
        {
        h1_font.color
      }
    }

    ;

    font-size: {
        {
        h1_font.size~h1_font.size_unit
      }
    }

    ;

    text-transform: {
        {
        h1_text_transform
      }
    }

    ;
  }

  h2,
  .h2 {
      {
        {
        h2_font.style
      }
    }

    ;

    color: {
        {
        h2_font.color
      }
    }

    ;

    font-size: {
        {
        h2_font.size~h2_font.size_unit
      }
    }

    ;

    text-transform: {
        {
        h2_text_transform
      }
    }

    ;
  }

  h3,
  .h3 {
      {
        {
        h3_font.style
      }
    }

    ;

    color: {
        {
        h3_font.color
      }
    }

    ;

    font-size: {
        {
        h3_font.size~h3_font.size_unit
      }
    }

    ;

    text-transform: {
        {
        h3_text_transform
      }
    }

    ;
  }

  h4,
  .h4 {
      {
        {
        h4_font.style
      }
    }

    ;

    color: {
        {
        h4_font.color
      }
    }

    ;

    font-size: {
        {
        h4_font.size~h4_font.size_unit
      }
    }

    ;

    text-transform: {
        {
        h4_text_transform
      }
    }

    ;
  }

  h5,
  .h5 {
      {
        {
        h5_font.style
      }
    }

    ;

    color: {
        {
        h5_font.color
      }
    }

    ;

    font-size: {
        {
        h5_font.size~h5_font.size_unit
      }
    }

    ;

    text-transform: {
        {
        h5_text_transform
      }
    }

    ;
  }

  h6,
  .h6 {
      {
        {
        h6_font.style
      }
    }

    ;

    color: {
        {
        h6_font.color
      }
    }

    ;

    font-size: {
        {
        h6_font.size~h6_font.size_unit
      }
    }

    ;

    text-transform: {
        {
        h6_text_transform
      }
    }

    ;
  }

  /* Blockquote */

  blockquote {
    border-left-color: {
        {
        secondary_color
      }
    }

    ;
  }

    {
    ###########################################################################
  }

    {
    ############################ 4. Buttons ###############################
  }

    {
    ###########################################################################
  }

  button,
  .button,
  .hs-button,
  .hs-blog-post-listing__post-button {
      {
        {
        button_border
      }
    }

      {
        {
        button_spacing
      }
    }

      {
        {
        button_font.style
      }
    }

    ;

    background-color: {
        {
        button_bg_color
      }
    }

    ;

    border-radius: {
        {
        button_corner_radius
      }
    }

    ;

    color: {
        {
        button_font.color
      }
    }

    ;

    font-size: {
        {
        button_font.size~button_font.size_unit
      }
    }

    ;

    text-transform: {
        {
        button_text_transform
      }
    }

    ;
  }

  button:hover,
  button:focus,
  .button:hover,
  .button:focus,
  .hs-button:hover,
  .hs-button:focus,
  .hs-blog-post-listing__post-button:hover,
  .hs-blog-post-listing__post-button:focus {
      {
        {
        button_border_hover
      }
    }

    ;

    color: {
        {
        button_color_hover
      }
    }

    ;

    background-color: {
        {
        button_background_hover
      }
    }

    ;

    border-radius: {
        {
        button_corner_radius_hover
      }
    }

    ;
  }

  button:active,
  .button:active,
  .hs-button:active,
  .hs-blog-post-listing__post-button:active {
      {
        {
        button_font.style
      }
    }

    ;

    background-color: rgba({
        {
        color_variant(theme.buttons.background.color.color, 40)|convert_rgb
      }
    }

    , {
      {
      theme.buttons.background.color.opacity / 100
    }
  });

border-color: {
    {
    color_variant(theme.buttons.border.border.top.color, 40)
  }
}

;
}

  {
  ###########################################################################
}

  {
  ############################## 5. Forms ###############################
}

  {
  ###########################################################################
}

form,
.submitted-message {
    {
      {
      body_font.style
    }
  }

  ;

    {
      {
      form_border
    }
  }

  ;

  border-top-left-radius: {
      {
      form_top_left_corner_radius
    }
  }

  ;

  border-top-right-radius: {
      {
      form_top_right_corner_radius
    }
  }

  ;

  border-bottom-left-radius: {
      {
      form_bottom_left_corner_radius
    }
  }

  ;

  border-bottom-right-radius: {
      {
      form_bottom_right_corner_radius
    }
  }

  ;

  background-color: {
      {
      form_bg_color
    }
  }

  ;

    {
      {
      form_padding
    }
  }

  ;
}

/* Form title */

.form-title {
    {
      {
      form_title_border
    }
  }

  ;

    {
      {
      form_title_spacing
    }
  }

  ;

    {
      {
      form_title_font.style
    }
  }

  ;

  border-top-left-radius: {
      {
      form_title_top_left_corner_radius
    }
  }

  ;

  border-top-right-radius: {
      {
      form_title_top_right_corner_radius
    }
  }

  ;

  border-bottom-left-radius: {
      {
      form_title_bottom_left_corner_radius
    }
  }

  ;

  border-bottom-right-radius: {
      {
      form_title_bottom_right_corner_radius
    }
  }

  ;

  font-size: {
      {
      form_title_font.size~form_title_font.size_unit
    }
  }

  ;

  color: {
      {
      form_title_font.color
    }
  }

  ;

  background-color: {
      {
      form_title_bg_color
    }
  }

  ;
}


/* Labels */

form label {
  color: {
      {
      form_label_font_color
    }
  }

  ;
}

/* Help text */

form legend {
  color: {
      {
      form_help_text_font_color
    }
  }

  ;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
    {
      {
      form_field_border
    }
  }

  background-color: {
      {
      form_field_bg_color
    }
  }

  ;

  color: {
      {
      form_field_font_color
    }
  }

  ;

  border-radius: {
      {
      form_field_corner_radius
    }
  }

  ;
}

/* Form placeholder text */

::-webkit-input-placeholder {
  color: {
      {
      form_field_placeholder_color
    }
  }

  ;
}

::-moz-placeholder {
  color: {
      {
      form_field_placeholder_color
    }
  }

  ;
}

:-ms-input-placeholder {
  color: {
      {
      form_field_placeholder_color
    }
  }

  ;
}

::placeholder {
  color: {
      {
      form_field_placeholder_color
    }
  }

  ;
}

/* Inputs - date picker */

.hs-fieldtype-date .input .hs-dateinput:before {
  color: {
      {
      form_field_placeholder_color
    }
  }

  ;
}

.fn-date-picker td.is-selected .pika-button {
  background: {
      {
      primary_color
    }
  }

  ;
}

.fn-date-picker td .pika-button:hover {
  background-color: {
      {
      primary_color
    }
  }

  !important;
}

.fn-date-picker td.is-today .pika-button {
  color: {
      {
      primary_color
    }
  }

  ;
}

/* Submit button */

form input[type=submit],
form .hs-button {
    {
      {
      form_submit_button_border
    }
  }

  ;

    {
      {
      form_submit_button_spacing
    }
  }

  ;

    {
      {
      form_submit_button_font.style
    }
  }

  ;

  color: {
      {
      form_submit_button_font.color
    }
  }

  ;

  font-size: {
      {
      form_submit_button_font.size~form_submit_button_font.size_unit
    }
  }

  ;

  background-color: {
      {
      form_submit_button_bg_color
    }
  }

  ;

  border-radius: {
      {
      button_corner_radius
    }
  }

  ;

  text-transform: {
      {
      button_text_transform
    }
  }

  ;
}

form input[type=submit]:hover,
form input[type=submit]:focus,
form .hs-button:hover,
form .hs-button:focus {
  background-color: {
      {
      form_submit_button_bg_color_hover
    }
  }

  ;

  color: {
      {
      form_submit_button_color_hover
    }
  }

  ;

    {
      {
      form_submit_button_border_hover
    }
  }

  ;
}

form input[type=submit]:active,
form .hs-button:active {
  background-color: rgba({
      {
      color_variant(theme.buttons.background.color.color, 40)|convert_rgb
    }
  }

  , {
    {
    theme.buttons.background.color.opacity / 100
  }
});

border-color: {
    {
    color_variant(theme.buttons.border.border.top.color, 40)
  }
}

;
}

  {
  ###########################################################################
}

  {
  ############################# 6. Tables ###############################
}

  {
  ###########################################################################
}

/* Table */

table {
    {
      {
      table_border
    }
  }

  background-color: {
      {
      table_bg_color
    }
  }

  ;
}

/* Table cells */

td,
th {
    {
      {
      table_border
    }
  }

    {
      {
      table_cell_spacing
    }
  }

  color: {
      {
      table_font_color
    }
  }

  ;
}

/* Table header */

thead th {
  background-color: {
      {
      table_head_bg_color
    }
  }

  ;

  color: {
      {
      table_head_font_color
    }
  }

  ;
}

/* Table footer */

tfoot td {
  background-color: {
      {
      table_footer_bg_color
    }
  }

  ;

  color: {
      {
      table_footer_font_color
    }
  }

  ;
}

  {
  ###########################################################################
}

  {
  ########################### 7. Website header #########################
}

  {
  ###########################################################################
}

.header {
  background-color: {
      {
      header_bg_color
    }
  }

  ;
}

.menu__link,
.header__logo .logo-company-name,
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  color: {
      {
      nav_font_color
    }
  }

  ;

  font-family: {
      {
      body_font.font
    }
  }

  ;
}

.menu__child-toggle-icon {
  border-top-color: {
      {
      nav_font_color
    }
  }

  ;
}

.menu .menu__link:hover,
.menu .menu__link:focus,
.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus {
  color: {
      {
      color_variant(nav_font_color, -40)
    }
  }

  ;
}

.menu__child-toggle-icon:hover,
.menu__child-toggle-icon:focus {
  border-top-color: {
      {
      color_variant(nav_font_color, -40)
    }
  }

  ;
}

.menu .menu__link:active,
.header__language-switcher-label-current:active,
.header__language-switcher .lang_list_class li a:active {
  color: {
      {
      color_variant(nav_font_color, 40)
    }
  }

  ;
}

.menu__child-toggle-icon:active {
  border-top-color: {
      {
      color_variant(nav_font_color, 40)
    }
  }

  ;
}

.menu .menu__item--depth-1>.menu__link--active-link:after {
  background-color: {
      {
      nav_font_color
    }
  }

  ;
}

@media (min-width: 767px) {

  .menu .menu__submenu,
  .header__language-switcher .lang_list_class {
      {
        {
        nav_drop_down_border
      }
    }

    background-color: {
        {
        nav_drop_down_bg_color
      }
    }

    ;
  }

  .menu__submenu--level-2>.menu__item:first-child:before {
      {
        {
        nav_drop_down_border
      }
    }

    background-color: {
        {
        nav_drop_down_bg_color
      }
    }

    ;
  }
}

.menu__submenu .menu__link,
.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus {
  color: {
      {
      nav_drop_down_font_color
    }
  }

  ;

  background-color: {
      {
      nav_drop_down_bg_color
    }
  }

  ;
}

.header__language-switcher .lang_list_class:before {
  border-bottom-color: {
      {
      theme.header.menu.drop_downs.border.border.top.color
    }
  }

  ;
}

.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus,
.header__language-switcher .lang_list_class li:hover,
.menu__submenu--level-2>.menu__item:first-child:hover:before,
.menu__submenu--level-2>.menu__item:first-child.focus:before {
  background-color: {
      {
      header_bg_color
    }
  }

  ;
}

.header__language-switcher .lang_list_class.first-active::after {
  border-bottom-color: {
      {
      header_bg_color
    }
  }

  ;
}

.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  font-family: {
      {
      body_font.font
    }
  }

  ;
}

.header__language-switcher-label-current:after {
  border-top-color: {
      {
      nav_font_color
    }
  }

  ;
}

@media(max-width: 767px) {
  .header__navigation {
    background-color: {
        {
        header_bg_color
      }
    }

    ;
  }

  .header__navigation-toggle svg,
  .menu-arrow svg {
    fill: {
        {
        nav_font_color
      }
    }

    ;
  }
}

  {
  ###########################################################################
}

  {
  ########################### 8. Website footer #########################
}

  {
  ###########################################################################
}

.footer {
  background-color: {
      {
      footer_bg_color
    }
  }

  ;
}

/* Footer content */

.footer p,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer label,
.footer span,
.footer li,
.footer img {
  color: {
      {
      footer_font_color
    }
  }

  ;
}

  {
  ###########################################################################
}

  {
  ############################## 9. Blog ################################
}

  {
  ###########################################################################
}

.blog-post,
.blog-header__inner,
.blog-related-posts {
  padding: {
      {
      theme.spacing.vertical_spacing~'px'
    }
  }

  0;
}

/* Blog post */

.blog-post__meta a {
  color: {
      {
      body_font.color
    }
  }

  ;
}

.blog-post__tag-link {
  color: {
      {
      body_font.color
    }
  }

  ;
}

.blog-post__tag-link:hover,
.blog-post__tag-link:focus {
  color: {
      {
      color_variant(body_font.color, -40)
    }
  }

  ;
}

.blog-post__tag-link:active {
  color: {
      {
      color_variant(body_font.color, 40)
    }
  }

  ;
}

/* Blog related posts */

.blog-related-posts__title-link,
.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus,
.blog-related-posts__title-link:active {
    {
      {
      h2_font.style
    }
  }

  ;

  text-transform: {
      {
      h2_text_transform
    }
  }

  ;
}

.blog-related-posts__title-link {
  color: {
      {
      h2_font.color
    }
  }

  ;
}

.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus {
  color: {
      {
      color_variant(h2_font.color, -40)
    }
  }

  ;
}

.blog-related-posts__title-link:active {
  color: {
      {
      color_variant(h2_font.color, 40)
    }
  }

  ;
}

/* Blog comments */

.blog-comments {
  margin-bottom: {
      {
      theme.spacing.vertical_spacing
    }
  }

  px;
}

#comments-listing .comment-reply-to {
  color: {
      {
      anchor_font.color
    }
  }

  ;
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: {
      {
      color_variant(anchor_font.color, -40)
    }
  }

  ;
}

#comments-listing .comment-reply-to:active {
  color: {
      {
      color_variant(anchor_font.color, 40)
    }
  }

  ;
}

  {
  ###########################################################################
}

  {
  ########################## 10. System pages ###########################
}

  {
  ###########################################################################
}

.hs-search-results__title {
    {
      {
      h1_font.style
    }
  }

  ;

  color: {
      {
      h1_font.color
    }
  }

  ;
}

  {
  ###########################################################################
}

  {
  ############################ 11. Modules ##############################
}

  {
  ###########################################################################
}

/* Blog listing */

.hs-blog-post-listing__post-title-link,
.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus,
.hs-blog-post-listing__post-title-link:active {
    {
      {
      h2_font.style
    }
  }

  ;

  text-transform: {
      {
      h2_text_transform
    }
  }

  ;
}

.hs-blog-post-listing__post-title-link {
  color: {
      {
      h2_font.color
    }
  }

  ;
}

.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus {
  color: {
      {
      color_variant(h2_font.color, -40)
    }
  }

  ;
}

.hs-blog-post-listing__post-title-link:active {
  color: {
      {
      color_variant(h2_font.color, 40)
    }
  }

  ;
}


.hs-blog-post-listing__post-tag,
.hs-blog-post-listing__post-author-name {
  color: {
      {
      body_font.color
    }
  }

  ;
}

/* Blog pagination */

.hs-pagination__link-text,
.hs-pagination__link--number {
  color: {
      {
      body_font.color
    }
  }

  ;
}

.hs-pagination__link:hover .hs-pagination__link-text,
.hs-pagination__link:focus .hs-pagination__link-text,
.hs-pagination__link--number:hover,
.hs-pagination__link--number:focus {
  color: {
      {
      color_variant(body_font.color, -40)
    }
  }

  ;
}

.hs-pagination__link:active .hs-pagination__link-text,
.hs-pagination__link--number:active {
  color: {
      {
      color_variant(body_font.color, 40)
    }
  }

  ;
}

.hs-pagination__link-icon svg {
  fill: {
      {
      body_font.color
    }
  }

  ;
}

/* Pricing card */

.card__price {
    {
      {
      h3_font.style
    }
  }

  ;

  color: {
      {
      h3_font.color
    }
  }

  ;

  font-size: {
      {
      h3_font.size~h3_font.size_unit
    }
  }

  ;
}

.card__body svg {
  fill: {
      {
      primary_color
    }
  }

  ;
}

/* Social follow */

.social-links__icon {
  background-color: {
      {
      primary_color
    }
  }

  ;
}

.social-links__icon:hover,
.social-links__icon:focus {
  background-color: {
      {
      color_variant(primary_color, -40)
    }
  }

  ;
}

.social-links__icon:active {
  background-color: {
      {
      color_variant(primary_color, 40)
    }
  }

  ;

    {
      {
      h3_font.style
    }
  }

  ;

  color: {
      {
      h3_font.color
    }
  }

  ;

  font-size: {
      {
      h3_font.size~h3_font.size_unit
    }
  }

  ;
}

/* ============================================
   Global Back-to-Top Button — Industrial Dark / Silver
   Positioned above WhatsApp floater (if exists)
   ============================================ */
#tfa-back-to-top {
  position: fixed;
  bottom: 100px;
  right: 2.5rem;
  z-index: 9990;
  width: 44px;
  height: 44px;
  background: rgba(8, 12, 16, 0.9);
  border: 1px solid rgba(192, 192, 192, 0.25);
  border-radius: 50%;
  color: #C0C0C0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

#tfa-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#tfa-back-to-top:hover {
  background: rgba(192, 192, 192, 0.15);
  border-color: rgba(192, 192, 192, 0.5);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(192, 192, 192, 0.1);
}

#tfa-back-to-top:active {
  transform: translateY(0) scale(0.95);
}

/* Editor mode: hide */
.hs-edit-mode #tfa-back-to-top {
  display: none !important;
}

@media (max-width: 768px) {
  #tfa-back-to-top {
    bottom: 100px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}
/* -----------------------------------------------------------------------------
   THEME SETTINGS: HEADER STYLES (MAPPED TO tfa-header-main)
   Architecture: tfa-menu-header.module is the SOLE header owner.
   ----------------------------------------------------------------------------- */


/* Industrial Design Tokens */
:root {
    --brand-primary: #D4A853;
    --brand-secondary: #1A1A1A;
    --header-height: 80px;
    --header-height-mobile: 60px;
}

/* Body padding to compensate for fixed header */


/* 1. BASE HEADER (position + z-index only here) */
.tfa-header-main {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
    width: 100%;
    left: 0;
    z-index: 9999;
}

/* Sticky vs Static from theme settings */

.tfa-header-main {
    position: relative;
}


/* Module-level overrides (via data-sticky attribute) */
.tfa-header-main[data-sticky="true"] {
    position: fixed;
    top: 0;
}
.tfa-header-main[data-sticky="false"] {
    position: relative;
}


/* ================================================================
   2. VISUAL STYLES — Applied as CSS classes from header_style_override
   ================================================================ */

/* --- TRANSPARENT (Default / No explicit style) --- */
.tfa-header-main.default,
.tfa-header-main:not([class*="glassmorphism"]):not([class*="solid"]):not([class*="transparent"]):not([class*="minimal"]):not([class*="gradient"]) {
    background: transparent;
    border-bottom: 1px solid transparent;
}

/* --- GLASSMORPHISM LIGHT --- */
.tfa-header-main.glassmorphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.tfa-header-main.glassmorphism.sticky-scrolled {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
.tfa-header-main.glassmorphism .tfa-nav-desktop a { color: #C0C0C0; }
.tfa-header-main.glassmorphism.sticky-scrolled .tfa-nav-desktop a { color: #1A1A1A; }

/* --- GLASSMORPHISM DARK (Industrial) --- */
.tfa-header-main.glassmorphism_dark {
    background: rgba(8, 12, 16, 0.7);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(192, 192, 192, 0.1);
}
.tfa-header-main.glassmorphism_dark.sticky-scrolled {
    background: rgba(8, 12, 16, 0.95);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
}
.tfa-header-main.glassmorphism_dark .tfa-nav-desktop a { color: #FFFFFF; }

/* --- SOLID WHITE --- */
.tfa-header-main.solid_white {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
}
.tfa-header-main.solid_white.sticky-scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.tfa-header-main.solid_white .tfa-nav-desktop a { color: #1A1A1A; }

/* --- SOLID BLACK (Industrial) --- */
.tfa-header-main.solid_black {
    background: #0A0A0A;
    border-bottom: 1px solid #333333;
}
.tfa-header-main.solid_black.sticky-scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.tfa-header-main.solid_black .tfa-nav-desktop a { color: #FFFFFF; }

/* --- TRANSPARENT LIGHT (Light BG, Dark Text) --- */
.tfa-header-main.transparent_light {
    background: transparent;
    border-bottom: 1px solid transparent;
}
.tfa-header-main.transparent_light .tfa-nav-desktop a { color: #1A1A1A; }
.tfa-header-main.transparent_light.sticky-scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #E5E7EB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

/* --- TRANSPARENT DARK (Dark BG, Light Text) --- */
.tfa-header-main.transparent_dark {
    background: transparent;
    border-bottom: 1px solid transparent;
}
.tfa-header-main.transparent_dark .tfa-nav-desktop a { color: #FFFFFF; }
.tfa-header-main.transparent_dark.sticky-scrolled {
    background: rgba(10, 10, 10, 0.9);
    border-bottom: 1px solid #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

/* --- MINIMAL --- */
.tfa-header-main.minimal {
    background: #FFFFFF;
    border-bottom: 1px solid #F3F4F6;
}
.tfa-header-main.minimal.sticky-scrolled {
    border-bottom-color: #E5E7EB;
}
.tfa-header-main.minimal .tfa-nav-desktop a { color: #374151; }

/* --- GRADIENT INDUSTRIAL --- */
.tfa-header-main.gradient_industrial {
    background: #1A1A1A;
    border-bottom: 1px solid #D4A853;
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 1);
}
.tfa-header-main.gradient_industrial.sticky-scrolled {
    background: linear-gradient(90deg, #111827 0%, #000000 100%);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
.tfa-header-main.gradient_industrial .tfa-nav-desktop a { color: #F9FAFB; }


/* 3. LOGO CONSTRAINTS (Theme level) */
.tfa-header-logo img {
    max-height: 60px;
    width: auto;
    transition: all 0.4s ease;
}
.tfa-header-main.sticky-scrolled .tfa-header-logo img {
    max-height: 51.0px;
}


/* 4. EDITOR FIX */
body.hs-edit-mode .tfa-header-main {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
}