/** Shopify CDN: Minification failed

Line 26:0 Unexpected "576px"
Line 34:1 Expected identifier but found "%"
Line 35:0 Unexpected "{"
Line 35:1 Expected identifier but found "%"
Line 37:0 Unexpected "{"
Line 37:1 Unexpected "{"
Line 37:14 Expected ":"
Line 38:0 Unexpected "{"
Line 38:1 Unexpected "{"
Line 38:12 Expected ":"
... and 266 more hidden warnings

**/
html, body { 
  overflow-x: hidden;
}




/*================================================
VARIABLES
=================================================*/
576px: 576px;
768px: 768px;
992px: 992px;


/*================================================== 
Typography 
==================================================*/
{% assign header_font = settings.header_font_new %}
{% assign base_font = settings.base_font_new %}

{{ header_font | font_face }}
{{ base_font | font_face }}

{%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
{%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
{%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}

{{ base_font_bold | font_face }}
{{ base_font_italic | font_face }}
{{ base_font_bold_italic | font_face }}

$font-weight-body--bold: {{ base_font_bold.weight | default: 700 }};

$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-weight-header: {{ header_font.weight }};
$font-style-header: {{ header_font.style }};

$font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
$font-style-body: {{ base_font.style }};
$font-weight-body: {{ base_font.weight }};

$font-size-header: {{ settings.header_base_size }} * 1px;
$font-size-base: {{ settings.body_base_size }}px;




/*================================================== 
Coupon Typography 
==================================================*/
{% assign coupon_header_font = settings.coupon_header_font_new %}
{% assign coupon_base_font = settings.coupon_base_font_new %}

{{ coupon_header_font | font_face }}
{{ coupon_base_font | font_face }}

{%- assign coupon_base_font_bold = coupon_base_font | font_modify: 'weight', 'bold' -%}
{%- assign coupon_base_font_italic = coupon_base_font | font_modify: 'style', 'italic' -%}
{%- assign coupon_base_font_bold_italic = coupon_base_font_bold | font_modify: 'style', 'italic' -%}

{{ coupon_base_font_bold | font_face }}
{{ coupon_base_font_italic | font_face }}
{{ coupon_base_font_bold_italic | font_face }}

$font-weight-body--bold: {{ base_font_bold.weight | default: 700 }};

$font-stack-coupon-header: {{ coupon_header_font.family }}, {{ coupon_header_font.fallback_families }};
$font-weight-coupon-header: {{ coupon_header_font.weight }};
$font-style-coupon-header: {{ coupon_header_font.style }};

$font-stack-coupon-body: {{ coupon_base_font.family }}, {{ coupon_base_font.fallback_families }};
$font-weight-coupon-body: {{ coupon_base_font.weight }};
$font-style-coupon-body: {{ coupon_base_font.style }};

/*================================================
Color Variables
=================================================*/
$color-light-gray: #7d7d7d;

// Text colors
$color-heading: {{ settings.color_text }};
$color-link: {{ settings.color_link }};
$color-body-text: {{ settings.color_body_text }};

// Button colors
$color-btn-primary: {{ settings.primary_color }};
$color-btn-primary-text: {{ settings.primary_color_text }};
$color-btn-secondary: {{ settings.secondary_color }};
$color-btn-secondary-text: {{ settings.secondary_color_text }};

// Input fields and label color
$color-input-field-background: {{ settings.input_background }};
$color-input-field-color: {{ settings.input_text_color }};
$color-input-field-border: {{ settings.input_border }};
$color-input-field-label: {{ settings.labels_color }};

// site Background color
$color-site-background: {{ settings.site_background }};

// sale tage color 
$color-sale-tag-background: {{settings.sale_text_bg_color}};
$color-sale-tag-color: {{settings.sale_text_color}};

// Coupon color
$color-coupon-background: {{ settings.coupon_bg }};
$color-coupon-cross-btn: {{ settings.button_checkout_color }};

// Get Discount Popup
$discount-btn-bg-color: {{ settings.sticky_btn_bg_color }};
$discount-btn-color: {{ settings.sticky_btn_color }};
$discount-newsletter-text-color: {{ settings.newsletter_text_color }};
$discount-title-font-size: {{ settings.coupon_popup_title_font }}px;
$discount-title-color: {{ settings.coupon_popup_title_color }};
$discount-subtitle-font-size: {{ settings.coupon_popup_subtitle_font }}px;
$discount-subtitle-color: {{ settings.coupon_popup_subtitle_color }};
$discount-coupon-color: {{ settings.coupon_text_color }};
$discount-coupon-bg-color: {{ settings.coupon_code_bg }};
$discount-coupon-btn-bg-color: {{ settings.coupon_button_bg_color }};
$discount-coupon-btn-color: {{ settings.coupon_button_color }};
$discount-coupon-btn-font-size: {{ settings.coupon_button_font }}px;
$discount-coupon-checkbox-text-color: {{ settings.agress_text_color }};


// Sale Ticker
$sale-ticker-bg-color: {{settings.sale_ticker_background_color}};
$sale-ticker-border-color: {{settings.sale_ticker_border_color}};
$sale-ticker-text-color: {{settings.sale_ticker_text_color}};
$sale-ticker-product-title-color: {{settings.sale_ticker_product_title_color}};
$sale-ticker-hours-color: {{settings.sale_ticker_hours_color}};


// Cookies popup
$cookie-popup-bg-color: {{ settings.cookie_bar_background }};
$cookie-popup-heading-color: {{ settings.cookie_bar_heading_color }};
$cookie-popup-subheading-color: {{ settings.cookie_bar_sub_heading_color }};
$cookie-popup-link-color: {{ settings.cookie_bar_link_color }};
$cookie-popup-btn-bg-color: {{ settings.cookie_bar_button_background }};
$cookie-popup-btn-color: {{ settings.cookie_bar_button_color }};


// Upsell product popup
$upsell-title-font-size: {{ settings.upsell_title_font_size }}px;
$upsell-title-font-color: {{ settings.upsell_title_color }};
$upsell-btn-bg: {{ settings.upsell_button_bg_color }};
$upsell-btn-color: {{ settings.upsell_button_color }};
$upsell-cart-btn-bg: {{ settings.cart_button_bg_color }};
$upsell-cart-btn-color: {{ settings.cart_button_button_color }};
$upsell-checkout-btn-bg: {{ settings.checkout_button_bg_color }};
$upsell-checkout-btn-color: {{ settings.checkout_button_button_color }};



/*================================================
MIXINS
=================================================*/
@mixin selectDesign() {
  padding: 10px 30px 10px 10px;
  border: 1px solid $color-input-field-border;
  background-color: $color-input-field-background;
  color: $color-input-field-color;
  max-width: 100%;
  line-height: 1.2;
  border-radius: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url({{ ' ico-select.svg' | asset_url }});
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}


@mixin breakPoint($bp-point) {
  @if $bp-point == mobile-small {
    @media screen and (max-width: 576px) {
      @content;
    }
  }

  @if $bp-point == mobile {
    @media screen and (max-width: 768px) {
      @content;
    }
  }

  @if $bp-point == mobile-up {
    @media screen and (min-width: 768px) {
      @content;
    }
  }

  @if $bp-point == mobile-down {
    @media screen and (max-width: 768px - 1) {
      @content;
    }
  }

  @if $bp-point == between-tab-down-mobile-up {
    @media screen and (max-width: 992px - 1) and (min-width: 768px) {
      @content;
    }
  }

  @if $bp-point == tab {
    @media screen and (max-width: 992px) {
      @content;
    }
  }

  @if $bp-point == tab-down {
    @media screen and (max-width: 992px - 1) {
      @content;
    }
  }
}




/*================================================
BASE
=================================================*/
img {
  max-width: 100%;
}

button {
  outline: none;
  border: none;
  background: none;
}

a,
a:hover,
a:focus,
button,
button:hover,
button:focus {
  text-decoration: none;
  color: inherit;
  outline: none;
}

.placeholder-svg {
  display: block;
  fill: rgba(51,50,50,0.35);
  background-color: rgba(51,50,50,0.1);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(51,50,50,0.2);
}

body {
  background-color: $color-site-background;
  font-family: $font-stack-body;
  font-style: $font-style-body;
  font-weight: $font-weight-body;
  font-size: $font-size-base;
  color: $color-body-text;
}

html {
  scroll-behavior: smooth;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  color: $color-heading;
  font-family: $font-stack-header;
  font-weight: $font-weight-header;
  font-style: $font-style-header;
}

@media screen and (max-width: 768px) {
  .h1, h1 {
    font-size: 1.8rem;
  }

  .h2, h2 {
    font-size: 1.5rem;
  }

  .h3, h3 {
    font-size: 1.2rem;
  }
}


a {
  color: $color-link;

  &:hover {
    color: lighten($color-link, 30%);
  }
}

.form-control {
  background-color: $color-input-field-background;
  color: $color-input-field-color;
  border-color: $color-input-field-border;
}

label {
  color: $color-input-field-label;
}


/*================================================
UTILITIES
=================================================*/
.et-hide {
  display: none;
}

.mobile-hide {
  @media screen and (max-width: 768px) {
    display: none !important;
  }
}

.zoomImg {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.divider {
  border-color: currentColor;
}


body {
  .btn {
    min-width: 100px;

    &.focus, 
    &:focus {
      box-shadow: none;
    }
  }

  .btn--disabled {
    opacity: 0.6;
  }

  .btn-primary {
    background-color: $color-btn-primary;
    border-color: $color-btn-primary;
    color: $color-btn-primary-text;

    &:hover,
    &:focus,
    &:active,
    &:not(:disabled):not(.disabled).active, 
    &:not(:disabled):not(.disabled):active {
      background-color: lighten($color-btn-primary, 30%) !important;
      border-color: $color-btn-primary !important;
      color: $color-btn-primary-text !important;
    }

    &:focus {
      -webkit-box-shadow: 0 0 0 0.2rem rgba($color-btn-primary, .5) !important;
      box-shadow: 0 0 0 0.2rem rgba($color-btn-primary, .5) !important;
    }

    &:not(:disabled):not(.disabled).active:focus, 
    &:not(:disabled):not(.disabled):active:focus {
      box-shadow: none !important;
    }

  }

  .show > .btn-primary.dropdown-toggle {
    background-color: lighten($color-btn-primary, 30%);
  }

  .btn-secondary {
    background-color: $color-btn-secondary !important;
    border-color: $color-btn-secondary !important;
    color: $color-btn-secondary-text !important;

    &:hover,
    &:focus,
    &:active,
    &:not(:disabled):not(.disabled).active, 
    &:not(:disabled):not(.disabled):active {
      background-color: lighten($color-btn-secondary, 30%) !important;
      border-color: $color-btn-secondary !important;
      color: $color-btn-secondary-text !important;
      outline: 0 !important;
    }

    &:focus {
      -webkit-box-shadow: 0 0 0 0.2rem rgba($color-btn-secondary, .5) !important;
      box-shadow: 0 0 0 0.2rem rgba($color-btn-secondary, .5) !important;
    }
  }
}


.et-main .shopify-payment-button__button {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #0000;
  border: 1px solid #0000;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  -webkit-transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out,
    -webkit-box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out,
    -webkit-box-shadow .15s ease-in-out;
  -o-transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out,
    -webkit-box-shadow .15s ease-in-out;
}


.et-main .shopify-payment-button__button--unbranded {
  padding: .375rem .75rem;
}

.price--on-sale .price__regular, 
.price--on-sale .price__availability {
  display: none;
}

.price--on-sale .price__sale {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.price__sale {
  display:none;
}



/*================================================
SLICK SLIDER
=================================================*/
/* .slick-dots {
li {
width: 10px;
height: 10px;
margin: 0 3px;

button {
width: 10px;
height: 10px;

&::before {
line-height: 10px;
width: 10px;
height: 10px;
}
}
}
}
*/

.slick-arrow {
  width: 30px;
  height: 30px;
  z-index: 9;

  &::before {
    font-size: 30px;
  }

  &.slick-prev {
    left: 15px;
  }

  &.slick-next {
    right: 15px;
  }
}

.slick-dots {

  li {
    margin: 0 4px;
    width: 12px;
    height: 12px;

    button:before {
      content: '';
      width: 12px;
      height: 12px;
      background: rgba(0,0,0,0.6);
      border-radius: 50%;
      opacity: 0.7;
    }

    &.slick-active button:before {
      background: #000;
    }
  }
}


/*================================================
CUSTOM COLUMN
=================================================*/
.col--20-percent {
  width: 50%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;

  @include breakPoint(mobile-up) {
    width: 50%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
  }
}





/*================================================
ANNOUCEMNET BAR
=================================================*/
.et-announcement-bar-section {
  .et-announcement-bar {
    position: relative;
    padding: 10px 0;

    .et-announcement-bar__cross-icon {
      width: 1rem;
      height: 1rem;
      line-height: 0;
      position: absolute;
      top: 50%;
      left: 15px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      cursor: pointer;

      svg {
        width: inherit;
        height: inherit;
      }
    }

    .et-announcement-bar__text {
      padding: 0 15px;
      margin: 0;
      line-height: 1.5;

      a {
        color: inherit;
      }

    }
  }
}





/*================================================
HEADER
=================================================*/
.et-header {
  .fa {
    font-size: 22px;
  }

  label {
    margin-bottom: 0;
  }

  .navbar {
    padding: 1rem 1rem;
  }

  .et-center-logo {
    width: 100vw;
    text-align: center;
  }

  .navbar-toggler {
    width: 36px;
    border: none;
    padding: 0;

    .navbar-toggler-icon {
      line-height: 1;
    }
  }
  .et-header-store-name {
    color: $color-heading;
    font-family: $font-stack-header;
    font-weight: $font-weight-header;
    font-style: $font-style-header;

    @media screen and (max-width: 768px){
      font-size: 16px;
    }
  }
  .et-header__cart {
    position: relative;

    .et-header__cart-count {
      position: absolute;
      top: -.8em;
      right: -1em;
      background: $color-btn-secondary;
      color: $color-btn-secondary-text;
      border-radius: 50%;
      font-size: 10px;
      width: 16px;
      height: 16px;
      text-align: center;
      line-height: 16px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
  }


  .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  .dropdown-menu {
    @include breakPoint(tab-down) {
      border: none;
    }
  }

  .subMenu {
    position: relative;

    .subMenu-menu {
      position: absolute;
      right: auto;
      top: 0;
      left: 100%;
      background: #fff;
      display: none;

      @include breakPoint(tab-down) {
        position: static;
      }
    }

    &:hover .subMenu-menu {
      display: block;
    }
  }


  .et-mobile-nav-wrapper {
    padding-top: 20px;
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
    -o-transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
    transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);

    .et-mobile-nav__item {
      padding: 15px;
      border-bottom: 1px solid #ddd;

      &:last-child {
        border-bottom: none;
      }
    }

    .et-mobile-nav__link {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 0;
    }
  }

  .et-search__icon,
  .currency-picker {
    cursor: pointer;
  }

  /*  MOBILE MENU DRAWER  */
  .et-mobile-menu-drawer {
    position: fixed;
    z-index: 9999999;
    background: #fff;
    width: 300px;
    left: 0;
    top: 0;
    height: 100%;
    overflow-y: auto;
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: 0.3s all ease-out;
    -o-transition: 0.3s all ease-out;
    transition: 0.3s all ease-out;

    &.et-mobile-menu-drawer-open {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    .et-mobile-menu-drawer-close-btn {
      padding: 10px 15px;
      font-size: 22px;
      display: inline-block;
    }

    .et-mobile-drawer-icons {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 15px;
    }
  }
}


.et-mobile-nav__dropdown {
  display: block;
  height: 0;
  visibility: hidden;
  transition: height 0.35s ease-in-out, visibility 0s ease-in-out 0.35s;
  overflow: hidden;
}

.et-header .et-mobile-nav-wrapper .et-mobile-nav__item{
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.et-mobile-nav-active > .et-mobile-nav__dropdown {
  visibility: visible;
  transition: height 0.35s ease-in-out;
  overflow: visible;
  height: auto;
}

.et-mobile-nav__dropdown.et-mobile-nav-active {
  visibility: visible;
  transition: height 0.35s ease-in-out;
  overflow: visible;
  height: auto;
}




/*================================================
SEARCH POPUP
=================================================*/
.et-search__popup-container {
  .et-search-popup__cross-icon {
    cursor: pointer;
  }
}


/*================================================
SLIDESHOW
=================================================*/
.et-slideshow {
  .slick-arrow {
    width: 30px;
    height: 30px;
    z-index: 9;

    @media screen and (max-width: 768px) {
      display: none !important;
    }

    &::before {
      font-size: 30px;
    }

    &.slick-prev {
      left: 15px;
    }

    &.slick-next {
      right: 15px;
    }
  }

  .slick-dots {
    bottom: 10px;

    li {
      margin: 0 4px;
      width: 12px;
      height: 12px;

      button:before {
        content: '';
        width: 12px;
        height: 12px;
        background: #fff;
        border-radius: 50%;
        opacity: 0.7;
      }

      &.slick-active button:before {
        background: #000;
      }
    }
  }


  .et-slideshow__slider-image {
    position: relative;

    img {
      width: 100%;
    }
  }

  .et-slideshow__iframe_video {
    position: relative;
  }

  .et-slideshow__image_before_video {
    position: relative;
    img {
      width: 100%;
    }
  }

  .et-slideshow__iframe_video-close_video {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 999;
    padding: 6px;

    svg {
      width: 20px;
      height: 20px;
    }
  }

  .et-video-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .et-slideshow__text-content {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);

    .et-slideshow__text-content-positions {
      position: absolute;
      padding: 15px;
      width: 100%;

      &.et-slideshow__text-positions--center_center {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
      }

      &.et-slideshow__text-positions--top_center {
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        text-align: center;
      }

      &.et-slideshow__text-positions--bottom_center {
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        text-align: center;
      }

      &.et-slideshow__text-positions--top_left {
        top: 0;
        left: 0;
      }

      &.et-slideshow__text-positions--top_right {
        top: 0;
        right: 0;
        text-align: right;
      }

      &.et-slideshow__text-positions--bottom_left {
        bottom: 0;
        left: 0;
      }

      &.et-slideshow__text-positions--bottom_right {
        bottom: 0;
        right: 0;
        text-align: right;
      }

      &.et-slideshow__text-positions--center_left {
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }

      &.et-slideshow__text-positions--center_right {
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: right;
      }
    }
  }
}







/*================================================
COLLECTION LISTING
=================================================*/
.et-collection-list-section {
  .et-collection__item {

    &.et-collection__item--overlay {
      &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }
    }
  }
}

.et-collection-item__overlay {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}


.et-collection-grid {
  .et-collection__item {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;

    .collection-grid-item__link {
      display: block;
      position: relative;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

      .et-collection-item__title-wrapper {
        padding: 0 15px;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 1;
      }
    }
  }
}





/*================================================
SALE BADGES
=================================================*/
.et-sale_badge-grid-item,
.et-product-single__media-group {
  position: relative;

  .et-sale_badge {
    position: absolute;
    color: $color-sale-tag-color;
    top: 10px;
    right: 10px;
    z-index: 9;

    &.et-sale_badge--1 {
      top: 0;
      right: 0;
      width: 50px;
      height: 50px;
      font-size: 13px;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      padding: 5px;

      .et-sale_badge__badge {
        position: absolute;
        border-left-width: 40px;
        border-style: solid;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 9;
        border-spacing: inherit;
        border-top-width: 12px;
        border-bottom-width: 12px;
        border-right-width: 12px;
        border-color: $color-sale-tag-background transparent $color-sale-tag-background $color-sale-tag-background;
        color: inherit;
      }

      .et-sale_badge-product-price__sale-label {
        font-size: 12px;
        position: absolute;
        left: 6px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 100%;
        z-index: 9;
      }
    }

    &.et-sale_badge--2 {
      width: 50px;
      height: 50px;
      font-size: 13px;
      border-radius: 50%;
      color: $color-sale-tag-background;
      border: 1px solid currentColor;
      text-align: center;
      line-height: 50px;
    }

    &.et-sale_badge--3 {
      width: 70px;
      height: 70px;
      font-size: 13px;
      line-height: 1.1;
      border-radius: 50%;
      border: 1px solid $color-sale-tag-background;
      color: $color-sale-tag-background;
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 10px 10px;
    }

    &.et-sale_badge--4 {
      width: 50px;
      height: 50px;
      background: $color-sale-tag-background;
      color: $color-sale-tag-color;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      font-size: 13px;
    }
  }

  .et-sale_badge-grid-item__link {
    display: block;
  }

  .et-sale_badge-grid-item__image {
    display: block;
    margin: 0 auto;
  }
}

.et-featued-product-single,
.et-product-single {
  .et-product-single__media-group {
    .et-sale_badge {
      right: 25px;
    }
  }
}





/*================================================
FEATURED SLIDER
=================================================*/
.et-featured-slider {
  .et-featured-slider-item__image {
    width: 100%;
  }

  .slick-arrow {
    width: 30px;
    height: 30px;
    z-index: 9;

    &:before {
      content: '';
      display: block;
      height: 100%;
      width: 100%;
      background-size: 100%;
      background-repeat: no-repeat;
    }

    &.slick-prev {
      left: -30px;

      @media screen and (max-width: 1050px) {
        left: 15px;
      }
    }

    &.slick-next {
      right: -30px;

      @media screen and (max-width: 1050px) {
        right: 15px;
      }
    }
  }
}





/*================================================
FEATURED BLOG
=================================================*/
.et-featured__blog {

  .et-featured__blog__item {
    height: 100%;
    background-color: #f8f9fa;
    box-shadow: 0 3px 5px rgba(0,0,0,.4);
    border-radius: 6px;
  }

  .et-featured__blog-article__link {
    display: block;
  }

  .et-featured__blog-article-image {
    width: auto;
    max-width: 100%;
    margin: auto;
  }

  .et-featured__blog-article__author {
    color: #6f6f6f;
  }
}






/*================================================
TESTIMONIALS
=================================================*/
.et-testimonial__block-view {
  img {
    width: 100px;
    height: 100px;
  }
}





/*================================================
FOOTER
=================================================*/
.et-footer-section {
  .et-social-icons li {
    margin-right: 10px;

    &:last-child {
      margin-right: 0;
    }
  }

  .et-footer-payment-icons {
    li {
      margin-right: 10px;
      margin-bottom: 5px;

      img {
        max-height: 40px;
      }
    }
  }

  .newsletter--input {
    height: auto !important;
    border: none;
  }

  .et-footer__footer-style-one {
    @media screen and (max-width: 768px) {
      text-align: center;
    }

    .et-footer__newsletter-input-submit {
      .et-newsletter-form {
        @include breakPoint(between-tab-down-mobile-up) {
          .newsletter--input,
          .input-group-btn1,
          .et-button {
            width: 100%;
          }

          .newsletter--input {
            border-top-right-radius: .25rem !important;
            border-bottom-right-radius: .25rem !important;
            height: 44px !important;
          }

          .et-button {
            border-top-left-radius: .25rem !important;
            border-bottom-left-radius: .25rem !important;
            margin-top: 10px;
          }
        }
      }
    }
  }

  &.et-footer-section--pb {
    .et-footer__footer-style-one {

      section:last-child {
        @media screen and (max-width: 768px){
          padding-bottom: 90px !important;
        }
      }
    }
  }
}








/*================================================
SINGLE PRODUCT
=================================================*/
.et-product-single {
  .et-product-single__media-wrapper {
    .et-image-zoom {
      width: 100%;
    }
  }

  .et-product-form__controls-group {
    .et-selector-wrapper {
      .et-single__option {
        display: block;
        width: 100%;
        @include selectDesign();
      }
    }
  }

  .et-product-form__input {
    border: 1px solid $color-input-field-border;
    background-color: $color-input-field-background;
    color: $color-input-field-color;
    max-width: 100%;
    line-height: 1.2;
    border-radius: 2px;
    padding: 10px;
  }


  .et-selector-wrapper {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 190px;
    flex: 0 0 190px;
  }

  .et-product-form__item--quantity {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    max-width: 100%;
    width: 100px;

    @media screen and (max-width: 768px) {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      width: 39%;
    }
  }

  .et-product-form__item--submit {
    max-width: 450px;
  }


  .et-product__thumbnails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 6px -3px 0;

    .et-product-single__thumbnails-item {
      width: 80px;
      height: 80px;
      margin: 0 3px;

      .et-product-single__thumbnail {
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid transparent;
        cursor: pointer;

        &.et-active_thumb {
          border: 1px solid #000;
        }

        .et-product-single__thumbnail-image {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover;
        }
      }
    }

    .slick-prev,
    .slick-next {
      z-index: 99;
    }

    .slick-prev {
      left: 15px;
    }

    .slick-next {
      right: 15px;
    }
  }
}


.et-security-badge {
  ul li {
    padding: 5px;

    &:first-child {
      padding-left: 0;
    }
  }
}

.et-related-products-section {
  border-top: 1px solid #0000001a;
}




/* REVIEWS SECTION */
.et-product-reviews {
  margin: 3rem auto;

  @media screen and (max-width: 768px) {
    margin: 1rem auto;
  }

  .spr-form-input-text,
  .spr-form-input-email {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  }

  .spr-form-input-textarea {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  }
}




/*================================================
COLLECTION PAGE
=================================================*/
.et-collection-page {
  .collection-hero__image {
    height: 300px;
    padding: 30px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    @media screen and (max-width: 768px) {
      height: 180px;
    }
  }

  .et-filters-toolbar__item select {
    @include selectDesign();
  }
}




/*================================================
COLLECTION
=================================================*/
.et-collection-grid__item {
  padding-bottom: 15px;
}




/*================================================
PAGINATION
=================================================*/
.et-pagination {
  text-align: center;
  list-style: none;
  font-size: 0.83333em;
  padding: 50px 0;
  margin: 0;

  li {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    padding: 0 10px;
  }

  .btn {
    min-width: initial;
  }
}

.btn-secondary.bg-primary.next-btn,.btn-secondary.bg-primary.previous-btn,.btn-secondary.bg-primary.btn--disabled {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}



/*================================================
CART
=================================================*/
.et-cart-page-section {
  .et-cart {
    table {
      width: 100%;

      .et-cart__header {
        th {
          font-size: 18px;
          font-weight: 400;
          padding: 17px 0;

          @include breakPoint(mobile-down) {
            display: none;
          }
        }
      }

      tr {
        @media screen and (max-width: 768px) {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          width: 100%;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
        }
      }

      td {
        padding: 22px 7px;

        @media screen and (max-width: 768px) {
          width: 33.333%;
        }

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;
        }
      }

      .et-cart__image-wrapper {
        @include breakPoint(mobile-up) {
          width: 130px;
        }

        a {
          &:hover,
          &:focus {
            opacity: 0.6;
          }
        }
      }

      .et-cart__meta {
        @include breakPoint(mobile-up) {
          max-width: 300px;
        }

        .et-list-view-item__title {
          font-size: 20px;

          @include breakPoint(mobile-down) {
            font-size: 16px;
          }
        }
      }

      .et-cart__update-wrapper {
        @media screen and (max-width: 768px) {
          display: none;
          width: 100%;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;

          &.et-cart__update-wrapper--show {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
          }  

        }
      }

      .et-cart__qty-label {
        font-size: 13px;
      }

      .et-cart__qty-input {
        width: 60px;
      }
    }

    .et-cart__edit {
      .et-cart__edit-text--cancel {
        display: none;
      }

      .et-cart__edit-text--edit {
        display: inline-block;
      }

      &.etcart__edit--active {
        .et-cart__edit-text--cancel {
          display: inline-block;
        }

        .et-cart__edit-text--edit {
          display: none;
        }
      }
    }

    .et-cart-item-price-container {
      @media screen and (max-width: 768px) {
        display: none;
      }
    }
  }


  .et-cart__footer {
    .et-cart__footer__left-column {
      .et-cart-note__label {
        display: block;
        cursor: pointer;
      }
    }

    .et-regular {
      max-width: 280px;
      margin-left: auto;

      @media screen and (max-width: 768px) {
        margin-right: auto;
      }

      p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        line-height: 1.2;

        b {
          text-align: left;
        }

        & > * {
          max-width: 50%;
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
          padding: 0 5px;
        }
      }
    }
  }

  .et-cart__empty-page {
    min-height: 80vh;
  }
}






/*================================================
SINGLE BLOG POST
=================================================*/
.comment-form label {
  cursor: pointer;
}

.et-comment__content {
  p {
    color: $color-light-gray;

    &:last-child {
      margin-bottom: 0;
    }
  }
}



/*================================================
SCROLL TO TOP
=================================================*/
.et-scroll-to-top {
  position: fixed;
  bottom: 70px;
  right: 50px;
  font-size: 20px;
  width: 30px;
  height: 30px;
  background: $color-btn-primary;
  color: $color-btn-primary-text;
  line-height: 27px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;

  & * {
    color: inherit;
  }

  @media screen and (max-width: 768px) {
    right: 15px;
  }
}





.et-instock_value_count_container {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  margin-bottom: 5px;
}



/*================================================
PROGRESSBAR
=================================================*/
#et-progress_bar {
  .progress {
    height: 11px;
    border-radius: 8px;
    border: 1px solid #ddd;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  }

  .progress-bar-striped {
    border-radius: 8px;
  }

  &.progress_bar2 {
    .progress,
    .progress-bar {
      border-radius: 0px;
    }
  }

  &.progress_bar3 .progress {
    height: 20px;
  }
}




/*================================================
CLOCK
=================================================*/
#et-clock {
  text-align: center;
  font-size: 18px;

  .et-product-hours,
  .et-product-minutes,
  .et-product-seconds {
    font-size: 40px;
    line-height: 1;
  }

  .et-product__timerUnit {
    width: 30%;
    display: inline-block;
    padding: 7px;
    text-align: center;
  }

  &.countdown_style1 {
    .et-product-hours,
    .et-product-minutes,
    .et-product-seconds {
      display: block;
    }
  }

  &.countdown_style2 {
    .et-product-hours,
    .et-product-minutes,
    .et-product-seconds {
      display: block;
    }

    .et-product__timerUnit {
      width: auto;
      display: inline-block;
      padding: 10px;
      text-align: center;
      color: #fff;
      background-color: #2B1B17;
      border-radius: 7px;
    }
  }

  &.countdown_style3 {
    .et-product__timerUnit {
      width: 30%;
    }
  }

  &.countdown_style4 {
    .et-product-hours,
    .et-product-minutes,
    .et-product-seconds {
      display: block;
    }

    .et-product__timerUnit {
      width: auto;
      display: inline-block;
      padding: 10px;
      text-align: center;
      border-radius: 7px;
      font-weight: bold;

      .unitLbl {
        color: #acacac;
        text-transform: uppercase;
      }
    }
  }
}

