/* ============================================================
   Header "Advice-style" polish — unified pills, bigger clearer
   text/icons, evenly spread nav. Loaded LAST to override.
   ไม่ตัดเนื้อหาใด ๆ ออก ปรับเฉพาะขนาด/ระยะ/ทรงปุ่ม
   ============================================================ */

/* ---------- Header row ---------- */
html body .main-header-wrapper-v2 {
    padding: 0.9rem 0 !important;
}

@media (min-width: 992px) {
    html body .main-header-wrapper-v2 .header-layout-v2 {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        grid-template-columns: none !important;
        width: var(--dcsc-shell-width, min(1877px, calc(100% - 48px))) !important;
        max-width: var(--dcsc-shell-max, 1877px) !important;
        gap: 1rem !important;
        margin: 0 auto !important;
        padding: 0 0.25rem !important;
    }

    html body .main-header-wrapper-v2 .header-left-v2 {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
    }

    html body .main-header-wrapper-v2 .header-center-v2 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    html body .main-header-wrapper-v2 .search-container-v2 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    html body .main-header-wrapper-v2 .header-right-v2 {
        flex: 0 0 auto !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
    }

    html body .main-header-wrapper-v2 .header-right-actions-v2,
    html body .main-header-wrapper-v2 .header-right-v2 .user-menu-v2 {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    html body .main-header-wrapper-v2 .brand-container-v2,
    html body .main-header-wrapper-v2 .brand-text-v2 {
        width: max-content !important;
        max-width: none !important;
        overflow: visible !important;
    }

    html body .main-header-wrapper-v2 #shop-name-display-v2 {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: 1.15rem !important;
    }
}

html body #shop-logo-main-v2 {
    width: 81px !important;
    height: 81px !important;
    border-radius: 18px !important;
}

html body #shop-name-display-v2 { font-size: 1.42rem !important; letter-spacing: -0.01em; }

/* Search bar: big rounded like Advice */
html body .header-center-v2 { max-width: 780px !important; }

html body .search-bar-v2 {
    border-radius: 999px !important;
    padding: 0.3rem 0.3rem 0.3rem 0.9rem !important;
    border: 2px solid rgba(30, 60, 114, 0.12) !important;
}

html body #search-input-main-v2 {
    font-size: 1rem !important;
    padding: 0.65rem 0.9rem !important;
}

html body #search-button-main-v2 {
    border-radius: 999px !important;
    padding: 0.65rem 1.35rem !important;
    font-size: 1.05rem !important;
}

/* ---------- Action buttons: uniform pills, same height ---------- */
html body .user-menu-v2 { gap: 0.45rem !important; }

