@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/manrope-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/manrope-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/manrope-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/manrope-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/outfit.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/noto-sc-400-s1.woff2') format('woff2');
    unicode-range: U+20-7E, U+B7, U+2014, U+2018-2019, U+201C-201D, U+2026, U+3001-3002, U+300A-300B, U+3010-3011, U+4E00, U+4E0D-4E0E, U+4E1C, U+4E2A, U+4E2D, U+4E5F-4E60, U+4E8B, U+4E8E, U+4E94, U+4E9A, U+4EAB, U+4EB2, U+4EBA, U+4ECB, U+4EEC, U+4EFD, U+4F11, U+4F34, U+4F53, U+5019, U+5047, U+505C, U+514B, U+5168, U+5173, U+51B2, U+51C6, U+51C9, U+51E0, U+5230, U+524D, U+52A1, U+52A8-52A9, U+5339, U+534E, U+5355, U+5357, U+53D1, U+53F0, U+5408, U+540C, U+54C1, U+552E, U+5546, U+56ED, U+5723, U+5728, U+5730, U+573A, U+578B, U+57CE, U+57FA, U+5907, U+5927, U+5929, U+5957, U+597D, U+5B50, U+5BA4, U+5BB6, U+5C71, U+5CB8, U+5DF1, U+5E02, U+5E26, U+5E38, U+5E7C, U+5E7F, U+5EA6-5EA7, U+5EAD, U+5FAE, U+611F, U+6211, U+623F-6240, U+624B, U+6253, U+6270, U+6279, U+6280, U+62CD, U+6325, U+63BC, U+6536, U+6559, U+6587, U+65B0, U+65E5, U+65F6, U+660E, U+6709, U+670D, U+6807, U+6BCF, U+6C34, U+6CB3, U+6D3B, U+6E90, U+70ED, U+7136, U+7247, U+724C, U+72EC, U+7403, U+751F, U+7684, U+79C1, U+7A0B, U+7A7A, U+7ACB, U+7AD9, U+7ADE, U+7B49, U+7CFB, U+7EA6, U+7EBF, U+7EC3, U+7ECD, U+7FA4, U+8054, U+80FD, U+81EA, U+82B1, U+8336, U+86CB, U+88AB, U+88C5, U+8BA4, U+8BA9, U+8BAF, U+8BC1, U+8BFE, U+8C03, U+8D39, U+8D44, U+8D5B, U+8D70, U+8DEF, U+8F66, U+8FC7, U+8FD0, U+8FDB, U+9002, U+900F, U+9053, U+90FD, U+914D, U+91CC, U+91CF, U+95F2, U+95F4, U+95FB, U+9650, U+966A, U+968F, U+9875, U+9884, U+98CE, U+9996, U+9A8C, U+9F50, U+FF01, U+FF08-FF09, U+FF0C, U+FF1A-FF1B, U+FF1F, U+FFE5;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/noto-sc-400-s2.woff2') format('woff2');
    unicode-range: U+A5-FF5C;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/noto-sc-500-s1.woff2') format('woff2');
    unicode-range: U+20-7E, U+B7, U+2014, U+2018-2019, U+201C-201D, U+2026, U+3001-3002, U+300A-300B, U+3010-3011, U+4E00, U+4E0D-4E0E, U+4E1C, U+4E2A, U+4E2D, U+4E5F-4E60, U+4E8B, U+4E8E, U+4E94, U+4E9A, U+4EAB, U+4EB2, U+4EBA, U+4ECB, U+4EEC, U+4EFD, U+4F11, U+4F34, U+4F53, U+5019, U+5047, U+505C, U+514B, U+5168, U+5173, U+51B2, U+51C6, U+51C9, U+51E0, U+5230, U+524D, U+52A1, U+52A8-52A9, U+5339, U+534E, U+5355, U+5357, U+53D1, U+53F0, U+5408, U+540C, U+54C1, U+552E, U+5546, U+56ED, U+5723, U+5728, U+5730, U+573A, U+578B, U+57CE, U+57FA, U+5907, U+5927, U+5929, U+5957, U+597D, U+5B50, U+5BA4, U+5BB6, U+5C71, U+5CB8, U+5DF1, U+5E02, U+5E26, U+5E38, U+5E7C, U+5E7F, U+5EA6-5EA7, U+5EAD, U+5FAE, U+611F, U+6211, U+623F-6240, U+624B, U+6253, U+6270, U+6279, U+6280, U+62CD, U+6325, U+63BC, U+6536, U+6559, U+6587, U+65B0, U+65E5, U+65F6, U+660E, U+6709, U+670D, U+6807, U+6BCF, U+6C34, U+6CB3, U+6D3B, U+6E90, U+70ED, U+7136, U+7247, U+724C, U+72EC, U+7403, U+751F, U+7684, U+79C1, U+7A0B, U+7A7A, U+7ACB, U+7AD9, U+7ADE, U+7B49, U+7CFB, U+7EA6, U+7EBF, U+7EC3, U+7ECD, U+7FA4, U+8054, U+80FD, U+81EA, U+82B1, U+8336, U+86CB, U+88AB, U+88C5, U+8BA4, U+8BA9, U+8BAF, U+8BC1, U+8BFE, U+8C03, U+8D39, U+8D44, U+8D5B, U+8D70, U+8DEF, U+8F66, U+8FC7, U+8FD0, U+8FDB, U+9002, U+900F, U+9053, U+90FD, U+914D, U+91CC, U+91CF, U+95F2, U+95F4, U+95FB, U+9650, U+966A, U+968F, U+9875, U+9884, U+98CE, U+9996, U+9A8C, U+9F50, U+FF01, U+FF08-FF09, U+FF0C, U+FF1A-FF1B, U+FF1F, U+FFE5;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/noto-sc-500-s2.woff2') format('woff2');
    unicode-range: U+A5-FF5C;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/noto-sc-600-s1.woff2') format('woff2');
    unicode-range: U+20-7E, U+B7, U+2014, U+2018-2019, U+201C-201D, U+2026, U+3001-3002, U+300A-300B, U+3010-3011, U+4E00, U+4E0D-4E0E, U+4E1C, U+4E2A, U+4E2D, U+4E5F-4E60, U+4E8B, U+4E8E, U+4E94, U+4E9A, U+4EAB, U+4EB2, U+4EBA, U+4ECB, U+4EEC, U+4EFD, U+4F11, U+4F34, U+4F53, U+5019, U+5047, U+505C, U+514B, U+5168, U+5173, U+51B2, U+51C6, U+51C9, U+51E0, U+5230, U+524D, U+52A1, U+52A8-52A9, U+5339, U+534E, U+5355, U+5357, U+53D1, U+53F0, U+5408, U+540C, U+54C1, U+552E, U+5546, U+56ED, U+5723, U+5728, U+5730, U+573A, U+578B, U+57CE, U+57FA, U+5907, U+5927, U+5929, U+5957, U+597D, U+5B50, U+5BA4, U+5BB6, U+5C71, U+5CB8, U+5DF1, U+5E02, U+5E26, U+5E38, U+5E7C, U+5E7F, U+5EA6-5EA7, U+5EAD, U+5FAE, U+611F, U+6211, U+623F-6240, U+624B, U+6253, U+6270, U+6279, U+6280, U+62CD, U+6325, U+63BC, U+6536, U+6559, U+6587, U+65B0, U+65E5, U+65F6, U+660E, U+6709, U+670D, U+6807, U+6BCF, U+6C34, U+6CB3, U+6D3B, U+6E90, U+70ED, U+7136, U+7247, U+724C, U+72EC, U+7403, U+751F, U+7684, U+79C1, U+7A0B, U+7A7A, U+7ACB, U+7AD9, U+7ADE, U+7B49, U+7CFB, U+7EA6, U+7EBF, U+7EC3, U+7ECD, U+7FA4, U+8054, U+80FD, U+81EA, U+82B1, U+8336, U+86CB, U+88AB, U+88C5, U+8BA4, U+8BA9, U+8BAF, U+8BC1, U+8BFE, U+8C03, U+8D39, U+8D44, U+8D5B, U+8D70, U+8DEF, U+8F66, U+8FC7, U+8FD0, U+8FDB, U+9002, U+900F, U+9053, U+90FD, U+914D, U+91CC, U+91CF, U+95F2, U+95F4, U+95FB, U+9650, U+966A, U+968F, U+9875, U+9884, U+98CE, U+9996, U+9A8C, U+9F50, U+FF01, U+FF08-FF09, U+FF0C, U+FF1A-FF1B, U+FF1F, U+FFE5;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/noto-sc-600-s2.woff2') format('woff2');
    unicode-range: U+A5-FF5C;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/noto-sc-700-s1.woff2') format('woff2');
    unicode-range: U+20-7E, U+B7, U+2014, U+2018-2019, U+201C-201D, U+2026, U+3001-3002, U+300A-300B, U+3010-3011, U+4E00, U+4E0D-4E0E, U+4E1C, U+4E2A, U+4E2D, U+4E5F-4E60, U+4E8B, U+4E8E, U+4E94, U+4E9A, U+4EAB, U+4EB2, U+4EBA, U+4ECB, U+4EEC, U+4EFD, U+4F11, U+4F34, U+4F53, U+5019, U+5047, U+505C, U+514B, U+5168, U+5173, U+51B2, U+51C6, U+51C9, U+51E0, U+5230, U+524D, U+52A1, U+52A8-52A9, U+5339, U+534E, U+5355, U+5357, U+53D1, U+53F0, U+5408, U+540C, U+54C1, U+552E, U+5546, U+56ED, U+5723, U+5728, U+5730, U+573A, U+578B, U+57CE, U+57FA, U+5907, U+5927, U+5929, U+5957, U+597D, U+5B50, U+5BA4, U+5BB6, U+5C71, U+5CB8, U+5DF1, U+5E02, U+5E26, U+5E38, U+5E7C, U+5E7F, U+5EA6-5EA7, U+5EAD, U+5FAE, U+611F, U+6211, U+623F-6240, U+624B, U+6253, U+6270, U+6279, U+6280, U+62CD, U+6325, U+63BC, U+6536, U+6559, U+6587, U+65B0, U+65E5, U+65F6, U+660E, U+6709, U+670D, U+6807, U+6BCF, U+6C34, U+6CB3, U+6D3B, U+6E90, U+70ED, U+7136, U+7247, U+724C, U+72EC, U+7403, U+751F, U+7684, U+79C1, U+7A0B, U+7A7A, U+7ACB, U+7AD9, U+7ADE, U+7B49, U+7CFB, U+7EA6, U+7EBF, U+7EC3, U+7ECD, U+7FA4, U+8054, U+80FD, U+81EA, U+82B1, U+8336, U+86CB, U+88AB, U+88C5, U+8BA4, U+8BA9, U+8BAF, U+8BC1, U+8BFE, U+8C03, U+8D39, U+8D44, U+8D5B, U+8D70, U+8DEF, U+8F66, U+8FC7, U+8FD0, U+8FDB, U+9002, U+900F, U+9053, U+90FD, U+914D, U+91CC, U+91CF, U+95F2, U+95F4, U+95FB, U+9650, U+966A, U+968F, U+9875, U+9884, U+98CE, U+9996, U+9A8C, U+9F50, U+FF01, U+FF08-FF09, U+FF0C, U+FF1A-FF1B, U+FF1F, U+FFE5;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/noto-sc-700-s2.woff2') format('woff2');
    unicode-range: U+A5-FF5C;
}
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('assets/fonts/material-symbols.woff2') format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


