/*
Theme Name: Gaskets, Inc. 2026
Version: 1.0
Description: Custom theme
Author: DigiSage, Inc.
Author URI: https://digisage.com
template: bb-theme
*/

:root {
   --gsk-pagewidth: 1200px;
   --gsk-red: #e31937;
   --gsk-dark-red: #980017;
   --gsk-gold: #ffa700;
   --gsk-orange: #ff7600;
   --gsk-light-gray: #c7c7c7;
   --gsk-dark-gray: #707070;
   --gsk-black: #242424;
}

/* global */

/* Substitute glyphs for a handful of typographic codepoints that
   "LINE Seed JP" draws as JIS fullwidth glyphs (full 1em advance), which
   leaves a large visible gap around the character:
     U+00B0 degree sign          (e.g. "538°C")
     U+2032 prime / foot mark    (e.g. 6′)
     U+2033 double prime / inch  (e.g. 3/16″x 1″ Fiberglass Braided Tape)
     U+2018 U+2019 curly single quotes
     U+201C U+201D curly double quotes
   Self-hosted and subset to just these codepoints, so it doesn't depend on
   any particular font being installed on the visitor's OS.
   Font: Arimo, SIL Open Font License 1.1, The Arimo Project Authors
   (https://github.com/googlefonts/arimo). */
@font-face {
   font-family: 'GlyphFix';
   src: url('assets/fonts/glyph-fix.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
   unicode-range: U+00B0, U+2018, U+2019, U+201C, U+201D, U+2032, U+2033;
   font-display: swap;
}
/* Must be re-declared on h1-h6 (not just body): the BB theme customizer's
   generated skin CSS (wp-content/uploads/bb-theme/skin-*.css) sets
   font-family directly on h1-h6 to "LINE Seed JP", and a directly-specified
   value on an element always beats one inherited from body, regardless of
   selector specificity.
   Also re-declared on ".fl-builder-content h1"..."h6": Beaver Builder's
   own per-page compiled CSS (wp-content/uploads/bb-plugin/cache/*-layout.css,
   driven by BB's Global Settings) sets the same font-family again at
   specificity (0,1,1) - one class + one type selector - which outranks the
   plain "h1, h2, ..." rule above. Headings rendered inside the page builder
   (i.e. essentially all of them) go through this wrapper, so without this
   line the plain h1-h6 rule above never actually wins for real content. */
body,
h1, h2, h3, h4, h5, h6,
.fl-builder-content h1, .fl-builder-content h2, .fl-builder-content h3,
.fl-builder-content h4, .fl-builder-content h5, .fl-builder-content h6 {
   font-family: 'GlyphFix', 'LINE Seed JP', sans-serif;
}

/* full-row padding to equalize content width */
.pad-left-pagewidth > .fl-col-content {
   padding-left: calc((100vw - var(--gsk-pagewidth)) / 2);
}
.pad-right-pagewidth > .fl-col-content {
   padding-right: calc((100vw - var(--gsk-pagewidth)) / 2);
}
@media(max-width:1340px) {
   .pad-left-pagewidth > .fl-col-content {
      padding-left: 0px;
   }
   .pad-right-pagewidth > .fl-col-content {
      padding-right: 0px;
   }
}

/* layering */
body:not(.fl-builder-edit) .z-index-5 {
   position: relative;
   z-index: 5;
}
body:not(.fl-builder-edit) .z-index-10 {
   position: relative;
   z-index: 10;
}
body:not(.fl-builder-edit) .z-index-20 {
   position: relative;
   z-index: 20;
}

/* buttons force arrows to stay on same line as text */
@media(max-width:400px) {
   a.fl-button {
      display: inline-flex !important;
      flex-wrap: nowrap;
      justify-content: center;
   }
   a.fl-button i {
      margin-top: 3px;
   }
}

/* swap the native arrow with the designs' sharp pointed arrow */
.fl-button i.fa-caret-right::before {
   display: none;
}
.fl-button i.fa-caret-right {
   width: 0;
   height: 0;
   border-left: 8px solid #fff;
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
}
.arrow-red .fl-button i.fa-caret-right {
   border-left-color: var(--gsk-red);
}
.arrow-red .fl-button:hover i.fa-caret-right {
   border-left-color: var(--gsk-black);
}

/* accessibility focus fix */
*:focus {
   outline: none;
}
:focus-visible {
   outline: 2px solid #005fcc;
   outline-offset: 2px;
}

/* style gravity form button (the PP gravity module is not taking the styles for some reason) */
button.gform_button {
   background: var(--gsk-red) !important;
   font-size: 20px !important;
   font-weight: 100 !important;
   border-radius: 0 !important;
}
button.gform_button:hover {
   background: var(--gsk-orange) !important;
}

/* slightly larger version of the above red arrow pointing right */
.big-red-arrow-right i.fa-caret-right {
   width: 0;
   height: 0;
   border-left: 24px solid var(--gsk-red);
   border-top: 26px solid transparent;
   border-bottom: 26px solid transparent;
}
.big-red-arrow-right i.fa-caret-right::before {
   display: none;
}

/* sharp cornered arrow (points right) */
.sharp-arrow {
   width: 0;
   height: 0;
   border-left: 10px solid #fff;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
}
.sharp-arrow.gold {
   border-left-color: var(--gsk-gold);
}
.sharp-arrow.red {
   border-left-color: var(--gsk-red);
}
.sharp-arrow.dark-red {
   border-left-color: var(--gsk-dark-red);
}
.sharp-arrow.orange {
   border-left-color: var(--gsk-orange);
}

/* inherited tables in news post */
table tr td {
   padding: 10px;
}

/* masthead */

body:not(.home) #top-bar {
   background: #000;
}

