/* ==========================================================================
   Bottle Gases — Homepage redesign
   --------------------------------------------------------------------------
   Last-loaded homepage sheet for the owner-requested vibrant B2C direction:
   yellow/gold energy, blue/navy structure, clear shopping intent.

   Scope is intentionally `body.home` so product, cart and checkout pages keep
   the previous stability pass until they get their own visual review.
   ========================================================================== */

body.home {
  --bg-home-yellow-50: #FFF4D6;
  --bg-home-yellow-100: #FFE4B7;
  --bg-home-yellow-300: #FFBE52;
  --bg-home-yellow-500: #FBA002;
  --bg-home-yellow-600: #E3A419;

  --bg-home-blue-50: #EFF6FF;
  --bg-home-blue-100: #DCEBFF;
  --bg-home-blue-500: #2A6FB5;
  --bg-home-blue-600: #08203C;  /* rebrand 2026-05-27: aligned to brand navy */
  --bg-home-blue-700: #154F8C;
  --bg-home-olive: #08203C;  /* rebrand 2026-05-27: olive → navy */
  --bg-home-navy: #1F2235;
  --bg-home-ink: #07111F;

  /* Compatibility aliases: earlier sheets use --bg-brown-* heavily. On the
     homepage those now resolve to the approved blue/yellow ecommerce palette. */
  --bg-brown-50: var(--bg-home-blue-50);
  --bg-brown-100: var(--bg-home-blue-100);
  --bg-brown-200: #AFCBFF;
  --bg-brown-300: #79A8FA;
  --bg-brown-400: #3B86F6;
  --bg-brown-500: var(--bg-home-blue-600);
  --bg-brown-600: var(--bg-home-blue-700);
  --bg-brown-700: #093B88;
  --bg-brown-800: #072A66;
  --bg-brown-900: var(--bg-home-navy);

  --bg-orange-50: var(--bg-home-yellow-50);
  --bg-orange-100: var(--bg-home-yellow-100);
  --bg-orange-300: var(--bg-home-yellow-300);
  --bg-orange-500: var(--bg-home-yellow-500);
  --bg-orange-600: var(--bg-home-yellow-600);

  --wd-primary-color: var(--bg-home-blue-600);
  --wd-link-color: var(--bg-home-blue-600);
  --wd-link-color-hover: var(--bg-home-navy);
  --wd-bg-color: #F7FAFF;
  background: #F7FAFF;
}

/* Header: bright shopfront, not muted template chrome. */
body.home .whb-main-header {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(6, 29, 69, 0.08);
}

body.home .whb-row.whb-color-light:not(.whb-top-bar),
body.home .whb-row.whb-color-dark:not(.whb-top-bar) {
  background: #FFFFFF;
}

body.home .whb-header-bottom {
  background: var(--bg-home-yellow-500);
  color: var(--bg-home-navy);
  box-shadow: 0 1px 0 rgba(6, 29, 69, 0.10), 0 8px 24px rgba(6, 29, 69, 0.08);
}

body.home .whb-row.whb-header-bottom,
body.home .whb-row.whb-header-bottom.whb-color-dark,
body.home .whb-row.whb-header-bottom.whb-with-bg {
  background: var(--bg-home-yellow-500) !important;
  background-color: var(--bg-home-yellow-500) !important;
}

body.home .whb-header-bottom .wd-nav > li > a,
body.home .whb-header-bottom .main-nav > ul > li > a {
  color: var(--bg-home-navy);
  font-weight: 800;
}

body.home .whb-header-bottom .wd-nav > li:hover > a,
body.home .whb-header-bottom .main-nav > ul > li:hover > a {
  color: var(--bg-home-blue-700);
}

body.home .wd-tools-element .wd-tools-icon,
body.home .wd-tools-element .wd-tools-text {
  color: var(--bg-home-navy);
}

body.home .wd-header-cart .wd-tools-icon,
body.home .wd-header-cart .wd-tools-text {
  background: var(--bg-home-blue-700);
  color: #FFFFFF;
}

body.home .wd-search-form input[type="text"],
body.home .wd-search-form input[type="search"] {
  border: 2px solid rgba(7, 95, 224, 0.18);
  background: #FFFFFF;
}

body.home .wd-search-form button,
body.home .searchform .searchsubmit {
  background: var(--bg-home-blue-700);
  color: #FFFFFF;
}

/* Hero: full-bleed photo, readable poster headline, no template inset image. */
body.home .wd-slider {
  background: var(--bg-home-navy);
  overflow: hidden;
}

body.home .wd-slider .wd-slide {
  min-height: clamp(540px, 48vw, 720px);
  position: relative;
}

body.home .wd-slider .wd-slide-bg,
body.home .wd-slider .wd-slide-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.home .wd-slider .wd-slide-bg img {
  object-fit: cover;
  object-position: 62% center;
  filter: saturate(1.08) contrast(1.05);
}

body.home .wd-slider .wd-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 29, 69, 0.94) 0%, rgba(6, 29, 69, 0.78) 35%, rgba(7, 95, 224, 0.24) 64%, rgba(6, 29, 69, 0.12) 100%),
    radial-gradient(circle at 14% 20%, rgba(255, 210, 46, 0.18), transparent 30%);
}

