/*
Theme Name: Hello Elementor Child (Xhorse Style)
Theme URI: https://xhorsekey.com
Description: Custom Child Theme for Xhorsekey.com - Homepage with Product Grid Cards, Category pages with Extended List View and Descriptions.
Author: Antigravity
Author URI: https://xhorsekey.com
Template: hello-elementor
Version: 1.0.7
Text Domain: hello-elementor-child
*/

:root {
    --xr-primary: #FF6600;
    --xr-primary-hover: #E55B00;
    --xr-dark: #2C3539;
    --xr-brown: #8B5A2B;
    --xr-gray-bg: #F5F6F8;
    --xr-border: #E2E8F0;
    --xr-green: #008800;
    --xr-whatsapp: #25D366;
    --xr-red: #D32F2F;
    --xr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--xr-font);
    color: #333333;
    background-color: #F8F9FA;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* ==========================================================================
   1. TOP UTILITY BAR & MAIN HEADER
   ========================================================================== */
.xr-topbar {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--xr-border);
    font-size: 13px;
    padding: 7px 0;
    color: #666;
}
.xr-topbar-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.xr-topbar a {
    color: #555;
    text-decoration: none;
    margin-right: 15px;
    transition: color 0.2s;
}
.xr-topbar a:hover {
    color: var(--xr-primary);
}
.xr-topbar .xr-signin {
    color: var(--xr-green);
    font-weight: 700;
}
.xr-topbar .xr-sep {
    color: #AAA;
    margin-right: 12px;
}
.xr-topbar .xr-whatsapp-link {
    color: var(--xr-whatsapp);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.xr-topbar-right {
    display: flex;
    align-items: center;
}
.xr-topbar-socials {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
}
.xr-social-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569 !important;
    text-decoration: none;
    transition: all 0.15s ease;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 0 !important;
}
.xr-social-fb:hover {
    color: #1877F2 !important;
    background: #EFF6FF;
}
.xr-social-yt:hover {
    color: #FF0000 !important;
    background: #FEF2F2;
}
.xr-topbar-divider {
    color: #CBD5E1;
    margin: 0 10px 0 0;
    font-size: 12px;
}

/* Main Header */
.xr-main-header {
    background: #FFFFFF;
    padding: 14px 0;
    border-bottom: 2px solid var(--xr-primary);
}
.xr-header-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.xr-logo a {
    display: block;
    text-decoration: none;
}
.xr-logo-img {
    height: 52px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: block;
}

/* Search Box with Category Selector */
.xr-search-wrap {
    flex: 1;
    max-width: 640px;
    background: #FFF;
    border: 2px solid var(--xr-primary);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.xr-search-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}
.xr-search-input {
    flex: 1;
    min-width: 140px;
    border: none;
    padding: 10px 14px;
    outline: none;
    font-size: 13.5px;
    color: #1E293B;
}
.xr-search-input::placeholder {
    color: #94A3B8;
    font-size: 13px;
}
.xr-search-cat-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #F8FAFC;
    border-left: 1px solid #E2E8F0;
}
.xr-search-cat-select {
    border: none;
    background: transparent;
    padding: 0 28px 0 12px;
    font-size: 13px;
    color: #475569;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    max-width: 175px;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-family: inherit;
}
.xr-search-cat-wrapper::after {
    content: "▾";
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: #64748B;
    font-size: 12px;
}
.xr-search-cat-select:focus {
    background: #FFF;
}
.xr-search-btn {
    background: var(--xr-primary);
    color: #FFFFFF;
    border: none;
    padding: 0 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    white-space: nowrap;
}
.xr-search-btn:hover {
    background: var(--xr-primary-hover);
}

/* Cart Header Action */
.xr-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--xr-primary);
    color: #FFFFFF !important;
    padding: 10px 18px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}
.xr-cart-btn:hover {
    background: var(--xr-primary-hover);
}

/* ==========================================================================
   2. MAIN NAVIGATION BAR
   ========================================================================== */