/*===========================
product page
=============================*/
.product-single__media {
  .video_tag {
    width: 100%;
  }
}

.et-product-single__thumbnails-item  {
  position: relative;

  .et-product-single__thumbnail-badge {
    width: 26px;
    height: 26px;
    position: absolute;
    right: 16px;
    top: 6px;
    pointer-events: none;
  }

  .et-product-single__thumbnail-badge .icon {
    fill: #fff;
    width: 100%;
    height: 100%;
    vertical-align: baseline;
  }
}

.product-single__media {
  margin: 0 auto;
  min-height: 1px;
  width: 100%;
  height: 100%;
  position: relative;
}

.et-product-single__thumbnail-badge .icon-3d-badge-full-color-outline,
.et-product-single__thumbnail-badge .icon-video-badge-full-color-outline {
  stroke: rgba(58,58,58,0.05);
}

.et-product-single__thumbnail-badge .icon-3d-badge-full-color-element,
.et-product-single__thumbnail-badge .icon-video-badge-full-color-element {
  fill: #3a3a3a;
}

.product-single__view-in-space {
  background-color: rgba(58,58,58,0.08);
  border: none;
  width: 100%;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  font-size: 1em;
  color: #3a3a3a;
  visibility: hidden;
  display: none;
}

.product-single__media .model_tag {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.et-product-form--hide-variant-labels {
  label {
    display: none;
  }
}




/*================================================
SALE TICKER
=================================================*/
.et-sale-tiker-outer {
  .et-sales_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    position: fixed;
    bottom: 5px;
    left: 5px;
    background-color: $sale-ticker-bg-color;
    border: 1px solid $sale-ticker-border-color;
    width: calc(100% - 10px);
    max-width: 400px;
    z-index: 99999;

    {% if settings.box_slider_shodow  %}
    box-shadow: 0 0 8px rgba(72, 72, 72, 0.83);
    {% endif %}

    .et-sales_image {
      width: 60px;
    }

    .et-sales_text {
      padding: 0 10px;

      .et-sale_ticker_text,
      .et-sales_prod_title,
      .et-sale__hours-mins {
        font-size: 16px;
      }

      .et-sale_ticker_text {
        color: $sale-ticker-text-color;
      }

      .et-sales_prod_title {
        color: $sale-ticker-product-title-color;
      }

      .et-sale__hours-mins {
        color: $sale-ticker-hours-color;
      }

      .et-sale__hours-mins {
        margin: 0;
      }
    }

    .sales-close {
      color: $sale-ticker-text-color;
      position: absolute;
      top: 5px;
      right: 8px;
      line-height: 1;
      cursor: pointer;
    }
  }
}



/*================================================
COOKIE NOTIFICATION
=================================================*/
.et-cookies__notification {
  position: fixed;
  bottom: 0px;
  width: 100%;
  z-index: 999999;
  left: 0px;
  right: 0px;
  background-color: $cookie-popup-bg-color;
  color: #fff;
  padding: 10px 0;

  .et-cookies-subtext {
    font-size: 12px;
  }

  .et-cookies-texts {
    .et-cookies-title {
      color: $cookie-popup-heading-color;
    }
    .et-cookies-subtext {
      color: $cookie-popup-subheading-color;
    }
  }

  .et-cookies__button-link {
    .et-cookies__learn-link {
      color: $cookie-popup-link-color;
    }

    .et-cookies__btn {
      background-color: $cookie-popup-btn-bg-color;
      color: $cookie-popup-btn-color;
    }
  }
}




/*================================================
COUPON POPUP
=================================================*/
.et-coupon__popup {
  width: 90%;
  max-height: 90vh;
  overflow: auto;
  max-width: 700px;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  background: $color-coupon-background;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 3px;
  z-index: 9999999999;
  padding: 30px;
  font-weight: $font-weight-coupon-body;
  font-style: $font-style-coupon-body;
  font-family: $font-stack-coupon-body;

  * {
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
  }

  .et-coupon-newletter_text {
    color: $discount-newsletter-text-color;
  }

  .et-coupon__popup-close-btn {
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;

    svg {
      fill: $color-coupon-cross-btn;
      height: 16px;
    }
  }


  .et-coupon_header {
    max-width: 95%;
    margin: auto;

    .et-coupon__popup-title {
      font-size: $discount-title-font-size;
      font-family: $font-stack-coupon-header;
      font-style: $font-style-coupon-header;
      color: $discount-title-color;
    }

    .et-coupon__popup-subtitle {
      font-size: $discount-subtitle-font-size;
      color: $discount-subtitle-color;
    }
  }

  .et-coupon__popup-contant {
    .et-coupon_badge {
      border: 2px dashed $discount-subtitle-color;
      border-radius: 3px;
      margin: 0 auto;
      padding: 5px;
      position: relative;
      max-width: 300px;
      width: 100%;
      z-index: 1;

      &::after {
        content: url({{ 'cysor.png' | asset_url }});
        position: absolute;
        top: -13px;
        left: -12px;
      }
    }

    .et-coupon-contain {
      min-height: 48px;
      background: #c14646;

      .et-code_coupon {
        color: $discount-coupon-color;
        background: $discount-coupon-bg-color;
        padding: 6% 5px;
        font-size: 18px;

        .et-coupon-msg_sucesss {
          color: $discount-coupon-color;
          background: $discount-coupon-bg-color;
        }

        .et-coupon-treasure {
          background: inherit;
          color: inherit;
          border: none;
        }
      }
    }
  }

  .et-newsletter-form {
    max-width: 400px;
    margin: 15px auto;
    justify-content: center;

    .et-newsletter-btn {

      [type="submit"] {
        background: $discount-coupon-btn-bg-color;
        color: $discount-coupon-btn-color;
        font-family: $font-stack-coupon-header;
        font-size: $discount-coupon-btn-font-size;
        cursor: pointer;
        border: none;
        outline: none;

        &[disabled="disabled"] {
          opacity: .6;
        }
      }
    }
  }

  .et-check_box {
    color: $discount-coupon-checkbox-text-color;

    .et-coupon__checkbox {
      width: 14px;
      height: 14px;
      cursor: pointer;
      position: relative;
      top: 1px;
    }	
  }

  .et-coupon_email {
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin-bottom: 10px;
  }

  .et-newsletter-btn {
    margin-bottom: 10px;
  }    
}


.et-coupon-mail_sent {
  display: none;
}

.et-couponpopup__overlay,
.et-mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333333;
  opacity: .8;
  z-index: 999999;
}

.et-coupon-get_discount {
  position: fixed;
  bottom: 0;
  right: 50px;
  z-index: 9999;
  padding: 5px 25px;
  border-radius: 7px 7px 0px 0px;
  cursor: pointer;
  background-color: $discount-btn-bg-color !important;
  color: $discount-btn-color !important;

  @media screen and (max-width: 768px) {
    right: 50%;
    transform: translateX(50%);

    &.et-product-fixed_button {
      bottom: 41px;
    }
  }
}


/*================================================
Upsell product popup
=================================================*/
#et-upsell_Modal {
  z-index: 99999;
}

.et-upsell_products {
  .modal-dialog {
    max-width: 750px;
    /*     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important; */
  }

  .modal-title {
    color: $upsell-title-font-color;
    font-size: $upsell-title-font-size;
  }

  .et-upsell_AddToCart_button {
    color: $upsell-btn-color;
    background-color: $upsell-btn-bg;
  }

  .et-upsell-cart-button {
    background-color: $upsell-cart-btn-bg;
    color: $upsell-cart-btn-color;
  }

  .et-upsell-checkout-button {
    background-color: $upsell-checkout-btn-bg;
    color: $upsell-checkout-btn-color;
    border-color: $upsell-checkout-btn-bg;
  }

  .et-upsell_products_content {

    &:first-child {
      padding-top: 0 !important;
    }

    &:not(:first-child) {
      border-top: 1px solid #ddd;
    }
  }

  .et-upsell_products-image {
    max-width: 180px;

    @media screen and (max-width: 768px) {
      max-width: 100px;
    }
  }

  .et-upsell-qty {
    max-width: 60px;
    border: 1px solid #e8e9eb;
    background-color: #fff;
    color: #000;
    line-height: 1.2;
    border-radius: 2px;
    padding: 10px;
  }
}



/*================================================
SOCIAL SHARING BUTTONS
=================================================*/
.et-social-sharing {
  li {
    margin: 0 10px 10px 0;
  }

  a {
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-weight: normal;
    line-height: 22px;
    text-decoration: none;
    padding: 2px 2px 2px 5px;
    position: relative;

    * {
      color: inherit;
    }
  }
}


.et-data-loader img {
  width: 20px;
}


.et-mobile-nav__icon {
  width: 12px;
  height: 12px;
  position: relative;
  transition: .3s all ease-in-out;

  &::before, 
  &::after {
    content: '';
    width: 100%;
    height: 2px;
    background: currentColor;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  &::after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
  }
}

.et-mobile-nav__link.et-button-minus .et-mobile-nav__icon{
  transform: rotate(360deg);

  &::after {
    display: none;
  }
}





/*================================================
BLOG POST
=================================================*/
.nav.et-blog-tags .nav-item:first-child a {
  padding-left: 0;
}


#et-BlogTagFilter {
  @include selectDesign();
}

.et-blog-tags-in-list-view a {
  font-style: italic;
  font-weight: bold;
  text-decoration: underline;
}

.et-article__title {
  @media screen and (max-width: 768px) {
    font-size: 1.5rem;
  }
}

.blog--list-view {
  .border-top:first-child {
    border-top: 0 !important;
  }
}

.errors ul {
  list-style: none;
  padding: 15px 0;
  margin: 0;
  color: red;
}

.shopify-challenge__container {
  padding: 3rem 0;

  @media screen and (max-width: 768px) {
    padding: 1rem 0;
  }
}

.shopify-challenge__button {
  color: $color-btn-primary-text;
  background-color: $color-btn-primary;
  border-color: $color-btn-primary;
}

.et-form-vertical select,
.et-form-vertical label {
  cursor: pointer;
}


.et-responsive-table {
  td, 
  th {
    text-align: left;
    border: 1px solid #e8e9eb;
    padding: 10px 14px;
  }

  @media screen and (max-width: 768px) {
    th {
      display: none;
    }

    td {
      display: block;
      text-align: right;
      padding: 17.5px;
      border: 0;
      margin: 0;

      &::before {
        content: attr(data-label);
        float: left;
        text-align: center;
        font-size: 12px;
        padding-right: 10px;
      }
    }
  }
}




/*================================================
SEARCH PAGE
=================================================*/
.template-search {
  .et-list-image,
  .et-list-view-item__image-wrapper {
    max-width: 100px;
  }

  .et-list-column,
  .et-blog-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 15px;
  }

  .et-list__price .price--listing {
    margin-bottom: 0;

    .price__sale {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;

      dd {
        margin: 0;
      }
    }
  }
}

.search-results {
  z-index: 8889;
  list-style-type: none;   
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  -webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
  overflow: hidden;

  li {
    display: block;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0;
    overflow: hidden;

    &:first-child {
      border-top: none;
    }

    a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;

      .thumbnail {
        display: block;
        width: 32px;
        margin: 3px 0 3px 3px;
        padding: 0;
        text-align: center;
        overflow: hidden;
      }

      .title {
        padding-left: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-align: left;
      }
    }
  }
}


input#mail {
    font-size: 14px;
}

/* ==================================
PRE LOADER
====================================*/
.et-pre-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;

  &.disable {
    display: none;
  }

  .et-pre-loader__loader {
    color: #000000;
    font-size: 10px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
}


@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

/* added the below on 11-13-2024
/* Compact PayPal message container with specific padding override */
.paypal-message-container-cart,
.paypal-message-wrapper-cart,
.paypal-message,
.paypal-container,
.paypal-message-wrapper {
    background-color: #003087; /* PayPal blue color */
    border-radius: 10px;
    padding: 3px 3px !important; /* Forced compact padding */
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.15);
    color: #ffffff;
}



/* added the below on 11-24-2024 */


/* ========================
   Responsive Video Styling
   ======================== */
/* Ensures videos embedded via iframes or embed tags scale properly on all devices.
   Applies a 16:9 aspect ratio and makes the video fully responsive within its container. */

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio: 16:9 */
    height: 0; /* Container height will be determined by the padding */
    overflow: hidden; /* Ensures the video stays within bounds */
    max-width: 100%; /* Prevents the video from exceeding the container width */
}

.responsive-video iframe,
.responsive-video embed {
    position: absolute; /* Positions the video within the container */
    top: 0;
    left: 0;
    width: 100%; /* Makes the video width responsive */
    height: 100%; /* Ensures video height adjusts proportionally */
}


/* ==============================
   Responsive Vertical Video Styling
   ============================== */
/* Fix for vertical videos (9:16 aspect ratio) using the <stream> tag */

.responsive-vertical-video {
    position: relative;
    width: 100%; /* Ensure it takes the full width of its container */
    height: 0;
    padding-bottom: 177.78%; /* 9:16 aspect ratio */
    overflow: hidden;
    background-color: #000; /* Optional: Black background to hide empty areas */
}

.responsive-vertical-video stream {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video fills the container without distortion */
    border: none;
}



/* ========================
   Blog-Specific Shadow Box Styling
   ======================== */

/* General Styling for Shadow Boxes */
.blog-shadow-box {
    max-width: 800px; /* Increased maximum width for better desktop readability */
    width: 90%; /* Responsive width for smaller screens */
    border: 5px solid #F5F5F5; /* Light gray border for clean aesthetics */
    background-color: #F5F5F5; /* Subtle background color */
    border-radius: 20px; /* Rounded corners for a modern look */
    padding: 40px 25px; /* Internal spacing for content */
    margin: 30px auto; /* Centered with vertical spacing */
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.3); /* Shadow for depth and visual interest */
}

/* Specific Styling for Text and Headings Inside .blog-shadow-box */

/* Style h2 and h3 headings to stand out inside shadow boxes */
.blog-shadow-box h2, .blog-shadow-box h3 {
    color: #B50407; /* RC-themed red for headings */
}

/* Ensure proper spacing and readability for text elements inside shadow boxes */
.blog-shadow-box p, 
.blog-shadow-box ul, 
.blog-shadow-box li {
    line-height: 1.6; /* Comfortable line height for readability */
}

/* ========================
   Responsive Adjustments
   ======================== */

/* Adjust shadow box padding for smaller screens */
@media screen and (max-width: 600px) {
    .blog-shadow-box {
        max-width: 100%; /* Use full width on very small screens */
        padding: 20px; /* Reduced padding for smaller devices */
    }
}

/* ========================
   End of Blog-Specific Shadow Box Styling
   ======================== */





/* ========================
   Blog-Specific Gray Paragraph Styling
   ======================== */

/* Styling for paragraphs with a light gray background */
.blog-paragraph-gray-background {
    background-color: #EFEFEF; /* Light gray background for subtle emphasis */
    border-left: 1px solid #D6D6D6; /* Retain left border for separation */
    border-right: 1px solid #D6D6D6; /* Retain right border for separation */
    padding: 30px; /* Increased internal padding for better spacing */
    margin: 0 auto 20px auto; /* Center the paragraph with spacing below */
    border-radius: 0 0 10px 10px; /* Round only the bottom corners to 10px */
}