html,
body {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


.mobile-bottom-nav {
    display: none;
}


#mobile-menu-toggle,
#mobile-menu-overlay,
#mobile-menu-panel {
    display: none;
}


@media (min-width: 768px) {
    main {
        background-color: #F8FAF7;
    }
}

@media (max-width: 767px) {
    
    #view-home .home-activities-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        width: calc(100% + 20px) !important;
        margin-right: -20px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 20px 12px 0 !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #view-home .home-activities-carousel::-webkit-scrollbar {
        display: none;
    }

    #view-home .home-activities-carousel > div {
        flex: 0 0 min(84vw, 340px) !important;
        width: min(84vw, 340px) !important;
        min-width: min(84vw, 340px) !important;
        scroll-snap-align: start;
    }

    
    #view-court-overview .court-specs-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        width: calc(100% + 20px) !important;
        margin-right: -20px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 20px 12px 0 !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #view-court-overview .court-specs-carousel::-webkit-scrollbar {
        display: none;
    }

    #view-court-overview .court-specs-carousel > div {
        flex: 0 0 min(84vw, 340px) !important;
        width: min(84vw, 340px) !important;
        min-width: min(84vw, 340px) !important;
        scroll-snap-align: start;
    }

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
        background: #f6f8f4 !important;
    }

    header.fixed {
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;
        padding: 0 !important;
    }

    header.fixed > div {
        width: 100% !important;
        max-width: none !important;
        height: 58px !important;
        padding: 0 14px !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.78) !important;
        backdrop-filter: blur(22px) saturate(170%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
        flex-wrap: nowrap !important;
        align-content: center !important;
    }

    header.fixed > div > a {
        gap: 8px !important;
    }

    header.fixed > div > a img {
        height: 27px !important;
    }

    header.fixed > div > a > div {
        display: none !important;
    }

    
    header.fixed #navbar-links {
        display: none !important;
    }

    header.fixed > div > div:last-child #mobile-menu-toggle {
        display: inline-flex !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        flex: 0 0 auto !important;
    }

    header.fixed > div > div:last-child #mobile-menu-toggle .material-symbols-outlined {
        font-size: 22px !important;
        line-height: 1;
    }

    header.fixed > div > div:last-child {
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin-left: auto !important;
    }

    header.fixed > div > div:last-child > .relative,
    header.fixed > div > div:last-child > button:not(:last-child) {
        display: flex !important;
    }

    header.fixed > div > div:last-child #language-toggle {
        padding: 7px !important;
        gap: 0 !important;
        font-size: 0 !important;
    }

    header.fixed > div > div:last-child #language-toggle svg:first-child {
        width: 18px !important;
        height: 18px !important;
    }

    header.fixed > div > div:last-child #language-toggle svg:last-child,
    header.fixed > div > div:last-child #language-toggle #current-language {
        display: none !important;
    }

    header.fixed > div > div:last-child > button:last-child {
        display: none !important;
    }

    
    header.fixed > div > div:last-child > button:first-of-type {
        display: none !important;
    }

    main {
        width: 100% !important;
        min-width: 0 !important;
        padding-top: 0 !important;
    }

    #view-home {
        width: 100% !important;
        min-width: 0 !important;
    }

    #view-home > section:first-of-type {
        width: 100% !important;
        height: min(100svh, 760px) !important;
        min-height: 660px !important;
        margin-top: 0 !important;
    }

    #view-home > section:first-of-type .relative.z-20 {
        align-items: flex-end !important;
        padding: 0 20px 142px !important;
    }

    #view-home > section:first-of-type .max-w-\[680px\] {
        max-width: 100% !important;
    }

    #view-home > section:first-of-type .hero-slide-title {
        max-width: 330px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
    }

    #view-home > section:first-of-type p {
        line-height: 1.75 !important;
    }

    #view-home > section:first-of-type .hero-scene-control {
        left: 50% !important;
        right: auto !important;
        bottom: 34px !important;
        transform: translateX(-50%) !important;
        z-index: 3 !important;
    }

    #view-home > section:not(:first-of-type) {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    #view-home .max-w-\[1360px\],
    #view-home .w-\[1380px\],
    #view-home .w-\[1440px\] {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #view-home [class*="grid-cols-2"],
    #view-home [class*="grid-cols-3"],
    #view-home [class*="grid-cols-4"],
    #view-home [class*="grid-cols-12"],
    .page-view:not(#view-home) [class*="grid-cols-2"],
    .page-view:not(#view-home) [class*="grid-cols-3"],
    .page-view:not(#view-home) [class*="grid-cols-4"],
    .page-view:not(#view-home) [class*="grid-cols-12"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    
    #view-home [class*="col-span-7"],
    #view-home [class*="col-span-5"] {
        grid-column: span 1 / span 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #view-home section:nth-of-type(4) [class*="grid-cols-4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #view-home section:nth-of-type(4) [class*="h-60"] {
        height: 180px !important;
    }

    #view-home section:nth-of-type(4) [class*="p-6"] {
        padding: 14px !important;
    }

    #view-home section:nth-of-type(4) h4 {
        line-height: 1.45 !important;
    }

    #view-home section:nth-of-type(4) p {
        line-height: 1.65 !important;
    }

    
    #view-home .home-feature-card {
        height: auto !important;
        min-height: 320px !important;
    }

    .page-view:not(#view-home) {
        width: 100% !important;
        min-width: 0 !important;
        padding-top: 88px !important;
        padding-bottom: 48px !important;
    }

    .page-view:not(#view-home) > div {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .page-view:not(#view-home) [class*="col-span-"] {
        grid-column: span 1 / span 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .page-view:not(#view-home) [class*="h-[490px]"],
    .page-view:not(#view-home) [class*="h-[360px]"],
    .page-view:not(#view-home) [class*="min-h-[490px]"] {
        height: auto !important;
        min-height: 0 !important;
    }

    .page-view:not(#view-home) table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    .page-view:not(#view-home) .text-right {
        text-align: center !important;
    }

    
    #view-court-overview section,
    #view-court-overview section > div,
    #view-court-overview .grid,
    #view-court-overview .relative.w-full {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #view-court-overview section:first-child > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: center !important;
    }

    #view-court-overview section:first-child > div:first-child > div:first-child,
    #view-court-overview section:first-child > div:first-child > div:last-child {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #view-court-overview section:first-child .grid > [class*="col-span-7"] {
        align-items: center !important;
        text-align: center !important;
    }

    #view-court-overview section:first-child .grid > [class*="col-span-7"] > div {
        width: 100% !important;
    }

    #view-court-overview section:first-child h1 {
        line-height: 1.22 !important;
    }

    #view-court-overview section:first-child .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #view-court-overview section:first-child .grid > [class*="col-span-5"] {
        min-height: 300px !important;
    }

    #view-court-overview section:last-child .flex.items-center.justify-between,
    #view-court-overview section:last-child .flex.items-center.gap-6 {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    
    #view-court-overview section:last-child .flex.items-center.justify-between > .flex.flex-col {
        margin-top: 22px !important;
    }

    
    #view-court-overview section:last-child .flex.items-center.gap-6 {
        gap: 10px !important;
    }

    #view-court-overview section:last-child .flex.items-center.gap-1\.5 {
        align-items: flex-start !important;
        gap: 8px !important;
    }

    footer .max-w-\[1360px\],
    footer [class*="grid-cols-12"] {
        width: 100% !important;
        max-width: none !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    footer [class*="grid-cols-12"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px 16px !important;
    }

    footer [class*="col-span-"] {
        grid-column: span 1 / span 1 !important;
    }

    footer [class*="grid-cols-12"] > .col-span-4:first-child,
    footer [class*="grid-cols-12"] > .col-span-4:last-child {
        grid-column: 1 / -1 !important;
    }

    footer {
        margin-top: 48px !important;
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }

    footer > div > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding-top: 22px !important;
    }

    footer > div > div:last-child > div {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px 16px !important;
        line-height: 1.55 !important;
    }

    footer > div > div:last-child span,
    footer > div > div:last-child a {
        white-space: normal !important;
        word-break: keep-all !important;
    }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 70;
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 70px;
        padding: 7px;
        overflow-x: auto;
        scrollbar-width: none;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 24px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(247, 250, 246, 0.66)), rgba(255, 255, 255, 0.68);
        backdrop-filter: blur(24px) saturate(180%) contrast(1.04);
        -webkit-backdrop-filter: blur(24px) saturate(180%) contrast(1.04);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 42px rgba(24, 51, 44, 0.18);
    }

    .mobile-nav-item {
        display: none;
    }

    .mobile-nav-item[data-tab="pro-shop"],
    .mobile-nav-item[data-tab="tournaments-and-events"],
    .mobile-nav-item[data-tab="coaching-and-clinics"],
    .mobile-nav-item[data-action="booking"],
    .mobile-nav-item[data-action="contact"] {
        display: flex;
    }

    .mobile-bottom-nav::-webkit-scrollbar {
        display: none;
    }

    .mobile-nav-item {
        flex: 0 0 58px;
        min-width: 58px;
        height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 5px 4px;
        border: 0;
        border-radius: 17px;
        color: #687772;
        background: transparent;
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    .mobile-nav-item .material-symbols-outlined {
        font-size: 21px;
        line-height: 1;
    }

    .mobile-nav-item.is-active {
        color: #18332c;
        background: #b9e900;
        box-shadow: 0 4px 12px rgba(185, 233, 0, 0.22);
    }

    .mobile-nav-item:active {
        transform: scale(.94);
    }

    
    .mobile-bottom-nav .mobile-nav-item {
        display: none !important;
    }

    .mobile-bottom-nav .mobile-nav-item[data-tab="pro-shop"],
    .mobile-bottom-nav .mobile-nav-item[data-tab="tournaments-and-events"],
    .mobile-bottom-nav .mobile-nav-item[data-tab="coaching-and-clinics"],
    .mobile-bottom-nav .mobile-nav-item[data-action="booking"],
    .mobile-bottom-nav .mobile-nav-item[data-action="contact"] {
        display: flex !important;
    }

    .mobile-bottom-nav .mobile-nav-item[data-tab="pro-shop"] { order: 1; }
    .mobile-bottom-nav .mobile-nav-item[data-tab="tournaments-and-events"] { order: 2; }
    .mobile-bottom-nav .mobile-nav-item[data-tab="coaching-and-clinics"] { order: 3; }
    .mobile-bottom-nav .mobile-nav-item[data-action="booking"] { order: 4; }
    .mobile-bottom-nav .mobile-nav-item[data-action="contact"] { order: 5; }
}

