.home-banner-slider {
  display: flex !important;
  justify-content: center;
}

.home-page-banner-row {
  padding: 0 33px !important;
}

.home-page-banner-row {
  grid-template-columns: 231px 803px 231px;
  display: grid;
  gap: 0;
  padding: 0 20px;
}

.home-page-banner-row img {
  width: 100%;
  max-height: 680px;
}

.home-page-banner-row .center {
  max-width: 803px !important;
}

.home-page-2-row {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 0;
  padding: 10px 0;
}

.home-banner-slider .slick-dots {
  margin: 0 auto;
  max-width: 803px;
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex !important;
  justify-content: flex-end;
  gap: 5px;
  border-radius: 10px;
  padding-right: 20px;
  padding-bottom: 20px;
  list-style: none;
}

.home-banner-slider .slick-dots button {
  width: 12px;
  border: none;
  font-size: 0;
  height: 12px;
  background: #af111c !important;
  border-radius: 12px !important;
  opacity: .7;
}

.home-banner-slider .slick-active button {
  opacity: 1 !important;
}

.frontpage-container{
    max-width: 803px;
  margin: 0 auto;
  width: 100%;
  display: block;
}

.categories-container {
  margin-top: 25px;
}

.categories-container .categories-content {
  box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
  border-radius: 15px;
}

.categories-container .categories-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}

.categories-container .categories-row {
  padding: 15px 30px;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 10px;
}

.categories-container .categories-title h2 {
  font-family: bebas neue,sans-serif;
  font-size: 70px;
  margin-left: 20px;
  letter-spacing: 3px;
}

@media (min-width: 1200px) {
  .categories-container .categories-row .home-page-2-column img {
    width: 116px !important;
    height: 116px !important;
  }
}
.categories-container .categories-row .home-page-2-column img {
  width: 100%;
}

.categories-container .categories-row .home-page-2-column p {
  font-family: bebas neue,sans-serif;
  font-size: 18px;
  text-align: center;
  margin-top: 5px;
}

.partners-parent-row {
  display: grid;
  grid-template-columns: repeat(1,1fr);
  padding: 30px 0 80px;
  row-gap: 10px;
}

.partners-parent-row .partners-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}

.partners-parent-row .partners-row img {
  border-radius: 15px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
  max-width: 262px;
}

.bottom-banner img {
  width: 100%;
}

@media only screen and (max-width: 800px) {
    .home-page {
     padding: 0 10px;
    }

  .desktop, .slick-dots {
    display: none !important;
  }

  .site-branding img.custom-logo {
    width: 40px;
    height: 40px;
  }

    #masthead .site-branding img {
	 padding-right: 1px;
    }

  .home-page-banner-row {
    grid-template-columns: 1fr;
        padding: 0 0 !important;
  }

    .categories-container .categories-title h2 {
	font-size: 20px !important;
	letter-spacing: 1px;
    }

 .categories-container .categories-row {
    padding: 15px !important;
    grid-template-columns: repeat(3,1fr);
  }

  .home-page-2-column a {
    display: block;
  }

  .home-page-2-column img {
    height: 100%;
    }

  .categories-container .categories-row .home-page-2-column p {
    font-size: 14px;
  }

  .partners-parent-row {
    grid-template-columns: 1fr;
  }

  .partners-parent-row .partners-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
  }

  .partners-parent-row .partners-row img {
    width: 100% !important;
    object-fit: contain !important;
    max-height: 70px !important;
  }

}


/* ------------------------------------------------------------------
   WGE homepage: trust bar, product rows, brands button, SEO copy.
   Frontpage-only — this file is enqueued under is_front_page().
   ------------------------------------------------------------------ */

.wge-trust-bar {
  margin: 12px 0 4px;
}

.wge-trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

.wge-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: left;
  font-family: lato, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #2b2d2f;
}

.wge-trust-item svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--gbl-primary-color, #a12324);
  fill: #fff;
}

/* --- product rows --- */

.wge-product-row {
  margin-top: 28px;
}

.wge-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 2px solid #af111c;
  padding-bottom: 4px;
  margin-bottom: 14px;
}

.wge-row-title {
  font-family: bebas neue, sans-serif;
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0;
}

.wge-row-more {
  font-family: lato, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  color: #af111c;
}

/*
 * The cards are WooCommerce's own markup, so these rules only undo the shop
 * archive's sizing: style.css gives .woocommerce-LoopProduct-link a 490px
 * min-height, which is far too tall for a 190px-wide card in the 803px
 * frontpage container.
 */
.wge-row-products ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wge-row-products ul.products::before,
.wge-row-products ul.products::after {
  content: none;
}

.wge-row-products ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 8px 8px 12px;
}

.wge-row-products ul.products li.product > .woocommerce-LoopProduct-link {
  min-height: 0 !important;
  display: block;
}

