/* ===== APPEND AT THE VERY END of public/css/braahmi.css ===== */

/* 1. Stop sideways scrolling at the page level.
   Set on body only (html stays visible) so position:sticky headers keep working.
   'hidden' first for older iPhones that do not know 'clip'. */
html {
    max-width: 100%
}

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

/* 2. Media and embeds can never be wider than their box */
img,
svg,
video,
canvas,
iframe,
embed,
object {
    max-width: 100%
}

iframe.map {
    width: 100%
}

/* 3. Long words, URLs, product names and table cells wrap instead of pushing the page wide */
h1,
h2,
h3,
h4,
p,
li,
td,
th,
a,
b,
span,
small,
blockquote,
figcaption {
    overflow-wrap: anywhere
}

.btn,
.sc-btn,
.pdi-btn {
    max-width: 100%
}

/* 4. Grid/flex children are allowed to shrink */
.container,
.sc-wrap,
.hl-grid>*,
.launch-grid>*,
.sc-hl>*,
.sc-launch>*,
.sc-promos>*,
.sc-amc-grid>*,
.p-grid>*,
.cat-grid>*,
.feature-grid>*,
.t-grid>*,
.blog-grid>*,
.offer-grid>*,
.steps>*,
.timeline>*,
.pd-grid>*,
.split>*,
.layout-side>*,
.footer-grid>*,
.amc-grid>* {
    min-width: 0
}

/* 5. Tables on phones */
.spec-table {
    table-layout: fixed;
    width: 100%
}

.spec-table th,
.spec-table td {
    overflow-wrap: anywhere;
    word-break: break-word
}

/* 6. Decorative shapes that sit partly outside a section must not widen the page */
.sc-sec,
.promo-duo,
.hero,
.demo-band,
.footer-cta {
    overflow-x: clip
}

/* 7. Sticky tab bar on product page: wrap its tabs instead of scrolling the page */
@media (max-width:700px) {
    .pd-nav {
        max-width: 100%
    }

    .pd-nav .container {
        width: 100% !important;
        margin: 0
    }
}