/* Adjustments for readability within gray paragraphs */
.blog-paragraph-gray-background p {
    margin-bottom: 15px; /* Space between paragraph lines */
    font-size: 16px; /* Default font size for body text */
    line-height: 26px; /* Optimal line height for readability */
    color: #333333; /* Standard text color for readability */
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .blog-paragraph-gray-background {
        padding: 25px; /* Slightly increased padding for smaller screens */
    }

    .blog-paragraph-gray-background p {
        font-size: 15px; /* Slightly smaller font size on tablets and phones */
        line-height: 24px; /* Adjust line height for readability */
    }
}

/* ========================
   Additional Class: No Radius on Top or Bottom
   ======================== */

/* 
    Purpose of this class:
    -----------------------
    This additional class ensures there is no corner radius
    on the top or bottom of the paragraph container. 
    Useful when paragraphs need to fit seamlessly with adjacent 
    elements for a cohesive design.
*/

.blog-paragraph-no-radius {
    background-color: #EFEFEF; /* Light gray background for subtle emphasis */
    border-left: 1px solid #D6D6D6; /* Retain left border for separation */
    border-right: 1px solid #D6D6D6; /* Retain right border for separation */
    padding: 30px; /* Maintain consistent spacing */
    margin: 0 auto 20px auto; /* Center the paragraph with spacing below */
    border-radius: 0; /* Remove all corner radii for a seamless fit */
}

/* Adjustments for readability within no-radius gray paragraphs */
.blog-paragraph-no-radius p {
    margin-bottom: 15px; /* Space between paragraph lines */
    font-size: 16px; /* Default font size for body text */
    line-height: 26px; /* Optimal line height for readability */
    color: #333333; /* Standard text color for readability */
}

/* Responsive Adjustments for No-Radius Class */
@media screen and (max-width: 768px) {
    .blog-paragraph-no-radius {
        padding: 25px; /* Slightly increased padding for smaller screens */
    }

    .blog-paragraph-no-radius p {
        font-size: 15px; /* Slightly smaller font size on tablets and phones */
        line-height: 24px; /* Adjust line height for readability */
    }
}

/* ========================
   End of Blog-Specific Gray Paragraph Styling
   ======================== */






/* ========================
   YouTube CTA Button Styling
   ======================== */

/* Wrapper for the button inside the shadow box */
.youtube-cta-wrapper {
    text-align: center; /* Center-aligns the button */
    margin-top: 20px; /* Adds space above the button */
}

/* Styling for the actual button */
.youtube-cta-wrapper a {
    background-color: #B50407; /* RC-themed red background */
    color: #FFFFFF !important; /* Ensures white text overrides default styles */
    font-size: 18px; /* Clear and readable font size */
    font-weight: bold; /* Emphasized font */
    text-decoration: none; /* Removes underline */
    padding: 10px 20px; /* Creates a button-like appearance */
    border-radius: 5px; /* Smooth, rounded corners */
    display: inline-block; /* Makes it a block element for proper button appearance */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for a raised effect */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
}

/* Hover Effect */
.youtube-cta-wrapper a:hover {
    background-color: #A00306; /* Slightly darker red */
    color: #FFD700 !important; /* Gold text on hover for contrast */
}

/* ========================
   End of YouTube CTA Button Styling
   ======================== */




/* ========================
   CTA Button Styling
   ======================== */

/* General Styling for Call-to-Action Buttons */
.cta-button {
    display: inline-block; /* Makes the button inline while retaining block-level properties */
    padding: 15px 24px; /* Adds more vertical spacing for a balanced look */
    background-color: #B50407; /* RC-themed red for a vibrant button */
    color: #ffffff !important; /* Ensures the text color is white, overriding any conflicting styles */
    font-size: 18px; /* Sets a readable font size for the button text */
    font-weight: bold; /* Makes the text bold for emphasis */
    text-align: center; /* Centers the text horizontally within the button */
    text-decoration: none !important; /* Explicitly removes any underlining of the text */
    border-radius: 6px; /* Rounds the corners for a modern appearance */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for depth */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover Effect for Call-to-Action Buttons */
.cta-button:hover {
    background-color: #9A0405; /* Darkens the red color slightly for hover state */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Enhances the shadow for a hover effect */
    transform: translateY(-3px); /* Creates a slight lifting effect on hover */
}

/* ========================
   End of CTA Button Styling
   ======================== */





/* CTA Section */
.cta-section {
    background-color: #EFEFEF;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-top: 30px;
}

.cta-section h3 {
    color: #C40000;
    margin-bottom: 15px;
}

.cta-section p {
    color: #4F4F4F;
}

/* Blog Images and Figures */
.blog-image, figure img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 20px 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

figure {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Responsive Adjustments */
@media screen and (max-width: 600px) {
    .shadow-box {
        padding: 20px;
    }

    .cta-button {
        padding: 10px 20px;
    }
}


/* Blog Title Styling */
.blog-title {
    font-family: Arial, sans-serif; /* Professional font */
    font-size: 2.5rem; /* Default size for desktop */
    font-weight: 700; /* Bold for emphasis */
    text-align: center; /* Center the title */
    color: #333333; /* Deep gray for readability */
    margin: 20px auto; /* Add spacing around the title */
    line-height: 1.2; /* Adjust line spacing for better readability */
    max-width: 600px; /* Control width for proper wrapping */
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .blog-title {
        font-size: 2rem; /* Slightly smaller on tablets */
    }
}

@media screen and (max-width: 480px) {
    .blog-title {
        font-size: 1.8rem; /* Smaller font for mobile */
    }
}



/* ========================
   Blog Layout Styles
   ======================== */
.rc-page {
    font-family: 'Roboto', Arial, sans-serif;
    color: #2C2C2C;
    background: linear-gradient(to right, #f5f5f5, #ffffff);
    margin: 0;
    padding: 20px;
}

.rc-container {
    display: flex;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
}

.rc-sidebar {
    width: 300px;
    background-color: #F5F5F5;
    padding: 15px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    line-height: 1.5;
}

.rc-content {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.rc-content h2, .rc-content h3 {
    color: #B50407;
    font-family: 'Roboto Slab', serif;
    margin-bottom: 15px;
}

.rc-content p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.rc-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

.rc-content li {
    margin-bottom: 10px;
}


/* ========================
   General Body Text Style
   ======================== */
.text--1636212945216 {
    font-family: Arial, sans-serif; /* Font Family */
    font-weight: 400; /* Regular */
    font-style: normal; /* No italics */
    color: #333333; /* Deep gray */
    text-decoration: none; /* No decoration */
    letter-spacing: 0px; /* No extra spacing */
    line-height: 26px; /* Default line height */
    font-size: 16px; /* Desktop default */
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .text--1636212945216 {
        font-size: 16px; /* Tablet */
        line-height: 26px;
    }
}

@media screen and (max-width: 480px) {
    .text--1636212945216 {
        font-size: 15px; /* Mobile */
        line-height: 24px;
    }
}


/* ========================
   Subheadings (Minor Titles)
   ======================== */
.text--1636212952126 {
    font-family: 'Roboto Slab', serif; /* Font Family */
    font-weight: 400; /* Regular */
    font-style: normal; /* No italics */
    color: #B50407; /* RC-themed red */
    text-decoration: none; /* No decoration */
    letter-spacing: 0px; /* No extra spacing */
    line-height: 24px; /* Default line height */
    font-size: 20px; /* Desktop default */
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .text--1636212952126 {
        font-size: 18px; /* Tablet font size */
        line-height: 23px; /* Adjusted line height for tablet */
        letter-spacing: 0px; /* No extra spacing */
    }
}

@media screen and (max-width: 480px) {
    .text--1636212952126 {
        font-size: 16px; /* Mobile font size */
        line-height: 21px; /* Adjusted line height for mobile */
        letter-spacing: 0px; /* No extra spacing */
    }
}



/* ========================
   Headings (Blog Section Titles)
   ======================== */
.blog-section-title {
    font-family: 'Roboto Slab', serif; /* Professional and modern font */
    font-size: 24px; /* Desktop size */
    font-weight: 500; /* Semi-bold */
    color: #cd0000; /* Updated RC-themed red */
    text-align: left; /* Aligns text to the left */
    letter-spacing: -0.5px; /* Compact spacing for a bold look */
    line-height: 24px; /* Optimized for readability */
    margin-bottom: 20px; /* Adds space below the title */
    border-bottom-left-radius: 0; /* Removes radius at the bottom */
    border-bottom-right-radius: 0; /* Removes radius at the bottom */
}

/* Tablet Adjustments */
@media screen and (max-width: 768px) {
    .blog-section-title {
        font-size: 22px; /* Adjust font size for tablets */
        line-height: 23px; /* Adjust line height */
    }
}

/* Mobile Adjustments */
@media screen and (max-width: 480px) {
    .blog-section-title {
        font-size: 20px; /* Adjust font size for mobile */
        line-height: 21px; /* Adjust line height */
    }
}

/* ========================
   End of Headings (Blog Section Titles)
   ======================== */





/* ========================
   Titles Inside Shadow Box Styling
   ======================== */

/* Add specific padding for titles inside shadow boxes */
.blog-shadow-box .blog-section-title {
    padding-top: 30px !important; /* Increased top padding for better spacing */
    padding-bottom: 30px !important; /* Increased bottom padding for better spacing */
    margin-bottom: 10px; /* Ensure no excessive spacing below */
}

/* Responsive Adjustments */
/* Tablet-specific padding adjustments */
@media screen and (max-width: 768px) {
    .blog-shadow-box .blog-section-title {
        padding-top: 20px !important; /* Adjust padding for tablets */
        padding-bottom: 20px !important;
    }
}

/* Mobile-specific padding adjustments */
@media screen and (max-width: 480px) {
    .blog-shadow-box .blog-section-title {
        padding-top: 15px !important; /* Adjust padding for mobile */
        padding-bottom: 15px !important;
    }
}

/* ========================
   End of Titles Inside Shadow Box Styling
   ======================== */








/* ========================
   Main Titles (Page/Blog Titles)
   ======================== */
.text--1636212959945 {
    font-family: 'Roboto Slab', serif; /* Font Family */
    font-weight: 700; /* Bold */
    font-style: normal; /* No italics */
    color: #B50407; /* RC-themed red */
    text-decoration: none; /* No decoration */
    letter-spacing: -1px; /* Slight tightening */
    line-height: 23px; /* Default line height */
    font-size: 32px; /* Desktop default */
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .text--1636212959945 {
        font-size: 28px; /* Tablet font size */
        line-height: 21px; /* Adjusted line height for tablet */
        letter-spacing: -1px; /* Retain spacing */
    }
}

@media screen and (max-width: 480px) {
    .text--1636212959945 {
        font-size: 24px; /* Mobile font size */
        line-height: 20px; /* Adjusted line height for mobile */
        letter-spacing: -1px; /* Retain spacing */
    }
}


/* ========================
   Image/Video Captions
   ======================== */
.caption-text {
    font-family: Arial, sans-serif; /* Neutral and readable */
    font-size: 14px; /* Compact for captions */
    font-weight: 400; /* Regular weight */
    font-style: italic; /* Italicized for distinction */
    color: #555555; /* Subtle gray for contrast */
    text-align: center; /* Centered for caption context */
    line-height: 18px; /* Optimal spacing for readability */
    margin-top: 10px; /* Add spacing above the caption */
}


/* ========================
   CTA Titles (Promotional Text)
   ======================== */
.cta-title {
    font-family: 'Roboto Slab', serif; /* Bold and impactful */
    font-size: 22px; /* Larger for visibility */
    font-weight: 700; /* Bold for emphasis */
    font-style: normal; /* No italics */
    color: #C40000; /* Vibrant red for attention */
    text-align: center; /* Align centrally for CTA focus */
    letter-spacing: -0.5px; /* Slightly tightened for sharpness */
    line-height: 28px; /* Balanced spacing */
    margin-bottom: 15px; /* Spacing below to separate elements */
}


/* ========================
   Sidebar Text (Compact Style)
   ======================== */
.sidebar-text {
    font-family: Arial, sans-serif; /* Professional and clean */
    font-size: 14px; /* Compact for sidebars */
    font-weight: 400; /* Regular weight */
    font-style: normal; /* No italics */
    color: #333333; /* Dark gray for readability */
    line-height: 20px; /* Compact spacing */
    text-align: left; /* Aligned to the left for clarity */
    margin-bottom: 10px; /* Spacing below for separation */
}




/* ============================================
   Custom Wishlist UI Styling for RC Store
   ============================================ */

/* Accent Colors */
.swym-ui-component .swym-bg-2, 
.swym-ui-components .swym-bg-2 {
  background-color: #FF4500; /* Bold orange-red for accent backgrounds */
  color: #FFFFFF; /* White text for contrast */
  border-radius: 10px; /* Rounded corners for modern design */
  padding: 20px; /* Add spacing inside elements */
}

/* Global Font Customization */
.swym-ui-components * {
  font-family: 'Arial', sans-serif; /* Align font with store branding */
}

/* Rounded Corners for All Buttons */
.swym-ui-components button, 
.swym-ui-components .swym-button {
  border-radius: 10px; /* Rounded button corners */
  background-color: #FF4500; /* Button background */
  color: #FFFFFF; /* Button text */
  padding: 12px 20px; /* Comfortable button size */
  font-weight: bold; /* Make text stand out */
  cursor: pointer; /* Pointer for interactivity */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover Effect for Buttons */
.swym-ui-components button:hover, 
.swym-ui-components .swym-button:hover {
  background-color: #E63900; /* Darker orange-red hover effect */
}

/* Product Card Styling */
.swym-product-card {
  background-color: #F5F5F5; /* Light gray background to match store theme */
  border-radius: 10px; /* Smooth card edges */
  padding: 15px; /* Add space around product details */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Remove Borders from Product Cards */
.swym-product-card {
  border: none; /* Clean look by removing borders */
}

/* Product Title Styling */
.swym-product-card-title {
  color: #2C2C2C; /* Charcoal gray for readability */
  font-size: 16px; /* Standard size for legibility */
  font-weight: bold; /* Emphasize product titles */
  white-space: normal; /* Allow wrapping to prevent truncation */
}

/* Nudge Pop-Up Styling */
.swym-ui-component .swym-wishlist-popup {
  background-color: #FFFFFF; /* Clean white background */
  border-radius: 10px; /* Rounded corners */
  padding: 20px; /* Comfortable spacing */
  text-align: center; /* Centered text alignment */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Prominent shadow */
}

/* Text Styling in Nudge Pop-Up */
.swym-ui-component .swym-wishlist-popup .swym-text {
  color: #2C2C2C; /* Charcoal gray text */
  font-size: 16px; /* Standard size */
}

/* Adjust Button Size in Pop-Up */
.swym-ui-component .swym-wishlist-popup .swym-button {
  background-color: #FF4500; /* Matches other buttons */
  color: #FFFFFF; /* White text */
  border-radius: 10px; /* Rounded corners */
  font-size: 16px; /* Slightly larger text */
  padding: 12px 20px; /* Comfortable button size */
}

/* Add-to-Cart Button Adjustments */
.swym-ui-components .swym-add-to-cart {
  background-color: #28A745; /* Green for positive action */
  color: #FFFFFF; /* White text for contrast */
  font-weight: bold; /* Emphasized text */
  padding: 12px 20px; /* Comfortable size */
  border-radius: 10px; /* Rounded corners */
}

/* Hover Effect for Add-to-Cart Button */
.swym-ui-components .swym-add-to-cart:hover {
  background-color: #218838; /* Darker green for hover feedback */
}

/* Wishlist Count Badge */
.swym-ui-component .swym-count-badge {
  background-color: #C40000; /* Bold red for urgency */
  color: #FFFFFF; /* White text */
  border-radius: 50%; /* Circular badge */
  font-size: 12px; /* Compact text size */
  font-weight: bold; /* Highlighted count */
  padding: 5px 8px; /* Badge size */
  position: absolute; /* Positioned on buttons */
  top: -5px; /* Adjust position */
  right: -5px; /* Adjust position */
}

/* Dark Mode for Wishlist UI */
.swym-ui-components {
  background-color: #333333; /* Dark background for dark mode */
  color: #FFFFFF; /* White text for contrast */
}

.swym-ui-components .swym-button {
  background-color: #444444; /* Darker buttons for dark mode */
  color: #FFFFFF; /* White text */
}

.swym-button {
    display: inline-block; /* Ensure the button is visible */
    position: relative; /* Adjust position to avoid overlap */
    z-index: 1; /* Bring the button to the front if overlapping */
    margin: 10px auto; /* Centers and adds spacing */ 
}

/* Fix alignment issues */
.swym-button {
    margin: 10px auto; /* Add spacing */
    border-radius: 10px !important; /* Rounds the corners */
    padding: 10px 20px; /* Adds space inside the button */
    color: #FFFFFF; /* Optional: White text for contrast */
}

@media (max-width: 768px) {
   .swym-button {
       border-radius: 10px !important;
       font-size: 14px; /* Adjust for readability on smaller screens */
       padding: 8px 16px; /* Reduce size for compact design */
   }
}


/* ============================================
   End of - Custom Wishlist UI Styling for RC Store
   ============================================ */





/* ========================
   Omnisend Custom Styles
   ======================== */

/* General Form Container Styling */
.omnisend-form-container {
    background-color: #ffffff; /* Clean white background */
    border: 1px solid #ddd; /* Light border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px; /* Spacing inside the form */
    font-family: 'Roboto', Arial, sans-serif; /* Modern font */
    color: #333333; /* Default text color */
    max-width: 400px; /* Control form width */
    margin: 0 auto; /* Center the form */
}

/* Input Fields */
.omnisend-form-container input[type="text"],
.omnisend-form-container input[type="email"],
.omnisend-form-container textarea {
    width: 100%; /* Full-width input fields */
    padding: 10px; /* Internal spacing */
    margin-bottom: 15px; /* Spacing between fields */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Text size */
}

/* Submit Button */
.omnisend-button {
    background-color: #B50407; /* Vibrant red button */
    color: #ffffff; /* White text */
    text-transform: uppercase; /* Capitalized button text */
    font-size: 16px; /* Button text size */
    padding: 12px 20px; /* Internal button spacing */
    border: none; /* No border */
    border-radius: 5px; /* Rounded button corners */
    cursor: pointer; /* Hand cursor on hover */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth hover effect */
    display: inline-block; /* Button display style */
}

/* Submit Button Hover Effect */
.omnisend-button:hover {
    background-color: #9A0405; /* Darker red on hover */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3); /* More pronounced shadow */
    transform: translateY(-2px); /* Lifted hover effect */
}

/* Form Headings */
.omnisend-form-container h2, .omnisend-form-container h3 {
    color: #B50407; /* Brand red for headings */
    font-family: 'Roboto Slab', serif; /* Bold and dynamic */
    margin-bottom: 10px; /* Space below headings */
    font-weight: bold; /* Emphasized headings */
}

/* Mobile Responsiveness */
@media screen and (max-width: 600px) {
    .omnisend-form-container {
        padding: 15px; /* Adjust padding for smaller screens */
    }
    .omnisend-button {
        font-size: 14px; /* Smaller button text */
        padding: 10px 15px; /* Adjust button padding */
    }
}



/* =================================
   New Search Form Container Styles
   ================================= */

/* Styles for the search form container */
.search-form {
  text-align: center; /* Centers the form content horizontally */
  margin-top: 20px; /* Adds space above the form */
  display: flex; /* Enables a flexible layout for the input and button */
  justify-content: center; /* Centers the input and button within the form */
  flex-wrap: wrap; /* Ensures the input and button wrap to the next line on smaller screens */
  gap: 10px; /* Adds consistent spacing between the input and button */
}

/* Styles for the search input field */
.search-input {
  padding: 10px; /* Adds internal space for better usability and aesthetics */
  width: 70%; /* Makes the input take up a proportional amount of space */
  max-width: 400px; /* Prevents the input from becoming too wide on large screens */
  min-width: 200px; /* Ensures the input doesn't shrink too much on smaller screens */
  border: 1px solid #D6D6D6; /* Adds a light gray border around the input */
  border-radius: 5px; /* Rounds the corners for a modern look */
  flex: 1; /* Allows the input to grow and take up more space relative to the button */
}

/* Styles for the search button */
.search-button {
  background-color: #c40000; /* Sets a bold red background to match the design theme */
  color: #ffffff; /* Ensures the button text is readable with white font */
  padding: 10px 20px; /* Adds space inside the button for a better click target */
  border: none; /* Removes the default button border */
  border-radius: 5px; /* Rounds the corners to match the input field's design */
  font-weight: bold; /* Makes the button text stand out */
  cursor: pointer; /* Displays a pointer cursor on hover for better UX */
  flex-shrink: 0; /* Prevents the button from shrinking when the screen size changes */
  min-width: 120px; /* Ensures a minimum button width */
  font-size: 18px; /* Ensures the text is readable */
  text-align: center; /* Centers the text inside the button */
  white-space: nowrap; /* Prevents the text from wrapping to a new line */
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) { /* Applies these rules only on screens 768px wide or smaller */
  .search-input {
    width: calc(100% - 20px); /* Ensures the input takes up nearly the full width of its container */
  }

  .search-form {
    gap: 15px; /* Increases the space between the input and button on smaller screens for better touch usability */
  }
}

/* =======================================
   End of New Search Form Container Styles
   ======================================= */



/* ===================================
   Background Image on New Search Page
   =================================== */

/* Container for the content and image */
.search-page-background {
  display: flex; /* Enables Flexbox for centering */
  align-items: center; /* Vertically centers content */
  justify-content: center; /* Horizontally centers content */
  background-image: url('/cdn/shop/files/Search_Page_Main_Image.webp?v=1732631771'); /* Replace with your image URL */
  background-size: cover; /* Ensures the entire image fits within the container */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center; /* Centers the image within the container */
  width: 100%; /* Ensures the container spans the full width */
  height: auto; /* Allows the container to adjust based on content */
  padding: 20px; /* Adds space around content */
  box-sizing: border-box; /* Includes padding in width/height calculations */
  text-align: center; /* Centers text inside the container */
  border-radius: 10px; /* Rounds the corners */
}

/* Responsive adjustment for smaller devices */
@media (max-width: 768px) {
  .search-page-background {
    background-image: url('/cdn/shop/files/Main_Search_Page_Image_for_Mobile_Background.webp?v=1732687421');
    background-size: cover; /* Keeps the image scaled for smaller screens */
    background-position: top center; /* Aligns image for mobile */
    padding: 15px; /* Reduces padding for smaller screens */
    border-radius: 10px; /* Rounds the corners */
  }
}

/* ===========================================
   End of Background Image on New Search Page
   =========================================== */



/* ==============================================================================
   Special Shadow Box for Background Image on New Search Page to make transparent
   ============================================================================== */

.shadow-box-transparent {
  background-color: rgba(255, 255, 255, 0.7); /* White with 80% opacity */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  padding: 20px 40px; /* Adds 20px top/bottom and 30px left/right padding */
  border-radius: 10px; /* Rounds the corners */
  max-width: 720px; /* Limits the box width */
  margin: 0 auto; /* Centers the box */
  text-align: center; /* Centers text by default */
}

@media (max-width: 768px) {
  .shadow-box-transparent {
    background-color: rgba(255, 255, 255, 0.65); /* Slightly less transparent for readability */
    max-width: 99%; /* Keeps the shadow box responsive */
    padding: 15px; /* Adjust padding for smaller devices */
    border-radius: 10px; /* Rounds the corners */
  }
}

/* =======================================================================================
   End of - Special Shadow Box for Background Image on New Search Page to make transparent
   ======================================================================================= */




/* === Black Friday Landing Page Styles === */

/* General Styles for Black Friday Page */
.black-friday-page body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    background-color: #000000;
    line-height: 1.6;
}

.black-friday-page .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Hero Section */
.black-friday-page .hero-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #1F1F1F;
}

.black-friday-page .hero-title {
    font-size: 36px;
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: 10px;
}

.black-friday-page .hero-subtitle {
    font-size: 20px;
    color: #CD0000;
    margin-bottom: 20px;
}

.black-friday-page .btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
}

.black-friday-page .green-btn {
    background-color: #32CD32;
    border: none;
}

.black-friday-page .green-btn:hover {
    background-color: #28A828;
}

/* Form Section */
.black-friday-page .form-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #1F1F1F;
    border-top: 2px solid #32CD32;
    border-bottom: 2px solid #32CD32;
}

.black-friday-page .signup-form input[type="email"] {
    padding: 12px;
    width: 60%;
    max-width: 400px;
    margin-bottom: 20px;
    border: 1px solid #808080;
    border-radius: 6px;
    background-color: #000000;
    color: #FFFFFF;
}

.black-friday-page .signup-form input[type="email"]::placeholder {
    color: #808080;
}

.black-friday-page .signup-form button {
    padding: 12px 24px;
    background-color: #32CD32;
    color: #FFFFFF;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.black-friday-page .signup-form button:hover {
    background-color: #28A828;
}

/* Benefits Section */
.black-friday-page .benefits-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #1F1F1F;
    color: #FFFFFF;
}

.black-friday-page .benefits-section h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #32CD32;
}