/* 首页费率：以“主价格 + 路径 + 权益”呈现，不再是四张同权卡片。 */
.home-rate-heading { margin-bottom: 36px; }
.home-rate-heading-copy { max-width: 760px; }
.home-rate-experience { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(450px, 1.42fr); overflow: hidden; border: 1px solid #dce5da; border-radius: 24px; background: #f6f8f4; }
.home-rate-primary { display: flex; flex-direction: column; justify-content: flex-end; min-height: 430px; padding: 42px; color: #fff; background: #173d32; }
.home-rate-kicker, .home-rate-journey-title span { font: 700 11px/1.2 Outfit, sans-serif; letter-spacing: .14em; }
.home-rate-kicker { color: #b9e900; }
.home-rate-price { margin-top: 18px; font: 700 64px/.95 Outfit, sans-serif; letter-spacing: -.05em; }
.home-rate-label { margin-top: 10px; font-weight: 600; }
.home-rate-primary p { max-width: 250px; margin: 24px 0 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.7; }
.home-rate-journey { padding: 34px 38px 30px; background: #fff; }
.home-rate-journey-title { display: flex; align-items: baseline; gap: 12px; color: #718078; }
.home-rate-journey-title strong { color: #173d32; font-size: 20px; }
.home-rate-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0; }
.home-rate-step { position: relative; display: flex; gap: 10px; align-items: center; min-width: 0; padding-right: 14px; }
.home-rate-step:not(:last-child)::after { content: ''; position: absolute; left: 38px; right: 0; top: 16px; height: 1px; background: #dce5da; z-index: 0; }
.home-rate-step > * { position: relative; z-index: 1; }
.home-rate-step > .material-symbols-outlined { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #edf2eb; color: #173d32; font-size: 18px; }
.home-rate-step.is-primary > .material-symbols-outlined { background: #b9e900; }
.home-rate-step strong, .home-rate-total strong { display: block; color: #173d32; font: 700 24px/1 Outfit, sans-serif; }
.home-rate-step small { display: block; margin-top: 5px; color: #718078; font-size: 11px; line-height: 1.35; }
.home-rate-planner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; padding: 14px; border: 1px solid #dce5da; border-radius: 16px; background: #f6f8f4; }
.home-rate-choice > span { display: block; margin-bottom: 8px; color: #718078; font-size: 12px; font-weight: 600; }
.home-rate-hours { display: flex; gap: 6px; }
.home-rate-hours button { flex: 1; min-height: 36px; border: 1px solid #dce5da; border-radius: 9px; background: #fff; color: #173d32; font-size: 12px; font-weight: 600; cursor: pointer; transition: .2s ease; }
.home-rate-hours button.is-selected, .home-rate-hours button:hover { border-color: #173d32; background: #173d32; color: #fff; }
.home-rate-coach { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 10px; border: 1px solid #dce5da; border-radius: 12px; background: #fff; color: #173d32; font-size: 12px; cursor: pointer; }
.home-rate-coach b { margin-left: auto; color: #718078; font-size: 11px; white-space: nowrap; }
.home-rate-coach.is-selected { border-color: #b9e900; box-shadow: inset 0 0 0 1px #b9e900; }
.home-rate-total { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.home-rate-total span { display: block; color: #173d32; font-size: 12px; font-weight: 700; }
.home-rate-total small { display: block; margin-top: 2px; color: #718078; font-size: 11px; }
.home-rate-cta { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 14px; padding: 14px 18px; border: 0; border-radius: 12px; background: #173d32; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.home-rate-cta:hover { background: #245641; transform: translateY(-1px); }
.home-rate-cta span { color: #b9e900; font-size: 20px; }
.home-rate-includes { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 38px; border-top: 1px solid #dce5da; background: #f6f8f4; }
.home-rate-includes-title { display: flex; align-items: center; gap: 12px; color: #173d32; }
.home-rate-includes-title > .material-symbols-outlined { color: #8fb600; }
.home-rate-includes-title strong, .home-rate-includes-title small { display: block; }
.home-rate-includes-title small { margin-top: 2px; color: #718078; font-size: 12px; }
.home-rate-perks { display: flex; gap: 26px; }
.home-rate-perks > div { display: flex; align-items: center; gap: 7px; color: #173d32; font-size: 13px; font-weight: 600; }
.home-rate-perks .material-symbols-outlined { color: #8fb600; font-size: 18px; }

/* ── 服务卡片：3D 倾斜 + 指针跟随柔光 ───────────────────────────────
   角度/深度/光效由 footer.php 的弹簧循环（rAF）逐帧写入自定义属性；
   这里只做外观过渡，不给 transform 写 transition，避免与逐帧写入互相插值。
   弹簧 k=50 / d=11（ζ≈0.78）：回正约 650ms，末端带轻微回弹。 */
.home-service-grid,
.home-activities-carousel { perspective: 1200px; perspective-origin: 50% 50%; }
.tilt-card {
  position: relative;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, var(--tilt-z, 0px)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: box-shadow 500ms ease, border-color 500ms ease;
  will-change: transform;
}
/* 光源：白光 + 一点品牌 lime，跟随指针坐标（--glow-x / --glow-y 为百分比）。 */
.tilt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(240px circle at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .34) 32%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(300px circle at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(185, 233, 0, .14) 0%, rgba(185, 233, 0, 0) 70%);
  opacity: var(--glow-o, 0);
  transition: opacity 380ms ease;
  z-index: 0;
}
/* 边缘光 + 反向内阴影：光在指针侧，暗面落在对侧，卡片才有立体感。 */
.tilt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(185, 233, 0, .85),
    inset calc((50% - var(--glow-x, 50%)) * .65) calc((50% - var(--glow-y, 50%)) * .65) 72px rgba(18, 61, 50, .20);
  opacity: var(--glow-o, 0);
  transition: opacity 380ms ease;
  z-index: 0;
}
/* 内容永远画在光效之上（伪元素是绝对定位，否则会盖住文字）。 */
.tilt-card > * { position: relative; z-index: 1; }
.tilt-card.is-tilting {
  border-color: #c9d8c8;
  box-shadow: 0 26px 46px -20px rgba(18, 61, 50, .26);
}
.tilt-card:focus-visible {
  outline: none;
  border-color: #173d32;
  box-shadow: 0 0 0 3px rgba(185, 233, 0, .5), 0 18px 34px -18px rgba(18, 61, 50, .28);
}
@media (prefers-reduced-motion: reduce) {
  .tilt-card { transform: none !important; will-change: auto; }
  .tilt-card::before,
  .tilt-card::after { display: none; }
  .tilt-card.is-tilting { border-color: #cbd8ca; box-shadow: 0 14px 28px rgba(18, 61, 50, .09); }
}
@media (max-width: 767px) {
  #view-home .home-rate-heading { margin-bottom: 28px; }
  /* 移动端采用“深绿价格横幅 + 浮层预约单”的紧凑预约体验。 */
  #view-home .home-rate-experience { display: block; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  #view-home .home-rate-primary {
    min-height: 274px;
    padding: 30px 26px 70px;
    justify-content: flex-start;
    border-radius: 22px 22px 0 0;
    background-color: #123d32;
    background-image: url('assets/images/hero-garden-court.m.webp');
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
  }
  #view-home .home-rate-kicker { color: #c8eb00; }
  #view-home .home-rate-price { margin-top: 26px; font-size: 68px; }
  #view-home .home-rate-label { display: inline; margin: 0 0 0 8px; font-size: 20px; }
  #view-home .home-rate-primary p { display: none; }
  #view-home .home-rate-journey {
    position: relative;
    z-index: 1;
    margin: -38px 10px 0;
    padding: 28px 20px 20px;
    border: 1px solid #dce5da;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(18, 61, 50, .10);
  }
  #view-home .home-rate-journey-title,
  #view-home .home-rate-steps { display: none; }
  #view-home .home-rate-planner { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
  #view-home .home-rate-choice > span { margin-bottom: 12px; color: #173d32; font-size: 14px; }
  #view-home .home-rate-hours { gap: 7px; }
  #view-home .home-rate-hours button { min-height: 50px; border-radius: 12px; font-size: 15px; }
  #view-home .home-rate-coach { min-height: 66px; margin-top: 20px; padding: 0 2px; border-width: 0; border-top: 1px solid #dce5da; border-bottom: 1px solid #dce5da; border-radius: 0; font-size: 16px; }
  #view-home .home-rate-coach > .material-symbols-outlined { color: #173d32; }
  #view-home .home-rate-coach b { color: #718078; font-size: 14px; }
  #view-home .home-rate-coach.is-selected { border-color: #dce5da; box-shadow: none; }
  #view-home .home-rate-coach.is-selected > .material-symbols-outlined,
  #view-home .home-rate-coach.is-selected b { color: #8fb600; }
  #view-home .home-rate-total { padding: 22px 0 20px; }
  #view-home .home-rate-total span { font-size: 15px; }
  #view-home .home-rate-total small { margin-top: 5px; font-size: 13px; }
  #view-home .home-rate-total strong { font-size: 52px; }
  #view-home .home-rate-cta { margin: 0; min-height: 58px; padding: 14px 20px; border-radius: 13px; background: #b9e900; color: #123d32; font-size: 16px; }
  #view-home .home-rate-cta:hover { background: #c8eb00; }
  #view-home .home-rate-cta span { color: #123d32; }
  #view-home .home-rate-includes { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin: -1px 10px 0; padding: 22px 20px 24px; border: 1px solid #dce5da; border-top: 0; border-radius: 0 0 22px 22px; background: #fff; }
  #view-home .home-rate-includes-title { display: none; }
  #view-home .home-rate-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; }
  #view-home .home-rate-perks > div { flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 0 9px; border-left: 1px solid #dce5da; font-size: 11px; line-height: 1.35; }
  #view-home .home-rate-perks > div:first-child { padding-left: 0; border-left: 0; }
  #view-home .home-rate-perks .material-symbols-outlined { color: #a9c900; font-size: 22px; }
}

@media (max-width: 767px) {
  #view-home .home-rate-module {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  #view-home .home-rate-module > div {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 头部竖排：标题块与 CTA 上下排，避免横排把段落挤成窄条 */
  #view-home .home-rate-module .flex.items-end.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  #view-home .home-rate-module .grid-cols-12 {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* 左列本身是价格卡网格，不能当卡片再加内边距 */
  #view-home .home-rate-module .col-span-7 {
    width: 100%;
    padding: 0;
  }

  #view-home .home-rate-module .col-span-5 {
    width: 100%;
  }

  #view-home .home-rate-module .grid-cols-3 {
    gap: 8px;
  }

  #view-home .home-rate-module .home-rate-tile {
    padding: 14px 12px;
  }
}


@media (min-width: 1200px) {
  #view-news .news-contact-highlights {
    margin-left: auto;
    align-self: center;
    align-content: center;
    justify-content: flex-end;
  }

  #view-news .news-contact-highlights > div {
    min-width: 0;
    padding: 10px 9px;
    gap: 7px;
  }

  #view-news .news-contact-highlights > div > div,
  #view-news .news-contact-highlights p {
    min-width: 0;
    white-space: nowrap;
  }
}


@media (min-width: 768px) and (max-width: 1199px) {
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    header.fixed {
        top: 16px !important;
        left: 16px !important;
        right: 16px !important;
    }

    header.fixed > div {
        width: 100% !important;
        max-width: none !important;
        height: 68px !important;
        padding: 0 16px !important;
    }

    header.fixed > div > a {
        gap: 8px !important;
    }

    header.fixed > div > a img {
        height: 30px !important;
    }

    header.fixed > div > a > div {
        display: none !important;
    }

    header.fixed #navbar-links {
        display: none !important;
    }

    header.fixed > div > div:last-child {
        gap: 8px !important;
        margin-left: auto !important;
    }

    header.fixed > div > div:last-child > button:nth-of-type(1),
    header.fixed > div > div:last-child > button:last-child {
        display: none !important;
    }

    header.fixed > div > div:last-child #mobile-menu-toggle {
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    header.fixed > div > div:last-child #language-toggle {
        padding: 9px !important;
        font-size: 0 !important;
    }

    header.fixed > div > div:last-child #language-toggle svg {
        width: 20px !important;
        height: 20px !important;
    }

    main {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 767px) and (prefers-reduced-transparency: reduce) {
    header.fixed > div,
    .mobile-bottom-nav {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none !important;
    }

    
    #mobile-menu-toggle,
    #mobile-menu-overlay,
    #mobile-menu-panel {
        display: none !important;
    }
}


#view-court-overview {
    overflow: hidden;
}

#view-court-overview img {
    display: block;
    max-width: 100%;
}


#view-tournaments-and-events {
    background: #f8faf7;
    color: #0d281e;
}

#view-tournaments-and-events .text-primary-container,
#view-tournaments-and-events .text-on-primary-fixed {
    color: #0d281e !important;
}

#view-tournaments-and-events .text-on-primary-fixed-variant,
#view-tournaments-and-events .text-outline {
    color: #687772 !important;
}

#view-tournaments-and-events .text-secondary-fixed,
#view-tournaments-and-events .text-secondary-fixed-variant,
#view-tournaments-and-events .text-on-secondary-fixed {
    color: #0d281e !important;
}

#view-tournaments-and-events .bg-primary-container {
    background-color: #0d281e !important;
}

#view-tournaments-and-events .bg-secondary-fixed {
    background-color: #ccff00 !important;
}

#view-tournaments-and-events .bg-secondary-fixed-dim {
    background-color: #b9e900 !important;
}

#view-tournaments-and-events .font-headline-xl,
#view-tournaments-and-events .font-headline-lg,
#view-tournaments-and-events .font-headline-sm {
    font-family: 'Outfit', 'Noto Sans SC', sans-serif;
}


#view-pro-shop {
    background: #f8faf7;
}


.coach-roster-carousel {
    position: relative;
}

.coach-roster-viewport {
    margin: 0 48px;
    overflow: hidden;
    scroll-behavior: smooth;
}

.coach-roster-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: none !important;
    gap: 24px !important;
}

.coach-roster-grid > div {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    min-width: 0 !important;
}

.coach-roster-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8e4;
    border-radius: 999px;
    color: #0d281e;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 20px rgba(13, 40, 30, .12);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.coach-roster-arrow:hover {
    color: #0d281e;
    background: #b9e900;
    transform: translateY(-50%) scale(1.05);
}

.coach-roster-arrow-prev {
    left: 0;
}

.coach-roster-arrow-next {
    right: 0;
}

@media (max-width: 767px) {
    #view-court-overview {
        padding-top: 82px !important;
        padding-bottom: 122px !important;
        overflow: clip;
    }

    #view-court-overview > div {
        gap: 0 !important;
    }

    #view-court-overview section {
        padding: 24px 16px !important;
        margin: 0 !important;
    }

    #view-court-overview section:first-child {
        padding-top: 10px !important;
    }

    #view-court-overview section:first-child > div:first-child {
        margin-bottom: 14px !important;
    }

    #view-court-overview section:first-child > div:first-child > div:first-child {
        flex-wrap: wrap !important;
        row-gap: 4px !important;
        line-height: 1.5 !important;
    }

    #view-court-overview section:first-child > div:first-child > div:last-child {
        padding: 8px 12px !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    #view-court-overview section:first-child > .relative {
        border-radius: 24px !important;
        box-shadow: 0 8px 24px rgba(13, 40, 30, .07) !important;
    }

    #view-court-overview section:first-child .grid {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    #view-court-overview section:first-child .grid > [class*="col-span-7"] {
        order: 1 !important;
        padding: 26px 20px 22px !important;
    }

    #view-court-overview section:first-child .grid > [class*="col-span-5"] {
        order: 2 !important;
        min-height: 210px !important;
        height: 210px !important;
    }

    #view-court-overview section:first-child .grid > [class*="col-span-5"] img {
        min-height: 210px !important;
        object-fit: cover !important;
    }

    #view-court-overview section:first-child h1 {
        max-width: 100% !important;
        line-height: 1.18 !important;
        letter-spacing: -.035em !important;
    }

    #view-court-overview section:first-child h1 br {
        display: none !important;
    }

    #view-court-overview section:first-child p {
        max-width: 100% !important;
        line-height: 1.75 !important;
        text-align: left !important;
    }

    
    #view-court-overview section:first-child .grid-cols-4 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 8px !important;
        padding-top: 16px !important;
        margin-top: 16px !important;
    }

    #view-court-overview section:first-child .grid-cols-4 > div {
        min-width: 0 !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    #view-court-overview section:first-child .grid-cols-4 > div > div {
        display: block !important;
    }

    #view-court-overview section:first-child .grid-cols-4 > div > div > span:first-child {
        display: block !important;
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    #view-court-overview section:first-child .grid-cols-4 > div > div > span:last-child {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 3px !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    #view-court-overview section:first-child .absolute.top-5 {
        top: 12px !important;
        right: 12px !important;
        padding: 8px 10px !important;
        transform: scale(.92) !important;
        transform-origin: top right !important;
    }

    #view-court-overview section:first-child .absolute.bottom-5 {
        left: 12px !important;
        bottom: 12px !important;
        right: 12px !important;
        width: auto !important;
        justify-content: center !important;
        padding: 9px 10px !important;
    }

    #view-court-overview section:not(:first-child) > div:first-child {
        margin-bottom: 18px !important;
        padding-bottom: 12px !important;
    }

    #view-court-overview section:not(:first-child) > div:first-child h2 {
        line-height: 1.28 !important;
        text-align: left !important;
    }

    #view-court-overview section:not(:first-child) > div:first-child p {
        max-width: none !important;
        margin-top: 8px !important;
        text-align: left !important;
    }

    #view-court-overview section > .rounded-3xl,
    #view-court-overview section > div > .rounded-3xl,
    #view-court-overview section > div > .rounded-\[2rem\] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 22px !important;
    }

    #view-court-overview section:nth-of-type(3) .grid,
    #view-court-overview section:nth-of-type(4) .grid,
    #view-court-overview section:nth-of-type(5) .grid {
        gap: 14px !important;
    }

    #view-court-overview section:nth-of-type(3) .grid > [class*="col-span-4"],
    #view-court-overview section:nth-of-type(4) .grid > *,
    #view-court-overview section:nth-of-type(5) .grid > * {
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    #view-court-overview section:nth-of-type(3) .grid > [class*="col-span-4"] > div:first-child {
        min-height: 0 !important;
    }

    #view-court-overview section:nth-of-type(3) .grid > [class*="col-span-4"] .h-56 {
        height: 178px !important;
    }

    #view-court-overview section:nth-of-type(3) .grid > [class*="col-span-4"] .p-6 {
        padding: 18px !important;
    }

    #view-court-overview section:nth-of-type(3) .grid > [class*="col-span-4"] h3 {
        line-height: 1.35 !important;
    }

    #view-court-overview section:nth-of-type(3) .grid > [class*="col-span-4"] p,
    #view-court-overview section:nth-of-type(4) p,
    #view-court-overview section:nth-of-type(5) p {
        line-height: 1.75 !important;
    }

    #view-court-overview section:nth-of-type(3) .grid > [class*="col-span-4"] > div:last-child {
        padding: 14px 18px !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    #view-court-overview section:nth-of-type(3) .grid > [class*="col-span-4"] > div:last-child button {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    #view-court-overview section:nth-of-type(4) > div:last-child,
    #view-court-overview section:nth-of-type(5) > div:last-child {
        padding: 20px !important;
    }

    #view-court-overview section:nth-of-type(4) .grid > *,
    #view-court-overview section:nth-of-type(5) .grid > * {
        padding: 18px !important;
    }

    #view-court-overview section:last-child .rounded-3xl {
        padding: 24px 20px !important;
    }

    #view-court-overview section:last-child .rounded-3xl h2 {
        line-height: 1.3 !important;
    }

    #view-court-overview section:last-child button {
        width: 100% !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    #view-court-overview section:last-child .flex.items-center.gap-6 > div {
        width: 100% !important;
    }

    #view-court-overview .venue-booking-strip {
        padding: 4px 16px 8px !important;
    }

    #view-court-overview .venue-booking-strip > div {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 22px !important;
    }

    #view-court-overview .venue-booking-strip > div > * {
        grid-column: auto !important;
        width: 100% !important;
        min-height: 58px !important;
    }

    #view-court-overview .venue-booking-strip button {
        text-align: left !important;
    }

    
    #view-court-overview .venue-rate-section > div {
        padding: 18px 14px !important;
        border-radius: 24px !important;
    }

    #view-court-overview .venue-rate-section > div > .flex.items-center.justify-between {
        display: block !important;
        margin-bottom: 18px !important;
        padding-bottom: 14px !important;
    }

    #view-court-overview .venue-rate-section > div > .flex.items-center.justify-between > div:first-child {
        width: 100% !important;
    }

    #view-court-overview .venue-rate-section > div > .flex.items-center.justify-between > div:last-child {
        width: 100% !important;
        margin-top: 10px !important;
    }

    #view-court-overview .venue-rate-section > div > .flex.items-center.justify-between > div:last-child > span {
        display: block !important;
        margin-top: 3px !important;
        line-height: 1.5 !important;
    }

    #view-court-overview .venue-rate-section > div > .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #view-court-overview .venue-rate-section .col-span-7,
    #view-court-overview .venue-rate-section .col-span-5 {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: auto !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 > div {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 > div > div:first-child {
        width: 100% !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 > div > div:first-child > div:first-child {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 > div > div:first-child > div:first-child > span:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 16px !important;
        line-height: 1.42 !important;
        overflow-wrap: anywhere !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 > div > div:first-child > div:first-child > span:last-child {
        flex: 0 0 auto !important;
        max-width: 62px !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.35 !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 > div > div:first-child > p {
        margin-top: 10px !important;
        line-height: 1.65 !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 > div > div:last-child {
        width: 100% !important;
        margin-top: 14px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(13, 40, 30, .10) !important;
        text-align: left !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 > div > div:last-child > div {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    #view-court-overview .venue-rate-section .col-span-7 > div > div:last-child > span {
        display: block !important;
        margin-top: 4px !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    #view-court-overview .venue-rate-section .col-span-5 {
        padding: 18px !important;
    }

    
    footer {
        overflow: hidden !important;
    }

    footer p,
    footer a,
    footer span {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    
    #view-coaching-and-clinics {
        padding-top: 82px !important;
        padding-bottom: 122px !important;
        overflow: clip !important;
    }

    #view-coaching-and-clinics section {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 24px 16px !important;
    }

    #view-coaching-and-clinics section:first-child {
        padding-top: 10px !important;
    }

    #view-coaching-and-clinics section:first-child > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: center !important;
    }

    #view-coaching-and-clinics section:first-child > div:first-child > div {
        width: 100% !important;
        justify-content: center !important;
    }

    #view-coaching-and-clinics section:first-child > .relative {
        border-radius: 24px !important;
        box-shadow: 0 8px 24px rgba(13, 40, 30, .07) !important;
    }

    #view-coaching-and-clinics section:first-child .grid {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    #view-coaching-and-clinics section:first-child .grid > [class*="col-span-7"] {
        order: 1 !important;
        padding: 26px 20px 22px !important;
        text-align: left !important;
    }

    #view-coaching-and-clinics section:first-child .grid > [class*="col-span-5"] {
        order: 2 !important;
        height: 230px !important;
        min-height: 230px !important;
    }

    #view-coaching-and-clinics section:first-child .grid > [class*="col-span-5"] img {
        height: 230px !important;
        min-height: 230px !important;
        object-fit: cover !important;
    }

    #view-coaching-and-clinics section:first-child h1 {
        max-width: 100% !important;
        line-height: 1.18 !important;
        letter-spacing: -.035em !important;
    }

    #view-coaching-and-clinics section:first-child h1 br {
        display: none !important;
    }

    #view-coaching-and-clinics section:first-child p {
        max-width: 100% !important;
        line-height: 1.75 !important;
    }

    #view-coaching-and-clinics section:first-child .flex.items-center.gap-3\.5 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #view-coaching-and-clinics section:first-child .flex.items-center.gap-3\.5 a {
        flex: 1 1 150px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    
    #view-coaching-and-clinics section:first-child .grid-cols-4 {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding-top: 16px !important;
        margin-top: 16px !important;
    }

    #view-coaching-and-clinics section:first-child .grid-cols-4 > div {
        min-width: 0 !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    #view-coaching-and-clinics section:first-child .grid-cols-4 > div > div {
        display: block !important;
    }

    #view-coaching-and-clinics section:first-child .grid-cols-4 > div > div > span:first-child {
        display: block !important;
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    #view-coaching-and-clinics section:first-child .grid-cols-4 > div > div > span:last-child {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 3px !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    #view-coaching-and-clinics section:first-child .absolute.top-5 {
        top: 12px !important;
        padding: 8px !important;
        transform: scale(.84) !important;
        transform-origin: top left !important;
    }

    #view-coaching-and-clinics section:first-child .absolute.top-5.right-5 {
        transform-origin: top right !important;
    }

    #view-coaching-and-clinics section:first-child .absolute.bottom-5 {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
    }

    #view-coaching-and-clinics section:not(:first-child) > div:first-child {
        display: block !important;
        margin-bottom: 18px !important;
        padding-bottom: 12px !important;
    }

    #view-coaching-and-clinics section:not(:first-child) > div:first-child h2,
    #view-coaching-and-clinics section:not(:first-child) > div:first-child h1 {
        line-height: 1.3 !important;
        text-align: left !important;
    }

    #view-coaching-and-clinics section:not(:first-child) > div:first-child p {
        max-width: none !important;
        margin-top: 8px !important;
        text-align: left !important;
        line-height: 1.7 !important;
    }

    #view-coaching-and-clinics [class*="rounded-3xl"],
    #view-coaching-and-clinics [class*="rounded-2xl"],
    #view-coaching-and-clinics [class*="rounded-xl"] {
        max-width: 100% !important;
    }

    #view-coaching-and-clinics section .grid > * {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: auto !important;
    }

    #view-coaching-and-clinics section .grid > * p {
        line-height: 1.75 !important;
    }

    #view-coaching-and-clinics section .grid > * h3 {
        line-height: 1.35 !important;
    }

    #view-coaching-and-clinics section .grid > * h4 {
        line-height: 1.4 !important;
    }

    #view-coaching-and-clinics .coach-roster-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        width: max-content !important;
        max-width: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 2px 14px !important;
        margin-left: 0 !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #view-coaching-and-clinics .coach-roster-grid::-webkit-scrollbar {
        display: none;
    }

    #view-coaching-and-clinics .coach-roster-viewport {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #view-coaching-and-clinics .coach-roster-viewport::-webkit-scrollbar {
        display: none;
    }

    #view-coaching-and-clinics .coach-roster-grid {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #view-coaching-and-clinics .coach-roster-grid > div {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        scroll-snap-align: start;
    }

    #view-coaching-and-clinics .coach-roster-grid > div > div:first-child > div:first-child {
        width: 100% !important;
        height: 330px !important;
        min-height: 0 !important;
        max-height: 330px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    #view-coaching-and-clinics .coach-roster-grid > div > div:first-child > div:first-child img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }

    #view-coaching-and-clinics .coach-roster-arrow {
        display: none !important;
    }

    #view-coaching-and-clinics #coach-booking-modal > div {
        max-height: calc(100dvh - 32px) !important;
        overflow-y: auto !important;
        padding: 20px !important;
    }

    #view-coaching-and-clinics #coach-booking-form .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    #view-coaching-and-clinics section [id="packages-section"] {
        padding-top: 20px !important;
    }

    #view-coaching-and-clinics section:last-child > div {
        padding: 24px 20px !important;
        border-radius: 24px !important;
    }

    #view-coaching-and-clinics section:last-child h2 {
        line-height: 1.3 !important;
    }

    #view-coaching-and-clinics section:last-child button,
    #view-coaching-and-clinics section:last-child a {
        width: 100% !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    
    #view-coaching-and-clinics section:last-child .flex.items-center.justify-between,
    #view-coaching-and-clinics section:last-child .flex.items-center.gap-6 {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    
    #view-coaching-and-clinics section:last-child .flex.items-center.justify-between > .flex.flex-col {
        margin-top: 22px !important;
    }

    
    #view-coaching-and-clinics section:last-child .flex.items-center.gap-6 {
        gap: 10px !important;
    }

    #view-coaching-and-clinics section:last-child .flex.items-center.gap-1\.5 {
        align-items: flex-start !important;
        gap: 8px !important;
    }

    
    #view-court-overview .flex.justify-between.mb-8,
    #view-coaching-and-clinics .flex.justify-between.mb-8 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    
    #view-court-overview .flex.justify-between.mb-8 > p,
    #view-coaching-and-clinics .flex.justify-between.mb-8 > p {
        max-width: none !important;
        text-align: left !important;
    }

    
    #view-court-overview .flex.justify-between.mb-8 > div:not(:first-child),
    #view-coaching-and-clinics .flex.justify-between.mb-8 > div:not(:first-child) {
        align-self: flex-start !important;
        max-width: 100% !important;
    }

    
    #view-home .flex.justify-between.mb-16 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    #view-home .flex.justify-between.mb-16 > div:not(:first-child) {
        align-self: flex-start !important;
        max-width: 100% !important;
    }
}