.xr-nav-bar {
    background: var(--xr-dark);
    color: #FFFFFF;
    border-bottom: 1px solid #1A1E21;
}
.xr-nav-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
}
.xr-cat-trigger-btn {
    background: var(--xr-primary);
    color: #FFFFFF;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    width: 240px;
    flex-shrink: 0;
    transition: background 0.2s;
}
.xr-cat-trigger-btn:hover {
    background: var(--xr-primary-hover);
}
.xr-cat-trigger-btn .xr-arrow {
    margin-left: auto;
    font-size: 14px;
}
.xr-main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    flex: 1;
}
.xr-main-menu li a {
    display: block;
    color: #E2E8F0;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.xr-main-menu li a:hover,
.xr-main-menu li.current-menu-item a {
    background: rgba(0, 0, 0, 0.3);
    color: var(--xr-primary);
}

/* ==========================================================================
   3. HERO LAYOUT (Fixed Banner Image & Selective Arrow Categories)
   ========================================================================== */
.xr-hero-container-wrap {
    max-width: 1240px;
    margin: 15px auto 25px;
    padding: 0 15px;
}
.xr-hero-layout-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 991px) {
    .xr-hero-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* Right Banner: Fixed 380px Height */
.xr-hero-banner-container {
    width: 100%;
    height: 380px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    background: #1A202C;
}
.xr-hero-banner-link {
    display: block;
    width: 100%;
    height: 100%;
}
.xr-hero-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.xr-hero-banner-img:hover {
    transform: scale(1.01);
}

/* Left OBD2 Categories Sidebar Card */
.xr-category-sidebar {
    background: #FFFFFF;
    border: 1px solid var(--xr-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}
.xr-cat-sidebar-header {
    background: #FAF8F5;
    border-bottom: 1px solid #ECECEC;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--xr-brown);
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.xr-cat-sidebar-header:hover {
    background: #F4EFE6;
}
.xr-cat-sidebar-header .xr-cat-arrow {
    margin-left: auto;
    font-size: 13px;
    color: var(--xr-brown);
}
.xr-cat-sidebar-body {
    overflow-y: auto;
    max-height: 338px;
    transition: max-height 0.3s ease-in-out, opacity 0.2s;
}
.xr-cat-sidebar-body.is-collapsed {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    opacity: 0;
    border: none;
}
.xr-cat-item {
    border-bottom: 1px solid #F1F3F5;
}
.xr-cat-link {
    display: block;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #2D3748;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    flex: 1;
}
.xr-cat-link:hover {
    color: var(--xr-primary);
    background: #FFFDF9;
}
.xr-cat-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.xr-cat-item-header:hover {
    background: #FFFDF9;
}
.xr-toggle-icon {
    padding: 9px 14px;
    font-size: 15px;
    color: #A0AEC0;
    cursor: pointer;
    transition: color 0.15s;
}
.xr-cat-item-header:hover .xr-toggle-icon {
    color: var(--xr-primary);
}
.xr-cat-item.is-open > .xr-cat-item-header .xr-cat-link {
    color: var(--xr-primary);
}
.xr-cat-item.is-open > .xr-cat-item-header .xr-toggle-icon {
    color: var(--xr-primary);
}
.xr-cat-submenu {
    background: #FAFAFA;
    padding: 3px 0 6px;
    border-top: 1px solid #F1F3F5;
}
.xr-cat-item:not(.is-open) .xr-cat-submenu {
    display: none;
}
.xr-sub-link {
    display: block;
    padding: 5px 14px 5px 24px;
    font-size: 13px;
    color: #4A5568;
    text-decoration: none;
    transition: color 0.15s, padding-left 0.15s;
}
.xr-sub-link .xr-sub-bullet {
    color: var(--xr-primary);
    font-weight: 700;
    margin-right: 4px;
}
.xr-sub-link:hover {
    color: var(--xr-primary);
    padding-left: 28px;
}

/* ==========================================================================
   4. FEATURED TILES
   ========================================================================== */
.xr-featured-cats, .xr-showcase-section {
    max-width: 1240px;
    margin: 25px auto;
    padding: 0 15px;
}
.xr-section-title {
    font-size: 20px;
    font-weight: 800;
    color: #1A202C;
    margin: 0 0 16px;
    border-left: 4px solid var(--xr-primary);
    padding-left: 12px;
}
.xr-tiles-grid,
.xr-top-gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.xr-tile-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 14px 10px;
    text-align: center;
    text-decoration: none;
    color: #1E293B;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.xr-tile-card:hover {
    border-color: var(--xr-primary);
    background: #FFF7ED;
    color: var(--xr-primary);
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.12);
    transform: translateY(-2px);
}
.xr-tile-name {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
}

@media (max-width: 991px) {
    .xr-tiles-grid,
    .xr-top-gallery-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .xr-tile-card {
        flex: 0 0 160px;
        min-width: 160px;
        white-space: nowrap;
    }
}

/* ==========================================================================
   5. HOMEPAGE PRODUCT CARDS (首頁商品卡 GRID)
   ========================================================================== */
.xr-tabs-wrapper {
    max-width: 1240px;
    margin: 10px auto 30px;
    padding: 0 15px;
}
.xr-tabs-header {
    display: flex;
    border-bottom: 2px solid var(--xr-primary);
    gap: 6px;
    margin-bottom: 20px;
}
.xr-tab-btn {
    background: #EAEAEA;
    color: #444;
    border: none;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: all 0.2s;
}
.xr-tab-btn:hover {
    background: #E0E0E0;
    color: var(--xr-primary);
}
.xr-tab-btn.active {
    background: var(--xr-primary);
    color: #FFFFFF;
}

/* Homepage Product Grid */
.xr-home-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 18px;
}

/* Product Card Component */
.xr-home-product-card {
    background: #FFFFFF;
    border: 1px solid var(--xr-border);
    border-radius: 6px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.xr-home-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: var(--xr-primary);
}
.xr-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--xr-red);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 3px;
    z-index: 2;
}
.xr-card-thumb-wrap {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.xr-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.xr-card-info-wrap {
    display: flex;
    flex-direction: column;
}
.xr-card-sku {
    font-size: 11.5px;
    color: #718096;
    margin-bottom: 4px;
    font-weight: 600;
}
.xr-card-title {
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 8px;
    height: 36px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.xr-card-title a {
    color: #2D3748;
    text-decoration: none;
    transition: color 0.15s;
}
.xr-card-title a:hover {
    color: var(--xr-primary);
}
.xr-card-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--xr-primary);
    margin-bottom: 4px;
}
.xr-card-stock {
    font-size: 12px;
    font-weight: 600;
    color: var(--xr-green);
    margin-bottom: 10px;
}
.xr-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}
.xr-card-btn-addtocart {
    flex: 1;
    background: var(--xr-primary);
    color: #FFFFFF !important;
    text-align: center;
    padding: 8px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.xr-card-btn-addtocart:hover {
    background: var(--xr-primary-hover);
}
.xr-card-btn-paypal {
    flex: 1;
    background: #FFC439;
    border: 1px solid #E0AC2B;
    color: #003087 !important;
    text-align: center;
    padding: 7px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 12.5px;
    text-decoration: none;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.xr-card-btn-paypal:hover {
    background: #F2BA36;
    border-color: #C99619;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}

/* ==========================================================================
   6. CATEGORY / ARCHIVE PAGE EXTENDED LIST VIEW (分類頁面 延伸列表式)
   ========================================================================== */
.xr-archive-page-wrap {
    max-width: 1240px;
    margin: 20px auto 40px;
    padding: 0 15px;
}
.xr-archive-layout-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 991px) {
    .xr-archive-layout-grid {
        grid-template-columns: 1fr;
    }
}

.xr-archive-breadcrumbs {
    font-size: 13px;
    color: #718096;
    margin-bottom: 10px;
}
.xr-archive-breadcrumbs a {
    color: #4A5568;
    text-decoration: none;
}
.xr-archive-breadcrumbs a:hover {
    color: var(--xr-primary);
}
.xr-archive-title {
    font-size: 26px;
    font-weight: 800;
    color: #1A202C;
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E2E8F0;
}
.xr-archive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 13.5px;
    color: #718096;
}

/* Category Extended List Row */
.xr-archive-list-row {
    background: #FFFFFF;
    border: 1px solid var(--xr-border);
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 180px 1fr 220px;
    gap: 20px;
    align-items: center;
    transition: box-shadow 0.2s, border-color 0.2s;
    list-style: none;
}
.xr-archive-list-row:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    border-color: var(--xr-primary);
}