html body .user-menu-v2 > a,
html body .user-menu-v2 .repair-entry-btn-v2,
html body .user-menu-v2 .repair-status-btn-v2,
html body .user-menu-v2 .warranty-check-btn-v2,
html body .user-menu-v2 .delivery-tracking-btn-v2,
html body .user-menu-v2 .cart-link-v2,
html body .user-menu-v2 .login-btn-v2 {
    height: 42px !important;
    min-height: 42px !important;
    width: auto !important;
    min-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

html body .user-menu-v2 > a i { font-size: 0.98rem !important; }

html body .user-menu-v2 > a span,
html body .user-menu-v2 .cart-text-v2 {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
}

/* ปุ่มแจ้งซ่อม Onsite — โทนส้มเด่น (accent) */
html body .user-menu-v2 .repair-entry-btn-v2 {
    background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
    border: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35) !important;
    text-decoration: none !important;
}
html body .user-menu-v2 .repair-entry-btn-v2 span,
html body .user-menu-v2 .repair-entry-btn-v2 i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body .user-menu-v2 .repair-entry-btn-v2:hover {
    background: linear-gradient(135deg, #f75b22, #ee8709) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.45) !important;
}

/* ปุ่มติดตามพัสดุ — ฟ้าน้ำทะเล (accent) */
html body .user-menu-v2 .delivery-tracking-btn-v2 {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    border: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.32) !important;
    text-decoration: none !important;
}
html body .user-menu-v2 .delivery-tracking-btn-v2 span,
html body .user-menu-v2 .delivery-tracking-btn-v2 i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body .user-menu-v2 .delivery-tracking-btn-v2:hover {
    background: linear-gradient(135deg, #0993d1, #0273ae) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ปุ่มรอง (เช็คงานซ่อม/เช็คประกัน/เข้าสู่ระบบ) — ขาวสะอาดขอบฟ้า */
html body .user-menu-v2 .repair-status-btn-v2,
html body .user-menu-v2 .warranty-check-btn-v2,
html body .user-menu-v2 .login-btn-v2 {
    background: #ffffff !important;
    border: 1.5px solid rgba(30, 60, 114, 0.16) !important;
    color: #123f86 !important;
    -webkit-text-fill-color: #123f86 !important;
    box-shadow: 0 3px 10px rgba(9, 46, 116, 0.1) !important;
    text-decoration: none !important;
}
html body .user-menu-v2 .repair-status-btn-v2:hover,
html body .user-menu-v2 .warranty-check-btn-v2:hover,
html body .user-menu-v2 .login-btn-v2:hover {
    background: #f4f9ff !important;
    border-color: #7db6f5 !important;
    color: #0f4e9f !important;
    -webkit-text-fill-color: #0f4e9f !important;
}

/* ตะกร้า — น้ำเงินไล่สี */
html body .user-menu-v2 .cart-link-v2 {
    background: linear-gradient(180deg, #4898ff 0%, #2f6fe3 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(11, 74, 171, 0.28) !important;
    text-decoration: none !important;
}
html body .user-menu-v2 .cart-link-v2 span,
html body .user-menu-v2 .cart-link-v2 i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body .cart-badge-v2 { top: -6px !important; right: -4px !important; }

/* ซ่อนกล่องผู้ใช้เมื่อยังไม่ได้ล็อกอิน (inline display:none ต้องชนะเสมอ) */
html body #header-user-info-v2[style*="display: none"],
html body #header-user-info-v2[style*="display:none"] {
    display: none !important;
}

/* แสดงข้อความบนปุ่มเสมอในจอ ≥ 1200px (เดิมโดนซ่อนเหลือแค่ไอคอน) */
@media (min-width: 1200px) {
    html body .header-right-v2 .user-menu-v2 .warranty-check-btn-v2 span,
    html body .header-right-v2 .user-menu-v2 .repair-entry-btn-v2 span,
    html body .header-right-v2 .user-menu-v2 .repair-status-btn-v2 span,
    html body .header-right-v2 .user-menu-v2 .delivery-tracking-btn-v2 span,
    html body .header-right-v2 .user-menu-v2 .login-btn-v2 span,
    html body .header-right-v2 .header-cart-slot-v2 .cart-link-v2 .cart-text-v2,
    html body .header-right-v2 .user-menu-v2 .cart-text-v2 {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }
    html body .header-right-v2 .user-menu-v2 .warranty-check-btn-v2,
    html body .header-right-v2 .user-menu-v2 .repair-status-btn-v2,
    html body .header-right-v2 .user-menu-v2 a,
    html body .header-right-v2 .user-menu-v2 button {
        width: auto !important;
        min-width: max-content !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        gap: 7px !important;
    }
    html body .header-right-v2 .header-cart-slot-v2 .cart-link-v2--standalone {
        width: auto !important;
        min-width: max-content !important;
        height: 42px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        gap: 7px !important;
    }
}

@media (max-width: 1199.98px) {
    html body .user-menu-v2 > a,
    html body .user-menu-v2 .cart-link-v2,
    html body .user-menu-v2 .login-btn-v2 {
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
    }
}

/* ---------- Nav row: spread items like Advice ---------- */
html body nav.main-nav {
    min-height: 54px !important;
    display: flex !important;
    align-items: stretch !important;
}

html body nav.main-nav .main-nav-full-width,
html body #main-nav-container,
html body nav.main-nav #main-nav-container.container.main-nav-full-width {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: clamp(0.5rem, 1.5vw, 1.5rem) !important;
    max-width: min(100vw - 24px, var(--dcsc-shell-max, 1877px)) !important;
    width: min(100%, var(--dcsc-shell-width, calc(100vw - 48px))) !important;
    margin: 0 auto !important;
    padding: 0.4rem 1.5rem !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
}

/* ---------- 3 กลุ่มเมนูแบบ Advice ---------- */
html body #main-nav-container .nav-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(0.3rem, 1vw, 1rem) !important;
    min-width: 0;
}