#view-product-detail {
    background: #f8faf7;
}

#view-product-detail .product-option {
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

#view-product-detail .product-option:active,
#view-product-detail .quantity-button:active {
    transform: scale(.97);
}

#view-pro-shop .pro-shop-product-card {
    cursor: pointer;
}

#view-pro-shop .pro-shop-product-card:focus-visible {
    outline: 2px solid #b9e900;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    #view-product-detail {
        padding-top: 82px !important;
        padding-bottom: 122px !important;
        overflow: clip !important;
    }

    #view-product-detail > main > section {
        width: 100% !important;
        max-width: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #view-product-detail .product-detail-shell {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
        padding: 16px !important;
        border-radius: 24px !important;
    }

    #view-product-detail .product-detail-shell > * {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: auto !important;
    }

    #view-product-detail .product-main-image {
        min-height: 330px !important;
        height: 330px !important;
    }

    #view-product-detail .product-main-image img {
        height: 100% !important;
        object-fit: cover !important;
    }

    #view-product-detail h1 {
        line-height: 1.25 !important;
    }

    #view-product-detail .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    #view-product-detail .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    #view-product-detail .product-detail-shell .grid-cols-3 button {
        min-height: 52px !important;
    }

    #view-product-detail .product-detail-shell form > div:last-child {
        flex-direction: column !important;
    }

    #view-product-detail .product-detail-shell form > div:last-child button {
        width: 100% !important;
    }

    #view-product-detail section:last-child > div > div {
        width: 100% !important;
    }

    #view-product-detail section:last-child h2 {
        line-height: 1.35 !important;
    }

    #view-product-detail section:last-child .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #view-product-detail section:last-child button {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    
    #view-tournaments-and-events {
        padding-top: 82px !important;
        padding-bottom: 122px !important;
        overflow: clip !important;
    }

    #view-tournaments-and-events > div {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    #view-tournaments-and-events section {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 28px 16px !important;
    }

    #view-tournaments-and-events section:first-child {
        padding-top: 10px !important;
        padding-bottom: 34px !important;
    }

    #view-tournaments-and-events section:first-child nav {
        flex-wrap: wrap !important;
        row-gap: 5px !important;
        margin-bottom: 18px !important;
        font-size: 10px !important;
    }

    #view-tournaments-and-events .font-headline-xl,
    #view-tournaments-and-events .text-headline-xl {
        line-height: 1.22 !important;
        letter-spacing: -.03em !important;
    }

    #view-tournaments-and-events .font-headline-lg,
    #view-tournaments-and-events .text-headline-lg {
        line-height: 1.3 !important;
    }

    #view-tournaments-and-events .font-headline-sm,
    #view-tournaments-and-events .text-headline-sm {
        line-height: 1.35 !important;
    }

    #view-tournaments-and-events section:first-child .grid,
    #view-tournaments-and-events section:not(:first-child) .grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #view-tournaments-and-events section:first-child .grid > *,
    #view-tournaments-and-events section:not(:first-child) .grid > * {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #view-tournaments-and-events .events-hero-tag {
        display: block !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25 !important;
        font-size: 10px !important;
    }

    #view-tournaments-and-events .events-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #view-tournaments-and-events .events-metrics-grid > div {
        min-width: 0 !important;
        padding: 16px !important;
    }

    #view-tournaments-and-events section:first-child .grid > div {
        padding: 18px !important;
    }

    #view-tournaments-and-events section:first-child .grid > div > div {
        font-size: 26px !important;
    }

    #view-tournaments-and-events section:not(:first-child) > div:first-child {
        display: block !important;
        margin-bottom: 20px !important;
    }

    #view-tournaments-and-events section:not(:first-child) > div:first-child p {
        max-width: none !important;
        margin-top: 10px !important;
        text-align: left !important;
        line-height: 1.7 !important;
    }

    #view-tournaments-and-events #event-filters {
        display: flex !important;
        width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

    #view-tournaments-and-events #event-filters::-webkit-scrollbar {
        display: none;
    }

    #view-tournaments-and-events #event-filters button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    #view-tournaments-and-events section:last-child h2 {
        line-height: 1.3 !important;
    }

    #view-tournaments-and-events section:last-child a {
        width: 100% !important;
        justify-content: center !important;
    }

    
    #view-pro-shop {
        padding-top: 82px !important;
        padding-bottom: 122px !important;
        overflow: clip !important;
    }

    #view-pro-shop > div {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    #view-pro-shop section {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 24px 16px !important;
    }

    #view-pro-shop section:first-child {
        padding-top: 10px !important;
        padding-bottom: 28px !important;
    }

    #view-pro-shop section:first-child nav {
        flex-wrap: wrap !important;
        row-gap: 5px !important;
        margin-bottom: 18px !important;
        font-size: 10px !important;
    }

    #view-pro-shop .font-headline-xl,
    #view-pro-shop .text-headline-xl,
    #view-pro-shop .text-headline-xl-mobile {
        line-height: 1.25 !important;
        letter-spacing: -.03em !important;
    }

    #view-pro-shop .font-headline-md,
    #view-pro-shop .font-headline-sm {
        line-height: 1.35 !important;
    }

    #view-pro-shop section:first-child .grid,
    #view-pro-shop section:not(:first-child) .grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #view-pro-shop section:first-child .grid > *,
    #view-pro-shop section:not(:first-child) .grid > * {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #view-pro-shop section:first-child .grid > div {
        padding: 16px !important;
    }

    
    #view-pro-shop section:nth-of-type(2),
    #view-pro-shop .cat-quickbar {
        position: relative !important;
        top: auto !important;
        z-index: 10 !important;
        padding: 10px 16px !important;
        overflow: hidden !important;
    }

    #view-pro-shop #categoryNav {
        width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        padding-bottom: 3px !important;
    }

    #view-pro-shop #categoryNav::-webkit-scrollbar {
        display: none;
    }

    #view-pro-shop #categoryNav .category-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    #view-pro-shop aside {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    #view-pro-shop section .grid > * img {
        max-width: 100% !important;
    }

    #view-pro-shop section .grid > * h2,
    #view-pro-shop section .grid > * h3,
    #view-pro-shop section .grid > * h4 {
        overflow-wrap: anywhere !important;
        line-height: 1.4 !important;
    }

    #view-pro-shop section a[data-path],
    #view-pro-shop section button {
        white-space: nowrap !important;
    }

    #view-pro-shop section:last-child {
        padding-bottom: 42px !important;
    }

    
    #view-news .news-contact-highlights {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #view-news .news-contact-highlights > div {
        min-width: 0 !important;
        padding: 12px !important;
        gap: 8px !important;
    }

    #view-news .news-contact-highlights > div > div,
    #view-news .news-contact-highlights p {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    
    #view-pro-shop .mobile-shop-panel-toggle {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        text-align: left !important;
        cursor: pointer !important;
    }

    #view-pro-shop .mobile-shop-panel-toggle::after {
        content: '+';
        flex: 0 0 auto;
        font-size: 22px;
        line-height: 1;
        font-weight: 400;
    }

    #view-pro-shop .mobile-shop-panel-toggle[aria-expanded="true"]::after {
        content: '−';
    }

    #view-pro-shop .mobile-shop-panel-content[hidden] {
        display: none !important;
    }
}