@media (max-width: 900px) {
    .xr-archive-list-row {
        grid-template-columns: 140px 1fr;
    }
    .xr-archive-list-row .xr-row-action-col {
        grid-column: 1 / -1;
        border-top: 1px solid #EEE;
        padding-top: 14px;
        margin-top: 10px;
        border-left: none;
        padding-left: 0;
    }
}
@media (max-width: 600px) {
    .xr-archive-list-row {
        grid-template-columns: 1fr;
    }
}

/* Row Thumbnail */
.xr-row-thumb-col {
    position: relative;
    text-align: center;
}
.xr-badge-pill-sale {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--xr-red);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}
.xr-row-thumb-img {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

/* Row Middle Content */
.xr-row-content-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xr-row-title {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
}
.xr-row-title a {
    color: #1A202C;
    text-decoration: none;
    transition: color 0.15s;
}
.xr-row-title a:hover {
    color: var(--xr-primary);
}

.xr-badge-pill-red {
    background: #E53E3E;
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-right: 4px;
    vertical-align: middle;
}
.xr-badge-pill-green {
    background: #38A169;
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-right: 6px;
    vertical-align: middle;
}

.xr-row-meta-line {
    font-size: 13px;
    color: #718096;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.xr-row-sku strong {
    color: #2D3748;
}
.xr-row-stock {
    color: var(--xr-green);
    font-weight: 700;
}
.xr-row-rating {
    color: #E2B93B;
    font-size: 12px;
}
.xr-row-rating span {
    color: #718096;
}
.xr-row-dot {
    color: #CBD5E0;
}

/* Description Text Box (延伸詳細敘述) */
.xr-row-desc-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #4A5568;
    background: #F8F9FA;
    padding: 10px 14px;
    border-radius: 4px;
    border-left: 3px solid var(--xr-primary);
}

.xr-row-guarantee-line {
    font-size: 12px;
    color: #718096;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Row Right Action Box */
.xr-row-action-col {
    background: #FCFCFD;
    border-left: 1px solid #EDF2F7;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.xr-row-price-wrap {
    text-align: left;
}
.xr-row-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--xr-primary);
}
.xr-row-shipping {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xr-green);
    margin-top: 4px;
    letter-spacing: 0.25px;
    line-height: 1.4;
}
.xr-row-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xr-btn-row-addtocart {
    background: var(--xr-primary);
    color: #FFFFFF !important;
    text-align: center;
    padding: 9px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    transition: background 0.15s;
    display: block;
}
.xr-btn-row-addtocart:hover {
    background: var(--xr-primary-hover);
}
.xr-btn-row-paypal {
    background: #FFC439;
    border: 1px solid #E0AC2B;
    color: #003087 !important;
    text-align: center;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.15s;
}
.xr-btn-row-paypal:hover {
    background: #F2BA36;
    border-color: #C99619;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.xr-btn-row-buynow {
    background: #E65100;
    color: #FFFFFF !important;
    text-align: center;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s;
    display: block;
}
.xr-btn-row-buynow:hover {
    background: #BF360C;
}
.xr-btn-row-whatsapp {
    background: #FFFFFF;
    color: #128C7E !important;
    border: 1px solid var(--xr-whatsapp);
    text-align: center;
    padding: 7px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12.5px;
    text-decoration: none;
    transition: all 0.15s;
    display: block;
}
.xr-btn-row-whatsapp:hover {
    background: var(--xr-whatsapp);
    color: #FFFFFF !important;
}

/* ==========================================================================
   7. SINGLE PRODUCT PAGE ENHANCEMENTS
   ========================================================================== */
.single-product .summary .price {
    color: var(--xr-primary) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
}
/* Single Product Cart Form & Action Buttons (Aligned & Unified) */
.single-product div.product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 18px 0 12px 0 !important;
    max-width: 460px !important;
    width: 100% !important;
}

/* 1. Quantity Box */
.single-product div.product form.cart .quantity {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    float: none !important;
    flex-shrink: 0 !important;
}
.single-product div.product form.cart .quantity .qty {
    height: 46px !important;
    width: 65px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    padding: 0 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
    outline: none !important;
    transition: border-color 0.15s !important;
}
.single-product div.product form.cart .quantity .qty:focus {
    border-color: var(--xr-primary) !important;
}

/* 2. Add to Cart Button (Fills remainder of row) */
.single-product .summary .single_add_to_cart_button,
.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 !important;
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 24px !important;
    background-color: var(--xr-primary) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: none !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    margin: 0 !important;
    float: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}
.single-product .summary .single_add_to_cart_button:hover,
.single-product div.product form.cart .single_add_to_cart_button:hover {
    background-color: var(--xr-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.12) !important;
}