/* ซ้าย: ปุ่มหมวดหมู่สินค้า */
html body #main-nav-container .nav-group--left {
    flex: 0 0 auto !important;
}

/* กลาง: เมนูหลัก จัดกึ่งกลางแถบ */
html body #main-nav-container .nav-group--center {
    flex: 1 1 auto !important;
    justify-content: center !important;
    gap: clamp(0.35rem, 1.4vw, 1.5rem) !important;
}

/* ขวา: กลุ่มองค์กร ชิดขวาเสมอ */
html body #main-nav-container .nav-group--right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding-left: 0 !important;
    border-left: none !important;
}

/* มือถือ: เมนูเป็นแถบเลื่อนแนวนอนแถวเดียว ไม่ให้ปุ่มหล่นลงแนวตั้ง */
@media (max-width: 991.98px) {
    html body nav.main-nav {
        min-height: 0 !important;
        padding: 8px 0 !important;
        overflow: hidden !important;
    }

    html body nav.main-nav .main-nav-full-width,
    html body #main-nav-container,
    html body nav.main-nav #main-nav-container.container.main-nav-full-width {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        align-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 10px !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        row-gap: 0 !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    html body #main-nav-container::-webkit-scrollbar {
        display: none !important;
    }

    html body #main-nav-container .nav-group,
    html body #main-nav-container .nav-group--left,
    html body #main-nav-container .nav-group--center,
    html body #main-nav-container .nav-group--right {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        border: none !important;
    }

    html body #main-nav-container .nav-group--center {
        justify-content: flex-start !important;
    }

    html body #main-nav-container .nav-group--right {
        margin-left: 0 !important;
        border-left: none !important;
        padding-left: 0 !important;
    }

    html body nav.main-nav #main-nav-container a.secondary-nav-item-link,
    html body nav.main-nav #main-nav-container .nav-item-wrapper > .header-nav-dropdown-trigger {
        flex: 0 0 auto !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        background: rgba(255, 255, 255, 0.14) !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html body nav.main-nav .header-nav-category-trigger,
    html body nav.main-nav #main-nav-container .nav-item-wrapper--category > .header-nav-dropdown-trigger {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 12px 0 6px !important;
        font-size: 0.8rem !important;
        background: #ffffff !important;
        border: 2px solid #46a6f8 !important;
        box-shadow: 0 4px 12px rgba(22, 103, 194, 0.16) !important;
    }

    html body nav.main-nav .header-nav-category-trigger__icon,
    html body #main-nav-container .header-nav-category-trigger__icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        margin-right: 4px !important;
    }
}

/* ปุ่มหมวดหมู่สินค้า: pill เด่นด้านซ้าย (ขนาดย่อตามจอเพื่อให้อยู่บรรทัดเดียว) */
html body nav.main-nav .header-nav-category-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(6px, 0.5vw, 10px) !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 0.3rem clamp(10px, 0.9vw, 18px) 0.3rem 0.4rem !important;
    border-radius: 999px !important;
    font-size: clamp(0.8rem, 0.95vw, 1.15rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    white-space: nowrap !important;
}

/* ไอคอนหมวดหมู่: Windows logo + แอนิเมชันคลื่นน้ำ (ขยาย 100% จากเดิม: 22→44) */
html body nav.main-nav .header-nav-category-trigger__icon,
html body nav.main-nav #main-nav-container > .nav-item-wrapper.nav-item-wrapper--category > .header-nav-dropdown-trigger .header-nav-category-trigger__icon,
html body #main-nav-container .header-nav-category-trigger__icon {
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