@media (min-width: 768px) {
    #view-pro-shop .mobile-shop-panel-content[hidden] {
        display: block !important;
    }

    #view-pro-shop .mobile-shop-panel-toggle::after {
        display: none;
    }
}



@media (max-width: 767px) {
    .text-display-hero {
        font-size: 40px !important;
        line-height: 48px !important;
    }

    .text-headline-xl {
        font-size: 30px !important;
        line-height: 38px !important;
    }

    .text-headline-lg {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    .text-headline-md {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .text-headline-sm {
        font-size: 17px !important;
        line-height: 24px !important;
    }

    .text-label-lg {
        font-size: 13px !important;
        line-height: 17px !important;
    }

    .text-body-xl {
        font-size: 16px !important;
        line-height: 26px !important;
    }

    .text-body-lg {
        font-size: 15px !important;
        line-height: 24px !important;
    }

    .text-body-md {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    .text-body-sm {
        font-size: 12.5px !important;
        line-height: 19px !important;
    }

    .text-label-sm {
        font-size: 11px !important;
        line-height: 14px !important;
    }
}


body.menu-drawer-open {
    overflow: hidden !important;
}

@media (max-width: 1199px) {
    #mobile-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 88;
        background: rgba(13, 40, 30, 0.42);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease, visibility .28s ease;
    }

    #mobile-menu-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    #mobile-menu-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 89;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 84vw);
        max-width: 100%;
        padding: calc(18px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));
        border-radius: 24px 0 0 24px;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(246, 248, 244, 0.97));
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        box-shadow: -18px 0 48px rgba(24, 51, 44, 0.22);
        transform: translateX(104%);
        transition: transform .32s cubic-bezier(.22, .68, .24, 1);
        overflow: hidden;
    }

    #mobile-menu-panel.is-open {
        transform: translateX(0);
    }

    
    .menu-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 16px 14px;
        border-bottom: 1px solid #dce5de;
    }

    .menu-drawer-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        color: #18332c;
        text-decoration: none;
    }

    .menu-drawer-brand img {
        height: 30px;
        width: auto;
        object-fit: contain;
        flex: 0 0 auto;
    }

    .menu-drawer-brand span {
        font-weight: 700;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .menu-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid #dce5de;
        border-radius: 12px;
        background: #f0f4ec;
        color: #18332c;
        cursor: pointer;
        transition: background .2s ease;
    }

    .menu-drawer-close:active {
        background: #e6efe9;
    }

    .menu-drawer-close .material-symbols-outlined {
        font-size: 20px;
        line-height: 1;
    }

    
    .menu-drawer-list {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 2px;
        min-height: 0;
        padding: 10px 10px 6px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .menu-drawer-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 11px 12px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: #35564a;
        text-align: left;
        cursor: pointer;
        transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .menu-drawer-item > .text-body-lg {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .menu-drawer-icon {
        flex: 0 0 auto;
        font-size: 22px;
        line-height: 1;
        color: #687772;
        transition: color .18s ease;
    }

    .menu-drawer-chevron {
        flex: 0 0 auto;
        font-size: 18px;
        line-height: 1;
        color: #b6c2ba;
        transition: color .18s ease, transform .18s ease;
    }

    .menu-drawer-item:active {
        background: #f0f4ec;
        transform: scale(.985);
    }

    .menu-drawer-item.is-active {
        color: #18332c;
        background: linear-gradient(135deg, rgba(185, 233, 0, 0.22), rgba(185, 233, 0, 0.10));
        box-shadow: inset 0 0 0 1px rgba(185, 233, 0, 0.5);
    }

    .menu-drawer-item.is-active .menu-drawer-icon,
    .menu-drawer-item.is-active .menu-drawer-chevron {
        color: #18332c;
    }

    .menu-drawer-item.is-active .menu-drawer-chevron {
        transform: translateX(1px);
    }

    
    .menu-drawer-foot {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 4px;
        padding: 12px 16px 0;
        border-top: 1px solid #dce5de;
    }

    .menu-drawer-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 13px 16px;
        border: 0;
        border-radius: 16px;
        background: #18332c;
        color: #ffffff;
        cursor: pointer;
        transition: background .2s ease, transform .18s ease;
    }

    .menu-drawer-cta .material-symbols-outlined {
        font-size: 19px;
        line-height: 1;
        color: #b9e900;
    }

    .menu-drawer-cta:active {
        background: #23473d;
        transform: scale(.98);
    }

    .menu-drawer-foot p {
        color: #687772;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    #mobile-menu-overlay,
    #mobile-menu-panel,
    .menu-drawer-item,
    .menu-drawer-chevron,
    .menu-drawer-cta {
        transition: none !important;
    }
}


#home-quick-dock {
    display: none;
}

