/* Flatsome Title With Category - polished styles for homepage & builder preview */
.wootech-title-cat.section-title-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    position: relative;
    z-index: 99;
}

.wootech-title-cat .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto; /* allow title+cats to share available space without forcing wrap */
    min-width: 0;
    flex-wrap: nowrap; /* prevent children from wrapping to next line */
    border: none;
    overflow: visible !important; /* DO NOT hide overflow, otherwise dropdown gets clipped! */
}

.wootech-title-cat .section-title-main {
    font-size: 26px;
    line-height: 1.5;
    color: #0b1320;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    transition: max-width .18s ease;
    border: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

/* Remove theme-provided underlines if present (override) */
.wootech-title-cat .section-title-main::after,
.wootech-title-cat .section-title-main::before {
    display: none !important;
    content: none !important;
}

.wootech-title-cat .title-show-cats {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding-top: 4px;
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

/* ensure pills are centered area: keep scroller centered visually */
.wootech-title-cat .title-show-cats { justify-content: center; }

.wootech-title-cat .title-show-cats .scroll {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible; /* MUST be visible so the dropdown menu can extend below */
    cursor: default;
}

.wootech-title-cat .title-show-cats .scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* --- Wootech custom styles (UX style selector) --- */

/* INLINE SCROLL RE-DESIGN (1 ROW) */
.wootech-title-cat.wootech-style-inline-scroll .section-title {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--primary-color, #f05a28);
    margin-bottom: 20px;
    padding-bottom: 0;
}
.wootech-title-cat.wootech-style-inline-scroll .section-title-main {
    background: var(--primary-color, #f05a28);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 6px 6px 0 0;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: -1px !important;
    white-space: nowrap;
    z-index: 2;
}
.wootech-title-cat.wootech-style-inline-scroll .title-show-cats {
    flex: 1;
    overflow: visible;
    margin-left: 15px;
    min-width: 0;
    position: relative;
    padding-bottom: 6px; /* space between pills and bottom border */
}
.wootech-title-cat.wootech-style-inline-scroll .section-title .cta {
    margin-left: 15px;
    margin-bottom: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.wootech-title-cat.wootech-style-inline-scroll .section-title .cta a {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color, #f05a28);
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s;
}
.wootech-title-cat.wootech-style-inline-scroll .section-title .cta a::after {
    content: '\2192'; /* → */
    font-size: 14px;
    line-height: 1;
}
.wootech-title-cat.wootech-style-inline-scroll .section-title .cta a:hover {
    opacity: 0.75;
    text-decoration: underline;
}

/* STACK SCROLL RE-DESIGN (2 ROWS) */
.wootech-title-cat.wootech-style-stack-scroll .section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 20px;
}
.wootech-title-cat.wootech-style-stack-scroll .section-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--primary-color, #f05a28);
    order: 2;
}
.wootech-title-cat.wootech-style-stack-scroll .section-title-main {
    order: 1;
    background: var(--primary-color, #f05a28);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 6px 6px 0 0;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0 !important;
    transform: translateY(1px);
    z-index: 2;
    max-width: 80%;
}
.wootech-title-cat.wootech-style-stack-scroll .section-title .cta {
    order: 1;
    margin-left: auto;
    margin-bottom: 6px;
    padding-right: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.wootech-title-cat.wootech-style-stack-scroll .section-title .cta a {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color, #f05a28);
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s;
}
.wootech-title-cat.wootech-style-stack-scroll .section-title .cta a::after {
    content: '\2192'; /* → */
    font-size: 14px;
    line-height: 1;
}
.wootech-title-cat.wootech-style-stack-scroll .section-title .cta a:hover {
    opacity: 0.75;
    text-decoration: underline;
}
.wootech-title-cat.wootech-style-stack-scroll .title-show-cats {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-top: 12px;
    position: relative;
    overflow: visible; /* allow dropdown to extend below */
}

/* SHARED PILL STYLES FOR BOTH */
.wootech-title-cat.wootech-style-stack-scroll .title-show-cats .scroll a,
.wootech-title-cat.wootech-style-inline-scroll .title-show-cats .scroll a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px; /* Fixed height for exact match */
    border: 1px solid #ddd;
    color: #555;
    background: #fff;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap;
    transition: all 0.2s;
}
.wootech-title-cat.wootech-style-stack-scroll .title-show-cats .scroll a:hover,
.wootech-title-cat.wootech-style-inline-scroll .title-show-cats .scroll a:hover {
    color: var(--primary-color, #f05a28);
    border-color: var(--primary-color, #f05a28);
    background: #fff;
    transform: none;
}

/* Force wrapping for BOTH so JS can detect overflows */
.wootech-title-cat.wootech-style-stack-scroll .title-show-cats .scroll > ul,
.wootech-title-cat.wootech-style-inline-scroll .title-show-cats .scroll > ul {
    display: flex !important;
    gap: 10px;
    flex-wrap: nowrap !important; /* JS handles overflow — no physical wrapping needed */
    min-width: 0;
    white-space: normal;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
}
.wootech-title-cat.wootech-style-inline-scroll .title-show-cats .scroll ul {
    justify-content: flex-end; /* Align right on 1 row */
}

.wootech-title-cat .title-show-cats .scroll li {
    list-style: none !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

/* More button — the "+X Danh mục" trigger */
.more-cats-btn {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center;
}
.more-cats-btn > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px; /* Fixed height to match pills */
    gap: 4px;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: var(--primary-color, #f05a28);
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: inherit;
    margin: 0;
}
.more-cats-btn > button:hover {
    background: var(--primary-color, #f05a28);
    border-color: var(--primary-color, #f05a28);
    color: #fff;
}

/* More Dropdown Menu Styles */
.wootech-title-cat .title-show-cats .more-dropdown {
    position: absolute;
    z-index: 99;
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 160px;
    top: calc(100% + 4px); /* Gần sát với nút */
    right: 0;
    list-style: none !important;
    flex-direction: column;
    gap: 4px;
    margin: 0 !important;
}
.wootech-title-cat .title-show-cats .more-dropdown li {
    margin: 0 !important;
    white-space: nowrap;
}
.wootech-title-cat .title-show-cats .more-dropdown a {
    display: block !important;
    border: none !important;
    background: transparent !important;
    border-radius: 4px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: left;
    white-space: nowrap;
    color: #333;
}
.wootech-title-cat .title-show-cats .more-dropdown a:hover {
    background: #f5f5f5 !important;
    color: var(--primary-color, #f05a28) !important;
}

.wootech-title-cat.wootech-title-align-center .section-title {
    justify-content: center;
}

.wootech-title-cat.wootech-title-align-center .section-title-main {
    text-align: center;
    margin: 0 auto !important;
}

/* Fix stack-scroll center alignment */
.wootech-title-cat.wootech-style-stack-scroll.wootech-title-align-center .section-title {
    justify-content: center;
}

.wootech-title-cat.wootech-style-stack-scroll.wootech-title-align-center .section-title-main {
    margin: 0 auto !important;
}

/* Nâng cta lên absolute nếu căn giữa để không bị lệch mảng chữ */
.wootech-title-cat.wootech-title-align-center .cta {
    position: absolute;
    right: 0;
    bottom: 6px;
    margin-left: 0 !important;
}

.wootech-title-cat.wootech-style-inline-scroll.wootech-title-align-center .section-title-main {
    margin: 0 auto !important;
}

/* Nếu có danh mục (title-show-cats) và đang căn giữa 1 hàng, bỏ flex:1 để không chiếm chỗ đẩy title sang trái */
.wootech-title-cat.wootech-style-inline-scroll.wootech-title-align-center .title-show-cats {
    flex: 0 1 auto;
}

    .wootech-title-cat.wootech-style-inline-scroll .section-title-main {
        max-width: 100%;
        white-space: normal;
    }
}

/* Ensure dropdowns are never clipped by Flatsome's native scroll wrapper */
.wootech-title-cat .title-show-cats .scroll {
    overflow: visible !important;
}

@media (max-width: 479px) {
    .wootech-title-cat .section-title-main { font-size: 16px; }
    .wootech-title-cat .title-show-cats .scroll a { font-size: 12px; padding: 5px 10px; }
}

/* Fix blank space on single product variations when availability is empty */
.woocommerce-variation.single_variation {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.woocommerce-variation-price:empty,
.woocommerce-variation-availability:empty,
.woocommerce-variation-description:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
table.variations {
    margin-bottom: 10px !important;
}