html body nav.main-nav #main-nav-container .header-nav-category-trigger .header-nav-category-trigger__icon i.fa-table-cells-large,
html body nav.main-nav #main-nav-container .header-nav-category-trigger .header-nav-category-trigger__icon i.fa-magnifying-glass,
html body nav.main-nav #main-nav-container .header-nav-category-trigger .header-nav-category-trigger__icon i.fa-bars {
    display: none !important;
}

html body nav.main-nav .header-nav-category-trigger__icon .win-logo-wave,
html body nav.main-nav #main-nav-container .header-nav-category-trigger__icon .win-logo-wave,
#category-menu-trigger .win-logo-wave {
    width: 44px !important;
    height: 44px !important;
    display: block !important;
    overflow: visible !important;
}

html body nav.main-nav .header-nav-category-trigger__icon .win-pane,
#category-menu-trigger .win-pane {
    transform-box: fill-box;
    transform-origin: center;
    animation:
        win-logo-water-wave 2.6s ease-in-out infinite,
        win-logo-seven-colors 7s linear infinite;
}

html body nav.main-nav .header-nav-category-trigger__icon .win-pane--1,
#category-menu-trigger .win-pane--1 {
    animation-delay: 0s, 0s;
}
html body nav.main-nav .header-nav-category-trigger__icon .win-pane--2,
#category-menu-trigger .win-pane--2 {
    animation-delay: 0.18s, -1s;
}
html body nav.main-nav .header-nav-category-trigger__icon .win-pane--3,
#category-menu-trigger .win-pane--3 {
    animation-delay: 0.36s, -2s;
}
html body nav.main-nav .header-nav-category-trigger__icon .win-pane--4,
#category-menu-trigger .win-pane--4 {
    animation-delay: 0.54s, -3s;
}

@keyframes win-logo-water-wave {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    20% {
        transform: translateY(-1.8px) scale(1.08);
        opacity: 0.95;
    }
    40% {
        transform: translateY(1.2px) scale(0.94);
        opacity: 1;
    }
    60% {
        transform: translateY(-1px) scale(1.04);
        opacity: 0.97;
    }
    80% {
        transform: translateY(0.6px) scale(0.98);
        opacity: 1;
    }
}

/* วนครบ 7 สี: แดง → ส้ม → เหลือง → เขียว → ฟ้า → น้ำเงิน → ม่วง */
@keyframes win-logo-seven-colors {
    0%, 100% { fill: #ef4444; }
    14.28%   { fill: #f97316; }
    28.56%   { fill: #eab308; }
    42.84%   { fill: #22c55e; }
    57.12%   { fill: #3b82f6; }
    71.4%    { fill: #6366f1; }
    85.68%   { fill: #a855f7; }
}

@media (prefers-reduced-motion: reduce) {
    html body nav.main-nav .header-nav-category-trigger__icon .win-pane,
    #category-menu-trigger .win-pane {
        animation: none !important;
        fill: #3b82f6 !important;
    }
}

/* เมนูหลัก: ตัวหนังสือใหญ่สุดเท่าที่ 1 บรรทัดรับได้ ย่อ-ขยายตามความกว้างจอ */
html body nav.main-nav #main-nav-container a.secondary-nav-item-link,
html body nav.main-nav #main-nav-container .nav-item-wrapper > .header-nav-dropdown-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(3px, 0.3vw, 7px) !important;
    height: 46px !important;
    padding: 0 clamp(4px, 0.42vw, 9px) !important;
    border-radius: 10px !important;
    font-size: clamp(0.72rem, 0.84vw, 1.02rem) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color .15s ease, transform .15s ease;
}

html body nav.main-nav #main-nav-container a.secondary-nav-item-link span,
html body nav.main-nav #main-nav-container .nav-item-wrapper > .header-nav-dropdown-trigger span {
    font-size: clamp(0.72rem, 0.84vw, 1.02rem) !important;
    font-weight: 600 !important;
}

html body nav.main-nav #main-nav-container a.secondary-nav-item-link i,
html body nav.main-nav #main-nav-container .nav-item-wrapper > .header-nav-dropdown-trigger i {
    font-size: clamp(0.66rem, 0.76vw, 0.92rem) !important;
}

/* แก้พื้นหลังขาวจาก homepage-professional-polish.css ที่ทำให้ตัวหนังสือขาวมองไม่เห็น */
html body nav.main-nav #main-nav-container .nav-group .nav-item-wrapper:not(.nav-item-wrapper--category) > button.header-nav-dropdown-trigger {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
}
html body nav.main-nav #main-nav-container .nav-group .nav-item-wrapper:not(.nav-item-wrapper--category) > button.header-nav-dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}

/* ปุ่มหมวดหมู่สินค้า: pill ขาว ตัวหนังสือน้ำเงินแบบ Advice */
html body nav.main-nav #main-nav-container .nav-group .nav-item-wrapper--category > button.header-nav-category-trigger.header-nav-dropdown-trigger {
    background: #ffffff !important;
    border: 2px solid rgba(74, 168, 247, 0.55) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14) !important;
    height: auto !important;
    min-height: 56px !important;
    color: #1185df !important;
    -webkit-text-fill-color: #1185df !important;
}
html body nav.main-nav #main-nav-container .nav-group .nav-item-wrapper--category > button.header-nav-category-trigger.header-nav-dropdown-trigger span,
html body nav.main-nav #main-nav-container .nav-group .nav-item-wrapper--category > button.header-nav-category-trigger.header-nav-dropdown-trigger i {
    color: #1185df !important;
    -webkit-text-fill-color: #1185df !important;
}