.black-friday-page .benefits-section ul {
    list-style: none;
    padding: 0;
}

.black-friday-page .benefits-section ul li {
    margin-bottom: 10px;
    font-size: 18px;
    color: #FFFFFF;
}

.black-friday-page .benefits-section ul li strong {
    color: #CD0000;
}

/* Product Section */
.black-friday-page .product-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #1F1F1F;
}

.black-friday-page .product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.black-friday-page .product {
    width: 300px;
    background-color: #1F1F1F;
    border: 1px solid #32CD32;
    border-radius: 8px;
    text-align: center;
    padding: 20px;
}

.black-friday-page .product img {
    width: 100%;
    border-radius: 8px;
}

.black-friday-page .product p {
    font-size: 16px;
    color: #FFFFFF;
    margin: 10px 0;
}

.black-friday-page .product .btn {
    background-color: #32CD32;
    color: #FFFFFF;
}

.black-friday-page .product .btn:hover {
    background-color: #28A828;
}

/* Urgency Section */
.black-friday-page .urgency-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #1F1F1F;
    color: #FFFFFF;
}

.black-friday-page .urgency-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #CD0000;
}

.black-friday-page #countdown-timer {
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 20px;
}

/* Footer Section */
.black-friday-page .footer-section {
    text-align: center;
    padding: 20px;
    background-color: #1F1F1F;
    color: #808080;
}

.black-friday-page .social-icons {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.black-friday-page .social-icons li a {
    color: #32CD32;
    text-decoration: none;
    font-size: 20px;
}

.black-friday-page .social-icons li a:hover {
    color: #28A828;
}



.hero-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #1F1F1F;
}

.hero-image {
    width: 100%;
    max-width: 1200px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.hero-title {
    color: #FFFFFF;
    font-size: 36px;
    margin-bottom: 20px;
}

.product-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.product img {
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 8px;
    background-color: #32CD32;
}

.btn:hover {
    background-color: #28A828;
}




.social-icons {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin-top: 20px;
}
.social-icons li {
    display: inline-block;
}
.social-icons li img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: transform 0.2s;
}
.social-icons li img:hover {
    transform: scale(1.1);
}


.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #32CD32;
    border-radius: 8px;
}
.btn:hover {
    background-color: #28A828;
}

@media (max-width: 768px) {
    .hero-image {
        width: 90%;
    }
    .btn {
        font-size: 14px;
        padding: 10px 20px;
    }
}

@media (max-width: 768px) {
    #opinew-reviews-all-reviews-code {
        padding: 15px;
        font-size: 14px;
    }
}



/* ===============================================================================================================================
   Added below on 12-01-2024  -  SEARCH BOX for main header of J-M SUPPLIES  -  main html code is in file = header dot liquid
   =============================================================================================================================== */

/* Styling for the Entire Search Form */
.unique-search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

/* Styling for the Search Box */
.unique-search-box {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding: 10px;
    width: 70%; /* Default width for most screens */
    max-width: 600px; /* Prevents excessive width */
    min-width: 250px; /* Ensures usability on smaller screens */
    border: 1px solid #CD0000;
    border-radius: 15px;
    outline: none;
    flex-grow: 1;
    background-color: #f5f5f5; /* Light gray background inside the search box */
    color: #000000; /* Ensures text inside the box is readable */
  }

/* Styling for the Placeholder text */
.unique-search-box::placeholder {
    color: #888888; /* Dark gray placeholder text */
}

/* Styling for the Submit Button */
.unique-search-button {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #CD0000;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hover Effect for Submit Button */
.unique-search-button:hover {
    background-color: #3d9100;
}

/* Adjust Padding for Search Box Container */
.unique-search-container {
    padding-top: 0px; /* Space above the search box */
    padding-bottom: 0px; /* Reduced space below the search box */
}

/* Adjust Position of Search Box */
.unique-search-container {
    margin-top: -5px; /* Moves the search box down */
    margin-bottom: -10px; /* Optional: Reduces space below if needed */
}

/* Responsive Styling for Small Screens */
@media (max-width: 768px) {
    .unique-search-box {
        width: 75%; /* Restrict to 75% of the screen width */
        max-width: 300px; /* Prevent the box from being too wide */
    }
}

/* ==============================================================================
   End for -  SEARCH BOX for main header of J-M SUPPLIES
   ============================================================================== */



/* ==============================================================================
   Added the below on 12-21-2024 - Sticky Header
   ============================================================================== */

.et-header-section {
    position: sticky; /* Makes the header stick to the top */
    top: 0; /* Sticks the header to the very top */
    z-index: 1000; /* Ensures the header stays above other elements */
    background: #000000; /* Set a black background */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a slight shadow for better visibility */
    display: flex; /* Use flexbox to align elements */
    justify-content: center; /* Center the menu items */
    align-items: center; /* Vertically align items */
    padding: 10px 20px; /* Add padding for spacing */
}

/* ==============================================================================
   Added the above on 12-21-2024
   ============================================================================== */



/* ==============================================================================
   Added the below on 12-31-2024 
   ============================================================================== */

/* Styling for Delivery Date Shortcode */
.delivery_date_shortcode {
    max-width: 100%; /* Default width for all screens */
    margin: 5px 0; /* Remove horizontal centering */
    text-align: left; /* Align text within the container */
    padding: 0px; /* Adjust padding */
    background-color: #f9f9f9; /* Light background color */
    border: 1px solid #ddd; /* Optional border for separation */
    border-radius: 5px; /* Rounded corners for a modern look */
    font-size: 14px; /* Adjust font size as needed */
    color: #333; /* Text color */
}

/* Desktop-specific styling */
@media screen and (min-width: 768px) {
    .delivery_date_shortcode {
        margin-left: 0; /* Align container with price */
        max-width: 60%; /* Wider on desktop */
        padding: 3px 5px; /* Reduce height with less padding */
    }
}

/* Mobile-specific styling */
@media screen and (max-width: 767px) {
    .delivery_date_shortcode {
        max-width: 100%; /* Increase width on mobile */
        margin: 1px auto; /* Center the box horizontally on mobile */
        text-align: center; /* Adjust text alignment for mobile */
        padding: 0px; /* Add slightly more padding for readability */

        /* tiny visual nudge left so it feels perfectly centered */
    transform: translateX(-8px);
    }
}

/* Mobile: give the delivery widget more width + breathing room */
@media (max-width: 767px) {
  .jm-pdp-trust-card .delivery_date_shortcode {
    display: block;
    width: 100%;          /* let it use the full card width */
    max-width: 480px;     /* adjust if you want it even wider/narrower */
    margin: 12px auto 12px;  /* center horizontally with some top/bottom space */
    padding-left: 8px;
    padding-right: 8px;
   
  }
}



/* ==============================================================================
   Added the above on 12-31-2024
   ============================================================================== */



/* ==============================================================================
   Added the below on 1-2-2025
   ============================================================================== */

/* General styling for the stock display section */
.stock-display p {
  font-size: 16px; /* Adjusted font size for better readability */
  font-weight: bold; /* Makes the text stand out */
  margin: 10px 0 10px 20px; /* Adds spacing on the left (20px) to move the text to the right */
}

/* Styling for "In Stock" message */
.stock-display .in-stock {
  color: green; /* Green for items with sufficient stock */
}

/* Styling for "Low Stock" message */
.stock-display .low-stock {
  color: orange; /* Orange for low stock to alert customers */
  font-style: italic; /* Italicize text for emphasis */
}

/* Styling for "Out of Stock" message */
.stock-display .out-of-stock {
  color: red; /* Red for out-of-stock items */
  text-decoration: underline; /* Underline for added visibility */
}

/* ==============================================================================
   Added the above on 1-2-2025
   ============================================================================== */



   /* ==============================================================================
   Added the below on 10-27-2025
   ============================================================================== */

/* ===== JM Mini Cart + Toast + Buttons ===== */
:root{
  --jm-accent:#003F91;         /* your brand blue */
  --jm-accent-600:#00357a;     /* hover/darker */
  --jm-border:#eaeaea;
  --jm-overlay:rgba(0,0,0,.45);
}

.jm-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; border-radius:8px; font-weight:700;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
}
.jm-btn-primary{ background:var(--jm-accent); color:#fff; }
.jm-btn-primary:hover{ background:var(--jm-accent-600); }
.jm-btn-secondary{ background:#fff; color:#111; border-color:var(--jm-border); }
.jm-btn-secondary:hover{ background:#f7f7f7; }


/* Bottom-center toast */
.jm-atc-toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; background:#111; color:#fff; padding:10px 14px; border-radius:999px;
  font-weight:700; font-size:14px; z-index:1100; opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.jm-atc-toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }


/* Force multi-line labels inside inline-flex buttons on the model-fit cards */
.jm-cardbox .jm-btn{
  /* ensure wrapping is allowed and the button can shrink */
  white-space: normal !important;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;      /* fallback if <wbr> isn’t honored by the theme */
}
.jm-cardbox .jm-btn .jm-btn-label{
  white-space: normal !important;
  display: inline;
}

/* Keep text WHITE on hover/focus/active; just darken the blue slightly */
.jm-btn-primary:hover,
.jm-btn-primary:focus,
.jm-btn-primary:active{
  background: var(--jm-accent-600);
  color: #fff !important;
}

/* Give the buttons a bit more breathing room for multi-line labels */
.jm-cardbox .jm-btn{
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.2;
}

/* On narrow cards, let each button take the full width so wrapping looks clean */
@media (min-width: 480px){
  .jm-cardbox .jm-btn-row .jm-btn{
    flex: 1 1 100%;
  }
}

/* More space above the “Ships from the USA” bullets inside the three cards */
.jm-cardbox .jm-checks{ 
  margin-top: 24px;   /* was 22px */
}

/* (Optional) a touch more space on desktop only */
@media (min-width: 768px){
  .jm-cardbox .jm-checks{ margin-top: 28px; }
}

/* Homepage brand H1 */
.jm-site-heading {
  font-size: 1rem;      /* ~32px */
  font-weight: 700;
  margin: 12px 0 0;
  text-align: center;
}


<!-- Below added on 11-03-2025 -->

/* === J-M SUPPLIES: Scoped policy styles (shared across all policy pages) === */
.jm-policy-wrap{ color:#333; }
.jm-policy-wrap .policy-container{
  background-image:url('path/to/your/stainless-steel-background.jpg'); /* <- update this path */
  background-size:cover;
  background-color:rgba(255,255,255,0.9);  /* graceful if image fails */
  padding:40px; border-radius:10px;
  box-shadow:0 8px 16px rgba(0,0,0,0.2);
  border:2px solid #04689b; margin:20px auto; max-width:1100px;
}

/* Headings inside policy containers */
.jm-policy-wrap h2{
  color:#04689b;
  border-bottom:2px solid #04689b;
  padding-bottom:10px;
  margin:20px 0 16px;
  text-align:center;
  font-weight:700;
}

/* “At-a-Glance” card */
.jm-policy-wrap .jm-policy-hero{
  background:#F7F9FC;
  border:1px solid #e5ecf2;
  border-radius:12px;
  padding:16px;
  margin:0 0 18px 0;
  color:#1a1f2b;
}
.jm-policy-wrap .jm-pill{
  display:inline-block;
  background:#eef4fa;
  border:1px solid #d9e5f0;
  color:#033b66;
  border-radius:999px;
  padding:6px 10px;
  font-weight:600;
  font-size:14px;
  margin-bottom:10px;
}
.jm-policy-wrap .jm-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media(min-width:720px){
  .jm-policy-wrap .jm-grid{ grid-template-columns:repeat(3,1fr); }
}
.jm-policy-wrap .jm-grid h3{ font-size:14px; margin:0 0 4px; color:#04689b; }
.jm-policy-wrap .jm-grid p{ font-size:14px; line-height:1.5; margin:0; color:#2a3444; }

/* Body lists/blocks */
.jm-policy-wrap p{ line-height:1.6; margin:0 0 16px; }
.jm-policy-wrap ul{ padding-left:18px; margin:0 0 16px; }
.jm-policy-wrap li{ margin-bottom:10px; }

.jm-policy-wrap .contact-info{
  margin-top:40px; background:#fff; padding:20px; border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
}
.jm-policy-wrap .contact-info h3{ color:#04689b; margin-top:0; }
.jm-policy-wrap .jm-alert{
  background:#fff; border-left:4px solid #04689b; padding:10px 12px; border-radius:6px;
}


<!-- Above added on 11-03-2025 -->



<!-- Below added on 11-03-2025 -->


/* ==========================================================================
   J-M SUPPLIES — Reusable Steel Card
   Usage: <div class="jm-card jm-card--steel" id="jm-about"> ... </div>
   ========================================================================== */

.jm-card{
  --jm-text:#2b2f33;
  --jm-muted:#5b5b5b;
  --jm-accent:#0B63CE;
  --jm-accent-dark:#094f9f;
  --jm-border:#bfc6ce;

  max-width: 920px;
  margin: 28px auto 44px;
  padding: 28px 22px 34px; /* + bottom breathing room */

  border: 1px solid var(--jm-border);
  border-radius: 12px;
  overflow: hidden;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 12px rgba(0,0,0,.06);

  color: var(--jm-text);
  line-height: 1.65;
  position: relative;
  text-align: left; /* guard against theme center alignment */
}

@media (min-width: 768px){
  .jm-card{
    margin: 36px auto 56px;
    padding: 32px 28px 40px; /* + bottom breathing room on desktop */
  }
}

/* Variant: brushed "steel" */
.jm-card--steel{
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.25) 0px,
      rgba(255,255,255,.25) 1px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 3px
    ),
    linear-gradient(135deg, #e9edf2 0%, #dfe5eb 35%, #d1d8e0 100%);
}

/* Flow & single centered column; keep text left-aligned */
.jm-card .rte{ --flow: 14px; }
.jm-card .rte > *{
  max-width: 72ch;       /* one consistent column width for ALL elements */
  margin-left: auto;
  margin-right: auto;    /* centers the column within the card */
  text-align: left;      /* but content stays left-aligned */
}
.jm-card .rte > * + * { margin-top: var(--flow); }

/* Headings + accent underline (left-aligned inside the centered column) */
.jm-card h2{
  color: #1e2226;
  font-size: clamp(22px, 2.2vw + 12px, 30px);
  line-height: 1.25;
  margin: 18px 0 12px;
  letter-spacing: .2px;
}
.jm-card h2::after{
  content:"";
  display:block;
  width: 64px; height: 3px;
  margin-top: 8px;
  background: linear-gradient(90deg, #0B63CE, #6aa7ff);
  border-radius: 3px;
}
.jm-card h3{
  color: var(--jm-muted);
  font-size: clamp(18px, 1.5vw + 10px, 22px);
  margin: 18px 0 10px;
}

/* Desktop: indent headings slightly from the left edge of the text column */
@media (min-width: 992px){
  #jm-about .rte h2,
  #jm-about .rte h3{ padding-left: 50px; }
  #jm-about .rte h2::after{ margin-left: 8px; }
}

/* Links + CTA */
.jm-card a{
  color: var(--jm-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.jm-card a:hover,
.jm-card a:focus{
  color: var(--jm-accent-dark);
  text-decoration-thickness: 2px;
  outline: none;
}
.jm-card .cta-button{
  display: inline-block;
  margin: 16px 0 8px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--jm-accent);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
}
.jm-card .cta-button:hover,
.jm-card .cta-button:focus{
  background: var(--jm-accent-dark);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Contact sub-card (inherits same 72ch column, so it lines up perfectly) */
.jm-card .contact-info{
  margin-top: 22px;
  padding: 18px 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
  backdrop-filter: blur(2px);
}
.jm-card .contact-info p{ margin: 6px 0; }

/* Optional HR */
.jm-card hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06));
  margin: 18px 0;
}

/* Yellow alert consistency */
.jm-attn-box{
  background:#FFFBE6;
  border:1px solid #F4D24A;
  border-left:6px solid #E0A800;
  border-radius:10px;
  padding:14px 16px;
  margin:16px auto 0;
  font-size:15px;
  line-height:1.55;
  max-width: 920px;
}
@media (min-width: 768px){
  .jm-attn-box{ margin-top: 20px; }
}
.jm-card .jm-attn-box{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Images behave nicely inside cards */
.jm-card img { max-width: 100%; height: auto; display: block; }

/* =================== About page tuning (wider card, extra padding) =================== */
#jm-about{
  max-width: 1080px;            /* wider card on desktop */
  padding: 44px 40px 52px;      /* slightly more bottom padding */
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 6px 22px rgba(0,0,0,.08);
  text-align: left;
}

/* Underline stays flush with heading’s left edge (after the indent above) */
#jm-about h2::after{ margin-left: 0; }





/* Cart drawer subtotal pill */
#jm-cart-drawer .jm-subtotal-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border:1px solid #e8eaee; border-radius:10px; background:#fff;
  font-weight:700; margin:10px 0;
}
#jm-cart-drawer .jm-subtotal-row .label{ opacity:.75; font-weight:600; }
#jm-cart-drawer .jm-subtotal-row .amount{ font-variant-numeric: tabular-nums; }

/* Reassurance block */
#jm-cart-drawer .jm-cart-assurance{
  margin:8px 0 2px;
  font-size:13.5px; line-height:1.35; color:#2b2f33;
}
#jm-cart-drawer .jm-cart-assurance .jm-est{ opacity:.65; }

/* Trust links */
#jm-cart-drawer p.jm-cart-trust{
  margin:6px 0 10px; font-size:13.5px; line-height:1.35;
}
#jm-cart-drawer p.jm-cart-trust a{
  text-decoration: underline; text-underline-offset: 2px;
}
#jm-cart-drawer p.jm-cart-trust a:hover{
  text-decoration-thickness: 2px;
}

/* ✅ CSS-only “stars” badge for Trustpilot link (no JS changes) */
#jm-cart-drawer p.jm-cart-trust a[href*="trustpilot.com"]::before{
  content:"★★★★★";
  font-size:12px; line-height:1; letter-spacing:1px;
  color:#00b67a;              /* Trustpilot green */
  margin-right:6px;
  display:inline-block;
  transform: translateY(-1px);
}




/* === J-M: PayPal Messaging (Collections - Model Template) === */
.paypal-message-container {
  text-align: center;
  padding-bottom: 0;
}
.paypal-top { margin-top: 5px; }
.paypal-bottom { margin-top: 10px; }

@media (min-width: 768px){
  .paypal-message-container { padding-bottom: 0; }
  .paypal-bottom { padding-bottom: 7px; }
  .paypal-message-wrapper {
    transform: scale(2);
    transform-origin: center;
  }
}

/* Collection pages only */
.template-collection .paypal-top--room { margin-top: 18px; }  /* adjust to taste */



/* Model-fit heading mobile break control */
.jm-compat-h2 .br-mobile-line { display: none; }

@media (max-width: 480px){
  .jm-compat-h2 .br-mobile-line { display: inline; }
}



/* Desktop: tighten spacing on model-collection pages */
@media (min-width: 1024px){
  .template-collection .jm-model-fit { padding-top: 30px !important; } 
  .template-collection .jm-topgrid   { margin-bottom: 0 !important; }
  .template-collection .jm-compat-h2 { margin-top: 0 !important; }
}




/* Desktop only: make product badges larger */
@media (min-width: 1024px){
  .template-collection .jm-grid .jm-badge,
  .template-collection .product-card .jm-badge,
  .template-collection .card__badge {
    font-size: 16px !important;   /* was 14px */
    line-height: 1.15 !important;
    padding: 10px 14px !important; /* was 8px 12px */
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
  }

  /* If the bigger pill looks too close to the top, nudge it down a hair */
  .template-collection .jm-grid .jm-badge,
  .template-collection .product-card .jm-badge,
  .template-collection .card__badge {
    top: 42px !important; /* was 40px — tweak to taste */
  }
}


/* J-M — Same-brand models (collections siblings) */
#jm-same-brand-models {
  max-width: 1200px;
  margin: 28px auto;
  padding: 0 16px;
}

#jm-same-brand-models .jm-head {
  display: flex;
  align-items: center;
  justify-content: space-between; /* room for a future “See all” link */
  gap: 8px;
  margin-bottom: 12px;
}

#jm-same-brand-models .jm-head h2 {
  margin: 0;
  font-weight: 700;
  font-size: 1.25rem; /* ~20px */
}

#jm-same-brand-models .jm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile: 2 columns */
  gap: 12px;
}

@media (min-width: 768px) {
  #jm-same-brand-models .jm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  #jm-same-brand-models .jm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

#jm-same-brand-models .jm-tile {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 12px;
  text-decoration: none;
  background: #fff;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  display: block;
}

#jm-same-brand-models .jm-tile:hover,
#jm-same-brand-models .jm-tile:focus {
  border-color: #dcdcdc;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  transform: translateY(-1px);
  outline: none;
}

#jm-same-brand-models .jm-title {
  font-weight: 600;
  line-height: 1.25;
}

#jm-same-brand-models .jm-meta {
  font-size: 12px;
  opacity: .75;
  margin-top: 4px;
}