.quick-dock-toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    z-index: 120;
    max-width: min(420px, 86vw);
    padding: 11px 18px;
    border-radius: 14px;
    background: rgba(24, 51, 44, 0.94);
    color: #ffffff;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(24, 51, 44, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
    pointer-events: none;
}

.quick-dock-toast.is-show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (min-width: 768px) {
    #home-quick-dock {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        right: 16px;
        top: 50%;
        z-index: 60;
        gap: 4px;
        padding: 8px;
        border: 1px solid #dce5de;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 12px 36px rgba(24, 51, 44, 0.18);
        backdrop-filter: blur(14px) saturate(170%);
        -webkit-backdrop-filter: blur(14px) saturate(170%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-50%) translateX(16px);
        transition: opacity .3s ease, transform .3s cubic-bezier(.22, .68, .24, 1), visibility .3s ease;
    }

    #home-quick-dock.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(-50%) translateX(0);
    }

    .quick-dock-main {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .quick-dock-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 14px;
        background: transparent;
        color: #35564a;
        cursor: pointer;
        text-decoration: none;
        transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
    }

    .quick-dock-btn svg {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    .quick-dock-btn .material-symbols-outlined {
        font-size: 20px;
        line-height: 1;
    }

    .quick-dock-btn:hover {
        transform: scale(1.06);
    }

    
    .quick-dock-btn[data-social="douyin"]:hover {
        color: #101010;
        background: #f1f4f0;
        border-color: #e2e9e3;
    }

    .quick-dock-btn[data-social="wechat"]:hover {
        color: #07c160;
        background: rgba(7, 193, 96, 0.10);
        border-color: rgba(7, 193, 96, 0.28);
    }

    .quick-dock-btn[data-social="rednote"]:hover {
        color: #ff2442;
        background: rgba(255, 36, 66, 0.09);
        border-color: rgba(255, 36, 66, 0.26);
    }

    .quick-dock-btn[data-social="phone"]:hover {
        color: #18332c;
        background: #ecf3ee;
        border-color: #dce5de;
    }

    #quick-dock-top:hover {
        color: #18332c;
        background: #edf6e4;
        border-color: rgba(185, 233, 0, 0.55);
    }

    
    #quick-dock-top.is-off {
        opacity: .4;
    }

    .quick-dock-sep {
        width: 22px;
        height: 1px;
        margin: 4px 0;
        background: #dce5de;
        flex: 0 0 auto;
    }

    
    .quick-dock-tip {
        position: absolute;
        right: calc(100% + 12px);
        top: 50%;
        padding: 6px 10px;
        border-radius: 10px;
        background: #18332c;
        color: #ffffff;
        font-size: 13px;
        line-height: 18px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-50%) translateX(6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }

    .quick-dock-tip::after {
        content: "";
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-left-color: #18332c;
    }

    .quick-dock-btn:hover .quick-dock-tip,
    .quick-dock-btn:focus-visible .quick-dock-tip {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }
}


html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:active,
a[role="button"]:active {
    transform: translateY(1px) scale(.985);
}

:focus-visible {
    outline: 2px solid #B9E900;
    outline-offset: 3px;
}

img {
    image-rendering: auto;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 767px) {
    #home-quick-dock {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #home-quick-dock,
    .quick-dock-btn,
    .quick-dock-tip,
    .quick-dock-toast {
        transition: none !important;
    }
}


.cat-quickbar {
    top: 116px;
}
@media (max-width: 767px) {
  #view-news-detail { padding-top: 78px !important; padding-bottom: 92px !important; }
  #view-news-detail article { padding: 28px 20px 56px !important; }
  #view-news-detail .news-detail-breadcrumb { margin-bottom: 28px !important; }
  #view-news-detail h1 { font-size: clamp(2rem, 9vw, 3rem) !important; line-height: 1.18 !important; letter-spacing: -0.04em; }
  #view-news-detail .news-detail-hero { margin-bottom: 32px !important; border-radius: 20px !important; }
  #view-news-detail .news-detail-hero img { height: 240px !important; }
  #view-news-detail .news-detail-layout { display: block !important; }
  #view-news-detail .news-detail-aside { margin-bottom: 28px; }
  #view-news-detail .news-detail-aside .sticky { position: static; }
  #view-news-detail .text-body-lg { font-size: 1rem !important; line-height: 1.9 !important; }
  #view-news-detail .news-detail-layout h2 { font-size: 1.45rem !important; line-height: 1.35 !important; }
}

@media (max-width: 767px) {
  #view-privacy-policy { padding-top: 78px !important; padding-bottom: 92px !important; }
  #view-privacy-policy article { padding: 28px 20px 56px !important; }
  #view-privacy-policy .privacy-policy-content { padding: 24px 20px !important; border-radius: 20px !important; }
  #view-privacy-policy h1 { font-size: clamp(2rem, 9vw, 3rem) !important; line-height: 1.18 !important; }
  #view-privacy-policy h2 { font-size: 1.35rem !important; line-height: 1.4 !important; }
  #view-privacy-policy .text-body-lg { font-size: 1rem !important; line-height: 1.9 !important; }
}

@media (max-width: 767px) {
  #view-booking-policy,
  #view-court-safety { padding-top: 78px !important; padding-bottom: 92px !important; }
  #view-booking-policy article,
  #view-court-safety article { padding: 28px 20px 56px !important; }
  #view-booking-policy .service-policy-content,
  #view-court-safety .service-policy-content { padding: 24px 20px !important; border-radius: 20px !important; }
  #view-booking-policy h1,
  #view-court-safety h1 { font-size: clamp(2rem, 9vw, 3rem) !important; line-height: 1.18 !important; }
  #view-booking-policy h2,
  #view-court-safety h2 { font-size: 1.35rem !important; line-height: 1.4 !important; }
  #view-booking-policy .text-body-lg,
  #view-court-safety .text-body-lg { font-size: 1rem !important; line-height: 1.9 !important; }
}