/* Express Separator */
.xr-express-checkout-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 0 8px 0;
    max-width: 460px;
    width: 100%;
}
.xr-express-checkout-separator span {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Official Native WooCommerce PayPal Smart Buttons Wrapper */
.single-product .ppc-button-wrapper,
.single-product div.product .ppc-button-wrapper {
    display: block !important;
    margin: 8px 0 16px 0 !important;
    max-width: 460px !important;
    width: 100% !important;
    clear: both !important;
}
.single-product .ppc-button-wrapper iframe,
.single-product .ppc-button-wrapper > div {
    border-radius: 6px !important;
}

/* Checkout Express Payment Banner */
.xr-checkout-paypal-express-banner {
    background: #FEF9C3;
    border: 1px solid #FDE047;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #854D0E;
}

/* Mobile responsive layout */
@media (max-width: 600px) {
    .single-product div.product form.cart {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        max-width: 100% !important;
    }
    .single-product div.product form.cart .quantity {
        width: 100% !important;
    }
    .single-product div.product form.cart .quantity .qty {
        width: 100% !important;
    }
    .single-product div.product form.cart .single_add_to_cart_button,
    .single-product .ppc-button-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
}
.xr-btn-buynow {
    background: #E65100;
    color: #FFFFFF !important;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.xr-btn-buynow:hover {
    background: #BF360C;
}
.xr-btn-whatsapp-chat {
    background: var(--xr-whatsapp);
    color: #FFFFFF !important;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.xr-btn-whatsapp-chat:hover {
    background: #1EBE5D;
}
.woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--xr-primary) !important;
}
.woocommerce-tabs ul.tabs li.active a {
    color: var(--xr-primary) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   8. TRUST BADGES SECTION
   ========================================================================== */
.xr-trust-badges {
    max-width: 1240px;
    margin: 25px auto;
    padding: 18px 15px;
    background: #FFFFFF;
    border: 1px solid var(--xr-border);
    border-radius: 6px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.xr-badge-item {
    display: flex;
    align-items: center;
    gap: 14px;
}
.xr-badge-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFF7ED;
    color: var(--xr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.xr-badge-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #111;
    margin-bottom: 2px;
}
.xr-badge-desc {
    font-size: 12px;
    color: #666;
}

/* ==========================================================================
   9. POLICY PAGES & SHIPPING POLICY TYPOGRAPHY
   ========================================================================== */
.xr-policy-sidebar {
    position: sticky;
    top: 20px;
}
.xr-policy-content {
    font-size: 15px;
    line-height: 1.85;
    letter-spacing: 0.2px;
    color: #334155;
}
.xr-policy-content h1 {
    font-size: 26px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.3px;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--xr-primary);
}
.xr-policy-content h2 {
    font-size: 18.5px;
    font-weight: 700;
    color: #1E293B;
    letter-spacing: -0.2px;
    margin-top: 36px;
    margin-bottom: 14px;
    border-left: 3px solid var(--xr-primary);
    padding-left: 10px;
    line-height: 1.4;
}
.xr-policy-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1E293B;
    margin-top: 24px;
    margin-bottom: 10px;
}
.xr-policy-content p {
    margin-bottom: 18px;
    line-height: 1.85;
    color: #334155;
}
.xr-policy-lead {
    font-size: 15.5px;
    line-height: 1.9;
    color: #1E293B;
    margin-bottom: 24px !important;
}
.xr-policy-content a {
    color: #0066CC;
    text-decoration: underline;
    font-weight: 600;
}
.xr-policy-content a:hover {
    color: var(--xr-primary);
}
.xr-policy-content ul {
    margin: 14px 0 22px 22px;
    padding: 0;
}
.xr-policy-content ul li {
    margin-bottom: 10px;
    line-height: 1.8;
}

/* Shipping Highlights 4-Grid */
.xr-shipping-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0 32px;
}
.xr-sh-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: transform 0.2s, border-color 0.2s;
}
.xr-sh-card:hover {
    border-color: var(--xr-primary);
    transform: translateY(-2px);
}
.xr-sh-icon {
    font-size: 26px;
    margin-bottom: 6px;
}
.xr-sh-title {
    font-weight: 700;
    font-size: 14px;
    color: #0F172A;
    margin-bottom: 4px;
}
.xr-sh-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: #64748B;
}

/* Shipping Table */
.xr-table-responsive {
    overflow-x: auto;
    margin: 20px 0 28px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.xr-shipping-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #FFFFFF;
}
.xr-shipping-table th {
    background: #F8FAFC;
    padding: 13px 18px;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #E2E8F0;
    text-align: left;
}
.xr-shipping-table td {
    padding: 15px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}
.xr-shipping-table tbody tr:last-child td {
    border-bottom: none;
}
.xr-shipping-table tbody tr:hover td {
    background: #FCFCFD;
}

/* Carrier Badges */
.xr-carrier-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.xr-pill-dhl {
    background: #FFF7ED;
    color: #C2410C;
    border: 1px solid #FDBA74;
}
.xr-pill-fedex {
    background: #FAF5FF;
    color: #7E22CE;
    border: 1px solid #D8B4FE;
}
.xr-pill-ups {
    background: #FEFCE8;
    color: #854D0E;
    border: 1px solid #FDE047;
}
.xr-pill-yun {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #93C5FD;
}

/* Callout Box */
.xr-info-callout {
    background: #FFFDF7;
    border: 1px solid #FED7AA;
    border-left: 4px solid var(--xr-primary);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 20px 0 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    line-height: 1.7;
    font-size: 14px;
    color: #78350F;
}
.xr-callout-icon {
    font-size: 20px;
    line-height: 1;
}