/* language selector */
.lang-selector {
   position: relative;
   width: 100px;
   font-size: 16px;
}
.lang-selector p {
   display: none;
}
.lang-selector .toggle-dropdown {
   color: #fff;
   cursor: pointer;
}
.lang-selector .toggle-dropdown::after {
   content: '';
   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 7px;
   border-top: 8px solid #fff;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
}
.lang-selector .toggle-dropdown.active::after {
   border-top: none;
   border-bottom: 8px solid #fff;
}
.lang-selector .lang-dropdown {
   display: none;
   position: absolute;
   z-index: 99;
   width: 100%;
   top: calc(100% + 5px);
   left: -10px;
}
.lang-selector .lang-dropdown a {
   color: #fff;
   display: block;
   padding: 5px 10px;
   background: #ac6931;
}
.lang-selector .lang-dropdown a:hover {
   text-decoration: none;
   color: #fff;
   background: var(--gsk-red);
}


/* menu */
ul#menu-desktop-menu > li > ul.sub-menu {
   left: -10px;
   padding-top: 10px;
   padding-bottom: 10px;
   box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
/* add right arrow to menus with drop downs */
ul#menu-desktop-menu > li.pp-has-submenu li.pp-has-submenu > .pp-has-submenu-container > a::after {
   content: '';
   display: inline-block;
   margin-left: 10px;
   width: 0;
   height: 0;
   border-left: 10px solid var(--gsk-dark-gray);
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
}
ul#menu-desktop-menu > li.pp-has-submenu li.pp-has-submenu > .pp-has-submenu-container > a:hover::after {
   border-left-color: var(--gsk-red);
}
/* animated left side border */
ul#menu-desktop-menu > li.pp-has-submenu > ul.sub-menu .border {
   content: '';
   display: block;
   position: absolute;
   opacity: 1;
   z-index: 20;
   top: -28px;
   left: 10px;
   width: 1px;
   height: 0;
   background: var(--gsk-red);
}
ul#menu-desktop-menu > li.pp-has-submenu li.pp-has-submenu .border {
   display: none;
}
ul#menu-desktop-menu > li.pp-has-submenu li.pp-has-submenu ul.sub-menu {
   background: #eaeaea;
   box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