@media (max-width: 767px) {
  .page-view h1,
  .page-view h2,
  .page-view h3,
  .page-view h4 { text-wrap: balance; overflow-wrap: anywhere; }

  .page-view p { text-wrap: pretty; }

  .page-view button,
  .page-view a[role="button"],
  .page-view input,
  .page-view select { min-height: 44px; }

  #view-home > section:not(:first-of-type) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  #view-court-overview section,
  #view-coaching-and-clinics section,
  #view-tournaments-and-events section,
  #view-pro-shop section,
  #view-news section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #view-court-overview section,
  #view-coaching-and-clinics section,
  #view-tournaments-and-events section,
  #view-pro-shop section { padding-top: 32px !important; padding-bottom: 32px !important; }

  #view-coaching-and-clinics .coach-roster-grid > div > div:first-child > div:first-child {
    height: 270px !important;
    max-height: 270px !important;
  }

  #view-coaching-and-clinics .coach-roster-grid > div > div:first-child > div:nth-child(2) {
    padding: 20px !important;
  }

  #view-coaching-and-clinics .coach-roster-grid > div > div:first-child > div:nth-child(2) h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  #view-news .news-contact-highlights > div {
    min-height: 64px !important;
    padding: 10px !important;
    align-items: center !important;
  }

  #view-news .news-contact-highlights > div > div,
  #view-news .news-contact-highlights p { line-height: 1.35 !important; }

  #view-news .grid-cols-1 { gap: 20px !important; }

  #view-news .grid-cols-1 > article,
  #view-pro-shop .pro-shop-product-card,
  #view-tournaments-and-events section > div > article { border-radius: 16px !important; }

  #view-privacy-policy .privacy-policy-content,
  #view-booking-policy .service-policy-content,
  #view-court-safety .service-policy-content { border-radius: 16px !important; }

  footer { margin-top: 40px !important; }

  footer li a,
  footer > div > div:last-child a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* ==========================================================================
   首页首屏轮播（数据驱动）
   每张场景自带背景图 + 文案层，靠 opacity 交叉淡化切换。
   visibility 必须一起切：非激活场景若只是透明，仍会盖住激活场景的按钮点击。
   ========================================================================== */
/* ── 首屏背景 ──────────────────────────────────────────────────────────────
   --hero-bg 由模板（首张）或 footer 脚本（其余场景）注入，形如 url("…webp?v=…")。
   素材 2400×1350，在 1440 宽的首屏里是缩小采样，像素上不吃亏。 */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 窄屏优先用 1600px 版本；没有生成窄屏图时自动回落到原图 */
@media (max-width: 820px) {
    .hero-slide-bg {
        background-image: var(--hero-bg-m, var(--hero-bg));
    }
}

#hero-carousel .carousel-slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 900ms ease, visibility 0s linear 900ms;
}

#hero-carousel .carousel-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* ── 场景文案入场：对齐中通官网 banner 的 textSlideIn ──────────────────────────
   zto.com 把标题与说明各作一段，从右侧 2rem 处水平滑入并淡入，1.5s ease，
   按 0.7s / 1s 阶梯错开（旧场景文字同时 1s 淡出，由整层 opacity 交叉淡化完成）。
   这里沿用同一条曲线，把首屏文案拆成「徽标行 → 标题 → 说明 → 按钮 → 标签」
   五段，按 0.15s 阶梯依次进场：位移量走 --bk-x（窄屏减半），延时走 --bk-d。
   动画只在 .hero-anim-run 存在时启用，原因有两条：
     · 无 JS 或脚本报错时文案保持常显，不会被 keyframes 的 opacity:0 吃掉；
     · CSS 只认「类从无到有」，由 setSlide() 每次重新挂号，二次进入同一场景也会重播。 */
@keyframes bk-hero-text-in {
    from { opacity: 0; transform: translate3d(var(--bk-x, 2rem), 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

#hero-carousel .carousel-slide.hero-anim-run .hero-anim {
    animation: bk-hero-text-in 1.5s ease both;
    animation-delay: var(--bk-d, 0.55s);
}

@media (max-width: 1023px) {
    #hero-carousel .hero-anim { --bk-x: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    #hero-carousel .carousel-slide {
        transition: none;
    }
    #hero-carousel .carousel-slide.hero-anim-run .hero-anim {
        animation: none;
    }
}

#view-home .hero-scene-control {
  min-height: 48px;
  height: 48px;
  align-items: center;
}

#view-home .hero-scene-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
}

#view-home .hero-scene-dot {
  position: relative;
  display: block;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  line-height: 0;
  appearance: none;
}

#view-home .hero-scene-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #dce5de;
  transform: translate(-50%, -50%);
}

#view-home .hero-scene-dot.is-active::after {
  width: 24px;
  height: 8px;
  background: #18332c;
}

#view-home .hero-scene-dot:focus-visible {
  outline: 2px solid #b7ef00;
  outline-offset: 1px;
}

@media (max-width: 767px) {
  #view-court-overview .restaurant-module > .grid {
    display: flex;
    flex-direction: column;
  }

  #view-court-overview .restaurant-module .col-span-5 {
    min-height: 190px;
  }

  #view-court-overview .restaurant-module .col-span-7 {
    padding: 24px !important;
  }

  #view-court-overview .restaurant-module .grid-cols-3 {
    gap: 8px;
  }

  #view-court-overview .restaurant-module .grid-cols-3 > div {
    padding: 12px 10px;
  }

  #view-court-overview .restaurant-module .font-headline-md {
    font-size: 22px !important;
  }

  #view-court-overview .restaurant-module > .grid > .col-span-7 > div:last-child {
    align-items: flex-start;
    flex-direction: column;
  }

  #view-court-overview .venue-gallery {
    padding-left: 16px !important;
    padding-right: 0 !important;
  }

  #view-court-overview .venue-gallery > div:first-child {
    padding-right: 16px;
  }

  #view-court-overview .venue-gallery-grid {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto;
    padding-right: 16px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #view-court-overview .venue-gallery-grid::-webkit-scrollbar {
    display: none;
  }

  #view-court-overview .venue-gallery-card {
    flex: 0 0 82vw;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   场地介绍 · 场地图片展示（画廊式，court-overview.php 的 .venue-gallery-*）
   --------------------------------------------------------------------------
   原状：4 张等高图片 + 图下两行文字，四张完全同构、图片占比小，观感平淡。
   现改为：图片铺满整卡 + 底部深色渐变字幕（照片成为主体），桌面 ≥1024px 走
   非对称编排（左 6 栏跨 2 行大图 + 右上两张 3 栏 + 右下 6 栏宽图），
   并加 01–04 序号角标（复用本站 SPEC 01 / ZONE A 的角标语言）。
   · 卡片本身无在流内容（图片与字幕均绝对定位），高度必须显式给定：
     移动端由 .venue-gallery-card 的 min-height 与 flex stretch 决定；
     ≥1024px 由 lg:auto-rows-[232px] 决定（大图 row-span-2 ⇒ 232*2+20=484）。
   · 移动端(<768px)仍由既有横滑 scroll-snap 轮播接管（display:flex!important），
     此处的 lg: 断点类不会干扰它。
   ========================================================================== */
.venue-gallery-card {
    min-height: 220px;
}

.venue-gallery-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(24, 51, 44, 0.92) 0%,
        rgba(24, 51, 44, 0.62) 30%,
        rgba(24, 51, 44, 0) 64%
    );
}

/* ==========================================================================
   官方联系渠道（联系页）：桌面 4 列 / 移动 2 列
   ⚠️ 千万不要在这里用 Tailwind 的 `grid-cols-2` 类：移动端存在全站规则
      `.page-view:not(#view-home) [class*="grid-cols-2"] { grid-template-columns: minmax(0,1fr)!important }`
      （特异性 1,2,0），会把它强制压成单列；只靠提高特异性对抗很脆弱，
      改用不匹配该属性选择器的语义类是正解。
   2026-10-16：联系页瘦身，四渠道由「2×2 大卡」改为桌面 1×4 紧凑卡
      （原为独立「官方账号矩阵」区块，与「微信 1对1 管家」重复展示同一张微信二维码）。
   ========================================================================== */