/* เดสก์ท็อป: บังคับ 1 บรรทัดเสมอ ระยะห่างย่อตามจอ */
@media (min-width: 992px) {
    html body nav.main-nav .main-nav-full-width,
    html body #main-nav-container,
    html body nav.main-nav #main-nav-container.container.main-nav-full-width {
        flex-wrap: nowrap !important;
        gap: clamp(0.35rem, 0.8vw, 1.25rem) !important;
        padding: 0.4rem clamp(0.75rem, 1vw, 1.5rem) !important;
    }
    html body #main-nav-container .nav-group--center,
    html body #main-nav-container .nav-group--right {
        flex-wrap: nowrap !important;
    }
    html body #main-nav-container .nav-group--center {
        gap: clamp(0.1rem, 0.35vw, 0.7rem) !important;
    }
    html body #main-nav-container .nav-group {
        gap: clamp(0.1rem, 0.3vw, 0.6rem) !important;
    }
}


html body nav.main-nav #main-nav-container a.secondary-nav-item-link:hover,
html body nav.main-nav #main-nav-container .nav-item-wrapper > .header-nav-dropdown-trigger:hover {
    transform: translateY(-1px);
}

/* จอกว้างมาก: กระจายเมนูเต็มแถบแบบ Advice */
@media (min-width: 1800px) {
    html body #main-nav-container {
        gap: 2rem !important;
        padding: 0.4rem 2rem !important;
    }
}

/* จอเล็กกว่า: เมนูชิดซ้ายตามปกติเพื่อไม่ให้ระยะห่างแปลก */
@media (max-width: 991.98px) {
    html body nav.main-nav .main-nav-full-width,
    html body #main-nav-container {
        justify-content: flex-start !important;
    }
}

@media (max-width: 991.98px) {
    html body nav.main-nav #main-nav-container a.secondary-nav-item-link,
    html body nav.main-nav #main-nav-container .nav-item-wrapper > .header-nav-dropdown-trigger {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        font-size: 0.78rem !important;
    }
    html body nav.main-nav .header-nav-category-trigger {
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px 0 6px !important;
        font-size: 0.8rem !important;
    }
}

/* ==========================================================
   Mega menu หมวดหมู่สินค้า แบบ Advice
   หมวดหลักอยู่แถบซ้าย หมวดย่อยกางออกทางขวาเป็นคอลัมน์
   ========================================================== */
html body #main-nav-container .nav-item-wrapper--category > .header-nav-dropdown--category.header-nav-megamenu {
    width: min(1120px, calc(100vw - 48px)) !important;
    max-width: min(1120px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
    overflow: hidden !important;
    border-radius: 0 0 16px 16px !important;
    background: #ffffff !important;
    border: 1px solid #dbe6f5 !important;
    border-top: 0 !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18) !important;
    /* Prevent generic .header-nav-dropdown top: calc(100% + 10px) from shoving fixed menu down */
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
}