/* Contact Badges in Policy */
.xr-contact-badge-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}
.xr-link-whatsapp-pill {
    background: #25D366;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: 6px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 5px rgba(37,211,102,0.3);
    transition: all 0.2s;
}
.xr-link-whatsapp-pill:hover {
    background: #1EBE5D;
    transform: translateY(-1px);
}
.xr-link-email-pill {
    background: #F1F5F9;
    color: #334155 !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: 6px;
    text-decoration: none !important;
    border: 1px solid #CBD5E1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.xr-link-email-pill:hover {
    background: #E2E8F0;
}

@media (max-width: 900px) {
    .xr-header-container {
        flex-wrap: wrap;
        gap: 12px;
    }
    .xr-search-wrap {
        order: 3;
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   10. WHOLESALE PRICE INQUIRY AT CHECKOUT
   ========================================================================== */
.xr-checkout-wholesale-notice {
    background: #FFFDF5;
    border: 2px dashed #F59E0B;
    border-radius: 8px;
    padding: 16px 22px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
}
.xr-cw-icon {
    font-size: 36px;
    flex-shrink: 0;
    line-height: 1;
}
.xr-cw-text {
    flex: 1;
}
.xr-cw-title {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 700;
    color: #92400E;
}
.xr-cw-sub {
    margin: 0;
    font-size: 13px;
    color: #78350F;
    line-height: 1.5;
}
.xr-cw-btn-wrap {
    flex-shrink: 0;
}
.xr-cw-btn {
    background: #25D366;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35);
    transition: all 0.2s;
    white-space: nowrap;
}
.xr-cw-btn:hover {
    background: #1EBE5D;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.45);
}
.xr-cw-submit-hint {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 12.5px;
    margin: 12px 0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.xr-cw-hint-link {
    color: #16A34A !important;
    font-weight: 700;
    text-decoration: none;
}
.xr-cw-hint-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .xr-checkout-wholesale-notice {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 12px;
        padding: 14px 16px;
    }
    .xr-cw-btn {
        justify-content: center;
    }
}

/* Hide Redundant Added-To-Cart Notices */
.woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message,
div.woocommerce-message {
    display: none !important;
}

/* Shipping Typography & Spacing Polish */
.wc-block-components-totals-shipping,
.woocommerce-shipping-totals,
.shipping {
    padding: 10px 0 !important;
}

.wc-block-components-totals-shipping .wc-block-components-totals-item__value,
.woocommerce-shipping-totals td {
    font-size: 13.5px;
    letter-spacing: 0.25px;
    line-height: 1.5;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control {
    margin-bottom: 8px;
    padding: 6px 0;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
    font-size: 13.5px;
    letter-spacing: 0.3px;
    color: #334155;
    line-height: 1.5;
}

.wc-block-components-shipping-rates-control .wc-block-components-shipping-rates-control__package {
    border: none !important;
    padding: 0 !important;
}

ul#shipping_method {
    list-style: none;
    padding: 0;
    margin: 6px 0;
}

ul#shipping_method li {
    margin-bottom: 8px;
    font-size: 13.5px;
    letter-spacing: 0.25px;
    line-height: 1.5;
    color: #334155;
}

/* Product Page Shipping Estimator Widget */
.xr-product-shipping-estimator {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 18px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.xr-ship-header {
    padding-bottom: 10px;
    border-bottom: 1px dashed #CBD5E1;
    margin-bottom: 12px;
}

.xr-ship-header-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13.5px;
    line-height: 1.4;
}

.xr-ship-label {
    font-weight: 700;
    color: #1E293B;
}

.xr-ship-current-country {
    color: #0F172A;
    font-weight: 800;
}

.xr-ship-change-link {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #2563EB !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin-left: 4px !important;
    display: inline-block !important;
}
.xr-ship-change-link:hover {
    color: #1D4ED8 !important;
    text-decoration: none !important;
}

.xr-ship-selector-drawer {
    margin-top: 10px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.xr-ship-drawer-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    margin-bottom: 6px;
    display: block;
}

.xr-ship-drawer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.xr-ship-country-select {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    background: #F8FAFC;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 220px;
}
.xr-ship-country-select:focus {
    border-color: var(--xr-primary);
}

.xr-ship-drawer-done-btn {
    background: var(--xr-primary);
    color: #FFFFFF;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.xr-ship-drawer-done-btn:hover {
    background: var(--xr-primary-hover);
}

.xr-ship-methods-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 0.15s ease;
}

/* Interactive Shipping Option Cards */
.xr-ship-method-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    padding: 11px 14px;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    position: relative;
    margin: 0;
}

.xr-ship-method-card:hover {
    border-color: #94A3B8;
    background: #F8FAFC;
}

.xr-ship-method-card.is-selected {
    border-color: #0070BA;
    background: #F0F7FF;
    box-shadow: 0 0 0 1px #0070BA, 0 2px 6px rgba(0, 112, 186, 0.12);
}

.xr-ship-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.xr-ship-radio {
    width: 18px;
    height: 18px;
    accent-color: #0070BA;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.xr-ship-card-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xr-ship-method-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.xr-ship-method-eta {
    font-size: 12px;
    color: #64748B;
    letter-spacing: 0.1px;
    line-height: 1.3;
}

.xr-ship-method-cost {
    text-align: right;
    white-space: nowrap;
}

.xr-ship-badge-free {
    background: #DCFCE7;
    color: #166534;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    display: inline-block;
}

.xr-ship-badge-price {
    background: #EFF6FF;
    color: #1E40AF;
    font-size: 13px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Shipping Total & PayPal Checkout Bar */
.xr-ship-checkout-bar {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #CBD5E1;
}

.xr-ship-total-breakdown {
    margin-bottom: 10px;
}

.xr-ship-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: #475569;
}

.xr-ship-total-label {
    font-weight: 600;
}

.xr-ship-total-val {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
}

