/* ====================================================================

   Product Category Mega Menu

   ==================================================================== */



.pcat-menu-section {

    --pcat-sidebar-bg  : #717171;

    --pcat-orange      : #EE822F;

    --pcat-text-dark   : #333333;

    --pcat-text-white  : #ffffff;

    --pcat-border      : #e5e5e5;

    --pcat-card-bg     : #ffffff;

    --pcat-grid-bg     : #f2f2f2;

    --pcat-card-radius : 8px;

    --pcat-card-gap    : 12px;

    --pcat-sidebar-w   : 265px;
  /* --pcat-l2-w        : 220px; */
    --pcat-l2-w        : 300px;

    --pcat-l3-w        : 300px;

    --pcat-item-h      : 44px;       /* unified row height for L2 + L3 */

    --pcat-min-h       : 540px;

    --pcat-font-size   : 14px;

    --pcat-trans       : 0.18s ease;

    --pcat-radius      : 10px;       /* shared border-radius */

}



/* ── Outer wrapper ── */

.pcat-menu-section {

    display        : flex;

    position       : relative;

    min-height     : var(--pcat-min-h);

    border-radius  : var(--pcat-radius);

    overflow       : hidden;

    background     : #ffffff;

    box-sizing     : border-box;

    font-family    : inherit;

    /* border         : 1px solid var(--pcat-border); */

}



/* ====================================================================

   LEFT SIDEBAR

   ==================================================================== */

.pcat-left-nav {

    width            : var(--pcat-sidebar-w);

    min-width        : var(--pcat-sidebar-w);

    background-color : var(--pcat-sidebar-bg);

    flex-shrink      : 0;

    position         : relative;

    z-index          : 20;

    /* Internal padding so items have breathing room from the edges */

    padding          : 10px 8px;

    box-sizing       : border-box;

}



.pcat-level1-list {

    list-style : none;

    margin     : 0;

    padding    : 0;

}



/* No separator lines — spacing comes from padding */

.pcat-item1 {

    margin-bottom : 2px;

}

.pcat-item1:last-child { margin-bottom: 0; }



.pcat-item1 > a {

    display         : flex;

    align-items     : center;

    justify-content : space-between;

    /* Horizontal padding inside the pill */

    padding         : 0 14px;

    height          : var(--pcat-item-h);

    color           : var(--pcat-text-white);

    text-decoration : none;

    font-size       : var(--pcat-font-size);

    letter-spacing  : 0.02em;

    border-radius   : var(--pcat-radius);

    transition      : background-color var(--pcat-trans);

    cursor          : pointer;

    box-sizing      : border-box;

    white-space     : nowrap;

    overflow        : hidden;

}



/* Orange pill on hover / active */

.pcat-item1:hover > a,

.pcat-item1.is-active > a {

    background-color : var(--pcat-orange);

    color            : var(--pcat-text-white);

}



.pcat-item1-name {

    flex          : 1;

    min-width     : 0;

    overflow      : hidden;

    text-overflow : ellipsis;

    white-space   : nowrap;

}



.pcat-item1-arrow {

    font-size   : 18px;

    line-height : 1;

    margin-left : 6px;

    flex-shrink : 0;

    font-style  : normal;

    opacity     : 0.8;

}



/* ====================================================================

   CONTENT AREA

   ==================================================================== */

.pcat-content-area {

    flex      : 1;

    position  : relative;

    min-width : 0;

    /* Fill the full height of the sidebar */

    display   : flex;

    flex-direction: column;

}



/* ====================================================================

   DEFAULT GRID  (page-load state)

   ==================================================================== */

.pcat-default-grid {

    display               : grid;

    grid-template-columns : repeat(4, 1fr);

    grid-auto-rows        : 1fr;        /* rows share equal height */

    gap                   : var(--pcat-card-gap);

    padding-left               : var(--pcat-card-gap);

    /* Stretch to fill the entire content area vertically */

    flex                  : 1;

    align-content         : stretch;

    background-color      : var(--lightest-gray) !important;

    /* box-sizing            : border-box; */

}



/* Each card */

.pcat-grid-item {

    background    : var(--pcat-card-bg);

    border-radius : var(--pcat-card-radius);

    box-shadow    : 0 1px 4px rgba(0, 0, 0, 0.08);

    overflow      : hidden;

    transition    : box-shadow var(--pcat-trans), transform var(--pcat-trans);

    box-sizing    : border-box;

}



.pcat-grid-item:hover {

    box-shadow : 0 4px 14px rgba(0, 0, 0, 0.13);

    transform  : translateY(-2px);

}



.pcat-grid-item > a {

    display         : flex;

    flex-direction  : column;

    align-items     : center;

    justify-content : center;

    padding         : 16px 10px 14px;

    text-decoration : none;

    color           : var(--pcat-text-dark);

    height          : 100%;

    box-sizing      : border-box;

}



.pcat-grid-img-wrap {

    width            : 100%;

    display          : flex;

    align-items      : center;

    justify-content  : center;

    flex             : 1;

    min-height       : 60px;

    margin-bottom    : 10px;

}



.pcat-grid-img-wrap img {

    max-width    : 100%;

    max-height   : 110px;

    width        : auto;

    height       : auto;

    object-fit   : contain;

    display      : block;

}



.pcat-no-img {

    display          : block;

    width            : 60px;

    height           : 60px;

    background-color : #eeeeee;

    border-radius    : 4px;

}



.pcat-grid-name {

    font-size   :var(--text-m);

    color       : var(--darkblue);

    text-align  : center;

    line-height : 1.4;

    margin      : 0;

    padding     : 0;

    word-break  : break-word;

    width       : 100%;

}



.pcat-grid-item:hover .pcat-grid-name {

    color : var(--pcat-orange);

}



/* ====================================================================

   IMAGE-ONLY PANEL  (level-1 cats with NO children)

   ==================================================================== */

.pcat-image-only-panel {

    position        : absolute;

    inset           : 0;

    display         : flex;

    align-items     : center;

    justify-content : center;

    background      : #ffffff;

    z-index         : 5;

}



.pcat-image-only-inner {

    display         : flex;

    align-items     : center;

    justify-content : center;

    width           : 100%;

    height          : 100%;

    padding         : 40px;

    box-sizing      : border-box;

}



.pcat-single-cat-image {

    max-width    : 60%;

    max-height   : 300px;

    object-fit   : contain;

    display      : block;

}



/* ====================================================================

   FLYOUT PANELS — dynamically top-positioned by JS

   ==================================================================== */

.pcat-flyout {

    position   : absolute;

    /* top is set dynamically via JS to align with the hovered L1 item */

    top        : 0;

    left       : 0;

    right      : 0;

    bottom     : 0;

    display    : flex;

    background : #ffffff;

    z-index    : 10;

    border-top : 1px solid var(--pcat-border);

}



/* ── Level-2 column ── */

.pcat-level2-panel {

    width        : var(--pcat-l2-w);

    min-width    : var(--pcat-l2-w);

    border-right : 1px solid var(--pcat-border);

    overflow-y   : auto;

    flex-shrink  : 0;

    /* Internal padding so pills have edge breathing room */

    padding      : 6px 8px;

    box-sizing   : border-box;

}



.pcat-level2-list {

    list-style : none;

    margin     : 0;

    padding    : 0;

}



.pcat-item2 {

    margin-bottom : 2px;

}

.pcat-item2:last-child { margin-bottom: 0; }



/* Level-2 link — same height as L3, pill shape on hover */