body.home .wd-slider .wd-slide-container,
body.home .wd-slider .wd-slide-inner {
  position: relative;
  z-index: 4;
}

body.home .wd-slider .wd-slide-container {
  min-height: clamp(540px, 48vw, 720px);
  display: flex;
  align-items: center;
}

body.home .wd-slider .wd-slide-inner,
body.home .wd-slider .wpb-content-wrapper,
body.home .wd-slider .wpb_wrapper {
  max-width: 620px;
}

/* Remove the old Pets-style inset image from the slide content. */
body.home .wd-slider .wd-slide-container .wd-image {
  display: none !important;
}

body.home .wd-slider .title-wrapper {
  margin-bottom: 10px !important;
}

body.home .wd-slider .woodmart-title-container,
body.home .wd-slider .woodmart-title-container.title,
body.home .wd-slider h1,
body.home .wd-slider h2,
body.home .wd-slider h3,
body.home .wd-slider h4 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: #FFFFFF !important;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.45);
}

body.home .wd-slider .title-wrapper:first-child .woodmart-title-container,
body.home .wd-slider #wd-689b29579c302 .woodmart-title-container,
body.home .wd-slider #wd-689b29d70d60b .woodmart-title-container,
body.home .wd-slider #wd-689b2a73dda16 .woodmart-title-container {
  font-size: clamp(58px, 7.2vw, 102px) !important;
  line-height: 0.94 !important;
}

body.home .wd-slider #wd-689b287438029 .woodmart-title-container,
body.home .wd-slider #wd-689b29e24d842 .woodmart-title-container,
body.home .wd-slider #wd-689b2a81eb607 .woodmart-title-container {
  display: inline-block;
  width: auto;
  margin-top: 4px;
  padding: 8px 14px 7px;
  border-radius: 6px;
  background: var(--bg-home-yellow-500);
  color: var(--bg-home-navy) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(18px, 2vw, 28px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
  text-shadow: none;
}

body.home .wd-slider .wd-text-block {
  max-width: 560px;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.55 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

body.home .wd-slider .wd-text-block * {
  color: inherit !important;
}

body.home .wd-slider .btn,
body.home .wd-slider a.btn,
body.home #wd-689b277612267 a {
  min-height: 50px;
  padding: 15px 22px;
  border: 2px solid var(--bg-home-yellow-500) !important;
  border-radius: 6px;
  background: var(--bg-home-yellow-500) !important;
  color: var(--bg-home-navy) !important;
  font-family: var(--font-body) !important;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(255, 210, 46, 0.28);
}

body.home .wd-slider .btn:hover,
body.home .wd-slider a.btn:hover,
body.home #wd-689b277612267 a:hover {
  background: #FFE56F !important;
  border-color: #FFE56F !important;
  color: var(--bg-home-navy) !important;
}

body.home .wd-slider .wd-btn-icon img {
  filter: none;
}

body.home .wd-slider .wd-nav-arrows .wd-btn-arrow {
  background: #FFFFFF;
  color: var(--bg-home-blue-700);
  border: 1px solid rgba(6, 29, 69, 0.10);
  box-shadow: 0 8px 24px rgba(6, 29, 69, 0.18);
}

body.home .wd-slider .wd-nav-pagin-item span {
  background: rgba(255, 255, 255, 0.72);
}

body.home .wd-slider .wd-nav-pagin-item.wd-active span {
  background: var(--bg-home-yellow-500);
}

/* Homepage sections and commerce cards. */
body.home .main-page-wrapper,
body.home .site-content {
  background: #F7FAFF;
}

body.home .wd-tabs .wd-tabs-header .tabs-name.title,
body.home .wd-products-element > .wd-el-title.title,
body.home h4.slider-title.element-title {
  color: var(--bg-home-navy);
  letter-spacing: 0.01em;
}

body.home .wd-tabs .tabs-navigation-wrapper .wd-nav-tabs > li > a,
body.home .wd-tabs .wd-nav-tabs > li > a {
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--bg-home-navy);
  font-weight: 900;
  box-shadow: 0 1px 0 rgba(6, 29, 69, 0.08);
}

body.home .wd-tabs .wd-nav-tabs > li.wd-active > a,
body.home .wd-tabs .wd-nav-tabs > li.active > a,
body.home .wd-tabs .wd-nav-tabs > li > a:hover {
  background: var(--bg-home-blue-700) !important;
  color: #FFFFFF !important;
}

body.home .promo-banner,
body.home .promo-banner-wrapper {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(6, 29, 69, 0.16);
}

body.home .promo-banner .wrapper-content-banner {
  border-radius: 8px 0 0 8px;
}

body.home #wd-689b315b700b3 .wrapper-content-banner,
body.home #wd-689b32c4aaa39 .wrapper-content-banner,
body.home #wd-689b32f3a18c4 .wrapper-content-banner {
  background-color: var(--bg-home-navy);
}