#view-contact-us .contact-channel-grid {
    display: grid !important;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 767px) {
    #view-contact-us .contact-channel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   顶栏：页面顶部「通栏毛玻璃条」 ↔ 滚动后「居中圆角胶囊」（仅桌面 >767px）
   - 顶部（scrollY < 8，header 带 .is-top）：贴 y=0、通栏铺满、直角、无阴影、更强毛玻璃
   - 滚动后：回到原来的 1360 圆角胶囊（top:24 / h:76 / radius:16 / 描边 + 投影）
   宽度靠 header 的 padding-inline 撑出两侧留白（0 ↔ (100% - 1360)/2），
   这样 ≤1360 本来就是通栏（留白 0），只有超宽屏才逐帧收窄，宽度变化才可过渡。
   特异性：用 `header.site-header` / `.site-header.is-top .site-header-bar` 压过 Tailwind 单类 (0,1,0)，
   不依赖 style.css 与 CDN 注入 <style> 的先后顺序。
   ========================================================================== */
@media (min-width: 768px) {
    header.site-header {
        top: 24px;
        padding-inline: max(0px, calc((100% - 1360px) / 2));
        transition: top 460ms cubic-bezier(.22, 1, .36, 1),
                    padding-inline 460ms cubic-bezier(.22, 1, .36, 1);
    }

    header.site-header .site-header-bar {
        transition: height 460ms cubic-bezier(.22, 1, .36, 1),
                    max-width 460ms cubic-bezier(.22, 1, .36, 1),
                    border-radius 460ms cubic-bezier(.22, 1, .36, 1),
                    padding-inline 460ms cubic-bezier(.22, 1, .36, 1),
                    background-color 320ms ease,
                    border-color 320ms ease,
                    box-shadow 460ms cubic-bezier(.22, 1, .36, 1);
    }

    header.site-header.is-top {
        top: 0;
        padding-inline: 0;
    }

    header.site-header.is-top .site-header-bar {
        height: 92px;
        max-width: 100%;
        border-radius: 0;
        border-color: rgba(220, 229, 222, 0);
        background-color: rgba(255, 255, 255, .88);
        box-shadow: 0 1px 0 rgba(24, 51, 44, .06);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        /* 通栏时内容仍与 1360 容器左缘对齐：外层留白之外再补原来的 px-5(20px) */
        padding-inline: max(20px, calc((100% - 1360px) / 2 + 20px));
    }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    header.site-header,
    header.site-header .site-header-bar {
        transition: none;
    }
}

/* ==========================================================================
   移动端卡片密度优化（2026-10-29）
   适用：底部菜单「商品 / 活动 / 助教」三个页面
   只调整布局、间距与显隐，不改字号（沿用既有字号体系）。
   选择器一律带 #view- 前缀并写在文件末尾，用于覆盖上面 767px 段里的旧规则。
   ========================================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------------------
       一、商品列表：竖版大卡 → 图左文右的紧凑列表
       单卡高度 553px → 约 165px，一屏从 1.5 张变成 4~5 张
       ------------------------------------------------------------------ */

    #view-pro-shop #bk-shop-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    #view-pro-shop .bk-shop-card {
        display: block !important;
        padding: 10px !important;
        border-radius: 14px !important;
        min-height: 0 !important;
    }

    /* 上半区改为「左图 + 右文」两列。
       用 grid 而不是 flex：卡片里图片、规格行、标题是同级兄弟节点，
       flex 会把它们当成并列项，标题会被压成一列一个字。 */
    #view-pro-shop .bk-shop-card > div:first-child {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 12px !important;
        align-items: start !important;
    }

    #view-pro-shop .bk-shop-card-media {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }

    #view-pro-shop .bk-shop-card > div:first-child > div.flex.items-center.gap-2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #view-pro-shop .bk-shop-card-title {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    #view-pro-shop .bk-shop-card-media {
        width: 92px !important;
        height: auto !important;
        min-height: 92px !important;
        max-height: none !important;
        align-self: stretch !important;
        margin: 0 !important;
        aspect-ratio: auto !important;
        border-radius: 10px !important;
    }

    /* 92px 的小图上只保留第一枚角标，其余全部隐藏，避免糊成一团 */
    #view-pro-shop .bk-shop-card-media > div {
        top: auto !important;
        bottom: 4px !important;
        left: 4px !important;
        gap: 0 !important;
    }

    #view-pro-shop .bk-shop-card-media > div > span:nth-child(n + 2),
    #view-pro-shop .bk-shop-card-media > span {
        display: none !important;
    }

    /* 标题最多两行，行高对齐 92px 的图，避免长短标题把卡片撑高 */
    #view-pro-shop .bk-shop-card-title {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        line-height: 1.32 !important;
    }

    /* 手机上简介与特点标签让位给图与价格，详情页仍完整展示 */
    #view-pro-shop .bk-shop-card-summary,
    #view-pro-shop .bk-shop-card-chips,
    #view-pro-shop .bk-shop-card-trial {
        display: none !important;
    }

    #view-pro-shop .bk-shop-card-foot {
        margin-top: 8px !important;
        padding-top: 8px !important;
    }

    /* 侧栏筛选面板移到商品列表之后，商品不再被推到第二屏 */
    #view-pro-shop .bk-shop-layout {
        flex-direction: column !important;
        gap: 16px !important;
    }

    #view-pro-shop .bk-shop-main {
        order: 1 !important;
        gap: 12px !important;
    }

    #view-pro-shop .bk-shop-aside {
        order: 2 !important;
        gap: 12px !important;
    }

    #view-pro-shop .bk-shop-aside > div {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    /* 统计条：保留「共 N 款商品」+ 排序，隐藏两枚说明胶囊；
       左右两组都不许被压成竖排（曾出现「共/9/款/商/品」一字一行） */
    #view-pro-shop .bk-shop-toolbar {
        padding: 10px 12px !important;
        gap: 8px 12px !important;
        align-items: center !important;
    }

    #view-pro-shop .bk-shop-toolbar > div:first-child {
        gap: 8px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #view-pro-shop .bk-shop-toolbar > div:first-child > span {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    #view-pro-shop .bk-shop-toolbar > div:first-child > span.w-1\.5 {
        display: none !important;
    }

    #view-pro-shop .bk-shop-toolbar > div:last-child,
    #view-pro-shop .bk-shop-toolbar > div:last-child > div {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* 规格行只留「7.9-8.1 oz」这类短参数一行，系列名让给标题，避免挤掉商品名 */
    #view-pro-shop .bk-shop-card > div:first-child > div.flex.items-center.gap-2 {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        margin-bottom: 2px !important;
        gap: 5px !important;
    }

    #view-pro-shop .bk-shop-card > div:first-child > div.flex.items-center.gap-2 > span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #view-pro-shop .bk-shop-card > div:first-child > div.flex.items-center.gap-2 > span.w-1,
    #view-pro-shop .bk-shop-card > div:first-child > div.flex.items-center.gap-2 > span.uppercase {
        display: none !important;
    }

    #view-pro-shop .bk-shop-toolbar > div:first-child > .flex.items-center.gap-1\.5 {
        display: none !important;
    }

    #view-pro-shop .bk-shop-toolbar > div:last-child {
        flex-shrink: 0 !important;
    }

    /* ------------------------------------------------------------------
       二、赛事活动：卡片压缩
       ------------------------------------------------------------------ */

    #view-tournaments-and-events .events-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #view-tournaments-and-events .bk-metric-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    /* 赛事大卡：图 256 → 180，正文与按钮区收紧 */
    #view-tournaments-and-events .bk-tournament-card {
        border-radius: 16px !important;
    }

    #view-tournaments-and-events .bk-tournament-media {
        height: 180px !important;
    }

    #view-tournaments-and-events .bk-tournament-body {
        padding: 14px !important;
    }

    #view-tournaments-and-events .bk-tournament-info {
        margin-bottom: 10px !important;
    }

    #view-tournaments-and-events .bk-tournament-info > div + div {
        margin-top: 10px !important;
    }

    #view-tournaments-and-events .bk-tournament-info > div > div > p:last-child {
        overflow-wrap: anywhere !important;
    }

    #view-tournaments-and-events .bk-tournament-foot {
        padding-top: 10px !important;
        gap: 8px !important;
    }

    #view-tournaments-and-events .bk-tournament-foot > a,
    #view-tournaments-and-events .bk-tournament-foot > button {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        white-space: nowrap !important;
    }

    /* 球馆活动卡：图 176 → 132 */
    #view-tournaments-and-events .bk-activity-card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    #view-tournaments-and-events .bk-activity-media {
        height: 132px !important;
        margin-bottom: 10px !important;
    }

    /* 「技术支持：」不再折成「技术支 / 持：」 */
    #view-tournaments-and-events .bk-tech-label {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ------------------------------------------------------------------
       三、课程（助教）：卡片内边距收紧 + 底部按钮不再挤成三行
       ------------------------------------------------------------------ */

    #view-coaching-and-clinics .bk-course-card {
        padding: 16px !important;
        border-radius: 20px !important;
    }

    #view-coaching-and-clinics .bk-course-card > div:first-child > div:last-child {
        margin-bottom: 14px !important;
        padding-top: 12px !important;
    }

    /* 底部信息栏：周期安排在上、按钮整行在下，彻底消除 3 行折字与重叠 */
    #view-coaching-and-clinics .bk-course-foot {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin: 12px -16px -16px !important;
        padding: 12px 16px 14px !important;
        border-radius: 0 0 20px 20px !important;
    }

    #view-coaching-and-clinics .bk-course-foot > a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        white-space: nowrap !important;
        padding: 10px 12px !important;
    }

    /* 课程页顶部四个指标：2 × 2，不再单列占满一屏 */
    #view-coaching-and-clinics .bk-course-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 16px !important;
        padding-top: 14px !important;
    }

    #view-coaching-and-clinics .bk-course-stats > div {
        padding: 10px !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    /* 导师卡竖图 330 → 240，一屏能看到姓名与标签 */
    #view-coaching-and-clinics .coach-roster-grid > .bk-coach-card > div:first-child > .bk-coach-media {
        height: 240px !important;
        max-height: 240px !important;
        aspect-ratio: auto !important;
    }

    /* 底部深色 CTA：内边距从 48 收到 20，长文案不再撑出容器 */
    #view-coaching-and-clinics .bk-academy-cta {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    #view-coaching-and-clinics .bk-academy-cta .flex.items-center.gap-6 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    #view-coaching-and-clinics .bk-academy-cta button {
        padding-left: 12px !important;
        padding-right: 12px !important;
        white-space: nowrap !important;
    }
}

/* --------------------------------------------------------------------------
   移动端卡片密度优化 · 第二批
   卖点/服务两列、球馆活动卡改横向、价格与实验室卡收紧内边距
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* 商品页 hero 四个卖点：2 × 2 */
    #view-pro-shop .bk-shop-perks {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #view-pro-shop .bk-shop-perks > div {
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }

    #view-pro-shop .bk-shop-perks > div > div:first-child {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
    }

    /* 球馆活动卡：竖版 → 左图右文 */
    #view-tournaments-and-events .bk-activity-card {
        padding: 10px !important;
    }

    #view-tournaments-and-events .bk-activity-top {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 12px !important;
        align-items: start !important;
    }

    #view-tournaments-and-events .bk-activity-media {
        grid-column: 1 !important;
        grid-row: 1 / span 3 !important;
    }

    #view-tournaments-and-events .bk-activity-top > div:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #view-tournaments-and-events .bk-activity-top > h3 {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    #view-tournaments-and-events .bk-activity-desc {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    #view-tournaments-and-events .bk-activity-media {
        width: 96px !important;
        height: auto !important;
        min-height: 96px !important;
        max-height: none !important;
        align-self: stretch !important;
        margin-bottom: 0 !important;
        border-radius: 10px !important;
    }

    /* 两枚标签在窄列里换行，不再顶出卡片右缘 */
    #view-tournaments-and-events .bk-activity-top > div:nth-child(2) {
        flex-wrap: wrap !important;
        row-gap: 4px !important;
    }

    /* 96px 小图上的日期胶囊改为贴底一行，不再压住画面 */
    #view-tournaments-and-events .bk-activity-media > span {
        top: auto !important;
        bottom: 4px !important;
        left: 4px !important;
        padding: 1px 6px !important;
    }

    #view-tournaments-and-events .bk-activity-desc {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        margin-bottom: 0 !important;
        line-height: 1.5 !important;
    }

    #view-tournaments-and-events .bk-activity-foot {
        margin-top: 8px !important;
        padding-top: 8px !important;
    }

    /* 赛事服务四项：2 × 2 */
    #view-tournaments-and-events .bk-event-services {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    #view-tournaments-and-events .bk-event-services > div {
        gap: 10px !important;
    }

    #view-tournaments-and-events .bk-event-services > div > div:first-child {
        width: 34px !important;
        height: 34px !important;
    }

    /* 日程看板外壳与卡片 */
    #view-tournaments-and-events .bk-event-board {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    /* 筛选胶囊原来把容器撑宽，右侧两颗被挤出看板；
       容器允许收缩、胶囊不压缩，逐行换行而不是被裁字 */
    #view-tournaments-and-events #event-filters {
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        /* 只有 4 颗胶囊，直接换行比横向滑动更直观（原来的滑动式会被误读成裁字） */
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    #view-tournaments-and-events #event-filters .filter-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    #view-tournaments-and-events .event-session-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    /* 状态胶囊（开放报名中）在窄卡里会被顶出右边缘，允许标题行换行 */
    #view-tournaments-and-events .event-session-card > div:first-child {
        flex-wrap: wrap !important;
        row-gap: 6px !important;
    }

    #view-tournaments-and-events .event-session-card > div:first-child > div:first-child {
        min-width: 0 !important;
    }

    #view-tournaments-and-events .bk-event-faqs {
        gap: 12px !important;
    }

    #view-tournaments-and-events .bk-event-faqs > div {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    /* 课程页：价格卡 / 实验室卡 / 选购指引内边距收紧 */
    #view-coaching-and-clinics .bk-package-card {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    #view-coaching-and-clinics .bk-package-card ul {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #view-coaching-and-clinics .bk-lab-card {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    #view-coaching-and-clinics .bk-lab-card > div:first-child > div:first-child {
        margin-bottom: 10px !important;
    }

    /* 课程卡内部：头部、简介、要点三处留白收紧 */
    #view-coaching-and-clinics .bk-course-card > div:first-child > div:first-child {
        margin-bottom: 10px !important;
    }

    #view-coaching-and-clinics .bk-course-card > div:first-child > div:last-child > div {
        margin-bottom: 6px !important;
    }
}