/* .pcat-item2 > a {

    display         : flex;

    align-items     : center;

    justify-content : space-between;

    height          : var(--pcat-item-h);

    padding         : 0 14px;

    color           : #444444;

    text-decoration : none;

    font-size       : var(--pcat-font-size);

    border-radius   : var(--pcat-radius);

    transition      : background-color var(--pcat-trans), color var(--pcat-trans);

    box-sizing      : border-box;

    white-space     : nowrap;

    overflow        : hidden;

} */
.pcat-item2 > a {
    display         : flex; 
    align-items     : center; /* 确保单行或两行时，文字和右侧箭头始终保持垂直居中  */
    justify-content : space-between; 
    text-decoration : none; 
    font-size       : var(--pcat-font-size); 
    border-radius   : var(--pcat-radius); 
    transition      : background-color var(--pcat-trans), color var(--pcat-trans); 
    box-sizing      : border-box;
    color           : #444444; 
    
    /* ─── 核心修改与新增 ─── */
    white-space     : normal;           /* 覆盖原有的 nowrap，允许内部多行解析 [cite: 104] */
    height          : auto;             /* 取消原有的固定 44px 高度，让高度随两行文字自适应  */
    min-height      : var(--pcat-item-h); /* 改用最小高度！确保只有单行文本的项依旧保持 44px 的标准高度  */
    padding         : 6px 14px;         /* 将原先的上下 0 内边距改为上下 6px，防止两行文字紧贴上下边框  */
}



/* Orange pill — same style as L1 sidebar */

.pcat-item2:hover > a,

.pcat-item2.is-active > a {

    background-color : var(--pcat-orange);

    color            : var(--pcat-text-white);

}



.pcat-item2-name {

    flex          : 1;
    min-width     : 0;
    overflow      : hidden;
    line-height   : 1.3;              /* 显式定义紧凑行高，确保两行文本排版美观 */

    /* ─── 核心修复属性 ─── */
    white-space   : normal !important; /* 确保覆盖掉可能残留的 nowrap [cite: 105] */
    word-break    : break-all;         /* 关键：强制超长无空格单字/字符串在任意字符处断行 */
    
    display       : -webkit-box;      /* 将元素转为 WebKit 弹性伸缩盒子 */
    -webkit-line-clamp: 2;            /* 严格限制最多显示 2 行 */
    -webkit-box-orient: vertical;

}



.pcat-item2-arrow {

    font-size   : 18px;

    line-height : 1;

    margin-left : 6px;

    flex-shrink : 0;

    font-style  : normal;

    opacity     : 0.8;

}



/* ── Level-3 wrapper ── */

.pcat-level3-area {

    flex      : 1;

    display   : flex;

    min-width : 0;

    overflow  : hidden;

}



/* ── Level-3 list column ── */

.pcat-level3-list {

    width        : var(--pcat-l3-w);

    min-width    : var(--pcat-l3-w);

    border-right : 1px solid var(--pcat-border);

    overflow-y   : auto;

    flex-shrink  : 0;

    /* Same internal padding as L2 panel */

    padding      : 6px 8px;

    box-sizing   : border-box;

}



.pcat-level3-items {

    list-style : none;

    margin     : 0;

    padding    : 0;

}



.pcat-item3 {

    margin-bottom : 2px;

}

.pcat-item3:last-child { margin-bottom: 0; }



/* Level-3 link — SAME height as L2, but ONLY text color changes on hover */

.pcat-item3 > a {

    display         : flex;

    align-items     : center;

    height          : var(--pcat-item-h);

    padding         : 0 14px;

    color           : #444444;

    font-size       : var(--pcat-font-size);

    text-decoration : none;

    border-radius   : var(--pcat-radius);    /* radius ready, but no bg fill */

    transition      : color var(--pcat-trans);

    white-space     : nowrap;

    overflow        : hidden;

    text-overflow   : ellipsis;

    box-sizing      : border-box;

}



/* Level-3: text color only — NO background fill */

.pcat-item3:hover > a,

.pcat-item3.is-active > a {

    color            : var(--pcat-orange);

    background-color : transparent;

}



/* ── Image display — image moves vertically to track hovered item ── */

.pcat-image-display {

    flex       : 1;

    position   : relative;   /* anchor for absolutely-positioned image */

    overflow   : hidden;

    box-sizing : border-box;

}



/* Image is absolutely positioned; JS updates its `top` value */

.pcat-preview-image {

    position     : absolute;

    left         : 50%;

    transform    : translateX(-50%);

    top          : 20px;          /* JS will override this */

    max-width    : 80%;

    max-height   : 220px;

    width        : auto;

    height       : auto;

    object-fit   : contain;

    display      : block;

    transition   : top 0.25s ease, opacity 0.15s ease;

}


 
 




/* ====================================================================

   RESPONSIVE

   ==================================================================== */

@media screen and (min-width: 1400px) {
nav.pcat-left-nav {
    width: 27% !important;
}
   
}


@media screen and (max-width: 1200px) {

    .pcat-menu-section {

        --pcat-sidebar-w : 240px;

        --pcat-l2-w      : 195px;

        --pcat-l3-w      : 195px;

    }

}



@media screen and (max-width: 1024px) {

    .pcat-menu-section {

        --pcat-sidebar-w : 200px;

        --pcat-l2-w      : 170px;

        --pcat-l3-w      : 170px;

        --pcat-min-h     : 480px;

    }

    .pcat-default-grid {

        grid-template-columns : repeat(3, 1fr);

    }

}



@media screen and (max-width: 768px) {

    .pcat-menu-section {

        flex-direction : column;

        min-height     : auto;

        --pcat-min-h   : auto;

        border-radius  : 8px;
        gap: var(--space-s);

    }

    .pcat-left-nav {

        width     : 100%;

        min-width : 0;

        padding   : 8px;

    }

    .pcat-level1-list {

        display                    : flex;

        flex-wrap                  : nowrap;

        overflow-x                 : auto;

        -webkit-overflow-scrolling : touch;

        gap                        : 4px;

    }

    .pcat-item1 {

        margin-bottom : 0;

        flex-shrink   : 0;

    }

    .pcat-item1 > a {

        padding       : 0 12px;

        height        : 38px;

        font-size     : 13px;

        border-radius : 8px;

    }

    .pcat-item1-arrow  { display: none; }

    .pcat-content-area { min-height: 460px; }

    .pcat-default-grid {

        grid-template-columns : repeat(2, 1fr);

        min-height            : 360px;

    }

    .pcat-flyout {

        flex-direction : column;

        overflow-y     : auto;

        top            : 0 !important; /* override JS on mobile */

    }

    .pcat-level2-panel {

        width         : 100%;

        min-width     : 0;

        border-right  : none;

        border-bottom : 1px solid var(--pcat-border);

        padding       : 6px;

    }

    .pcat-level3-area  { flex-direction: column; }

    .pcat-level3-list  {

        width         : 100%;

        min-width     : 0;

        border-right  : none;

        border-bottom : 1px solid var(--pcat-border);

        padding       : 6px;

    }

    .pcat-image-display    { min-height: 160px; }

    .pcat-preview-image    { position: relative; left: auto; transform: none; top: auto !important; max-width: 60%; margin: 0 auto; }


#brxe-dnmtii nav.pcat-left-nav {
    width: 100% !important;
}

}