/* PayPal Button */
.xr-ship-paypal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #FFC439 !important;
    border: 1px solid #E0A800 !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    min-height: 48px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.xr-ship-paypal-btn:hover {
    background: #F2BA36 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    transform: translateY(-1px);
}

.xr-ship-paypal-btn:active {
    transform: translateY(0);
}

.xr-paypal-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xr-paypal-btn-text {
    font-size: 15px;
    font-weight: 700;
    color: #003087;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.2px;
}

.xr-pp-text-logo {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 900;
}
.xr-pp-text-logo em:first-child {
    color: #003087;
    font-style: italic;
}
.xr-pp-text-logo em:last-child {
    color: #0079C1;
    font-style: italic;
}

.xr-paypal-total-badge {
    background: rgba(0, 48, 135, 0.12);
    color: #003087;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    margin-left: 2px;
}

.xr-ship-paypal-guarantee {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: #64748B;
    letter-spacing: 0.2px;
}

.xr-ship-footer-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #E2E8F0;
    font-size: 11.5px;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 640px) {
    .xr-ship-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .xr-ship-country-select {
        max-width: 100%;
        width: 100%;
    }
}

/* ==========================================================================
   Comprehensive Mobile Responsive, Accessibility & Speed Optimizations
   ========================================================================== */

/* 1. Accessibility (a11y) Focus Ring & Tap Targets */
:focus-visible {
    outline: 2px solid #0070BA !important;
    outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #0070BA !important;
    outline-offset: 2px !important;
}

/* Touch targets min-height for mobile compliance */
button, 
.button, 
input[type="button"], 
input[type="submit"],
.xr-search-btn,
.xr-cart-btn,
.xr-btn-row-addtocart,
.xr-btn-row-paypal {
    min-height: 42px;
    touch-action: manipulation;
}

/* 2. Mobile Responsive Layout (Tablets & Phones <= 768px) */
@media (max-width: 768px) {
    /* Top utility bar */
    .xr-topbar {
        padding: 6px 0;
        font-size: 11.5px;
    }
    .xr-topbar-container {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        padding: 0 10px;
    }
    .xr-topbar-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .xr-topbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .xr-topbar a {
        margin-right: 0;
    }
    .xr-topbar-socials {
        margin-right: 4px;
        gap: 4px;
    }
    .xr-social-btn span {
        display: none; /* Icon only on mobile to save valuable space */
    }
    .xr-social-btn {
        padding: 2px 4px;
    }

    /* Main Header Layout on Mobile */
    .xr-main-header {
        padding: 10px 0 12px;
    }
    .xr-header-container {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 12px;
    }
    .xr-logo {
        flex: 1;
    }
    .xr-logo-img {
        height: 38px;
        max-width: 190px;
    }
    .xr-cart-btn {
        padding: 8px 14px;
        font-size: 13px;
        min-height: 38px;
    }
    
    /* Search Bar Takes Full Width on Row 2 */
    .xr-search-wrap {
        order: 3;
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 4px;
    }
    .xr-search-cat-wrapper {
        max-width: 110px;
    }
    .xr-search-cat-select {
        font-size: 12px;
        padding: 0 20px 0 8px;
        max-width: 105px;
    }
    .xr-search-input {
        font-size: 13px;
        padding: 8px 10px;
    }
    .xr-search-btn {
        padding: 0 14px;
        font-size: 13px;
    }

    /* Main Navigation: Horizontal Touch Scroll Bar */
    .xr-nav-bar {
        overflow: hidden;
    }
    .xr-nav-container {
        padding: 0;
    }
    .xr-main-menu {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 10px;
        gap: 4px;
    }
    .xr-main-menu::-webkit-scrollbar {
        display: none;
    }
    .xr-main-menu li {
        flex: 0 0 auto;
    }
    .xr-main-menu li a {
        padding: 10px 12px;
        font-size: 12.5px;
        border-radius: 4px;
    }

    /* Hero section */
    .xr-hero-container-wrap {
        margin: 10px auto 16px;
        padding: 0 10px;
    }
    .xr-hero-banner-container {
        height: 220px;
    }

    /* Single Product Layout */
    .woocommerce div.product {
        display: flex;
        flex-direction: column;
    }
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        float: none !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
    .woocommerce-product-gallery__image img,
    .woocommerce-product-gallery .wp-post-image {
        max-height: 320px !important;
    }
    .single-product .entry-title {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }
    .woocommerce-Price-amount {
        font-size: 24px;
    }
    .xr-product-shipping-estimator {
        padding: 14px 12px;
        margin: 15px 0;
    }
    .xr-ship-method-card {
        padding: 10px 12px;
    }
    .xr-ship-paypal-btn {
        min-height: 52px !important;
        font-size: 16px !important;
    }
    form.cart {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    form.cart .quantity {
        width: 100%;
        margin-right: 0 !important;
    }
    form.cart .quantity input.qty {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px;
    }
    form.cart button.single_add_to_cart_button {
        width: 100% !important;
        min-height: 48px;
        font-size: 16px;
    }

    /* Category / Archive Page on Mobile */
    .xr-archive-page-wrap {
        padding: 10px;
    }
    .xr-archive-layout-grid {
        grid-template-columns: 1fr;
    }
    .xr-archive-sidebar-col {
        display: none; /* Hide heavy sidebar on mobile to prioritize product browsing */
    }
    .xr-archive-list-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }
    .xr-row-thumb-img {
        max-height: 140px;
    }
    .xr-row-title {
        font-size: 15px;
    }
    .xr-row-desc-text {
        font-size: 12.5px;
        line-height: 1.45;
    }
    .xr-row-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .xr-btn-row-addtocart,
    .xr-btn-row-paypal {
        width: 100%;
        text-align: center;
        min-height: 44px;
        justify-content: center;
        display: flex;
        align-items: center;
    }

    /* Footer on Mobile */
    .xr-footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 15px;
    }
    .xr-copyright-bar {
        font-size: 11.5px;
        padding: 12px 10px;
        line-height: 1.5;
    }
}