/* Add space only when a PayPal banner comes right after the siblings grid */
#jm-same-brand-models + .paypal-message-container { margin-top: 40px; }
@media (min-width: 768px) {
  #jm-same-brand-models + .paypal-message-container { margin-top: 85px; }
}







:root {
  --jm-red: #B50407;
  --jm-ink: #111;
  --jm-ink-2: #444;
  --jm-bg: #fff;
  --jm-muted: #f5f5f5;
  --jm-radius: 16px;
  --jm-shadow: 0 8px 20px rgba(0,0,0,.12);
  --jm-gap: clamp(12px, 2.5vw, 20px);
}

.jm-compat-guide { max-width: 1100px; margin: 0 auto; padding: clamp(16px, 2vw, 24px); color: var(--jm-ink); }
.jm-compat-guide__hero { text-align: center; margin-bottom: calc(var(--jm-gap) * 2); }
.jm-compat-guide__title { font-size: clamp(22px, 3vw, 34px); font-weight: 800; margin: 12px 0 8px; }
.jm-compat-guide__intro, .jm-compat-guide__tip { font-size: clamp(15px, 1.6vw, 18px); color: var(--jm-ink-2); }
.jm-compat-guide__tip { margin-top: 8px; }

.jm-compat-figure { margin: 0 0 var(--jm-gap) 0; }
.jm-compat-figure img { display:block; width:100%; height:auto; border-radius: var(--jm-radius); box-shadow: var(--jm-shadow); background: var(--jm-muted); }
.jm-compat-figure__caption { font-size: 13px; color:#666; margin-top:6px; }

.jm-compat-cta-row { display:inline-flex; flex-wrap:wrap; gap:10px; margin-top: var(--jm-gap); }
.jm-btn { display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid var(--jm-ink); color:var(--jm-ink); background:transparent; transition: transform .06s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease; }
.jm-btn:hover { transform: translateY(-1px); box-shadow: var(--jm-shadow); }
.jm-btn--primary { background: var(--jm-red); border-color: var(--jm-red); color:#fff; }
.jm-btn--ghost { background:#fff; border-color:#ddd; color:var(--jm-ink); }
.jm-btn--secondary { background:#fff; border-color: var(--jm-red); color: var(--jm-red); }

.jm-compat-guide__steps { display:grid; gap: calc(var(--jm-gap) * 1.25); }
.jm-step { background: var(--jm-bg); border-radius: var(--jm-radius); box-shadow: var(--jm-shadow); padding: clamp(16px, 2vw, 24px); }
.jm-step__title { font-size: clamp(18px, 2.2vw, 24px); margin:0 0 8px 0; color: var(--jm-ink); }
.jm-step__text { margin:0; color:var(--jm-ink-2); }

.jm-cards { display:grid; grid-template-columns:1fr; gap: var(--jm-gap); margin-top: var(--jm-gap); }
@media (min-width: 720px){ .jm-cards{ grid-template-columns: repeat(2,1fr);} }
.jm-card { background: var(--jm-muted); border-radius: var(--jm-radius); padding: clamp(14px, 2vw, 20px); box-shadow: var(--jm-shadow); }
.jm-card__title { margin:0 0 8px 0; font-size: clamp(16px, 2vw, 20px); font-weight:700; }
.jm-card__list { margin:0 0 var(--jm-gap) 16px; padding:0; }
.jm-card__list li { margin:6px 0; }

.jm-note { margin-top:8px; font-size:14px; color:#666; }

.jm-compat-guide__loyalty { margin-top: calc(var(--jm-gap) * 2); }
.jm-loyalty { background:#fff; border-left:4px solid var(--jm-red); border-radius: var(--jm-radius); padding: clamp(16px, 2vw, 24px); box-shadow: var(--jm-shadow); text-align:center; }
.jm-loyalty__title { margin:0 0 6px 0; font-size: clamp(18px, 2.2vw, 24px); }
.jm-loyalty__text { margin:0 0 var(--jm-gap) 0; color: var(--jm-ink-2); }

.jm-compat-guide__help { margin-top: var(--jm-gap); text-align:center; }
.jm-help { display:inline-block; }
.jm-help__title { margin:0 0 6px 0; font-size: clamp(18px, 2.2vw, 22px); }
.jm-help__text { margin:0 0 10px 0; color: var(--jm-ink-2); }

.jm-compat-guide__faq { margin-top: calc(var(--jm-gap) * 2); }
.jm-faq__title { font-size: clamp(18px, 2.2vw, 24px); margin:0 0 10px 0; }
.jm-faq__item { background:#fff; border-radius:12px; box-shadow: var(--jm-shadow); padding:12px 16px; margin-bottom:10px; }
.jm-faq__item > summary { cursor:pointer; font-weight:700; list-style:none; }
.jm-faq__item > summary::-webkit-details-marker { display:none; }
.jm-faq__body { margin-top:8px; color: var(--jm-ink-2); }
.jm-faq__link { margin-top:8px; font-size:14px; text-align:center; }



.jm-compat-guide__seo{max-width:1100px;margin:0 auto 20px;padding:0 16px;color:var(--jm-ink-2)}
.jm-compat-guide__seo p{margin:0 0 12px}


/* J-M: cap hero size */
.jm-compat-guide__hero { max-width: 1100px; margin: 0 auto 16px; padding: 0 16px; }
.jm-compat-figure { margin: 0 auto 12px; }
.jm-compat-figure img {
  width: 100%;
  height: auto;
  max-height: 360px;      /* desktop cap */
  object-fit: contain;    /* keep entire square visible */
  display: block;
  border-radius: 12px;
}
.jm-compat-figure__caption {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 6px;
}

@media (max-width: 720px) {
  .jm-compat-guide__hero { max-width: 96vw; padding: 0 10px; }
  .jm-compat-figure img { max-height: 220px; }  /* mobile cap */
}


/* J-M: inline search bar */
.jm-searchbar { max-width: 1100px; margin: 8px auto 8px; padding: 0 14px; }
.jm-searchbar__label { position: absolute; left: -9999px; }
.jm-searchbar__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.jm-searchbar__input {
  appearance: none; width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 10px;
  font-size: 16px; line-height: 1.2; outline: none;
}
.jm-searchbar__input:focus { border-color: #B50407; box-shadow: 0 0 0 3px rgba(181,4,7,0.15); }
.jm-searchbar__btn { padding: 12px 18px; border-radius: 10px; }
.jm-searchbar__hint { margin: 6px 0 4px; font-size: .92rem; opacity: .9; }

/* Secondary CTA row spacing */
.jm-compat-cta-row--secondary { margin-top: 6px; margin-bottom: 4px; }

@media (max-width: 720px) {
  .jm-searchbar { padding: 0 10px; }
  .jm-searchbar__row { grid-template-columns: 1fr; }
  .jm-searchbar__btn { width: 100%; }
}


/* J-M: sticky search bar */
:root { --jm-sticky-top: 290px; }                    /* desktop */
@media (max-width: 720px){ :root { --jm-sticky-top: 200px; } }  /* mobile (higher) */


.jm-searchbar--sticky{
  position: sticky;
  top: var(--jm-sticky-top);
  z-index: 60;
  background: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.jm-searchbar--sticky.is-stuck{
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* keep your existing searchbar styles */
.jm-searchbar { max-width: 1100px; margin: 8px auto 8px; padding: 0 14px; }
.jm-searchbar__label { position: absolute; left: -9999px; }
.jm-searchbar__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.jm-searchbar__input {
  appearance: none; width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 10px;
  font-size: 16px; line-height: 1.2; outline: none;
}
.jm-searchbar__input:focus { border-color: #B50407; box-shadow: 0 0 0 3px rgba(181,4,7,0.15); }
.jm-searchbar__btn { padding: 12px 18px; border-radius: 10px; }
.jm-searchbar__hint { margin: 6px 0 4px; font-size: .92rem; opacity: .9; }

@media (max-width: 720px) {
  .jm-searchbar { padding: 0 10px; }
  .jm-searchbar__row { grid-template-columns: 1fr; }
  .jm-searchbar__btn { width: 100%; }
}

/* J-M: compact mode when sticky */
.jm-searchbar--sticky.is-stuck {
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.jm-searchbar--sticky.is-stuck .jm-searchbar__input {
  padding: 8px 12px;         /* was 12px 14px */
  font-size: 15px;           /* slightly smaller */
}

.jm-searchbar--sticky.is-stuck .jm-searchbar__btn {
  padding: 8px 14px;         /* was 12px 18px */
}

.jm-searchbar--sticky.is-stuck .jm-searchbar__hint {
  display: none;             /* hide helper line to reduce height */
}

/* --- H1 mobile wrapping + balanced lines --- */
.jm-compat-guide__title { text-wrap: balance; }               /* modern browsers: nicer line breaks */
.nowrap { white-space: nowrap; }                              /* keep “RC Parts” together */

@media (max-width: 720px) {
  .jm-compat-guide__title {
    font-size: 22px;              /* was larger; reduce for small screens */
    line-height: 1.25;
    letter-spacing: 0.1px;
    margin-bottom: 10px;
  }
}

/* --- Desktop: make intro a bit larger --- */
@media (min-width: 1024px) {
  .jm-compat-guide__intro {
    font-size: 18px;              /* bump up from default */
    line-height: 1.55;
  }
}

/* --- Desktop: limit search bar width to 2/3 and center it --- */
@media (min-width: 1024px) {
  .jm-searchbar__row,
  .jm-searchbar__hint {
    max-width: 66%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* J-M: keep intro text left-aligned on all screens */
.jm-compat-guide__intro { text-align: left; }


/* J-M: disable sticky search on mobile */
@media (max-width: 720px) {
  .jm-searchbar--sticky {
    position: static;   /* turn off sticky */
    top: auto;
    z-index: auto;
    box-shadow: none;
    border-bottom: 0;
  }

  /* Neutralize compact-on-stuck styles on mobile */
  .jm-searchbar--sticky.is-stuck { box-shadow: none; border-bottom: 0; }
  .jm-searchbar--sticky.is-stuck .jm-searchbar__input { padding: 12px 14px; font-size: 16px; }
  .jm-searchbar--sticky.is-stuck .jm-searchbar__btn { padding: 12px 18px; }
  .jm-searchbar--sticky.is-stuck .jm-searchbar__hint { display: block; }
}


/* ===== J-M Compatibility Guide – CSS Pack ===== */

/* Offsets (you set these) */
:root { --jm-sticky-top: 290px; }                            /* desktop */
@media (max-width: 720px){ :root { --jm-sticky-top: 200px; } }/* mobile */

/* Elevation tokens (darker, cohesive) */
:root{
  --jm-shadow-1: 0 4px 12px rgba(0,0,0,.18);
  --jm-shadow-2: 0 8px 22px rgba(0,0,0,.22);
  --jm-shadow-3: 0 14px 32px rgba(0,0,0,.28);
  --jm-border-soft: 1px solid rgba(0,0,0,.06);
  --jm-radius-md: 12px;
  --jm-radius-lg: 14px;
}

/* Typography helpers */
.jm-compat-guide__title { text-wrap: balance; }
.nowrap { white-space: nowrap; }
.jm-compat-guide__intro { text-align: left; }

@media (min-width: 1024px){
  .jm-compat-guide__intro {
    font-size: 18px;   /* bump for desktop */
    line-height: 1.55;
  }
}
@media (max-width: 720px){
  .jm-compat-guide__title{
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: .1px;
    margin-bottom: 10px;
  }
}

/* Core content boxes */
.jm-card,
.jm-step,
.jm-loyalty,
.jm-help{
  background:#fff;
  border: var(--jm-border-soft);
  border-radius: var(--jm-radius-lg);
  box-shadow: var(--jm-shadow-2);
  transition: box-shadow .18s ease, transform .18s ease;
}

/* Subtle lift on hover/focus (desktop) */
@media (hover:hover){
  .jm-card:hover, .jm-card:focus-within,
  .jm-step:hover, .jm-step:focus-within,
  .jm-loyalty:hover, .jm-loyalty:focus-within,
  .jm-help:hover, .jm-help:focus-within{
    box-shadow: var(--jm-shadow-3);
    transform: translateY(-1px);
  }
}

/* FAQ items: compact elevation, stronger when open */
.jm-faq__item{
  background:#fff;
  border: var(--jm-border-soft);
  border-radius: var(--jm-radius-md);
  box-shadow: var(--jm-shadow-1);
  padding: 2px 0;
  margin: 10px 0;
}
.jm-faq__item[open]{ box-shadow: var(--jm-shadow-2); }

/* Hero image framing */
.jm-compat-figure img{
  box-shadow: var(--jm-shadow-2);
  border: none; /* rely on shadow for separation */
}

/* ===== Search bar base styles ===== */
.jm-compat-guide { overflow: visible; }

.jm-searchbar { max-width: 1100px; margin: 8px auto 8px; padding: 0 14px; }
.jm-searchbar__label { position: absolute; left: -9999px; }

.jm-searchbar__row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.jm-searchbar__input{
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.2;
  outline: none;
}
.jm-searchbar__input:focus{
  border-color: #B50407;
  box-shadow: 0 0 0 3px rgba(181,4,7,0.15);
}

.jm-searchbar__btn{ padding: 12px 18px; border-radius: 10px; }
.jm-searchbar__hint{ margin: 6px 0 4px; font-size: .92rem; opacity: .9; }

/* Desktop: 2/3 width for all search bars (header + steps) */
@media (min-width: 1024px){
  .jm-searchbar__row,
  .jm-searchbar__hint{
    max-width: 66%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Sticky search (desktop only; mobile sticky is disabled below) */
.jm-searchbar--sticky{
  position: sticky;
  top: var(--jm-sticky-top);
  z-index: 60;
  background: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Compact mode when stuck (desktop) */
.jm-searchbar--sticky.is-stuck{
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  border-bottom: var(--jm-border-soft);
}
.jm-searchbar--sticky.is-stuck .jm-searchbar__input{
  padding: 8px 12px;         /* tighter while stuck */
  font-size: 15px;
}
.jm-searchbar--sticky.is-stuck .jm-searchbar__btn{
  padding: 8px 14px;
}
.jm-searchbar--sticky.is-stuck .jm-searchbar__hint{ display: none; }

/* Inline form (inside steps): slightly tighter spacing */
.jm-searchbar--inline { margin-top: 10px; margin-bottom: 6px; }
@media (min-width: 1024px){
  /* keep the 2/3 width treatment on desktop for inline forms as well */
  .jm-step .jm-searchbar__row,
  .jm-step .jm-searchbar__hint{
    max-width: 66%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile: turn OFF sticky + keep full, friendly spacing */
@media (max-width: 720px){
  .jm-searchbar { padding: 0 10px; }
  .jm-searchbar__row { grid-template-columns: 1fr; }
  .jm-searchbar__btn { width: 100%; }

  .jm-searchbar--sticky{
    position: static;   /* disable sticky */
    top: auto;
    z-index: auto;
    box-shadow: none;
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Neutralize compact-on-stuck styles on mobile */
  .jm-searchbar--sticky.is-stuck { box-shadow: none; border-bottom: 0; }
  .jm-searchbar--sticky.is-stuck .jm-searchbar__input { padding: 12px 14px; font-size: 16px; }
  .jm-searchbar--sticky.is-stuck .jm-searchbar__btn { padding: 12px 18px; }
  .jm-searchbar--sticky.is-stuck .jm-searchbar__hint { display: block; }

  /* So shadows don’t feel heavy on small screens */
  .jm-card, .jm-step, .jm-loyalty, .jm-help { box-shadow: var(--jm-shadow-1); }
  .jm-faq__item[open]{ box-shadow: var(--jm-shadow-1); }
}


/* ===== J-M: Fix muted headings inside guide boxes ===== */
:root{
  --jm-heading: #0f172a;    /* deep slate/near-black for headings */
  --jm-text:    #1f2937;    /* strong body text */
}

/* Strong heading color in guide components */
.jm-step .jm-step__title,
.jm-card .jm-card__title,
.jm-loyalty .jm-loyalty__title,
.jm-help .jm-help__title,
.jm-compat-guide__title,
.jm-faq__title{
  color: var(--jm-heading);
  font-weight: 700;
}

/* Ensure body copy inside boxes isn't washed out */
.jm-step .jm-step__text,
.jm-card .jm-card__list,
.jm-loyalty .jm-loyalty__text,
.jm-help .jm-help__text,
.jm-faq__body{
  color: var(--jm-text);
}

/* If your theme is very aggressive about muting headings inside cards,
   this extra specificity forces our color without !important */
.jm-step h2.jm-step__title,
.jm-card h3.jm-card__title{ color: var(--jm-heading); }

/* Optional: tiny spacing tune so titles feel crisper */
.jm-step__title,
.jm-card__title{ margin-top: 4px; margin-bottom: 8px; line-height: 1.25; }


/* J-M: three-up kit cards on desktop, single column on mobile */
.jm-cards { display: grid; gap: 14px; }
@media (min-width: 1024px){
  .jm-cards { grid-template-columns: repeat(3, 1fr); }
}

/* J-M: three-up kit cards on desktop, single column on mobile */
.jm-cards { display: grid; gap: 14px; }
@media (min-width: 1024px){
  .jm-cards { grid-template-columns: repeat(3, 1fr); }
}

/* J-M: Metal-Shielded badge */
.jm-badge{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 999px;
  background: #eef2ff;                 /* soft indigo background */
  color: #1e3a8a;                       /* indigo-900 text */
  border: 1px solid rgba(30,58,138,.2); /* subtle edge */
}
@media (max-width: 720px){
  .jm-card__title .jm-badge{ display:block; margin:6px 0 0 0; }
}

/* J-M: Center the "See FAQs below" note on desktop */
.jm-note { text-align: left; }
@media (min-width: 1024px){
  .jm-note { text-align: center; }
}

/* J-M: “Need a Hand?” box — increase padding */
.jm-help{
  padding: 18px 16px;
}
@media (min-width: 1024px){
  .jm-help{
    padding: 24px 22px;
  }
}

/* J-M: Step 3 transparency line — ensure its own left-aligned line */
.jm-transparency-note{
  margin-top: 6px;
  text-align: left;
}

/* J-M: FAQs — more comfortable padding in each shadow box */
.jm-faq__item{
  padding: 12px 14px; /* was 2px 0 */
}
.jm-faq__item[open] .jm-faq__body{
  padding-top: 8px;
}




/* ===== J-M: Need a Hand? — center heading on mobile, keep body left ===== */
@media (max-width: 720px){
  .jm-help__title{
    text-align: center;
    text-wrap: balance;
    margin-left: auto;
    margin-right: auto;
  }
  /* Preserve left alignment for copy + CTA on mobile */
  .jm-help{ text-align: left; }
  .jm-help__text{ text-align: left; }
  .jm-help .jm-btn{
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }
}




/* ===== J-M: Why Buy Direct layout ===== */
.jm-why{
  max-width: 1100px;
  margin: 16px auto 28px;
  padding: 0 16px;
}
.jm-block{
  padding: 18px 16px;
  margin: 12px 0;
}
@media (min-width: 1024px){
  .jm-block{
    padding: 24px 22px;
    margin: 16px 0;
  }
}

.jm-why__hub-link {
  margin-top: 8px;
}
.jm-why__hub-link a {
  color: #c70000;
  font-weight: 600;
  text-decoration: none;
}
.jm-why__hub-link a:hover {
  text-decoration: underline;
}


/* Headings in cards */
.jm-why__title{
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.2;
  margin: 2px 0 10px;
}
.jm-why__h2{
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.25;
  margin: 2px 0 10px;
}

/* Lists inside boxes */
.jm-list{
  margin: 8px 0 4px 18px;
  padding: 0;
}
.jm-list li{
  margin: 6px 0;
}

/* Link list block spacing */
.jm-list--links li{
  margin: 8px 0;
}

/* Bottom search explanatory copy */
.jm-search-copy{
  margin: 2px 0 10px;
  line-height: 1.5;
}

/* Help box refinements (works with your earlier mobile rules) */
.jm-help{
  /* inherits card shadow/radius from your system */
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.jm-help__title{
  text-wrap: balance;
  margin-bottom: 6px;
}
.jm-help__text{
  text-wrap: pretty;
  margin-bottom: 10px;
}

/* Mobile: center the “Questions?” heading, keep body/CTA left-aligned */
@media (max-width: 720px){
  .jm-help__title{
    text-align: center;
  }
  .jm-help{ text-align: left; }
  .jm-help__text{ text-align: left; }
  .jm-help .jm-btn{
    white-space: normal;
    text-align: left;
    display: inline-flex;
    justify-content: flex-start;
    padding: 12px 14px;
  }
}

/* J-M SUPPLIES – Mobile: shrink Search Results header */
@media (max-width: 768px) {
  .et-main .et-section-header {
    font-size: 1.3rem;   /* adjust smaller/bigger to taste */
    line-height: 1.2;    /* tighter so it stays on one line */
    margin-bottom: 0.8rem; /* optional: slightly less spacing below */
    transition: none !important; /* avoid a smooth font-size animation */
  }
}

.et-main .et-section-header {
  transition: none !important;
}



/* Added the below on 11-11-2025 */

/* J-M SUPPLIES – Mobile cart layout with SKU and quantity */
@media (max-width: 767px) {

  /* Base flex layout for the cart row */
  .et-cart .et-cart-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
  }

  /* Each cell in the cart row */
  .et-cart .et-cart-flex > td {
    padding: 6px 0;
  }

  /* Thumbnail */
  .et-cart .et-cart-flex .et-cart__image-wrapper {
    flex: 0 0 80px;
    margin-right: 10px;
  }

  .et-cart .et-cart-flex .et-cart__image {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }

  /* Description area next to the image */
  .et-cart .et-cart-flex .et-cart__meta {
    flex: 1 1 calc(100% - 90px);
  }

  /* SKU line under the description */
  .et-cart .et-cart-flex .et-cart__sku {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
  }

  /* Price and quantity/edit row stacked under the description */
  .et-cart .et-cart-flex .et-cart__price-wrapper,
  .et-cart .et-cart-flex .et-cart__update-wrapper {
    flex: 0 0 50%;
    padding-top: 4px;
  }

  .et-cart .et-cart-flex .et-cart__update-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  /* Quantity input and edit button together */
  .et-cart .et-cart-flex .et-cart__qty {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
  }

  .et-cart .et-cart-flex .et-cart__edit {
    margin-top: 4px;
  }

  /* Line total full width at the bottom */
  .et-cart .et-cart-flex .et-cart-item-price-container {
    flex: 0 0 100%;
    order: 5;
    text-align: right;
    padding-top: 4px;
  }
}

/* J-M SUPPLIES — Mobile cart: always show qty/remove/update, hide Edit toggle */
@media (max-width: 767px) {

  /* 1) Hide the "Edit / Cancel" toggle on mobile */
  .et-cart__edit.et-edit-toggle {
    display: none !important;
  }

  /* 2) Make sure the update-wrapper is always visible and laid out nicely */
  .et-cart__update-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 4px;
  }

  /* 3) Ensure Remove + Update buttons are always visible */
  .et-cart__update-wrapper .et-cart__remove,
  .et-cart__update-wrapper .et-cart__update {
    display: inline-block !important;
    margin-top: 4px;
  }

  /* 4) Keep the quantity controls visible and aligned */
  .et-cart__update-wrapper .et-cart__qty {
    display: flex !important;
    justify-content: flex-end;
    margin-top: 2px;
  }

  .et-cart__update-wrapper .et-cart__qty-input {
    max-width: 70px;
  }
}


/* J-M SUPPLIES — Cart: show MPN + OEM fit codes under title */
/* J-M SUPPLIES — Cart: spacing + font for MPN + fit codes */

.et-cart__meta .jm-cart-mpn,
.et-cart__meta .jm-cart-fitcodes {
  font-size: 12px;     /* make these lines smaller than the title */
  line-height: 1.35;   /* a bit tighter but still readable */
}

.et-cart__meta .jm-cart-mpn {
  margin-top: 12px;     /* space above MPN line */
  margin-bottom: 2px;  /* small gap before the Compatible line */
}

.et-cart__meta .jm-cart-fitcodes {
  margin-top: 2px;
  margin-bottom: 14px;  /* extra space below Compatible RC Model Numbers */
}

.et-cart__meta .jm-cart-mpn strong,
.et-cart__meta .jm-cart-fitcodes strong {
  font-weight: 600;
}


/* J-M SUPPLIES — Mobile cart: align prices under text column */
@media (max-width: 767px) {

  /* Unit price block under title, aligned with text (not the image) */
  .et-cart .et-cart-flex .et-cart__price-wrapper {
    flex: 0 0 100%;
    text-align: left;
    padding-left: 90px; /* 80px thumb + 10px gap */
    padding-top: 4px;
  }

  /* Line total under that, same alignment */
  .et-cart .et-cart-flex .et-cart-item-price-container {
    flex: 0 0 100%;
    text-align: left;
    padding-left: 90px;
    padding-top: 2px;
  }
}



/* J-M SUPPLIES — Mobile cart: move quantity and buttons to the right */
@media (max-width: 767px) {
  /* Existing price alignment rules remain the same */
  .et-cart .et-cart-flex .et-cart__price-wrapper {
    flex: 0 0 100%;
    text-align: left;
    padding-left: 90px;
  }

  /* Line total alignment as before */
  .et-cart .et-cart-flex .et-cart-item-price-container {
    flex: 0 0 100%;
    text-align: left;
    padding-left: 90px;
  }

  /* Move the entire quantity and button block to the right */
  .et-cart__update-wrapper {
    display: block; /* Keep it vertical */
    text-align: right; /* Align the content to the right */
    padding-right: 10px; /* Add some padding so it's not at the absolute edge */
    margin-top: -10px; /* Move it up a bit closer to the price */
  }

  /* Adjust spacing for the quantity and buttons so they stack neatly */
  .et-cart__qty-input,
  .et-cart__update,
  .et-cart__remove {
    margin-top: 4px; /* Give a little breathing space between each control if needed */
  }
}



/* J-M SUPPLIES — Mobile cart: make room for controls & pin them inside the row */
@media (max-width: 767px) {

  /* Give each row extra space at the bottom for the controls */
  .et-cart .et-cart__row.et-cart-flex {
    position: relative !important;
    padding-bottom: 84px;  /* was 72px – a bit more room */
  }

  /* Pin Remove / Qty / Update in the bottom-right of the row */
  .et-cart .et-cart__row.et-cart-flex .et-cart__update-wrapper {
    position: absolute !important;
    right: 14px !important;
    bottom: 4px !important;   /* was 4px – this moves it slightly lower */
    text-align: right !important;
    width: auto;
  }

  /* Inside the block, push the qty row itself to the right */
  .et-cart .et-cart__row.et-cart-flex .et-cart__update-wrapper .et-cart__qty {
    justify-content: flex-end !important;
  }

  /* Keep the qty input compact */
  .et-cart .et-cart__row.et-cart-flex .et-cart__update-wrapper .et-cart__qty-input {
    max-width: 70px;
    margin-left: 4px;
  }

  /* Buttons still vertical, but aligned right with a bit of spacing */
  .et-cart .et-cart__row.et-cart-flex .et-cart__update-wrapper .et-cart__remove,
  .et-cart .et-cart__row.et-cart-flex .et-cart__update-wrapper .et-cart__update {
    display: inline-block;
    margin-top: 4px;
  }
}

/* J-M SUPPLIES — Mobile cart: tighter product title lines */
@media (max-width: 767px) {
  .et-cart__meta .et-list-view-item__title,
  .et-cart__meta .et-list-view-item__title a {
    font-size: 16px !important;
    line-height: 1.3 !important;  /* Perfect Height */
    display: block;
  }
}

/* J-M SUPPLIES — Mobile cart: hide table header row */
@media (max-width: 767px) {
  .et-cart .et-cart__header {
    display: none !important;
  }
}



/* J-M SUPPLIES — Mobile cart: add space above Checkout button */
@media (max-width: 767px) {
  input.btn.et-checkout-upsell[name="checkout"] {
    margin-top: 10px !important;  /* increase this number for more space */
  }
}

/* J-M SUPPLIES — Desktop cart: narrower content width */
@media (min-width: 992px) {
  #et-cart-clear {
    max-width: 850px;   /* try 900–1000px until it feels right */
    margin-left: auto;
    margin-right: auto;
  }
}


/* J-M SUPPLIES — Desktop cart: right-align policy pill + PayPal with cart edge */
@media (min-width: 992px) {

  /* Make the right footer column a flex column aligned to the right */
  #et-cart-clear .et-cart__footer__right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* everything inside hugs the right edge */
    text-align: right;
  }

  /* Totals block can stay full-width but text is right-aligned */
  #et-cart-clear .et-cart__footer__right-column .et-regular {
    width: 100%;
    text-align: right;
  }

  /* Blue policy pill: content-sized, right edge flush with totals */
  #et-cart-clear .et-cart__footer__right-column .jm-cart-policy {
    display: inline-block;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: right;       /* text inside pill right-aligned */
    align-self: flex-end;    /* anchor to right side of the column */
  }

  

 

  
  #et-cart-clear .et-cart__footer__right-column .message__logo {
    display: inline-block;
  }
}


/* Default (mobile-first) font size for jm-fit-title */
.jm-fit-title {
  font-size: 18px !important; /* Ensure mobile font size is applied */
  line-height: 1.25;
  font-weight: 700;
}

/* Font size for desktop screens */
@media (min-width: 768px) {
  .jm-fit-title {
    font-size: 24px !important; /* Ensure desktop font size is applied */
  }
}

/* Font size for larger screens (e.g., tablets or desktops) */
@media (min-width: 1024px) {
  .jm-fit-title {
    font-size: 26px !important; /* Adjust as needed for larger devices */
  }
}

/* Default width for the search dropdown (on mobile and small screens) */
.snize-ac-results-list {
  width: 100%; /* Adjust this width as per your mobile/tablet design */
}

/* Increase the width of the search dropdown on desktop */
@media (min-width: 768px) {
  .snize-ac-results-list {
    width: 700px; /* Adjust this value to set the width you want */
  }
}






/* === J-M SUPPLIES – Searchanise dropdown (card-style, box-shadow hover) === */

/* Desktop container width + safety against viewport edge */
@media (min-width: 992px) {
  .snize-ac-results {
    width: 700px !important;
    max-width: calc(100vw - 40px) !important; /* don't overflow on narrow desktops */
    box-sizing: border-box !important;
  }

  /* Hanging indent for COLLECTION rows (categories) only — DESKTOP ONLY */
  [id^="snize-ac-items-container-"] > li.snize-category > a.snize-view-link {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;

    /* Hanging indent */
    padding-left: 48px !important;   /* overall left padding */
    text-indent: -28px !important;   /* pull first line back */
    line-height: 1.4 !important;
  }
}

/* Outer dropdown list: padding and box-sizing */
.snize-ac-results-list {
  margin: 0 !important;
  padding: 8px 10px !important;       /* extra left/right room for card edges */
  box-sizing: border-box !important;
}

/* Base rows: products + categories */
[id^="snize-ac-items-container-"] > li.snize-product,
[id^="snize-ac-items-container-"] > li.snize-category {
  list-style: none !important;
  margin: 0 0 6px 0 !important;       /* consistent vertical gap between boxes */
  padding: 0 !important;
  height: auto !important;            /* row grows with wrapped text */
  box-sizing: border-box !important;
}

/* Clear floats so rows expand with thumbnails */
[id^="snize-ac-items-container-"] > li.snize-product::after,
[id^="snize-ac-items-container-"] > li.snize-category::after {
  content: "";
  display: block;
  clear: both;
}

/* Thumbnail + text layout */
[id^="snize-ac-items-container-"] .snize-thumbnail {
  float: left;
  margin-right: 10px;                 /* gap between image and text */
}

[id^="snize-ac-items-container-"] .snize-product-info {
  overflow: hidden;                   /* contain the floated thumbnail */
}

/* Text links and titles: allow wrapping */
[id^="snize-ac-items-container-"] a.snize-item,
[id^="snize-ac-items-container-"] a.snize-view-link,
[id^="snize-ac-items-container-"] .snize-title {
  display: block !important;
  white-space: normal !important;     /* permit wrapping */
  overflow-wrap: anywhere !important; /* break long model codes if needed */
}

/* Clickable area inside each row (ALL VIEW LINKS, ALL BREAKPOINTS) */
[id^="snize-ac-items-container-"] > li > a.snize-item,
[id^="snize-ac-items-container-"] > li > a.snize-view-link {
  display: block !important;

  /* Margin keeps hover shadow INSIDE the dropdown edges */
  margin: 0 0px !important;           /* inset both sides so shadow is visible */
  padding: 10px 12px !important;       /* comfy hit area */

  border-radius: 6px;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 100% !important;

  /* Card baseline */
  background: #ffffff !important;
  border: 1px solid transparent !important;  /* keeps layout stable */

  /* CRITICAL FOR MOBILE: no negative indent by default */
  text-indent: 0 !important;

  /* Smooth hover */
  transition: background 0.12s ease-out, box-shadow 0.12s ease-out;
}

/* === Hanging indent for COLLECTION rows (all breakpoints) === */
[id^="snize-ac-items-container-"] > li.snize-category > a.snize-view-link {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;

  /* Hanging indent */
  padding-left: 50px !important;   /* total left padding */
  text-indent: -28px !important;   /* outdent first line only */
  line-height: 1.4 !important;
}






/* Hover/focus: blue box-shadow clearly around all edges */
[id^="snize-ac-items-container-"] > li:hover > a.snize-item,
[id^="snize-ac-items-container-"] > li:hover > a.snize-view-link,
[id^="snize-ac-items-container-"] > li:focus-within > a.snize-item,
[id^="snize-ac-items-container-"] > li:focus-within > a.snize-view-link {
  background: #f6f8ff !important;

  /* Outer (not inset) blue outline + light lift */
  box-shadow:
    0 0 0 1px #2f5bff,       /* crisp blue outline */
    0 2px 6px rgba(0, 0, 0, 0.08); /* subtle drop shadow for depth */

  border-color: transparent !important;
  transform: none !important;
}

/* Make sure the <li> itself doesn't try to stretch on hover */
[id^="snize-ac-items-container-"] > li:hover {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Separator rows: act as small gaps only */
[id^="snize-ac-items-container-"] > li.snize-separator {
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}





/* === J-M SUPPLIES – Searchanise "Popular searches" suggestions (card + hanging indent) === */

/* Base suggestions rows (text-only LIs) */
[id^="snize-ac-items-container-"] > li.snize-suggestion {
  display: block !important;
  height: auto !important;                   /* grows vertically with wrapped text */

  /* Make suggestion sit inside the same “card” area as products/collections */
  margin: 0 8px 6px 8px !important;          /* inset from dropdown edge + gap below */
  padding: 8px 12px !important;
  border-radius: 6px;

  background: #ffffff !important;
  box-sizing: border-box !important;
  cursor: pointer;

  /* Let long queries wrap INSIDE the box */
  white-space: normal !important;
  overflow-wrap: anywhere !important;

  /* Hanging indent: wrapped lines more indented than the first line */
  padding-left: 40px !important;            /* total left padding */
  text-indent: -28px !important;            /* pull first line back a bit */
  line-height: 1.4 !important;              /* clean text spacing */
}

/* Label row ("Popular searches") – keep simple, aligned with content width */
[id^="snize-ac-items-container-"] > li.snize-label {
  margin: 0 8px 4px 8px !important;         /* align with suggestion cards */
  padding: 4px 12px !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666666;
  white-space: normal !important;
}

/* Hover/focus effect for suggestions – reuse the blue glow */
[id^="snize-ac-items-container-"] > li.snize-suggestion:hover,
[id^="snize-ac-items-container-"] > li.snize-suggestion:focus {
  background: #f6f8ff !important;
  box-shadow:
    0 0 0 1px #2f5bff,
    0 2px 6px rgba(0, 0, 0, 0.08);
}




/* Desktop-only: nudge jm-list bullets to the right inside the box */
@media (min-width: 992px) {
  .jm-list {
    padding-left: 26px !important;      /* desktop indent */
    margin-left: 0 !important;
    list-style-position: outside !important;
  }

  .jm-list li {
    padding-left: 0 !important;
    text-indent: 0 !important;
  }
}

/* Mobile/tablet-only: separate control for jm-list indent */
@media (max-width: 991px) {
  .jm-list {
    padding-left: 20px !important;      /* mobile indent – tweak to taste */
    margin-left: 0 !important;
    list-style-position: outside !important;
  }

  .jm-list li {
    padding-left: 0 !important;
    text-indent: 0 !important;
  }
}


/* Desktop-only: two even cards with equal spacing + vertical padding */
@media (min-width: 992px) {
  .jm-topgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 equal columns */

    /* Horizontal spacing */
    column-gap: 24px;           /* space between the two boxes */
    padding-left: 24px;         /* space to left container edge */
    padding-right: 24px;        /* space to right container edge */

    /* NEW: vertical spacing above and below the pair of boxes */
    padding-top: 28px;          /* space above the row of cards */
    padding-bottom: 34px;       /* space below the row of cards */

    box-sizing: border-box;
  }

  .jm-topgrid .jm-card {
    margin: 0 !important;       /* remove stray margins for perfect symmetry */
  }
}



/* J-M SUPPLIES — Center model grid rows when not full */

/* Base: flex row, center items, keep gap between cards */
.jm-model-grid .jm-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* <-- This is what centers 2–3 cards */
  gap: 1.5rem;               /* adjust spacing between cards as needed */
}

/* Desktop: up to 4 products per row */
@media (min-width: 992px) {
  .jm-model-grid .jm-card {
    flex: 0 1 calc(25% - 1.5rem);  /* 4 across, with gap compensation */
    max-width: 260px;              /* optional: keeps cards from stretching too wide */
  }
}

/* Tablet: 2 products per row */
@media (min-width: 600px) and (max-width: 991.98px) {
  .jm-model-grid .jm-card {
    flex: 0 1 calc(50% - 1.5rem);  /* 2 across */
    max-width: 320px;
  }
}

/* Mobile: 1 product per row */
@media (max-width: 599.98px) {
  .jm-model-grid .jm-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}





/* === J-M SUPPLIES — Same-brand models strip === */

.jm-same-brand-models {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--jm-border-soft, #e5e5e5);
}

.jm-same-brand-models .jm-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.jm-same-brand-models .jm-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.jm-same-brand-models .jm-seeall {
  font-size: 0.875rem;
  text-decoration: none;
  opacity: 0.85;
  border-bottom: 1px solid transparent;
}

.jm-same-brand-models .jm-seeall:hover {
  opacity: 1;
  border-bottom-color: currentColor;
}

.jm-same-brand-models .jm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.jm-same-brand-models .jm-tile {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--jm-border-soft, #e5e5e5);
  box-shadow: var(--jm-shadow-1, none);
  background: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.3;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.jm-same-brand-models .jm-title {
  font-weight: 600;
  white-space: nowrap;
}

.jm-same-brand-models .jm-meta {
  font-size: 0.75rem;
  opacity: 0.75;
}

@media (min-width: 992px) {
  .jm-same-brand-models .jm-tile:hover {
    box-shadow: var(--jm-shadow-2, 0 4px 12px rgba(0,0,0,0.08));
    transform: translateY(-1px);
    border-color: rgba(0, 0, 0, 0.15);
  }
}

@media (max-width: 600px) {
  .jm-same-brand-models .jm-grid {
    gap: 0.4rem;
  }

  .jm-same-brand-models .jm-tile {
    max-width: 100%;
    white-space: normal;
  }

  .jm-same-brand-models .jm-title {
    white-space: normal;
  }
}





@media (max-width: 1023px) {
  /* J-M SUPPLIES – Force instant search button text to white */
.snize-add-to-cart-container button.snize-button.snize-action-button.snize-add-to-cart-button {
  background-color: var(--jm-red, #c70000) !important;
  color: #ffffff !important;
  border: none !important;
}
}
.snize-add-to-cart-container button {
  background-color: #c70000 !important;
  color: #ffffff !important;
  border: none !important;
}




/* J-M SUPPLIES – ~50% width delivery bar on tablet portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .deliverydate.sb_delivery {
    position: relative;
    left: 50%;
    width: 50vw !important;          /* about half of the screen width */
    margin-left: -25vw !important;   /* center it horizontally */
    margin-right: 0 !important;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}





/* J-M SUPPLIES – Left indent control for model fit title + meta */
:root {
  --jm-fit-title-indent: 12px;   /* tweak this value to indent more/less */
}

/* Apply same indent to both title and meta */
.jm-fit-title,
.jm-fit-meta {
  padding-left: var(--jm-fit-title-indent);
}

/* Optional: slightly larger indent only on tablet/desktop */
@media (min-width: 768px) {
  .jm-fit-title,
  .jm-fit-meta {
    --jm-fit-title-indent: 18px;
  }
}




/* Tablet portrait: 2 cards, centered with equal side spacing */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  .jm-topgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* still 2 equal columns */

    /* Same gap + padding both sides */
    column-gap: 24px;
    padding-left: 24px;
    padding-right: 24px;

    /* Vertical spacing */
    padding-top: 28px;
    padding-bottom: 34px;

    /* Center the grid inside its parent */
    margin-left: auto;
    margin-right: auto;

    width: 100%;
    box-sizing: border-box;
  }

  .jm-topgrid .jm-card {
    margin: 0 !important;
  }
}



/* J-M SUPPLIES — Move product badges lower on tablet + mobile */
@media (max-width: 991.98px) {
  .jm-imgwrap {
    position: relative; /* safety: make sure badge is anchored to the image */
  }

  .jm-imgwrap .jm-badge {
    /* Option A: push it down a bit, keep near the top */
    top: 50px;          /* adjust this up/down to taste */
    /* keep existing left/right from your base .jm-badge CSS */
  }
}




/* J-M SUPPLIES — Product page "View model collection" card */
/* Softer premium card, but with strong blue frame */

.jm-product-model-collection {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;

  /* Strong blue frame + light blue background */
  border: 2px solid #0074d9;          /* same blue as earlier card */
  background-color: #f5f9ff;          /* very light blue tint */

  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Hover: slightly deeper blue feel, mild lift */
.jm-product-model-collection:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
  transform: translateY(-1px);
  border-color: #005bb5;              /* deeper blue on hover */
}


.jm-product-model-collection .jm-collection-label {
  margin: 0 0 8px 0;
  font-weight: 600;
}

/* Link as a subtle pill button with icon */
.jm-collection-link {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid #2563eb;          /* medium blue */
  font-size: 0.85rem;
  font-weight: 600;
  white-space: normal;                 /* wraps nicely on mobile */
  word-break: break-word;              /* safe for long model names */
  background-color: #eff6ff;           /* light blue fill */
  color: #1d4ed8;                      /* readable blue text */
}


/* Base pill styling should already exist; we just handle layout here */
.jm-product-model-collection .jm-collection-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;                 /* space between icon and text */
}

.jm-product-model-collection .jm-collection-link-icon {
  font-size: 0.9em;
  transform: translateY(0.5px);
}

.jm-product-model-collection .jm-collection-link-text {
  display: inline-block;
}


@media (max-width: 767px) {
  .jm-product-model-collection .jm-collection-link {
    display: flex;
    width: 100%;
    justify-content: center;   /* center the icon+text group */
    align-items: center;
    text-align: left;          /* so the text inside behaves left-aligned */
  }

  .jm-product-model-collection .jm-collection-link-text {
    display: inline-block;
    text-align: left;          /* multi-line text left aligned */
    max-width: 300px;          /* adjust as you like for readability */
  }
}


.jm-collection-link:hover,
.jm-collection-link:focus {
  text-decoration: underline;
  background-color: #dbeafe;           /* slightly deeper blue on hover */
}


/* Mobile: pill spans full width, text block centered but left-aligned */
@media (max-width: 767px) {
  .jm-product-model-collection .jm-collection-link {
    display: block;
    width: 100%;
    text-align: center;         /* centers the inner span as an inline-block */
  }

  .jm-product-model-collection .jm-collection-link-text {
    display: inline-block;      /* becomes a “text block” */
    text-align: left;           /* lines inside it are left-aligned */
    max-width: 100%;            /* safe on small screens */
    padding: 0 14px;            /* optional: breathing room from edges */
    max-width: 280px;
  }
}

@media (max-width: 767px) {
  .jm-product-model-collection .jm-collection-link {
    /* keep whatever background / border / colors you already set */
    padding-top: 8px;     /* a bit of space above text */
    padding-bottom: 20px; /* extra space below text for better vertical centering */
  }
}



/* J-M SUPPLIES — Quick kit switcher inside model collection card */
.jm-collection-select-label {
  display: block;
  margin: 12px 0 4px;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.9;
}

/* Wrapper so we can draw a clear dropdown arrow */
.jm-collection-select-wrap {
  position: relative;
  display: block;
}

.jm-collection-select {
  width: 100%;
  max-width: 100%;
  border-radius: 999px;
  border: 1px solid #c3d3f5;
  background-color: #ffffff;
  padding: 7px 36px 7px 12px;  /* extra right padding for arrow */
  font-size: 1.2rem;
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Visible dropdown arrow so it’s obvious this is a select */
.jm-collection-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.6rem;
  color: #1f4ab8;
}

/* Pro tip text under the dropdown */
.jm-collection-protip {
  margin-top: 6px;
  font-size: 0.84rem;
  color: #334155;
  opacity: 0.95;
}

/* Mobile tweaks: slightly smaller text so it doesn’t feel cramped */
@media (max-width: 767px) {
  .jm-collection-select {
    font-size: 0.8rem;
    padding: 7px 32px 7px 10px;
  }

  .jm-collection-select-label {
    font-size: 0.78rem;
  }

  .jm-collection-protip {
    font-size: 0.75rem;
  }
}







/* J-M SUPPLIES — Full-screen product gallery */

body.jm-modal-open {
  overflow: hidden;
}

/* Full-screen overlay */
.jm-image-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;               /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
}

/* Visible state */
.jm-image-modal.is-open {
  display: flex;
}

/* Dark backdrop */
.jm-image-modal__backdrop {
  position: absolute;
  inset: 0;
}

/* Inner content */
.jm-image-modal__content {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  padding: 8px 48px; /* space for arrows on desktop */
  box-sizing: border-box;
}

/* Scrollable column of images */
.jm-image-modal__scroll {
  max-height: 90vh;
  overflow-y: auto;
  padding: 0 8px;
}

/* Each gallery image */
.jm-image-modal__img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 16px auto;
  object-fit: contain;
}

/* Close button */
.jm-image-modal__close {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 32px;
  line-height: 1;
  border: none;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

/* Arrows — more prominent on desktop */
.jm-image-modal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  width: 48px;
  height: 80px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jm-image-modal__arrow--prev {
  left: 8px;
}

.jm-image-modal__arrow--next {
  right: 8px;
}

/* Mobile/tablet tweaks: smaller arrows; scroll is main UX */
@media (max-width: 767px) {
  .jm-image-modal__content {
    padding: 8px 32px;
  }

  .jm-image-modal__arrow {
    width: 32px;
    height: 56px;
    font-size: 26px;
    background: rgba(0, 0, 0, 0.45);
  }

  .jm-image-modal__close {
    font-size: 28px;
  }
}

/* Desktop/tablet: constrain width so it feels like a modal, still large */
@media (min-width: 768px) {
  .jm-image-modal__content {
    max-width: 900px;
  }
}




/* J-M SUPPLIES — Disable all sticky headers + sticky product info */

/* Common header sticky wrappers / containers */
.site-header,
.header-wrapper,
.shopify-section-header-sticky,
.sticky-header,
[data-header-sticky="true"],
[data-sticky="header"],
#shopify-section-header {
  position: relative !important;
  top: auto !important;
}

/* If header itself is fixed or sticky, force it back into normal flow */
header,
header[style*="position: sticky"],
header[style*="position:fixed"],
.site-header[style*="position:sticky"],
.site-header[style*="position:fixed"] {
  position: relative !important;
  top: auto !important;
}

/* Common sticky product info / buy box containers */
.product__info-wrapper,
.product__info-wrapper--sticky,
.product__block--sticky,
.product-form-sticky,
.et-product-single__sticky-column,
[data-sticky="product-info"],
[data-sticky="product"] {
  position: static !important;
  top: auto !important;
}

/* Safety: if any generic "sticky" class is used, turn it off */
[class*="sticky"] {
  position: static !important;
  top: auto !important;
}


/* J-M SUPPLIES — Mobile heading: smaller, wrapped, with side padding */
@media only screen and (max-width: 767px) {
  h2.et-section-header.mb-3.mb-md-5.text-center {
    font-size: 18px !important;      /* adjust as needed */
    line-height: 1.3 !important;

    /* Keep text from touching the edges */
    padding-left: 16px !important;
    padding-right: 16px !important;

    /* Make sure it wraps nicely */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;

    /* Optional: slightly narrower than full width for nicer look */
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}



/* J-M SUPPLIES — Hide floating Trustpilot badge on mobile */
@media (max-width: 767px) {
  /* Common Trustpilot floating widget containers */
  .trustpilot-widget,
  
  .tp-widget-wrapper iframe,
  .trustpilot-widget-fixed,
  .trustpilot-widget--floating {
    display: none !important;
  }
}


/* J-M SUPPLIES — Nudge social icons in from left edge on all devices */
.et-social-icons {
  padding-left: 40px !important;
  padding-right: 16px !important;
  box-sizing: border-box;  /* keep layout sane with padding */
}



/* J-M SUPPLIES — Footer menu layout on MOBILE */
@media (max-width: 767px) {
  /* Left-align the footer links and control side padding */
  .et-footer__style-two-menu {
    justify-content: flex-start !important;  /* instead of centered */
    padding-left: 26px !important;           /* space from left edge */
    padding-right: 16px !important;          /* space from right edge */

    margin-left: 0 !important;
    margin-right: 0 !important;

    /* NEW: space at the very bottom */
    padding-bottom: 24px !important;  /* adjust to taste: 16–40px */
  }

  /* Control spacing between items */
  .et-footer__style-two-menu .nav-item {
    margin-right: 14px;       /* gap between links horizontally */
    margin-bottom: 2px;       /* tighter vertical spacing if they wrap */
  }

  /* Tighten link padding + force smaller font + tighter line height */
  .et-footer__style-two-menu .nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;

    font-size: 0.9rem !important;  /* force smaller font on mobile */
    line-height: 1.3 !important;   /* lines closer together vertically */
  }
}



/* J-M SUPPLIES — Tighten black footer band padding on mobile */
@media (max-width: 767px) {
  section.py-5[style*="background:#000000"] {
    padding-bottom: 16px !important;  /* was ~3rem from py-5 */
    padding-top: 30px !important;     /* optional: also a bit less top */
  }
}

/* J-M SUPPLIES — Reduce bottom margin of last footer columns on mobile */
@media (max-width: 767px) {
  .et-footer__first-column > .col-md-4.et-footer__style-two:last-child {
    margin-bottom: 0 !important;
  }
}



/* J-M SUPPLIES — Vertically center this content block + control top/bottom space */
.et-content-text__item {
  display: flex;
  flex-direction: column;        /* stack h2 + subtext vertically */
  justify-content: center !important;       /* center them vertically */
  align-items: center;           /* keep them horizontally centered */

  /* HEIGHT + INTERNAL SPACE */
  min-height: 120px !important;             /* overall band height (adjust) */
  padding-top: 30px !important;             /* extra space above content */
  padding-bottom: 8px !important;          /* extra space below content */
}



/* J-M SUPPLIES — RC Wishlist nudge position on DESKTOP + TABLETS (top-right) */
@media (min-width: 768px) {
  .swym-atw-notification-container {
    position: fixed !important;

    /* Direction controls from the TOP-RIGHT corner */
    top: 40px !important;      /* distance DOWN from the top */
    right: 90px !important;    /* distance IN from the right edge */

    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    z-index: 9999;             /* on top of other UI */
  }
}


/* J-M SUPPLIES — Only left-align the special long labels */
.jm-btn--leftlabel {
  justify-content: flex-start;   /* text starts at left inside the button */
}

.jm-btn--leftlabel .jm-btn-label {
  display: block;
  width: 100%;
  text-align: left;
}



/* FAQ heading: nudge right + slightly smaller */
.jm-faq-heading {
  margin-left: 12px;    /* move heading to the right on all devices */
  font-size: 1.10rem;   /* a bit smaller than your text-xl default */
}

/* Optional: adjust a bit more on tablet/desktop */
@media (min-width: 768px) {
  .jm-faq-heading {
    margin-left: 16px;  /* more indent on larger screens */
    font-size: 1.5rem;  /* still smaller than your current heading size */
  }
}


/* Mobile-first: tighter spacing above/below FAQ section */
.jm-faq {
  margin: 28px auto 32px !important;  /* top / left&right / bottom */
}

/* Tablet & desktop: more breathing room */
@media (min-width: 768px) {
  .jm-faq {
    margin: 52px auto 52px !important;  /* top / left&right / bottom */
  }
}




/* Main hero heading: "J-M SUPPLIES RC Parts Store" */
.jm-hero-heading {
  /* Desktop / tablet defaults
     (color and base font size still controlled by theme settings) */
  margin-bottom: 0.50rem !important;
  text-align: center;
}

/* Kits tagline: "Model-specific RC stainless screw kits & RC bearing kits..." */
/* Default (desktop / tablets) */
.jm-hero-tagline {
  font-size: 20px;        /* desktop size */
  line-height: 1.4;
  max-width: 42rem;
  margin: 0.35rem auto 0.85rem;
  text-align: center;
}

/* Trust block: "Trusted by RC Enthusiasts Worldwide" */
.jm-hero-trust {
  /* Make this feel like a supporting badge, not another main hero */
  font-size: 1.1rem;           /* a bit smaller than hero heading/tagline */
  line-height: 1.3;
  margin-bottom: 1rem;
  text-align: center;
}

/* Mobile-only overrides */
@media (max-width: 767px) {
  /* Heading: "J-M SUPPLIES RC Parts Store" */
  .jm-hero-heading {
    font-size: 42px !important;  /* adjust this number to taste */
    line-height: 1.2;
    padding: 0 2rem;             /* breathing room on narrow screens */
    margin-bottom: 0.8rem !important;  /* MORE space below heading */
  }

  /* Tagline: "Model-specific RC stainless screw kits & RC bearing kits..." */
  .jm-hero-tagline {
    font-size: 22px !important;  /* mobile size; tweak if you want smaller */
    line-height: 1.4;
    padding: 0 2rem;             /* side padding on mobile */
    margin-top: 1.0rem !important;          /* EXTRA space above tagline */
    margin-bottom: 0.85rem;
  }

  /* Trust line: "Trusted by RC Enthusiasts Worldwide" */
  .jm-hero-trust {
    font-size: 1rem;
  }
}

/* Callout on Search & Shop page linking back to the Hub */
.jm-hub-callout {
  margin: 24px auto;          /* center horizontally, space above/below */
  padding: 30px 24px;         /* more space between text and edges */
  max-width: 880px;           /* don't let it get too wide on desktop */
  box-sizing: border-box;
}

/* Slightly refine heading + paragraph inside the callout */
.jm-hub-callout h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.25rem;
}

.jm-hub-callout p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.5;
}

/* Mobile: keep it centered with good gutters, but left-align text */
@media (max-width: 767px) {
  .jm-hub-callout {
    margin: 20px auto;              /* keep the box centered */
    padding: 24px 24px;             /* extra inner padding */
    width: calc(100% - 24px);       /* little gap from screen edges */
    text-align: left;               /* text alignment for the box */
    box-sizing: border-box;
  }

  .jm-hub-callout h3,
  .jm-hub-callout p {
    text-align: left;               /* keep heading + text left aligned */
  }
}


/* Mobile-only fine-tune: center badge, then nudge slightly left */
@media (max-width: 767px) {
  .jm-pdp-trust-card .essential-banners-block {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;

    /* tiny visual nudge left so it feels perfectly centered */
    transform: translateX(-2px);
  }
}


/* Mobile-only fine-tune: center Shipping & Returns card, nudge slightly left */
@media (max-width: 767px) {
  .jm-pdp-trust-card .jm-pdp-ship-wrap {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;

    /* tiny visual nudge left so it feels perfectly centered */
    transform: translateX(-2px);
  }
}





/* =========================================
   J-M SUPPLIES — CTA stack (ATC + Shop Pay + more options)
   ========================================= */

/* Base stack: vertical, consistent spacing */
.jm-pdp-panel .jm-pdp-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* children stretch to same width */
  gap: 8px;
}

/* Make all main CTAs the same width */
.jm-pdp-panel .jm-pdp-cta-stack .et-product-form__cart-submit,
.jm-pdp-panel .jm-pdp-cta-stack .shopify-payment-button__button,
.jm-pdp-panel .jm-pdp-cta-stack .shopify-payment-button__more-options {
  width: 100% !important;    /* full width inside the right card */
  max-width: 100%;
  box-sizing: border-box;
}

/* Desktop / tablet: slightly narrower for a refined look */
@media (min-width: 768px) {
  .jm-pdp-panel .jm-pdp-cta-stack {
    align-items: flex-start;  /* stack anchored left in the card */
  }

  .jm-pdp-panel .jm-pdp-cta-stack .et-product-form__cart-submit,
  .jm-pdp-panel .jm-pdp-cta-stack .shopify-payment-button__button,
  .jm-pdp-panel .jm-pdp-cta-stack .shopify-payment-button__more-options {
    max-width: 320px;         /* adjust 300–360px to taste */
  }
}

/* Mobile: use full card width, but clean edges */
@media (max-width: 767px) {
  .jm-pdp-panel .jm-pdp-cta-stack .et-product-form__cart-submit,
  .jm-pdp-panel .jm-pdp-cta-stack .shopify-payment-button__button,
  .jm-pdp-panel .jm-pdp-cta-stack .shopify-payment-button__more-options {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}


/* J-M SUPPLIES — Wishlist button alignment inside PDP panel */

/* Wrapper inside the right-hand PDP card */
.et-product-page .jm-pdp-panel .swym-btn-container.swym-inject {
  display: flex !important;
  justify-content: flex-start !important;  /* lines up with other CTAs */
  width: 100% !important;
  margin-top: 10px !important;
}

/* Make the wishlist button behave like a proper CTA */
.et-product-page .jm-pdp-panel .swym-btn-container .swym-button.swym-add-to-wishlist {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;      /* center label inside button */
  flex: 1 1 auto !important;
  max-width: 320px !important;             /* match ATC / Shop Pay width */
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Mobile: let it go full width across the card */
@media (max-width: 767px) {
  .et-product-page .jm-pdp-panel .swym-btn-container.swym-inject {
    justify-content: stretch !important;
  }

  .et-product-page .jm-pdp-panel .swym-btn-container .swym-button.swym-add-to-wishlist {
    max-width: 100% !important;
  }
}

/* Mobile: tiny left nudge for CTA stack */
@media (max-width: 767px) {
  .jm-pdp-panel .jm-pdp-cta-stack {
    align-items: stretch;          /* keep full width */
    transform: translateX(-3px);   /* subtle visual nudge left */
  }
}


/* Quantity field refinement inside PDP panel */
.jm-pdp-panel .et-product-form__item--quantity {
  max-width: 130px;           /* adjust 110–150px to taste */
}

/* Mobile: make sure it stays snug on the left */
@media (max-width: 767px) {
  .jm-pdp-panel .et-product-form__item--quantity {
    margin-left: 0;
    margin-right: 0;
  }

  .jm-pdp-panel .et-product-form__item--quantity input#Quantity {
    width: 100%;
    text-align: left;         /* keeps it “form-like” not “centered gimmick” */
  }
}



/* =========================================
   J-M SUPPLIES — Desktop/Tablet CTA column
   Align ATC, Shop Pay, More options, Wishlist
   ========================================= */
@media (min-width: 768px) {

  /* 1) Treat the CTA wrapper as a vertical stack */
  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* 2) Give ATC, Shop Pay block, and Wishlist block the same column width */
  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack > .et-product-form__cart-submit,
  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack > .shopify-payment-button,
  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack > .swym-button-bar {
    width: 100% !important;
    max-width: 320px !important;   /* tweak 300–360px to taste */
    margin: 0 !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
  }

  /* 3) Ensure Shop Pay + More payment options behave inside that width */
  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack .shopify-payment-button {
    display: block !important;
  }

  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack .shop-pay-wallet-button {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack .shopify-payment-button__more-options {
    display: block !important;
    text-align: left !important;  /* keep link text left-aligned */
    margin-top: 4px !important;
  }

  /* 4) Wishlist: use same column width and align with stack */
  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack .swym-button-bar {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 !important;
  }

  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack .swym-btn-container.swym-inject {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .et-product-page .jm-pdp-panel .et-product-form__item--submit.jm-pdp-cta-stack .swym-button.swym-add-to-wishlist {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}


@media (min-width: 768px) {
  .et-product-page .jm-pdp-panel
  .et-product-form__item--submit.jm-pdp-cta-stack
  .swym-button.swym-add-to-wishlist .swym-wishlist-cta {
    display: block !important;
    width: 100% !important;
    text-align: center !important;  /* centers the text inside the button */
  }
}

@media (min-width: 768px) {
  .et-product-page .jm-pdp-panel
  .et-product-form__item--submit.jm-pdp-cta-stack
  .shopify-payment-button__more-options {
    margin-left: 6px !important;    /* small indent to the right */
  }
}


/* J-M SUPPLIES — Fine control for wishlist text alignment (desktop/tablet) */
@media (min-width: 768px) {

  /* Make sure the button itself is nicely centered in our 320px column */
  .et-product-page .jm-pdp-panel
  .et-product-form__item--submit.jm-pdp-cta-stack
  .swym-button.swym-add-to-wishlist {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;  /* text starts at the left edge */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Text offset inside the button — CHANGE THIS to move left/right */
  .et-product-page .jm-pdp-panel
  .et-product-form__item--submit.jm-pdp-cta-stack
  .swym-button.swym-add-to-wishlist .swym-wishlist-cta {
    display: inline-block !important;
    width: auto !important;
    text-align: left !important;

    /* 👇 This is your “slider” — increase to push text right, decrease to bring it left */
    padding-left: 20px !important;
  }
}



/* Desktop / tablet: slightly tighter but still vertically centered */
@media (min-width: 768px) {
  .jm-product-model-collection .jm-collection-link {
    padding-top: 13px;     /* increase this to push text down a bit */
    padding-bottom: 12px;  /* tweak for balance */
  }
}

/* J-M SUPPLIES — PDP SKU display */
.jm-pdp-sku {
  font-size: 0.85rem;
  color: #6B7280;          /* muted gray to avoid competing with price */
  margin: 0 0 6px;         /* tiny gap below */
}

.jm-pdp-sku-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}





/* =========================================
   J-M SUPPLIES — Mobile Sticky ATC Bar
   ========================================= */

/* Base styling (no display:none here) */
.jm-sticky-atc {
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .jm-sticky-atc {
    display: block !important;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    background: #111827;
    color: #ffffff;
    padding: 12px 12px; /* slimmer vertically than before */
    box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.35);
  }

  /* Price + ATC inline, centered as a group */
  .jm-sticky-atc-inner {
    display: flex;
    flex-direction: row;       /* horizontal layout */
    align-items: center;       /* vertical centering within bar */
    justify-content: center;   /* center group horizontally */
    gap: 14px;                 /* space between price and button */
  }

  .jm-sticky-atc-price {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
  }

  .jm-sticky-atc-btn {
    border: none;
    border-radius: 999px;
    padding: 7px 16px;         /* slightly smaller for shorter bar */
    background: #c70000;       /* J-M red */
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .jm-sticky-atc-btn.jm-sticky-atc-btn--clicked {
    transform: scale(0.97);
    opacity: 0.9;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  /* Adjust bottom padding so content isn't hidden, but a bit less now */
  body.template-product {
    padding-bottom: 52px;
  }
}


@media (max-width: 767px) {
  /* existing mobile sticky bar styles… */

  /* Hide Fits line on mobile to save height */
  .jm-sticky-atc-fits {
    display: none;
  }
}



/* J-M SUPPLIES — Sticky ATC “Added” state */
@media (max-width: 767px) {
  .jm-sticky-atc-btn--added {
    background: #16a34a;   /* green while showing ✅ Added */
  }
}





/* =========================================
   J-M SUPPLIES — Google Store Quality Badge
   Base styles (let Google control size)
   ========================================= */
.gcr-badge#___ratingbadge_0,
#___ratingbadge_0 {
  position: fixed !important;
  z-index: 2147483647 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* DO NOT force width/height on the iframe — let it expand naturally */
/* No #___ratingbadge_0 iframe width/height overrides here */

/* =========================================
   Mobile (<= 767px) — just position
   ========================================= */
@media (max-width: 767px) {
  .gcr-badge#___ratingbadge_0,
  #___ratingbadge_0 {
    right: 16px !important;
    bottom: 110px !important; /* just above sticky ATC bar */
  }
}

/* =========================================
   Desktop / Tablet (>= 768px) — just position
   ========================================= */
@media (min-width: 768px) {
  .gcr-badge#___ratingbadge_0,
  #___ratingbadge_0 {
    right: 16px !important;
    bottom: 170px !important; /* above desktop sticky bar */
  }
}








/* =========================================
   J-M SUPPLIES — Sticky ATC Bar (Desktop/Tablet)
   - Shows "Fits: [model]" above price
   - Price + ATC horizontally aligned
   - Easy knobs for bar height & font sizes
   ========================================= */
@media (min-width: 768px) {
  .template-product .jm-sticky-atc {
    display: block !important;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;

    background: #111827;
    color: #ffffff;

    /* 🔧 Bar height: increase/decrease these for thicker/thinner bar */
    padding: 30px 24px;             /* top/bottom, left/right */

    box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.35);
    font-size: 14px;
    line-height: 1.4;
  }

  .template-product .jm-sticky-atc-inner {
    display: flex;
    flex-direction: row;
    align-items: center;            /* vertical alignment for Fits + price + button */
    justify-content: center;        /* center the whole group */
    gap: 10px;                      /* 🔧 gap between price block and button */

    max-width: 640px;               /* 🔧 width of the pill in the middle */
    margin: 0 auto;
  }

  /* Left side: Fits line (top) + price (bottom) */
  .template-product .jm-sticky-atc-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .template-product .jm-sticky-atc-fits {
    font-size: 15px;                /* 🔧 adjust Fits font size */
    opacity: 0.9;
    margin-bottom: 2px;             /* space between Fits and price */
    white-space: nowrap;
  }

  .template-product .jm-sticky-atc-price {
    font-size: 18px;                /* 🔧 price font size */
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;

    /* 🔧 horizontal nudge: move price to the right */
    margin-left: 36px;  /* try 10–20px to taste */
  }

  @media (min-width: 768px) {
  .template-product .jm-sticky-atc-btn {
    border: none;
    border-radius: 999px;

    /* 🔧 button size */
    padding: 8px 22px;
    font-size: 16px;
    font-weight: 600;

    background: #c70000;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;

    /* 🔧 vertical nudge using margin instead of top */
    position: relative;
    top: 0;                 /* reset any previous top */
    margin-top: 0px !important;  /* negative = moves button higher */
  }
}


  .template-product .jm-sticky-atc-btn.jm-sticky-atc-btn--clicked {
    transform: scale(0.97);
    opacity: 0.9;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }


<style>
  /* Base button styling tune-up (non-destructive) */
  .jm-sticky-atc-btn {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }

  /* Hover: yellow highlight */
  .jm-sticky-atc-btn:hover {
    background-color: #ffd84d; /* warm yellow */
    color: #000;               /* good contrast on yellow */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
  }

  /* Horizontal shake keyframes */
  @keyframes jm-shake-horizontal {
    0%, 100% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(-4px);
    }
    40% {
      transform: translateX(4px);
    }
    60% {
      transform: translateX(-3px);
    }
    80% {
      transform: translateX(3px);
    }
  }

  /* Add this class via JS when we want the button to shake */
  .jm-sticky-atc-btn.jm-shake {
    animation: jm-shake-horizontal 0.5s ease-in-out;
  }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .jm-sticky-atc-btn {
      animation: none !important;
    }
  }
</style>




  /* Give room at the bottom so content isn't hidden behind the bar */
  body.template-product {
    padding-bottom: 80px;          /* 🔧 adjust if bar height changes a lot */
  }
}

@media (min-width: 768px) {
  /* 🔧 Vertical nudge for the whole Fits + price block */
  .template-product .jm-sticky-atc-info {
    position: relative;
    top: -2px;  /* negative = move block up, positive = move block down */
  }

  /* 🔧 Fine-tune spacing around the Fits line itself */
  .template-product .jm-sticky-atc-fits {
    margin-top: -10px;     /* space above the Fits line */
    margin-bottom: 2px;  /* space between Fits and price */
    line-height: 1.3;    /* tweak if you want tighter/looser text */
  }
}






/* ==============================
   Cart policy (keep as-is)
   ============================== */
.jm-cart-policy {
  background: #F1F6F9;
  color: #394867;
  border: 1px solid #d0dde4;
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  margin: 8px 0 10px;
  white-space: normal;
  word-break: normal;
}

.jm-desktop-sep {
  display: inline;
  margin: 0 6px;
  opacity: 0.7;
}

.jm-sep {
  display: inline;
  margin: 0 6px;
  opacity: 0.7;
}

.jm-mobile-br {
  display: inline;
}

/* Extra-small phones: slightly smaller text */
@media (max-width: 480px) {
  .jm-cart-policy {
    font-size: 13px;
  }

  .jm-desktop-sep {
    display: none; /* hide first bullet on tiny screens */
  }
}

/* Desktop-only (≥992px): keep policy on one line if there's room */
@media (min-width: 992px) {
  .jm-cart-policy {
    white-space: nowrap;
  }
}


/* Extra space above the main Checkout button on cart page */
.et-cart__footer__right-column .et-checkout-upsell {
  margin-top: 12px;   /* adjust to taste: 8, 12, 16… */
}





/* =========================================
   J-M SUPPLIES — PayPal Cart Message
   Strong centering + overflow protection
   ========================================= */

/* OUTER: centers the whole PayPal block on the cart */
.paypal-message-container-cart {
  display: flex;
  justify-content: center;     /* center horizontally */
  align-items: center;         /* vertically center inner if taller */
  margin: 10px auto 12px;      /* small space above/below */
  padding: 0 12px;             /* prevent hugging screen edges */
  max-width: 100%;             /* never wider than viewport */
 
}

/* INNER: clamp width so PayPal content stays compact */
.paypal-message-inner-cart {
  max-width: 360px;            /* 🔧 tweak wider/narrower if you like */
  width: 100%;
}

/* Make the PayPal widget itself behave like a responsive block */
.paypal-message-inner-cart > [data-pp-message] {
  display: block;
  width: 100%;
}

/* Optional: help center the internal PayPal content if they use flex */
.paypal-message-container-cart .message__content {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Mobile: slightly tighter layout */
@media (max-width: 480px) {
  .paypal-message-container-cart {
    margin: 8px auto 10px;
    padding: 0 8px;
  }

  .paypal-message-inner-cart {
    max-width: 320px;
  }
}

/* Desktop / tablet: keep it nicely centered without scaling tricks */
@media (min-width: 768px) {
  .paypal-message-container-cart {
    margin-top: 12px;
    margin-bottom: 14px;
  }
}


/* Extra space between announcement bar and cart header */
.et-cart-page-section .et-cart-section-header {
  margin-top: 30px;      /* 🔧 increase to 12–20px if you want more gap */
}



/* J-M SUPPLIES — Cart "Updated" pill */
.jm-cart-updated-pill {
  display: none;                 /* hidden by default */
  margin-top: 4px;               /* space under Update button */
  font-size: 30px;
  font-weight: 600;
  color: #16a34a;                /* green text */
}

.jm-cart-updated-pill.is-visible {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Optional: right-align under the button on desktop */
@media (min-width: 768px) {
  .jm-cart-updated-pill {
    float: right;
  }
}




/* ==============================
   J-M SUPPLIES — Cart PayPal banners
   ============================== */

/* Base container (shared desktop + mobile) */
.paypal-message-container-cart {
  display: flex;
  justify-content: center;        /* Center container */
  padding: 5px 5px;
  background-color: #003087;      /* PayPal blue */
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
  color: #ffffff;                 /* White text for contrast */
  max-width: 300px;               /* Constrain the width */
  margin: 0 auto;                 /* horizontal centering; vertical via classes below */
}

.paypal-message-wrapper-cart {
  display: inline-block;
  text-align: center;
  font-weight: bold;
  font-size: 3em;
}

/* ---------- DESKTOP / TABLET (≥768px) ---------- */
/* These values match your current look */
@media screen and (min-width: 768px) {
  .paypal-message-top {
    margin-top: 15px;
    margin-bottom: -20px;
  }

  .paypal-message-bottom {
    margin-top: -55px;
    margin-bottom: 15px;
  }

  .paypal-message-wrapper-cart {
    transform: scale(1.8);       /* Scale on desktop */
    transform-origin: center;
  }
}

/* ---------- MOBILE (<768px) ---------- */
/* Tweak these numbers as needed */
@media screen and (max-width: 767px) {
  .paypal-message-top {
    margin-top: 10px;   /* 🔧 space above top PayPal on mobile */
    margin-bottom: 6px; /* 🔧 space below top PayPal on mobile */
  }

  .paypal-message-bottom {
    margin-top: -20px;   /* 🔧 space above bottom PayPal on mobile */
    margin-bottom: 18px;/* 🔧 space below bottom PayPal on mobile */
  }

  /* Optional: slightly smaller scale on mobile */
  .paypal-message-wrapper-cart {
    font-size: 2.4em;
    transform: none;
  }
}


/* ==============================
   J-M SUPPLIES — PayPal micro-copy (cart, mobile-only)
   ============================== */

/* Default: hidden (desktop/tablet) */
.jm-paypal-microcopy {
  display: none;
}

/* Mobile-only: show + style */
@media screen and (max-width: 767px) {
  .jm-paypal-microcopy {
    display: block;
    text-align: center;
    font-size: 13px;       /* 🔧 micro-copy font size */
    line-height: 1.4;
    margin-top: 6px;       /* 🔧 space ABOVE micro-copy (under bottom banner) */
    margin-bottom: 14px;   /* 🔧 space BELOW micro-copy before next content */
    color: #111827;        /* 🔧 text color – readable on white background */
    opacity: 0.9;
  }
}


/* ==============================
   J-M SUPPLIES — PayPal banner spacing (Product Page)
   Add margin ABOVE the PayPal "Buy now, pay later" banner
   ============================== */

/* Tablet & Desktop */
@media (min-width: 768px) {
  .template-product .paypal-message-container {
    margin-top: 20px !important;      /* 🔧 desktop top spacing */
    margin-bottom: 1px;    /* small breathing room below */
  }


  /* Hide cart PayPal banner by default */
.paypal-cart-mobile-only {
  display: none;
}

/* Show + tighten spacing on mobile only */
@media (max-width: 749px) {
  .paypal-cart-mobile-only {
    display: block;
    text-align: center;
    margin-top: 8px;   /* slightly tighter than inline 12px if you want */
    margin-bottom: 4px;
  }
}




/* === Drawer footer layout overrides (stack + order) === */
.jm-cart-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px; /* a bit tighter than before */
}

/* Default order for *all* children so nothing floats in weird spots */
.jm-cart-footer > * {
  order: 10;
}

/* 1. Subtotal pill at the top of the footer */
.jm-cart-footer .jm-subtotal-row {
  order: 1;
}

/* 2. Assurance + trust lines directly under subtotal */
.jm-cart-footer .jm-cart-assurance,
.jm-cart-footer .jm-cart-trust {
  order: 2;
}

/* 3. PayPal block – catch both wrapper and raw [data-pp-message] */
.jm-cart-footer .jm-cartdrawer-paypal-wrap,
.jm-cart-footer [data-pp-message] {
  order: 3;
}

/* 4. (If you ever add a dedicated Checkout button in the footer) */
.jm-cart-footer .jm-cart-checkout-btn {
  order: 4;
}

/* 5. "View Cart & Checkout" link at the very bottom */
.jm-cart-footer .jm-cart-view-link {
  order: 5;
  text-align: center;
  width: 100%;
}




/* Mobile-only: compress cart drawer footer so products have more room */
@media (max-width: 749px) {

  /* Footer itself: smaller padding + tighter gap */
  .jm-cart-footer {
    padding-top: 6px !important;
    padding-bottom: 8px !important;
    gap: 4px; /* was 8px */
  }

  /* Subtotal pill: small bottom margin but not huge */
  .jm-cart-footer .jm-subtotal-row {
    margin-bottom: 4px;
  }

  /* Assurance + trust lines: smaller font + tighter spacing */
  .jm-cart-footer .jm-cart-assurance,
  .jm-cart-footer .jm-cart-trust {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
  }

  /* PayPal wrapper: pull it closer, remove big margins */
  .jm-cart-footer .jm-cartdrawer-paypal-wrap {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }

  /* "View Cart & Checkout" link: keep it compact */
  .jm-cart-footer .jm-cart-view-link {
    margin-top: 4px;
    margin-bottom: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 13px;
  }
}



/* Default: no forced break (desktop/tablet) */
.jm-why__mobile-break {
  display: none;
}

/* Mobile: force line break before the store name */
@media (max-width: 767px) {
  .jm-why__mobile-break {
    display: block;
  }
}




/* Hub CTA card on model collections — base styles */
.jm-compat-hub-cta {
  box-sizing: border-box;
  width: 100%;
  max-width: 960px;
  margin: 32px auto 56px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f4f5f8;
  border: 1px solid #e0e2e6;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* First line: question (bold) */
.jm-compat-hub-cta__q {
  font-weight: 600;
  margin: 0 0 4px 0;
}

/* Second line: answer */
.jm-compat-hub-cta__a {
  margin: 0;
}

/* Link styling inside CTA */
.jm-compat-hub-cta a {
  color: #c70000;
  font-weight: 600;
  text-decoration: none;
}

.jm-compat-hub-cta a:hover {
  text-decoration: underline;
}


/* Mobile override for Hub CTA — force styles on small screens */
@media screen and (max-width: 767px) {
  body .jm-compat-hub-cta {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 12px 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #f4f5f8 !important;
    border: 1px solid #e0e2e6 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  body .jm-compat-hub-cta__q {
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
  }

  body .jm-compat-hub-cta__a {
    margin: 0 !important;
  }

  body .jm-compat-hub-cta a {
    color: #c70000 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  body .jm-compat-hub-cta a:hover {
    text-decoration: underline !important;
  }
}





/* === RC Product FAQs (Screw Kits) page === */

.jm-rc-faqs {
  background-color: #f4f4f4;     /* light grey page background */
  padding: 24px 0 40px;
}

.jm-rc-faqs__outer {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;              /* side breathing room on mobile */
}

.jm-rc-faqs__card {
  background-color: #ffffff;
  padding: 32px 40px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

/* Title & headings */
.jm-rc-faqs__title {
  color: #b50407;                /* J-M red */
  font-size: 2rem;
  margin: 0 0 20px;
  text-align: center;
}

.jm-rc-faqs__intro {
  margin: 8px 0 16px;
}

.jm-rc-faqs h3 {
  color: #04689b;
  margin-top: 28px;
  margin-bottom: 8px;
}

/* Body text & blockquotes */
.jm-rc-faqs p {
  line-height: 1.6;
  margin: 8px 0;
}

.jm-rc-faqs blockquote {
  background-color: #f9f9f9;
  border-left: 3px solid #b50407;
  margin: 8px 0 16px;
  padding: 10px 15px;
  border-radius: 5px;
  font-style: italic;
}

/* Links */
.jm-rc-faqs a {
  color: #b50407;
  text-decoration: none;
  transition: color 0.2s;
}

.jm-rc-faqs a:hover {
  color: #033b66;
  text-decoration: underline;
}

/* Buttons at the bottom */
.jm-rc-faqs__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

/* Force white text, even if global link styles fight us */
.jm-rc-faqs__buttons .jm-rc-faqs__btn,
.jm-rc-faqs__buttons .jm-rc-faqs__btn:link,
.jm-rc-faqs__buttons .jm-rc-faqs__btn:visited {
  display: inline-block;
  background-color: #c70000;
  color: #ffffff !important;          /* <— hard override */
  padding: 10px 22px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.jm-rc-faqs__buttons .jm-rc-faqs__btn:hover,
.jm-rc-faqs__buttons .jm-rc-faqs__btn:focus {
  background-color: #940000;
  color: #ffffff !important;
  text-decoration: none;
}


/* Mobile tweaks */
@media (max-width: 767px) {
  .jm-rc-faqs__card {
    padding: 24px 16px 28px;
  }

  .jm-rc-faqs__title {
    font-size: 1.6rem;
  }
}




/* Hub helper card under RC Product FAQs */
.jm-faq-hub-helper-faq {
  box-sizing: border-box;
  max-width: 800px;
  margin: 24px auto 40px;
  padding: 16px 20px;
  border-radius: 10px;
  background: #e8eaf1;
  border: 1px solid #d5d8e2;
  line-height: 1.7;
  font-size: 0.98rem;
}

.jm-faq-hub-helper-faq__q {
  margin: 0 0 4px 0;
  font-weight: 600;
}

.jm-faq-hub-helper-faq__a {
  margin: 0;
}

.jm-faq-hub-helper-faq a {
  color: #c70000;
  font-weight: 600;
  text-decoration: none;
}

.jm-faq-hub-helper-faq a:hover {
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 767px) {
  .jm-faq-hub-helper-faq {
    width: 88%;
    max-width: 440px;
    margin: 24px auto 32px;
    padding: 12px 14px;
    font-size: 1.02rem;
    line-height: 1.65;
  }
}



/* J-M SUPPLIES — Reserve space for PayPal message logo */
.message__logo-container,
.message__logo-container img {
  display: inline-block;
  width: 24px;   /* or 32px if it looks squished */
  height: 32px;
}




/* =========================================
   J-M SUPPLIES — Reserve space for product media
   to reduce CLS without changing image behavior
   ========================================= */

/* Mobile: give the media group a minimum height so the layout
   doesn’t jump when the main image loads */
@media (max-width: 767px) {
  .et-product-single__media-group {
    min-height: 320px;  /* adjust 280–360px to taste */
  }
}

/* Tablet / Desktop: slightly taller reserved space */
@media (min-width: 768px) {
  .et-product-single__media-group {
    min-height: 420px;  /* tweak up/down based on how tall images look */
  }
}





/* === J-M SUPPLIES — Same-brand models strip (FINAL) === */


/* Pills: wrap cleanly, left-align content inside */
.jm-same-brand-models .jm-tile{
  max-width: 100%;
  white-space: normal;
  align-items: flex-start;
  text-align: left;
}

/* Prevent long tokens from blowing out pills */
.jm-same-brand-models .jm-title,
.jm-same-brand-models .jm-meta{
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Stronger hover (desktop) */
@media (min-width: 992px){
  .jm-same-brand-models .jm-tile:hover{
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
    transform: translateY(-3px);
    border-color: rgba(0,0,0,0.28);
  }
}




/* ===== J-M SUPPLIES — Siblings header indent (BULLETPROOF MOBILE) ===== */

/* Desktop/tablet: normal indent via padding (works fine for you already) */
#jm-same-brand-models .jm-head,
#jm-same-brand-models .jm-subtext{
  box-sizing: border-box;
  padding-left: 18px !important;
  padding-right: 18px !important;
  text-align: left;
}

/* Keep title left + “See all →” right */
#jm-same-brand-models .jm-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#jm-same-brand-models .jm-heading{ margin: 0 !important; }
#jm-same-brand-models .jm-subtext{ margin: 6px 0 10px 0 !important; }
#jm-same-brand-models .jm-seeall{ white-space: nowrap; }

/* MOBILE: force a visible indent even if the theme zeroes padding */
@media (max-width: 749px){
  #jm-same-brand-models .jm-head,
  #jm-same-brand-models .jm-subtext{
    padding-left: 0 !important;              /* don’t fight theme padding resets */
    padding-right: 0 !important;
    transform: translateX(18px) !important;  /* physically shifts the text */
    width: calc(100% - 18px) !important;     /* prevents right-side overflow */
  }
}


/* === J-M SUPPLIES — Siblings strip spacing tweaks === */
#jm-same-brand-models{
  margin-top: 40px !important;     /* space ABOVE “More ___ models” */
  margin-bottom: 40px !important;  /* space AFTER the sibling tiles */
}

/* Optional: give the tiles area a bit more breathing room below */
#jm-same-brand-models .jm-grid{
  padding-bottom: 20px !important;
}

@media (min-width: 992px){
  #jm-same-brand-models{
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
}


#jm-cart-drawer .jm-cart-item-link:hover {
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
}





/* =========================================================
   RELATED PRODUCTS: Center ONLY the compare-at (crossed-out) price
   Scope: #shopify-section-related-products ONLY
   ========================================================= */

#shopify-section-related-products .price__compare{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center; /* harmless, keeps it consistent */
}

#shopify-section-related-products .price__compare dd{
  margin: 0; /* prevents default <dd> offset in some themes */
}

#shopify-section-related-products .price__compare s.price-item--regular{
  display: inline-block; /* ensures clean centering inside flex */
}




.et-scroll-to-top.scrollup{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  right: 34px !important;  /* bigger = more to the LEFT */
  bottom:130px !important; /* bigger = higher UP */
}

@media (max-width: 767px){
  .et-scroll-to-top.scrollup{
    right: 20px !important;
    bottom: 80px !important;
  }
}





/* ================================
   JM Launch Page Template Styles
   Targets: templates/page.launch.liquid
   ================================ */

.jm-launch {
  max-width: 980px;
  margin: 0 auto;
  padding-top: 18px;
  padding-bottom: 40px;
}

/* Header */
.jm-launch__header {
  margin: 14px 0 18px;
}

.jm-launch__header h1 {
  margin: 0 0 10px;
  line-height: 1.15;
}

.jm-launch__sub {
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: 0.92;
}

/* CTA row */
.jm-launch__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.jm-launch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.08s ease, opacity 0.12s ease, background-color 0.12s ease;
  user-select: none;
}

.jm-launch__btn:active {
  transform: scale(0.98);
}

/* Primary + Secondary buttons */
.jm-launch__btn--primary {
  background: #c70000; /* J-M red */
  color: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}

.jm-launch__btn--primary:hover {
  opacity: 0.92;
}

.jm-launch__btn--secondary {
  background: rgba(0,0,0,0.04);
  color: inherit;
  border: 1px solid rgba(0,0,0,0.10);
}

.jm-launch__btn--secondary:hover {
  background: rgba(0,0,0,0.06);
}

/* Content area */
.jm-launch__content {
  margin-top: 14px;
}

/* FAQ block */
.jm-launch__faq {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.jm-launch__faq h2 {
  margin: 0 0 12px;
  line-height: 1.2;
}

/* Details accordion styling */
.jm-launch__faq details {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(0,0,0,0.02);
}

.jm-launch__faq details[open] {
  background: rgba(0,0,0,0.03);
}

.jm-launch__faq summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  outline: none;
}

.jm-launch__faq summary::-webkit-details-marker {
  display: none;
}

.jm-launch__faq summary::after {
  content: "＋";
  float: right;
  font-weight: 900;
  opacity: 0.7;
}

.jm-launch__faq details[open] summary::after {
  content: "－";
}

.jm-launch__faq p {
  margin: 10px 0 0;
  line-height: 1.55;
  opacity: 0.95;
}

/* Mobile tweaks */
@media (max-width: 749px) {
  .jm-launch {
    padding-left: 12px;
    padding-right: 12px;
  }

  .jm-launch__cta {
    gap: 8px;
  }

  .jm-launch__btn {
    width: 100%;
  }
}





/* ==========================================================
   JM: Ecom Turbo 4.1 — Enterprise Header Shell (Desktop Only)
   Result: 1200px shell, logo left, menu true-centered, icons right
   Fixes: post-load shift, Bootstrap col offsets, logo collapse
   Notes: Stable 3-zone grid; safe logo micro-nudge via image transform
   ========================================================== */
@media (min-width: 992px) {

  /* --- SHELL (1200px) --- */
  .et-header-section .et-header .navbar {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;

    /* More space above the menu rows */
    padding: 12px 24px 6px 0;

    display: grid !important;
    grid-template-columns: 200px 1fr 200px !important;
    align-items: center !important;
    column-gap: 16px !important;

    min-height: 78px;
    overflow: visible !important;
  }

  /* --- Neutralize Bootstrap grid widths/padding that fight us --- */
  .et-header-section .et-header .navbar > a.navbar-brand,
  .et-header-section .et-header .navbar > #navbarSupportedContent,
  .et-header-section .et-header .d-none.d-lg-flex.et-header__icons,
  .et-header-section .et-header .navbar-collapse {
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- LEFT ZONE: LOGO (layout box) --- */
  .et-header-section .et-header .navbar > a.navbar-brand {
    grid-column: 1 !important;
    justify-self: start !important;

    display: flex !important;
    align-items: center !important;

    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;

    max-inline-size: none !important;

    padding-left: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
  }

  .et-header-section .et-header .navbar > a.navbar-brand.col-6,
  .et-header-section .et-header .navbar > a.navbar-brand.col-lg-3 {
    padding-left: 0 !important;
  }

  /* --- LOGO IMAGE (visual only) --- */
  .et-header-section .et-header .navbar > a.navbar-brand img.et-header__logo-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    max-height: 70px !important;
    object-fit: contain !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: translateX(-48px);
    transform-origin: left center;
  }

  /* --- CENTER ZONE: MENU --- */
  .et-header-section .et-header .navbar > #navbarSupportedContent {
    grid-column: 2 !important;
    justify-self: center !important;

    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* ✅ JM: Add breathing room below the wrapped menu rows (super safe) */
  .et-header-section .et-header .navbar > #navbarSupportedContent{
    padding-bottom: 12px !important; /* try 4–10px */
  }

  /* UL: ensure it's really a wrap container so row-gap applies */
  .et-header-section .et-header #navbarSupportedContent .navbar-nav {
    display: flex !important;
    flex-wrap: wrap !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
    width: auto !important;

    column-gap: 14px !important; /* horizontal spacing between items */
    row-gap: 2px !important;     /* vertical spacing between rows */
  }

  /* Remove mr-auto/ml-auto behavior completely */
  .et-header-section .et-header #navbarSupportedContent .navbar-nav.mr-auto,
  .et-header-section .et-header #navbarSupportedContent .navbar-nav.ml-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Kill any default vertical margins on items */
  .et-header-section .et-header #navbarSupportedContent .navbar-nav .nav-item,
  .et-header-section .et-header #navbarSupportedContent .navbar-nav li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Links: keep 3 rows, reduce vertical “air” without looking cramped */
  .et-header-section .et-header #navbarSupportedContent .navbar-nav .nav-link {
    padding: 2px 6px !important;  /* top/bottom + left/right */
    line-height: 1.6 !important;  /* your chosen sweet spot */
    white-space: nowrap;
  }

  /* --- RIGHT ZONE: ICONS --- */
  .et-header-section .et-header .d-none.d-lg-flex.et-header__icons {
    grid-column: 3 !important;
    justify-self: end !important;

    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px;
    white-space: nowrap;
  }

  /* --- Custom search row below header matches shell --- */
  .et-header-section .unique-search-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6px 24px 0 0;
    box-sizing: border-box;
  }

  .et-header-section .et-header #navbarSupportedContent .navbar-nav .nav-link{
    display: inline-flex !important;
    align-items: center !important;
  }

}