/* ====================================================================
   专属移动端修复：仅针对 Products 菜单 (ID/Class 792)
   实现完美的 2 列卡片网格布局
   ==================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. 防止整个 Mega Menu 容器被横向撑破 */
    #menu-item-792 .pcat-menu-section,
    .bricks-mobile-menu-wrapper .menu-item-792 .pcat-menu-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important; 
    }

    /* 2. 修复 2388px 宽度 BUG，强制内容区域遵循屏幕宽度 */
    #menu-item-792 .pcat-content-area,
    .bricks-mobile-menu-wrapper .menu-item-792 .pcat-content-area {
        width: 100% !important;
        min-width: 0 !important; /* 👈 关键：阻止 flex 子元素无限膨胀 */
        box-sizing: border-box !important;
        /* height: 460px !important; */
        min-height: 460px !important; 
        height: auto !important;
    }

    /* 3. 设置严格的两列网格 */
    #menu-item-792 .pcat-default-grid,
    .bricks-mobile-menu-wrapper .menu-item-792 .pcat-default-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* width: 15% !important; */
        width: 100% !important;
        gap: 10px !important;
        padding: 5px 10px 15px 10px !important; 
        box-sizing: border-box !important;
    }

    /* 4. 强制卡片继承网格列的宽度，不再溢出 */
    #menu-item-792 .pcat-grid-item,
    .bricks-mobile-menu-wrapper .menu-item-792 .pcat-grid-item {
        width: 100% !important;
        min-width: 0 !important; /* 👈 关键：强制卡片在网格内收缩 */
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    /* 额外保障：确保图片不会撑大卡片 */
    #menu-item-792 .pcat-grid-img-wrap img,
    .bricks-mobile-menu-wrapper .menu-item-792 .pcat-grid-img-wrap img {
        max-width: 100% !important;
        height: auto !important;
    }

  
}


/* ====================================================================
   移动端 Mega Menu 默认折叠，配合 JS 点击展开
   ==================================================================== */
@media screen and (max-width: 768px) {
    /* 仅在移动端抽屉中默认隐藏，不要加 !important，否则 JS 无法覆盖它 */
    .bricks-mobile-menu-wrapper .menu-item-792 .ic-mega-menu-wrapper {
        display: none; 
    }
    
    /* 展开状态下的一些间距优化（可选） */
    .bricks-mobile-menu-wrapper .menu-item-792.is-mobile-open > a {
        color: var(--pcat-orange); /* 展开时高亮 Products 菜单项 */
    }
}






/* ==========================================================================
   Products 超级菜单布局优化（限定 1400px 与防闪烁间隙）
   ========================================================================== */

/* 确保包含导航栏的整行 Section 作为绝对定位的基准参考线 */
#brxe-zzqymh {
    position: relative !important;
}
.menu-item-792 .pcat-item1-name {
    color: #fff !important;
}

/* ── PC 端样式控制 ── */
@media (min-width: 992px) {
    
    /* 将父级 LI 设为 static，打破常规容器限制，允许子菜单全宽居中 */
    #menu-main-menu #menu-item-792 {
        position: static !important;
    }

    /* 超级菜单容器基础定位 */
    #menu-main-menu #menu-item-792 .ic-mega-menu-wrapper {
        position: absolute;
        top: 100%;               /* 紧贴在 Header 这一行的正下方 */
        left: 50%;               /* 居中起点参考线 */
        transform: translateX(-50%); /* 完美的水平居中平衡 */
        width: 100%;
        max-width: 1400px;       /* 核心修改 1：PC 端限制最大宽度为 1400px */
        box-sizing: border-box;
        background-color: #ffffff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        z-index: 9999;
        
        /* 状态初始化 */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    /* 核心修改 2：向上延伸 40px 的透明桥接层。填补鼠标移动时的空白盲区，防止菜单消失 */
    #menu-main-menu #menu-item-792 .ic-mega-menu-wrapper::before {
        content: '';
        position: absolute;
        bottom: 100%;            /* 紧贴超级菜单的顶部往上延伸 */
        left: 0;
        width: 100%;
        height: 40px;            /* 覆盖 Header 到底部的留白高度 */
        background: transparent; /* 完全透明，不影响视觉 */
        pointer-events: auto;    /* 允许鼠标划过 */
    }

    /* 当鼠标悬停在 Products 项，或者触发 JS 激活类时显示菜单 */
    #menu-main-menu #menu-item-792:hover .ic-mega-menu-wrapper,
    #menu-main-menu #menu-item-792 .ic-mega-menu-wrapper.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}




@media screen and (max-width: 768px) {
    #brxe-dnmtii nav.pcat-left-nav {
        width: 100% !important;
    }
}



/* ====================================================================
   1. MAIN SITE HAMBURGER MENU (Forces Wrapping on Mobile)
   ==================================================================== */
@media screen and (max-width: 991px) {
    /* Hide the horizontal desktop menu */
    .brxe-nav-menu > .bricks-nav-menu-wrapper {
        display: none !important;
    }

    /* Force the Bricks Native Hamburger Toggle to show */
    .brxe-nav-menu .bricks-mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: transparent !important; /* Change to #EE822F if you want an orange box */
        border: none !important;
        padding: 5px !important;
        width: 44px;
        height: 24px;
        cursor: pointer;
        margin-left: auto; /* Aligns to the right side of header */
    }

    /* Style the 3 bars of the hamburger icon */
    .brxe-nav-menu .bricks-mobile-menu-toggle .bar-top,
    .brxe-nav-menu .bricks-mobile-menu-toggle .bar-center,
    .brxe-nav-menu .bricks-mobile-menu-toggle .bar-bottom {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background-color: var(--pcat-orange, #EE822F) !important; /* Orange lines */
        margin: 3px 0 !important;
        border-radius: 2px;
        transition: all 0.3s ease !important;
    }

    /* Beautiful 'X' animation when the menu is clicked open */
    .brxe-nav-menu .bricks-mobile-menu-toggle[aria-expanded="true"] .bar-top {
        transform: translateY(8px) rotate(45deg) !important;
    }
    .brxe-nav-menu .bricks-mobile-menu-toggle[aria-expanded="true"] .bar-center {
        opacity: 0 !important;
    }
    .brxe-nav-menu .bricks-mobile-menu-toggle[aria-expanded="true"] .bar-bottom {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
}

/* ====================================================================
   2. RESTORE "PRODUCTS" DROPDOWN ARROW (Simple Triangle)
   ==================================================================== */
@media screen and (max-width: 991px) {
    /* Adds a clean downward triangle next to "Products" */
    .bricks-nav-menu-wrapper.mobile_landscape .menu-item-792 > a::after,
    .bricks-nav-menu-wrapper.mobile_portrait .menu-item-792 > a::after,
    .bricks-mobile-menu-wrapper .menu-item-792 > a::after {
        content: "";
        display: inline-block;
        margin-left: 8px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid currentColor;
        vertical-align: middle;
        transition: transform 0.3s ease;
        border-bottom: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    /* Flip the triangle up when Products menu is open */
    .menu-item-792.is-mobile-open > a {
        color: var(--pcat-orange) !important;
    }
    .menu-item-792.is-mobile-open > a::after {
        transform: rotate(180deg);
    }

    .brxe-nav-menu .bricks-mobile-menu-wrapper:before {
    background-color: #ffffff !important;
}

ul#menu-main-menu-1 li a {
    color: var(--darkblue) !important;
}

.bricks-mobile-menu-wrapper {
        width: 400px !important;       /* 这里改成你想要的宽度，比如 350px, 400px, 甚至 80vw */
        max-width: 90vw !important;    /* 这是一个安全设置：防止你在极小屏幕手机上把宽度设置得比屏幕还宽 */
    }

    nav.pcat-left-nav {
    width: 100% !important;
}

 .bricks-mobile-menu-wrapper .menu-item-792 .pcat-default-grid {
        width: 100% !important;
    }
}



 



/* ====================================================================
   MOBILE HEADER LAYOUT: Logo (左) -> Hamburger (中) -> Button (右)
   ==================================================================== */
@media screen and (max-width: 991px) {
    
    /* 1. 父容器 (Container)：强制水平排布并垂直居中 */
    #brxe-itkbja {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important; /* 核心：垂直居中对齐 */
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 10px !important; 
        box-sizing: border-box !important;
        gap: 8px !important;
    }

    /* 2. Logo 容器 (Order 1: 最左边) */
    #brxe-olhldf {
        width: auto !important;
        flex: 0 1 auto !important;
        max-width: 40% !important; 
        margin: 0 !important;
        order: 1 !important; /* 强制排第一 */
        display: flex !important;
        align-items: center !important; /* 内部图片垂直居中 */
    }

    #brxe-olhldf img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
    }

    /* 3. 汉堡包菜单容器 (Order 2: 中间) */
    #brxe-uofyqe {
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 0 auto !important; /* 配合 auto 让它尽量居中 */
        order: 2 !important; /* 强制排第二 */
        display: flex !important;
        align-items: center !important; /* 内部图标垂直居中 */
    }

    /* 彻底清除汉堡包的默认位移 */
    #brxe-uofyqe .bricks-mobile-menu-toggle {
        margin: 0 !important; 
        padding: 5px !important;
    }

    /* 4. Leave Message 按钮 (Order 3: 最右边) */
    #brxe-tmydqn {
        flex: 0 0 auto !important; 
        white-space: nowrap !important;
        padding: 6px 12px !important; 
        font-size: 12px !important;   
        margin: 0 !important;
        order: 3 !important; /* 强制排第三 */
        display: flex !important;
        align-items: center !important; /* 内部文字垂直居中 */
        line-height: 1 !important; /* 防止行高导致按钮看起来偏下 */
    }
    
}


