/*
 * WGE single product page tweaks. Loaded on is_product() only.
 */

/*
 * Hide the "There are no reviews yet." empty state.
 *
 * It is the first thing under the Reviews tab on a product nobody has reviewed,
 * which reads as a negative signal for no benefit. The review form directly
 * below it is left alone, so a customer can still write the first one.
 */
.woocommerce-noreviews {
  display: none;
}

/* --- related products --- */

.wge-related {
  margin-top: 40px;
}

.wge-related > h2 {
  font-family: bebas neue, sans-serif;
  font-size: 34px;
  letter-spacing: 2px;
  margin: 0 0 16px;
}

.wge-related ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

/*
 * style.css pins .related .woocommerce-LoopProduct-link to a 380px min-height,
 * sized for the old 4-across row. With 8 products the cards are narrower, so
 * let them size to their content instead.
 */
.wge-related .woocommerce-LoopProduct-link.woocommerce-loop-product__link {
  min-height: 0 !important;
}

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

/*
 * The card contents: top-aligned, with the button pinned to the bottom so the
 * buttons line up across a row whatever the title length.
 */
.wge-related ul.products li.product {
  justify-content: flex-start;
}

.wge-related ul.products li.product > .custom-cart-btn {
  margin-top: auto;
}

/*
 * Responsive columns live HERE, on the grid, and that is the whole point.
 *
 * The site's Additional CSS used to force `display: flex` on this list, which
 * beat the grid above it and silently made every `grid-template-columns` rule
 * inert — including this theme's. The visible result was four related products
 * laid out two-up on a 1440px desktop. Setting the columns per breakpoint on
 * the grid itself does what that CSS was trying to do, without a second layout
 * model fighting the first.
 */
@media only screen and (max-width: 1024px) {

  .wge-related ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .wge-related > h2 {
    font-size: 24px;
  }
}

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

  .wge-related ul.products {
    grid-template-columns: 1fr;
  }
}

/* --- "Be the first to review" -------------------------------------------
 * Shown only where a product has no ratings and comments are open
 * (inc/wge-ratings.php). Deliberately quiet: it is an invitation, not a CTA
 * competing with Add to Cart.
 */
.wge-no-rating {
    margin: 0 0 10px;
    font-size: 13px;
}