/* 3. Small Smartphones (<= 480px) */
@media (max-width: 480px) {
    .xr-topbar-left .xr-whatsapp-link span {
        font-size: 11px;
    }
    .xr-logo-img {
        height: 32px;
        max-width: 160px;
    }
    .xr-cart-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    .xr-search-cat-wrapper {
        display: none; /* Hide category select on small screens to give 100% width to search input */
    }
    .xr-search-input {
        padding: 8px 10px;
        font-size: 13px;
    }
    .xr-hero-banner-container {
        height: 170px;
    }
    .single-product .entry-title {
        font-size: 18px !important;
    }
    .xr-ship-header-summary {
        font-size: 12px;
        flex-wrap: wrap;
    }
}










/* ==========================================================================
   Modern & Elegant WooCommerce / Archive Pagination
   ========================================================================== */
nav.navigation.pagination,
.woocommerce-pagination {
    margin: 45px 0 25px !important;
    padding: 18px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-top: 1px solid #E2E8F0 !important;
}

nav.navigation.pagination .screen-reader-text,
.woocommerce-pagination .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

nav.navigation.pagination .nav-links,
.woocommerce-pagination ul.page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    padding: 6px 10px !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #E2E8F0 !important;
}

nav.navigation.pagination .page-numbers,
.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li span.page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    line-height: 1 !important;
    user-select: none !important;
}

/* Hover State */
nav.navigation.pagination a.page-numbers:hover,
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
    color: #0070BA !important;
    background: #EFF6FF !important;
    border-color: #93C5FD !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 8px rgba(0, 112, 186, 0.12) !important;
}

/* Active / Current Page */
nav.navigation.pagination .page-numbers.current,
.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #0070BA 0%, #005088 100%) !important;
    border-color: #0070BA !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 112, 186, 0.3) !important;
    cursor: default !important;
}

/* Dots (...) */
nav.navigation.pagination .page-numbers.dots,
.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
    background: transparent !important;
    border: none !important;
    color: #94A3B8 !important;
    min-width: 24px !important;
    padding: 0 !important;
    letter-spacing: 2px !important;
}

/* Prev & Next Buttons */
nav.navigation.pagination a.prev.page-numbers,
nav.navigation.pagination a.next.page-numbers,
.woocommerce-pagination ul.page-numbers li a.prev.page-numbers,
.woocommerce-pagination ul.page-numbers li a.next.page-numbers {
    padding: 0 16px !important;
    font-weight: 700 !important;
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}

nav.navigation.pagination a.prev.page-numbers:hover,
nav.navigation.pagination a.next.page-numbers:hover,
.woocommerce-pagination ul.page-numbers li a.prev.page-numbers:hover,
.woocommerce-pagination ul.page-numbers li a.next.page-numbers:hover {
    background: #0070BA !important;
    color: #FFFFFF !important;
    border-color: #0070BA !important;
}


/* Hide any remaining WooCommerce on-sale badges site-wide */
.onsale,
.xr-badge-pill-sale,
.xr-badge-pill-red,
.xr-card-badge {
    display: none !important;
}

/* ========================================================
   WooCommerce Cart & Checkout Page Layout Corrections
   ======================================================== */
.xr-general-page-content {
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Neutralize Hello Elementor's .alignwide negative margins inside page card */
.xr-general-page-content .alignwide,
.xr-general-page-content .alignfull,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
    margin-inline: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure Cart Block fits cleanly inside the card container */
.wc-block-cart,
.wp-block-woocommerce-cart,
.wc-block-components-sidebar-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Remove verbose/redundant product descriptions that break cart row alignment */
.wc-block-components-product-metadata .wc-block-components-product-metadata__description,
.wc-block-components-product-details,
.wc-block-cart-items .wc-block-components-product-metadata__description {
    display: none !important;
}

/* Clean up Wholesale Notice placement at bottom of cart */
.xr-general-page-content .xr-checkout-wholesale-notice {
    margin-top: 30px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ========================================================
   Checkout Page (PROCEED TO CHECKOUT): 
   Move Shipping Methods & Payment Methods to Right Column
   ======================================================== */
@media (min-width: 920px) {
    /* 2-Column Balanced Grid: Left (Customer Info) & Right (Order Review + Shipping + Payment) */
    .wc-block-checkout__form .wc-block-components-sidebar-layout,
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
        column-gap: 36px !important;
        align-items: start !important;
    }

    /* Unpack the left main container so its children participate directly in the grid */
    .wc-block-checkout__form .wc-block-components-sidebar-layout .wc-block-checkout__main,
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
        display: contents !important;
    }

    /* LEFT COLUMN (Column 1): Contact info, Shipping address, Billing address, Order notes */
    .wc-block-checkout__main > *:not(.wc-block-checkout__shipping-option):not(.wc-block-checkout__shipping-method):not(.wc-block-checkout__pickup-options):not(.wc-block-checkout__payment-method):not(.wc-block-checkout__terms):not(.wc-block-checkout__actions) {
        grid-column: 1 !important;
    }

    /* RIGHT COLUMN (Column 2): Order Summary on top */
    .wc-block-checkout__form .wc-block-components-sidebar-layout .wc-block-checkout__sidebar,
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* RIGHT COLUMN: 選擇物流 (Shipping Method / Shipping Option) */
    .wc-block-checkout__main > .wc-block-checkout__shipping-option,
    .wc-block-checkout__main > .wc-block-checkout__shipping-method,
    .wc-block-checkout__main > .wc-block-checkout__pickup-options,
    .wc-block-checkout__main > [class*="shipping-option"],
    .wc-block-checkout__main > [class*="shipping-method"] {
        grid-column: 2 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    /* RIGHT COLUMN: 付款方式 (Payment Methods) */
    .wc-block-checkout__main > .wc-block-checkout__payment-method,
    .wc-block-checkout__main > [class*="payment-method"] {
        grid-column: 2 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    /* RIGHT COLUMN: 條款與送出訂單 (Terms & Place Order Button) */
    .wc-block-checkout__main > .wc-block-checkout__terms,
    .wc-block-checkout__main > .wc-block-checkout__actions,
    .wc-block-checkout__main > [class*="checkout__actions"] {
        grid-column: 2 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 12px !important;
    }

    /* Place Order button full width in right column */
    .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
        width: 100% !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }
}

/* ========================================================
   Classic WooCommerce 2-Column Checkout Layout
   Left Column: Customer Details (Billing & Shipping)
   Right Column: Order Summary, Shipping Selection & Payment
   ======================================================== */
.woocommerce-checkout {
    margin-top: 10px;
}

/* Coupon toggle on checkout */
.woocommerce-form-coupon-toggle {
    margin-bottom: 24px;
}
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #0070BA;
    border-radius: 4px;
    padding: 12px 18px;
    font-size: 14px;
    color: #334155;
}
.woocommerce-form-coupon-toggle .woocommerce-info a {
    color: #0070BA;
    font-weight: 700;
    text-decoration: underline;
}