@media (max-width: 480px) {
    #brxe-txgrah {
        flex-basis: 70% !important;
    }
}






/* ====================================================================
   MOBILE MEGA MENU: Default Closed State
   ==================================================================== */
@media screen and (max-width: 991px) {
    /* 1. Ensure Mega Menu is hidden by default */
    /* REMOVE the !important from display: none */
    .bricks-nav-menu-wrapper.mobile_landscape .menu-item-792 .ic-mega-menu-wrapper,
    .bricks-nav-menu-wrapper.mobile_portrait .menu-item-792 .ic-mega-menu-wrapper,
    .bricks-mobile-menu-wrapper .menu-item-792 .ic-mega-menu-wrapper {
        display: none; /* Changed: Removed !important so JS can animate it */
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        margin-top: 10px;
        padding-bottom: 10px;
    }
}





/* =======================================================
   移动端：Products 菜单默认折叠 (极简版)
   ======================================================= */
@media screen and (max-width: 991px) {
    li.menu-item-792 .ic-mega-menu-wrapper {
        display: none; /* 核心：默认隐藏，绝对不能加 !important */
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        box-shadow: none !important;
    }
}





/* ====================================================================
   MOBILE: 菜单打开时将汉堡包图标移动到侧边栏右上角
   ==================================================================== */
@media screen and (max-width: 991px) {
    .brxe-nav-menu .bricks-mobile-menu-toggle[aria-expanded="true"] {
        position: fixed !important;
        top: 20px !important; /* 图标距离屏幕顶部的位置 */
        /* 400px 和 90vw 对应侧边栏的宽度设置，确保图标刚好在侧边栏右上角 */
        left: calc(min(400px, 90vw) - 60px) !important; 
        right: auto !important;
        margin: 0 !important;
        z-index: 999999 !important; /* 确保它悬浮在抽屉最上层 */
    }
}












 /* =====================================================================
   PRODUCT LISTING TABLE  —  [product_listing_table] shortcode styles
   ===================================================================== */

/* ── Admin notice ─────────────────────────────────────────────────────── */
.pct-admin-notice {
    background: #fff3cd;
    border-left: 4px solid #e87722;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 16px;
}

/* ── WRAPPER ─────────────────────────────────────────────────────────── */
.pct-wrapper {
    font-family: inherit;
    font-size: 14px;
    color: #333;
}

/* ── FILTER BAR ──────────────────────────────────────────────────────── */
/*
 * Layout: [filter icon] [group1] [group2] [group3] [group4] [reset btn]
 * The 4 groups sit inside .pct-filter-groups which flex: 1,
 * so they fill all remaining space; each group also flex: 1 → equal width.
 */
.pct-filter-bar {
    display: flex;
    align-items: flex-end;        /* align bottoms of icon, selects, button */
    gap: 16px;
    background: #f5f7f9;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

/* Filter SVG icon on the left */
.pct-filter-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-bottom: 6px;          /* nudge to align with the select element */
}

.pct-filter-icon {
    display: block;
    width: 22px;
    height: 22px;
    opacity: 0.75;
}

/* Flex container that holds the 4 filter groups — takes all remaining width */
.pct-filter-groups {
    display: flex;
    flex: 1;
    gap: 12px;
}

/* Each individual filter group — equal width via flex: 1 */
.pct-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;                 /* allow shrinking below content size */
}

.pct-filter-group--reset {
    flex: 0 0 auto;               /* reset button does NOT stretch */
    justify-content: flex-end;
}

.pct-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pct-filter-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /*padding: 8px 10px 8px 10px;*/
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.pct-filter-select:focus {
    outline: none;
    border-color: #e87722;
    box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.15);
}

.pct-reset-btn {
    background: #e87722;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
    height: 42px;                 /* match select height */
    display: flex;
    align-items: center;
}

.pct-reset-btn:hover  { background: #cf6519; }
.pct-reset-btn:active { transform: scale(0.97); }

/* Loading overlay */
.pct-filter-bar.pct-loading::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.45);
    z-index: 100;
    pointer-events: all;
}

/* ── RESULTS SUMMARY ──────────────────────────────────────────────────── */
.pct-summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.pct-count {
    font-weight: 700;
    color: #e87722;
}

/* ── TABLE SCROLL WRAPPER ─────────────────────────────────────────────── */
.pct-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

/* ── TABLE ───────────────────────────────────────────────────────────── */
.pct-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    table-layout: auto;
}

/* ── TABLE HEADER ────────────────────────────────────────────────────── */
/*
 * Background and text colour use CSS variables set by the theme.
 * var(--tablelistingbg) — header background colour
 * var(--text-body)      — header text colour
 * Hover/active state uses filter:brightness() so it works with any colour.
 */