body.home #wd-689b314d6fbd0 .wrapper-content-banner,
body.home #wd-689b305a0c322 .wrapper-content-banner,
body.home #wd-689b335be46dc .wrapper-content-banner {
  background-color: var(--bg-home-blue-700);
}

body.home #wd-689b3087dceed .wrapper-content-banner {
  background-color: var(--bg-home-yellow-500);
}

body.home #wd-689b3087dceed .banner-title,
body.home #wd-689b3087dceed .banner-subtitle {
  color: var(--bg-home-navy) !important;
}

body.home .promo-banner .banner-title {
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.02;
}

body.home .promo-banner .btn,
body.home .promo-banner a:not(.banner-link) {
  color: #FFFFFF;
  font-weight: 900;
  text-decoration-color: var(--bg-home-yellow-500);
  text-underline-offset: 5px;
}

body.home #wd-689b3087dceed .promo-banner a:not(.banner-link) {
  color: var(--bg-home-navy);
}

body.home .product-grid-item {
  border: 1px solid rgba(6, 29, 69, 0.10);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(6, 29, 69, 0.08);
}

body.home .product-grid-item:hover {
  box-shadow: 0 18px 42px rgba(6, 29, 69, 0.14);
}

body.home .product-grid-item .wd-entities-title,
body.home .product-grid-item .product-title {
  color: var(--bg-home-navy);
}

body.home .product-grid-item:hover .wd-entities-title,
body.home .product-grid-item:hover .product-title {
  color: var(--bg-home-blue-700);
}

body.home .price ins,
body.home .price > .amount,
body.home .amount {
  color: var(--bg-home-navy);
}

body.home .product-label.onsale,
body.home .onsale {
  background: var(--bg-home-yellow-500);
  color: var(--bg-home-navy);
}

body.home .bg-trust-pillars {
  margin: 0 auto 10px;
  padding: 22px 18px !important;
  border: 1px solid rgba(6, 29, 69, 0.10);
  border-top: 5px solid var(--bg-home-yellow-500);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 10px 28px rgba(6, 29, 69, 0.08);
}

body.home .bg-trust-pillars .bg-pillar > div:first-child {
  color: var(--bg-home-blue-600) !important;
}

body.home .bg-trust-pillars .bg-pillar div {
  color: var(--bg-home-navy);
}

body.home .wd-rs-68da1ae5e2d69 {
  background-color: var(--bg-home-blue-700) !important;
}

body.home .wd-rs-68da1ae5e2d69 .wd-marquee {
  color: #FFFFFF;
}

@media (max-width: 1024px) {
  body.home .wd-slider .wd-slide,
  body.home .wd-slider .wd-slide-container {
    min-height: 600px;
  }

  body.home .wd-slider .wd-slide-bg img {
    object-position: 68% center;
  }
}

@media (max-width: 767px) {
  body.home .whb-header-bottom {
    background: var(--bg-home-yellow-500);
  }

  body.home .wd-slider .wd-slide,
  body.home .wd-slider .wd-slide-container {
    min-height: 530px;
  }

  body.home .wd-slider .wd-slide::before {
    background:
      linear-gradient(180deg, rgba(6, 29, 69, 0.86) 0%, rgba(6, 29, 69, 0.68) 48%, rgba(6, 29, 69, 0.32) 100%),
      radial-gradient(circle at 16% 18%, rgba(255, 210, 46, 0.18), transparent 28%);
  }

  body.home .wd-slider .wd-nav-arrows,
  body.home .wd-slider .wd-nav-arrows.wd-slider-arrows {
    display: none !important;
  }

  body.home .wd-slider .wd-slide-container {
    align-items: flex-start;
    padding-top: 66px;
    padding-bottom: 46px;
  }

  body.home .wd-slider .wd-slide-inner,
  body.home .wd-slider .wpb-content-wrapper,
  body.home .wd-slider .wpb_wrapper {
    max-width: min(100%, 360px);
  }

  body.home .wd-slider .title-wrapper:first-child .woodmart-title-container,
  body.home .wd-slider #wd-689b29579c302 .woodmart-title-container,
  body.home .wd-slider #wd-689b29d70d60b .woodmart-title-container,
  body.home .wd-slider #wd-689b2a73dda16 .woodmart-title-container {
    font-size: clamp(42px, 13vw, 58px) !important;
  }

  body.home .wd-slider #wd-689b287438029 .woodmart-title-container,
  body.home .wd-slider #wd-689b29e24d842 .woodmart-title-container,
  body.home .wd-slider #wd-689b2a81eb607 .woodmart-title-container {
    font-size: 16px !important;
  }

  body.home .wd-slider .wd-text-block {
    margin-top: 18px !important;
    font-size: 15px !important;
  }

  body.home .wd-slider .btn,
  body.home .wd-slider a.btn,
  body.home #wd-689b277612267 a {
    min-height: 46px;
    padding: 13px 18px;
  }

  body.home .promo-banner .banner-title {
    font-size: clamp(24px, 8vw, 34px);
  }

  body.home .bg-trust-pillars {
    padding: 16px 12px !important;
  }
}