/*
Theme Name: Baumeister Child
Theme URI: http://baumeister.qodeinteractive.com
Description: A child theme of Baumeister Theme
Author: Mikado Themes
Author URI: http://themeforest.net/user/mikado-themes
Version: 1.0.2
Text Domain: baumeister
Template: baumeister
*/

/* Fix: vertical sidebar scrolls when sub-menu expands beyond viewport height */
.mkd-header-vertical .mkd-vertical-menu-area {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fix: prettyPhoto lightbox (product image zoom) close/nav icons are
   invisible everywhere on the site, not just this page.
   - style_dynamic.css has a global "a { font-family: 'Oswald' !important }"
     rule. Because it's !important, it beats the theme's own
     "font-family: 'Ionicons'" on .pp_close/.pp_next/etc (no !important),
     regardless of those selectors' higher specificity. Without the
     Ionicons font actually applied, the icon codepoints (e.g. \f3d3)
     have no matching glyph in Oswald, so the browser shows an empty
     tofu box instead of an icon.
   - .pp_close also never got its icon glyph at all; the :after rule
     with the actual content is commented out in the theme's compiled
     modules.css.
   - .pp_next/.pp_previous default to opacity:0 and only reveal on
     :hover, which doesn't exist on touch devices, so they're always
     invisible on mobile even though they still work when tapped. */
body .pp_pic_holder a.pp_close,
body .pp_pic_holder a.pp_next,
body .pp_pic_holder a.pp_previous,
body .pp_pic_holder a.pp_arrow_previous,
body .pp_pic_holder a.pp_arrow_next,
body .pp_pic_holder a.pp_expand {
    font-family: 'Ionicons' !important;
}

body .pp_pic_holder a.pp_close:after {
    content: "\f2d7";
    font-size: 28px;
}

/* prettyPhoto's close/nav/counter bar doesn't respond to touch at all
   (old plugin, mouse-only event handling) - on mobile it's just
   non-functional clutter, so hide it there. Desktop keeps it since the
   buttons work fine with a mouse. Tapping the dark overlay still closes
   the lightbox on mobile. */
@media only screen and (max-width: 768px) {
    body .pp_pic_holder .pp_details {
        display: none !important;
    }
}

body .pp_pic_holder a.pp_next,
body .pp_pic_holder a.pp_previous {
    opacity: 1 !important;
}

/* Fix: WPBakery vc_col-xs-* columns keep their %-width (e.g. 50%) at every
   screen size, so on very narrow phones (<=400px) icon+title+text content
   inside each column no longer fits and wraps/breaks awkwardly.
   Force them to stack full-width below 400px, site-wide. */
@media only screen and (max-width: 400px) {
    .wpb_row [class*="vc_col-xs-"]:not(.vc_col-xs-12) {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }
}

/* Fix: product descriptions pasted from AI tools carry Tailwind utility
   classes (flex, flex-col-reverse, w-fit, min-w-(--thread-content-width))
   directly on the table wrapper AND on the <table> tag itself. This site
   doesn't load Tailwind, but something is still resolving those class
   names, collapsing every table cell down to word-by-word wrapping.
   Force every element in the table back to its normal table display role,
   with !important everywhere so nothing else can out-specificity it. */
.TyagGW_tableContainer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
}

.TyagGW_tableContainer .TyagGW_tableWrapper {
    display: block !important;
    flex-direction: unset !important;
    width: 100% !important;
    max-width: 100% !important;
}

.TyagGW_tableContainer table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

.TyagGW_tableContainer thead {
    display: table-header-group !important;
}

.TyagGW_tableContainer tbody {
    display: table-row-group !important;
}

.TyagGW_tableContainer tr {
    display: table-row !important;
}

.TyagGW_tableContainer th,
.TyagGW_tableContainer td {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px 14px !important;
}

/* On narrow phones, forcing the table to width:100% squeezes multi-column
   tables until each cell wraps word-by-word and rows no longer line up.
   Let the table keep its natural column widths and scroll horizontally
   instead, which is the standard mobile pattern for data tables. */
@media (max-width: 767px) {
    .TyagGW_tableContainer {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .TyagGW_tableContainer table {
        width: auto !important;
        min-width: 480px !important;
    }

    .TyagGW_tableContainer th,
    .TyagGW_tableContainer td {
        white-space: normal;
    }
}

/* Fix: style_dynamic.css strips .mkd-container-inner's fixed 1100px width
   ("remove all fixed grid width caps"), and compensates only for WPBakery
   rows (.mkd-content .vc_row gets 30px/10px side padding). WooCommerce
   pages (shop listing + single product) don't use .vc_row, so they were
   left with zero side padding, rendering flush to the browser edges.
   Add the same compensation for the WooCommerce wrappers. */
.mkd-content .mkd-pl-main-holder,
.mkd-content div.product {
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .mkd-content .mkd-pl-main-holder,
    .mkd-content div.product {
        padding-left: 10px;
        padding-right: 10px;
    }
}