/*
Theme Name: Boom Child
Theme URI: https://andra.agency/
Description: چایلد تم حرفه‌ای Boom — سازگاری SPA، هدر موبایل، اطلاعیه، دسته‌ها، جستجو، سئو و برندینگ
Author: Andra Agency
Author URI: https://andra.agency/
Version: 2.55.0
Template: Boom
Text Domain: boom-child
*/

:root {
    --boom-child-focus: var(--color-primary, #2563eb);
}

/* A visible keyboard focus ring for child-theme controls without changing mouse UI. */
.boom-mheader-btn:focus-visible,
.boom-ts-chip:focus-visible,
.boom-fab a:focus-visible,
.boom-fab button:focus-visible,
.boom-text-notification__link:focus-visible {
    outline: 3px solid #2563eb;
    outline-color: color-mix(in srgb, var(--boom-child-focus) 72%, white);
    outline-offset: 3px;
}

/*
 * Product/blog content tables
 *
 * HTML copied from rich editors can leave an intrinsic `w-fit` table wrapper
 * around Boom's own full-width wrapper. In that case width:100% on the table
 * is calculated against the narrow wrapper and a large blank area remains.
 */
#description article [class*="_tableContainer"],
#description article [class*="_tableWrapper"],
#description article .boom-table-wrap,
.wp-content-area [class*="_tableContainer"],
.wp-content-area [class*="_tableWrapper"],
.wp-content-area .boom-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#description article [class*="_tableWrapper"].w-fit,
#description article [class*="_tableWrapper"] .w-fit,
.wp-content-area [class*="_tableWrapper"].w-fit,
.wp-content-area [class*="_tableWrapper"] .w-fit {
    width: 100% !important;
    max-width: 100% !important;
}

#description article .boom-table,
.wp-content-area .boom-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
}

#description article .boom-table th,
#description article .boom-table td,
.wp-content-area .boom-table th,
.wp-content-area .boom-table td {
    width: 50%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 767px) {
    #description article .boom-table-wrap,
    .wp-content-area .boom-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #description article .boom-table,
    .wp-content-area .boom-table {
        min-width: 340px;
    }
}

/*
 * Dark-mode product imagery
 *
 * Boom's custom-theme CSS may invert every `.grid .object-contain` element in
 * dark mode. That rule is useful for black SVG icons, but it turns raster
 * product photos into white silhouettes. Keep the icon behaviour and opt only
 * non-SVG images in the main storefront content out of the blanket filter.
 */
html.dark #root main img.object-contain:not([src$=".svg" i]):not([src*=".svg?" i]) {
    filter: none !important;
    mix-blend-mode: normal !important;
}