/* ==========================================================================
   Edglow - responsive pass
   Wider, full-bleed sections on desktop; clean single-column stacking on
   phones; and no horizontal overflow anywhere.
   ========================================================================== */

/* ------------------------------------------------- never scroll sideways --- */

/* NOTE: the clip lives on the page wrapper, not on html/body. A clip on the
   root also clips position:fixed elements, which cut the sticky social rail
   off at the right edge. */
html,
body {
  max-width: 100%;
}

.wd-page-content,
.wd-footer,
.wd-prefooter {
  overflow-x: clip;
}

img,
video,
iframe,
svg { max-width: 100%; }

/* Wide content scrolls inside itself instead of pushing the page. */
.wd-page-content table,
.woocommerce table.shop_table,
.woocommerce-cart-form,
.wd-entry-content pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Full-bleed blocks measure the real viewport, so a scrollbar cannot make
   them 15px too wide. --edg-vw is published by the front-end script. */
.edg-page,
.edg-footer-pro {
  width: var(--edg-vw, 100vw);
  max-width: var(--edg-vw, 100vw);
  margin-left: calc(var(--edg-vw, 100vw) / -2);
}

/* --------------------------------------------------------- wide screens --- */

@media (min-width: 1500px) {
  :root { --wd-container-w: 1440px; }

  .container,
  .wd-content-layout.container,
  main#main-content.container { max-width: 1440px; }

  .edg-footer-pro__container { max-width: 1440px; }

  .edg-page__hero > *,
  .edg-page__band > *,
  .edg-page__cta > * { max-width: 1440px; }

  .edg-blogs__inner,
  .edg-blogs__head,
  .edg-blogs__grid,
  .edg-blogs__foot { max-width: 1440px; }
}

@media (min-width: 1800px) {
  :root { --wd-container-w: 1600px; }

  .container,
  .wd-content-layout.container,
  main#main-content.container,
  .edg-footer-pro__container,
  .edg-page__hero > *,
  .edg-page__band > *,
  .edg-page__cta > * { max-width: 1600px; }
}

/* ------------------------------------------------------------- tablets --- */

@media (max-width: 1024px) {
  .wd-page-content .container,
  main#main-content.container { padding-inline: 24px; }

  /* Product grids: two clean columns rather than three cramped ones. */
  .wd-products.wd-grid-g { --wd-col-md: 2; }
}

/* -------------------------------------------------------------- phones --- */

@media (max-width: 767px) {
  .wd-page-content .container,
  main#main-content.container { padding-inline: 16px; }

  /* Two product cards per row keeps browsing quick on a phone. */
  .wd-products.wd-grid-g { --wd-col-sm: 2; --wd-gap-sm: 12px; }

  /* Comfortable tap targets everywhere. */
  .wd-products .wd-product .edg-buy-now--loop,
  .wd-products .wd-product .edg-atc,
  .button,
  .wp-element-button,
  .woocommerce a.button,
  .woocommerce button.button { min-height: 46px; }

  /* Single product: full-width action buttons. */
  .single-product .edg-buy-now,
  .single-product .single_add_to_cart_button { width: 100%; }

  /* Cart / checkout tables stack instead of squeezing. */
  .woocommerce-cart table.cart thead { display: none; }

  /* Headings should never overflow their box. */
  h1, h2, h3, .wd-entities-title, .product_title { overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .wd-products.wd-grid-g { --wd-col-sm: 1; }
}

/* ==========================================================================
   Woodmart "Stretch container" correction
   The theme sets the negative margin and width with JavaScript from the
   document width. When a stretched container holds another stretched one the
   offset is applied twice, so the block drifts left and spills off screen.
   ========================================================================== */

/* Desktop is left exactly as the theme builds it - the nested stretch there
   is what breaks the inner container out of the boxed wrapper, so touching
   it pushes the whole section off to the right.

   On phones and tablets the container already fills the screen, so the
   stretch offsets have nothing to correct - they only push it off centre. */
@media (max-width: 1024px) {
  .wd-page-content .wd-section-stretch,
  .wd-page-content .wd-section-stretch.e-parent {
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .wd-page-content .wd-section-stretch > .e-con-inner {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* ------------------------------------------ mobile polish, whole site --- */

@media (max-width: 767px) {
  /* Latest insights sits closer to the footer instead of floating. */
  .edg-blogs { padding: 44px 0 40px; }
  .edg-blogs__head { margin-bottom: 26px; }

  /* Section headings scale down cleanly rather than wrapping mid-word. */
  .edg-page__h2,
  .edg-blogs__title { overflow-wrap: normal; hyphens: none; }

  /* Anything that lays itself out in fixed columns collapses safely. */
  .wd-page-content [class*="grid-template-columns"] { min-width: 0; }

  /* Elementor containers must not force a min width on small screens. */
  .wd-page-content .e-con,
  .wd-page-content .e-con-inner,
  .wd-page-content .elementor-widget-wrap { min-width: 0; max-width: 100%; }

  /* Hand-built homepage sections stay inside the screen and centred. */
  .edg-why,
  .edg-why__container,
  .edg-faq,
  .edg-glow,
  .edg-assure {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}

/* ------------------------------------------------ sensible touch sizing --- */

@media (hover: none) {
  .wd-nav a,
  .wd-tools-element > a,
  .edg-footer-links a,
  .edg-faq__q,
  .edg-cfaq__q { min-height: 40px; }
}