/* =========================================
   Responsive home hero (two covers)
   Mobile <= 750px
   Desktop > 750px
   ========================================= */
.wp-block-cover__image-background {
    border-radius: 0 !important;
}
.gb-hero{
  margin-bottom: 20px !important;
}

/* Default: show desktop */
.gb-hero--desktop{ display: block !important; }
.gb-hero--mobile{ display: none !important; }

/* Mobile */
@media (max-width: 750px){
  .gb-hero--desktop{ display: none !important; }
  .gb-hero--mobile{ display: block !important; }
}

/* Optional: button style to match your site */
.gb-hero a.wp-block-button__link{
  background: #c3aed6 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* =========================================
   Shopify-like HERO (Cover block)
   - full width
   - big height desktop + mobile
   - dark "pill" subtitle overlay
   ========================================= */

/* Make the hero section span full width (break out of theme containers) */
.gb-hero,
.gb-hero .wp-block-cover{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Height like your screenshots */
.gb-hero .wp-block-cover{
  min-height: 520px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 750px){
  .gb-hero .wp-block-cover{
    min-height: 620px !important;
  }
}

/* Ensure the background image covers nicely */
.gb-hero .wp-block-cover__image-background,
.gb-hero .wp-block-cover__video-background{
  object-fit: cover !important;
}

/* Center content like Shopify */
.gb-hero .wp-block-cover__inner-container{
  max-width: 1200px !important;
  padding: 0 18px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Headline styling */
.gb-hero .wp-block-heading{
  color: #fff !important;
  font-weight: 700 !important; /* you requested 700 site-wide */
  line-height: 1.05 !important;
  margin: 0 0 12px !important;
  font-size: 50px !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5),
               0 0 16px rgba(255, 255, 255, 0.4),
               0 0 24px rgba(255, 255, 255, 0.2) !important;
}

/* Shopify-like subtitle pill
   IMPORTANT: add a Paragraph block for subtitle and give it class "gb-hero-pill" */
.gb-hero .gb-hero-pill{
  display: inline-block !important;
  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Button style */
.gb-hero a.wp-block-button__link{
  background: #c3aed6 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 16px 28px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* =========================================
   HERO: fix vertical centering + mobile crop
   ========================================= */

/* Full bleed */
.gb-hero,
.gb-hero .wp-block-cover{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Make the cover a real "hero" box with height */
.gb-hero .wp-block-cover{
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;

  /* ensure the inner container can be vertically centered */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Desktop height */
@media (min-width: 751px){
  .gb-hero .wp-block-cover{
    min-height: 520px !important;
  }
}

/* Mobile: fixed height to force trimming/cropping */
@media (max-width: 750px){
  .gb-hero .wp-block-cover{
    height: 520px !important;     /* trim happens because height is fixed */
    min-height: 520px !important; /* some themes override height */
  }
}

/* Background image must cover */
.gb-hero .wp-block-cover__image-background,
.gb-hero .wp-block-cover__video-background{
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Mobile: natural height (no forced crop) */
@media (max-width: 750px){
  .gb-hero .wp-block-cover{
    height: auto !important;
    min-height: 0 !important;
  }

  .gb-hero .wp-block-cover__image-background,
  .gb-hero .wp-block-cover__video-background{
    object-position: center center !important;
  }
}

/* CRITICAL: remove Gutenberg "constrained" layout behavior and give full height */
.gb-hero .wp-block-cover__inner-container{
  /* override WP layout styles that prevent full-height centering */
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 18px !important;

  /* take the full hero height so vertical centering works */
  min-height: inherit !important;
  height: 100% !important;

  /* true center */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 12px !important;
}

/* If WP adds extra margins to blocks inside the hero */
.gb-hero .wp-block-cover__inner-container > *{
  margin: 0 !important;
}

/* Subtitle pill (your paragraph class) */
.gb-hero .gb-hero-pill{
  display: inline-block !important;
  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* CTA button */
.gb-hero a.wp-block-button__link{
  background: #c3aed6 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 16px 28px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* Hero button – Shopify style */
.gb-hero .wp-block-button__link{
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
}

/* Make sure multi-line text looks correct on mobile */
.gb-hero .wp-block-button__link br{
  display: none !important;
}

/* Hero paragraph shadow */
.gb-hero p,
.gb-hero .wp-block-cover__inner-container p{
  text-shadow: 
    0px 0px 3px rgba(0, 0, 0, 0.7) !important;
}

/* Hide breadcrumbs everywhere (fallback) */
.storefront-breadcrumb,
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb,
.rank-math-breadcrumb,
.breadcrumb,
.breadcrumbs{
  display: none !important;
}

/* =========================================================
   Homepage comparison table: What makes us special
   Shortcode: [gb_home_comparison]
========================================================= */

.gb-tabellon{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fffbfc;
  padding: 30px 0 50px;
  margin-bottom: 30px;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.gb-tabellon__inner{
  width: 100%;
  max-width: 100%;
  padding-left: 80px;
  padding-right: 80px;
  box-sizing: border-box;
}

.gb-tabellon__heading{
  margin: 0 auto 15px !important;
  text-align: center !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.gb-tabrow{
  display: flex;
  width: 100%;
  max-width: 1200px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 auto;
  box-sizing: border-box;
  font-weight: 700 !important;
}

.gb-tabcell{
  background: #fff;
  font-size: 15px !important;
  width: 100%;
  padding: 10px 10px;
  line-height: 120%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-weight: 700 !important;
  border-left: 2px solid #c3aed6;
  border-bottom: 2px solid #c3aed6;
}

.gb-tabrow:first-of-type .gb-tabcell{
  border-top: 2px solid #c3aed6;
}

.gb-tabcell:last-child{
  border-right: 2px solid #c3aed6;
}

.gb-brand{
  color: #000;
}

.gb-brand img{
  display: block;
  max-width: 100%;
  height: 10px !important;
  width: auto !important;
  box-shadow: none !important;
}

.gb-other{
  color: #a2a2a2;
}

.gb-title{
  font-weight: 600 !important;
}

.gb-empty{
  background: #fff;
}

.gb-tabicon{
  display: block;
  box-shadow: none !important;
}

.gb-tabicon--check{
  width: 25px;
  height: 25px;
  fill: #c3aed6;
}

.gb-tabicon--cross{
  width: 20px;
  height: 20px;
  fill: #ff0000;
  stroke: #ff0000;
}

/* If the table comes directly after the homepage hero, remove the gap */
.home .entry-content > .wp-block-cover.gb-hero.gb-hero--mobile + .gb-tabellon,
.home .entry-content > .wp-block-cover.gb-hero.gb-hero--desktop + .gb-tabellon,
.home .entry-content > .gb-home-hero + .gb-tabellon{
  margin-top: 0 !important;
}

.home .entry-content > .wp-block-cover.gb-hero.gb-hero--mobile,
.home .entry-content > .wp-block-cover.gb-hero.gb-hero--desktop,
.home .entry-content > .gb-home-hero{
  margin-bottom: 0 !important;
}

@media (max-width: 749px){
  .gb-tabellon__inner{
    padding-left: 16px;
    padding-right: 16px;
  }

  .gb-tabcell{
    font-size: 13px !important;
    padding: 10px 6px;
  }

  .gb-tabellon__heading{
    font-size: 22px !important;
  }
}

/* =========================================================
   Homepage product rows
   Shortcode: [gb_products_more]
========================================================= */

.gb-products-row{
  width: 100%;
  margin: 0 0 34px;
}

.gb-products-row .woocommerce{
  width: 100%;
}

.gb-products-row ul.products{
  display: grid !important;
  grid-template-columns: repeat(var(--gb-cols, 4), minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.gb-products-row ul.products::before,
.gb-products-row ul.products::after{
  content: none !important;
  display: none !important;
}

.gb-products-row ul.products li.product{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
  text-align: left !important;
}

.gb-products-row ul.products li.product a{
  text-align: left !important;
  text-decoration: none !important;
}

.gb-products-row ul.products li.product img{
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.gb-products-row ul.products li.product .woocommerce-loop-product__title{
  display: block !important;
  margin: 8px 0 4px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-align: left !important;
}

.gb-products-row ul.products li.product .price{
  display: block !important;
  color: var(--gb-primary, #1cbcff) !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.gb-products-row .star-rating{
  margin-left: 0 !important;
  margin-right: auto !important;
}

.gb-view-more-wrap{
  margin: 18px 0 50px !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

.gb-view-more-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 70px !important;
  height: 46px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  background: #c3aed6 !important;
  color: #fff !important;
  font-family: var(--gb-font, "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

.gb-view-more-btn:hover,
.gb-view-more-btn:focus{
  background: #ab8ec5 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (max-width: 749px){
  .gb-products-row ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .gb-products-row{
    margin-bottom: 28px;
  }

  .gb-view-more-wrap{
    margin: 18px 0 38px !important;
  }
}

@media (min-width: 750px) and (max-width: 989px){
  .gb-products-row ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Hero text selection color */
.gb-hero ::selection,
.wp-block-cover ::selection{
  background: rgba(171, 142, 197, 0.45);
  color: #fff;
}

.gb-hero ::-moz-selection,
.wp-block-cover ::-moz-selection{
  background: rgba(171, 142, 197, 0.45);
  color: #fff;
}

/* Shadow only around product image */
.home ul.products li.product img,
.home .gb-products-row ul.products li.product img,
.home .woocommerce ul.products li.product img {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important;
}

body.home #content.site-content {
  padding-bottom: 0 !important;
}