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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
    /* Shared horizontal inset for containers / page widgets */
    --site-inline-gutter: 1rem;
}

body {
    margin: 0;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: 1.75;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

img,
video {
    max-width: 100%;
    height: auto;
}

img {
    display: block;
}

iframe {
    max-width: 100%;
}

a {
    color: var(--link-color, var(--accent-ink, var(--accent)));
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color, var(--accent-ink-hover, var(--accent-hover)));
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

button,
input,
textarea,
select {
    font: inherit;
    font-family: inherit;
}

h1, h2, h3, h4, h5, h6,
strong, b,
th {
    font-weight: var(--font-weight-heading);
}

.container {
    width: min(var(--site-container-base, 1120px), calc(100% - 2 * var(--site-inline-gutter, 1rem)));
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
}

/* Scoped site width — only areas opted-in via SiteChrome */
html[data-width-header="1"] .site-header .container,
html[data-width-header="1"] .site-announcement .container,
html[data-width-header="1"] .breadcrumbs .container,
html[data-width-main="1"] .site-main .container {
    width: min(var(--site-container-max, 1120px), calc(100% - 2 * var(--site-inline-gutter, 1rem)));
}

html[data-width-footer="1"] .site-footer__builder {
    --footer-max-w: var(--site-container-max, 1120px);
}

@media (max-width: 640px) {
    html {
        /* Slightly tighter than 1rem — avoids “double gutter” feel on phones */
        --site-inline-gutter: 0.75rem;
    }
}

/* Forward chevrons: RTL uses chevron-left icon; mirror in LTR */
[dir="ltr"] .pb-latest-posts__more-icon,
[dir="ltr"] .pb-latest-apps__more-icon,
[dir="ltr"] .pb-latest-products__more-icon,
[dir="ltr"] .product-gallery__nav--next .product-gallery__nav-icon,
[dir="ltr"] .app-related__more-icon {
    transform: scaleX(-1);
}