/* ==========================================================================
   Kunlim - custom styles
   Loaded by kunlim-custom.php. Delete both files to remove entirely.
   --------------------------------------------------------------------------
   v2 (10 Oct 2026) - estate review F1: the gift-voucher form on treatment
   pages, the floating language badge, and the header button that made every
   page scroll sideways on laptops. Tested on the Mac copy first.
   v1 - pipeline test only.
   ========================================================================== */

:root {
  --kunlim-css-loaded: 2;
}

/* Header "Connexion / Inscription" button: its box was 656px wide and pushed every page sideways. */
.elementor-element-9f6069e,
.elementor-element-9f6069e .elementor-widget-container {
  max-width: 100% !important;
}
.elementor-element-9f6069e .elementor-button-wrapper {
  width: auto !important;
  max-width: 100% !important;
}

/* Treatment pages, all widths: quantity and button keep a normal height instead of stretching beside the voucher fields. */
body.single-product form.cart {
  align-items: flex-end !important;
  gap: 12px;
}
body.single-product form.cart .quantity,
body.single-product form.cart .quantity input,
body.single-product form.cart .single_add_to_cart_button {
  height: auto !important;
  align-self: flex-end;
}
body.single-product form.cart .single_add_to_cart_button {
  min-height: 52px;
  padding: 12px 22px !important;
  line-height: 1.2 !important;
}

/* Home page slider: its slides reached past the right edge and made the page scroll sideways. */
.elementor-element-0e24be3,
.elementor-element-0e24be3 .elementor-slides-wrapper {
  overflow: hidden !important;
}

/* Anything else that pokes past the page edge (a home-page heading is designed 93px wider than the page) is clipped
   instead of making the whole page scroll sideways. "clip" keeps sticky headers working, unlike "hidden". */
html, body {
  overflow-x: clip;
}

/* Language badge: bottom-left instead of top-left, so it never sits on a price or a title. */
#gt_float_wrapper {
  top: auto !important;
  bottom: 16px !important;
  left: 16px !important;
}

/* Treatment pages up to tablet width: the section holding the voucher form was pulled up 128px for the
   wide desktop layout, and on phones and tablets it rode over the text above it. */
@media (max-width: 1024px) {
  body.single-product .elementor-element-31fa741 {
    margin-top: 0 !important;
  }
}

/* Treatment pages, phones and small tablets: the voucher form in one column. */
@media (max-width: 767px) {
  body.single-product form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px;
  }
  body.single-product form.cart > * {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
  }
  body.single-product form.cart .quantity {
    display: none !important;            /* one voucher at a time; the basket still allows changing it */
  }
  body.single-product form.cart .single_add_to_cart_button {
    min-height: 52px;
    padding: 12px 20px !important;
    line-height: 1.2 !important;
  }
  body.single-product .elementor-widget-woocommerce-product-add-to-cart {
    margin-top: 12px !important;
    position: relative;
    clear: both;
  }
  body.single-product .woo-vou-fields-wrapper input[type="text"],
  body.single-product .woo-vou-fields-wrapper input[type="email"],
  body.single-product .woo-vou-fields-wrapper textarea {
    width: 100% !important;
    font-size: 16px;                     /* stops iPhones zooming in when a field is tapped */
  }
  /* Labels above the boxes instead of squeezed beside them. */
  body.single-product .woo-vou-recipient-delivery-method td.label,
  body.single-product .woo-vou-recipient-delivery-method td.value {
    display: block;
    width: 100%;
    padding: 4px 14px !important;
  }
  body.single-product .woo-vou-recipient-delivery-method td.value {
    padding-bottom: 12px !important;
  }
  #gt_float_wrapper {
    transform: scale(.8);
    transform-origin: bottom left;
  }
}