.pct-thead .pct-th {
    background: var(--tablelistingbg, #e87722);
    color: var(--text-body, #fff);
    padding: 13px 14px;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    border: none;
    user-select: none;
}

.pct-thead .pct-th--sortable {
    cursor: pointer;
    transition: filter 0.15s;
}

.pct-thead .pct-th--sortable:hover {
    filter: brightness(0.88);
}

.pct-thead .pct-th--active {
    filter: brightness(0.80);
}

.pct-thead .pct-th:focus-visible {
    outline: 3px solid rgba(255,255,255,0.7);
    outline-offset: -3px;
}

/* ── DUAL SORT ARROWS (▲ and ▼ always visible) ───────────────────────── */
/*
 * Both arrows appear after sortable column labels.
 * The ACTIVE direction arrow is coloured var(--logo).
 * The inactive arrow is dimmed (low opacity).
 */
.pct-sort-arrows {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
    gap: 1px;
    line-height: 1;
}

.pct-sort-arrow--up,
.pct-sort-arrow--down {
    display: block;
    font-size: 7px;
    line-height: 1;
    color: var(--text-body, #fff);
    opacity: 0.30;                /* dim when inactive */
    transition: opacity 0.15s, color 0.15s;
}

/* Active arrow: full opacity + brand colour */
.pct-sort-arrow--active {
    opacity: 1;
    color: var(--logo, #e87722);
}

/* ── TABLE BODY ROWS ─────────────────────────────────────────────────── */
.pct-row {
    border-bottom: 1px solid #eee;
    transition: background 0.1s;
}

.pct-row:hover {
    background: #fdf4ed;
}

.pct-row.pct-row--open {
    background: #fef0e4;
}

.pct-td {
    padding: 11px 14px;
    vertical-align: middle;
    color: #333;
    white-space: nowrap;
}

/* Model link */
.pct-model-link {
    color: #e87722;
    text-decoration: none;
    font-weight: 600;
}

.pct-model-link:hover {
    text-decoration: underline;
    color: #cf6519;
}

/* ── PARAMETER LIST TRIGGER ──────────────────────────────────────────── */
/*
 * CHANGED from a pill-style button to plain inline text.
 * No border, no background, no chevron icon.
 * Hover: underline only — matches the Model link style.
 */
.pct-param-trigger {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    color: #e87722;
    cursor: pointer;
    text-decoration: none;
    line-height: inherit;
}

.pct-param-trigger:hover {
    background: none;
    color: #cf6519;
    text-decoration: underline;
}

.pct-param-trigger[aria-expanded="true"] {
    background: none;
    color: #cf6519;
    text-decoration: underline;
}

/* No results */
.pct-no-results-cell {
    padding: 30px 20px;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* ── DETAIL ROW (hidden by default) ──────────────────────────────────── */
.pct-detail-row {
    display: none;
    background: #f5f7f9;
}

.pct-detail-row.pct-detail-row--open {
    display: table-row;
}

.pct-detail-td {
    padding: 0 !important;
    border-top: 3px solid #e87722 !important;
    border-bottom: 2px solid #e0e4e8 !important;
}

/* ── DETAIL PANEL INNER ───────────────────────────────────────────────── */
.pct-detail-inner {
    padding: 24px 28px;
    animation: pctFadeIn 0.2s ease;
}

@keyframes pctFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── TOP ROW: Image + Meta ─────────────────────────────────────────────── */
.pct-detail-top {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pct-detail-img-wrap {
    flex-shrink: 0;
    width: 220px;
    max-width: 100%;
}

.pct-detail-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #e0e4e8;
    display: block;
}

.pct-detail-meta {
    flex: 1;
    min-width: 220px;
}

.pct-detail-product-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0 0 6px;
    line-height: 1.3;
}

.pct-detail-product-link {
    color: #222;
    text-decoration: none;
    transition: color 0.15s;
}

.pct-detail-product-link:hover {
    color: #e87722;
    text-decoration: underline;
}

.pct-detail-model-num {
    font-size: 14px;
    color: #e87722;
    font-weight: 600;
    margin: 0 0 8px;
}

/* Download buttons row */
.pct-download-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pct-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e87722;
    color: #fff;
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.pct-download-btn:hover {
    background: #cf6519;
    color: #fff;
    text-decoration: none;
}

.pct-download-icon { flex-shrink: 0; }

/* ── SPEC TABLES ──────────────────────────────────────────────────────── */
.pct-detail-tables {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid #e0e4e8;
    padding-top: 20px;
}

.pct-spec-table {
    flex: 1;
    min-width: 220px;
    border-collapse: collapse;
    font-size: 13px;
}

.pct-spec-table tr { border-bottom: 1px solid #e9ecef; }
.pct-spec-table tr:last-child { border-bottom: none; }
.pct-spec-table tr:nth-child(even) td, .pct-spec-table tr:nth-child(even) th{
  background-color:#f5f5f5 !important
}
.pct-spec-table tr:nth-child(odd) td, .pct-spec-table tr:nth-child(odd) th{
  background-color:#e0e0e0 !important
}
.pct-spec-label,
.pct-spec-value {
    padding: 8px 12px;
    vertical-align: middle;
    text-align: left;
}

.pct-spec-label {
    background: #eef0f3;
    color: #555;
    font-weight: 600;
    width: 55%;
    border-right: 1px solid #fff;
}

.pct-spec-value {
    background: #fff;
    color: #333;
}

/* ── PAGINATION ───────────────────────────────────────────────────────── */
.pct-pagination-wrap {
    margin-top: 20px;
    margin-bottom: 8px;
}

.pct-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    flex-wrap: wrap;
}

.pct-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
    user-select: none;
}

.pct-page-btn:hover:not(:disabled):not(.pct-page-disabled) {
    background: #fdf4ed;
    border-color: #e87722;
    color: #e87722;
}

.pct-page-btn.pct-page-active {
    background: #e87722;
    border-color: #e87722;
    color: #fff;
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}

.pct-page-arrow {
    font-size: 20px;
    color: #888;
    min-width: 32px;
    padding: 0 6px;
}

.pct-page-arrow:hover:not(:disabled):not(.pct-page-disabled) {
    color: #e87722;
    background: #fdf4ed;
    border-color: #e87722;
}

.pct-page-btn.pct-page-disabled,
.pct-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.pct-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: #999;
    font-size: 14px;
    user-select: none;
    pointer-events: none;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pct-filter-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
    }

    .pct-filter-icon-wrap {
        display: none; /* hide icon on very small screens to save space */
    }

    .pct-filter-groups {
        flex-wrap: wrap;
        width: 100%;
    }

    .pct-filter-group {
        flex: 1 1 calc(50% - 6px); /* 2 per row on small screens */
        min-width: 120px;
    }

    .pct-filter-group--reset {
        flex: 1 1 100%;
    }

    .pct-reset-btn {
        width: 100%;
        justify-content: center;
    }

    .pct-detail-inner { padding: 16px; }

    .pct-detail-top {
        flex-direction: column;
        gap: 16px;
    }

    .pct-detail-img-wrap { width: 40% !important; }

    .pct-detail-tables {
        flex-direction: column;
        gap: 16px;
    }

    .pct-th,
    .pct-td {
        padding: 9px 10px;
        font-size: 12px;
    }

    .pct-pagination { gap: 4px; }

    .pct-page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }


 #brxe-vttakw > .tab-content {
    padding-right: 0px;
    padding-left: 0px;
}


#category-siblings {
    grid-template-columns: 1fr;
}


}


















/* ============================================================
   News Category Filter  (.ncf-*)
   ============================================================ */

/* Wrapper */
.ncf-wrap {
    width: 100%;
    font-family: 'Lato', sans-serif;
}

/* ── Top row: label + dropdown ── */
.ncf-top-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* Filter label */
.ncf-label {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ncf-icon-filter {
    display: block;
    flex-shrink: 0;
}

.ncf-label-text {
    font-size: 20px;
    font-weight: 400;
    color: #222222;
    text-transform: capitalize;
    line-height: normal;
}

/* Dropdown container (relative) */
.ncf-dropdown {
    position: relative;
    flex: 1 1 auto;
}

/* Dropdown toggle button */
.ncf-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.ncf-dropdown-toggle:hover,
.ncf-dropdown.ncf-open .ncf-dropdown-toggle {
    border-color: #EE822F;
}

.ncf-placeholder {
    font-size: 16px;
    font-weight: 300;
    color: #000000;
    line-height: normal;
    flex: 1;
}

.ncf-icon-arrow {
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.25s ease;
}

.ncf-dropdown.ncf-open .ncf-icon-arrow {
    transform: rotate(180deg);
}

/* Dropdown list */
.ncf-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    max-height: 320px;
    overflow-y: auto;
}

