/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://onaunderscrubs.com
 Description:  GeneratePress Child Theme
 Author:       Ona
 Template:     generatepress
 Version:      1.0.0
*/

/* Size chart link hover style on Product Page */
.size-chart-link:hover {
    text-decoration: underline;
}

/* Hide default size dropdown */
table.variations select {
    display: none !important;
}

/* Size button container */
.size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

/* Individual size buttons */
.size-button {
    border: 1px solid #000;
    border-radius: 9px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    background: #fff;
    color: #000;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.size-button.selected {
    background: #000;
    color: #fff;
}

.size-button:hover {
    background: #000;
    color: #fff;
}

/* Hide WooCommerce clear variation link */
.reset_variations {
    display: none !important;
}

/* Size variation buttons */
.size-button {
    border: 1px solid #000;
    border-radius: 9px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    background: #fff !important;
    color: #000 !important;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

/* Selected state - filled black */
.size-button.selected {
    background: #000 !important;
    color: #fff !important;
}

/* Hover state - filled black */
.size-button:hover {
    background: #000 !important;
    color: #fff !important;
}

/* Hide WooCommerce clear variation link */
.reset_variations {
    display: none !important;
}

/* Fluent Forms field borders */
.ff-el-form-control {
    border: 1px solid #000 !important;
    border-radius: 4px !important;
}

/* Remove grey background on Fluent Forms field focus */
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
    background-color: #fff !important;
}

/* Shop Now button text and hover */
.gb-text-3f06178f {
    color: #fff !important;
}

.gb-text-3f06178f:hover {
    color: #fff  !important;
}

.gb-text-0725024c {
    color: #fff !important;
}

.gb-text-0725024c:hover {
    color: #fff  !important;
}

/* Rearrange the mobile account, cart and hamburger icons */
@media (max-width: 768px) {
    .nav-right,
    .nav-right .inside-navigation {
        flex-direction: row-reverse;
    }
}

/* Smaller icons and tighter spacing on very small screens */
@media (max-width: 350px) {
    .gb-container-33c18003 {
        column-gap: 4px !important;
    }

    .gb-container-d27dd35a {
        column-gap: 4px !important;
    }

    .gb-container-f6b01de3 svg {
        width: 16px !important;
        height: 16px !important;
    }

    .mobile-menu-control-wrapper svg {
        width: 16px !important;
        height: 16px !important;
    }

    .cart-contents svg {
        width: 16px !important;
        height: 16px !important;
    }

    .amount {
        font-size: 0.75rem !important;
    }
}

/* WooCommerce button and image border radius */
.woocommerce img,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
    border-radius: 4px !important;
}

/* Disable secondary image swap on mobile */
@media (max-width: 767px) {
    .inside-wc-product-image .secondary-image {
        display: none !important;
    }
}

.video-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh; /* or whatever height you want */
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-hero > .gb-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit; /* makes it stretch to match the parent */
  text-align: center;
  gap: 20px;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* push your content above the video */
.video-hero > *:not(.bg-video) {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .gb-element-755aa1bb.video-hero {
    min-height: 50vh;
  }

  .bg-video {
    object-fit: cover;
    object-position: 20% center; /* pulls left toward the subject */
  }
}

.woocommerce button[name="update_cart"] {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
}

.woocommerce button[name="update_cart"]:hover {
  background-color: #9b9b9b !important;
  color: #ffffff !important;
}