/* 2-Column Desktop Grid for Checkout */
@media (min-width: 992px) {
    form.woocommerce-checkout {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 36px !important;
    }

    /* Left Column: Customer Details */
    form.woocommerce-checkout #customer_details {
        flex: 1 1 55% !important;
        max-width: 56% !important;
        width: 56% !important;
        float: none !important;
        margin: 0 !important;
    }

    /* Right Column: Order Review, Shipping, Payment */
    form.woocommerce-checkout #order_review_heading {
        display: none !important;
    }

    form.woocommerce-checkout #order_review {
        flex: 1 1 38% !important;
        max-width: 40% !important;
        width: 40% !important;
        float: none !important;
        margin: 0 !important;
        background: #FAF8F5 !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 8px !important;
        padding: 24px 26px !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.04) !important;
        position: sticky !important;
        top: 20px !important;
    }
}

/* Customer Fields Styling */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #E2E8F0 !important;
}

.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row {
    margin-bottom: 14px !important;
}

.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

.woocommerce-billing-fields input[type="text"],
.woocommerce-billing-fields input[type="email"],
.woocommerce-billing-fields input[type="tel"],
.woocommerce-billing-fields select,
.woocommerce-shipping-fields input[type="text"],
.woocommerce-shipping-fields select,
.woocommerce-additional-fields textarea {
    width: 100% !important;
    height: 42px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: #1E293B !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.woocommerce-additional-fields textarea {
    height: 90px !important;
    resize: vertical !important;
}

.woocommerce-billing-fields input:focus,
.woocommerce-billing-fields select:focus,
.woocommerce-shipping-fields input:focus,
.woocommerce-additional-fields textarea:focus {
    border-color: #0070BA !important;
    box-shadow: 0 0 0 3px rgba(0,112,186,0.12) !important;
    outline: none !important;
}

/* Order Review (Right Column) Styling */
#order_review:before {
    content: "Order Summary & Payment";
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #FF6600;
}

table.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    border: none !important;
}

table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
    padding: 10px 0 !important;
    border: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    vertical-align: middle !important;
}

table.woocommerce-checkout-review-order-table th.product-name,
table.woocommerce-checkout-review-order-table th.product-total {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #64748B !important;
    border-bottom: 2px solid #CBD5E1 !important;
}

table.woocommerce-checkout-review-order-table td.product-name {
    font-size: 14px !important;
    color: #1E293B !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

table.woocommerce-checkout-review-order-table td.product-total {
    text-align: right !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    white-space: nowrap !important;
}

/* Shipping Options (選擇物流) in Right Column */
tr.woocommerce-shipping-totals {
    background: #F8FAFC !important;
}
tr.woocommerce-shipping-totals th {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    padding-left: 10px !important;
}
tr.woocommerce-shipping-totals td {
    padding: 12px 10px !important;
}

ul#shipping_method {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul#shipping_method li {
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

ul#shipping_method li input[type="radio"] {
    margin-top: 3px !important;
    accent-color: #0070BA !important;
    cursor: pointer !important;
}

ul#shipping_method li label {
    cursor: pointer !important;
    font-weight: 500 !important;
}

/* Order Total Row */
tr.order-total th {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
}
tr.order-total td {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #FF6600 !important;
    text-align: right !important;
}

/* Payment Methods (付款方式) in Right Column */
#payment {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px !important;
    padding: 16px !important;
    margin-top: 16px !important;
}

#payment ul.payment_methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    margin-bottom: 16px !important;
}

#payment ul.payment_methods li {
    margin-bottom: 12px !important;
    font-size: 14px !important;
    color: #1E293B !important;
}

#payment ul.payment_methods li label {
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

#payment ul.payment_methods li input[type="radio"] {
    accent-color: #0070BA !important;
    cursor: pointer !important;
}

#payment .payment_box {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: #64748B !important;
    margin-top: 8px !important;
    line-height: 1.5 !important;
}

/* Place Order Button */
#payment #place_order {
    width: 100% !important;
    height: 48px !important;
    background: #0070BA !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.1s !important;
    box-shadow: 0 2px 6px rgba(0,112,186,0.3) !important;
    margin-top: 12px !important;
}

#payment #place_order:hover {
    background: #005A94 !important;
    transform: translateY(-1px) !important;
}