.ncf-dropdown.ncf-open .ncf-dropdown-list {
    display: block;
}

.ncf-dropdown-list li {
    margin: 0;
    padding: 0;
}

.ncf-dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 300;
    color: #333333;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: normal;
}

.ncf-dropdown-item:hover {
    background: #fff5ee;
    color: #EE822F;
}

.ncf-dropdown-item--active {
    color: #EE822F;
    font-weight: 400;
}

/* ── Popular categories row ── */
.ncf-popular-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 16px;
    row-gap: 8px;
}

.ncf-icon-fire {
    display: block;
    flex-shrink: 0;
    margin-right: 8px;
}

/* Separator */
.ncf-sep {
    color: #e6e6e6;
    font-size: 16px;
    font-weight: 300;
    margin: 0 10px;
    line-height: normal;
    user-select: none;
}

/* Popular links */
.ncf-popular-link {
    font-size: 16px;
    font-weight: 300;
    color: #000000;
    text-decoration: none;
    text-transform: capitalize;
    line-height: normal;
    white-space: nowrap;
    transition: color 0.2s ease;
}

a.ncf-popular-link:hover {
    color: #EE822F;
}

.ncf-popular-link--active {
    color: #EE822F;
    font-weight: 400;
}

.ncf-popular-link--no-url {
    cursor: default;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ncf-top-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .ncf-dropdown {
        width: 100%;
    }

    .ncf-popular-row {
        row-gap: 10px;
    }

    .ncf-sep {
        margin: 0 6px;
    }
}






/* ====================================================================
   MOBILE TWEAKS: Global Breadcrumbs & Return Button Inline Flow
   ==================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. Global Parent Container Fix: 
          Uses :has() to target ANY container holding the breadcrumbs, 
          disabling flexbox so elements flow like natural text. */
    .brxe-container:has(> .brxe-breadcrumbs) {
        display: block !important; 
        line-height: 22px !important; /* <--- REDUCED FROM 28px */
        text-align: left !important;
    }

    /* 2. Wrappers: Force the nav and the shortcode div to act like inline text */
    .brxe-breadcrumbs,
    .brxe-container:has(> .brxe-breadcrumbs) > .brxe-shortcode {
        display: inline !important;
    }
    
    /* 3. Breadcrumb Items & Separators: Inline layout, middle-aligned */
    .brxe-breadcrumbs .item,
    .brxe-breadcrumbs .separator {
        display: inline !important;
        white-space: normal !important;
        word-break: break-all !important; 
        vertical-align: middle !important;
        padding: 0 !important;
    }

    /* 4. The Separator (>>) Spacing */
    .brxe-breadcrumbs .separator {
        margin: 0 4px !important;
        font-size: 0.9em !important;
    }

    /* 5. The Home SVG Icon alignment */
    .brxe-breadcrumbs .item svg {
        display: inline-block !important;
        vertical-align: middle !important;
        position: relative !important;
        top: -2px !important;
        margin-right: 2px !important;
    }

    /* 6. Return Button: Horizontal layout, inline-flex to flow directly after text */
    .return-button {
        display: inline-flex !important;
        flex-direction: row !important; /* Icon on the left, text on the right */
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;               
        margin-top: 0 !important;
        margin-left: 10px !important; /* Gap after the last breadcrumb word */
        vertical-align: middle !important; /* Keeps it flush with the text baseline */
    }

    /* 7. Return label & icon styling */
    .return-button__label {
        line-height: normal !important;       
        font-size: 13px !important;        
    }
    
    .return-button img {
        width: 18px !important; 
        height: 18px !important;
    }

    #brxe-llzxkt {
    padding-right: 5px !important;
    padding-left: 5px !important;
}
}









/* ============================================================
   IC Product Search Overlay — v3
   Replace previous IC Product Search block in:
   wp-content/themes/bricks-child/assets/css/main-styles.css
   ============================================================ */

/* ── Ensure the header search icon is clickable ── */
#searchicon {
    cursor: pointer;
    pointer-events: all;
}

/* ============================================================
   OVERLAY SHELL
   ============================================================ */
#ic-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--background);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

#ic-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

body.ic-no-scroll { overflow: hidden; }

/* ── Close (×) fixed top-right ── */
.ic-overlay-close {
    position: fixed;
    top: 22px;
    right: 28px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: var(--text-title);
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.ic-overlay-close:hover {
    border-color: var(--text-title);
    background: rgba(255, 255, 255, .08);
}

/* ============================================================
   INNER CONTAINER
   ============================================================ */
.ic-search-body {
    max-width: 1360px;
    margin: 0 auto;
    padding: 60px 56px 0;
}

/* ============================================================
   DARK SECTION — search input + hot tags
   All text uses var(--text-title) for visibility
   ============================================================ */
.ic-search-top {
    padding-bottom: 40px;
    border-radius: 0 0 10px 10px;
background: #FFF;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.10);
padding: 20px !important;
margin-bottom: 30px !important;
}

/* Input row */
.ic-input-row {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--bordercolor) !important;
    margin-bottom: 24px;
    border-radius:10px !important;
}

/* Search icon button — charm_search.svg */
.ic-search-go {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    transition: opacity .2s;
}
.ic-search-go:hover { opacity: 1; }

.ic-search-icon-img {
    display: block;
    width: 24px;
    height: 24px;
    /* SVG inherits or is white — filter to match var(--text-title) if needed */
    /* filter: brightness(0) invert(1); */
}

/* Text input */
.ic-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-title);
    font-size: clamp(20px, 2.4vw, 20px);
    font-weight: 300;
    letter-spacing: .01em;
    padding: 4px 0;
    caret-color: var(--text-title);
    -webkit-appearance: none;
    appearance: none;
}
.ic-search-input::placeholder {
    color: var(--text-title);
    opacity: 0.35;
}
.ic-search-input::-webkit-search-cancel-button,
.ic-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Clear (×) button */
.ic-input-clear {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--text-title);
    cursor: pointer;
    padding: 4px;
    opacity: 0.5;
    transition: opacity .2s;
}
.ic-input-clear:hover { opacity: 1; }

/* ── Hot tags bar ── */
.ic-hot-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

/* Fire icon — mdi_fire.svg */
.ic-hot-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: block;
    /* Tint to match var(--text-title) / white */
    /* filter: brightness(0) invert(1); */
}

.ic-hot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ic-hot-tag {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--text-title);
    font-size: 13px;
    padding: 5px 16px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity .2s, border-color .2s, background .2s;
}
.ic-hot-tag:hover {
    opacity: 1;
    border-color: var(--text-title);
    background: rgba(255, 255, 255, .06);
}

/* ============================================================
   WHITE RESULTS SECTION
   ============================================================ */
.ic-results-wrap {
    background: var(--white-text);
    margin: 0 -56px;
    padding: 0 56px 80px;
}

/* ============================================================
   BREADCRUMB BAR
   ============================================================ */
.brxe-breadcrumbs,
.brxe-breadcrumbs a,
.brxe-breadcrumbs span {
    font-size: var(--text-s);
}

.ic-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin-bottom: 36px;
}