.wge-no-rating__link {
    color: #767676;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wge-no-rating__link:hover,
.wge-no-rating__link:focus {
    color: var(--gbl-primary-color, #a12324);
}

/* --- Quality claims (inc/wge-product-claims.php) -------------------------
 * Three claims directly under the price, above the short description. Kept to
 * a single compact row so it reads as an attribute of the price rather than a
 * separate feature block competing with Add to Cart.
 */
.wge-claims {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 16px;
    padding: 0;
    list-style: none;
}

.wge-claims li::before {
    content: none; /* style.css adds bullets to li in the summary column */
}

.wge-claim {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    color: #3d3d3d;
    font-size: 13px;
    line-height: 1.3;
}

.wge-claim__icon {
    flex: 0 0 auto;
    color: var(--gbl-primary-color, #a12324);
    fill: #fff;
}

.wge-claim__text {
    white-space: nowrap;
}

/* Below ~420px three nowrap items stop fitting on one line; let them stack
   rather than overflow the summary column. */
@media (max-width: 420px) {
    .wge-claims {
        gap: 8px 14px;
    }

    .wge-claim {
        font-size: 12.5px;
    }
}

/* --- Product tabs: no top margin ------------------------------------------
 * style.css sets this three times — 150px, 65px under 767px, and 8px later in
 * the file — which left a large, inconsistent gap above the Description /
 * Reviews strip. Overridden here rather than edited out of style.css, which is
 * otherwise untouched upstream CSS, and rtl.css carries the same three rules.
 * One override covers all of them: this file loads after both.
 */
.single-product div.product .woocommerce-tabs.wc-tabs-wrapper {
    margin-top: 0;
}

/* --- Availability (inc/wge-product-claims.php) ---------------------------
 * Moved here from the WGE Mobile UX plugin along with the markup. Nothing
 * about it was mobile-specific, so it carries no breakpoint.
 */
.wge-avail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    width: 100%;
    margin: 10px 0 0;
    font-size: 14px;
}

.wge-avail__in   { color: #1a7f37; font-weight: 600; }
.wge-avail__low  { color: #b26a00; font-weight: 600; }
.wge-avail__out  { color: #b3261e; font-weight: 600; }
.wge-avail__ship { color: #555; }

.wge-avail__in::before,
.wge-avail__low::before { content: "\2022 "; }

/* ==========================================================================
   Buy area, variations and embeds
   --------------------------------------------------------------------------
   Moved out of the site's customizer "Additional CSS". Most of it styles the
   quantity control from wc-quantity-plus-minus-button (`.qib-*`, `.wqpmb_*`) —
   a third-party plugin, so the theme is the right owner: it is this theme's
   product page the control sits on, and the plugin must stay updatable.
   ========================================================================== */

/* Embedded video in the description or short description: keep it inside the
   column and at a sane ratio rather than at whatever width the iframe declares. */
.woocommerce-Tabs-panel iframe,
.woocommerce-product-details__short-description iframe {
    max-width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
}

.woocommerce div.product form.cart {
    flex-wrap: wrap;
}

.single-product .summary.entry-summary .price {
    margin: 4px 0;
}

/* --- Quantity control + add to cart -------------------------------------- */

.qib-button-wrapper,
.single_add_to_cart_button.button,
.variations_button {
    max-width: 100% !important;
    min-height: 44px;
    height: auto;
}

.qib-button-wrapper {
    min-height: 44px;
    margin: 0 !important;
}

.qib-button-wrapper button {
    min-height: 44px;
}

.qib-button-wrapper button.qib-button,
.qib-button-wrapper div.quantity.wqpmb_quantity {
    height: auto !important;
}

.single-product .summary.entry-summary .cart div.quantity .qty,
.single_variation_wrap {
    width: 100% !important;
}

@media (min-width: 1024px) {

    .quantity input.input-text.qty.text {
        width: 80% !important;
    }

    .single_add_to_cart_button {
        width: 100%;
    }

    .qib-button-wrapper {
        overflow: hidden;
        max-width: 100% !important;
    }

    .qib-button-wrapper .qib-button {
        flex-shrink: 0;
        min-width: 44px;
        width: 44px;
    }

    .qib-button-wrapper .quantity.wqpmb_quantity {
        flex: 1;
        min-width: 0;
        max-width: 100%;
    }

    .qib-button-wrapper .quantity input.qty {
        width: 100% !important;
        min-width: 0;
    }
}

/* --- Variable products ---------------------------------------------------- */

.variations .label {
    display: none;
}

.reset_variations {
    display: none;
}

.variations {
    flex: 1;
}

.value select,
.variations,
.variations .value {
    max-width: 100%;
    min-width: 100% !important;
}

.variations_form {
    flex-wrap: wrap;
}

.product.product-type-variable,
.single_variation_wrap {
    display: flex !important;
    flex-wrap: wrap;
}

.woocommerce-variation-add-to-cart .button {
    position: static !important;
    z-index: 10;
    height: 44px;
}

/* --- Phone: the buy row becomes full-width stacked ------------------------ */

@media (max-width: 767px) {

    .single-product div.product .woocommerce-tabs.wc-tabs-wrapper {
        margin-top: 24px;
    }

    .single-product .summary.entry-summary form.cart {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: stretch;
    }

    body .qib-button-wrapper {
        float: none;
        flex: 0 0 100% !important;
        margin-right: 0;
    }

    .single-product .summary.entry-summary .cart .single_add_to_cart_button {
        flex: 0 0 100% !important;
        margin-top: 0;
    }

    .qib-button,
    .wqpmb_input_text {
        min-height: 44px;
        font-size: 18px;
    }

    .qib-button {
        min-width: 44px;
    }

    .woocommerce-page div.product div.summary {
        width: 100% !important;
    }

    .woocommerce-variation-add-to-cart.variations_button {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
}

/* --- The two-column product grid must be able to shrink -------------------
 * `div.product` is `grid-template-columns: repeat(2, 1fr)`, and `1fr` means
 * `minmax(auto, 1fr)` — the track cannot go below its content's min-content
 * width. The gallery (NHFF Gallery Slider) is 432px and `style.css` pins
 * `.product .summary { width: 310px !important }`, so between the point where
 * the layout stops stacking and about 810px the two tracks need 762px of a
 * 728px row. The result was 14px of horizontal scroll on the product page at
 * exactly 768px — iPad portrait.
 *
 * Letting the summary be fluid, capped at its old width, is enough: the gallery
 * keeps its 432px everywhere it fits, and only the text column gives way. The
 * cap is scoped to the two-column range so the stacked layout below it still
 * gets a full-width summary.
 */
@media (min-width: 768px) {

    .woocommerce div.product div.summary.entry-summary {
        width: auto !important;
        max-width: 310px;
        min-width: 0;
    }
}