/* Product page buy box on phones, for visitors (admins preview v2 in pdp-v2.css, body.por-pdp-v2):
   row 1 = quantity stepper + wishlist heart, row 2 = full-width add-to-cart button.
   Variable products: the attribute rows (Color) sit above, 16px from the stepper. */

@media (max-width: 768px) {
  body.single-product:not(.por-pdp-v2) .product-blok-button,
  body.single-product:not(.por-pdp-v2) .main-howuse__footer-product {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.single-product:not(.por-pdp-v2) .main-howuse__footer-product {
    margin: 0;
  }

  /* styles.css gives form.cart flex + gap: 8px !important */
  body.single-product:not(.por-pdp-v2) .product-blok-button form.variations_form {
    display: block !important;
    gap: 0 !important;
    width: 100%;
    margin: 0;
  }

  body.single-product:not(.por-pdp-v2) .product-blok-button table.variations {
    margin: 0 0 16px;
  }

  body.single-product:not(.por-pdp-v2) .product-blok-button .single_variation_wrap {
    width: 100%;
    margin: 0;
  }

  body.single-product:not(.por-pdp-v2) .product-blok-button form.cart:not(.variations_form),
  body.single-product:not(.por-pdp-v2) .product-blok-button .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 0 !important; /* 0-height children (Stripe, hidden inputs) would add row gaps */
    width: 100%;
    margin: 0;
  }

  /* Everything else in the form (Stripe/Klarna containers, hidden inputs) goes below, full width. */
  body.single-product:not(.por-pdp-v2) .product-blok-button form.cart:not(.variations_form) > :not(.quantity):not(.por-wishlist-single):not(.single_add_to_cart_button),
  body.single-product:not(.por-pdp-v2) .product-blok-button .woocommerce-variation-add-to-cart > :not(.quantity):not(.por-wishlist-single):not(.single_add_to_cart_button) {
    flex: 0 0 100%;
    order: 4;
    min-width: 0;
  }

  body.single-product:not(.por-pdp-v2) .product-blok-button .quantity {
    order: 1;
    flex: 1 1 0;
    height: 56px;
    margin: 0;
  }

  body.single-product:not(.por-pdp-v2) .product-blok-button .quantity input.qty {
    width: 100% !important;
    height: 56px;
    padding: 0 56px;
    text-align: center;
  }

  body.single-product:not(.por-pdp-v2) .product-blok-button .qty-minus,
  body.single-product:not(.por-pdp-v2) .product-blok-button .qty-plus {
    width: 56px;
  }

  body.single-product:not(.por-pdp-v2) .product-blok-button .por-wishlist-single {
    order: 2;
    flex: 0 0 56px;
    height: 56px;
    margin: 0 0 0 10px;
  }

  body.single-product:not(.por-pdp-v2) .product-blok-button .por-wishlist-single .yith-add-to-wishlist-button-block {
    margin: 0;
  }

  /* html[lang="fr-FR"] … { padding: 0 30px !important } and padding: 0 60/68px in styles.css */
  html body.single-product:not(.por-pdp-v2) .product-blok-button .single_add_to_cart_button {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    height: 56px;
    margin: 10px 0 0;
    padding: 0 20px !important;
    justify-content: center;
    text-align: center;
  }
}

/* Breadcrumbs on phones (everyone): one 13px line at the cards' left edge, the product itself
   hidden (it repeats the H1; it stays in the HTML for Yoast), tight gaps so the photo moves up.
   Yoast markup: span > span(item) " > " span(item) … span.breadcrumb_last — the " > " text nodes
   are hidden with font-size: 0 and drawn again before each item. */
@media (max-width: 768px) {
  /* The header is fixed (bottom at 110px); the "Official partner" strip above it is in the flow and
     takes 1 or 2 lines depending on width and language, which moved the page under it by 18px.
     Reserve 2 lines (the space next to the header is empty anyway) so the crumbs land 10px under
     the header at every width: 50 (strip) + 50 (main) + 10 (section) + 10 (crumbs) = 120. */
  body.single-product .toplist {
    min-height: 50px;
    box-sizing: border-box;
  }

  body.single-product .page-single {
    padding-top: 10px;
  }

  body.single-product .breadcrumb-blok {
    margin: 0 0 10px;
    padding: 10px 0 0;
    text-align: left;
  }

  body.single-product .breadcrumb-blok > span {
    display: flex;
    align-items: baseline;
    min-width: 0;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
  }

  body.single-product .breadcrumb-blok > span > span {
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 18px;
    color: #8e97a7;
  }

  body.single-product .breadcrumb-blok > span > span + span::before {
    content: "\203A";
    margin: 0 6px;
  }

  /* Middle items give way first; "Home" and the parent category stay. */
  body.single-product .breadcrumb-blok > span > span:not(:first-child):not(:nth-last-child(2)) {
    flex-shrink: 1;
  }

  body.single-product .breadcrumb-blok > span > span:nth-last-child(2) {
    max-width: 70%;
  }

  body.single-product .breadcrumb-blok a {
    color: #4e5562;
  }

  body.single-product .breadcrumb-blok .breadcrumb_last {
    display: none;
  }
}