.ic-bc-path {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    flex-wrap: wrap;
}

.ic-bc-home {
    color: var(--logo);
    text-decoration: none;
    transition: opacity .2s;
}
.ic-bc-home:hover { opacity: .75; text-decoration: none; }

.ic-bc-sep {
    color: rgba(0, 0, 0, .3);
    font-size: 12px;
}

.ic-bc-term {
    color: rgba(0, 0, 0, .55);
    font-size: 14px;
}

.ic-bc-keyword {
    font-style: italic;
    color: rgba(0, 0, 0, .78);
    font-weight: 500;
}

.ic-bc-return {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--logo);
    border-radius: 999px;
    color: var(--logo);
    font-size: 13px;
    padding: 6px 18px;
    cursor: pointer;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.ic-bc-return:hover {
    background: var(--logo);
    color: #fff;
}
.ic-bc-return svg { flex-shrink: 0; }

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.ic-results-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 0;
    color: rgba(0, 0, 0, .4);
    font-size: 14px;
}

.ic-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, .12);
    border-top-color: var(--logo);
    border-radius: 50%;
    animation: icSpin .7s linear infinite;
}

@keyframes icSpin { to { transform: rotate(360deg); } }

/* ============================================================
   PRODUCT GRID — 5 columns
   ============================================================ */
.ic-results-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 36px 24px;
    width: 100%;
    padding-top: 36px;
}

/* ── Product card ── */
.ic-product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}
.ic-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
    text-decoration: none;
}

/* Square image */
.ic-card-img {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
}
.ic-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.ic-product-card:hover .ic-card-img img { transform: scale(1.06); }

.ic-no-thumb {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, .15);
}
.ic-no-thumb svg { width: 44px; height: 44px; }

/* Card text body */
.ic-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ic-card-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--logo);
    margin-bottom: 7px;
    flex-shrink: 0;
}

/* ── Product title — no line clamp, shows full title ── */
.ic-card-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, .82);
    line-height: 1.55;
    flex: 1;                    /* pushes footer to bottom */
    transition: color .2s;
    /* Removed -webkit-line-clamp so long titles display in full */
    overflow: visible;
    display: block;
}
.ic-product-card:hover .ic-card-title { color: #000; }

/* Card footer: date + read more */
.ic-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, .07);
    flex-shrink: 0;
}

.ic-card-date {
    font-size: 11px;
    color: rgba(0, 0, 0, .38);
    white-space: nowrap;
    flex-shrink: 0;
}

.ic-card-readmore {
    font-size: 12px;
    font-weight: 600;
    color: var(--logo);
    letter-spacing: .02em;
    white-space: nowrap;
    transition: opacity .2s;
    flex-shrink: 0;
}
.ic-product-card:hover .ic-card-readmore { opacity: .75; }

/* ============================================================
   PAGINATION — var(--logo) accent
   ============================================================ */
.ic-results-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.ic-pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 5px;
    color: rgba(0, 0, 0, .5);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.ic-pg-arrow svg { display: block; }

.ic-pg:not([disabled]):hover {
    border-color: var(--logo);
    color: var(--logo);
    background: rgba(0, 0, 0, .02);
}

.ic-pg.is-active {
    background: var(--logo);
    border-color: var(--logo);
    color: #fff;
    font-weight: 600;
    pointer-events: none;
}

.ic-pg[disabled] {
    opacity: .25;
    cursor: not-allowed;
}

/* ============================================================
   NO RESULTS — spans full grid width
   ============================================================ */
.ic-results-grid .ic-empty {
    grid-column: 1 / -1;
    width: 100%;
}

.ic-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 72px 24px 56px;
    width: 100%;
}

.ic-empty-icon {
    width: 88px;
    height: 88px;
    color: rgba(0, 0, 0, .15);
    margin-bottom: 28px;
}
.ic-empty-icon svg { width: 88px; height: 88px; }

.ic-empty-title {
    font-size: clamp(16px, 1.6vw, 22px);
    color: rgba(0, 0, 0, .72);
    margin-bottom: 14px;
    max-width: 600px;
}

.ic-em {
    color: #000;
    font-style: italic;
    font-weight: 600;
}

.ic-empty-msg {
    font-size: 14px;
    color: rgba(0, 0, 0, .42);
    margin-bottom: 36px;
    max-width: 600px;
    line-height: 1.75;
}

.ic-email-lnk {
    color: var(--logo);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-all;
    transition: opacity .2s;
}
.ic-email-lnk:hover { opacity: .75; }

/* Home button — var(--logo) brand colour */
.ic-home-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 40px;
    border: 2px solid var(--logo);
    border-radius: 999px;
    color: var(--logo);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.ic-home-btn:hover {
    background: var(--logo);
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   BRICKS TEMPLATE SECTION (below results)
   ============================================================ */
.ic-below-results {
    margin-top: 60px;
    padding-top: 48px;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1199px) {
    .ic-results-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
    .ic-search-body  { padding: 48px 36px 0; }
    .ic-results-wrap { margin: 0 -36px; padding: 0 36px 60px; }
    .ic-results-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .ic-search-body    { padding: 56px 20px 0; }
    .ic-results-wrap   { margin: 0 -20px; padding: 0 20px 48px; }
    .ic-results-grid   { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
    .ic-overlay-close  { top: 14px; right: 16px; }
    .ic-bc-return-label { display: none; }
}

@media (max-width: 479px) {
    .ic-results-grid { gap: 16px 10px; }
    .ic-hot-tag      { font-size: 12px; padding: 4px 12px; }
    .ic-card-body    { padding: 10px 12px 12px; }
}







.return-button {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.return-button:hover {
    opacity: 1;
}

.return-button img {
    /* Adjust size as needed */
    width: 24px;
    height: 24px;
}

.return-button__label {
    color: #444;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    text-transform: capitalize;
}



.return-button:hover img {
    /* Converts black to #EE822F */
    filter: invert(56%) sepia(88%) saturate(1376%) hue-rotate(346deg) brightness(96%) contrast(92%);
}

.return-button:hover .return-button__label {
    color: #EE822F;
}




/* -----------------------------------------------
   Single Product Tab Documents [single_product_tab_documents]
----------------------------------------------- */

.sptd-documents-table {
    width: 100%;
}

.sptd-row {
    display: flex;
    align-items: stretch;
}

.sptd-col {
    padding: 10px 16px;
}

.sptd-col--label {
    flex: 0 0 60%;
    max-width: 60%;
}

.sptd-col--link {
    flex: 1;
}

/* Dark row */
.sptd-row--dark .sptd-col--label,
.sptd-row--dark .sptd-col--link {
    background-color: #E6E6E6;
    color: #222222;
}

/* Light row */
.sptd-row--light .sptd-col--label,
.sptd-row--light .sptd-col--link {
    background-color: #F8F8F8;
    color: #222222;
}

/* Download link — always blue */
.sptd-download-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1466D0;
    text-decoration: none;
}

.sptd-download-link:hover {
    text-decoration: underline;
    color: #1466D0;
}

.sptd-download-arrow {
    flex-shrink: 0;
}

/* Notices */
.sptd-no-documents {
    padding: 10px;
    color: #666;
}








/* Sticky floating widget: right-bottom corner */
#stickybar.brxe-section {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  pointer-events: none; /* allow inner links to receive pointer events */
}

/* Container inside the fixed section that actually receives clicks */
#stickybar .brxe-container {
pointer-events: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end !important;
  width: auto !important;         /* Stops it from spanning full width */
  margin-right: 0 !important;     /* Overrides the default Bricks centering */
  margin-left: auto !important;   /* Pushes the container to the right */
  align-self: flex-end !important;/* Pushes it right if the parent is a flexbox */
}