/* replace search icon with design */
ul li.pp-menu-search-item {
   padding-left: 10px;
}
ul li.pp-menu-search-item .fa-search::before {
   display: none;
}
ul li.pp-menu-search-item a {
   width: 20px;
   height: 20px;
   background: url(assets/images/icon-search.svg) no-repeat center;
   background-size: contain;
}
ul li.pp-menu-search-item a span {
   display: inline-block;
   width: 100%;
}
.pp-search-form .pp-search-form__container {
   padding: 15px;
   text-align: left;
}
.pp-search-form .pp-search-form__container label {
   color: #fff;
   font-weight: 400;
   text-align: left;
}
/* mobile fly-out menu */
.pp-off-canvas-menu ul.menu > li ul.sub-menu {
   background: none !important;
}

/* search */
.pp-menu-search-item input.pp-search-form__input {
   background: #fff !important;
   color: var(--gsk-black) !important;
   font-size: 20px !important;
}

.pp-advanced-menu-mobile-toggle {
   background:none !important;
}


/***** homepage *****/

/* hero */
.home-hero .hero-flame-sep {
   transform: scaleY(1.86);
   transform-origin: top;
}
.home-hero .quick-link-box-anchor {
   position: relative;
   transition: .3s;
}
.home-hero .quick-link-box {
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
}
.home-hero .hero-quick-link-img-zoom {
   transition: .4s;
}
.home-hero .quick-link-box-anchor:hover .quick-link-box {
   box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.home-hero .quick-link-box-anchor:hover .hero-quick-link-img-zoom {
   height: 145px;
}
@media(max-width:768px) {
   .home-hero .quick-link-box-anchor:hover .quick-link-box {
      box-shadow: none;
   }
   .home-hero .quick-link-box-anchor:hover .hero-quick-link-img-zoom {
      height: 120px;
   }
}

/* engineer quick start */
.quick-start .sharp-arrow {
   border-left-width: 25px;
   border-top-width: 25px;
   border-bottom-width: 25px;
   transition: .3s;
}
.quick-start .quick-link-box {
   transition: .3s;
}
.quick-start .quick-link-box:hover {
   box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.quick-start .quick-link-box:hover .sharp-arrow {
   transform: translateX(20px);
}

/* home performance row */
.performance .multiply-bg-color {
   mix-blend-mode: multiply;
}

/* trusted across industries */
.industry-icon {
   width:120px;
}
.industry-icon .st0 {
   transition: .2s;
   fill: var(--gsk-red);
}
.industry-box:hover .industry-icon .st0 {
   fill: var(--gsk-orange);
}

/* more than a supplier */
.partner .company-features .fl-col-content {
   position: relative;
   min-width: calc(100% + 80px); /* must equal negative margin set on column */
}
.partner .company-features .bg-logo-g {
   position: absolute;
   left: 40%;
   bottom: 0;
}
@media(max-width:768px) {
   .partner .company-features .fl-col-content {
      min-width: 100%;
   }
}

/* case study */
.case-study .text-col .fl-separator {
   transform: scale(1.08);
   transform-origin: left;
}
@media(max-width:768px) {
   .case-study .text-col .fl-separator {
      transform: scale(1);
   }
}


/* single Product template */
.single-product-heading .category-box {
   width: calc(60vw - ((100vw - 1140px) / 2)) !important; /* keeps the content aligned left */
}
.prod-header-flame-sep {
   transform: translateY(30px);
}
.single-product-main-img {
   position: relative;
}
.single-product-main-img::after {
   content: '';
   display: block;
   position: absolute;
   z-index: 1;
   bottom: 10px;
   right: 10px;
   width: 25px;
   height: 25px;
   background: url(assets/images/icon-image-enlarge.svg) no-repeat center;
   background-size: contain;
}
.single-product-desc h5 {
   font-size: 22px;
   border-bottom: 1px solid var(--gsk-red);
   margin: 30px 0 10px 0;
   padding: 0 0 10px 0;
}
.custom-design-cta .big-red-arrow-right {
   transform: translateY(3px);
}

/* seal config filtering feature */

/* force arrow on reset button to never wrap */
.filters-reset a.fl-button {
   display: inline-flex;
   flex-wrap: nowrap;
}
.filters-reset a.fl-button i {
   margin-top: 2px;
}

/* seal config filters */
.filters-wrap {
   display: flex;
   flex-wrap: nowrap;
}
.filters-wrap .filter-col {
   width: 250px;
   padding-left: 40px;
}
.filters-wrap .filter-col.filter-option-2 {
   width: 300px;
}
.filters-wrap .filter-col.filter-option-3,
.filters-wrap .filter-col.filter-option-4 {
   width: 200px;
}
.filters-wrap .filter-col button {
   background: none;
   position: relative;
   color: var(--gsk-black) !important;
   text-align: left;
   position: relative;
   font-weight: 300 !important;
   font-size: 24px !important;
   margin: 0 0 10px 0;
   padding: 0 0 6px 0;
   border-bottom: 2px solid var(--gsk-black) !important;
}
.filters-wrap .filter-col button:active,
.filters-wrap .filter-col button:focus {
   outline: none !important;
   border-bottom: 2px solid var(--gsk-black) !important;
}
/* arrow before filter name */
.filters-wrap .filter-col button::after {
   content: '';
   display: block;
   position: absolute;
   z-index: 1;
   top: 20px;
   left: -34px;
   width: 0;
   height: 0;
   border-top: 12px solid var(--gsk-black);
   border-left: 12px solid transparent;
   border-right: 12px solid transparent;
}
/* (optional) text above Base Material filter */
.filters-wrap .filter-col button span.sup-text {
   display: block;
   position: absolute;
   top: -15px;
   left: 0;
   font-size: 12px;
   color: var(--gsk-black);
}
.filters-wrap .filter-col .options {
   display: none;
}
.filters-wrap .filter-col .options label {
   font-weight: 300 !important;
   display: flex;
   column-gap: 6px;
}
.filters-wrap .filter-col .options input {
   flex-shrink: 0;
   appearance: none;
   -webkit-appearance: none;
   display: inline-block;
   margin: 5px 5px 0 0;
   width: 20px;
   height: 20px;
   border: 2px solid var(--gsk-dark-gray);
   border-radius: 0px;
   background-color: #fff;
   display: grid;
   place-content: center;
   position: relative;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
}
.filters-wrap .filter-col .options input::before {
   content: '';
   width: 6px;
   height: 12px;
   border: solid #fff;
   border-width: 0 3px 3px 0; /* Creates an L shape */
   transform: rotate(45deg) scale(0); /* Rotates the L to look like a checkmark */
   transition: transform 0.1s ease-in-out;
}
/* Styles when checked */
.filters-wrap .filter-col .options input[type="checkbox"]:checked {
   background-color: #0076ff; /* Change box background color */
   border-color: #0076ff;
}
/* Reveal the checkmark when checked */
.filters-wrap .filter-col .options input[type="checkbox"]:checked::before {
   transform: rotate(45deg) scale(1);
}
/* Crucial: Maintain focus states for keyboard accessibility */
.filters-wrap .filter-col .options input[type="checkbox"]:focus-visible {
   outline: 2px solid #0076ff;
   outline-offset: 2px;
}
/* Hover effect */
.filters-wrap .filter-col .options input:hover {
   border-color: #0076ff;
}
/* active filter arrow flipped vertical */
.filters-wrap .filter-col.active button::after {
   border-top: none;
   border-bottom: 12px solid var(--gsk-black);
}
@media(max-width:1200px) {
   .filters-wrap .filter-col {
      padding-left: 30px;
   }
   .filters-wrap .filter-col button {
      font-size: 20px !important;
   }
   .filters-wrap .filter-col button::after {
      top: 25px;
      left: -25px;
      border-top: 8px solid var(--gsk-black);
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
   }
}
@media(max-width:900px) {
   .filters-wrap {
      display: block;
   }
   .filters-wrap .filter-col {
      width: 100%;
   }
   .filters-wrap .filter-col button {
      padding-bottom: 3px;
   }
   .filters-wrap .filter-col button span.sup-text {
      top: -11px;
   }
   .filters-wrap .filter-col:nth-child(4) {
      margin-top: 10px;
   }
   .filters-wrap .filter-col button::after {
      top: 10px;
   }
   .filters-wrap .filter-col button br {
      display: none;
   }
}

/* filterable products */
.product-list {
   display: flex;
   flex-wrap: wrap;
   column-gap: 20px;
   row-gap: 30px;
}
.product-list .product {
   width: 570px;
   border: 1px solid var(--gsk-black);
}
.product-list .product .inner {
   display: flex;
   min-height: 210px;
}
.product-list .product .thumb {
   display: block;
   width: 180px;
   border-left: 20px solid var(--gsk-red);
   border-right: 1px solid var(--gsk-black);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}
.product-list .product .details {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: calc(100% - 180px);
   position: relative;
   background: #eaeaea;
}
.product-list .product .details .sku-title {
   padding: 20px;
}
.product-list .product .details .sku {
   font-size: 28px;
   color: var(--gsk-black);
}
.product-list .product .details h3 {
   font-size: 22px;
   font-weight: 300;
   margin: 0;
}
.product-list .product .details a.fl-button {
   border: none !important;
   width: 240px;
   text-align: center;
}
@media(max-width:650px) {
   .product-list .product {
      width: 100%;
   }
   .product-list .product .inner {
      flex-direction: column;
   }
   .product-list .product .thumb {
      width: 100%;
      aspect-ratio: 5 / 3;
      border-right: none;
      border-bottom: 1px solid var(--gsk-black);
   }
   .product-list .product .details {
      width: 100%;
   }
}

/* product filter results CTA */
/* matches the .product-list cards below it */
.results-cta {
   border: 1px solid var(--gsk-black);
   border-left: 20px solid var(--gsk-red);
   background: #eaeaea;
   padding: 20px;
   margin: 20px 0;
}
.results-cta p {
   margin: 0 0 15px;
   color: var(--gsk-black);
}
.results-cta .results-cta-count {
   font-size: 28px;
   line-height: 1.2;
}
.results-cta a.fl-button {
   border: none !important;
   text-align: center;
}
@media(max-width:650px) {
   .results-cta a.fl-button {
      display: block;
   }
}

/* RFQ page form product output */
.rfq-products-list {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}
.rfq-products-list .product {
   width: 370px;
   display: flex;
   border: 1px solid var(--gsk-black);
}
.rfq-products-list .product .thumb {
   width: 120px;
   border-left: 5px solid var(--gsk-red);
   border-right: 1px solid var(--gsk-black);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}
.rfq-products-list .product .desc {
   width: calc(100% - 100px);
   padding: 10px;
   background: #eaeaea;
}
@media(max-width:500px) {
   .rfq-products-list .product {
      width: 100%;
   }
   .rfq-products-list .product .inner {
      flex-direction: column;
   }
   .rfq-products-list .product .thumb {
      width: 100%;
      aspect-ratio: 5 / 3;
   }
   .rfq-products-list .product .desc {
      width: 100%;
   }
}

/* news */
@media(max-width:768px) {
   .fl-post-feed-post {
      width: 100% !important;
      max-width: 100% !important;
   }
}

/* misc mobile fixes */
@media(max-width:768px) {
   header {
      position: relative !important;
   }
   /* remove float on images on small screens */
   img.alignright,
   img.alignleft {
      float: none !important;
      margin: 0;
      display: block;
   }
}

@media(max-width:992px) {
   .fl-builder-content-2060 .fl-node-axvy307ojdg9 {
      width: calc(100% - 40px) !important
   }
}