/*
 * Target the thumbnail wrapper, not `img`. Loop thumbnails are now
 * wge_loop_product_thumbnail() output — a .wge-thumb span holding the primary
 * image plus an absolutely-positioned second one for the hover swap. A blanket
 * `li.product img { height:auto }` here outranks css/wge-product-card.css
 * (loaded earlier, lower specificity) and would collapse that overlay.
 */
.wge-row-products ul.products li.product .wge-thumb {
  width: 100%;
  margin: 0 auto 8px;
}

.wge-row-products h2.woocommerce-loop-product__title {
  min-height: 0;
  font-size: 14px;
  line-height: 1.25;
  padding: 0;
  margin: 0 0 6px;
}

.wge-row-products ul.products li.product .price {
  font-size: 15px;
  margin-bottom: 8px;
}

.wge-row-products ul.products li.product .star-rating {
  font-size: .62em;
  margin-bottom: 6px;
}

.wge-row-products .custom-cart-btn .button {
  margin-top: 0;
  width: 100%;
  font-size: 13px;
  padding: 8px 6px;
}

/* Quick view / wishlist overlay is unused on this site; keep it off the row. */
.wge-row-products .hover-area {
  display: none;
}

/* --- brands "see all" button --- */

/*
 * The homepage grid is six logos now, not twenty-four, so the 80px of bottom
 * padding the long wall needed just leaves a hole above the button.
 */
.partners-container .partners-parent-row {
  padding-bottom: 20px;
}

.wge-brands-more {
  display: flex;
  justify-content: center;
  margin: 0 0 45px;
}

.wge-button {
  display: inline-block;
  background: #af111c;
  color: #fff;
  font-family: lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 11px 26px;
  border-radius: 0;
}

.wge-button:hover,
.wge-button:focus {
  background: #8c0d16;
  color: #fff;
}

/* --- bottom SEO copy --- */

.wge-seo-copy {
  margin: 35px 0 45px;
}

.wge-seo-copy h1 {
  font-family: bebas neue, sans-serif;
  font-size: 38px;
  letter-spacing: 2px;
  line-height: 1.1;
  margin: 0 0 12px;
}

.wge-seo-copy p {
  font-family: lato, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #3a3a3a;
  margin: 0 0 12px;
}

.wge-seo-copy a {
  color: #af111c;
  text-decoration: underline;
}

@media only screen and (max-width: 800px) {

  .wge-trust-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
    font-size: 12px;
  }

  .wge-trust-item {
    justify-content: flex-start;
  }

  .wge-row-title {
    font-size: 24px;
  }

  /*
   * One swipeable line instead of a 2x2 grid.
   *
   * Four cards in two rows made each product row roughly twice as tall as it
   * needed to be, and three of those rows pushed everything below them off the
   * bottom of the phone. A single scrolling line keeps all four products
   * reachable — hiding two would have quietly removed half the merchandising —
   * while costing one row of height instead of two.
   *
   * The cards are sized so the third one is part-visible at rest: that sliver
   * is what tells a thumb the row scrolls. The row deliberately stays inside
   * the container — an earlier version bled past it with a negative margin,
   * which pushed the first card out of line with the row heading and gave the
   * whole document a horizontal scrollbar.
   */
  /*
   * `.woocommerce.wge-row-products`, not `.wge-row-products`: the WGE Mobile UX
   * plugin sets `.woocommerce ul.products { display: grid }` under 767px, which
   * has exactly the same specificity as the plain selector and loads after this
   * file — so the plain version lost, silently, and the row stayed a 2x2 grid.
   * The row wrapper carries both classes, so chaining them wins on specificity
   * rather than on load order.
   */
  .woocommerce.wge-row-products ul.products {
    /* !important is not decoration here: the plugin rule this overrides is
       itself `display: grid !important`, and an important declaration can only
       be beaten by another important one. This selector is the more specific of
       the two, so it wins the tie. Same reason on the card widths below, which
       the plugin pins to `width: 100% !important`. */
    display: flex !important;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .woocommerce.wge-row-products ul.products::-webkit-scrollbar {
    display: none;
  }

  .woocommerce.wge-row-products ul.products li.product {
    flex: 0 0 43%;
    width: 43% !important;
    max-width: 43% !important;
    scroll-snap-align: start;
  }

  .wge-brands-more {
    margin: 0 0 30px;
  }

  .wge-row-more {
    font-size: 11px;
  }

  .wge-seo-copy h1 {
    font-size: 26px;
  }
}

.wge-home-notices {
  margin-top: 20px;
}

.wge-home-notices .woocommerce-message,
.wge-home-notices .woocommerce-error,
.wge-home-notices .woocommerce-info {
  font-family: lato, sans-serif;
  font-size: 14px;
}

/* Banner behaviour below desktop. Moved out of the site's Additional CSS. */
@media only screen and (max-width: 1199px) {

  .home-page-banner .desktop {
    display: none !important;
  }

  .home-page-banner-row {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    justify-items: center !important;
  }

  .home-banner-slider .slick-dots {
    left: 0 !important;
    right: 0 !important;
  }
}