/* Social icons list styling */
#stickyicons.brxe-social-icons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 240ms ease, opacity 240ms ease;
  transform-origin: bottom right;
  width: 60px !important;
}

/* Individual icon items */
#stickyicons .repeater-item {
  margin: 0;
}

/* Links and icons */
#stickyicons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 18px;
  transition: transform 160ms ease, background 160ms ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

#stickyicons span{
    display:none !important;
}


/* Icon hover/focus */
#stickyicons a:hover,
#stickyicons a:focus {
  transform: translateY(-3px);
  background: #ff7f2a;
  outline: none;
}


/* Hide on very small screens if needed */
@media (max-width: 420px) {
  #stickybar {
    right: 10px;
    bottom: 10px;
  }

  #stickyicons a {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}


@media (max-width: 420px) {
    #stickybar{
        width: 15% !important;
    }
}



/* Hover image container injected by JS */
.sticky-hover-image {
  position: absolute;
  right: calc(100% + 12px) !important; /* place to the left of the icon column */
  top: 50%;
  transform: translateY(-50%) translateX(-20px);
  width: 220px;
  max-width: 40vw;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 99999;
  white-space: normal;
}

/* Image inside container */
.sticky-hover-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Visible state */
.repeater-item.show-hover .sticky-hover-image,
.repeater-item:focus-within .sticky-hover-image,
.repeater-item:hover .sticky-hover-image {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* On small screens place above the icon to avoid off-screen */
@media (max-width: 480px) {
  .sticky-hover-image {
    right: auto;
    /* left: 50%; */
    top: auto;
    /* bottom: calc(100% + 8px); */
    transform: translateX(-50%) translateY(0);
    max-width: 80vw;
    width: 180px;
    top: 0% !important;
  }
}

/* Ensure list items are positioning context */
#stickyicons .repeater-item {
  position: relative;
}







@media (max-width: 767px) {
    /* 1. Force the parent container into a row and prevent wrapping */
    #brxe-bdmmad {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important; /* Use 'center' if you want them grouped together */
        align-items: center !important;
        gap: 10px !important;
    }

    /* 2. Override the 100% width on the child elements so they can sit side-by-side */
    #brxe-bdmmad > .brxe-block {
        width: auto !important;
        flex: 0 1 auto !important; 
    }
    
    /* 3. (Optional) If the text inside is breaking onto new lines, force it to stay inline */
    #brxe-bdmmad > .brxe-block .brxe-text-basic {
        white-space: nowrap !important;
    }
    #brxe-gatdoz{ justify-content: flex-start;}

    .spd-product-tables {
        display: flex;
        flex-direction: column;
        gap: 20px !important; /* Adjust this value to increase or decrease the space between the tables */
    }

    .spd-table-one, 
    .spd-table-two {
        width: 100% !important; /* Forces both tables to expand to the full width of their container, making them equal */
    }

    
}





@media only screen and (min-width: 769px) and (max-width: 992px) {
 
#brxe-olhldf {
margin-right:5px !important;
width: 10% !important;
}

:where(.brxe-nav-menu) .bricks-nav-menu>li {
    margin: 0 0 0 5px !important;
    width: 85% !important;
}
div#brxe-txgrah {
    width: 90% !important;
}

#brxe-txgrah {
    column-gap: var(--space-l) !important;
}
div#brxe-uofyqe {
    width: 100% !important;
}
#brxe-tmydqn {
    width: 25% !important;
}
.topbanner {
    padding-bottom: 300px !important;
}

    .pcat-default-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    #brxe-hgjynk .splide__arrow--prev {
    left: 93%;
}
#brxe-ntpeos .splide__arrow--prev {
    left: 93%;
}
#brxe-rxjzcc .splide__arrow--prev {
    left: 93%;
}
#menu-footer-top-links :where(.brxe-nav-menu) .bricks-nav-menu>li {
        width: auto !important;
    }


#menu-footer-top-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow-x: auto !important; /* Allows horizontal scrolling if the screen is too small */
}

/* Force the list items to behave and not break onto new lines */
#menu-footer-top-links li {
    display: block !important;
    width: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important; /* Prevents the items from squishing together too much */
}

#category-siblings {
    grid-template-columns: 1fr 1fr 1fr;
}

#brxe-btmauw {
    grid-template-columns: 1fr 1fr 1fr;
}


}




@media only screen and (min-width: 993px) and (max-width: 1024px){
 #brxe-olhldf {
    margin-right:14px !important;
    width:10% !important;
}   

div#brxe-txgrah {
    width: 90% !important;
    gap: 10px !important;
}

div#brxe-ewtyai {
    padding-bottom: 230px !important;
}
.pcat-default-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }


 .splide__arrow--prev {
    left: 93%  !important;
}

.news-post-ex {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* The fix for the peeking line: */
    line-height: 1.5em;   /* Sets a consistent line height */
    max-height: 4.5em;    /* 3 lines × 1.5em = exactly 4.5em */
    word-break: break-word; /* Ensures long words don't break the layout */
}
#brxe-asggqh {
    width: 6% !important;
}







  /* 1. Global Parent Container Fix: 
          Uses :has() to target ANY container holding the breadcrumbs, 
          disabling flexbox so elements flow like natural text. */
    .brxe-container:has(> .brxe-breadcrumbs) {
        display: block !important; 
        line-height: 22px !important; /* <--- REDUCED FROM 28px */
        text-align: left !important;
    }

    /* 2. Wrappers: Force the nav and the shortcode div to act like inline text */
    .brxe-breadcrumbs,
    .brxe-container:has(> .brxe-breadcrumbs) > .brxe-shortcode {
        display: inline !important;
    }
    
    /* 3. Breadcrumb Items & Separators: Inline layout, middle-aligned */
    .brxe-breadcrumbs .item,
    .brxe-breadcrumbs .separator {
        display: inline !important;
        white-space: normal !important;
        word-break: break-all !important; 
        vertical-align: middle !important;
        padding: 0 !important;
    }

    /* 4. The Separator (>>) Spacing */
    .brxe-breadcrumbs .separator {
        margin: 0 4px !important;
        font-size: 0.9em !important;
    }

    /* 5. The Home SVG Icon alignment */
    .brxe-breadcrumbs .item svg {
        display: inline-block !important;
        vertical-align: middle !important;
        position: relative !important;
        top: -2px !important;
        margin-right: 2px !important;
    }

    /* 6. Return Button: Horizontal layout, inline-flex to flow directly after text */
    .return-button {
        display: inline-flex !important;
        flex-direction: row !important; /* Icon on the left, text on the right */
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;               
        margin-top: 0 !important;
        margin-left: 10px !important; /* Gap after the last breadcrumb word */
        vertical-align: middle !important; /* Keeps it flush with the text baseline */
    }

    /* 7. Return label & icon styling */
    .return-button__label {
        line-height: normal !important;       
        font-size: 13px !important;        
    }
    
    .return-button img {
        width: 18px !important; 
        height: 18px !important;
    }

    #brxe-llzxkt {
    padding-right: 5px !important;
    padding-left: 5px !important;
}



#category-siblings {
    grid-template-columns: 1fr 1fr 1fr;
}

#brxe-btmauw {
    grid-template-columns: 1fr 1fr 1fr;
}




}

form#brxe-baxkng .form-group label {
   color:var(--text-body) !important;
}