html body #main-nav-container .nav-item-wrapper--category.is-open > .header-nav-dropdown--category.header-nav-megamenu {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    position: fixed !important;
    z-index: 10050 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    margin: 0 !important;
    transform: none !important;
}

/* แถบหมวดหลักด้านซ้าย */
html body #main-nav-container .header-nav-megamenu__sidebar {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 12px 10px !important;
    overflow-y: auto !important;
    background: #f7fafd !important;
    border-right: 1px solid #e4edf7 !important;
}

html body #main-nav-container .header-nav-megamenu__cat {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #33475f !important;
    -webkit-text-fill-color: #33475f !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: background-color .12s ease, color .12s ease;
}

html body #main-nav-container .header-nav-megamenu__cat span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body #main-nav-container .header-nav-megamenu__cat i {
    font-size: 0.68rem !important;
    color: #9db4cc !important;
    -webkit-text-fill-color: #9db4cc !important;
    flex: 0 0 auto !important;
}

html body #main-nav-container .header-nav-megamenu__cat:hover,
html body #main-nav-container .header-nav-megamenu__cat.is-active {
    background: #e3f1fd !important;
    color: #1185df !important;
    -webkit-text-fill-color: #1185df !important;
}

html body #main-nav-container .header-nav-megamenu__cat:hover i,
html body #main-nav-container .header-nav-megamenu__cat.is-active i {
    color: #1185df !important;
    -webkit-text-fill-color: #1185df !important;
}

/* พื้นที่หมวดย่อยด้านขวา */
html body #main-nav-container .header-nav-megamenu__panel {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    padding: 18px 24px 22px !important;
    background: #ffffff !important;
}

html body #main-nav-container .header-nav-megamenu__head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    border-bottom: 2px solid #e8f1fa !important;
}

html body #main-nav-container .header-nav-megamenu__head-title {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #16325f !important;
    -webkit-text-fill-color: #16325f !important;
    text-transform: uppercase;
}

html body #main-nav-container .header-nav-megamenu__viewall {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #1185df !important;
    -webkit-text-fill-color: #1185df !important;
    text-decoration: none !important;
}

html body #main-nav-container .header-nav-megamenu__viewall:hover {
    text-decoration: underline !important;
}

html body #main-nav-container .header-nav-megamenu__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px 28px !important;
}

html body #main-nav-container .header-nav-megamenu__group {
    min-width: 0 !important;
}

html body #main-nav-container .header-nav-megamenu__group-title {
    display: block !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #17325f !important;
    -webkit-text-fill-color: #17325f !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #edf3fa !important;
}

html body #main-nav-container .header-nav-megamenu__group-title:hover {
    color: #1185df !important;
    -webkit-text-fill-color: #1185df !important;
}

html body #main-nav-container .header-nav-megamenu__link {
    display: block !important;
    padding: 4px 0 !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    color: #5a6f88 !important;
    -webkit-text-fill-color: #5a6f88 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color .12s ease;
}

html body #main-nav-container .header-nav-megamenu__link:hover {
    color: #1185df !important;
    -webkit-text-fill-color: #1185df !important;
}

/* จอกลาง: ลดคอลัมน์หมวดย่อยเหลือ 2 */
@media (max-width: 1250px) {
    html body #main-nav-container .header-nav-megamenu__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    html body #main-nav-container .header-nav-megamenu__sidebar {
        flex: 0 0 240px !important;
        max-width: 240px !important;
    }
}

/* มือถือ: เรียงบน-ล่าง หมวดหลักอยู่บน หมวดย่อยอยู่ล่าง */
@media (max-width: 991.98px) {
    html body #main-nav-container .nav-item-wrapper--category.is-open > .header-nav-dropdown--category.header-nav-megamenu {
        flex-direction: column !important;
        width: auto !important;
    }
    html body #main-nav-container .header-nav-megamenu__sidebar {
        flex: 0 0 auto !important;
        max-width: none !important;
        max-height: 34vh !important;
        border-right: none !important;
        border-bottom: 1px solid #e4edf7 !important;
    }
    html body #main-nav-container .header-nav-megamenu__panel {
        max-height: 36vh !important;
        padding: 14px 16px 16px !important;
    }
    html body #main-nav-container .header-nav-megamenu__grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ============================================================
   MOBILE ACTION TAB MENU (final override — loads last)
   แท็บไอคอน 4 ช่อง + เข้าใช้/ตะกร้า แถวเดียว
   ============================================================ */
