/* =========================================================
   BabyLife 2.7.5 — site-wide responsive hardening
   Presentation only. No URL/content/SEO/Woo data mutation.
   ========================================================= */

/* 1) Viewport and flex/grid safety ------------------------------------------------ */
html,
body {
  max-width: 100%;
}
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
}

.blsc-site,
.blsc-main,
.blsc-shell,
.blsc-content-shell,
main,
article,
.entry-content,
.woocommerce,
.woocommerce-page,
.woocommerce div.product,
.woocommerce div.product > *,
.elementor,
.elementor-element,
.elementor-widget,
.elementor-widget-container,
.e-con,
.e-con-inner {
  min-width: 0;
}

/* Never let user/content media widen the page. */
.entry-content img:not(.emoji):not(.wp-smiley),
.entry-content video,
.entry-content canvas,
.entry-content iframe,
.entry-content embed,
.entry-content object,
.blsc-elementor-content img:not(.emoji):not(.wp-smiley),
.blsc-elementor-content video,
.blsc-elementor-content canvas,
.blsc-elementor-content iframe,
.blsc-elementor-content embed,
.blsc-elementor-content object,
.single-product .woocommerce-Tabs-panel img:not(.emoji):not(.wp-smiley),
.single-product .woocommerce-Tabs-panel video,
.single-product .woocommerce-Tabs-panel canvas,
.single-product .woocommerce-Tabs-panel iframe,
.single-product .woocommerce-Tabs-panel embed,
.single-product .woocommerce-Tabs-panel object {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.entry-content img:not(.emoji):not(.wp-smiley),
.blsc-elementor-content img:not(.emoji):not(.wp-smiley),
.single-product .woocommerce-Tabs-panel img:not(.emoji):not(.wp-smiley) {
  height: auto !important;
}

/* 2) WordPress emoji/smiley reset -------------------------------------------------
   Important: WordPress may render ✅/❌ as <img class="emoji">. Generic content
   image rules must never enlarge those icons to a full table cell. */
img.emoji,
img.wp-smiley,
.entry-content img.emoji,
.entry-content img.wp-smiley,
.blsc-elementor-content img.emoji,
.blsc-elementor-content img.wp-smiley,
.single-product .woocommerce-Tabs-panel img.emoji,
.single-product .woocommerce-Tabs-panel img.wp-smiley,
table img.emoji,
table img.wp-smiley {
  display: inline-block !important;
  width: 1em !important;
  min-width: 1em !important;
  max-width: 1em !important;
  height: 1em !important;
  min-height: 1em !important;
  max-height: 1em !important;
  margin: 0 .07em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: contain !important;
  vertical-align: -.1em !important;
}

/* Sensible cap for ordinary decorative images placed inside editorial tables. */
.entry-content table td > img:not(.emoji):not(.wp-smiley),
.blsc-elementor-content table td > img:not(.emoji):not(.wp-smiley),
.single-product .woocommerce-Tabs-panel table td > img:not(.emoji):not(.wp-smiley) {
  display: inline-block !important;
  width: auto !important;
  max-width: min(100%, 160px) !important;
  max-height: 160px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 3) Product page: top area + tabs always occupy the intended width --------------- */
html body.single-product .blsc-woo-main,
html body.single-product .blsc-woo-main > .blsc-shell,
html body.single-product .blsc-woo-main div.product {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Works whether another plugin/theme turns div.product into float, flex or grid. */
html body.single-product .blsc-woo-main div.product > .woocommerce-tabs,
html body.single-product .blsc-woo-main div.product > .woocommerce-tabs.wc-tabs-wrapper {
  display: block !important;
  clear: both !important;
  float: none !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
}

html body.single-product .woocommerce-tabs .panel,
html body.single-product .woocommerce-Tabs-panel,
html body.single-product .woocommerce-Tabs-panel--description {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Legacy description wrappers sometimes carry fixed inline widths from old builders. */
html body.single-product .woocommerce-Tabs-panel--description > div,
html body.single-product .woocommerce-Tabs-panel--description > section,
html body.single-product .woocommerce-Tabs-panel--description > figure,
html body.single-product .woocommerce-Tabs-panel--description > .wp-block-group,
html body.single-product .woocommerce-Tabs-panel--description > .wp-block-columns {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Keep native/MediaElement video centered and bounded. */
html body.single-product .woocommerce-Tabs-panel--description .wp-video,
html body.single-product .woocommerce-Tabs-panel--description .wp-block-video,
html body.single-product .woocommerce-Tabs-panel--description figure.wp-block-video,
html body.single-product .woocommerce-Tabs-panel--description .mejs-container.mejs-video {
  width: min(100%, 920px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}

html body.single-product .woocommerce-Tabs-panel--description .mejs-container.mejs-video {
  overflow: hidden !important;
}

html body.single-product .woocommerce-Tabs-panel--description .mejs-container video,
html body.single-product .woocommerce-Tabs-panel--description video.wp-video-shortcode {
  max-width: 100% !important;
  object-fit: contain !important;
}

/* 4) Editorial tables -------------------------------------------------------------- */
.entry-content .blsc-table-scroll,
.blsc-elementor-content .blsc-table-scroll,
.single-product .woocommerce-Tabs-panel .blsc-table-scroll {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-inline: contain;
}

.entry-content .blsc-table-scroll > table,
.blsc-elementor-content .blsc-table-scroll > table,
.single-product .woocommerce-Tabs-panel .blsc-table-scroll > table {
  max-width: none;
  box-sizing: border-box;
}

/* Desktop/tablet table geometry: use available content width rather than shrink-wrap. */
@media (min-width: 821px) {
  .entry-content .blsc-table-scroll > table.blsc-table-wide,
  .blsc-elementor-content .blsc-table-scroll > table.blsc-table-wide,
  .single-product .woocommerce-Tabs-panel .blsc-table-scroll > table.blsc-table-wide {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
}

/* 5) Responsive card tables on phones ---------------------------------------------
   JS adds data-blsc-label from real table headers. If headers are unavailable,
   the old horizontal-scroll behavior remains intact. */
@media (max-width: 820px) {
  .blsc-shell {
    width: min(calc(100% - 20px), var(--bl-shell));
  }

  .entry-content,
  .blsc-elementor-content,
  .single-product .woocommerce-Tabs-panel {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Fixed-width top-level legacy blocks become phone-width, but only in editorial content. */
  .entry-content > [style*="width:"],
  .blsc-elementor-content > [style*="width:"],
  .single-product .woocommerce-Tabs-panel--description > [style*="width:"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Product description media: full phone width, no hidden sideways overflow. */
  html body.single-product .woocommerce-Tabs-panel--description .wp-video,
  html body.single-product .woocommerce-Tabs-panel--description .wp-block-video,
  html body.single-product .woocommerce-Tabs-panel--description figure.wp-block-video,
  html body.single-product .woocommerce-Tabs-panel--description .mejs-container.mejs-video,
  html body.single-product .woocommerce-Tabs-panel--description iframe,
  html body.single-product .woocommerce-Tabs-panel--description embed,
  html body.single-product .woocommerce-Tabs-panel--description object {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  /* Card conversion for semantic 3+ column content tables. */
  .entry-content table.blsc-table-cards,
  .blsc-elementor-content table.blsc-table-cards,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    table-layout: auto !important;
  }

  .entry-content table.blsc-table-cards > thead,
  .blsc-elementor-content table.blsc-table-cards > thead,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .entry-content table.blsc-table-cards > tbody,
  .blsc-elementor-content table.blsc-table-cards > tbody,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody {
    display: grid !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .entry-content table.blsc-table-cards > tbody > tr,
  .blsc-elementor-content table.blsc-table-cards > tbody > tr,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody > tr {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 5px 12px !important;
    border: 1px solid var(--bl-line, #ebe5ed) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 5px 18px rgba(42, 25, 39, .035) !important;
  }

  .entry-content table.blsc-table-cards > tbody > tr > td,
  .entry-content table.blsc-table-cards > tbody > tr > th,
  .blsc-elementor-content table.blsc-table-cards > tbody > tr > td,
  .blsc-elementor-content table.blsc-table-cards > tbody > tr > th,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody > tr > td,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody > tr > th {
    display: grid !important;
    grid-template-columns: minmax(92px, .9fr) minmax(0, 1.5fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f1edf1 !important;
    background: transparent !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 12.5px !important;
    line-height: 1.75 !important;
  }

  .entry-content table.blsc-table-cards > tbody > tr > :last-child,
  .blsc-elementor-content table.blsc-table-cards > tbody > tr > :last-child,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody > tr > :last-child {
    border-bottom: 0 !important;
  }

  .entry-content table.blsc-table-cards > tbody > tr > td::before,
  .entry-content table.blsc-table-cards > tbody > tr > th::before,
  .blsc-elementor-content table.blsc-table-cards > tbody > tr > td::before,
  .blsc-elementor-content table.blsc-table-cards > tbody > tr > th::before,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody > tr > td::before,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody > tr > th::before {
    content: attr(data-blsc-label);
    color: var(--bl-brand, #731c53);
    font-weight: 800;
    font-size: 11.5px;
    line-height: 1.55;
  }

  /* A card-table no longer needs a 560/620px scroll canvas. */
  .entry-content .blsc-table-scroll:has(> table.blsc-table-cards),
  .blsc-elementor-content .blsc-table-scroll:has(> table.blsc-table-cards),
  .single-product .woocommerce-Tabs-panel .blsc-table-scroll:has(> table.blsc-table-cards) {
    overflow-x: visible !important;
  }

  .entry-content .blsc-table-scroll > table.blsc-table-cards,
  .blsc-elementor-content .blsc-table-scroll > table.blsc-table-cards,
  .single-product .woocommerce-Tabs-panel .blsc-table-scroll > table.blsc-table-cards {
    min-width: 0 !important;
  }

  /* Table graphics stay small in card rows. */
  .entry-content table.blsc-table-cards img:not(.emoji):not(.wp-smiley),
  .blsc-elementor-content table.blsc-table-cards img:not(.emoji):not(.wp-smiley),
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards img:not(.emoji):not(.wp-smiley) {
    max-width: 72px !important;
    max-height: 72px !important;
  }

  /* Forms/controls should never overflow their card/column. */
  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  pre,
  code,
  .wp-block-code {
    max-width: 100%;
  }
  pre,
  .wp-block-code {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 560px) {
  .blsc-shell {
    width: min(calc(100% - 16px), var(--bl-shell));
  }

  .entry-content table.blsc-table-cards > tbody > tr,
  .blsc-elementor-content table.blsc-table-cards > tbody > tr,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody > tr {
    padding-inline: 10px !important;
    border-radius: 12px !important;
  }

  .entry-content table.blsc-table-cards > tbody > tr > td,
  .entry-content table.blsc-table-cards > tbody > tr > th,
  .blsc-elementor-content table.blsc-table-cards > tbody > tr > td,
  .blsc-elementor-content table.blsc-table-cards > tbody > tr > th,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody > tr > td,
  .single-product .woocommerce-Tabs-panel table.blsc-table-cards > tbody > tr > th {
    grid-template-columns: minmax(82px, .82fr) minmax(0, 1.45fr) !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
}

/* Older Safari fallback: if :has is unavailable, the wrapper can scroll but the
   card itself is still width:100%, so the page will not overflow. */