/** Mobile featured image **/
.griffin-product-mobile-featured img {
  border-radius: 10px;
  margin-top: 40px;
}
/** Hero image **/
.griffin-product-hero-container {
  position: absolute;  /* behind content */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;       /* full viewport height */
  z-index: -1;         /* behind content */
}

.griffin-product-hero-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.griffin-product-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill container without distortion */
  object-position: center;  /* center the image both vertically and horizontally */
  display: block;
}


/** Product columns **/
.griffin-product-columns {
    height: 100vh;
}

/** Container floats above hero **/
.griffin-product-summary {
  background: #fff;                  
  padding: 40px;                    
  box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
  border-radius: 20px;              
  z-index: 1;                       
  position: relative;
  max-width: 600px;                 
  margin-left: auto;
  margin-right: auto;     
  margin-top: 20vh !important;
}

/* Mobile: hero back in flow and summary stacks below */
@media (max-width: 768px) {

  .wp-singular.sc_product-template .sc-template-wrapper {
    padding-top: 0 !important;
    margin-top: 0;
  }

  .griffin-product-hero-container {
    display: none; /* Hide hero on mobile */
    position: relative;
    height: 300px;
    overflow: hidden;
  }

  .griffin-product-hero-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .griffin-product-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center; /* focus on left side */
    display: block;
  }

  .griffin-product-summary {
    margin-top: 0 !important;
    padding: 30px;
  }

  .griffin-product-columns {
    height: auto;
  }

  /* Primary content */
  .griffin-product-content {
    padding: 0 25px !important;
  }
}


/* Desktop: Add site header overlay */
@media (min-width: 768px) {

  /* Hide mobile featured image */
  .griffin-product-mobile-featured {
    display: none;
  }

  /* Add a dark fading background behind the transparent header */
  .wp-singular.sc_product-template .site-header {
    position: relative; /* make sure it’s positioned for pseudo-element */
    z-index: 10; /* keep header above hero image */
  }

  /* Stronger dark fade behind transparent header */
  .wp-singular.sc_product-template .site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%; /* taller so the fade goes deeper into hero */
    background: linear-gradient(
      rgba(0, 0, 0, 0.95) 0%,   /* almost solid black at top */
      rgba(0, 0, 0, 0.6) 60%,   /* stays dark for a while */
      rgba(0, 0, 0, 0.0) 100%   /* fades to transparent */
    );
    pointer-events: none;
    z-index: -1;
  }
}