@media (max-width: 991.98px) {
    html body .main-header-wrapper-v2 .header-right-v2 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 6px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: none !important;
    }

    html body .main-header-wrapper-v2 .header-right-actions-v2 .user-menu-v2 {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .repair-entry-btn-v2,
    html body .main-header-wrapper-v2 .user-menu-v2 > .repair-status-btn-v2,
    html body .main-header-wrapper-v2 .user-menu-v2 > .warranty-check-btn-v2,
    html body .main-header-wrapper-v2 .user-menu-v2 > .delivery-tracking-btn-v2 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        padding: 6px 2px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        transform: none !important;
        text-align: center !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .repair-entry-btn-v2 {
        background: linear-gradient(180deg, #ff8a3d 0%, #f97316 100%) !important;
        color: #fff !important;
        border-color: #fb923c !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .repair-status-btn-v2,
    html body .main-header-wrapper-v2 .user-menu-v2 > .warranty-check-btn-v2 {
        background: #ffffff !important;
        color: #1e3a8a !important;
        border-color: #dbe7f8 !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .delivery-tracking-btn-v2 {
        background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%) !important;
        color: #fff !important;
        border-color: #7dd3fc !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .repair-entry-btn-v2 i,
    html body .main-header-wrapper-v2 .user-menu-v2 > .repair-status-btn-v2 i,
    html body .main-header-wrapper-v2 .user-menu-v2 > .warranty-check-btn-v2 i,
    html body .main-header-wrapper-v2 .user-menu-v2 > .delivery-tracking-btn-v2 i {
        font-size: 1rem !important;
        margin: 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > a .hdr-action-label--full,
    html body .main-header-wrapper-v2 .user-menu-v2 > .header-cart-slot-v2 .hdr-action-label--full,
    html body .main-header-wrapper-v2 .user-menu-v2 > a span.hdr-action-label--full,
    html body .main-header-wrapper-v2 .user-menu-v2 .cart-text-v2.hdr-action-label--full {
        display: none !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > a .hdr-action-label--short,
    html body .main-header-wrapper-v2 .user-menu-v2 > .header-cart-slot-v2 .hdr-action-label--short {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .login-btn-v2,
    html body .main-header-wrapper-v2 .user-menu-v2 > #header-user-info-v2 {
        order: 5 !important;
        grid-column: span 2 !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .header-cart-slot-v2 {
        order: 6 !important;
        grid-column: span 2 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .login-btn-v2,
    html body .main-header-wrapper-v2 .user-menu-v2 > .header-cart-slot-v2 .cart-link-v2,
    html body .main-header-wrapper-v2 .user-menu-v2 > #header-user-info-v2 .user-profile-v2 {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .login-btn-v2 {
        background: #ffffff !important;
        border: 1px solid #dbe7f8 !important;
        color: #1e3a8a !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .login-btn-v2 .hdr-action-label--short,
    html body .main-header-wrapper-v2 .user-menu-v2 > .header-cart-slot-v2 .hdr-action-label--short {
        width: auto !important;
        font-size: 0.78rem !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .header-cart-slot-v2 .cart-link-v2 {
        background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
        border: 1px solid #60a5fa !important;
        color: #ffffff !important;
        position: relative !important;
    }

    html body .main-header-wrapper-v2 .user-menu-v2 > .header-cart-slot-v2 .cart-badge-v2 {
        position: absolute !important;
        top: -5px !important;
        right: -4px !important;
        margin: 0 !important;
        min-width: 18px !important;
        height: 18px !important;
        border-radius: 999px !important;
        background: #ef4444 !important;
        border: 1px solid #fff !important;
        color: #fff !important;
        font-size: 0.65rem !important;
        line-height: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
