/*
 * CEIBAG Responsive Global Base
 * Safe, broad rules for Elementor, Astra, WooCommerce and the CEIBAG CRM.
 * This file does not change the brand colors or desktop design.
 */
:root {
  --ceibag-rg-gutter: clamp(16px, 4vw, 28px);
  --ceibag-rg-radius: clamp(14px, 3vw, 22px);
  --ceibag-rg-tap: 44px;
}

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }

img,
svg,
video,
canvas,
iframe,
object,
embed,
lottie-player,
.e-lottie__container,
.elementor-widget-lottie svg {
  max-width: 100%;
}

img,
video,
canvas,
svg { height: auto; }

/* Flex/Grid children need min-width:0 so text does not force overflow. */
.e-con,
.e-con-inner,
.elementor-element,
.elementor-widget,
.elementor-widget-container,
.elementor-location-header,
.elementor-location-footer,
.elementor-location-single,
.elementor-location-archive {
  min-width: 0;
}

.e-con > *,
.e-con-inner > *,
.elementor-container > *,
.elementor-row > * {
  min-width: 0;
}

.elementor-widget-text-editor,
.elementor-widget-heading,
.elementor-heading-title,
.elementor-widget-icon-box,
.elementor-widget-image-box,
.woocommerce,
.ceibag-crm-workspace {
  max-width: 100%;
}

.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-icon-box-title,
.elementor-image-box-title,
.woocommerce,
.ceibag-crm-workspace {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

input,
select,
textarea,
button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  max-width: 100%;
}

input,
select,
textarea { width: 100%; }

textarea { resize: vertical; }

button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  min-height: var(--ceibag-rg-tap);
  white-space: normal;
}

table {
  max-width: 100%;
  border-collapse: collapse;
}

/* Tables remain real tables on desktop and become horizontally scrollable on small screens. */
@media (max-width: 1024px) {
  .elementor,
  .elementor-section,
  .elementor-top-section,
  .e-con,
  .e-con-inner {
    max-width: 100%;
  }

  .e-con.e-con-boxed > .e-con-inner {
    width: min(100%, calc(100% - (2 * var(--ceibag-rg-gutter))));
  }

  .elementor-widget-lottie,
  .elementor-widget-image,
  .elementor-widget-video,
  .elementor-widget-html,
  .elementor-widget-shortcode {
    max-width: 100%;
  }

  .woocommerce table.shop_table,
  .ceibag-crm-workspace table,
  .ceibag-responsive-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  :root { --ceibag-rg-gutter: 16px; }

  body { min-width: 0; }

  .elementor-heading-title {
    max-width: 100%;
    line-height: 1.05;
  }

  .elementor-widget-image img,
  .elementor-widget-image-box img,
  .elementor-widget-icon-box img {
    width: auto;
    max-width: 100%;
  }

  .elementor-button-wrapper,
  .woocommerce .button,
  .woocommerce-page .button {
    max-width: 100%;
  }

  /* WooCommerce checkout/order-pay: one clean column on phones. */
  .woocommerce .col2-set,
  .woocommerce-page .col2-set,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-order-pay #order_review,
  .woocommerce-order-pay #payment {
    width: 100%;
    max-width: 100%;
    float: none;
    clear: both;
  }

  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2,
  .woocommerce-page .col2-set .col-1,
  .woocommerce-page .col2-set .col-2,
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    width: 100%;
    max-width: 100%;
    float: none;
    margin-inline: 0;
  }

  .woocommerce-checkout-review-order,
  .woocommerce-checkout-payment,
  .woocommerce-order-pay #payment,
  .ceibag-crm-workspace,
  .ceibag-dashboard,
  .ceibag-portal {
    max-width: 100%;
    border-radius: var(--ceibag-rg-radius);
  }

  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
  }

  .ceibag-crm-workspace .ceibag-kpi-grid,
  .ceibag-crm-workspace .ceibag-dashboard-grid,
  .ceibag-crm-workspace .ceibag-grid {
    grid-template-columns: 1fr !important;
  }
}