/* ============================================
   byCollectors Design System - Consolidated CSS
   ============================================ */

:root {
    --bc-primary: #3dd5c0;
    --bc-primary-dark: #2bbfaa;
    --bc-primary-hover: #2ab3a1;
    --bc-cta: #ffd93d;
    --bc-danger: #ff6b6b;
    --bc-dark: #1a1a1a;
    --bc-body-bg: #f8f9fa;
    --bc-white: #ffffff;
    --bc-text: #333333;
    --bc-text-dark: #1a1a1a;
    --bc-text-light: #666666;
    --bc-text-muted: #999999;
    --bc-text-faint: #aaaaaa;
    --bc-border: #e8e8e8;
    --bc-border-light: #f0f0f0;
    --bc-bg-light: #f5f5f5;
    --bc-bg-lighter: #f8f9fa;
    --bc-radius-xs: 6px;
    --bc-radius-sm: 8px;
    --bc-radius-md: 12px;
    --bc-radius-lg: 16px;
    --bc-radius-xl: 20px;
    --bc-radius-round: 24px;
    --bc-shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
    --bc-shadow-md: 0 4px 20px rgba(0,0,0,0.06);
    --bc-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --bc-shadow-card: 0 4px 20px rgba(0,0,0,0.08);
    --bc-max-width: 1400px;
    --bc-font: 'Inter', sans-serif;
    --bc-font-serif: 'Lora', serif;
    --bc-transition: all 0.2s ease;
}






/* ============================================
   Bootstrap CSS Replacement (minimal for JS)
   ============================================ */

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.5; color: #333; background: #f8f9fa; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
button { cursor: pointer; font-family: inherit; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 700; line-height: 1.2; }
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { margin-top: 0; margin-bottom: 1rem; }
input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }

/* Bootstrap JS-dependent classes */
.dropdown-menu { display: none; position: absolute; background: white; border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); min-width: 180px; padding: 8px 0; z-index: 1000; list-style: none; margin: 0; }
.open > .dropdown-menu, .dropdown.open .dropdown-menu { display: block; }
.dropdown-menu > li > a { display: block; padding: 8px 16px; color: #333; white-space: nowrap; font-size: 14px; transition: background 0.15s; }
.dropdown-menu > li > a:hover { background: #f0fdf9; color: #3dd5c0; }
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-toggle { cursor: pointer; }

.collapse { display: none; }
.collapse.in { display: block; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height 0.35s ease; }

.modal-open { overflow: hidden; }
.modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow-y: auto; }
.modal.in { display: block; }
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background: rgba(0,0,0,0.5); }
.modal-dialog { margin: 30px auto; max-width: 600px; }
.modal-content { background: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid #e8e8e8; display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 20px; }
.modal-footer { padding: 16px 20px; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 8px; }
.close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; opacity: 0.6; }
.close:hover { opacity: 1; }

.fade { opacity: 0; transition: opacity 0.15s; }
.fade.in { opacity: 1; }

.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }
.nav-tabs { display: flex; border-bottom: 2px solid #e8e8e8; list-style: none; padding: 0; margin: 0 0 20px; }
.nav-tabs > li { margin-bottom: -2px; }
.nav-tabs > li > a { display: block; padding: 12px 20px; color: #666; font-weight: 500; border-bottom: 2px solid transparent; transition: all 0.2s; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { color: #3dd5c0; border-bottom-color: #3dd5c0; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert-success { background: #e8faf6; color: #1a7a64; border: 1px solid #b8efe2; }
.alert-danger { background: #fff0f0; color: #c53030; border: 1px solid #ffc9c9; }
.alert-warning { background: #fff8e6; color: #8a6500; border: 1px solid #ffe199; }
.alert-info { background: #e8f4fd; color: #0c5286; border: 1px solid #b8ddf6; }
.alert-dismissible .close { float: right; margin: -4px -8px 0 0; }

.btn { display: inline-block; padding: 10px 20px; font-size: 14px; font-weight: 700; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 8px; transition: all 0.2s; text-decoration: none; }
.btn-primary { background: #3dd5c0; color: white; }
.btn-primary:hover { background: #2bbfaa; }
.btn-default { background: white; color: #333; border-color: #e8e8e8; }
.btn-default:hover { background: #f5f5f5; }
.btn-danger { background: #ff6b6b; color: white; }
.btn-danger:hover { background: #ff5252; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-xs { padding: 4px 8px; font-size: 12px; }
.btn-block { display: block; width: 100%; }
.btn-group { position: relative; display: inline-flex; }
.btn-group > .btn { position: relative; flex: 0 0 auto; }

.form-control { display: block; width: 100%; padding: 10px 14px; font-size: 14px; line-height: 1.5; color: #333; background: white; border: 1px solid #e8e8e8; border-radius: 8px; transition: border-color 0.2s; }
.form-control:focus { outline: none; border-color: #3dd5c0; box-shadow: 0 0 0 3px rgba(61,213,192,0.15); }
.form-group { margin-bottom: 16px; }
.input-group { display: flex; position: relative; }
.input-group .form-control { flex: 1; }
.input-group-btn { position: relative; white-space: nowrap; }
.input-group-btn > .btn { border-radius: 0 8px 8px 0; }
.input-group .form-control:first-child { border-radius: 8px 0 0 8px; }

.table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.table > thead > tr > th,
.table > tbody > tr > td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e8e8e8; }
.table > thead > tr > th { font-weight: 600; color: #666; font-size: 13px; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border: 1px solid #e8e8e8; }
.table-striped > tbody > tr:nth-child(odd) { background: #f8f9fa; }
.table-hover > tbody > tr:hover { background: #f0fdf9; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pagination { display: flex; list-style: none; padding: 0; margin: 0; gap: 4px; }
.pagination > li > a, .pagination > li > span { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid #e8e8e8; border-radius: 8px; color: #333; font-size: 14px; transition: all 0.2s; }
.pagination > li > a:hover { background: #f0fdf9; border-color: #3dd5c0; color: #3dd5c0; }
.pagination > .active > a, .pagination > .active > span { background: #3dd5c0; color: white; border-color: #3dd5c0; }
.pagination > .disabled > a, .pagination > .disabled > span { color: #ccc; pointer-events: none; }

.breadcrumb { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.breadcrumb > li + li::before { content: "›"; padding-right: 8px; color: #aaa; }
.breadcrumb > li > a { color: #666; }
.breadcrumb > li > a:hover { color: #3dd5c0; }
.breadcrumb > .active { color: #999; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-danger { color: #ff6b6b; }
.text-muted { color: #999; }
.pull-left { float: left; }
.pull-right { float: right; }
.clearfix::after { content: ""; display: table; clear: both; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.list-unstyled { list-style: none; padding-left: 0; }
.list-inline { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.well { background: #f5f5f5; border-radius: 12px; padding: 20px; margin-bottom: 20px; }

.row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { position: relative; padding-left: 15px; padding-right: 15px; }
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { width: 100%; }
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6 { width: 50%; }
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4 { width: 33.333333%; }
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3 { width: 25%; }
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8 { width: 66.666667%; }
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9 { width: 75%; }
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2 { width: 16.666667%; }
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10 { width: 83.333333%; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1 { width: 8.333333%; }
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11 { width: 91.666667%; }
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5 { width: 41.666667%; }
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7 { width: 58.333333%; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }

.tooltip { position: absolute; z-index: 1070; font-size: 12px; }
.tooltip .tooltip-inner { max-width: 200px; padding: 4px 10px; color: white; background: #333; border-radius: 4px; }
.tooltip .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }
.popover { position: absolute; z-index: 1060; max-width: 276px; background: white; border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

/* Notification styles for bootstrap-notify */
[data-notify="container"] { padding: 12px 16px; border-radius: 8px; background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.top-bar {
    background: #1a1a1a;
    color: white;
    padding: 10px 0;
    font-size: 13px;
}

.top-bar-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

.language-selector:hover,
.currency-selector:hover {
    background: rgba(255,255,255,0.15);
}

.shipping-promo {
    color: #3dd5c0;
    font-weight: 600;
}

.top-bar-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.account-link {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}

.account-link:hover {
    background: rgba(255,255,255,0.1);
}

.main-header {
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo span:nth-child(6) { color: #ffd93d; }

.logo span:nth-child(7) { color: #95e1d3; }

.main-nav > a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -6px;
    left: 0;
    background: #3dd5c0;
    transition: width 0.3s;
}

.main-nav a:hover {
    color: #3dd5c0;
}

.main-nav a:hover::after {
    width: 100%;
}

/* ── Mega-menu dropdown — seamless hover ── */
.nav-has-dropdown {
    position: relative;
    /* extend hover zone below the link text */
    padding-bottom: 20px;
    margin-bottom: -20px;
}

.nav-has-dropdown > a {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-arrow {
    font-size: 10px;
    transition: transform 0.2s;
    display: inline-block;
    opacity: 0.5;
}

.nav-has-dropdown:hover .nav-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.mega-menu {
    position: absolute;
    top: calc(100% - 15px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 500;
    min-width: 520px;
    pointer-events: none;
    border-top: 3px solid #3dd5c0;
}

/* Invisible bridge between trigger and menu to prevent hover loss */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 20px;
    display: block;
    background: transparent;
}

.mega-menu::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #3dd5c0;
}

.nav-has-dropdown:hover .mega-menu,
.mega-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.mega-menu--sm {
    grid-template-columns: repeat(3, 1fr);
    min-width: 360px;
}

.mega-item::after { display: none; }

.mega-icon {
    font-size: 26px;
    display: block;
    line-height: 1;
    transition: transform 0.2s;
}

.mega-item:hover .mega-icon { transform: scale(1.1); }

.mega-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.search-bar:focus-within {
    background: white;
    box-shadow: 0 0 0 2px #3dd5c0;
}

.cart-text {
    display: inline;
}

.burger-menu {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.burger-line {
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 3px;
    transition: all 0.3s;
}

.burger-menu.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.burger-menu.active .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-menu.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-header {
    padding: 24px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
}

.mobile-menu-content {
    padding: 24px;
}

.mobile-menu-section {
    margin-bottom: 32px;
}

.mobile-menu-title {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-menu-link {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}

.mobile-menu-link:hover {
    background: #3dd5c0;
    color: white;
}

/* Mobile search button */
.mobile-search-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: #333;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
}
.mobile-search-btn:hover { background: #f0f0f0; }

/* Mobile search bar — below header */
.mobile-search-bar {
    display: none;
    background: white;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1500;
    max-height: 80vh;
    overflow: hidden;
    border-radius: 0 0 12px 12px;
}
.mobile-search-bar.active {
    display: block;
}
.mobile-search-inner {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
}
.mobile-search-inner input {
    flex: 1;
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
}
.mobile-search-inner input:focus {
    border-color: #3dd5c0;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12);
}
.mobile-search-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    flex-shrink: 0;
}
.mobile-search-results {
    display: flex;
    flex-direction: column;
    max-height: calc(80vh - 60px);
    overflow: hidden;
}
.mobile-search-results .ms-items-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.mobile-search-results .ms-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}
.mobile-search-results .ms-item:hover {
    background: #f8f9fa;
}
.mobile-search-results .ms-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 6px;
    background: #f8f8f8;
    flex-shrink: 0;
}
.mobile-search-results .ms-item-info {
    flex: 1;
    min-width: 0;
}
.mobile-search-results .ms-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-search-results .ms-item-price {
    font-size: 13px;
    color: #3dd5c0;
    font-weight: 700;
}
.mobile-search-results .ms-all {
    display: block;
    text-align: center;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #3dd5c0;
    text-decoration: none;
    border-top: none;
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}
.mobile-search-results .ms-all:hover {
    background: #2bc4af;
    color: #fff;
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.slide-top { flex-shrink: 0; }

.slide-tag {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.slide-subtitle {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.45;
    margin: 0;
}

/* Slide image — see later definition for full-width style */

.slide-bottom { flex-shrink: 0; padding-top: 10px; }

.slide-btn {
    display: inline-block;
    padding: 13px 32px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 30px;
    letter-spacing: 0.2px;
    background: white;
    color: #1a1a1a;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.hero-slide:hover .slide-btn { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.28); }

.slider-arrow, .cat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: white;
    border: 1px solid #e0e0e0;
    color: #1a1a1a;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 1;
}

.slider-arrow:hover, .cat-arrow:hover { background: #f5f5f5; }

.slider-prev, .hero-arrow-prev { left: 14px; }

.slider-next, .hero-arrow-next { right: 14px; }

.trust-strip {
    background: white;
    border-bottom: 1px solid #f0f0f0;
    padding: 24px 40px;
}

.trust-strip-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 60px;
    align-items: center;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trust-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.trust-text strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.trust-text span {
    font-size: 13px;
    color: #999;
}

.categories {
    padding: 80px 40px;
    background: white;
}

.categories-content {
    max-width: 1400px;
    margin: 0 auto;
}

.section-subtitle {
    font-size: 16px;
    color: #666;
}

.categories-wrap {
    position: relative;
}

.categories-track {
    display: flex;
    gap: 20px;
    width: max-content;
    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}

.cat-prev { left: -24px; }

.cat-next { right: -24px; }

.cat-arrow {
    width: 48px !important;
    height: 48px !important;
    font-size: 26px !important;
    background: rgba(255,255,255,0.95) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
    border: none !important;
}

.cat-arrow:hover {
    background: white !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.categories-scroll { scrollbar-width: none; }

.categories-scroll::-webkit-scrollbar { display: none; }

.category-card {
    background: white;
    border-radius: 20px;
    padding: 0;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    flex-shrink: 0;
    width: 240px;
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.category-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.category-footer {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.category-count {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    background: #f5f5f5;
    padding: 3px 9px;
    border-radius: 20px;
}

.category-card:hover .category-count {
    background: #e0faf6;
    color: #3dd5c0;
}

.community-section {
    padding: 15px 40px 80px;
    background: white;
}

.community-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.community-card {
    border-radius: 20px;
    padding: 36px 32px;
    min-height: 200px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.community-card-fb {
    background: linear-gradient(135deg, #1877f2 0%, #0d5bb5 100%);
}

.community-card-yt {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
}

.community-card-buy {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.community-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.2);
    color: white;
    width: fit-content;
}

.community-card-buy .community-tag {
    background: rgba(0,0,0,0.08);
    color: #555;
}

.community-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 8px;
    color: white;
}

.community-card-buy .community-title { color: #1a1a1a; }

.community-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.82);
    margin: 0 0 20px;
}

.community-card-buy .community-subtitle { color: #666; }

.community-btn {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
    transition: transform 0.2s, box-shadow 0.2s;
}

.community-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

.community-card-fb .community-btn { background: white; color: #1877f2; }

.community-card-yt .community-btn { background: white; color: #cc0000; }

.community-card-buy .community-btn { background: #1a1a1a; color: white; }

.community-decor {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 88px;
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
}

.community-card-buy .community-decor { opacity: 0.35; }

.blog-section {
    padding: 56px 40px 0;
    background: white;
}

.blog-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.blog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.blog-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.blog-all-link {
    font-size: 0.85rem;
    color: #3dd5c0;
    text-decoration: none;
    font-weight: 600;
}

.blog-all-link:hover { text-decoration: underline; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-bottom: 56px;
    border-bottom: 1px solid #efefef;
}

.blog-card {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    transition: box-shadow 0.22s, transform 0.22s;
    display: flex;
    flex-direction: column;
}

.blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.11); transform: translateY(-3px); }

.blog-thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    background: #eef0f4;
}

.blog-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.blog-date {
    background: #f0f2f5;
    color: #777;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    width: fit-content;
}

.blog-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-name:hover { color: #3dd5c0; }

.blog-excerpt {
    font-size: 0.77rem;
    color: #777;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.blog-btn {
    margin-top: auto;
    display: inline-block;
    padding: 8px 18px;
    background: #3dd5c0;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    text-decoration: none;
    width: fit-content;
    transition: background 0.2s;
}

.blog-btn:hover { background: #2ab3a1; }

.checklists-section {
    background: #f8f9fa;
    padding: 56px 40px 64px;
    border-top: 1px solid #efefef;
}

.checklists-inner { max-width: 1200px; margin: 0 auto; }

.checklists-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.checklists-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.checklists-all-link {
    font-size: 0.85rem;
    color: #3dd5c0;
    text-decoration: none;
    font-weight: 600;
}

.checklists-all-link:hover { text-decoration: underline; }

.checklists-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.checklist-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    transition: box-shadow 0.22s, transform 0.22s;
    display: flex;
    flex-direction: column;
}

.checklist-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.11);
    transform: translateY(-3px);
}

.checklist-thumb {
    height: 150px;
    display: flex;
    overflow: hidden;
    flex-shrink: 0;
}

.checklist-thumb-img {
    width: 50%;
    background: #eef0f4;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0;
    overflow: hidden;
}

.checklist-thumb-img img {
    width: auto;
    height: 135px;
    object-fit: contain;
    object-position: bottom center;
}

.checklist-thumb-brand {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    padding: 16px;
}

.checklist-thumb-brand span {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    text-align: center;
}

.checklist-thumb-brand span em {
    color: #3dd5c0;
    font-style: normal;
}

.checklist-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.checklist-date {
    display: inline-block;
    background: #f0f2f5;
    color: #777;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    margin-bottom: 9px;
    width: fit-content;
}

.checklist-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 7px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}

.checklist-name:hover { color: #3dd5c0; }

.checklist-excerpt {
    font-size: 0.77rem;
    color: #666;
    line-height: 1.55;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.checklist-btn {
    display: inline-block;
    padding: 8px 18px;
    background: #ff6b6b;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    text-decoration: none;
    align-self: flex-start;
    transition: opacity 0.15s;
}

.checklist-btn:hover { opacity: 0.84; }

.products-content {
    max-width: 1400px;
    margin: 0 auto;
}

.products-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
}

.products-tabs {
    display: flex;
    gap: 32px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0;
}

.products-tab {
    padding: 16px 0;
    font-size: 18px;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
}

.products-tab.active {
    color: #3dd5c0;
    border-bottom-color: #3dd5c0;
}

.products-tab:hover {
    color: #3dd5c0;
}

.view-all-link {
    font-size: 14px;
    font-weight: 600;
    color: #3dd5c0;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 16px;
    transition: gap 0.2s;
}

.view-all-link:hover {
    gap: 8px;
}

/* Products carousel nav — arrows next to "Zobrazit vše" */
.products-carousel-nav {
    display: flex;
    gap: 8px;
}

.products-carousel-nav .slider-arrow {
    position: static;
    flex-shrink: 0;
}

/* Products carousel — infinite rotating via translateX */
.products-carousel-wrap {
    position: relative;
    overflow: hidden;
}

.products-carousel-track {
    display: flex;
    gap: 24px;
    padding: 4px 0 12px;
    /* transition set dynamically by JS */
}

.products-carousel-track .product-card-wrapper {
    flex: 0 0 240px;
    min-width: 240px;
}

@media (max-width: 768px) {
    .products-carousel-track .product-card-wrapper {
        flex: 0 0 200px;
        min-width: 200px;
    }
}

.product-card-wrapper {
    position: relative;
}

.product-card-home {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
    text-decoration: none;
    color: #333;
    display: block;
}

.product-card-home:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.product-badge.new {
    background: #3dd5c0;
    color: white;
}

.product-badge.sale {
    background: #ff6b6b;
    color: white;
}

.wishlist-btn:hover,
.wishlist-btn.active {
    background: #ff6b6b;
    color: white;
    transform: scale(1.1);
}

.product-image-home {
    width: 100%;
    aspect-ratio: 245/337;
    object-fit: cover;
    background: #f8f9fa;
    display: block;
}

.product-info-home {
    padding: 20px;
}

.product-name-home {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.4;
    height: 38px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-price-home {
    font-size: 16px;
    font-weight: 800;
    color: #3dd5c0;
    margin-bottom: 12px;
}

.product-add-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.product-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

.products-view-all {
    text-align: center;
    margin-top: 48px;
}

.products-view-all a {
    display: inline-block;
    padding: 16px 48px;
    border: 2px solid #3dd5c0;
    color: #3dd5c0;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s;
}

.products-view-all a:hover {
    background: #3dd5c0;
    color: white;
    transform: translateY(-2px);
}

.payment-badge {
    background: #333;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #ccc;
    letter-spacing: 0.5px;
}

.footer-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.footer-link:hover {
    color: #3dd5c0;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    color: #666;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.footer-bottom-links a:hover {
    color: #3dd5c0;
}

.cart-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid #e5e5e5; }

.cart-title { font-size: 24px; font-weight: 700; color: #1a1a1a; margin: 0; }

.cart-close { width: 36px; height: 36px; border: none; background: #f5f5f5; border-radius: 50%; font-size: 20px; color: #666; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }

.cart-close:hover { background: #3dd5c0; color: white; transform: rotate(90deg); }

.cart-content { flex: 1; overflow-y: auto; padding: 24px; }

.cart-items { display: flex; flex-direction: column; gap: 20px; }

.cart-item:hover { background: #f0f0f0; }

.cart-item-image { width: 80px; height: 110px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.cart-item-details { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.cart-item-name { font-size: 15px; font-weight: 600; color: #1a1a1a; margin: 0; line-height: 1.3; }

.cart-item-info { font-size: 13px; color: #666; margin: 0; }

.cart-item-quantity { display: flex; align-items: center; gap: 12px; margin-top: auto; }

.qty-value { font-size: 14px; font-weight: 600; color: #1a1a1a; min-width: 20px; text-align: center; }

.cart-item-price { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.price-amount { font-size: 18px; font-weight: 700; color: #1a1a1a; }

.remove-item { width: 32px; height: 32px; border: none; background: transparent; font-size: 16px; color: #999; cursor: pointer; border-radius: 6px; transition: all 0.2s; margin-top: auto; }

.remove-item:hover { background: #fee; color: #ef4444; }

.cart-empty { text-align: center; padding: 60px 20px; }

.empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.3; }

.empty-text { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }

.empty-subtext { font-size: 14px; color: #666; }

.cart-footer { border-top: 1px solid #e5e5e5; padding: 24px; background: #fafafa; }

.cart-promo { display: flex; gap: 8px; margin-bottom: 20px; }

.promo-input:focus { border-color: #3dd5c0; }

.promo-btn { padding: 12px 20px; background: white; border: 1px solid #e5e5e5; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #333; cursor: pointer; transition: all 0.2s; white-space: nowrap; }

.promo-btn:hover { border-color: #3dd5c0; color: #3dd5c0; }

.cart-summary { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.view-cart-link:hover { color: #3dd5c0; }

.toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1a1a1a; color: white; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 9999; pointer-events: none; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); white-space: nowrap; }

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.toast-check { color: #3dd5c0; font-size: 18px; }

.urgency-badge { position: absolute; top: 10px; bottom: auto; left: 10px; background: #ff6b6b; color: white; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; z-index: 2; pointer-events: none; }

.urgency-badge.watching { background: rgba(26,26,26,0.82); }

.marquee-strip {
    background: #1a1a1a;
    color: white;
    padding: 9px 0;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-track {
    display: inline-flex;
    animation: marqueeScroll 35s linear infinite;
}

.marquee-strip:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 36px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.marquee-sep { color: #3dd5c0; opacity: 0.6; font-size: 16px; }

.fan-rankings {
    background: #f8f9fa;
    padding: 64px 40px;
}

.fan-rankings-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.fan-rankings-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 36px;
}

.fan-rankings-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.fan-rankings-sub {
    font-size: 15px;
    color: #888;
}

.fan-rankings-all {
    font-size: 14px;
    font-weight: 700;
    color: #3dd5c0;
    text-decoration: none;
    white-space: nowrap;
}

.fan-rankings-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 28px;
}

.fan-col {
    background: white;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.fan-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.fan-col-icon { font-size: 18px; }

.fan-col-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #aaa;
    text-transform: uppercase;
}

.fan-list { display: flex; flex-direction: column; gap: 0; }

.fan-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

.fan-item:last-child { border-bottom: none; }

.fan-rank {
    font-size: 20px;
    font-weight: 700;
    color: #e8e8e8;
    min-width: 24px;
    text-align: center;
    line-height: 1;
}

.fan-item:nth-child(1) .fan-rank { color: #f59e0b; }

.fan-item:nth-child(2) .fan-rank { color: #94a3b8; }

.fan-item:nth-child(3) .fan-rank { color: #cd7c4e; }

.fan-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.fan-logo--player {
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 2px solid #f0f0f0;
}

.fan-info {
    flex: 1;
    min-width: 0;
}

.fan-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fan-bar-wrap {
    background: #f0f0f0;
    border-radius: 4px;
    height: 5px;
    overflow: hidden;
}

.fan-bar {
    height: 100%;
    background: linear-gradient(90deg, #3dd5c0, #2ab3a1);
    border-radius: 4px;
    transition: width 1s ease;
}

.fan-bar--player {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.fan-right {
    text-align: right;
    min-width: 52px;
}

.fan-count {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.1;
}

.fan-count-label {
    font-size: 10px;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fan-support-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f8f8f8;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fan-support-btn:hover { background: #ffe0ea; transform: scale(1.15); }

.fan-support-btn.active { background: #ffe0ea; }

.fan-cta-banner {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    padding: 36px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.fan-cta-title {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
}

.fan-cta-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    max-width: 500px;
    line-height: 1.6;
}

.fan-cta-right {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.fan-cta-btn {
    padding: 13px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.fan-cta-btn--primary {
    background: linear-gradient(135deg, #3dd5c0, #2ab3a1);
    color: white;
}

.fan-cta-btn--primary:hover { box-shadow: 0 6px 20px rgba(61,213,192,0.4); transform: translateY(-1px); }

.fan-cta-btn--outline {
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    background: transparent;
}

.fan-cta-btn--outline:hover { border-color: white; background: rgba(255,255,255,0.08); }

.teams-section {
    background: #fff;
    padding: 40px 0 32px;
    border-bottom: 1px solid #f0f0f0;
}

.teams-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.teams-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.teams-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.teams-all-link {
    font-size: 0.85rem;
    color: #3dd5c0;
    text-decoration: none;
    font-weight: 500;
}

.teams-all-link:hover { text-decoration: underline; }

.teams-scroll {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.teams-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: teamsMarquee 38s linear infinite;
}

.teams-scroll:hover .teams-track { animation-play-state: paused; }

.team-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    flex-shrink: 0;
    width: 92px;
}

.team-logo-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #f7f7f7;
    border: 2px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.team-item:hover .team-logo-wrap { border-color: #3dd5c0; box-shadow: 0 0 0 3px rgba(61,213,192,0.2); }

.team-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-name {
    font-size: 0.76rem;
    color: #444;
    text-align: center;
    line-height: 1.25;
    font-weight: 500;
}

.new-arrivals-section {
    padding: 56px 0 56px;
    background: linear-gradient(135deg, #8b0a2a 0%, #c4193f 45%, #dd3153 100%);
    /* Full-bleed: break out of any parent container */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.sale-carousel-wrap {
    position: relative;
    padding: 0 36px;
}

.sale-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.95);
    color: #1a1a1a;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: all 0.2s;
    line-height: 1;
}

.sale-arrow:hover { background: white; transform: translateY(-50%) scale(1.08); }

.sale-arrow-prev { left: -4px; }

.sale-arrow-next { right: -4px; }

.new-arrivals-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.new-arrivals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.new-arrivals-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-dot {
    width: 9px; height: 9px;
    background: #3dd5c0;
    border-radius: 50%;
    animation: pulseDot 1.8s ease-in-out infinite;
}

.new-arrivals-link { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 600; text-decoration: none; }

.new-arrivals-link:hover { color: white; text-decoration: underline; }

.new-arrivals-scroll::-webkit-scrollbar { display: none; }

.new-arrivals-scroll { scrollbar-width: none; }

.new-card {
    flex-shrink: 0;
    width: 220px;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.new-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.13); }

.new-card-img-wrap { position: relative; }

.new-card-img { width: 100%; aspect-ratio: 5/7; object-fit: cover; display: block; }

.new-card-info { padding: 11px 13px 14px; }

.new-card-badge {
    font-size: 10px; font-weight: 700; color: #3dd5c0;
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 5px;
}

.sale-img-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(239,68,68,0.45);
}

.new-card-badge--sale {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px; font-weight: 700;
    color: #ef4444;
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 5px;
}

.new-card-badge--sale::before {
    content: '🔴';
    font-size: 8px;
}

.new-card-name { font-size: 13px; font-weight: 700; color: #1a1a1a; line-height: 1.35; }

.new-card-price-row { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; }

.new-card-price { font-size: 16px; font-weight: 800; color: #3dd5c0; }

.new-card-price-orig { font-size: 12px; font-weight: 500; color: #bbb; text-decoration: line-through; }

.new-card-discount {
    display: inline-block;
    background: #fef2f2;
    color: #ef4444;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: auto;
}

.back-to-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; background: #3dd5c0; color: white; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 999; box-shadow: 0 4px 16px rgba(61,213,192,0.4); opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; display: flex; align-items: center; justify-content: center; }

.back-to-top.visible { opacity: 1; transform: translateY(0); }

.back-to-top.visible:hover { background: #2bb8a6; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(61,213,192,0.5); }

.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #1a1a1a; color: white; padding: 16px 40px; z-index: 9998; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 -4px 20px rgba(0,0,0,0.2); transition: transform 0.4s ease; }

.cookie-banner.hidden { transform: translateY(110%); }

.cookie-text { font-size: 13.5px; line-height: 1.5; color: #ccc; flex: 1; }

.cookie-text a { color: #3dd5c0; text-decoration: none; }

.cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }

.cookie-accept { background: #3dd5c0; color: #1a1a1a; font-weight: 700; border: none; padding: 9px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: background 0.2s; }

.cookie-accept:hover { background: #2bb8a6; }

.cookie-decline { background: transparent; color: #aaa; font-weight: 600; border: 1px solid #444; padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: border-color 0.2s, color 0.2s; }

.cookie-decline:hover { border-color: #888; color: white; }

.top-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.main-nav {
    display: flex;
    gap: 32px;
    align-items: center;
}

.main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s;
    position: relative;
}

.category-container {
    max-width: 1400px;
    margin: 0 auto 80px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
}

.category-sidebar {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.sidebar-section {
    margin-bottom: 32px;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-link:hover .sidebar-count {
    background: #e0faf6;
    color: #3dd5c0;
}

.sidebar-link.active .sidebar-count {
    background: #e0faf6;
    color: #3dd5c0;
}

.sidebar-icon {
    font-size: 18px;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-link-text {
    flex: 1;
}

.sidebar-count {
    background: #f0f0f0;
    color: #999;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.price-range {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.price-input {
    width: 68px;
    padding: 7px 8px;
    border: 1.5px solid #e5e5e5;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    text-align: center;
    transition: border-color 0.2s;
}

.price-input:focus {
    outline: none;
    border-color: #3dd5c0;
}

.price-dash { color: #bbb; }

.price-currency { color: #999; font-size: 13px; }

.price-slider {
    width: 100%;
    accent-color: #3dd5c0;
    cursor: pointer;
}

.filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3dd5c0;
}

.filter-item label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.category-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.category-header {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.category-icon {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    object-fit: cover;
}

.products-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: 12px;
    padding: 16px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.view-mode {
    display: flex;
    gap: 8px;
}

.view-btn.active {
    border-color: #3dd5c0;
    background: #f8fffd;
    color: #3dd5c0;
}

.toolbar-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

.sort-select {
    padding: 10px 16px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

.results-count {
    font-size: 14px;
    color: #666;
}

.active-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: white;
    border-radius: 10px;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.filters-label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e8faf6;
    color: #2ab395;
    border-radius: 20px;
    padding: 4px 10px 4px 12px;
    font-size: 13px;
    font-weight: 600;
}

.chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #2ab395;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    font-weight: 700;
}

.chip-remove:hover { color: #ff6b6b; }

.clear-filters {
    background: none;
    border: 1.5px solid #e5e5e5;
    color: #888;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.clear-filters:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.product-image {
    width: 100%;
    aspect-ratio: 245/337;
    object-fit: cover;
    background: #f8f9fa;
}

.card-player {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.card-collection {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.card-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.badge-legend  { background: #fff3e0; color: #f57c00; }

.badge-rookie  { background: #3dd5c0; color: white; }

.badge-graded  { background: #f3e5f5; color: #7b1fa2; }

.badge-auto    { background: #e8f5e9; color: #2e7d32; }

.badge-limited { background: #fce4ec; color: #c62828; }

.product-price {
    font-size: 16px;
    font-weight: 800;
    color: #3dd5c0;
    margin-bottom: 6px;
}

.mobile-filters-btn {
    display: none;
    width: 100%;
    padding: 14px;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 20px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover { background: #2bb8a6; transform: translateY(-3px) !important; box-shadow: 0 6px 20px rgba(61,213,192,0.5); }

.filter-badge {
    background: #ff6b6b; color: white;
    font-size: 11px; font-weight: 700;
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 7px; vertical-align: middle;
}

.category-hero {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 36px;
    align-items: center;
}

.team-logo-wrap.team-logo-wrap--hero {
    width: 140px !important;
    height: 140px !important;
    border-radius: 50%;
    background: #f7f7f7;
    border: 2px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
}

.team-logo-wrap--hero .team-logo,
.team-logo-wrap--hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.player-photo-wrap {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    position: relative;
}

.player-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 4px solid #f0f0f0;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    background: linear-gradient(135deg, #a50044 0%, #004d98 100%);
}

.player-nationality-flag {
    position: absolute;
    bottom: 4px; right: 4px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.category-info h1 {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.entity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.entity-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #f4f4f4;
    padding: 4px 12px;
    border-radius: 20px;
}

.entity-meta-tag .tag-icon { font-size: 14px; }

.entity-stats {
    display: flex;
    gap: 28px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.entity-stat { text-align: center; }

.entity-stat-val { font-size: 22px; font-weight: 700; color: #1a1a1a; }

.entity-stat-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.4px; }

.entity-stat-divider { width: 1px; background: #e5e5e5; align-self: stretch; }

.category-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.entity-cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.fav-toggle-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.3s;
    border: none; background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%); color: white;
}

.fav-toggle-btn .fav-heart { font-size: 16px; transition: transform 0.2s; }

.fav-toggle-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3); }

.fav-toggle-btn:hover .fav-heart { transform: scale(1.2); }

.fav-toggle-btn.active { background: linear-gradient(135deg, #e05a7a 0%, #c9486a 100%); }

.entity-product-count { font-size: 14px; color: #555; font-weight: 700; }

header, .main-header {
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.sticky-buy-bar {
    position: fixed;
    top: -80px;
    left: 0;
    right: 0;
    z-index: 999;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: top 0.3s ease;
    border-bottom: 2px solid #3dd5c0;
}

.sticky-buy-bar.visible {
    top: 0;
}

.sticky-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sticky-bar-info {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.sticky-bar-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-bar-price {
    font-size: 20px;
    font-weight: 700;
    color: #3dd5c0;
    white-space: nowrap;
    flex-shrink: 0;
}

.sticky-bar-btn {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.sticky-bar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.4);
}

.promo-bar {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.promo-bar .close-btn {
    margin-left: auto;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.promo-bar .close-btn:hover {
    opacity: 1;
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

nav {
    display: flex;
    gap: 32px;
}

nav a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s;
}

nav a:hover {
    color: #3dd5c0;
}

.search-bar input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    width: 200px;
}

.cart-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.2s;
}

.summary-row.discount {
    color: #10b981;
}

.discount-amount {
    color: #10b981;
}

.checkout-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

.checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(61, 213, 192, 0.4);
}

.checkout-btn:active {
    transform: translateY(0);
}

.checkout-page {
    display: none;
}

.product-page {
    display: block;
}

.product-page.hidden {
    display: none;
}

.progress-container {
    background: white;
    padding: 40px 40px 32px;
    margin-bottom: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.progress-steps {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.progress-line {
    position: absolute;
    top: 24px;
    left: 70px;
    right: 70px;
    height: 3px;
    background: linear-gradient(90deg, #e5e5e5 0%, #e5e5e5 100%);
    z-index: 1;
    border-radius: 10px;
}

.progress-line-active {
    position: absolute;
    top: 24px;
    left: 70px;
    height: 3px;
    background: linear-gradient(90deg, #3dd5c0 0%, #2ab3a1 100%);
    z-index: 2;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(61, 213, 192, 0.4);
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 3;
    position: relative;
}

.step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 3px solid #e5e5e5;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.step.active .step-circle {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    border-color: #3dd5c0;
    color: white;
    box-shadow: 0 6px 20px rgba(61, 213, 192, 0.4);
    transform: scale(1.1);
}

.step.completed .step-circle {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    color: white;
}

.step.completed .step-circle::after {
    content: '✓';
    font-size: 20px;
}

.step-label {
    font-size: 15px;
    font-weight: 600;
    color: #999;
    transition: all 0.3s;
}

.step.active .step-label {
    color: #3dd5c0;
    font-weight: 700;
}

.step.completed .step-label {
    color: #10b981;
}

.checkout-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 80px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
}

.checkout-section {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 24px;
    transition: all 0.3s;
}

.checkout-section:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.section-icon {
    font-size: 24px;
}

.radio-options {
    display: grid;
    gap: 16px;
}

.radio-option {
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    background: white;
}

.radio-option:hover {
    border-color: #3dd5c0;
    background: #f8fffd;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 213, 192, 0.15);
}

.radio-option.selected {
    border-color: #3dd5c0;
    background: linear-gradient(135deg, #f8fffd 0%, #ffffff 100%);
    box-shadow: 0 6px 20px rgba(61, 213, 192, 0.2);
}

.radio-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.radio-indicator {
    width: 24px;
    height: 24px;
    border: 2px solid #e5e5e5;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.3s;
    position: relative;
}

.radio-option.selected .radio-indicator {
    border-color: #3dd5c0;
    background: #3dd5c0;
    box-shadow: inset 0 0 0 4px white, 0 0 0 2px #3dd5c0;
}

.radio-text {
    flex: 1;
}

.radio-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.radio-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label .required {
    color: #ef4444;
}

.form-input:hover {
    border-color: #bbb;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.checkbox-item input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #3dd5c0;
}

.checkbox-label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    line-height: 1.6;
}

.checkbox-label a {
    color: #3dd5c0;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.checkbox-label a:hover {
    border-bottom-color: #3dd5c0;
}

.method-card.selected {
    border-color: #3dd5c0;
    background: linear-gradient(135deg, #f8fffd 0%, #ffffff 100%);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.15);
}

.pickup-button {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

.pickup-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(61, 213, 192, 0.4);
}

.pickup-info {
    margin-top: 16px;
    padding: 16px;
    background: #fff7ed;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    font-size: 14px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-button {
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(135deg, #c77dff 0%, #b565ff 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
    box-shadow: 0 4px 16px rgba(199, 125, 255, 0.3);
}

.payment-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(199, 125, 255, 0.4);
}

.order-summary {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    height: fit-content;
    position: sticky;
    top: 100px;
    border: 2px solid #f0f0f0;
}

.summary-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    margin-bottom: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.2s;
}

.summary-item:hover {
    background: #f0f0f0;
}

.summary-item-image {
    width: 70px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.summary-item-details {
    flex: 1;
}

.summary-item-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
    line-height: 1.4;
}

.summary-item-info {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.summary-item-price {
    font-weight: 700;
    font-size: 16px;
    color: #3dd5c0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 15px;
    color: #666;
}

.summary-row.total {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 3px solid #3dd5c0;
}

.summary-row.total .total-amount {
    color: #3dd5c0;
}

.checkout-actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.info-section {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    border-left: 4px solid #3dd5c0;
}

.info-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-text {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
}

.info-text strong {
    color: #1a1a1a;
    font-weight: 700;
}

.step-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.step-content.active {
    display: block;
}

.view-cart-link {
    text-align: center;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    padding: 8px;
    transition: color 0.2s;
}

.watching-counter { display: inline-flex; align-items: center; gap: 6px; background: #f5f5f5; color: #555; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 20px; margin-bottom: 12px; }

.watching-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; animation: pulse 1.5s infinite; }

.breadcrumb {
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 40px;
    font-size: 14px;
    color: #666;
}

.breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: #3dd5c0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px;
}

.product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    background: white;
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.product-image-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-image {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    cursor: zoom-in;
    transition: transform 0.3s;
}

.main-image:hover {
    transform: scale(1.02);
}

.gallery-thumbs {
    display: flex;
    gap: 10px;
}

.gallery-thumb {
    width: 68px;
    height: 93px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.55;
    transition: opacity 0.2s, border-color 0.2s, transform 0.15s;
}

.gallery-thumb:hover { opacity: 0.85; transform: translateY(-2px); }

.gallery-thumb.active { border-color: #3dd5c0; opacity: 1; }

.reviews-section {
    background: white;
    border-radius: 16px;
    padding: 40px 48px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-top: 24px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.reviews-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 28px;
}

.reviews-overview {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid #f0f0f0;
}

.reviews-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
}

.rating-big { font-size: 52px; font-weight: 700; color: #1a1a1a; line-height: 1; }

.stars-lg { color: #f59e0b; font-size: 22px; letter-spacing: 3px; }

.rating-count-text { color: #888; font-size: 13px; margin-top: 4px; }

.rating-bars-wrap { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.rating-bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }

.bar-label { width: 30px; color: #555; font-weight: 600; text-align: right; }

.bar-track { flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }

.bar-fill { height: 100%; background: #f59e0b; border-radius: 4px; }

.bar-count { width: 20px; color: #888; font-size: 12px; }

.reviews-list { display: flex; flex-direction: column; gap: 20px; }

.review-card {
    padding: 20px 24px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}

.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.reviewer-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: #3dd5c0; color: white; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.reviewer-meta { flex: 1; }

.reviewer-name { font-weight: 600; font-size: 14px; color: #1a1a1a; }

.review-date { font-size: 12px; color: #999; margin-top: 2px; }

.review-stars { color: #f59e0b; font-size: 15px; letter-spacing: 2px; }

.review-body { font-size: 14px; color: #444; line-height: 1.6; margin-bottom: 10px; }

.review-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #278C5F; font-weight: 600; }

.review-tag::before { content: '✓'; }

.product-info {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.product-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f9f6;
    color: #0d9488;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    width: fit-content;
}

.stock-badge::before {
    content: "✓";
    font-weight: 700;
}

.price-section {
    padding: 24px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.product-info .price {
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

/* Prevent .price from blowing up inside cart button */
.cart-btn .price,
.cart-btn .cart_heading,
.cart-btn .item-count,
.cart-btn .mycart {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    margin: 0 !important;
}

.price-note {
    font-size: 14px;
    color: #666;
}

.qty-control {
    display: flex;
    align-items: center;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
}

.qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #f8f8f8;
    color: #333;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.18s;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    background: #3dd5c0;
    color: white;
}

.qty-stock-hint {
    font-size: 12px;
    color: #aaa;
}

.urgency-signals {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 0 4px;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
}

.urgency-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #444;
}

.urgency-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    animation: urgPulse 1.6s ease-in-out infinite;
}

.urgency-item--warn { color: #b45309; }

.urgency-icon { font-size: 14px; line-height: 1; }

.cart-gamif {
    background: linear-gradient(135deg, #f0fdf9 0%, #e6faf4 100%);
    border: 1.5px solid #6ee7c8;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 8px 16px 0;
    font-size: 13px;
}

.gamif-msg {
    color: #065f46;
    margin-bottom: 10px;
    line-height: 1.45;
}

.gamif-track {
    background: #d1fae5;
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}

.gamif-fill {
    height: 100%;
    background: linear-gradient(90deg, #34d399, #10b981);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.gamif-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #6b7280;
}

.cart-gamif--done {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #34d399;
    color: #065f46;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    padding: 12px 16px;
    margin: 8px 16px 0;
    border-radius: 12px;
    border: 1.5px solid #34d399;
}

.product-details {
    display: grid;
    gap: 16px;
}

.detail-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #666;
    font-size: 14px;
}

.detail-value {
    color: #1a1a1a;
    font-weight: 500;
    font-size: 14px;
}

.club-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.club-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.club-link,
.player-link {
    color: #1a1a1a;
    text-decoration: underline;
    text-decoration-color: #3dd5c0;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: all 0.2s;
}

.club-link:hover,
.player-link:hover {
    color: #3dd5c0;
    text-decoration-color: #1a1a1a;
}

.purchase-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-top: 12px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 16px;
}

.quantity-label {
    font-weight: 600;
    font-size: 15px;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border-radius: 8px;
    padding: 4px;
}

.quantity-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #f0f0f0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.quantity-btn:hover {
    background: #3dd5c0;
    color: white;
}

.quantity-input {
    width: 60px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.discount-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 2px dashed #3dd5c0;
}

.discount-info-icon {
    font-size: 24px;
}

.discount-info-text {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.discount-info-text strong {
    color: #3dd5c0;
    font-weight: 600;
}

.product-details-section {
    margin-top: 60px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.tabs {
    display: flex;
    border-bottom: 2px solid #f0f0f0;
    padding: 0 48px;
    gap: 8px;
}

.tab-btn {
    padding: 20px 32px;
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
}

.tab-btn:hover {
    color: #3dd5c0;
}

.tab-btn.active {
    color: #3dd5c0;
    border-bottom-color: #3dd5c0;
}

.tab-content {
    display: none;
    padding: 48px;
}

.tab-content.active {
    display: block;
}

.intro-text {
    color: #999 !important;
    font-size: 14px !important;
    margin-bottom: 32px !important;
}

.content-card h2 {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin-top: 32px;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.content-card p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 20px;
    font-weight: 400;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #f0f0f0;
}

.specs-table {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.specs-section {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.specs-section-title {
    background: #f8f9fa;
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.specs-rows {
    background: white;
}

.specs-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.specs-row:last-child {
    border-bottom: none;
}

.specs-label {
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.specs-value {
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;
}

.specs-link {
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
    position: relative;
}

.specs-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #3dd5c0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s;
}

.specs-link:hover {
    color: #3dd5c0;
}

.specs-link:hover::after {
    transform: scaleX(1);
}

.similar-products-section {
    margin-top: 60px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px;
}

.carousel-controls {
    display: flex;
    gap: 12px;
}

.carousel-btn {
    width: 48px;
    height: 48px;
    border: 2px solid #e5e5e5;
    background: white;
    border-radius: 50%;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    border-color: #3dd5c0;
    color: #3dd5c0;
    transform: scale(1.1);
}

.products-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.products-carousel::-webkit-scrollbar {
    display: none;
}

.products-carousel::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.products-carousel::-webkit-scrollbar-thumb {
    background: #3dd5c0;
    border-radius: 10px;
}

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card:hover .product-card-image img {
    transform: scale(1.05);
}

.product-card-content {
    padding: 12px;
}

.product-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.4;
    height: 34px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-card-btn {
    width: 100%;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s;
}

.product-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 40px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

.footer-text {
    color: #999;
    line-height: 1.8;
    font-size: 14px;
}

.main-header .header-content { max-width: 1400px; margin: 0 auto; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }

.main-nav > a:hover::after { width: 100%; }

.logo span:nth-child(3) { color: #3dd5c0; }

.logo span:nth-child(4) { color: #ff6b6b; }

.logo span:nth-child(5) { color: #4ecdc4; }

.price-sale-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.discount-pct {
    font-size: 14px;
    font-weight: 700;
    color: #2b8a5e;
    background: #e6f5ee;
    padding: 3px 9px;
    border-radius: 6px;
    align-self: center;
}

.checkout-header {
    background: white;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 40px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.checkout-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.header-secure { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #888; font-weight: 500; }

.steps-bar {
    background: white;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 40px;
}

.step-item.active { color: #278C5F; }

.step-item.done { color: #278C5F; cursor: pointer; }

.step-item.active .step-num { background: #278C5F; color: white; }

.step-item.done .step-num { background: #278C5F; color: white; }

.step-connector.done { background: #278C5F; }

.checkout-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px 80px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

.checkout-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}

.card-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e8e8e8;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.card-section-title .title-icon { font-size: 18px; }

.card-body { padding: 24px; }

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px 16px;
    border-bottom: 2px solid #f0f0f0;
}

.cart-table th:last-child,
.cart-table td:last-child { text-align: right; }

.cart-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
    font-size: 14px;
}

.cart-img { width: 64px; height: 88px; object-fit: contain; border-radius: 6px; display: block; }

.cart-name { font-weight: 600; color: #1a1a1a; line-height: 1.4; }

.cart-model { font-size: 12px; color: #999; margin-top: 3px; }

.qty-wrap { display: flex; align-items: center; gap: 8px; }

.qty-btn-sm {
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: #3dd5c0; color: white; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    transition: background 0.2s;
}

.qty-btn-sm:hover { background: #2bb8a6; }

.qty-val { font-size: 15px; font-weight: 700; min-width: 20px; text-align: center; }

.remove-btn { background: none; border: none; cursor: pointer; font-size: 18px; color: #ccc; transition: color 0.2s; padding: 4px; }

.remove-btn:hover { color: #ff6b6b; }

.price-cell { font-weight: 700; font-size: 15px; color: #278C5F; white-space: nowrap; }

.gamif-bar {
    margin: 0 24px 24px;
    background: linear-gradient(135deg, #e8faf6 0%, #f0fff8 100%);
    border: 1.5px solid #3dd5c0;
    border-radius: 12px;
    padding: 16px 20px;
}

.gamif-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}

.gamif-text { font-size: 14px; font-weight: 600; color: #1a6b3a; }

.gamif-reward { font-size: 13px; color: #278C5F; font-weight: 700; }

.gamif-progress-track {
    background: #c8f0e8;
    border-radius: 99px;
    height: 10px;
    overflow: hidden;
}

.gamif-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #3dd5c0, #278C5F);
    transition: width 0.5s ease;
}

.gamif-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 11px;
    color: #666;
}

.promo-section { padding: 0 24px 24px; }

.promo-toggle {
    width: 100%; background: white; border: 1.5px solid #e5e5e5; border-radius: 10px;
    padding: 14px 18px; text-align: left; cursor: pointer; font-size: 14px; font-weight: 600;
    color: #333; display: flex; align-items: center; justify-content: space-between;
    transition: border-color 0.2s; margin-bottom: 8px;
}

.promo-toggle:hover { border-color: #3dd5c0; }

.promo-toggle .arrow { transition: transform 0.2s; font-style: normal; }

.promo-toggle.open .arrow { transform: rotate(180deg); }

.promo-body { display: none; padding: 12px 0 4px; }

.promo-body.open { display: flex; gap: 8px; }

.promo-input {
    flex: 1; padding: 11px 14px; border: 1.5px solid #e5e5e5; border-radius: 8px;
    font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.2s;
}

.promo-apply {
    padding: 11px 20px; background: #278C5F; color: white; border: none; border-radius: 8px;
    font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.2s;
}

.promo-apply:hover { background: #1e6b48; }

.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    gap: 16px;
    flex-wrap: wrap;
}

.summary-totals { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.summary-line { display: flex; gap: 32px; font-size: 14px; color: #666; }

.summary-line span:last-child { color: #1a1a1a; font-weight: 600; min-width: 90px; text-align: right; }

.summary-total { font-size: 18px; font-weight: 800; color: #1a1a1a; display: flex; gap: 32px; }

.summary-total span:last-child { color: #278C5F; min-width: 90px; text-align: right; }

.cart-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn-back {
    padding: 12px 22px; background: #1a1a1a; color: white; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s;
}

.btn-back:hover { background: #333; }

.btn-primary:disabled { background: #a0cfb9; cursor: not-allowed; transform: none; box-shadow: none; }

.form-section { margin-bottom: 28px; }

.form-section-label {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
    color: #278C5F; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px;
    padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.form-row.single { grid-template-columns: 1fr; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label { font-size: 13px; font-weight: 600; color: #555; }

.form-group label .req { color: #e05a00; }

.form-control {
    padding: 12px 14px; border: 1.5px solid #e5e5e5; border-radius: 8px;
    font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
    background: white; color: #1a1a1a;
}

.form-control:focus { border-color: #278C5F; box-shadow: 0 0 0 3px rgba(39,140,95,0.1); }

.form-control.filled { border-color: #b8e6d4; background: #f8fffc; }

.form-control::placeholder { color: #bbb; }

.checkbox-row {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px;
    background: #fafafa; border: 1.5px solid #e8e8e8; border-radius: 10px;
    cursor: pointer; transition: border-color 0.2s;
}

.checkbox-row:hover { border-color: #3dd5c0; }

.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: #278C5F; cursor: pointer; }

.checkbox-row span { font-size: 14px; font-weight: 600; color: #333; }

.checkbox-row .cb-icon { font-size: 18px; }

.delivery-option {
    border: 1.5px solid #e5e5e5; border-radius: 10px; margin-bottom: 10px;
    cursor: pointer; transition: border-color 0.2s, background 0.2s; overflow: hidden;
}

.delivery-option:hover { border-color: #3dd5c0; }

.delivery-option.selected { border-color: #278C5F; background: #f8fffc; }

.delivery-option-top {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
}

.delivery-option input[type="radio"] { accent-color: #278C5F; width: 16px; height: 16px; flex-shrink: 0; }

.delivery-option-info { flex: 1; }

.delivery-name { font-size: 14px; font-weight: 700; color: #1a1a1a; }

.delivery-desc { font-size: 12px; color: #888; }

.delivery-price { font-size: 14px; font-weight: 700; color: #278C5F; white-space: nowrap; }

.packeta-btn-row { padding: 0 18px 14px 46px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.btn-packeta {
    padding: 9px 16px; background: #3dd5c0; color: white; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.2s;
}

.btn-packeta:hover { background: #2bb8a6; }

.packeta-selected {
    font-size: 13px; color: #278C5F; font-weight: 600;
    background: #e8faf6; padding: 7px 12px; border-radius: 8px; display: flex; align-items: center; gap: 6px;
}

.payment-option {
    border: 1.5px solid #e5e5e5; border-radius: 10px; margin-bottom: 10px;
    padding: 14px 18px; cursor: pointer; transition: border-color 0.2s, background 0.2s;
    display: flex; align-items: center; gap: 12px;
}

.payment-option:hover { border-color: #3dd5c0; }

.payment-option.selected { border-color: #278C5F; background: #f8fffc; }

.payment-option input[type="radio"] { accent-color: #278C5F; width: 16px; height: 16px; flex-shrink: 0; }

.payment-option-info { flex: 1; }

.payment-name { font-size: 14px; font-weight: 700; color: #1a1a1a; display: flex; align-items: center; gap: 8px; }

.stripe-badge { background: #635bff; color: white; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.5px; }

.payment-desc { font-size: 12px; color: #888; margin-top: 2px; }

.order-sidebar { position: sticky; top: 90px; }

.sidebar-card { background: white; border-radius: 12px; border: 1px solid #e8e8e8; overflow: hidden; }

.sidebar-title {
    display: flex; align-items: center; gap: 8px; padding: 16px 20px;
    background: #f8f9fa; border-bottom: 1px solid #e8e8e8;
    font-size: 14px; font-weight: 700; color: #1a1a1a;
}

.sidebar-items { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; }

.sidebar-item { display: flex; gap: 12px; margin-bottom: 14px; }

.sidebar-item:last-child { margin-bottom: 0; }

.sidebar-item-img { width: 48px; height: 66px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }

.sidebar-item-info { flex: 1; min-width: 0; }

.sidebar-item-name { font-size: 13px; font-weight: 600; color: #1a1a1a; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sidebar-item-qty { font-size: 12px; color: #888; margin-top: 2px; }

.sidebar-item-price { font-size: 14px; font-weight: 700; color: #278C5F; white-space: nowrap; margin-top: 2px; }

.sidebar-totals { padding: 16px 20px; }

.sidebar-row { display: flex; justify-content: space-between; font-size: 14px; color: #666; margin-bottom: 8px; }

.sidebar-row span:last-child { font-weight: 600; color: #1a1a1a; }

.sidebar-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 800; color: #1a1a1a; padding-top: 12px; border-top: 2px solid #f0f0f0; margin-top: 4px; }

.sidebar-total span:last-child { color: #278C5F; }

.recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.recap-block { background: #fafafa; border-radius: 10px; padding: 16px; }

.recap-label { font-size: 12px; font-weight: 700; color: #278C5F; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

.recap-value { font-size: 14px; color: #1a1a1a; line-height: 1.6; }

.recap-value strong { font-weight: 700; }

.checkout-page.active { display: contents; }

.steps-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 16px 0;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #278C5F;
}

.step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: #278C5F; color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
}

.step-num.check::after { content: '✓'; }

.step-connector {
    flex: 1; height: 2px; background: #278C5F;
    margin: 0 12px; max-width: 80px; min-width: 20px;
}

.hero-banner {
    background: linear-gradient(135deg, #1a6b3a 0%, #278C5F 50%, #3dd5c0 100%);
    padding: 56px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.success-icon {
    width: 80px; height: 80px;
    background: rgba(255,255,255,0.2);
    border: 3px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    margin: 0 auto 24px;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.hero-subtitle {
    font-size: 16px; color: rgba(255,255,255,0.85); font-weight: 400;
    max-width: 480px; margin: 0 auto 24px;
}

.order-number-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 99px;
    padding: 8px 20px;
    font-size: 14px; font-weight: 600; color: white;
}

.order-number-badge .badge-label { opacity: 0.7; font-weight: 400; }

.thankyou-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 40px 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
}

.ty-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}

.ty-card + .ty-card { margin-top: 20px; }

.ty-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e8e8e8;
    font-size: 15px; font-weight: 700; color: #1a1a1a;
}

.ty-card-header .icon { font-size: 18px; }

.ty-card-body { padding: 24px; }

.order-item {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #f5f5f5;
}

.order-item:last-child { border-bottom: none; padding-bottom: 0; }

.order-item-img {
    width: 54px; height: 74px;
    object-fit: contain; border-radius: 6px;
    background: #f8f9fa; flex-shrink: 0;
    border: 1px solid #f0f0f0;
}

.order-item-info { flex: 1; min-width: 0; }

.order-item-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }

.order-item-meta { font-size: 12px; color: #999; margin-top: 3px; }

.order-item-qty {
    display: inline-flex; align-items: center; justify-content: center;
    background: #f0f0f0; border-radius: 6px;
    padding: 2px 8px; font-size: 12px; font-weight: 600; color: #555;
    margin-top: 4px;
}

.order-item-price { font-size: 15px; font-weight: 700; color: #278C5F; white-space: nowrap; }

.order-totals { margin-top: 16px; border-top: 2px solid #f0f0f0; padding-top: 16px; }

.total-row {
    display: flex; justify-content: space-between;
    font-size: 14px; color: #555; padding: 4px 0;
}

.total-row.grand {
    font-size: 17px; font-weight: 700; color: #1a1a1a;
    padding-top: 12px; margin-top: 8px; border-top: 1px solid #e8e8e8;
}

.next-steps { display: flex; flex-direction: column; gap: 0; }

.next-step {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #f5f5f5;
}

.next-step:last-child { border-bottom: none; padding-bottom: 0; }

.ns-icon-wrap {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}

.ns-icon-wrap.green { background: #e8faf3; }

.ns-icon-wrap.blue  { background: #e8f4ff; }

.ns-icon-wrap.purple{ background: #f3eeff; }

.ns-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; }

.ns-desc  { font-size: 13px; color: #777; line-height: 1.5; }

.info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

.info-block { }

.info-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #aaa; margin-bottom: 6px; }

.info-value { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.5; }

.info-value span { font-weight: 400; color: #555; }

.ty-sidebar { display: flex; flex-direction: column; gap: 20px; }

.bonus-card {
    background: linear-gradient(135deg, #e8faf6, #f0fff8);
    border: 1.5px solid #3dd5c0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.bonus-icon { font-size: 40px; margin-bottom: 10px; }

.bonus-title { font-size: 15px; font-weight: 700; color: #1a6b3a; margin-bottom: 6px; }

.bonus-desc { font-size: 13px; color: #278C5F; line-height: 1.5; }

.social-card {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px;
}

.social-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }

.social-desc { font-size: 13px; color: #777; margin-bottom: 16px; line-height: 1.5; }

.social-links { display: flex; flex-direction: column; gap: 10px; }

.social-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    text-decoration: none; font-size: 13px; font-weight: 600;
    transition: transform 0.15s, box-shadow 0.15s;
}

.social-link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.social-link.fb  { background: #1877f2; color: white; }

.social-link.yt  { background: #ff0000; color: white; }

.social-link.ig  { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; }

.social-icon { font-size: 18px; }

.social-name { flex: 1; }

.social-arrow { opacity: 0.7; font-size: 14px; }

.cta-group { display: flex; flex-direction: column; gap: 10px; }

.btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #278C5F; color: white;
    border: none; border-radius: 10px;
    padding: 14px 24px; font-size: 15px; font-weight: 700;
    text-decoration: none; cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.btn-primary:hover { background: #1f7050; transform: translateY(-1px); }

.btn-secondary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: white; color: #1a1a1a;
    border: 1.5px solid #e5e5e5; border-radius: 10px;
    padding: 13px 24px; font-size: 14px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}

.btn-secondary:hover { border-color: #278C5F; color: #278C5F; transform: translateY(-1px); }

.confetti-wrap {
    position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 200;
}

.confetto {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 2px;
    animation: fall linear forwards;
}

.ty-footer {
    text-align: center;
    padding: 24px 40px 40px;
    font-size: 12px; color: #aaa;
}

.ty-footer a { color: #888; text-decoration: none; }

.ty-footer a:hover { color: #278C5F; }

.success-alert {
    max-width: 1400px;
    margin: 0 auto 24px;
    padding: 0 40px;
}

.alert {
    background: #d1f4dd;
    border-left: 4px solid #10b981;
    padding: 16px 20px;
    border-radius: 8px;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-container {
    max-width: 1400px;
    margin: 0 auto 80px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
}

.account-sidebar {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.sidebar-link:hover {
    background: #f8f9fa;
    color: #3dd5c0;
}

.sidebar-link.active {
    background: #f8fffd;
    color: #3dd5c0;
    font-weight: 700;
}

.account-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.stat-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
}

.stat-card.points .stat-icon {
    background: linear-gradient(135deg, #ffd93d 0%, #f5c518 100%);
}

.stat-card.orders .stat-icon {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.stat-card.reviews-pending .stat-icon {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
}

.stat-description {
    font-size: 13px;
    color: #666;
}

.stat-link {
    color: #3dd5c0;
    text-decoration: none;
    font-weight: 600;
}

.stat-link:hover {
    text-decoration: underline;
}

.content-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

.card-action {
    font-size: 14px;
    color: #3dd5c0;
    text-decoration: none;
    font-weight: 600;
}

.card-action:hover {
    text-decoration: underline;
}

.favorites-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.favorite-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e5e5e5;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s;
}

.favorite-card:hover {
    border-color: #3dd5c0;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(61, 213, 192, 0.15);
}

.favorite-label {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.favorite-content {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.favorite-image {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.favorite-info h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.favorite-info p {
    font-size: 14px;
    color: #666;
}

.favorite-actions {
    display: flex;
    gap: 12px;
}

.favorite-btn {
    flex: 1;
    padding: 12px 20px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    text-align: center;
}

.favorite-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

.favorite-btn.secondary {
    background: white;
    color: #666;
    border: 2px solid #e5e5e5;
}

.favorite-btn.secondary:hover {
    border-color: #3dd5c0;
    color: #3dd5c0;
    box-shadow: none;
}

.fav-section {
    padding: 4px 0 8px;
}

.fav-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fav-limit {
    font-size: 11px;
    font-weight: 600;
    color: #bbb;
    background: #f3f3f3;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
}

.fav-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.fav-item {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 2px solid #e5e5e5;
    border-radius: 14px;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: all 0.25s;
}

.fav-item:hover {
    border-color: #3dd5c0;
    box-shadow: 0 6px 20px rgba(61,213,192,0.13);
    transform: translateY(-3px);
}

.fav-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    color: #aaa;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    padding: 0;
}

.fav-remove:hover {
    background: #ffe0e0;
    color: #e05a5a;
}

.fav-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin-bottom: 4px;
}

.fav-item--player .fav-player-img {
    width: 52px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    margin-bottom: 4px;
}

.fav-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}

.fav-sub {
    font-size: 12px;
    color: #888;
}

.fav-action-btn {
    margin-top: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.fav-action-btn:hover {
    box-shadow: 0 3px 10px rgba(61,213,192,0.35);
    transform: translateY(-1px);
}

.fav-add-slot {
    border: 2px dashed #d5d5d5;
    border-radius: 14px;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    transition: all 0.25s;
    font-family: 'Inter', sans-serif;
    min-height: 160px;
}

.fav-add-slot:hover {
    border-color: #3dd5c0;
    background: #f0fdf9;
}

.fav-add-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #aaa;
    transition: all 0.2s;
}

.fav-add-slot:hover .fav-add-icon {
    background: #3dd5c0;
    color: white;
}

.fav-add-label {
    font-size: 13px;
    font-weight: 600;
    color: #aaa;
    transition: color 0.2s;
}

.fav-add-slot:hover .fav-add-label {
    color: #3dd5c0;
}

.fav-empty-slot {
    border: 2px dashed #ebebeb;
    border-radius: 14px;
    min-height: 160px;
    opacity: 0.4;
}

.fav-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 20px 0;
}

.acc-list { display: flex; flex-direction: column; }

.acc-item { border-bottom: 1px solid #f0f0f0; }

.acc-item:last-child { border-bottom: none; }

.acc-trigger {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 16px 4px; background: none; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
    color: #1a1a1a; text-align: left; transition: color 0.2s;
}

.acc-trigger:hover { color: #3dd5c0; }

.acc-trigger-icon { font-size: 16px; flex-shrink: 0; }

.acc-arrow {
    margin-left: auto; font-size: 20px; color: #bbb;
    transition: transform 0.25s; display: inline-block;
}

.acc-item.open .acc-arrow { transform: rotate(90deg); color: #3dd5c0; }

.acc-item--highlight .acc-trigger { color: #3dd5c0; }

.acc-panel {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease, padding 0.2s;
    padding: 0 4px;
}

.acc-item.open .acc-panel { max-height: 1200px; padding: 4px 4px 20px; }

.acc-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }

.acc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-field { display: flex; flex-direction: column; gap: 5px; }

.form-label { font-size: 12px; font-weight: 700; color: #777; text-transform: uppercase; letter-spacing: 0.4px; }

.form-input {
    padding: 10px 14px; border: 2px solid #e5e5e5; border-radius: 9px;
    font-family: 'Inter', sans-serif; font-size: 14px; color: #1a1a1a;
    transition: border-color 0.2s; outline: none;
}

.form-input:focus { border-color: #3dd5c0; }

.acc-form-actions { padding-top: 4px; }

.acc-save-btn {
    padding: 11px 28px; background: linear-gradient(135deg, #3dd5c0, #2ab3a1);
    color: white; border: none; border-radius: 10px; font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}

.acc-save-btn:hover { box-shadow: 0 4px 14px rgba(61,213,192,0.35); transform: translateY(-1px); }

.acc-save-btn--outline {
    background: white; color: #3dd5c0;
    border: 2px solid #3dd5c0;
    box-shadow: none;
}

.acc-save-btn--outline:hover { background: #f0fdf9; }

.pwd-strength { display: flex; align-items: center; gap: 10px; margin-top: 4px; }

.pwd-bar { flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }

.pwd-fill { height: 100%; border-radius: 3px; width: 0%; transition: width 0.3s, background 0.3s; }

.pwd-label { font-size: 12px; color: #999; min-width: 70px; }

.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.addr-card {
    border: 2px solid #e5e5e5; border-radius: 12px; padding: 18px;
    font-size: 14px; line-height: 1.7; color: #444;
}

.addr-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.addr-badge {
    font-size: 11px; font-weight: 700; background: #e8f5f3; color: #2ab3a1;
    padding: 3px 10px; border-radius: 20px; text-transform: uppercase;
}

.addr-badge--delivery { background: #eef3ff; color: #5b7ef5; }

.addr-edit-btn {
    font-size: 12px; font-weight: 600; color: #3dd5c0; background: none;
    border: none; cursor: pointer; font-family: 'Inter', sans-serif;
}

.addr-add-btn {
    grid-column: 1 / -1; border: 2px dashed #d5d5d5; border-radius: 12px;
    padding: 14px; font-size: 14px; font-weight: 600; color: #aaa;
    background: none; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif;
}

.addr-add-btn:hover { border-color: #3dd5c0; color: #3dd5c0; background: #f0fdf9; }

.wishlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.wishlist-item {
    position: relative; border: 2px solid #e5e5e5; border-radius: 12px;
    padding: 14px 12px; display: flex; flex-direction: column; align-items: center;
    gap: 6px; text-align: center; transition: border-color 0.2s;
}

.wishlist-item:hover { border-color: #3dd5c0; }

.wishlist-remove {
    position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
    border-radius: 50%; border: none; background: #f5f5f5; color: #aaa;
    font-size: 11px; cursor: pointer; transition: all 0.15s; padding: 0;
}

.wishlist-remove:hover { background: #ffe0e0; color: #e05a5a; }

.wishlist-img { width: 60px; height: 82px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.wishlist-name { font-size: 12px; font-weight: 700; color: #1a1a1a; }

.wishlist-set { font-size: 11px; color: #999; }

.wishlist-price { font-size: 15px; font-weight: 700; color: #1a1a1a; }

.wishlist-cart-btn {
    width: 100%; padding: 7px; background: linear-gradient(135deg, #3dd5c0, #2ab3a1);
    color: white; border: none; border-radius: 8px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.2s;
}

.orders-table { border: 1px solid #f0f0f0; border-radius: 12px; overflow: hidden; }

.orders-head {
    display: grid; grid-template-columns: 90px 110px 1fr 110px 90px 80px;
    padding: 10px 16px; background: #f8f8f8;
    font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; gap: 8px;
}

.order-row {
    display: grid; grid-template-columns: 90px 110px 1fr 110px 90px 80px;
    padding: 13px 16px; border-top: 1px solid #f0f0f0;
    font-size: 14px; align-items: center; gap: 8px; transition: background 0.15s;
}

.order-row:hover { background: #fafafa; }

.order-num { font-weight: 700; color: #1a1a1a; }

.order-date { color: #888; font-size: 13px; }

.order-total { font-weight: 700; }

.order-status {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
}

.order-status--delivered { background: #e8f9f0; color: #0d9488; }

.order-status--processing { background: #fff8e1; color: #f59e0b; }

.order-detail-btn { font-size: 13px; font-weight: 600; color: #3dd5c0; text-decoration: none; white-space: nowrap; }

.acc-show-all { display: block; text-align: center; margin-top: 14px; font-size: 13px; font-weight: 600; color: #3dd5c0; text-decoration: none; }

.acc-empty { text-align: center; padding: 28px 0; }

.acc-empty-icon { font-size: 36px; margin-bottom: 10px; }

.acc-empty-text { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }

.acc-empty-sub { font-size: 13px; color: #999; }

.points-overview { background: linear-gradient(135deg, #f0fdf9, #e6faf4); border-radius: 12px; padding: 20px; margin-bottom: 16px; }

.points-big { font-size: 28px; font-weight: 700; color: #1a1a1a; }

.points-eq { font-size: 13px; color: #666; margin-bottom: 16px; }

.tier-label { font-size: 13px; color: #444; margin-bottom: 8px; }

.tier-bar-bg { background: #d1fae5; border-radius: 10px; height: 8px; overflow: hidden; margin-bottom: 5px; }

.tier-bar-fill { height: 100%; background: linear-gradient(90deg, #34d399, #10b981); border-radius: 10px; }

.tier-meta { display: flex; justify-content: space-between; font-size: 11px; color: #999; }

.points-history { border: 1px solid #f0f0f0; border-radius: 12px; overflow: hidden; }

.points-hist-head { padding: 9px 16px; background: #f8f8f8; font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; }

.points-hist-row {
    display: grid; grid-template-columns: 1fr 120px 80px;
    padding: 11px 16px; border-top: 1px solid #f0f0f0;
    font-size: 13px; align-items: center;
}

.points-date { color: #aaa; font-size: 12px; }

.points-earned { font-weight: 700; color: #10b981; text-align: right; }

.points-spent { font-weight: 700; color: #e05a5a; text-align: right; }

.trade-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px; border: 1px solid #f0f0f0; border-radius: 12px;
}

.trade-img { width: 40px; height: 55px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

.trade-info { flex: 1; }

.trade-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }

.trade-meta { font-size: 12px; color: #888; }

.trade-price { font-size: 16px; font-weight: 700; color: #10b981; }

.links-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.link-item {
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.link-item:hover {
    background: #3dd5c0;
    color: white;
    transform: translateX(4px);
}

.link-item::after {
    content: '→';
    font-size: 18px;
}

.mega-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 10px; text-decoration: none; color: #333; transition: background 0.15s, color 0.15s; }

.mega-item:hover { background: #f0fdf9; color: #3dd5c0; }

.site-header {
    background: white;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 40px;
    position: sticky; top: 0; z-index: 100;
}

.header-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}

.header-nav { display: flex; align-items: center; gap: 28px; }

.header-nav a {
    font-size: 14px; font-weight: 600; color: #555; text-decoration: none;
    transition: color 0.2s;
}

.header-nav a:hover, .header-nav a.active { color: #278C5F; }

.header-actions { display: flex; align-items: center; gap: 14px; }

.btn-shop {
    background: #278C5F; color: white; text-decoration: none;
    padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
    transition: background 0.2s;
}

.btn-shop:hover { background: #1f7050; }

.article-hero {
    position: relative;
    height: 480px;
    overflow: hidden;
}

.article-hero img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.55);
}

.hero-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 40px 48px;
}

.article-category {
    display: inline-flex; align-items: center; gap: 6px;
    background: #278C5F; color: white;
    padding: 4px 12px; border-radius: 99px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    text-decoration: none; margin-bottom: 14px;
    width: fit-content;
}

.article-title {
    font-size: 40px; font-weight: 700; color: white;
    line-height: 1.2; letter-spacing: -0.5px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
    margin-bottom: 16px;
}

.article-meta {
    display: flex; align-items: center; gap: 20px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500;
}

.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.4); }

.breadcrumb-inner .sep { font-size: 11px; }

.breadcrumb-inner .current { color: #1a1a1a; font-weight: 500; }

.page-wrap {
    max-width: 1200px; margin: 0 auto;
    padding: 48px 40px 80px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    align-items: start;
}

.article-body { min-width: 0; }

.article-lead {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px; line-height: 1.7;
    color: #333; margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 2px solid #f0f0f0;
}

.prose h2 {
    font-size: 26px; font-weight: 700; color: #1a1a1a;
    margin: 44px 0 16px; line-height: 1.3;
    scroll-margin-top: 90px;
}

.prose h3 {
    font-size: 19px; font-weight: 700; color: #1a1a1a;
    margin: 28px 0 12px; line-height: 1.4;
}

.prose p {
    font-size: 16px; line-height: 1.85; color: #333;
    margin-bottom: 20px;
}

.prose ul, .prose ol {
    margin: 0 0 20px 0; padding-left: 0;
    list-style: none;
}

.prose ul li, .prose ol li {
    font-size: 16px; line-height: 1.8; color: #333;
    padding: 6px 0 6px 28px; position: relative;
}

.prose ul li::before {
    content: '✓'; position: absolute; left: 0;
    color: #278C5F; font-weight: 700; font-size: 14px;
}

.prose ol { counter-reset: li; }

.prose ol li::before {
    content: counter(li); counter-increment: li;
    position: absolute; left: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background: #278C5F; color: white;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    top: 9px;
}

.prose strong { font-weight: 700; color: #1a1a1a; }

.prose em { font-style: italic; }

.prose a { color: #278C5F; font-weight: 600; text-decoration: none; }

.prose a:hover { text-decoration: underline; }

.article-img-wrap {
    margin: 32px 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

.article-img-wrap img {
    width: 100%; display: block;
    aspect-ratio: 16/9; object-fit: cover;
}

.img-caption {
    background: #f8f9fa; padding: 10px 16px;
    font-size: 13px; color: #888; font-style: italic;
    border-top: 1px solid #f0f0f0;
}

.tip-box {
    background: #e8faf3;
    border-left: 4px solid #278C5F;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 24px 0;
}

.tip-box-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #278C5F; margin-bottom: 6px;
}

.tip-box p { margin: 0; font-size: 15px; color: #1a6b3a; }

.warn-box {
    background: #fff8e8;
    border-left: 4px solid #f59e0b;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 24px 0;
}

.warn-box-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #d97706; margin-bottom: 6px;
}

.warn-box p { margin: 0; font-size: 15px; color: #78350f; }

.compare-table {
    width: 100%; border-collapse: collapse;
    margin: 28px 0; font-size: 14px;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.compare-table thead th {
    background: #278C5F; color: white;
    padding: 13px 16px; text-align: left;
    font-weight: 700; font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.3px;
}

.compare-table thead th:first-child { border-radius: 12px 0 0 0; }

.compare-table thead th:last-child { border-radius: 0 12px 0 0; }

.compare-table tbody tr:nth-child(even) { background: #f8f9fa; }

.compare-table tbody tr:hover { background: #f0faf5; }

.compare-table td {
    padding: 12px 16px; border-bottom: 1px solid #f0f0f0;
    color: #333; vertical-align: middle;
}

.compare-table td:first-child { font-weight: 600; color: #1a1a1a; }

.tag-good { color: #278C5F; font-weight: 600; }

.tag-mid  { color: #d97706; font-weight: 600; }

.tag-bad  { color: #ef4444; font-weight: 600; }

.cta-block {
    background: linear-gradient(135deg, #1a6b3a 0%, #278C5F 60%, #3dd5c0 100%);
    border-radius: 16px;
    padding: 36px 32px;
    margin: 44px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cta-block::before {
    content: '';
    position: absolute; right: -30px; top: -30px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
}

.cta-block::after {
    content: '';
    position: absolute; right: 60px; bottom: -50px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}

.cta-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #3dd5c0; margin-bottom: 8px;
}

.cta-title {
    font-size: 22px; font-weight: 700; color: white;
    line-height: 1.3; margin-bottom: 10px;
}

.cta-desc { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; }

.cta-btn {
    background: white; color: #278C5F;
    text-decoration: none; padding: 14px 28px;
    border-radius: 10px; font-size: 15px; font-weight: 700;
    white-space: nowrap; flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative; z-index: 1;
}

.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

.cta-cards-preview {
    display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;
}

.cta-card-chip {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 99px; padding: 4px 12px;
    font-size: 12px; color: white; font-weight: 500;
}

.method-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 16px; margin: 24px 0;
}

.method-card {
    background: white; border: 1px solid #e8e8e8;
    border-radius: 12px; padding: 20px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.method-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }

.method-icon { font-size: 32px; margin-bottom: 10px; }

.method-name { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }

.method-price { font-size: 12px; color: #278C5F; font-weight: 600; margin-bottom: 8px; }

.method-desc { font-size: 13px; color: #666; line-height: 1.6; }

.method-rating { display: flex; gap: 3px; margin-top: 10px; }

.star { font-size: 13px; }

.author-bio {
    display: flex; align-items: center; gap: 16px;
    background: white; border: 1px solid #e8e8e8;
    border-radius: 12px; padding: 20px 24px;
    margin-top: 48px;
}

.author-avatar {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; border: 2px solid #e8faf3;
}

.author-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }

.author-role { font-size: 12px; color: #278C5F; font-weight: 600; margin: 2px 0 6px; }

.author-desc { font-size: 13px; color: #666; line-height: 1.5; }

.share-bar {
    display: flex; align-items: center; gap: 12px;
    margin-top: 40px; padding-top: 28px;
    border-top: 2px solid #f0f0f0; flex-wrap: wrap;
}

.share-label { font-size: 14px; font-weight: 700; color: #1a1a1a; }

.share-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: transform 0.15s;
}

.share-btn:hover { transform: translateY(-1px); }

.share-btn.fb { background: #e8f0ff; color: #1877f2; }

.share-btn.tw { background: #e8f8ff; color: #1da1f2; }

.share-btn.cp { background: #f5f5f5; color: #555; cursor: pointer; border: none; font-family: inherit; }

.related-section { margin-top: 56px; }

.section-label {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #278C5F; margin-bottom: 8px;
}

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.related-card {
    background: white; border-radius: 12px; overflow: hidden;
    border: 1px solid #e8e8e8; text-decoration: none; color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}

.related-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.1); transform: translateY(-3px); }

.related-img { aspect-ratio: 16/9; object-fit: cover; width: 100%; display: block; }

.related-content { padding: 16px; }

.related-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #278C5F; margin-bottom: 6px; }

.related-title { font-size: 14px; font-weight: 700; color: #1a1a1a; line-height: 1.4; margin-bottom: 8px; }

.related-meta { font-size: 12px; color: #aaa; }

.article-sidebar { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 24px; }

.toc-card {
    background: white; border: 1px solid #e8e8e8; border-radius: 12px;
    overflow: hidden;
}

.toc-header {
    background: #f8f9fa; border-bottom: 1px solid #e8e8e8;
    padding: 14px 18px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: #1a1a1a;
    display: flex; align-items: center; gap: 8px;
}

.toc-list { padding: 8px 0; }

.toc-item a {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 18px; font-size: 13px; color: #555;
    text-decoration: none; transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}

.toc-item a:hover, .toc-item.active a { background: #f0faf5; color: #278C5F; }

.toc-num { font-weight: 700; color: #278C5F; flex-shrink: 0; font-size: 12px; min-width: 18px; }

.read-progress {
    background: white; border: 1px solid #e8e8e8; border-radius: 12px;
    padding: 16px 18px;
}

.progress-label { font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; justify-content: space-between; }

.progress-track { background: #f0f0f0; border-radius: 99px; height: 6px; overflow: hidden; }

.progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3dd5c0, #278C5F); transition: width 0.3s; width: 0%; }

.sidebar-cta {
    background: linear-gradient(160deg, #1a6b3a, #278C5F);
    border-radius: 12px; padding: 22px 18px; text-align: center;
}

.scta-icon { font-size: 36px; margin-bottom: 10px; }

.scta-title { font-size: 15px; font-weight: 700; color: white; margin-bottom: 6px; line-height: 1.3; }

.scta-desc { font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 16px; line-height: 1.5; }

.scta-btn {
    display: block; background: white; color: #278C5F;
    text-decoration: none; padding: 10px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 700; transition: transform 0.15s;
}

.scta-btn:hover { transform: scale(1.02); }

.tags-card {
    background: white; border: 1px solid #e8e8e8; border-radius: 12px;
    padding: 16px 18px;
}

.tags-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #aaa; margin-bottom: 12px; }

.tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
    background: #f5f5f5; color: #555; border-radius: 99px;
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    text-decoration: none; transition: background 0.15s, color 0.15s;
}

.tag:hover { background: #e8faf3; color: #278C5F; }

.top-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: transparent; z-index: 200;
}

.top-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #3dd5c0, #278C5F);
    transition: width 0.1s;
}

.site-footer {
    background: #111; color: #888; padding: 32px 40px;
    text-align: center; font-size: 13px;
}

.site-footer a { color: #666; text-decoration: none; }

.site-footer a:hover { color: #3dd5c0; }

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

body {
    font-family: 'Inter', sans-serif;
    background: #fff;
    color: #1a1a1a;
    line-height: 1.5;
}

.topbar {
    background: #1a1a1a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 40px;
    font-size: 12px;
    gap: 12px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: border-color 0.2s;
}

.topbar-btn:hover {
    border-color: rgba(255,255,255,0.6);
}

.topbar-promo {
    color: #3dd5c0;
    font-weight: 500;
}

.topbar-right {
    display: flex;
    align-items: center;
}

.topbar-account {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.topbar-account:hover {
    opacity: 1;
}

.cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255,217,61,0.4);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff6b6b;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.ticker-wrap {
    background: #2a2a2a;
    color: #fff;
    overflow: hidden;
    padding: 9px 0;
    font-size: 13px;
}

.ticker-track {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
}

.ticker-item {
    padding: 0 28px;
    font-weight: 500;
}

.ticker-sep {
    color: #3dd5c0;
    font-size: 16px;
    line-height: 1;
}

.breadcrumb-current {
    color: #555;
    font-weight: 500;
}

.hero-section {
    background: #fff;
    padding: 48px 0 40px;
    border-bottom: 1px solid #f0f0f0;
}

.hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 56px;
    align-items: start;
}

.hero-image-area {
    position: relative;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    transition: transform 0.3s;
}

.hero-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-card-1 {
    width: 160px;
    height: 220px;
    left: 0;
    top: 40px;
    transform: rotate(-8deg);
    z-index: 1;
}

.hero-card-2 {
    width: 165px;
    height: 226px;
    left: 70px;
    top: 20px;
    transform: rotate(-2deg);
    z-index: 2;
}

.hero-card-3 {
    width: 170px;
    height: 233px;
    left: 145px;
    top: 10px;
    transform: rotate(5deg);
    z-index: 3;
}

.hero-card-1:hover, .hero-card-2:hover, .hero-card-3:hover {
    z-index: 10;
    transform: rotate(0deg) scale(1.05);
}

.hero-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    background: #e6faf7;
    color: #1a8a72;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 8px;
    width: fit-content;
}

.hero-title {
    font-size: 30px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.hero-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-box {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 14px 18px;
    min-width: 100px;
    text-align: center;
    flex: 1;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

.hero-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    max-width: 520px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    background: #3dd5c0;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    width: fit-content;
    font-family: 'Inter', sans-serif;
}

.hero-cta:hover {
    background: #2bbfaa;
    transform: translateY(-1px);
}

.cards-scroll-section {
    background: #f8f9fb;
    border-bottom: 1px solid #eee;
    padding: 28px 0 32px;
}

.cards-scroll-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

.cards-scroll-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
}

.cards-scroll-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.cards-scroll-subtitle {
    font-size: 13px;
    color: #999;
}

.cards-scroll-viewport {
    overflow: hidden;
    position: relative;
    padding: 8px 0 12px;
    margin: -8px 0 -12px;
}

.cards-scroll-track {
    display: flex;
    gap: 14px;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    width: max-content;
}

.fc {
    flex-shrink: 0;
    width: 130px;
    cursor: pointer;
    text-align: center;
}

.fc-img-wrap {
    width: 130px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    transition: transform 0.25s, box-shadow 0.25s;
    background: #ddd;
}

.fc:hover .fc-img-wrap {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}

.fc-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fc-base .fc-img-wrap  { box-shadow: 0 4px 16px rgba(0,0,0,0.13); }

.fc-gold .fc-img-wrap  { box-shadow: 0 0 0 2px #d4a817, 0 4px 16px rgba(212,168,23,0.35); }

.fc-blue .fc-img-wrap  { box-shadow: 0 0 0 2px #3b82f6, 0 4px 16px rgba(59,130,246,0.30); }

.fc-red  .fc-img-wrap  { box-shadow: 0 0 0 2px #ef4444, 0 4px 16px rgba(239,68,68,0.30); }

.fc-green .fc-img-wrap { box-shadow: 0 0 0 2px #3dd5c0, 0 4px 16px rgba(61,213,192,0.30); }

.fc-purple .fc-img-wrap{ box-shadow: 0 0 0 2px #8b5cf6, 0 4px 16px rgba(139,92,246,0.30); }

.fc-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
}

.fc-gold   .fc-badge { background: #d4a817; }

.fc-blue   .fc-badge { background: #3b82f6; }

.fc-red    .fc-badge { background: #ef4444; }

.fc-green  .fc-badge { background: #3dd5c0; }

.fc-purple .fc-badge { background: #8b5cf6; }

.fc-name {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-team {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cards-scroll-arrows {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}

.cs-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #555;
}

.cs-arrow:hover {
    border-color: #3dd5c0;
    color: #3dd5c0;
}

.filter-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 74px;
    z-index: 90;
}

.filter-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.filter-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 16px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px;
}

.filter-tab:hover {
    color: #3dd5c0;
}

.filter-tab.active {
    color: #3dd5c0;
    border-bottom-color: #3dd5c0;
    font-weight: 600;
}

.tab-count {
    background: #f0f0f0;
    color: #888;
    border-radius: 8px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
}

.filter-tab.active .tab-count {
    background: #e6faf7;
    color: #1a8a72;
}

.filter-search-wrap {
    position: relative;
    flex-shrink: 0;
}

.filter-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: 0.4;
    pointer-events: none;
}

.filter-search {
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 12px 8px 34px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #1a1a1a;
    outline: none;
    width: 230px;
    transition: border-color 0.2s, background 0.2s;
}

.filter-search:focus {
    background: #fff;
    border-color: #3dd5c0;
}

.filter-search::placeholder {
    color: #bbb;
}

.table-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 40px 60px;
}

.table-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.table-count {
    font-size: 13px;
    color: #888;
    font-weight: 500;
}

.table-count strong {
    color: #1a1a1a;
}

.table-wrapper {
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

thead {
    background: #f8f9fa;
}

thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #888;
    border-bottom: 1px solid #e8e8e8;
    white-space: nowrap;
}

thead th.col-num {
    text-align: right;
    width: 60px;
}

thead th.col-player {
    width: 260px;
}

thead th.col-team {
    width: 220px;
}

thead th.col-type {
    width: 150px;
}

thead th.col-detail {
    width: 140px;
}

thead th.col-shop {
    width: 160px;
    text-align: center;
}

tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

tbody tr:nth-child(even) {
    background: #fafbfc;
}

tbody tr:hover {
    background: #f0fdf9;
}

tbody tr:last-child {
    border-bottom: none;
}

tbody td {
    padding: 12px 16px;
    vertical-align: middle;
}

.col-num {
    text-align: center;
    width: 60px;
}

.col-player {
    font-weight: 600;
    color: #1a1a1a;
}

.col-team {
    color: #333;
    font-size: 13px;
}

.col-detail {
    font-size: 13px;
    color: #555;
}

.col-shop {
    text-align: center;
}

.shop-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.shop-thumb {
    width: 38px;
    height: 53px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    flex-shrink: 0;
}

.shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #3dd5c0;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background 0.18s, transform 0.15s;
    flex-shrink: 0;
}

.shop-btn:hover {
    background: #2bbea9;
    transform: scale(1.08);
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
}

.badge-base {
    background: rgba(59,130,246,0.10);
    color: #1d4ed8;
}

.badge-autograph {
    background: rgba(245,158,11,0.10);
    color: #92400e;
}

.badge-insert {
    background: rgba(16,185,129,0.10);
    color: #065f46;
}

.badge-memorabilia {
    background: rgba(139,92,246,0.10);
    color: #4c1d95;
}

.badge-variation {
    background: rgba(236,72,153,0.10);
    color: #9d174d;
}

.rc-badge {
    display: inline-block;
    background: rgba(16,185,129,0.12);
    color: #065f46;
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.code-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.card-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 3px 6px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.team-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-logo-sm {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.detail-text {
    font-size: 13px;
    color: #555;
}

.stat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
}

.stat-badge-base       { background: rgba(59,130,246,0.12); color: #1d4ed8; }

.stat-badge-autograph  { background: rgba(245,158,11,0.12); color: #92400e; }

.stat-badge-insert     { background: rgba(16,185,129,0.12); color: #065f46; }

.stat-badge-memorabilia{ background: rgba(139,92,246,0.12); color: #4c1d95; }

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
    font-size: 15px;
}

.no-results-icon {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
}

.table-note {
    margin-top: 20px;
    font-size: 13px;
    color: #aaa;
    text-align: center;
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px dashed #e0e0e0;
}

.by-team-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 40px 60px;
    display: none;
}

.by-team-container.active { display: block; }

.by-team-search-wrap {
    position: relative;
    margin-bottom: 20px;
}

.by-team-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 14px;
    pointer-events: none;
}

.by-team-search {
    width: 100%;
    padding: 11px 16px 11px 40px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    outline: none;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;
}

.by-team-search:focus {
    border-color: #3dd5c0;
    background: #fff;
}

.by-team-search::placeholder { color: #bbb; }

.team-list { display: flex; flex-direction: column; gap: 0; }

.team-accordion {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
    background: #fff;
}

.team-accordion.is-open .team-acc-body {
    display: block;
}

.team-acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.team-accordion.is-open .team-acc-trigger {
    background: #f8fffe;
    border-bottom: 1px solid #e8e8e8;
}

.team-acc-trigger:hover { background: #f5fffe; }

.team-acc-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 50%;
}

.team-acc-initials {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e8f4f0;
    color: #3dd5c0;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.team-acc-info {
    flex: 1;
    min-width: 0;
}

.team-acc-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    display: block;
}

.team-acc-sub {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.team-acc-sub-dot { color: #ccc; }

.team-acc-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.team-acc-chevron {
    flex-shrink: 0;
    color: #aaa;
    font-size: 16px;
    transition: transform 0.25s;
    margin-left: 6px;
}

.team-accordion.is-open .team-acc-chevron {
    transform: rotate(180deg);
}

.team-acc-body {
    display: none;
    padding: 16px 18px;
    background: #fafbfc;
}

.team-inner-search-wrap {
    position: relative;
    margin-bottom: 14px;
}

.team-inner-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 13px;
    pointer-events: none;
}

.team-inner-search {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #1a1a1a;
    outline: none;
    background: #fff;
    transition: border-color 0.2s;
}

.team-inner-search:focus { border-color: #3dd5c0; }

.team-inner-search::placeholder { color: #bbb; }

.team-inner-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
}

.team-inner-table thead th {
    padding: 9px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #aaa;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.team-inner-table tbody tr {
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.12s;
}

.team-inner-table tbody tr:last-child { border-bottom: none; }

.team-inner-table tbody tr:hover { background: #f0fdf9; }

.team-inner-table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
}

.footer {
    background: #1a1a1a;
    color: #fff;
    margin-top: 40px;
    padding: 60px 40px 24px;
}

.footer-social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.footer-social-icon {
    width: 36px;
    height: 36px;
    background: #2a2a2a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
}

.footer-social-icon:hover {
    background: #3dd5c0;
}

.footer-heading {
    font-size: 16px;
    font-weight: 700;
    color: #3dd5c0;
    margin-bottom: 16px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-link {
    color: #888;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-payment { display: flex; gap: 8px; flex-wrap: wrap; }

.logo {
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
}

.cart-btn {
    background: #ffd93d;
    color: #333;
    padding: 10px 24px;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(255, 217, 61, 0.3);
    position: relative;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.sidebar-link {
    padding: 10px 16px;
    color: #666;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    display: block;
}

.sidebar-link.indented {
    padding-left: 32px;
    font-size: 13px;
}

.year-header {
    background: white;
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.year-title {
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.year-description {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
}

.sets-section {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.set-tag {
    padding: 16px 20px;
    background: #f8f9fa;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.set-tag:hover {
    border-color: #3dd5c0;
    background: #f8fffd;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(61, 213, 192, 0.15);
}

.set-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}

.set-year {
    font-size: 12px;
    color: #999;
}

.view-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #e5e5e5;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 18px;
}

.product-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.4;
    height: 42px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.language-selector,
.currency-selector {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.selector-current {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: white;
}

.selector-current img {
    width: 16px;
    height: auto;
    border-radius: 2px;
}

.selector-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 1100;
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

/* Hover bridge for language/currency dropdowns */
.selector-dropdown::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

.language-selector:hover .selector-dropdown,
.currency-selector:hover .selector-dropdown,
.language-selector .selector-dropdown.open,
.currency-selector .selector-dropdown.open {
    display: block;
}

.selector-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.selector-option:hover {
    background: #f0fdf9;
    color: #3dd5c0;
}

.selector-option img {
    width: 16px;
    height: auto;
    border-radius: 2px;
}

.top-bar .account {
    position: relative;
}

.top-bar .account .account-title {
    color: white;
    font-size: 13px;
}

.top-bar .account a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.2s;
}

.top-bar .account a:hover {
    background: rgba(255,255,255,0.1);
}

.top-bar .myaccount-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 1100;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    display: none;
}

/* Hover bridge for account dropdown */
.top-bar .myaccount-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

.top-bar .myaccount:hover .myaccount-menu,
.top-bar .myaccount.open .myaccount-menu {
    display: block;
}

.top-bar .myaccount-menu li a {
    display: block;
    padding: 8px 16px;
    color: #333;
    font-size: 13px;
    transition: background 0.15s;
}

.top-bar .myaccount-menu li a:hover {
    background: #f0fdf9;
    color: #3dd5c0;
}

.top-bar .drop_account,
.top-bar .login_acc {
    display: block;
}

#header-nav-left {
    display: contents;
}

.search-bar {
    background: #f5f5f5;
    border-radius: 24px;
    padding: 10px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: text;
    transition: all 0.2s;
}

.search-bar:focus-within {
    background: white;
    box-shadow: 0 0 0 2px #3dd5c0;
}

.search-bar-icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

.search-bar-input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #333;
    width: 200px;
    padding: 0;
}

.search-bar-input::placeholder {
    color: #999;
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.icon-btn:hover {
    background: #3dd5c0;
    color: white;
    transform: translateY(-2px);
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 2001;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.cart-sidebar.active {
    right: 0;
}

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e8e8e8;
}

.cart-sidebar-title {
    font-size: 18px;
    font-weight: 700;
}

.cart-sidebar-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.cart-sidebar-close:hover {
    background: #3dd5c0;
    color: white;
    transform: rotate(90deg);
}

.cart-sidebar-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cart-sidebar-items {
    flex: 1;
    padding: 16px 24px;
    overflow-y: auto;
}

.cart-sidebar-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

.cart-sidebar-item:last-child {
    border-bottom: none;
}

.cart-sidebar-item-image {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
}

.cart-sidebar-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-sidebar-item-details {
    flex: 1;
    min-width: 0;
}

.cart-sidebar-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.cart-sidebar-item-name:hover {
    color: #3dd5c0;
}

.cart-sidebar-item-options small {
    display: block;
    font-size: 12px;
    color: #999;
}

.cart-sidebar-item-price {
    font-size: 15px;
    font-weight: 700;
    color: #3dd5c0;
    margin-top: 4px;
}

.cart-sidebar-item-qty {
    font-size: 12px;
    color: #999;
}

.cart-sidebar-item-remove {
    width: 28px;
    height: 28px;
    border: 1px solid #e8e8e8;
    background: white;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #999;
}

.cart-sidebar-item-remove:hover {
    background: #ff6b6b;
    border-color: #ff6b6b;
    color: white;
}

.cart-sidebar-footer {
    padding: 20px 24px;
    border-top: 1px solid #e8e8e8;
    background: #f8f9fa;
}

.cart-sidebar-totals {
    margin-bottom: 16px;
}

.cart-sidebar-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: #666;
}

.cart-sidebar-total-row:last-child {
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 700;
    padding-top: 12px;
    border-top: 1px solid #e8e8e8;
    margin-top: 8px;
}

.cart-sidebar-checkout-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background: #ffd93d;
    color: #1a1a1a;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.cart-sidebar-checkout-btn:hover {
    background: #ffce00;
    transform: translateY(-1px);
}

.cart-sidebar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px;
    text-align: center;
    color: #999;
    font-size: 15px;
}

.breadcrumb-bar {
    background: white;
    border-bottom: 1px solid #f0f0f0;
}

.breadcrumb-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 40px;
    font-size: 13px;
    color: #888;
}

.breadcrumb-inner a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-inner a:hover {
    color: #3dd5c0;
}

.breadcrumb-sep {
    margin: 0 8px;
    color: #ccc;
}

.live-search {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 1100;
    max-height: 400px;
    overflow-y: auto;
}

.live-search ul {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.live-search ul li {
    padding: 0;
}

.live-search ul li a {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    transition: background 0.15s;
    align-items: center;
}

.live-search ul li a:hover {
    background: #f0fdf9;
}

.live-search .product-image img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}

.live-search .product-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.live-search .product-name p {
    font-size: 12px;
    color: #999;
    font-weight: 400;
    margin-top: 2px;
}

.live-search .product-price .price {
    font-size: 14px;
    font-weight: 700;
    color: #3dd5c0;
}

.live-search .product-price .special {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    margin-left: 6px;
}

.live-search .result-text {
    padding: 8px 16px;
    border-top: 1px solid #f0f0f0;
}

.live-search .view-all-results {
    display: block;
    text-align: center;
    padding: 10px;
    color: #3dd5c0;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.live-search .view-all-results:hover {
    text-decoration: underline;
}

.products-section {
    padding: 80px 40px;
    background: white;
}

.products-section .products-content {
    max-width: 1400px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 32px;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.section-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.products-grid--featured {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.product-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.product-card-image {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
}

.product-card-image a {
    display: block;
}

.product-card-image img {
    width: 100%;
    aspect-ratio: 245/337;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s;
}

.product-card-hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.product-card:hover .product-card-hover-img {
    opacity: 1;
}

.product-card:hover .product-card-image img:first-child {
    opacity: 0;
}

.product-card:hover .product-card-hover-img ~ img:first-child {
    opacity: 0;
}

/* Card badges — inline by default (category page product-info) */
.card-badge {
    display: inline-block;
    position: static;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: auto;
}

/* When badges are inside the image wrapper (homepage cards), position absolutely */
.product-card-image .card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 2;
}

.card-badge--sale {
    background: #ff6b6b;
    color: white;
}

.card-badge--new {
    background: #3dd5c0;
    color: white;
}

.card-badge--outstock {
    background: rgba(0,0,0,0.6);
    color: white;
}

.product-card-image .card-badge--outstock {
    top: auto;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0;
    transition: all 0.2s;
    z-index: 2;
    font-size: 14px;
    color: #999;
}

.product-card:hover .wishlist-btn {
    opacity: 1;
}

.wishlist-btn:hover {
    color: #ff6b6b;
    transform: scale(1.1);
}

.product-card-info {
    padding: 20px;
}

.product-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    height: 40px;
    margin-bottom: 8px;
    transition: color 0.2s;
}

.product-card-name:hover {
    color: #3dd5c0;
}

.product-card-price {
    margin-bottom: 12px;
}

.price-current {
    font-size: 16px;
    font-weight: 800;
    color: #3dd5c0;
}

.price-original {
    font-size: 14px;
    color: #aaa;
    text-decoration: line-through;
    margin-left: 8px;
}

.add-to-cart-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

.add-to-cart-btn--disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
}

.add-to-cart-btn--disabled:hover {
    transform: none;
    box-shadow: none;
}

.product-card--outstock .product-card-image {
    opacity: 0.6;
}

.banner-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.banner-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 200px;
    background: #1a1a1a;
}

.banner-card-link {
    display: block;
    text-decoration: none;
    color: white;
}

.banner-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 200px;
    transition: transform 0.3s;
}

.banner-card:hover .banner-card-image {
    transform: scale(1.05);
}

.banner-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
}

.banner-card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.banner-card-desc {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 8px;
}

.banner-card-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #3dd5c0;
    color: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}

.banner-card:hover .banner-card-btn {
    background: #2bbfaa;
}

/* Hero Slider — card-based horizontal carousel */
.hero-slider {
    position: relative;
    overflow: visible;
    background: #fff;
    user-select: none;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px 28px;
    box-sizing: border-box;
}

/* Full-viewport white band behind hero slider */
.hero-slider::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #fff;
    z-index: -1;
}

.hero-slider-inner {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.slider-track {
    display: flex;
    height: 560px;
    gap: 12px;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide {
    /* 3.5 slides visible: (100% - 3*12px gap) / 3.5 */
    flex: 0 0 calc((100% - 36px) / 3.7);
    min-width: calc((100% - 36px) / 3.7);
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 20px 20px;
    box-sizing: border-box;
    border-radius: 18px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.22);
    color: white;
}

.slide-top { flex-shrink: 0; }

.slide-tag {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.slide-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0 0 6px;
}

.slide-subtitle {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.45;
    margin: 0;
}

.slide-desc {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.45;
    margin: 0;
}

/* Slide background image */
.slide-cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}

.slide-cards .sc-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Overlay gradient so text remains readable */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.slide-top, .slide-bottom {
    position: relative;
    z-index: 2;
}


.slide-bottom { flex-shrink: 0; padding-top: 10px; }

.slide-btn {
    display: inline-block;
    padding: 13px 32px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 30px;
    letter-spacing: 0.2px;
    background: white;
    color: #1a1a1a;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.slide-cta {
    display: inline-block;
    padding: 13px 32px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 30px;
    background: white;
    color: #1a1a1a;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.hero-slide:hover .slide-btn,
.hero-slide:hover .slide-cta {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}

/* Slider arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: white;
    border: 1px solid #e0e0e0;
    color: #1a1a1a;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 1;
    backdrop-filter: blur(8px);
}

.slider-arrow:hover { background: #f5f5f5; }

.slider-prev, .slider-arrow-left, .hero-arrow-prev { left: 14px; }
.slider-next, .slider-arrow-right, .hero-arrow-next { right: 14px; }

.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 7px;
    align-items: center;
}

.slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    border: none;
    padding: 0;
}

.slider-dot.active {
    background: #1a1a1a;
    transform: scale(1.35);
}

.home-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
}

.home-content .content-top,
.home-content .content-bottom {
    width: 100% !important;
    overflow: visible !important;
}

/* Ensure body doesn't clip the full-bleed section */
body {
    overflow-x: hidden;
}

@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes teamsMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(61,213,192,0.5); }
    50% { opacity: 0.8; transform: scale(1.1); box-shadow: 0 0 0 5px rgba(61,213,192,0); }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }

@keyframes urgPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.4); }
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
    .banners-grid {
        grid-template-columns: 1fr;
    }
    .trust-strip-content {
        gap: 30px;
        flex-wrap: wrap;
    }
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .checkout-container {
        grid-template-columns: 1fr;
    }
    .order-summary {
        position: static;
    }
    .progress-container {
        padding: 24px 20px;
    }
    .product-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 32px;
    }
    .header-main {
        padding: 16px 20px;
    }
    .container {
        padding: 20px;
    }
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .tabs {
        padding: 0 24px;
    }
    .tab-content {
        padding: 32px 24px;
    }
    .specs-grid {
        grid-template-columns: 1fr;
    }
    .account-container {
        grid-template-columns: minmax(0, 1fr);
    }
    .account-sidebar,
    .account-main {
        min-width: 0;
    }
    .account-sidebar {
        position: static;
    }
    .dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .favorites-grid {
        grid-template-columns: 1fr;
    }
    .page-wrap { grid-template-columns: 1fr; padding: 32px 24px 60px; }
    .article-sidebar { position: static; }
    .toc-card { display: none; }
    .read-progress { display: none; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .category-container {
        grid-template-columns: 1fr;
    }
    .category-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 320px;
        height: 100vh;
        z-index: 1999;
        transition: left 0.3s;
        overflow-y: auto;
        border-radius: 0;
    }
    .category-sidebar.active {
        left: 0;
    }
    .mobile-filters-btn {
        display: block;
    }
    .sidebar-overlay {
        display: block;
    }
}

@media (max-width: 900px) {
    .hero-slide { padding: 20px 16px 18px; }
    .community-section { padding: 0 20px 60px; }
    .community-grid { grid-template-columns: 1fr; }
    .blog-section { padding: 48px 20px 0; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .checklists-grid { grid-template-columns: repeat(2, 1fr); }
    .fan-rankings-cols { grid-template-columns: 1fr; }
    .fan-cta-banner { flex-direction: column; align-items: flex-start; }
    .checkout-body {
        grid-template-columns: 1fr;
        padding: 24px 20px 60px;
    }
    .order-sidebar { position: static; order: -1; }
    .recap-grid { grid-template-columns: 1fr; gap: 12px; }
    .thankyou-body {
        grid-template-columns: 1fr;
        padding: 24px 20px 60px;
    }
    .ty-sidebar { order: -1; }
    .bonus-card, .social-card { }
    .cta-group { flex-direction: row; flex-wrap: wrap; }
    .cta-group .btn-primary { flex: 1; min-width: 0; }
    .cta-group .btn-secondary { flex: 1; min-width: 0; }
    .top-bar { display: none; }
    .header-content { padding: 12px 20px; gap: 16px; }
    .main-nav, .search-bar, .icon-btn { display: none; }
    .mobile-search-btn { display: flex; }
    .burger-menu { display: flex; }
    .cart-btn { position: relative; padding: 0; width: 44px; height: 44px; border-radius: 50%; justify-content: center; gap: 0; }
    .cart-text { display: none; }
    .cart-badge { position: absolute; top: -6px; right: -6px; }
    .hero-inner { grid-template-columns: 1fr; padding: 0 20px; gap: 32px; }
    .hero-image-area { height: 240px; }
    .filter-bar-inner { padding: 0 20px; }
    .filter-search { width: 160px; }
    .table-section { padding: 24px 20px 48px; }
    .breadcrumb-inner { padding: 12px 20px; }
    .footer { padding: 40px 20px 24px; }
    .footer-content { grid-template-columns: 1fr 1fr; gap: 32px; }
    .search-bar-input {
        width: 180px;
    }
}

@media (max-width: 768px) {
    .trust-strip {
        padding: 16px 20px;
    }
    .trust-strip-content {
        gap: 12px 20px;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 0;
    }
    .trust-item {
        flex: 0 0 calc(50% - 10px);
        min-width: 0;
    }
    .categories {
        padding: 60px 20px;
    }
    .category-image {
        height: 150px;
    }
    .category-name {
        font-size: 14px;
        padding: 16px;
    }
    .products-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .products-tabs {
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 8px;
        width: 100%;
    }
    .products-tab {
        font-size: 16px;
        white-space: nowrap;
    }
    .view-all-link {
        display: none;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .category-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .category-icon {
        margin: 0 auto;
    }
    .category-info h1 {
        font-size: 32px;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .checkout-section {
        padding: 24px;
    }
    .step-label {
        font-size: 12px;
    }
    .progress-line,
    .progress-line-active {
        left: 50px;
        right: 50px;
    }
    .product-title {
        font-size: 24px;
    }
    .product-info .price {
        font-size: 36px;
    }
    .search-bar input {
        width: 120px;
    }
    .products-carousel .product-card {
        flex: 0 0 170px;
        width: 170px;
    }
    .products-carousel {
        gap: 12px;
    }
    .similar-products-section {
        padding: 24px 20px;
    }
    .main-header .header-content { padding: 16px 20px; }
    .carousel-controls {
        display: none;
    }
    .tab-btn {
        padding: 16px 20px;
        font-size: 14px;
    }
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
    .cart-sidebar.active {
        right: 0;
    }
    .breadcrumb {
        padding: 0 20px;
    }
    .success-alert {
        padding: 0 20px;
    }
    .account-container {
        padding: 0 20px;
    }
    .content-card {
        padding: 24px;
    }
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .header-content { padding: 16px 20px; }
    .main-nav, .search-bar, .icon-btn { display: none; }
    .burger-menu { display: flex; }
    .cart-btn { position: relative; padding: 0; width: 44px; height: 44px; border-radius: 50%; justify-content: center; gap: 0; }
    .cart-text { display: none; }
    .cart-badge { position: absolute; top: -6px; right: -6px; }
    .footer-content { grid-template-columns: 1fr 1fr; gap: 32px; }
    .site-header { padding: 0 20px; }
    .header-nav { display: none; }
    .article-hero { height: 340px; }
    .hero-overlay { padding: 0 20px 32px; }
    .article-title { font-size: 28px; }
    .breadcrumb-bar { padding: 0 20px; }
    .page-wrap { padding: 24px 20px 48px; }
    .cta-block { grid-template-columns: 1fr; }
    .cta-btn { text-align: center; }
    .method-grid { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    .compare-table { font-size: 12px; }
    .compare-table td, .compare-table th { padding: 10px 10px; }
    .top-bar {
        display: none;
    }
    .main-nav,
    .search-bar {
        display: none;
    }
    .breadcrumb,
    .category-container {
        padding: 0 20px;
    }
    .year-header {
        padding: 32px 24px;
    }
    .year-title {
        font-size: 36px;
    }
    .sets-section {
        padding: 24px;
    }
    .sets-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    .products-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .toolbar-right {
        justify-content: space-between;
    }
    .products-section {
        padding: 32px 20px;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .section-title {
        font-size: 22px;
    }
    .banner-grid {
        grid-template-columns: 1fr;
        padding: 0 20px 32px;
    }
    .slide-title {
        font-size: 1.3rem;
    }
    .slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .slider-arrow-left { left: 28px; }
    .slider-arrow-right { right: 28px; }
}

@media (max-width: 600px) {
    .footer-content { grid-template-columns: 1fr; }
    .steps-inner { padding: 12px 0; gap: 0; }
    .step-item .step-label { display: none; }
    .cart-table th:nth-child(3),
    .cart-table td:nth-child(3) { display: none; }
    .form-row { grid-template-columns: 1fr; }
    .cart-actions { width: 100%; justify-content: space-between; }
    .btn-back, .btn-primary { flex: 1; justify-content: center; }
    .cart-summary-row { flex-direction: column; align-items: stretch; }
    .summary-totals { align-items: stretch; }
    .summary-line, .summary-total { justify-content: space-between; }
    .packeta-btn-row { padding: 0 14px 14px; flex-direction: column; align-items: flex-start; }
    .hero-banner { padding: 40px 20px; }
    .hero-title { font-size: 26px; }
    .success-icon { width: 68px; height: 68px; font-size: 30px; }
    .checkout-header { padding: 0 20px; }
    .steps-bar { padding: 0 20px; }
    .step-item span { display: none; }
    .step-connector { max-width: 40px; }
    .info-grid { grid-template-columns: 1fr; }
    .cta-group { flex-direction: column; }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .acc-item {
        min-width: 0;
    }
    .order-table {
        font-size: 12px;
    }
    .order-table th,
    .order-table td {
        padding: 8px 6px;
    }
    .address-cards {
        grid-template-columns: 1fr;
    }
    .wish-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fav-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .blog-grid { grid-template-columns: 1fr; }
    .checklists-section { padding: 40px 20px 48px; }
    .checklists-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .gamif-bar { margin: 0 16px 16px; }
    .cart-table th:nth-child(5),
    .cart-table td:nth-child(5) { display: none; }
    .article-title { font-size: 23px; }
    .article-lead { font-size: 17px; }
    .prose h2 { font-size: 21px; }
    .meta-item span { display: none; }
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .product-card-info {
        padding: 12px 14px 16px;
    }
    .product-card-name {
        font-size: 13px;
        height: 36px;
    }
    .price-current {
        font-size: 16px;
    }
    .add-to-cart-btn {
        padding: 10px;
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .thankyou-body { padding: 16px 16px 40px; }
}

/* ===== BOOTSTRAP OVERRIDES ===== */
/* These ensure the new design takes priority over Bootstrap 3 defaults */

/* Reset Bootstrap container to not interfere */
.top-bar .container,
.main-header .container,
.footer .container {
    width: auto;
    max-width: none;
    padding: 0;
}

/* Override Bootstrap button styles for our buttons */
.add-to-cart-btn,
.cart-sidebar-checkout-btn,
.slide-cta,
.hero-cta,
.banner-card-btn,
.btn-continue {
    -webkit-appearance: none;
    appearance: none;
}

/* Override Bootstrap dropdown-menu for our account dropdown */
.top-bar .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 1100;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    border: none;
    float: none;
}

/* Hover bridge for Bootstrap account dropdown */
.top-bar .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

/* Open account dropdown on hover */
.top-bar .dropdown:hover > .dropdown-menu {
    display: block;
}

.top-bar .dropdown-menu > li > a,
.top-bar .dropdown-menu .login_acc li a {
    display: block;
    padding: 8px 16px;
    color: #333;
    font-size: 13px;
    transition: background 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.top-bar .dropdown-menu > li > a:hover,
.top-bar .dropdown-menu .login_acc li a:hover {
    background: #f0fdf9;
    color: #3dd5c0;
}

/* Override Bootstrap navbar for our menu */
.main-nav .navbar,
.main-nav #menu {
    margin: 0;
    border: none;
    min-height: auto;
    background: none;
}

.main-nav .navbar-collapse {
    padding: 0;
    border: none;
}

.main-nav .nav.navbar-nav {
    display: flex;
    gap: 32px;
    align-items: center;
    float: none;
    margin: 0;
}

.main-nav .nav.navbar-nav > li {
    float: none;
    list-style: none;
}

.main-nav .nav.navbar-nav > li > a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    padding: 0;
    line-height: 1.5;
    transition: color 0.2s;
    position: relative;
}

.main-nav .nav.navbar-nav > li > a:hover,
.main-nav .nav.navbar-nav > li > a:focus {
    color: #3dd5c0;
    background: none;
}

/* Override Bootstrap dropdown for mega menu */
.main-nav .nav.navbar-nav > li.dropdown > .dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    border: none;
    border-top: 3px solid #3dd5c0;
    min-width: 400px;
    float: none;
    display: none;
}

/* Hover bridge for main nav dropdown */
.main-nav .nav.navbar-nav > li.dropdown > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
}

.main-nav .nav.navbar-nav > li.dropdown:hover > .dropdown-menu,
.main-nav .nav.navbar-nav > li.dropdown.open > .dropdown-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.main-nav .dropdown-menu .dropdown-inner {
    display: contents;
}

.main-nav .dropdown-menu .list-unstyled {
    display: contents;
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav .dropdown-menu .list-unstyled li {
    list-style: none;
}

.main-nav .dropdown-menu .list-unstyled li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}

.main-nav .dropdown-menu .list-unstyled li a:hover {
    background: #f0fdf9;
    color: #3dd5c0;
}

/* Override Bootstrap .navbar-header */
.main-nav .navbar-header {
    display: none;
}

/* Override Bootstrap form-control for our selects */
.sort-select {
    padding: 10px 16px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    background: white;
    height: auto;
    box-shadow: none;
}

.sort-select:focus {
    border-color: #3dd5c0;
    box-shadow: none;
}

/* Override Bootstrap .breadcrumb */
.breadcrumb-bar .breadcrumb,
ul.breadcrumb {
    background: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    list-style: none;
}

/* Override Bootstrap pagination */
.pagination-links .pagination {
    display: flex;
    gap: 4px;
    margin: 0;
    justify-content: center;
}

.pagination-links .pagination > li > a,
.pagination-links .pagination > li > span {
    padding: 8px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    background: white;
    float: none;
    margin: 0;
}

.pagination-links .pagination > li > a:hover {
    border-color: #3dd5c0;
    color: #3dd5c0;
    background: #f0fdf9;
}

.pagination-links .pagination > .active > a,
.pagination-links .pagination > .active > span {
    background: #3dd5c0;
    border-color: #3dd5c0;
    color: white;
}

/* Override Bootstrap input-group for search */
#search.input-group,
.input-group {
    display: flex;
    position: relative;
}

/* Override Bootstrap img-responsive */
.product-card-image img {
    max-width: 100%;
    height: auto;
}

/* Ensure our header layout works */
.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Fix menu container wrapper */
.menu-container {
    display: contents;
}

.menu-container > .container {
    display: contents;
}

.menu-container > .container > .row {
    display: contents;
}

/* Fix search rendering */
#search {
    position: relative;
}

#search .search_button,
#search .search-title,
#search .search_toggle {
    display: contents;
}

#searchbox {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
}

#searchbox input[name="search"] {
    border: none;
    background: transparent;
    padding: 10px 16px 10px 40px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #333;
    outline: none;
    width: 240px;
    height: auto;
    box-shadow: none;
}

#searchbox .input-group-btn .btn {
    background: none;
    border: none;
    padding: 10px 16px;
    color: #666;
    font-size: 14px;
    box-shadow: none;
    height: auto;
}

#searchbox .input-group-btn .btn:hover {
    color: #3dd5c0;
}

/* Cart button styling */
#cart {
    display: inline-flex;
}

#cart > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffd93d;
    padding: 10px 20px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 14px;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

#cart > a:hover {
    background: #ffce00;
    transform: translateY(-1px);
}

#cart .cart_detail {
    display: flex;
    align-items: center;
    gap: 8px;
}

#cart .cart_image {
    display: none;
}

/* #cart-total is now inside .cart-btn */
#cart-total {
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#cart .dropdown-menu,
#cart .cart-menu {
    display: none;
}

/* Language/currency form overrides */
.language-selector form,
.currency-selector form {
    display: flex;
    flex-direction: column;
    position: relative;
}

.language-selector .btn-group,
.currency-selector .btn-group {
    display: contents;
}

.language-selector .btn.btn-link,
.currency-selector .btn.btn-link {
    color: white;
    text-decoration: none;
    padding: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    box-shadow: none;
}

.language-selector .btn.btn-link:hover,
.currency-selector .btn.btn-link:hover {
    color: #3dd5c0;
}

.language-selector .btn.btn-link img,
.currency-selector .btn.btn-link img {
    width: 16px;
    height: auto;
    border-radius: 2px;
}

.language-selector .dropdoen-menu,
.language-selector .language-menu,
.currency-selector .currency-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 1100;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    display: none;
}

.language-selector:hover .language-menu,
.language-selector:hover .dropdoen-menu,
.currency-selector:hover .currency-menu {
    display: block;
}

.language-selector .language-menu li,
.currency-selector .currency-menu li {
    list-style: none;
}

.language-selector .language-select,
.currency-selector .currency-select {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    text-align: left;
}

.language-selector .language-select:hover,
.currency-selector .currency-select:hover {
    background: #f0fdf9;
    color: #3dd5c0;
}

/* Fix language/currency positioning */
.wd-language,
.wd-currency {
    position: relative;
    float: none;
    display: inline-flex;
}

.wd-language .fa-angle-down,
.wd-currency .fa-angle-down {
    font-size: 10px;
    margin-left: 2px;
}

/* Category page layout */
.category-container {
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
}

/* Footer override for module positions */
.footer .footer-content > div:last-child:empty {
    display: none;
}

/* Ensure body uses new font */
body {
    font-family: 'Inter', sans-serif !important;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
}

/* Hide old theme elements that may still render */
.content-top-breadcum,
#header-top,
.header_nav,
.header_top,
.footer-container .footer-top,
.bottomfooter {
    display: none;
}


/* Fix main-nav wrapper */
.main-nav-wrapper {
    display: contents;
}

.main-nav-wrapper > aside {
    display: contents;
}

/* Ensure main-nav displays correctly inside header */
.header-content .main-nav {
    display: flex;
    gap: 28px;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.header-content .main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s;
    position: relative;
    white-space: nowrap;
}

.header-content .main-nav a:hover {
    color: #3dd5c0;
}

.header-content .main-nav .nav-has-dropdown {
    position: relative;
}

.header-content .main-nav .nav-arrow {
    font-size: 10px;
    transition: transform 0.2s;
    display: inline-block;
    opacity: 0.5;
}

.header-content .main-nav .nav-has-dropdown:hover .nav-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.header-content .main-nav .mega-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, top 0.2s;
    z-index: 500;
    min-width: 520px;
    pointer-events: none;
    border-top: 3px solid #3dd5c0;
}

.header-content .main-nav .mega-menu::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    height: 25px;
    background: transparent;
}

.header-content .main-nav .mega-menu::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #3dd5c0;
}

.header-content .main-nav .nav-has-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    top: calc(100% + 4px);
}

.header-content .main-nav .mega-menu--sm {
    grid-template-columns: repeat(3, 1fr);
    min-width: 360px;
}

.header-content .main-nav .mega-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    transition: background 0.15s, color 0.15s;
    font-size: 13px;
}

.header-content .main-nav .mega-item:hover {
    background: #f0fdf9;
    color: #3dd5c0;
}

.header-content .main-nav .mega-label {
    font-weight: 600;
    line-height: 1.3;
}


/* Headertop modules inline in top bar */
.headertop-modules {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: white;
    font-size: 13px;
}

.headertop-modules .shipping-promo,
.headertop-modules a {
    color: #3dd5c0;
    font-weight: 600;
    text-decoration: none;
}

/* ============================================
   HIGH PRIORITY OVERRIDES - Cart & Nav
   ============================================ */

/* Cart button — definitive styling */
.header-actions .cart-btn,
a.cart-btn,
a#cartButton {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffd93d !important;
    color: #333 !important;
    padding: 10px 24px !important;
    border-radius: 24px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.2s !important;
    box-shadow: 0 2px 8px rgba(255, 217, 61, 0.3) !important;
    position: relative !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    max-height: 44px !important;
}

.header-actions .cart-btn:hover,
a.cart-btn:hover,
a#cartButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 217, 61, 0.4) !important;
}

.cart-btn .cart-badge,
a#cartButton .cart-badge {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: #ff6b6b !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    min-width: 24px !important;
    text-align: center !important;
    line-height: 1 !important;
}

.cart-btn .cart-text,
a#cartButton #cart-total {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Main nav wrapper — ensure nav is visible and flex */
.main-nav-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.main-nav-wrapper > nav.main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hide the CMS shipping promo that renders inside nav wrapper — it's already in top bar */
.main-nav-wrapper #wdnavcmsheader {
    display: none;
}

/* ============================================
   HOMEPAGE SECTIONS — Trust, Community, CTA
   ============================================ */

/* Trust Strip */
.trust-strip {
    background: white;
    border-bottom: 1px solid #f0f0f0;
    padding: 24px 40px;
}

.trust-strip-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 60px;
    align-items: center;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trust-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.trust-text strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.trust-text span {
    font-size: 13px;
    color: #999;
}

/* Community Section */
.community-section {
    padding: 15px 40px 80px;
    background: white;
}

.community-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.community-card {
    border-radius: 20px;
    padding: 36px 32px;
    min-height: 200px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.community-card-fb {
    background: linear-gradient(135deg, #1877f2 0%, #0d5bb5 100%);
}

.community-card-yt {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
}

.community-card-buy {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.community-decor {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 88px;
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
    color: white;
    font-weight: 700;
}

.community-card-buy .community-decor {
    opacity: 0.35;
}

.community-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.2);
    color: white;
    width: fit-content;
}

.community-card-buy .community-tag {
    background: rgba(0,0,0,0.08);
    color: #555;
}

.community-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 8px;
    color: white;
}

.community-card-buy .community-title {
    color: #1a1a1a;
}

.community-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.82);
    margin: 0 0 20px;
}

.community-card-buy .community-subtitle {
    color: #666;
}

.community-btn {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 1;
}

.community-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.community-card-fb .community-btn {
    background: white;
    color: #1877f2;
}

.community-card-yt .community-btn {
    background: white;
    color: #cc0000;
}

.community-card-buy .community-btn {
    background: #1a1a1a;
    color: white;
}

/* Fan CTA Banner */
.fan-cta-section {
    padding: 15px 40px 80px;
    background: white;
}

.fan-cta-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.fan-cta-banner {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    padding: 36px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.fan-cta-title {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
}

.fan-cta-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    max-width: 500px;
    line-height: 1.6;
}

.fan-cta-right {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.fan-cta-btn {
    padding: 13px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.fan-cta-btn--primary {
    background: linear-gradient(135deg, #3dd5c0, #2ab3a1);
    color: white;
}

.fan-cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.4);
}

.fan-cta-btn--outline {
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    background: transparent;
}

.fan-cta-btn--outline:hover {
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-2px);
}

/* ============================================
   OLD WEBDIGIFY MODULE OVERRIDES
   ============================================ */

/* Category Feature Module — restyle to match design */
#wd_category_feature {
    background: white;
    padding: 80px 0;
}

#wd_category_feature .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

#wd_category_feature .box-heading {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 40px;
    letter-spacing: -0.3px;
    text-align: left;
    border: none;
    padding: 0;
    background: none;
    text-transform: none;
}

#wd_category_feature .wdfcat-items {
    width: 100%;
}

#wd_category_feature .product-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#wd_category_feature .item {
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);
}

#wd_category_feature .wd_cat_content {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
    text-decoration: none;
}

#wd_category_feature .wd_cat_content:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

#wd_category_feature .cat-img {
    width: 100%;
    overflow: hidden;
}

#wd_category_feature .cat-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

#wd_category_feature .wdcat-content {
    padding: 16px 20px;
}

#wd_category_feature .title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

#wd_category_feature .title a {
    color: #1a1a1a;
    text-decoration: none;
}

#wd_category_feature .category-viewall {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #3dd5c0;
    text-decoration: none;
}

#wd_category_feature .cat-more {
    list-style: none;
}

/* Tab Latest / Featured module overrides */
.box-heading,
.tablatest-hd .tab-head-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
    text-transform: none;
    border: none;
    background: none;
    padding: 0;
    margin-bottom: 24px;
}

.nav-tabs.tablatest-hd {
    display: flex;
    gap: 32px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0;
    margin-bottom: 40px;
    list-style: none;
    padding-left: 0;
}

.nav-tabs.tablatest-hd > li > a {
    padding: 16px 0;
    font-size: 18px;
    font-weight: 700;
    color: #999;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
    background: none;
    text-decoration: none;
    display: block;
}

.nav-tabs.tablatest-hd > li.active > a,
.nav-tabs.tablatest-hd > li > a:hover {
    color: #3dd5c0;
    border-bottom-color: #3dd5c0;
    background: none;
}

/* Product block styling in old modules */
/* NOTE: No display:flex here — owl-carousel manages .owl-wrapper layout via floats/inline styles.
   flex/grid only as a no-JS fallback (owl-carousel sets display:block on init). */
.box-product {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
/* Product carousel — single row horizontal scroll */
.product-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
/* When owl-carousel is active it wraps items in .owl-wrapper-outer — reset flex on parent */
.owl-carousel .box-product,
.owl-carousel .product-carousel,
.box-product.owl-carousel,
.product-carousel.owl-carousel {
    display: block;
    gap: 0;
}

.product-block,
.product-thumb {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
    text-decoration: none;
}

.product-block:hover,
.product-thumb:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.product-block .image,
.product-thumb .image {
    overflow: hidden;
}

.product-block .image img,
.product-thumb .image img {
    width: 100%;
    display: block;
    transition: transform 0.3s;
}

.product-block:hover .image img,
.product-thumb:hover .image img {
    transform: scale(1.05);
}

.product-block .caption,
.product-thumb .caption {
    padding: 20px;
}

.product-block .name,
.product-thumb .name,
.product-block .caption h4,
.product-thumb .caption h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-block .name a,
.product-thumb .name a,
.product-block .caption h4 a,
.product-thumb .caption h4 a {
    color: #1a1a1a;
    text-decoration: none;
}

.product-block .price,
.product-thumb .price {
    font-size: 20px;
    font-weight: 700;
    color: #3dd5c0;
    margin-bottom: 12px;
}

.product-block .price-old,
.product-thumb .price-old {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}

.product-block .price-new,
.product-thumb .price-new {
    font-size: 16px;
    font-weight: 800;
    color: #3dd5c0;
}

.product-block .button-group,
.product-thumb .button-group {
    padding: 0 20px 20px;
}

.product-block .button-group button,
.product-thumb .button-group button,
.product-block .cart_button,
.product-thumb .cart_button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.product-block .button-group button:hover,
.product-thumb .button-group button:hover,
.product-block .cart_button:hover,
.product-thumb .cart_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

/* Banner grid section */
.banner-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* Section spacing */
.content-top > *,
.content-bottom > * {
    margin-bottom: 0;
}

/* WebDigify module general resets — no-JS fallback only (no !important).
   Owl-carousel sets display:block inline on .owl-carousel, overriding this flex. */
.list_carousel.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
}
/* Once owl-carousel initialises it adds .owl-carousel class — reset to block */
.list_carousel.row.owl-carousel {
    display: block;
    gap: 0;
}

.list_carousel.row .item {
    float: none;
    padding: 0;
}
/* Let owl-carousel items keep their float when inside owl-wrapper */
.owl-wrapper .owl-item .item {
    float: none;
    width: 100%;
}

/* Owl-carousel navigation — visible by default, let the carousel control them */
.responsive .owl-controls,
.list_carousel .customNavigation {
    /* display: none; — REMOVED: let owl-carousel show its navigation */
}

/* ============================================
   RESPONSIVE — Homepage Sections
   ============================================ */
@media (max-width: 1024px) {
    .trust-strip-content {
        gap: 30px;
        flex-wrap: wrap;
    }
    
    .community-grid {
        grid-template-columns: 1fr;
    }
    
    .fan-cta-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .fan-cta-right {
        justify-content: center;
    }
    
    #wd_category_feature .item {
        flex: 0 0 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .trust-strip {
        padding: 20px;
    }
    
    .trust-strip-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .community-section {
        padding: 0 20px 40px;
    }
    
    .fan-cta-section {
        padding: 0 20px 40px;
    }
    
    .fan-cta-banner {
        padding: 24px;
    }
    
    .fan-cta-right {
        flex-direction: column;
        width: 100%;
    }
    
    .fan-cta-btn {
        text-align: center;
    }
    
    #wd_category_feature .item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

/* ============================================
   WEBDIGIFY HOMETAB / PRODUCT MODULES 
   ============================================ */

/* Hometab module */
.hometab.box {
    background: white;
    padding: 80px 0;
}

.hometab .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.hometab .container .row {
    margin: 0;
    padding: 0;
}

.hometab .hometab-heading.box-heading {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
    text-transform: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0 0 12px;
    text-align: left;
}

.hometab .htabs {
    display: flex;
    gap: 24px;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 40px;
    padding: 0;
}

.hometab .htabs a {
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: #999;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
    background: none;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.hometab .htabs a.selected,
.hometab .htabs a:hover {
    color: #3dd5c0;
    border-bottom-color: #3dd5c0;
    background: none;
}

.hometab .tab-content {
    display: block;
}

/* Product carousel — single row scroll (NOT wrapped grid) */
.box-product.product-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin: 0;
    padding: 4px 0 16px;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
.box-product.product-carousel::-webkit-scrollbar { display: none; }

.box-product .slider-item {
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Product block cards */
.product-block.product-thumb {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
    border: none;
}

.product-block.product-thumb:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.product-block .product-block-inner {
    display: flex;
    flex-direction: column;
}

.product-block .image {
    overflow: hidden;
    position: relative;
}

.product-block .image img {
    width: 100%;
    display: block;
    transition: transform 0.3s;
}

.product-block:hover .image img {
    transform: scale(1.05);
}

.product-block .product-details {
    padding: 0;
}

.product-block .caption {
    padding: 16px 20px;
}

.product-block .caption h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-block .caption h4 a {
    color: #1a1a1a;
    text-decoration: none;
}

.product-block .caption h4 a:hover {
    color: #3dd5c0;
}

.product-block .caption .price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #3dd5c0 !important;
    margin: 0 !important;
}

.product-block .caption .price .price-new {
    font-size: 16px;
    font-weight: 800;
    color: #3dd5c0;
}

.product-block .caption .price .price-old {
    font-size: 13px;
    font-weight: 500;
    color: #bbb;
    text-decoration: line-through;
    margin-left: 6px;
}

.product-block .caption .price .price-tax {
    display: none;
}

.product-block .product_hover_block {
    padding: 0 20px 16px;
}

.product-block .product_hover_block .cart_button,
.product-block .button-group button[onclick*="cart.add"] {
    width: 100%;
    padding: 11px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.product-block .product_hover_block .cart_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

/* Wishlist/compare buttons in product block */
.product-block .wishlist-button,
.product-block .offer-btn,
.product-block .countdown {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.product-block .wishlist-button button {
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s;
}

.product-block .wishlist-button button:hover {
    background: #ff6b6b;
    color: white;
    transform: scale(1.1);
}

/* Navigation arrows hide */
.customNavigation {
    display: none !important;
}

/* Hide default width spans */
.tablatest_default_width,
.tabbestseller_default_width {
    display: none !important;
}

/* wd_category_feature responsive */
#wd_category_feature .list_carousel.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#wd_category_feature .list_carousel .item {
    float: none !important;
}

/* Responsive product grid */
@media (max-width: 1024px) {
    .box-product .slider-item {
        flex: 0 0 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .box-product .slider-item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
    
    .hometab .container {
        padding: 0 20px;
    }
    
    .hometab.box {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .box-product .slider-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Bootstrap responsive visibility classes */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs { display: block !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } .visible-sm { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } .visible-md { display: block !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } .visible-lg { display: block !important; } }

/* ============================================
   TEAMS MARQUEE SECTION
   ============================================ */
.teams-section {
    background: #fff;
    padding: 40px 0 32px;
    border-bottom: 1px solid #f0f0f0;
}

.teams-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.teams-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.teams-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.teams-all-link {
    font-size: 0.85rem;
    color: #3dd5c0;
    text-decoration: none;
    font-weight: 500;
}

.teams-all-link:hover {
    color: #2bbfaa;
}

.teams-scroll {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.teams-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: teamsMarquee 38s linear infinite;
}

.teams-track:hover {
    animation-play-state: paused;
}

.team-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    flex-shrink: 0;
    width: 92px;
}

.team-logo-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #f7f7f7;
    border: 2px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.team-item:hover .team-logo-wrap {
    border-color: #3dd5c0;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.2);
}

.team-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-abbr {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.team-name {
    font-size: 0.76rem;
    color: #444;
    text-align: center;
    line-height: 1.25;
    font-weight: 500;
}

/* ============================================
   CATEGORY FEATURE MODULE — Owl-Carousel Compatible
   ============================================ */

/* Let owl-carousel manage layout — no grid/flex overrides */
#wd_category_feature .container .row {
    margin: 0;
    width: 100%;
}

#wd_category_feature .wdfcat-items {
    width: 100%;
    overflow: hidden;
}

/* No-JS fallback: grid layout. Owl-carousel overrides display inline when it inits. */
#wd_category_feature .list_carousel.row.responsive {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin: 0;
}
/* When owl-carousel is active, let it control layout */
#wd_category_feature .list_carousel.row.responsive.owl-carousel {
    display: block;
    gap: 0;
}

/* No display:contents — keep wrapper structure for owl-carousel */
#wd_category_feature .product-list.category_list_carousel {
    width: 100%;
}

/* Let owl-carousel set width/float on .owl-item; style .item content inside */
#wd_category_feature .owl-item .item {
    padding: 0 10px;
}
/* No-JS fallback for .item (no !important so owl inline styles win) */
#wd_category_feature .item {
    padding: 0;
    margin: 0;
}

#wd_category_feature .content {
    height: 100%;
}

#wd_category_feature .wd_cat_content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
    border: none;
}

#wd_category_feature .wd_cat_content:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

#wd_category_feature .cat-img {
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

#wd_category_feature .cat-img img.cat_image1 {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover;
    display: block;
}

#wd_category_feature .wdcat-content {
    padding: 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

#wd_category_feature .wdcat-inner {
    flex: 1;
}

#wd_category_feature .cat-infor {
    display: flex;
    flex-direction: column;
}

#wd_category_feature h4.title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px;
}

#wd_category_feature h4.title a {
    color: #1a1a1a;
    text-decoration: none;
}

#wd_category_feature h4.title a:hover {
    color: #3dd5c0;
}

#wd_category_feature .cat-more {
    list-style: none;
    margin: 0;
    padding: 0;
}

#wd_category_feature .category-viewall {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #3dd5c0;
    text-decoration: none;
    transition: color 0.2s;
}

#wd_category_feature .category-viewall:hover {
    color: #2bbfaa;
}

/* Owl-carousel navigation in categories — let it show */
#wd_category_feature .customNavigation,
#wd_category_feature .owl-controls {
    /* navigation visible — owl-carousel controls display */
}

/* ============================================
   CATEGORIES SECTION — New grid layout (replaces owl-carousel)
   ============================================ */
.categories-section {
    padding: 60px 40px 40px;
    background: white;
}

.categories-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

.category-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
    cursor: pointer;
}

.category-icon-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.category-icon-img {
    width: 100%;
    overflow: hidden;
}

.category-icon-img img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.category-icon-card:hover .category-icon-img img {
    transform: scale(1.05);
}

.category-icon-name {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    width: 100%;
}

/* ============================================
   HOMETAB SECTION — Tab switcher for products
   ============================================ */
.hometab-section {
    padding: 60px 40px;
    background: white;
}

.hometab-section .section-header {
    max-width: 1400px;
    margin: 0 auto 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.section-tabs {
    display: flex;
    gap: 8px;
}

.section-tab {
    padding: 10px 24px;
    border: 2px solid #e5e5e5;
    border-radius: 24px;
    background: white;
    color: #666;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.section-tab:hover {
    border-color: #3dd5c0;
    color: #3dd5c0;
}

.section-tab.active {
    background: #3dd5c0;
    border-color: #3dd5c0;
    color: white;
}

.tab-panel {
    display: none;
    max-width: 1400px;
    margin: 0 auto;
}

.tab-panel.active {
    display: block;
}

/* Blog module on homepage */
.box.webdigifyblog {
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 24px 40px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.box.webdigifyblog > .container {
    max-width: 100%;
    width: 100%;
    padding: 0;
}
.box.webdigifyblog .section-header {
    margin-bottom: 24px;
    text-align: center;
}
.box.webdigifyblog .section-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
}
.box.webdigifyblog .blog-card-title,
.box.webdigifyblog .blog-card-date,
.box.webdigifyblog .blog-card-desc,
.box.webdigifyblog .blog-card-link {
    font-family: 'Inter', sans-serif;
}
.box.webdigifyblog > .container {
    max-width: 100%;
    width: 100%;
    padding: 0;
}
.box.webdigifyblog .section-header {
    margin-bottom: 24px;
}
.box.webdigifyblog .section-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
}
.box.webdigifyblog .blog-card-title {
    font-family: 'Inter', sans-serif;
}
.box.webdigifyblog .blog-card-date {
    font-family: 'Inter', sans-serif;
}
.box.webdigifyblog .blog-card-desc {
    font-family: 'Inter', sans-serif;
}
.box.webdigifyblog .blog-card-link {
    font-family: 'Inter', sans-serif;
}

/* Hide information links sidebar on blog pages */
body.information-blogger #column-left { display: none !important; }
body.information-blogger #content { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

/* Hide sidebar on checkout pages */
body.checkout-cart #column-left { display: none !important; }
body.checkout-cart #content { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

/* Blog module styling */
.webdigifyblog .box-heading {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 32px;
}

.webdigifyblog .box-product {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.webdigifyblog .product-block {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

.webdigifyblog .product-block:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.webdigifyblog .blog-image {
    position: relative;
    overflow: hidden;
}

.webdigifyblog .blog-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.webdigifyblog .post-image-hover,
.webdigifyblog .post_hover {
    display: none;
}

.webdigifyblog .view-blog {
    padding: 20px;
}

.webdigifyblog .date-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.webdigifyblog .view-blog h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.4;
}

.webdigifyblog .view-blog h4 a {
    color: #1a1a1a;
    text-decoration: none;
}

.webdigifyblog .view-blog h4 a:hover {
    color: #3dd5c0;
}

.webdigifyblog .blog-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.webdigifyblog .read-more a {
    color: #3dd5c0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.webdigifyblog .read-more a:hover {
    color: #2bbfaa;
}

/* Blog grid — new layout */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.blog-card-image {
    display: block;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-body {
    padding: 20px;
}

.blog-card-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.blog-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.4;
}

.blog-card-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.blog-card-title a:hover {
    color: #3dd5c0;
}

.blog-card-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-link {
    color: #3dd5c0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.blog-card-link:hover {
    color: #2bbfaa;
}

@media (max-width: 768px) {
    .categories-section {
        padding: 40px 20px;
    }
    .categories-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }
    .category-icon-img img {
        height: 120px;
    }
    .category-icon-name {
        padding: 10px 12px;
        font-size: 13px;
    }
    .hometab-section {
        padding: 40px 20px;
    }
    .hometab-section .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   OWL-CAROUSEL — Content sizing within owl-items
   ============================================ */
/* Product carousels: make content fill the owl-item */
.owl-item .product-block,
.owl-item .product-thumb {
    width: 100%;
    margin: 0;
}
.owl-item .product-block .image img,
.owl-item .product-thumb .image img {
    width: 100%;
}

/* Owl-carousel wrapper resets — don't fight the float layout */
.owl-wrapper-outer {
    overflow: hidden;
}
.owl-wrapper {
    display: block;
}

/* Hometab / product-carousel owl integration */
.hometab .owl-carousel,
.product-carousel.owl-carousel {
    display: block;
}

/* Hide badge when count is 0 */
.cart-badge:empty {
    display: none !important;
}

/* ============================================
   CATEGORY PAGE - Pagination fixes
   ============================================ */
.pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 0;
}

.pagination-results {
    font-size: 13px;
    color: #888;
}

.pagination-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-links .pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.pagination-links .pagination li a,
.pagination-links .pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background: white;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #e5e5e5;
    transition: all 0.2s;
}

.pagination-links .pagination li a:hover {
    background: #3dd5c0;
    color: white;
    border-color: #3dd5c0;
}

.pagination-links .pagination li.active span {
    background: #3dd5c0;
    color: white;
    border-color: #3dd5c0;
}

/* ============================================
   CATEGORY PAGE - Filter module styling
   ============================================ */
.category-sidebar .panel {
    border: none;
    box-shadow: none;
    margin-bottom: 16px;
    background: transparent;
}

.category-sidebar .panel-heading {
    background: transparent;
    border: none;
    padding: 0 0 8px;
}

.category-sidebar .panel-title,
.category-sidebar .panel-heading h4,
.category-sidebar .panel-heading a {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-sidebar .panel-body {
    padding: 0;
    border: none !important;
}

.category-sidebar .list-group {
    margin-bottom: 0;
}

.category-sidebar .list-group-item {
    border: none;
    padding: 8px 0;
    background: transparent;
    font-size: 14px;
}

.category-sidebar .list-group-item a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.category-sidebar .list-group-item a:hover,
.category-sidebar .list-group-item.active a {
    color: #3dd5c0;
}

/* Category sidebar - .box module styling (category tree, filters) */
.category-sidebar .box {
    margin-bottom: 20px;
}

.category-sidebar .box-heading {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.category-sidebar .box-content {
    padding: 0;
}

.category-sidebar .box-category {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-sidebar .box-category li {
    margin: 0;
}

.category-sidebar .box-category a {
    display: block;
    padding: 8px 0;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
    border-bottom: 1px solid #f5f5f5;
}

.category-sidebar .box-category a:hover,
.category-sidebar .box-category a.active {
    color: #3dd5c0;
}

.category-sidebar .box-category ul {
    list-style: none;
    padding-left: 16px;
    margin: 0;
}

.category-sidebar .box-category ul a {
    font-size: 13px;
    padding: 6px 0;
}

/* Filter module .box inside sidebar */
.category-sidebar .box .list-group {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.category-sidebar .box .list-group-item {
    border: none;
    padding: 4px 0;
    background: transparent;
}

.category-sidebar .box .list-group-item.heading {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 12px;
    padding-bottom: 4px;
}

.category-sidebar .box .checkbox {
    margin: 4px 0;
}

.category-sidebar .box .checkbox label {
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

.category-sidebar .box .checkbox input[type="checkbox"] {
    accent-color: #3dd5c0;
    margin-right: 6px;
}

.category-sidebar .box .panel-footer {
    border: none;
    padding: 12px 0 0;
    background: transparent;
}

.category-sidebar .box #button-filter {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.category-sidebar .box #button-filter:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(61, 213, 192, 0.3);
}

/* ============================================
   CATEGORY PAGE - Subcategories grid
   ============================================ */
.subcategories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.subcategory-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: white;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.subcategory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    color: #3dd5c0;
}

.subcategory-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
}

/* ============================================
   CATEGORY PAGE - Category hero
   ============================================ */
.category-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.category-hero-img img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 12px;
}

.category-info h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}

.category-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.category-title-only {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 24px;
}

/* ============================================
   CATEGORY PAGE - Toolbar
   ============================================ */
.products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.view-mode {
    display: flex;
    gap: 4px;
}

.view-btn {
    padding: 8px 12px;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    cursor: pointer;
    color: #999;
    transition: all 0.2s;
}

.view-btn.active,
.view-btn:hover {
    background: #3dd5c0;
    color: white;
    border-color: #3dd5c0;
}

.results-count {
    font-size: 13px;
    color: #888;
}

.sort-select {
    padding: 8px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #333;
    background: white;
    cursor: pointer;
    outline: none;
}

.sort-select:focus {
    border-color: #3dd5c0;
}

/* ============================================
   CATEGORY PAGE - Mobile filters button
   ============================================ */
.mobile-filters-btn {
    display: none;
    width: 100%;
    padding: 12px;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    text-align: center;
    margin-bottom: 16px;
}

.mobile-filters-btn:hover {
    border-color: #3dd5c0;
    color: #3dd5c0;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1998;
}

.sidebar-overlay.active {
    display: block;
}

/* ============================================
   CATEGORY PAGE - List view
   ============================================ */
.products-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.products-list .product-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-radius: 12px;
}

.products-list .product-card-image {
    border-radius: 12px 0 0 12px;
}

.products-list .product-card-image img {
    height: 100%;
    aspect-ratio: auto;
}

.products-list .product-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.products-list .product-card-name {
    height: auto;
    -webkit-line-clamp: 3;
}

/* ============================================
   CATEGORY PAGE - Empty state
   ============================================ */
.empty-category {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}
.empty-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}
.btn-reset-filters {
    display: inline-block;
    padding: 12px 24px;
    background: #f8f9fa;
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-reset-filters:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: #fff5f5;
    text-decoration: none;
}

.empty-category p {
    font-size: 16px;
    margin-bottom: 24px;
}

.btn-continue {
    display: inline-block;
    padding: 12px 32px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-continue:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

/* SEO text section */
.seo-text {
    margin-top: 32px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.8;
    color: #666;
}

/* ============================================================================
   CATEGORY PAGE v2 — 1:1 MATCH WITH bycollectors-category-v2.html DESIGN
   ============================================================================ */

/* Breadcrumb — matches design exactly */
.breadcrumb {
    max-width: 1400px !important;
    margin: 24px auto !important;
    padding: 0 40px !important;
    font-size: 14px !important;
    color: #666 !important;
    display: block !important;
    list-style: none !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.breadcrumb a {
    color: #666 !important;
    text-decoration: none !important;
}

.breadcrumb a:hover {
    color: #3dd5c0 !important;
}

.breadcrumb .breadcrumb-sep {
    margin: 0 6px;
    color: #999;
}

.breadcrumb strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* Category Container — 280px sidebar + 1fr main */
.category-container {
    max-width: 1400px !important;
    margin: 0 auto 80px !important;
    padding: 0 40px !important;
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 40px !important;
}

/* Sidebar — white card, sticky, rounded */
.category-sidebar {
    background: white !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    height: fit-content !important;
    position: sticky !important;
    top: 100px !important;
    overflow: visible !important;
}

.category-sidebar .sidebar-section {
    margin-bottom: 32px !important;
}

.category-sidebar .sidebar-section:last-child {
    margin-bottom: 0 !important;
}

/* Override checkout sidebar-title when inside category sidebar */
.category-sidebar .sidebar-title,
.category-sidebar h3.sidebar-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 16px !important;
    display: block !important;
    padding: 0 !important;
    background: none !important;
    border-bottom: none !important;
}

.category-sidebar .sidebar-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Sidebar links — exact design match */
.category-sidebar .sidebar-link {
    padding: 9px 12px !important;
    color: #555 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.category-sidebar .sidebar-link:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
}

.category-sidebar .sidebar-link:hover .sidebar-count {
    background: #e0faf6 !important;
    color: #3dd5c0 !important;
}

.category-sidebar .sidebar-link.active {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
    font-weight: 700 !important;
}

.category-sidebar .sidebar-link.active .sidebar-count {
    background: #e0faf6 !important;
    color: #3dd5c0 !important;
}

.category-sidebar .sidebar-icon {
    font-size: 18px;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}

.category-sidebar .sidebar-link-text {
    flex: 1;
}

.category-sidebar .sidebar-count {
    background: #f0f0f0;
    color: #999;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}

/* OpenCart filter panel inside sidebar */
.category-sidebar .panel {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 24px !important;
    border-radius: 0 !important;
}

.category-sidebar .panel-heading {
    background: none !important;
    border: none !important;
    padding: 0 0 12px 0 !important;
    border-radius: 0 !important;
}

.category-sidebar .panel-title,
.category-sidebar .panel-heading h4,
.category-sidebar .panel-heading a {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.category-sidebar .panel-body {
    padding: 0 !important;
    border: none !important;
}

.category-sidebar .list-group {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}

.category-sidebar .list-group-item {
    border: none !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #555 !important;
    background: none !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.category-sidebar .list-group-item:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
}

.category-sidebar .list-group-item.active,
.category-sidebar .list-group-item a.active {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
    font-weight: 700 !important;
}

.category-sidebar .list-group-item a {
    color: inherit !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Price range filter */
.price-range {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.price-input {
    width: 68px;
    padding: 7px 8px;
    border: 1.5px solid #e5e5e5;
    border-radius: 8px !important;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    text-align: center;
    transition: border-color 0.2s;
}

.price-input:focus {
    outline: none;
    border-color: #3dd5c0;
}

.price-slider {
    width: 100%;
    accent-color: #3dd5c0;
    cursor: pointer;
}

/* Filter checkboxes */
.filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3dd5c0;
    border-radius: 4px;
}

.filter-item label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

/* Category Main */
.category-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

/* Category Header — white rounded card */
.category-header {
    background: white !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

/* Remove doubled box — category-hero inside category-header */
.category-header .category-hero {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Category Hero — icon + info grid */
.category-hero {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 32px !important;
    align-items: center !important;
}

.category-hero .category-icon,
.category-hero img.category-icon {
    width: 120px !important;
    height: 120px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
}

.category-info h1 {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
}

.category-description {
    font-size: 16px !important;
    color: #666 !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

/* Active Filters bar */
.active-filters {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    background: white !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.filters-label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e8faf6;
    color: #2ab395;
    border-radius: 20px;
    padding: 4px 10px 4px 12px;
    font-size: 13px;
    font-weight: 600;
}

.chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #2ab395;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    font-weight: 700;
}

.chip-remove:hover { color: #ff6b6b; }

.clear-filters {
    background: none;
    border: 1.5px solid #e5e5e5;
    color: #888;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.clear-filters:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

/* Toolbar — exact design match */
.products-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: white !important;
    border-radius: 12px !important;
    padding: 16px 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.view-mode {
    display: flex !important;
    gap: 8px !important;
}

.view-btn {
    width: 40px !important;
    height: 40px !important;
    border: 2px solid #e5e5e5 !important;
    background: white !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    font-size: 16px !important;
    color: #666 !important;
    padding: 0 !important;
}

.view-btn:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
}

.view-btn.active {
    border-color: #3dd5c0 !important;
    background: #f8fffd !important;
    color: #3dd5c0 !important;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.toolbar-right {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
}

.sort-select {
    padding: 10px 16px !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    cursor: pointer !important;
    outline: none !important;
    background: white !important;
    color: #333 !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    transition: border-color 0.2s !important;
}

.sort-select:focus,
.sort-select:hover {
    border-color: #3dd5c0 !important;
}

.results-count {
    font-size: 14px !important;
    color: #666 !important;
}

/* Products Grid — fixed 4 columns */
.products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

/* Product Card — exact design match */
.product-card {
    background: white !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    transition: all 0.3s !important;
    cursor: pointer !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

/* Wishlist button — always visible */
.product-card .wishlist-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    background: white !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    color: #333 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.product-card .wishlist-btn:hover {
    color: #ff6b6b !important;
    transform: scale(1.1) !important;
}

.product-card .wishlist-btn i {
    font-size: 16px;
}

/* Product image */
.product-card .product-image,
.product-card .product-card-image img {
    width: 100% !important;
    aspect-ratio: 245/337 !important;
    object-fit: cover !important;
    background: #f8f9fa !important;
    display: block !important;
}

.product-card .product-card-image {
    position: relative;
    overflow: hidden;
}

/* Product info */
.product-card .product-info,
.product-card .product-card-info {
    padding: 10px 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
    flex: 1 !important;
}

/* Push add-to-cart button to the bottom */
.product-card .product-info .add-to-cart-btn,
.product-card .product-info .add-to-cart-btn--disabled {
    margin-top: auto !important;
}

/* Card badges */
.card-badges {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-bottom: 4px !important;
}

.card-badges:empty {
    display: none !important;
    margin: 0 !important;
}

.card-badge {
    display: inline-block !important;
    position: static !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
}

/* When badges are inside the image wrapper (homepage cards), position absolutely */
.product-card-image .card-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    z-index: 2 !important;
}

.badge-legend  { background: #fff3e0 !important; color: #f57c00 !important; }
.badge-rookie  { background: #3dd5c0 !important; color: white !important; }
.badge-graded  { background: #f3e5f5 !important; color: #7b1fa2 !important; }
.badge-auto    { background: #e8f5e9 !important; color: #2e7d32 !important; }
.badge-limited { background: #fce4ec !important; color: #c62828 !important; }

/* Product name — 2 lines max, fixed height */
.product-name {
    margin-bottom: 6px !important;
    height: 42px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.card-player {
    display: inline !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}

.card-collection {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #999 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
}

.product-card-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.product-card-name:hover {
    color: #3dd5c0 !important;
}

/* Product price */
.product-price,
.product-card-price {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #3dd5c0 !important;
    margin-bottom: 6px !important;
}

.product-card-price .price-current {
    font-size: 16px;
    font-weight: 800;
    color: #3dd5c0;
}

.product-card-price .price-original {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
    margin-left: 6px;
}

/* Add to cart button — gradient teal */
.add-to-cart-btn {
    width: 100% !important;
    padding: 10px !important;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    display: block !important;
    text-align: center !important;
}

.add-to-cart-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3) !important;
}

.add-to-cart-btn--disabled {
    background: #e5e5e5 !important;
    color: #999 !important;
    cursor: not-allowed !important;
}

.add-to-cart-btn--disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Urgency badge — low stock */
.urgency-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    bottom: auto !important;
    background: #ff6b6b !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.urgency-badge.watching {
    background: rgba(26,26,26,0.82) !important;
}

/* Out of stock card */
.product-card--outstock .product-card-image,
.product-card--outstock .product-image {
    opacity: 0.5;
    filter: grayscale(0.5);
}

/* Inline filter panel — shown on mobile when Filtry is tapped */
.mobile-filters-panel {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px;
    margin: 0 10px 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    max-width: calc(100% - 20px);
    overflow: hidden;
    box-sizing: border-box;
}
.mobile-filters-panel .box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mobile-filters-panel .box-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 12px !important;
}
.mobile-filters-panel .checkbox {
    margin: 6px 0 !important;
}
.mobile-filters-panel .checkbox label {
    font-size: 14px !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.mobile-filters-panel .checkbox input[type="checkbox"] {
    accent-color: #3dd5c0 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}
.mobile-filters-panel .btn-primary,
.mobile-filters-panel #button-filter {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: white !important;
    width: 100% !important;
    margin-top: 12px !important;
    cursor: pointer !important;
}

/* Mobile Filters Button */
.mobile-filters-btn {
    display: none !important;
    width: 100% !important;
    padding: 14px !important;
    background: white !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-bottom: 20px !important;
    color: #333 !important;
    text-align: center !important;
}

.filter-badge {
    background: #ff6b6b;
    color: white;
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    vertical-align: middle;
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 1998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s !important;
}

.sidebar-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Pagination */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-results {
    font-size: 14px;
    color: #666;
}

.pagination-links .pagination {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-links .pagination > li > a,
.pagination-links .pagination > li > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #e5e5e5;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.pagination-links .pagination > li > a:hover {
    border-color: #3dd5c0;
    color: #3dd5c0;
    background: #f8fffd;
}

.pagination-links .pagination > .active > a,
.pagination-links .pagination > .active > span {
    background: #3dd5c0;
    border-color: #3dd5c0;
    color: white;
}

/* Empty category */
.empty-category {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-text {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

/* Continue button */
.btn-continue {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-continue:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

/* Toast notification */
.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a1a1a;
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-check {
    color: #3dd5c0;
    font-size: 18px;
}

/* Back to top */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    background: #3dd5c0;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(61,213,192,0.4);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s, transform 0.3s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #2bb8a6;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(61,213,192,0.5);
}

/* Cart sidebar */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.cart-sidebar.active { right: 0; }

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Subcategories grid */
.subcategories-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.subcategories-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.subcategories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.subcategory-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s;
    text-align: center;
    background: #f8f9fa;
}

.subcategory-card:hover {
    background: #f0fdfb;
    color: #3dd5c0;
    transform: translateY(-2px);
}

.subcategory-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.subcategory-name {
    font-size: 13px;
    font-weight: 600;
}

/* SEO text */
.seo-text {
    margin-top: 16px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* List view mode */
.products-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.products-list .product-card {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    border-radius: 12px !important;
}

.products-list .product-card .product-image,
.products-list .product-card .product-card-image {
    height: 100% !important;
}

.products-list .product-card .product-image img,
.products-list .product-card .product-card-image img {
    height: 100% !important;
    aspect-ratio: auto !important;
}

/* All inputs rounded — consistent with design */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    border-radius: 8px !important;
}

/* ── CATEGORY PAGE RESPONSIVE ── */
@media (max-width: 1024px) {
    .category-container {
        grid-template-columns: 1fr !important;
    }

    .category-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -320px !important;
        width: 320px !important;
        height: 100vh !important;
        z-index: 1999 !important;
        transition: left 0.3s !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
    }

    .category-sidebar.active {
        left: 0 !important;
    }

    .mobile-filters-btn {
        display: block !important;
    }

    .sidebar-overlay {
        display: block !important;
    }

    .products-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 768px) {
    .breadcrumb,
    .category-container {
        padding: 0 20px !important;
    }

    .category-hero {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .category-hero .category-icon,
    .category-hero img.category-icon {
        margin: 0 auto !important;
    }

    .category-info h1 {
        font-size: 32px !important;
    }

    .products-toolbar {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .toolbar-right {
        justify-content: space-between !important;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .category-header {
        padding: 24px !important;
    }
}

/* ============================================================================
   FILTER MODULE inside Category Sidebar — Override old Bootstrap markup
   ============================================================================ */

.category-sidebar .box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.category-sidebar .box-heading {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    text-align: left !important;
}

.category-sidebar .list-group {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.category-sidebar .list-group-item {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    list-style: none !important;
}

.category-sidebar .list-group-item.heading {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    padding: 12px 0 8px !important;
    display: block !important;
    text-decoration: none !important;
}

.category-sidebar .checkbox {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.category-sidebar .checkbox label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #333 !important;
    cursor: pointer !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

.category-sidebar .checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: #3dd5c0 !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

.category-sidebar .panel-footer {
    padding: 16px 0 0 !important;
    background: none !important;
    border: none !important;
}

.category-sidebar .btn.btn-primary,
.category-sidebar #button-filter {
    width: 100% !important;
    padding: 12px !important;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

.category-sidebar .btn.btn-primary:hover,
.category-sidebar #button-filter:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3) !important;
}

/* Column left module styling (OpenCart renders category tree here) */
.category-sidebar #column-left > .box,
.category-sidebar #column-left .panel {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 24px !important;
}

.category-sidebar #column-left .box-heading,
.category-sidebar #column-left .panel-heading {
    background: none !important;
    border: none !important;
    padding: 0 0 12px !important;
}

.category-sidebar #column-left .box-heading,
.category-sidebar #column-left .panel-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
}

.category-sidebar #column-left .list-group-item a,
.category-sidebar #column-left .list-group a {
    padding: 9px 12px !important;
    color: #555 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.category-sidebar #column-left .list-group-item a:hover,
.category-sidebar #column-left .list-group a:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
}

/* Category tree module (box-category) inside sidebar */
.category-sidebar .box-category,
.category-sidebar .box-category ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.category-sidebar .box-category li {
    list-style: none !important;
    margin: 0 !important;
}

.category-sidebar .box-category a {
    padding: 9px 12px !important;
    color: #555 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    display: block !important;
}

.category-sidebar .box-category a:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
}

.category-sidebar .box-category a.active {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
    font-weight: 700 !important;
}

.category-sidebar .box-category ul.level-2 {
    padding-left: 12px !important;
}

.category-sidebar .box-category ul.level-3 {
    padding-left: 12px !important;
}

.category-sidebar .box-category ul.level-4 {
    padding-left: 12px !important;
}

.category-sidebar .box-category ul.level-2 a,
.category-sidebar .box-category ul.level-3 a,
.category-sidebar .box-category ul.level-4 a {
    font-size: 13px !important;
    padding: 7px 12px !important;
}

/* Treeview hitarea (expand/collapse toggle) */
.category-sidebar .hitarea {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 4px;
}

/* Box content inside sidebar */
.category-sidebar .box-content {
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* ============================================
   HOMEPAGE - Category CMS Banners
   ============================================ */
.category_center {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 40px;
}

.category_block {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.category_block:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.category_block .list_inner {
    height: 100%;
}

.category_block_img {
    position: relative;
    height: 100%;
}

.category_block_img > a {
    display: block;
    height: 100%;
}

.category_block_img .cat_image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.category_block .description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 24px;
    background: none;
    color: #1a1a1a;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.category_block .description .title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1a1a1a;
    line-height: 1.2;
}

.category_block .description .subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #444;
    margin-bottom: 12px;
    font-weight: 500;
}

.category_block .description .banner-price {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.category_block .description .action .banner_text {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    text-decoration: none;
    border-radius: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
}

.category_block .description .action .banner_text:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61, 213, 192, 0.3);
}

@media (max-width: 768px) {
    .category_center {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 16px;
    }
    .category_block_img .cat_image {
        height: 200px;
    }
}

/* ============================================
   NAV - Underline animation from template
   ============================================ */
.main-nav > a::after,
.nav-has-dropdown > a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #3dd5c0;
    transition: width 0.2s, left 0.2s;
}

.main-nav > a:hover::after,
.nav-has-dropdown:hover > a::after {
    width: 100%;
    left: 0;
}

.main-nav > a,
.nav-has-dropdown > a {
    position: relative;
}

/* ============================================
   HOMEPAGE — New Arrivals / Specials (Výprodej)
   ============================================ */
.new-arrivals-section {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 40px;
}

.new-arrivals-inner {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.new-arrivals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.new-arrivals-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

.new-arrivals-link {
    font-size: 14px;
    font-weight: 600;
    color: #3dd5c0;
    text-decoration: none;
    transition: gap 0.2s;
}

.new-arrivals-link:hover {
    opacity: 0.8;
}

.sale-carousel-wrap {
    position: relative;
}

.new-arrivals-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.new-arrivals-scroll::-webkit-scrollbar {
    display: none;
}

.new-card {
    flex: 0 0 200px;
    min-width: 200px;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #f8f9fa;
}

.new-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.new-card-img-wrap {
    position: relative;
    overflow: hidden;
}

.new-card-img {
    width: 100%;
    aspect-ratio: 245/337;
    object-fit: cover;
    display: block;
    background: #f0f0f0;
}

.sale-img-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff6b6b;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.new-card-info {
    padding: 14px 12px;
}

.new-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new-card-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.new-card-price {
    font-size: 16px;
    font-weight: 800;
    color: #3dd5c0;
}

.new-card-price-orig {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

.new-card-discount {
    font-size: 11px;
    font-weight: 700;
    background: #fff0f0;
    color: #ff6b6b;
    padding: 2px 8px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .new-arrivals-section {
        padding: 0 20px;
    }
    .new-arrivals-inner {
        padding: 20px;
    }
    .new-card {
        flex: 0 0 160px;
        min-width: 160px;
    }
}

/* ============================================
   LOGIN / REGISTER / ACCOUNT PAGES
   ============================================ */

/* Page container — center content, add spacing */
#content .well {
    background: white !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

#content .well h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 12px !important;
}

#content .well p {
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 12px !important;
}

/* Form controls in login/register/account */
#content .form-control {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    color: #333 !important;
    background: white !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
}

#content .form-control:focus {
    border-color: #3dd5c0 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
}

#content .form-group {
    margin-bottom: 20px !important;
}

#content .form-group label,
#content label.control-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Primary buttons */
#content .btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
}

#content .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

/* Default buttons */
#content .btn-default {
    background: white !important;
    color: #333 !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

#content .btn-default:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
}

/* Account page list links */
#content .list-group {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e8e8e8 !important;
    margin-bottom: 24px !important;
}

#content .list-group-item {
    padding: 14px 20px !important;
    border-color: #e8e8e8 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background 0.15s !important;
}

#content .list-group-item a {
    color: #333 !important;
    text-decoration: none !important;
    display: block !important;
}

#content .list-group-item:hover,
#content .list-group-item a:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
}

/* Table styling (order history, etc.) */
#content .table {
    border-radius: 12px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e8e8e8 !important;
}

#content .table thead th {
    background: #f8f9fa !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid #e8e8e8 !important;
}

#content .table td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#content .table tr:last-child td {
    border-bottom: none !important;
}

/* Breadcrumb on account pages */
#content .breadcrumb,
.breadcrumb-section .breadcrumb {
    background: none !important;
    padding: 0 !important;
    margin: 24px 0 !important;
    font-size: 14px !important;
}

/* Alert boxes */
.alert-success {
    background: #e8faf6 !important;
    color: #0d9488 !important;
    border: 1px solid #b2f0e4 !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.alert-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.alert-warning {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
    border-radius: 8px !important;
    border: 2px solid #e5e5e5 !important;
    color: #333 !important;
    padding: 8px 14px !important;
    margin: 0 2px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.pagination > li > a:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
    background: #f8fffd !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background: #3dd5c0 !important;
    border-color: #3dd5c0 !important;
    color: white !important;
}

/* Panel overrides for account sections */
#content .panel {
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

#content .panel-heading {
    background: #f8f9fa !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 16px 20px !important;
}

#content .panel-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

#content .panel-body {
    padding: 20px !important;
}

/* Checkbox and radio overrides */
#content input[type="checkbox"],
#content input[type="radio"] {
    accent-color: #3dd5c0 !important;
    width: 18px !important;
    height: 18px !important;
}

/* Fieldset / legend */
#content fieldset legend,
#content legend {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    border-bottom: 2px solid #e8e8e8 !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

/* ============================================
   MOBILE HEADER FIX — Comprehensive overrides
   ============================================ */

/* Desktop: burger hidden */
.burger-menu {
    display: none !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    padding: 8px !important;
    z-index: 10 !important;
}

/* Mobile breakpoint — hide nav, show burger */
@media (max-width: 900px) {
    /* Hide nav and search */
    .main-nav,
    .main-nav-wrapper,
    .search-bar,
    .icon-btn,
    .header-actions .icon-btn {
        display: none !important;
    }

    /* Show burger */
    .burger-menu {
        display: flex !important;
    }

    /* Fix header layout */
    .header-content,
    .main-header .header-content {
        padding: 12px 20px !important;
        gap: 12px !important;
    }

    /* Header actions — only show cart on mobile */
    .header-actions {
        gap: 8px !important;
    }

    /* Cart button — circle on mobile (high specificity to override desktop) */
    .cart-btn,
    a.cart-btn,
    a#cartButton,
    .header-actions .cart-btn,
    .header-actions a#cartButton {
        position: relative !important;
        padding: 0 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        justify-content: center !important;
        gap: 0 !important;
        flex-shrink: 0 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        max-height: 44px !important;
        overflow: visible !important;
    }

    /* Hide cart text on mobile */
    .cart-text,
    .cart-btn .cart-text,
    a#cartButton .cart-text,
    #cart-total .cart-text {
        display: none !important;
    }

    /* Cart badge position */
    .cart-btn .cart-badge,
    a#cartButton .cart-badge,
    #cart-badge {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        font-size: 11px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        min-width: 20px !important;
    }

    /* Hide top bar */
    .top-bar {
        display: none !important;
    }

    /* Hero slider — mobile: 1 card, swipe for rest */
    .hero-slider {
        padding: 12px 16px 20px !important;
    }
    .hero-slider-inner {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .hero-slider-inner::-webkit-scrollbar {
        display: none;
    }
    .hero-slide {
        flex: 0 0 calc(100vw - 48px) !important;
        min-width: calc(100vw - 48px) !important;
        scroll-snap-align: start;
    }
    .slider-arrow.hero-arrow-prev,
    .slider-arrow.hero-arrow-next {
        display: none !important;
    }

    .slide-title {
        font-size: 1.3rem !important;
    }

    .slide-subtitle {
        font-size: 0.75rem !important;
    }

    .slide-btn {
        padding: 10px 24px !important;
        font-size: 13px !important;
    }

    .slider-arrow {
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
    }

    /* Categories grid — 2 columns on mobile */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 20px !important;
    }

    /* Products section */
    .products-section {
        padding: 40px 20px !important;
    }

    .products-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .products-tabs {
        gap: 20px !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
        width: 100% !important;
    }

    .products-carousel-track .product-card-wrapper {
        flex: 0 0 200px !important;
        min-width: 200px !important;
    }

    /* Bottom banners */
    .wdcmsbottombanner .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .wdbottombanner {
        width: 100% !important;
        float: none !important;
    }

    /* Footer */
    .footer {
        padding: 40px 20px 24px !important;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr !important;
    }
}


/* Hide old bottom banner — replaced by community-grid */
#wdcmsbottombanner { display: none !important; }

/* ============================================
   BOTTOM BANNER CMS BLOCK — Community card style (kept for reference)
   ============================================ */

#wdcmsbottombanner {
    max-width: 1400px !important;
    margin: 0 auto 40px !important;
    padding: 0 40px !important;
}

#wdcmsbottombanner > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

#wdcmsbottombanner .wdcmsbottombanner {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    float: none !important;
}

#wdcmsbottombanner .wdbottombanner {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
}

#wdcmsbottombanner .wdbottom-banner-content {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    box-shadow: none !important;
}

#wdcmsbottombanner .wdbottom-banner-content:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
}

/* Hide the images */
#wdcmsbottombanner .wdbottom-banner-content > a {
    display: none !important;
}

/* Card backgrounds per type */
#wdcmsbottombanner .wdbottombanner-img1 .wdbottom-banner-content {
    background: linear-gradient(135deg, #1877f2 0%, #0d5bb5 100%) !important;
}
#wdcmsbottombanner .wdbottombanner-img2 .wdbottom-banner-content {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%) !important;
}
#wdcmsbottombanner .wdbottombanner-img3 .wdbottom-banner-content {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%) !important;
}

#wdcmsbottombanner .wdbottombanner-content {
    position: relative !important;
    z-index: 1 !important;
    background: none !important;
    padding: 36px 32px !important;
    text-align: left !important;
    border-radius: 0 !important;
    margin-top: auto !important;
}

#wdcmsbottombanner .wdbottombanner-content .title {
    font-family: 'Inter', sans-serif !important;
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
    width: fit-content !important;
}

#wdcmsbottombanner .wdbottombanner-img3 .wdbottombanner-content .title {
    background: rgba(0,0,0,0.08) !important;
    color: #555 !important;
}

#wdcmsbottombanner .wdbottombanner-content .subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: white !important;
    margin-bottom: 8px !important;
    line-height: 1.15 !important;
}

#wdcmsbottombanner .wdbottombanner-img3 .wdbottombanner-content .subtitle {
    color: #1a1a1a !important;
}

#wdcmsbottombanner .wdbottombanner-content .banner-price {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.82) !important;
    font-weight: 400 !important;
    margin-bottom: 20px !important;
}

#wdcmsbottombanner .wdbottombanner-img3 .wdbottombanner-content .banner-price {
    color: #666 !important;
}

#wdcmsbottombanner .wdbottombanner-content .action {
    margin-top: 0 !important;
}

#wdcmsbottombanner .wdbottombanner-content .banner_text {
    display: inline-block !important;
    padding: 11px 26px !important;
    border-radius: 30px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    background: white !important;
    color: #1877f2 !important;
}

#wdcmsbottombanner .wdbottombanner-img2 .wdbottombanner-content .banner_text {
    background: white !important;
    color: #cc0000 !important;
}

#wdcmsbottombanner .wdbottombanner-img3 .wdbottombanner-content .banner_text {
    background: #1a1a1a !important;
    color: white !important;
}

#wdcmsbottombanner .wdbottombanner-content .banner_text:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
}

/* Hide old price div wrapper */
#wdcmsbottombanner .price {
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 900px) {
    #wdcmsbottombanner {
        padding: 0 20px !important;
    }
    #wdcmsbottombanner .wdcmsbottombanner {
        grid-template-columns: 1fr !important;
    }
}

/* ── CART SIDEBAR MOBILE ── */
@media (max-width: 600px) {
    .cart-sidebar {
        width: 100% !important;
        right: -100% !important;
    }
    .cart-sidebar.active {
        right: 0 !important;
    }
}

/* ============================================
   BLOG ARTICLE PAGE — Design system
   ============================================ */

/* Hero image */
.article-hero {
    position: relative;
    height: 480px;
    overflow: hidden;
}
.article-hero img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.55);
}
.hero-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 40px 48px;
}
.hero-inner { max-width: 820px; margin: 0 auto; width: 100%; }
.article-category {
    display: inline-flex; align-items: center; gap: 6px;
    background: #3dd5c0; color: white;
    padding: 4px 12px; border-radius: 99px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    text-decoration: none; margin-bottom: 14px; width: fit-content;
}
.article-title-hero {
    font-size: 40px; font-weight: 700; color: white;
    line-height: 1.2; letter-spacing: -0.5px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3); margin-bottom: 16px;
}
.article-meta {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.meta-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500;
}
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.4); }

/* Blog page layout — article + sidebar */
.page-wrap {
    max-width: 1200px; margin: 0 auto;
    padding: 48px 40px 80px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px; align-items: start;
}

.article-body { min-width: 0; }

/* Lead paragraph */
.article-lead {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px; line-height: 1.7;
    color: #333; margin-bottom: 36px;
    padding-bottom: 36px; border-bottom: 2px solid #f0f0f0;
}

/* Prose content */
.prose h2 {
    font-size: 26px; font-weight: 700; color: #1a1a1a;
    margin: 44px 0 16px; line-height: 1.3; scroll-margin-top: 90px;
}
.prose h3 {
    font-size: 19px; font-weight: 700; color: #1a1a1a;
    margin: 28px 0 12px; line-height: 1.4;
}
.prose p { font-size: 16px; line-height: 1.85; color: #333; margin-bottom: 20px; }
.prose ul, .prose ol { margin: 0 0 20px 0; padding-left: 0; list-style: none; }
.prose ul li, .prose ol li {
    font-size: 16px; line-height: 1.8; color: #333;
    padding: 6px 0 6px 28px; position: relative;
}
.prose ul li::before {
    content: '\2713'; position: absolute; left: 0;
    color: #3dd5c0; font-weight: 700; font-size: 14px;
}
.prose ol { counter-reset: li; }
.prose ol li::before {
    content: counter(li); counter-increment: li;
    position: absolute; left: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background: #3dd5c0; color: white;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; top: 9px;
}
.prose strong { font-weight: 700; color: #1a1a1a; }
.prose a { color: #3dd5c0; font-weight: 600; text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* Article images */
.article-img-wrap {
    margin: 32px 0; border-radius: 14px;
    overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
.article-img-wrap img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.img-caption {
    background: #f8f9fa; padding: 10px 16px;
    font-size: 13px; color: #888; font-style: italic; border-top: 1px solid #f0f0f0;
}

/* Tip box */
.tip-box {
    background: #e8faf6; border-left: 4px solid #3dd5c0;
    border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 24px 0;
}
.tip-box-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #3dd5c0; margin-bottom: 6px;
}
.tip-box p { margin: 0; font-size: 15px; color: #0d9488; }

/* Warning box */
.warn-box {
    background: #fff8e8; border-left: 4px solid #f59e0b;
    border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 24px 0;
}
.warn-box-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #d97706; margin-bottom: 6px;
}
.warn-box p { margin: 0; font-size: 15px; color: #78350f; }

/* Comparison table */
.compare-table {
    width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 14px;
    border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.compare-table thead th {
    background: #3dd5c0; color: white;
    padding: 13px 16px; text-align: left;
    font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px;
}
.compare-table thead th:first-child { border-radius: 12px 0 0 0; }
.compare-table thead th:last-child { border-radius: 0 12px 0 0; }
.compare-table tbody tr:nth-child(even) { background: #f8f9fa; }
.compare-table tbody tr:hover { background: #f0fdfb; }
.compare-table td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; color: #333; }
.compare-table td:first-child { font-weight: 600; color: #1a1a1a; }
.tag-good { color: #3dd5c0; font-weight: 600; }
.tag-mid { color: #d97706; font-weight: 600; }
.tag-bad { color: #ef4444; font-weight: 600; }

/* CTA block */
.cta-block {
    background: linear-gradient(135deg, #1a6b3a 0%, #3dd5c0 100%);
    border-radius: 16px; padding: 36px 32px; margin: 44px 0;
    display: grid; grid-template-columns: 1fr auto;
    gap: 24px; align-items: center; position: relative; overflow: hidden;
}
.cta-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #3dd5c0; margin-bottom: 8px; }
.cta-title { font-size: 22px; font-weight: 700; color: white; line-height: 1.3; margin-bottom: 10px; }
.cta-desc { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; }
.cta-btn {
    background: white; color: #3dd5c0;
    text-decoration: none; padding: 14px 28px;
    border-radius: 10px; font-size: 15px; font-weight: 700;
    white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

/* Blog sidebar */
.article-sidebar { position: sticky; top: 100px; }
.sidebar-card {
    background: white; border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 24px; margin-bottom: 24px;
}
.sidebar-card-title {
    font-size: 15px; font-weight: 700; color: #1a1a1a;
    margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.toc-list { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc-list li { counter-increment: toc; }
.toc-list a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; font-size: 14px; color: #555;
    text-decoration: none; border-bottom: 1px solid #f5f5f5; transition: color 0.2s;
}
.toc-list a:hover { color: #3dd5c0; }
.toc-list a::before {
    content: counter(toc); flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 6px;
    background: #f5f5f5; font-size: 11px; font-weight: 700; color: #999;
    display: flex; align-items: center; justify-content: center;
}

/* Tags */
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 40px 0; }
.article-tag {
    background: #f5f5f5; border-radius: 99px;
    padding: 6px 16px; font-size: 13px; font-weight: 600; color: #666;
    text-decoration: none; transition: all 0.2s;
}
.article-tag:hover { background: #3dd5c0; color: white; }

/* Share buttons */
.share-section { margin: 40px 0; padding-top: 32px; border-top: 2px solid #f0f0f0; }
.share-title { font-size: 14px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.share-buttons { display: flex; gap: 10px; }
.share-btn {
    padding: 10px 20px; border-radius: 10px; border: none;
    font-size: 13px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: transform 0.15s;
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn.fb { background: #1877f2; color: white; }
.share-btn.tw { background: #1a1a1a; color: white; }
.share-btn.copy { background: #f5f5f5; color: #333; }

/* Related articles */
.related-section { margin-top: 60px; padding-top: 48px; border-top: 2px solid #f0f0f0; }
.related-title { font-size: 24px; font-weight: 700; color: #1a1a1a; margin-bottom: 24px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card {
    background: white; border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none; color: inherit;
}
.related-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.related-card img { width: 100%; height: 180px; object-fit: cover; }
.related-card-body { padding: 16px; }
.related-card-cat { font-size: 11px; font-weight: 700; color: #3dd5c0; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.related-card-title { font-size: 15px; font-weight: 700; color: #1a1a1a; line-height: 1.4; }

@media (max-width: 900px) {
    .page-wrap { grid-template-columns: 1fr; padding: 32px 20px 60px; }
    .article-sidebar { position: static; order: -1; }
    .article-hero { height: 340px; }
    .article-title-hero { font-size: 28px; }
    .hero-overlay { padding: 0 20px 32px; }
    .related-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .cta-block { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 600px) {
    .related-grid { grid-template-columns: 1fr; }
    .method-grid { grid-template-columns: 1fr; }
}

/* ============================================
   CHECKOUT / CART PAGE — Design system
   ============================================ */

/* Cart page — override OpenCart default */
#content .table.table-bordered {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

#content .table.table-bordered thead {
    background: #f8f9fa !important;
}

#content .table.table-bordered thead td {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px !important;
    border: none !important;
    border-bottom: 2px solid #e8e8e8 !important;
}

#content .table.table-bordered tbody td {
    padding: 16px !important;
    font-size: 14px !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    vertical-align: middle !important;
}

#content .table.table-bordered tbody tr:last-child td {
    border-bottom: none !important;
}

#content .table.table-bordered img {
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Cart quantity input */
#content .table.table-bordered input.form-control {
    width: 60px !important;
    text-align: center !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    font-weight: 600 !important;
}

/* Cart buttons */
#content .table .btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
}

#content .table .btn-danger {
    background: #ff6b6b !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: white !important;
}

/* Cart totals */
#content .table.table-bordered tfoot td {
    padding: 12px 16px !important;
    font-size: 14px !important;
    border: none !important;
    border-top: 1px solid #f0f0f0 !important;
}

#content .table.table-bordered tfoot tr:last-child td {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    padding-top: 16px !important;
    border-top: 2px solid #e8e8e8 !important;
}

/* Continue shopping / checkout buttons */
.buttons .pull-left .btn,
.buttons .pull-right .btn {
    border-radius: 10px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.buttons .pull-right .btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
}

.buttons .pull-right .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

/* Checkout page — accordion panels */
.checkout-checkout .panel {
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
}

.checkout-checkout .panel-heading {
    background: #f8f9fa !important;
    border: none !important;
    padding: 16px 20px !important;
}

.checkout-checkout .panel-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.checkout-checkout .panel-title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
}

.checkout-checkout .panel-body {
    padding: 20px !important;
}

/* Checkout buttons */
.checkout-checkout .btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
}

/* Coupon / voucher / shipping inputs */
.checkout-checkout input.form-control,
.checkout-checkout select.form-control {
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}

.checkout-checkout input.form-control:focus,
.checkout-checkout select.form-control:focus {
    border-color: #3dd5c0 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
}

/* Payment method / shipping method radio buttons */
.checkout-checkout .radio label {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: border-color 0.2s !important;
}

.checkout-checkout .radio label:hover {
    border-color: #3dd5c0 !important;
}

.checkout-checkout .radio input[type="radio"] {
    accent-color: #3dd5c0 !important;
}

/* Order confirm button */
#button-confirm {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 18px 40px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: white !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
    transition: all 0.2s !important;
    width: 100% !important;
}

#button-confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

/* ============================================
   ACCOUNT PAGE — Design system
   ============================================ */

.account-container {
    max-width: 1400px; margin: 0 auto 80px; padding: 0 40px;
    display: grid; grid-template-columns: 280px 1fr; gap: 40px;
}

.account-sidebar {
    background: white; border-radius: 16px; padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    height: fit-content; position: sticky; top: 100px;
}

.account-main { display: flex; flex-direction: column; gap: 24px; }

/* Dashboard stats */
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
.stat-card {
    background: white; border-radius: 16px; padding: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.3s;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.stat-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 16px;
}
.stat-card.points .stat-icon { background: linear-gradient(135deg, #ffd93d 0%, #f5c518 100%); }
.stat-card.orders .stat-icon { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); }
.stat-card.reviews-pending .stat-icon { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); }
.stat-label { font-size: 13px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.stat-value { font-size: 36px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.stat-description { font-size: 13px; color: #666; }
.stat-link { color: #3dd5c0; text-decoration: none; font-weight: 600; }
.stat-link:hover { text-decoration: underline; }

/* Content cards */
.content-card {
    background: white; border-radius: 16px; padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.card-header-account {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0;
}
.card-title-account { font-size: 24px; font-weight: 700; color: #1a1a1a; }
.card-action { font-size: 14px; color: #3dd5c0; text-decoration: none; font-weight: 600; }
.card-action:hover { text-decoration: underline; }

/* Sidebar link items */
.sidebar-link {
    padding: 10px 16px; color: #666; text-decoration: none;
    border-radius: 8px; font-size: 14px; font-weight: 500;
    transition: all 0.2s; display: block;
}
.sidebar-link:hover { background: #f8f9fa; color: #3dd5c0; }
.sidebar-link.active { background: #f8fffd; color: #3dd5c0; font-weight: 700; }

/* Links list */
.links-list { display: flex; flex-direction: column; gap: 12px; }
.link-item {
    padding: 16px 20px; background: #f8f9fa; border-radius: 12px;
    text-decoration: none; color: #333; font-weight: 600;
    transition: all 0.2s; display: flex; justify-content: space-between; align-items: center;
}
.link-item:hover { background: #3dd5c0; color: white; transform: translateX(4px); }
.link-item::after { content: '\2192'; font-size: 18px; }

/* Accordion */
.acc-list { display: flex; flex-direction: column; }
.acc-item { border-bottom: 1px solid #f0f0f0; }
.acc-item:last-child { border-bottom: none; }
.acc-trigger {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 16px 4px; background: none; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
    color: #1a1a1a; text-align: left; transition: color 0.2s;
}
.acc-trigger:hover { color: #3dd5c0; }
.acc-trigger-icon { font-size: 16px; flex-shrink: 0; }
.acc-arrow { margin-left: auto; font-size: 20px; color: #bbb; transition: transform 0.25s; display: inline-block; }
.acc-item.open .acc-arrow { transform: rotate(90deg); color: #3dd5c0; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; padding: 0 4px; }
.acc-item.open .acc-panel { max-height: 1200px; padding: 4px 4px 20px; }

/* Forms in accordion */
.acc-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.acc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 12px; font-weight: 700; color: #777; text-transform: uppercase; letter-spacing: 0.4px; }
.form-input {
    padding: 10px 14px; border: 2px solid #e5e5e5; border-radius: 9px;
    font-family: 'Inter', sans-serif; font-size: 14px; color: #1a1a1a;
    transition: border-color 0.2s; outline: none;
}
.form-input:focus { border-color: #3dd5c0; }
.acc-save-btn {
    padding: 11px 28px; background: linear-gradient(135deg, #3dd5c0, #2ab3a1);
    color: white; border: none; border-radius: 10px; font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.acc-save-btn:hover { box-shadow: 0 4px 14px rgba(61,213,192,0.35); transform: translateY(-1px); }

/* Orders table */
.orders-table { border: 1px solid #f0f0f0; border-radius: 12px; overflow: hidden; }
.orders-head {
    display: grid; grid-template-columns: 90px 110px 1fr 110px 90px 80px;
    padding: 10px 16px; background: #f8f8f8;
    font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; gap: 8px;
}
.order-row {
    display: grid; grid-template-columns: 90px 110px 1fr 110px 90px 80px;
    padding: 13px 16px; border-top: 1px solid #f0f0f0;
    font-size: 14px; align-items: center; gap: 8px; transition: background 0.15s;
}
.order-row:hover { background: #fafafa; }
.order-num { font-weight: 700; color: #1a1a1a; }
.order-date { color: #888; font-size: 13px; }
.order-total { font-weight: 700; }
.order-status { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.order-status--delivered { background: #e8f9f0; color: #0d9488; }
.order-status--processing { background: #fff8e1; color: #f59e0b; }
.order-detail-btn { font-size: 13px; font-weight: 600; color: #3dd5c0; text-decoration: none; }

/* Addresses */
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.addr-card {
    border: 2px solid #e5e5e5; border-radius: 12px; padding: 18px;
    font-size: 14px; line-height: 1.7; color: #444;
}
.addr-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.addr-badge { font-size: 11px; font-weight: 700; background: #e8f5f3; color: #2ab3a1; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; }
.addr-badge--delivery { background: #eef3ff; color: #5b7ef5; }
.addr-edit-btn { font-size: 12px; font-weight: 600; color: #3dd5c0; background: none; border: none; cursor: pointer; }
.addr-add-btn {
    grid-column: 1 / -1; border: 2px dashed #d5d5d5; border-radius: 12px;
    padding: 14px; font-size: 14px; font-weight: 600; color: #aaa;
    background: none; cursor: pointer; transition: all 0.2s;
}
.addr-add-btn:hover { border-color: #3dd5c0; color: #3dd5c0; background: #f0fdf9; }

/* Wishlist */
.wishlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wishlist-item {
    position: relative; border: 2px solid #e5e5e5; border-radius: 12px;
    padding: 14px 12px; display: flex; flex-direction: column; align-items: center;
    gap: 6px; text-align: center; transition: border-color 0.2s;
}
.wishlist-item:hover { border-color: #3dd5c0; }
.wishlist-remove {
    position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
    border-radius: 50%; border: none; background: #f5f5f5; color: #aaa;
    font-size: 11px; cursor: pointer; transition: all 0.15s; padding: 0;
}
.wishlist-remove:hover { background: #ffe0e0; color: #e05a5a; }
.wishlist-img { width: 60px; height: 82px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.wishlist-name { font-size: 12px; font-weight: 700; color: #1a1a1a; }
.wishlist-price { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.wishlist-cart-btn {
    width: 100%; padding: 7px; background: linear-gradient(135deg, #3dd5c0, #2ab3a1);
    color: white; border: none; border-radius: 8px; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
}

/* Points / Loyalty */
.points-overview { background: linear-gradient(135deg, #f0fdf9, #e6faf4); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.points-big { font-size: 28px; font-weight: 700; color: #1a1a1a; }
.points-eq { font-size: 13px; color: #666; margin-bottom: 16px; }
.tier-bar-bg { background: #d1fae5; border-radius: 10px; height: 8px; overflow: hidden; margin-bottom: 5px; }
.tier-bar-fill { height: 100%; background: linear-gradient(90deg, #34d399, #10b981); border-radius: 10px; }

/* Favorites */
.fav-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fav-item {
    position: relative; background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 2px solid #e5e5e5; border-radius: 14px; padding: 20px 16px 16px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 6px; transition: all 0.25s;
}
.fav-item:hover { border-color: #3dd5c0; box-shadow: 0 6px 20px rgba(61,213,192,0.13); transform: translateY(-3px); }
.fav-remove {
    position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
    border-radius: 50%; border: none; background: #f0f0f0; color: #aaa;
    font-size: 11px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: all 0.18s; padding: 0;
}
.fav-remove:hover { background: #ffe0e0; color: #e05a5a; }
.fav-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.fav-name { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.fav-sub { font-size: 12px; color: #888; }
.fav-action-btn {
    margin-top: 6px; padding: 7px 14px;
    background: linear-gradient(135deg, #3dd5c0, #2ab3a1);
    color: white; border-radius: 8px; font-size: 12px; font-weight: 700;
    text-decoration: none; transition: all 0.2s; white-space: nowrap;
}
.fav-add-slot {
    border: 2px dashed #d5d5d5; border-radius: 14px; background: none;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px; padding: 20px 16px; transition: all 0.25s;
    min-height: 160px;
}
.fav-add-slot:hover { border-color: #3dd5c0; background: #f0fdf9; }
.fav-add-icon {
    width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #aaa; transition: all 0.2s;
}
.fav-add-slot:hover .fav-add-icon { background: #3dd5c0; color: white; }
.fav-add-label { font-size: 13px; font-weight: 600; color: #aaa; }
.fav-add-slot:hover .fav-add-label { color: #3dd5c0; }

/* Empty state */
.acc-empty { text-align: center; padding: 28px 0; }
.acc-empty-icon { font-size: 36px; margin-bottom: 10px; }
.acc-empty-text { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.acc-empty-sub { font-size: 13px; color: #999; }

/* Responsive */
@media (max-width: 1024px) {
    .account-container { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
}
@media (max-width: 600px) {
    .account-container { padding: 0 20px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .addr-grid { grid-template-columns: 1fr; }
    .wishlist-grid { grid-template-columns: repeat(2, 1fr); }
    .fav-row { grid-template-columns: repeat(2, 1fr); }
    .orders-head, .order-row { grid-template-columns: 1fr 1fr 1fr; font-size: 12px; }
}

/* ============================================
   BC DESIGN SYSTEM — Reusable components
   ============================================ */

/* Page container */
.bc-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 80px;
}

/* Cards */
.bc-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e8e8e8;
}

.bc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    background: #f8f9fa;
    border-bottom: 1px solid #e8e8e8;
}

.bc-card-icon {
    font-size: 22px;
}

.bc-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.bc-card-body {
    padding: 28px;
}

.bc-card-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

/* Text helpers */
.bc-text-muted {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Form groups */
.bc-form-group {
    margin-bottom: 20px;
}

.bc-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.bc-input, .bc-select, .bc-textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #333;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.bc-input:focus, .bc-select:focus, .bc-textarea:focus {
    border-color: #3dd5c0;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12);
}

.bc-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Buttons */
.bc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.bc-btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3);
}

.bc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(61,213,192,0.4);
    color: white;
    text-decoration: none;
}

.bc-btn-outline {
    background: white;
    color: #3dd5c0;
    border: 2px solid #3dd5c0;
}

.bc-btn-outline:hover {
    background: #f0fdfb;
    transform: translateY(-2px);
    color: #3dd5c0;
    text-decoration: none;
}

.bc-btn-dark {
    background: #1a1a1a;
    color: white;
}

.bc-btn-dark:hover {
    background: #333;
    transform: translateY(-1px);
    color: white;
    text-decoration: none;
}

.bc-btn-full {
    width: 100%;
}

.bc-btn-sm {
    padding: 10px 20px;
    font-size: 13px;
}

/* Alerts */
.bc-alert {
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bc-alert-success {
    background: #e8faf6;
    color: #0d9488;
    border: 1px solid #b2f0e4;
}

.bc-alert-danger {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Divider */
.bc-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #999;
    font-size: 13px;
}

.bc-divider::before,
.bc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}

/* Forgot link */
.bc-forgot-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: #3dd5c0;
    text-decoration: none;
    font-weight: 600;
}

.bc-forgot-link:hover {
    text-decoration: underline;
}

/* Login page grid */
.login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .login-grid {
        grid-template-columns: 1fr;
    }
    .bc-page-container {
        padding: 0 20px 60px;
    }
}

/* ============================================
   ACCOUNT DASHBOARD PAGE
   ============================================ */

.account-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 80px;
}

/* Account sidebar */
.account-sidebar-nav {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    height: fit-content;
    position: sticky;
    top: 100px;
}

a.account-user-info,
.account-user-info {
    display: block;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.account-user-info:hover {
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
}

.account-user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3dd5c0, #2ab3a1);
    color: white;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.account-user-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.account-user-email {
    font-size: 13px;
    color: #999;
    margin-top: 2px;
}

.account-nav-section {
    margin-bottom: 20px;
}

.account-nav-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 12px;
    margin-bottom: 8px;
}

.account-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: all 0.15s;
}

.account-nav-link:hover {
    background: #f0fdfb;
    color: #3dd5c0;
}

.account-nav-link.active {
    background: #f0fdfb;
    color: #3dd5c0;
    font-weight: 700;
}

.account-nav-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.account-nav-link.logout {
    color: #ff6b6b;
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
}

.account-nav-link.logout:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Account main content */
.account-main {
    min-width: 0;
}

.account-main h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 24px;
}

/* Dashboard stats grid */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.stat-icon-teal { background: #e8faf6; }
.stat-icon-yellow { background: #fff8e1; }
.stat-icon-red { background: #fef2f2; }

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.stat-label {
    font-size: 13px;
    color: #999;
    margin-top: 2px;
}

/* Account content cards */
.account-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e8e8e8;
    margin-bottom: 24px;
}

.account-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e8e8e8;
}

.account-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-card-body {
    padding: 24px;
}

/* Orders table */
.orders-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    border-bottom: 2px solid #f0f0f0;
}

.orders-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
    vertical-align: middle;
}

.orders-table tr:last-child td {
    border-bottom: none;
}

.order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.status-complete { background: #e8faf6; color: #0d9488; }
.status-pending { background: #fff8e1; color: #d97706; }
.status-processing { background: #e3f2fd; color: #1565c0; }

/* Responsive */
@media (max-width: 1024px) {
    .account-layout {
        grid-template-columns: 1fr;
        padding: 0 20px 60px;
    }
    .account-sidebar-nav {
        position: static;
    }
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   AUTH PAGES — Login & Register (from templates)
   ============================================ */

/* Page layout */
.auth-page-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    min-height: 60vh;
}

/* Two-column wrapper */
.auth-wrapper {
    width: 100%;
    max-width: 860px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.auth-card {
    display: flex;
    flex-direction: column;
}

.auth-logo-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}

/* Card base */
.auth-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    padding: 32px 28px;
    border: 1.5px solid #efefef;
}

.auth-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}

.auth-card-desc {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Login card — push security note to bottom */
.login-card form {
    flex: 1;
}

.login-card .auth-security-note {
    margin-top: auto;
}

/* New user card */
.new-user-card {
    display: flex;
    flex-direction: column;
}

.new-user-perks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    flex: 1;
}

.perk {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #444;
}

.perk-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e8faf6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.perk-text strong {
    font-weight: 700;
    color: #1a1a1a;
    display: block;
    font-size: 13px;
}

.perk-text span {
    font-size: 12px;
    color: #999;
}

.auth-register-btn {
    display: inline-block;
    width: 100%;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.15s, box-shadow 0.15s;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3);
}

.auth-register-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(61,213,192,0.4);
    color: white;
    text-decoration: none;
}

/* Login card form */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: #ccc;
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #efefef;
}

.auth-error-msg {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #dc2626;
    margin-bottom: 14px;
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.auth-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.auth-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 9px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.auth-input::placeholder {
    color: #bbb;
}

.auth-input:focus {
    border-color: #3dd5c0;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12);
}

.auth-password-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-forgot-link {
    font-size: 12px;
    color: #888;
    text-decoration: none;
    font-weight: 500;
}

.auth-forgot-link:hover {
    color: #3dd5c0;
    text-decoration: underline;
}

.auth-submit-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3);
    margin-top: 6px;
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(61,213,192,0.4);
}

.auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 11px;
    color: #bbb;
}

/* Register page — single centered card */
.register-wrapper {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.register-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
    padding: 44px 48px;
    width: 100%;
}

.register-card .auth-card-title {
    font-size: 26px;
    text-align: center;
}

.register-card .auth-card-desc {
    text-align: center;
    margin-bottom: 28px;
}

.register-card .auth-card-desc strong {
    color: #3dd5c0;
}

.auth-benefits {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.auth-benefit {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    font-weight: 500;
}

.auth-benefit-icon {
    font-size: 15px;
}

.auth-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.auth-required {
    color: #ef4444;
}

.auth-checkboxes {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.auth-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: #3dd5c0;
    cursor: pointer;
}

.auth-checkbox-label {
    font-size: 13px;
    color: #444;
    line-height: 1.5;
    cursor: pointer;
}

.auth-checkbox-label a {
    color: #3dd5c0;
    font-weight: 600;
    text-decoration: none;
}

.auth-checkbox-label a:hover {
    text-decoration: underline;
}

/* Password strength */
.auth-strength-bar {
    height: 4px;
    border-radius: 99px;
    background: #f0f0f0;
    margin-top: 6px;
    overflow: hidden;
}

.auth-strength-fill {
    height: 100%;
    border-radius: 99px;
    width: 0%;
    transition: width 0.3s, background 0.3s;
}

.auth-strength-text {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}

.auth-card-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #888;
}

.auth-card-footer a {
    color: #3dd5c0;
    font-weight: 600;
    text-decoration: none;
}

.auth-card-footer a:hover {
    text-decoration: underline;
}

/* Register card logo */
.register-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

/* Responsive */
@media (max-width: 680px) {
    .auth-wrapper {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
    }
    .login-card { order: 1; }
    .new-user-card { order: 2; }
    .new-user-perks { display: none; }
    .auth-card-desc { margin-bottom: 16px; }
}

@media (max-width: 480px) {
    .auth-page-main { padding: 28px 16px; }
    .auth-card { padding: 24px 20px; }
    .register-card { padding: 32px 24px; border-radius: 12px; }
    .auth-form-row { grid-template-columns: 1fr; }
    .auth-card-title { font-size: 22px; }
}

/* ============================================
   ONBOARDING PAGE — Teal theme overrides
   ============================================ */

/* Welcome banner */
.welcome-banner {
    background: #e8faf6 !important;
    border-color: #b2f0e4 !important;
}

.welcome-icon {
    color: #3dd5c0 !important;
}

/* Progress */
.step-progress-fill {
    background: linear-gradient(90deg, #3dd5c0, #2ab3a1) !important;
}

.step-dot.active {
    background: #3dd5c0 !important;
    color: white !important;
}

.step-dot.done {
    background: #2ab3a1 !important;
    color: white !important;
}

/* Sport cards */
.sport-card {
    border-radius: 12px !important;
    cursor: pointer !important;
    position: relative;
    z-index: 1;
}

.sport-card.selected {
    border-color: #3dd5c0 !important;
    background: #f0fdfb !important;
    box-shadow: 0 2px 12px rgba(61,213,192,0.2) !important;
}

.sport-card.selected .sport-icon {
    color: #3dd5c0 !important;
}

/* Autocomplete */
.autocomplete-input:focus {
    border-color: #3dd5c0 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
}

.autocomplete-item:hover {
    background: #f0fdfb !important;
}

/* Tags — teal */
.onboarding-page .tag {
    background: #e8faf6 !important;
    color: #0d9488 !important;
    border-radius: 20px !important;
    padding: 7px 14px !important;
}

/* Buttons — override Bootstrap for onboarding */
.onboarding-page .btn-primary,
.onboarding-page .btn-next,
.onboarding-page .btn-done {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
}

.onboarding-page .btn-primary:hover,
.onboarding-page .btn-next:hover,
.onboarding-page .btn-done:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(61,213,192,0.4) !important;
}

.onboarding-page .btn-primary:disabled,
.onboarding-page .btn-next:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.onboarding-page .btn-default,
.onboarding-page .btn-back {
    background: white !important;
    color: #333 !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

.onboarding-page .btn-default:hover,
.onboarding-page .btn-back:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
}

.onboarding-page .btn-skip {
    color: #999 !important;
}

.onboarding-page .btn-skip:hover {
    color: #3dd5c0 !important;
}

/* Voucher info */
.voucher-info {
    background: #fff8e1 !important;
    border-color: #ffd93d !important;
}

/* ============================================
   ALL ACCOUNT SUB-PAGES — Override Bootstrap markup
   Targets: edit, password, address, orders, wishlist,
   newsletter, favourite, downloads, returns, etc.
   ============================================ */

/* Page container */
[id^="account-"] .container,
[id^="account-"] #content {
    max-width: 900px;
}

/* Page headings */
[id^="account-"] #content h1,
[id^="account-"] #content h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
}

/* Wells → modern cards */
[id^="account-"] .well {
    background: white !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 16px !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

/* Form controls */
[id^="account-"] .form-control {
    padding: 12px 16px !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

[id^="account-"] .form-control:focus {
    border-color: #3dd5c0 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
    outline: none !important;
}

/* Labels */
[id^="account-"] label,
[id^="account-"] .control-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

[id^="account-"] .required {
    color: #ef4444 !important;
}

/* Primary buttons */
[id^="account-"] .btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
    transition: all 0.2s !important;
}

[id^="account-"] .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

/* Default buttons */
[id^="account-"] .btn-default {
    background: white !important;
    color: #333 !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

[id^="account-"] .btn-default:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
}

/* Danger buttons */
[id^="account-"] .btn-danger {
    background: #ff6b6b !important;
    border: none !important;
    border-radius: 10px !important;
    color: white !important;
    font-weight: 600 !important;
}

/* Tables */
[id^="account-"] .table {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e8e8e8 !important;
}

[id^="account-"] .table thead th {
    background: #f8f9fa !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

[id^="account-"] .table td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

[id^="account-"] .table tr:hover td {
    background: #fafafa !important;
}

/* List groups */
[id^="account-"] .list-group {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e8e8e8 !important;
}

[id^="account-"] .list-group-item {
    padding: 14px 20px !important;
    border-color: #f0f0f0 !important;
    transition: background 0.15s !important;
}

[id^="account-"] .list-group-item:hover {
    background: #f0fdfb !important;
}

[id^="account-"] .list-group-item a {
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

[id^="account-"] .list-group-item a:hover {
    color: #3dd5c0 !important;
}

/* Panels */
[id^="account-"] .panel {
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
}

[id^="account-"] .panel-heading {
    background: #f8f9fa !important;
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 14px 20px !important;
}

[id^="account-"] .panel-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

[id^="account-"] .panel-body {
    padding: 20px !important;
}

/* Alerts */
[id^="account-"] .alert-success {
    background: #e8faf6 !important;
    color: #0d9488 !important;
    border: 1px solid #b2f0e4 !important;
    border-radius: 10px !important;
}

[id^="account-"] .alert-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 10px !important;
}

/* Breadcrumb */
[id^="account-"] .breadcrumb {
    background: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    font-size: 14px !important;
}

/* Checkboxes + radios */
[id^="account-"] input[type="checkbox"],
[id^="account-"] input[type="radio"] {
    accent-color: #3dd5c0 !important;
}

/* Text links */
[id^="account-"] #content a:not(.btn) {
    color: #3dd5c0;
}

[id^="account-"] #content a:not(.btn):hover {
    color: #2ab3a1;
}

/* Wishlist page — product grid */
[id^="account-wishlist"] .product-layout {
    margin-bottom: 24px;
}

[id^="account-wishlist"] .product-thumb {
    background: white !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

[id^="account-wishlist"] .product-thumb:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
}

/* Address cards */
[id^="account-address"] .table td:last-child {
    white-space: nowrap;
}

/* Fieldset legends */
[id^="account-"] legend,
[id^="account-"] fieldset legend {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    border-bottom: 2px solid #f0f0f0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

/* ============================================
   ACCOUNT PAGES — Layout & Form Overrides
   Force vertical forms, modern card containers
   ============================================ */

/* Container max-width for all account pages */
#account-edit .container,
#account-address .container,
#account-wishlist .container,
#account-order .container,
#account-account .container,
#account-reward .container,
#account-transaction .container,
#account-password .container,
#account-newsletter .container,
#account-favourite .container,
#account-favourite-onboarding .container {
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Remove old row/column grid — make full width */
[id^="account-"] .row {
    margin: 0 !important;
}

/* Content column — flex: 1 to share space with sidebar */
[id^="account-"] .col-sm-6,
[id^="account-"] .col-sm-9,
[id^="account-"] .col-sm-10,
[id^="account-"] .col-sm-12 {
    width: auto !important;
    flex: 1 !important;
    min-width: 0 !important;
    float: none !important;
    padding: 0 !important;
}

/* Hide horizontal form label columns — convert to vertical */
[id^="account-"] .form-horizontal .col-sm-2 {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}

[id^="account-"] .form-horizontal .col-sm-10 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Form groups with proper spacing */
[id^="account-"] .form-group {
    margin-bottom: 20px !important;
}

/* Content area — card-like appearance */
[id^="account-"] #content {
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    border: 1px solid #e8e8e8 !important;
    margin-bottom: 32px !important;
}

/* Page titles */
[id^="account-"] #content > h1 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

[id^="account-"] #content > h2,
[id^="account-"] #content fieldset legend {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

/* All form controls — teal focus */
[id^="account-"] .form-control {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    color: #333 !important;
    background: white !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    height: auto !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
    box-shadow: none !important;
}

[id^="account-"] .form-control:focus {
    border-color: #3dd5c0 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
}

/* Labels */
[id^="account-"] label,
[id^="account-"] .control-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #555 !important;
    text-align: left !important;
    padding: 0 !important;
}

/* Required asterisk */
[id^="account-"] .required .control-label::after {
    content: ' *';
    color: #ef4444;
}

/* Primary buttons */
[id^="account-"] .btn-primary,
[id^="account-"] input[type="submit"].btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
    transition: all 0.2s !important;
    float: none !important;
}

[id^="account-"] .btn-primary:hover,
[id^="account-"] input[type="submit"].btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

/* Default/back buttons */
[id^="account-"] .btn-default {
    background: white !important;
    color: #333 !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    float: none !important;
}

[id^="account-"] .btn-default:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
}

/* Danger buttons */
[id^="account-"] .btn-danger {
    background: #ff6b6b !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

[id^="account-"] .btn-danger:hover {
    background: #e05252 !important;
    transform: translateY(-1px) !important;
}

/* Button row — flex layout */
[id^="account-"] .buttons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 2px solid #f0f0f0 !important;
}

[id^="account-"] .buttons .pull-left,
[id^="account-"] .buttons .pull-right {
    float: none !important;
}

[id^="account-"] .buttons::after {
    display: none !important;
}

/* Tables */
[id^="account-"] .table-responsive {
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

[id^="account-"] .table {
    margin-bottom: 0 !important;
    border: none !important;
}

[id^="account-"] .table > thead > tr > th {
    background: #f8f9fa !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #f0f0f0 !important;
    border-top: none !important;
}

[id^="account-"] .table > tbody > tr > td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    border-top: none !important;
    vertical-align: middle !important;
}

[id^="account-"] .table > tbody > tr:last-child > td {
    border-bottom: none !important;
}

[id^="account-"] .table > tbody > tr:hover > td {
    background: #fafafa !important;
}

/* Table action buttons */
[id^="account-"] .table .btn-info {
    background: #3dd5c0 !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
}

[id^="account-"] .table .btn-info:hover {
    background: #2ab3a1 !important;
}

/* Alerts */
[id^="account-"] .alert {
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

[id^="account-"] .alert-success {
    background: #e8faf6 !important;
    color: #0d9488 !important;
    border-color: #b2f0e4 !important;
}

[id^="account-"] .alert-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

/* Breadcrumb */
[id^="account-"] .breadcrumb {
    background: none !important;
    padding: 0 !important;
    margin: 16px 0 24px !important;
    font-size: 14px !important;
    list-style: none !important;
}

[id^="account-"] .breadcrumb a {
    color: #999 !important;
    text-decoration: none !important;
}

[id^="account-"] .breadcrumb a:hover {
    color: #3dd5c0 !important;
}

/* Checkboxes & radios */
[id^="account-"] input[type="checkbox"],
[id^="account-"] input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #3dd5c0 !important;
    cursor: pointer !important;
}

/* Text links inside content */
[id^="account-"] #content a:not(.btn) {
    color: #3dd5c0 !important;
    text-decoration: none !important;
}

[id^="account-"] #content a:not(.btn):hover {
    color: #2ab3a1 !important;
    text-decoration: underline !important;
}

/* Wishlist product cards */
[id^="account-wishlist"] .product-thumb {
    background: white !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

[id^="account-wishlist"] .product-thumb:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
}

/* Error texts */
[id^="account-"] .text-danger {
    color: #ef4444 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* Input group (date pickers etc) */
[id^="account-"] .input-group .form-control {
    border-radius: 10px 0 0 10px !important;
}

[id^="account-"] .input-group .btn {
    border-radius: 0 10px 10px 0 !important;
    border: 2px solid #e5e5e5 !important;
    border-left: none !important;
    background: #f8f9fa !important;
    color: #666 !important;
}

/* Pagination */
[id^="account-"] .pagination > li > a,
[id^="account-"] .pagination > li > span {
    border-radius: 8px !important;
    border: 2px solid #e5e5e5 !important;
    color: #333 !important;
    padding: 8px 14px !important;
    margin: 0 2px !important;
    font-weight: 600 !important;
}

[id^="account-"] .pagination > li > a:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
    background: #f0fdfb !important;
}

[id^="account-"] .pagination > .active > a,
[id^="account-"] .pagination > .active > span {
    background: #3dd5c0 !important;
    border-color: #3dd5c0 !important;
    color: white !important;
}

/* Well overrides (some pages use .well) */
[id^="account-"] .well {
    background: #f8f9fa !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: none !important;
}

/* List unstyled (account dashboard links) */
[id^="account-"] .list-unstyled {
    list-style: none !important;
    padding: 0 !important;
}

[id^="account-"] .list-unstyled li {
    padding: 0 !important;
    margin-bottom: 8px !important;
}

[id^="account-"] .list-unstyled li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    color: #555 !important;
    font-weight: 500 !important;
    transition: all 0.15s !important;
    text-decoration: none !important;
}

[id^="account-"] .list-unstyled li a:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
}

/* Remove clearfix float issues */
[id^="account-"] .clearfix::after {
    display: none !important;
}

/* ── Account sidebar — styled via rules at bottom of file ── */
/* Right column still hidden */
[id^="account-"] #column-right {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Sidebar shown and styled — see ACCOUNT SIDEBAR section */

/* ============================================
   PRODUCT PAGE — Full Design Template Match
   ============================================ */

/* Product layout — 2 column grid */
.bc-product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    background: white;
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    max-width: 1400px;
    margin: 0 auto;
}

/* Sale price row */
.price-sale-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.discount-pct {
    font-size: 14px;
    font-weight: 700;
    color: #2b8a5e;
    background: #e6f5ee;
    padding: 3px 9px;
    border-radius: 6px;
}

/* Purchase section */
.purchase-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-top: 12px;
}

/* Discount info box */
.discount-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 2px dashed #3dd5c0;
    border-radius: 8px;
}

.discount-info-icon { font-size: 22px; flex-shrink: 0; }
.discount-info-text { font-size: 13px; color: #333; line-height: 1.5; }
.discount-info-text strong { color: #3dd5c0; }

/* Urgency signals */
.urgency-signals {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.urgency-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #444;
}

.urgency-item--warn { color: #b45309; }

.urgency-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    animation: urgPulse 1.6s infinite;
}

@keyframes urgPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.urgency-icon { font-size: 14px; flex-shrink: 0; }

/* Product details grid */
.product-details-grid {
    display: grid;
    gap: 0;
}

.detail-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.detail-label { font-weight: 600; color: #666; }
.detail-value { color: #1a1a1a; font-weight: 500; }

.club-link, .player-link {
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 2px solid #3dd5c0;
    padding-bottom: 1px;
    transition: color 0.15s;
}

.club-link:hover, .player-link:hover { color: #3dd5c0; }

.club-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.club-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Tabs section — full width */
.product-details-section {
    max-width: 1400px;
    margin: 60px auto 0;
    padding: 0 40px;
}

.product-details-section .bc-tabs-nav {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #f0f0f0;
    padding: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    padding: 0 48px;
}

.product-details-section .bc-tab-btn {
    padding: 20px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #666 !important;
    border-bottom: 3px solid transparent !important;
    background: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.product-details-section .bc-tab-btn:hover { color: #3dd5c0 !important; }
.product-details-section .bc-tab-btn.active {
    color: #3dd5c0 !important;
    border-bottom-color: #3dd5c0 !important;
}

.product-details-section .bc-tab-pane {
    padding: 48px !important;
    background: white !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

/* Similar products — carousel sections */
.similar-products-section {
    max-width: 1400px;
    margin: 60px auto 0;
    padding: 0 40px;
}

.similar-products-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.similar-products-section .section-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.similar-products-section .carousel-controls {
    display: flex;
    gap: 12px;
}

.similar-products-section .carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #e5e5e5;
    background: white;
    color: #333;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.similar-products-section .carousel-btn:hover {
    border-color: #3dd5c0;
    color: #3dd5c0;
    transform: scale(1.1);
}

/* Products horizontal carousel */
.similar-products-section .products-carousel,
.bc-related-section .products-carousel {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    padding: 4px 0 12px !important;
    scrollbar-width: none !important;
    float: none !important;
}

.similar-products-section .products-carousel::-webkit-scrollbar,
.bc-related-section .products-carousel::-webkit-scrollbar {
    display: none !important;
}

/* Related product cards (existing markup) */
.bc-related-section .related-products {
    position: relative;
}

.bc-related-section {
    max-width: 1400px;
    margin: 40px auto 0 !important;
    padding: 0 40px !important;
}

.bc-related-heading {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
}

/* Style the product cards inside related sections */
.bc-product-card {
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    border: none !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

.bc-product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

.bc-product-card .card-image {
    position: relative !important;
    overflow: hidden !important;
}

.bc-product-card .card-image img {
    width: 100% !important;
    display: block !important;
    transition: transform 0.4s !important;
}

.bc-product-card:hover .card-image img {
    transform: scale(1.05) !important;
}

.bc-product-card .card-body-bc {
    padding: 12px !important;
}

.bc-product-card .card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    max-height: 34px !important;
    overflow: hidden !important;
}

.bc-product-card .card-title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
}

.bc-product-card .card-title a:hover {
    color: #3dd5c0 !important;
}

.bc-product-card .card-price {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #3dd5c0 !important;
    margin-bottom: 8px !important;
}

.bc-product-card .price-old-card {
    font-size: 13px !important;
    color: #aaa !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

.bc-product-card .card-btn {
    width: 100% !important;
    padding: 8px 12px !important;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.bc-product-card .card-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(61,213,192,0.3) !important;
}

.bc-product-card .card-btn.out_of_stock {
    background: #e5e5e5 !important;
    color: #999 !important;
    cursor: not-allowed !important;
}

/* Card badges on related products */
.bc-product-card .card-badges {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 2 !important;
}

.bc-product-card .badge-sale {
    background: #ff6b6b !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.bc-product-card .badge-new-card {
    background: #3dd5c0 !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.bc-product-card .badge-outstock {
    background: #1a1a1a !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

/* Wishlist button on related cards */
.bc-product-card .card-wishlist {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: white !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transition: opacity 0.2s, color 0.2s !important;
    z-index: 3 !important;
    font-size: 14px !important;
    color: #999 !important;
}

.bc-product-card:hover .card-wishlist {
    opacity: 1 !important;
}

.bc-product-card .card-wishlist:hover {
    color: #ff6b6b !important;
    transform: scale(1.1) !important;
}

/* Sticky buy bar */
.sticky-buy-bar {
    position: fixed;
    top: -80px;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-bottom: 2px solid #3dd5c0;
    z-index: 999;
    transition: top 0.3s;
}

.sticky-buy-bar.visible { top: 0; }

.sticky-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 40px;
}

.sticky-bar-info {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.sticky-bar-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.sticky-bar-price {
    font-size: 20px;
    font-weight: 700;
    color: #3dd5c0;
    white-space: nowrap;
}

.sticky-bar-btn {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3);
    white-space: nowrap;
}

.sticky-bar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(61,213,192,0.4);
}

/* Reviews section */
.reviews-section {
    max-width: 1400px;
    margin: 24px auto 0;
    padding: 0 40px;
}

.reviews-section .reviews-card {
    background: white;
    border-radius: 16px;
    padding: 40px 48px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.reviews-overview {
    display: flex;
    gap: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid #f0f0f0;
}

.reviews-score-block {
    text-align: center;
    flex-shrink: 0;
}

.rating-big {
    font-size: 52px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.stars-lg {
    font-size: 22px;
    color: #f59e0b;
    margin: 8px 0;
}

.rating-count-text {
    font-size: 13px;
    color: #999;
}

.rating-bars-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bar-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    width: 30px;
    text-align: right;
}

.bar-track {
    flex: 1;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: #f59e0b;
    border-radius: 4px;
}

.bar-count {
    font-size: 12px;
    color: #aaa;
    width: 24px;
}

/* Responsive */
@media (max-width: 1024px) {
    .bc-product-layout { grid-template-columns: 1fr; padding: 24px; gap: 32px; }
    .similar-products-section,
    .bc-related-section,
    .product-details-section,
    .reviews-section { padding: 0 20px !important; }
    .product-details-section .bc-tabs-nav { padding: 0 24px; }
    .product-details-section .bc-tab-pane { padding: 24px !important; }
    .reviews-overview { flex-direction: column; gap: 24px; }
    .sticky-bar-content { padding: 12px 20px; }
    .sticky-bar-name { max-width: 200px; }
}

@media (max-width: 768px) {
    .bc-related-heading { font-size: 22px !important; }
    .similar-products-section .section-title { font-size: 22px; }
    .product-details-section .bc-tab-btn { padding: 14px 20px !important; font-size: 14px !important; }
    .detail-row { grid-template-columns: 1fr; gap: 4px; }
    .sticky-bar-name { display: none; }
}

/* ============================================
   ACCOUNT SIDEBAR — Style column-left to match design
   Instead of hiding, style it like account-sidebar-nav
   ============================================ */

/* UNDO the nuclear hiding — show sidebar on account pages */
[id^="account-"] #column-left,
#account-edit #column-left,
#account-address #column-left,
#account-wishlist #column-left,
#account-order #column-left,
#account-reward #column-left,
#account-transaction #column-left,
#account-password #column-left,
#account-newsletter #column-left,
#account-favourite #column-left,
#account-return #column-left,
#account-download #column-left,
#account-recurring #column-left {
    display: block !important;
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    overflow: visible !important;
    position: sticky !important;
    top: 100px !important;
    left: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    float: none !important;
    flex-shrink: 0 !important;
}

/* Make the row a flex container instead of float layout */
[id^="account-"] > .row {
    display: flex !important;
    gap: 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    flex-wrap: nowrap !important;
}

/* Content area takes remaining space */
[id^="account-"] #content {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
}

/* Style the sidebar card */
[id^="account-"] #column-left {
    background: white !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    height: fit-content !important;
}

/* Style the account module links inside sidebar */
[id^="account-"] #column-left .list-group {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

[id^="account-"] #column-left .list-group-item {
    border: none !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 2px !important;
    background: none !important;
}

[id^="account-"] #column-left .list-group-item a {
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block !important;
}

[id^="account-"] #column-left .list-group-item:hover {
    background: #f0fdfb !important;
}

[id^="account-"] #column-left .list-group-item:hover a,
[id^="account-"] #column-left .list-group-item a:hover {
    color: #3dd5c0 !important;
}

[id^="account-"] #column-left .list-group-item.active,
[id^="account-"] #column-left .list-group-item.active a {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
    font-weight: 700 !important;
}

/* Section headings inside sidebar */
[id^="account-"] #column-left .list-group-item.heading,
[id^="account-"] #column-left .list-group-item:has(> strong),
[id^="account-"] #column-left h3,
[id^="account-"] #column-left h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 12px 4px !important;
    margin: 12px 0 0 !important;
    background: none !important;
}

/* Information module in sidebar */
[id^="account-"] #column-left .box-heading {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 12px 6px !important;
    margin-top: 12px !important;
    border-top: 1px solid #f0f0f0 !important;
    background: none !important;
}

[id^="account-"] #column-left .box-content {
    padding: 0 !important;
    background: none !important;
}

/* Responsive — collapse sidebar on mobile */
@media (max-width: 1024px) {
    [id^="account-"] > .row {
        flex-direction: column !important;
    }
    [id^="account-"] #column-left {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }
}

/* ============================================
   CHECKOUT PAGE — Modern Accordion Style
   ============================================ */
#checkout-checkout .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

#checkout-checkout #column-left,
#checkout-checkout #column-right {
    display: none !important;
}

#checkout-checkout #content {
    width: 100% !important;
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    border: 1px solid #e8e8e8 !important;
}

#checkout-checkout h1 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
}

/* Checkout accordion panels */
#checkout-checkout .panel {
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

#checkout-checkout .panel-heading {
    background: #f8f9fa !important;
    padding: 16px 24px !important;
    border-bottom: none !important;
    cursor: pointer !important;
}

#checkout-checkout .panel-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

#checkout-checkout .panel-body {
    padding: 24px !important;
}

#checkout-checkout .panel-body .form-group {
    margin-bottom: 16px !important;
}

#checkout-checkout .panel-body label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #555 !important;
}

#checkout-checkout .panel-body .form-control {
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    height: auto !important;
}

#checkout-checkout .panel-body .form-control:focus {
    border-color: #3dd5c0 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
}

#checkout-checkout .btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
}

#checkout-checkout .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

/* Radio buttons for shipping/payment */
#checkout-checkout .radio label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    border: 1.5px solid #e5e5e5 !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: border-color 0.2s !important;
}

#checkout-checkout .radio label:hover {
    border-color: #3dd5c0 !important;
}

#checkout-checkout .radio input[type="radio"] {
    accent-color: #3dd5c0 !important;
    width: 18px !important;
    height: 18px !important;
}

/* Checkout table */
#checkout-checkout .table {
    border-radius: 12px !important;
    overflow: hidden !important;
}

#checkout-checkout .table thead td {
    background: #f8f9fa !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
}

#checkout-checkout .alert {
    border-radius: 10px !important;
}

/* Breadcrumb */
#checkout-checkout .breadcrumb {
    background: none !important;
    padding: 0 !important;
    margin: 16px 0 24px !important;
}

/* ============================================
   FIX: Account sidebar links — force vertical layout
   ============================================ */

/* The sidebar .list-group-item links render inline — force block */
[id^="account-"] #column-left .list-group-item,
[id^="account-"] #column-left .box .list-group-item {
    display: block !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: 8px !important;
    margin-bottom: 2px !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s !important;
    background: none !important;
}

[id^="account-"] #column-left .list-group-item:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
}

/* Box container — clean up */
[id^="account-"] #column-left .box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

/* Box heading = section title */
[id^="account-"] #column-left .box-heading {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 12px 6px !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    display: block !important;
}

/* List group container — vertical flex */
[id^="account-"] #column-left .list-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* ── CATEGORY PAGE: #column-left is INSIDE .category-sidebar — make wrapper transparent ── */
.category-sidebar #column-left,
.category-sidebar aside#column-left,
.category-sidebar > aside {
    display: contents !important;
}

/* ── PRODUCT PAGE: hide sidebar ── */
body.product-product #column-left,
body.product-product #column-right {
    display: none !important;
}

/* ── CATEGORY: urgency badge position — top-left on image ── */
.product-card .urgency-badge,
.product-info .urgency-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    bottom: auto !important;
}

/* Badges in product-info should be inline, not absolute */
.product-info .card-badge,
.product-card-info .card-badge {
    position: static !important;
    display: inline-block !important;
}

/* ── Product card image wrapper — urgency badge positioned on image ── */
.product-card-image-wrap {
    position: relative;
    overflow: hidden;
}

.product-card-image-wrap .urgency-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    bottom: auto !important;
    z-index: 3 !important;
}

/* NEW badge — positioned below urgency badge on image */
.product-card-image-wrap .new-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    bottom: auto !important;
    z-index: 3 !important;
    background: #22c55e !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    pointer-events: none !important;
}

/* When urgency badge is present, push new-badge below it */
.product-card-image-wrap .urgency-badge ~ .new-badge {
    top: 38px !important;
}

.product-card-image-wrap .wishlist-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 3 !important;
}

/* ── FIX: Breadcrumbs — single line, no wrapping ── */
.breadcrumb,
ul.breadcrumb,
.bc-page-container .breadcrumb,
[id^="account-"] .breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 24px !important;
    background: none !important;
    font-size: 14px !important;
    color: #999 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 1400px !important;
}

.breadcrumb li,
ul.breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.breadcrumb li::before,
ul.breadcrumb li::before {
    content: '' !important;
    display: none !important;
}

.breadcrumb li + li::before,
ul.breadcrumb li + li::before {
    content: '\203A' !important;
    display: inline-block !important;
    margin: 0 8px !important;
    color: #ccc !important;
    font-size: 16px !important;
}

.breadcrumb li a,
ul.breadcrumb li a {
    color: #999 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    white-space: nowrap !important;
}

.breadcrumb li a:hover,
ul.breadcrumb li a:hover {
    color: #3dd5c0 !important;
}

/* Breadcrumb separator override for category pages */
.breadcrumb .breadcrumb-sep {
    margin: 0 8px !important;
    color: #ccc !important;
}

/* Category page breadcrumb (div-based, not ul) */
div.breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 40px !important;
    max-width: 1400px !important;
    margin: 16px auto 24px !important;
    font-size: 14px !important;
    color: #999 !important;
    background: none !important;
}

div.breadcrumb a {
    color: #999 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

div.breadcrumb a:hover {
    color: #3dd5c0 !important;
}

div.breadcrumb strong {
    color: #333 !important;
    white-space: nowrap !important;
}

/* ============================================
   PRODUCT PAGE — Fix related carousels to single row
   ============================================ */

/* Related products — force single horizontal row */
.bc-related-section .related-products,
.bc-related-section .bc-related-grid,
.bc-related-section .productbox-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    padding: 4px 0 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.bc-related-section .related-products::-webkit-scrollbar,
.bc-related-section .bc-related-grid::-webkit-scrollbar,
.bc-related-section .productbox-grid::-webkit-scrollbar {
    display: none !important;
}

/* Carousel inside related — also single row */
.bc-related-section .product-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    padding: 4px 0 16px !important;
    scrollbar-width: none !important;
}

.bc-related-section .product-carousel::-webkit-scrollbar {
    display: none !important;
}

/* Each card in related — fixed width, no shrink */
.bc-related-section .slider-item,
.bc-related-section .product-items,
.bc-related-section .bc-product-card {
    flex: 0 0 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    float: none !important;
}

/* Override owl-carousel if it activates */
.bc-related-section .owl-wrapper-outer,
.bc-related-section .owl-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

.bc-related-section .owl-item {
    float: none !important;
    flex: 0 0 240px !important;
}

/* Fix related section max-width and padding */
.bc-related-section {
    max-width: 1400px !important;
    margin: 40px auto 0 !important;
    padding: 0 40px !important;
}

.bc-related-heading {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
}

/* ── Product page container — no old Bootstrap grid ── */
body.product-product .container {
    max-width: 1400px !important;
    padding: 0 40px !important;
}

body.product-product .container > .row {
    display: block !important;
    margin: 0 !important;
}

body.product-product #content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Hide old column left/right on product page */
body.product-product #column-left,
body.product-product #column-right {
    display: none !important;
}

/* Product main layout — the inline styles already handle the 2-col grid */
/* Ensure product image and info are properly sized */
.product-left-bc {
    position: relative !important;
}

.product-left-bc .main-image-bc,
.product-left-bc .main-image-bc img {
    width: 100% !important;
    border-radius: 12px !important;
    display: block !important;
}

/* Gallery thumbnails — horizontal row */
.gallery-thumbs {
    display: flex !important;
    gap: 10px !important;
    margin-top: 16px !important;
    flex-wrap: wrap !important;
}

.gallery-thumbs .thumb-item {
    width: 68px !important;
    height: 93px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    opacity: 0.55 !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
}

.gallery-thumbs .thumb-item:hover {
    opacity: 0.85 !important;
}

.gallery-thumbs .thumb-item.active {
    border-color: #3dd5c0 !important;
    opacity: 1 !important;
}

.gallery-thumbs .thumb-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Product title */
.product-title-bc {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
}

/* Stock badge */
.stock-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.stock-badge.in-stock {
    background: #e8faf6 !important;
    color: #0d9488 !important;
}

/* Price */
.bc-price-current {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.bc-price-original {
    font-size: 20px !important;
    color: #aaa !important;
    text-decoration: line-through !important;
}

/* Qty controls */
.qty-control {
    display: flex !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    align-items: center !important;
}

.qty-control .qty-btn {
    width: 40px !important;
    height: 40px !important;
    background: #f8f8f8 !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s !important;
}

.qty-control .qty-btn:hover {
    background: #3dd5c0 !important;
    color: white !important;
}

.qty-control .qty-val {
    width: 48px !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border: none !important;
    border-left: 2px solid #e5e5e5 !important;
    border-right: 2px solid #e5e5e5 !important;
    padding: 8px 0 !important;
    outline: none !important;
}

/* Add to cart button */
.btn-add-cart {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 18px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-add-cart:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

/* Tabs */
.bc-tabs-nav {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid #f0f0f0 !important;
    padding: 0 !important;
    margin-top: 40px !important;
    background: white !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

.bc-tab-btn {
    padding: 16px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #666 !important;
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

.bc-tab-btn:hover {
    color: #3dd5c0 !important;
}

.bc-tab-btn.active {
    color: #3dd5c0 !important;
    border-bottom-color: #3dd5c0 !important;
}

.bc-tab-pane {
    background: white !important;
    border-radius: 0 0 12px 12px !important;
    padding: 32px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

/* Specs table */
.specs-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.specs-table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 14px !important;
}

.specs-table td:first-child {
    font-weight: 600 !important;
    color: #666 !important;
    width: 200px !important;
}

/* Product detail rows */
.product-detail-row-bc {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 14px !important;
}

.product-detail-label-bc {
    font-weight: 600 !important;
    color: #666 !important;
    min-width: 120px !important;
}

.product-detail-value-bc {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

.product-detail-value-bc a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    border-bottom: 2px solid #3dd5c0 !important;
    padding-bottom: 1px !important;
}

.product-detail-value-bc a:hover {
    color: #3dd5c0 !important;
}

/* Carousel nav buttons */
.bc-carousel-nav {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    justify-content: flex-end !important;
}

.bc-carousel-nav .prev,
.bc-carousel-nav .next {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid #e5e5e5 !important;
    background: white !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    font-size: 16px !important;
}

.bc-carousel-nav .prev:hover,
.bc-carousel-nav .next:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
}

/* Product breadcrumb */
body.product-product .breadcrumb {
    max-width: 1400px !important;
    margin: 16px auto 20px !important;
    padding: 0 40px !important;
}

@media (max-width: 768px) {
    .bc-related-section { padding: 0 20px !important; }
    .bc-related-section .slider-item,
    .bc-related-section .product-items,
    .bc-related-section .bc-product-card {
        flex: 0 0 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
    .bc-related-heading { font-size: 20px !important; }
    body.product-product .container { padding: 0 20px !important; }
    .product-title-bc { font-size: 22px !important; }
    .bc-price-current { font-size: 32px !important; }
}

/* ── earlier full-bleed handled at line ~1763 ── */

.new-card-info {
    background: white !important;
}

/* ── Product page purchase section ── */
.purchase-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    margin-top: 16px !important;
}

.quantity-selector {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.quantity-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.qty-stock-hint {
    font-size: 12px !important;
    color: #aaa !important;
}

/* Discount info box */
.discount-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    background: white !important;
    border: 2px dashed #3dd5c0 !important;
    border-radius: 8px !important;
}

.discount-info-icon {
    font-size: 22px !important;
    flex-shrink: 0 !important;
}

.discount-info-text {
    font-size: 13px !important;
    color: #333 !important;
    line-height: 1.5 !important;
}

.discount-info-text strong {
    color: #3dd5c0 !important;
}

/* Urgency signals */
.urgency-signals {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e8e8e8 !important;
}

.urgency-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #444 !important;
}

.urgency-item--warn {
    color: #b45309 !important;
}

.urgency-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    flex-shrink: 0 !important;
    animation: urgPulse 1.6s infinite !important;
}

.urgency-icon {
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

/* Wishlist button — full width outline */
.btn-wishlist-bc {
    background: white !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: center !important;
    width: 100% !important;
}

.btn-wishlist-bc:hover {
    border-color: #ff6b6b !important;
    color: #ff6b6b !important;
}

/* ── FIX: Specials section — transparent containers, only cards white ── */
.new-arrivals-section,
.new-arrivals-section * {
    background-color: transparent;
}

/* Re-apply the red gradient on the section itself */
.new-arrivals-section {
    background: linear-gradient(135deg, #8b0a2a 0%, #c4193f 45%, #dd3153 100%) !important;
}

/* Only the actual card elements should be white */
.new-arrivals-section .new-card {
    background: white !important;
    border-radius: 14px !important;
}

/* Scroll container — transparent */
.new-arrivals-section .new-arrivals-scroll,
.new-arrivals-section .sale-carousel-wrap,
.new-arrivals-section .new-arrivals-inner,
.new-arrivals-section .new-arrivals-header,
.new-arrivals-section .products-carousel-nav {
    background: transparent !important;
    background-color: transparent !important;
}

/* Title and link — white text on red */
.new-arrivals-section .new-arrivals-title {
    color: white !important;
}

.new-arrivals-section .new-arrivals-link {
    color: rgba(255,255,255,0.85) !important;
}

.new-arrivals-section .new-arrivals-link:hover {
    color: white !important;
}

/* Arrow buttons on red bg */
.new-arrivals-section .slider-arrow {
    background: rgba(255,255,255,0.95) !important;
    color: #1a1a1a !important;
    border-color: transparent !important;
}

.new-arrivals-section .slider-arrow:hover {
    background: white !important;
}

/* Card info area — white */
.new-arrivals-section .new-card-info {
    background: white !important;
}

.new-arrivals-section .new-card-img-wrap {
    background: white !important;
}

/* ================================================================
   SPECIALS / SALE SECTION — exact 1:1 match with design template
   Uses .bc-sale-* namespace to avoid conflicts
   ================================================================ */

/* ── Section: full-bleed red gradient ── */
.bc-sale-section {
    padding: 56px 0;
    background: linear-gradient(135deg, #8b0a2a 0%, #c4193f 45%, #dd3153 100%) !important;
    /* Full viewport bleed */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
}

/* ── Inner container — centered ── */
.bc-sale-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ── Header row ── */
.bc-sale-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.bc-sale-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
}

.bc-sale-link {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}

.bc-sale-link:hover {
    color: white;
    text-decoration: underline;
}

/* ── Carousel wrapper (relative for arrows) ── */
.bc-sale-carousel-wrap {
    position: relative;
    padding: 0 36px;
}

/* ── Arrows — absolutely positioned circles ── */
.bc-sale-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.95);
    color: #1a1a1a;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: all 0.2s;
    line-height: 1;
}

.bc-sale-arrow:hover {
    background: white;
    transform: translateY(-50%) scale(1.08);
}

.bc-sale-arrow-prev { left: -4px; }
.bc-sale-arrow-next { right: -4px; }

/* ── Scroll track — horizontal, hidden scrollbar ── */
.bc-sale-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.bc-sale-scroll::-webkit-scrollbar {
    display: none;
}

/* ── Card ── */
.bc-sale-card {
    flex-shrink: 0;
    width: 220px;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    text-decoration: none;
    color: inherit;
    display: block;
}

.bc-sale-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    color: inherit;
    text-decoration: none;
}

/* Card image */
.bc-sale-card-img {
    position: relative;
    background: #f8f9fa;
}

.bc-sale-card-img img {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    display: block;
}

/* Sale badge on image */
.bc-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(239,68,68,0.45);
}

/* Card info */
.bc-sale-card-info {
    padding: 11px 13px 14px;
    background: white;
}

.bc-sale-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prices row */
.bc-sale-card-prices {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 7px;
}

.bc-sale-price {
    font-size: 15px;
    font-weight: 700;
    color: #ef4444;
}

.bc-sale-price-old {
    font-size: 12px;
    font-weight: 500;
    color: #bbb;
    text-decoration: line-through;
}

.bc-sale-discount {
    display: inline-block;
    background: #fef2f2;
    color: #ef4444;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: auto;
}

.bc-sale-cart-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 9px 0;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}
.bc-sale-cart-btn:hover {
    opacity: 0.85;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .bc-sale-section {
        padding: 40px 0;
    }
    .bc-sale-inner {
        padding: 0 20px;
    }
    .bc-sale-title {
        font-size: 22px;
    }
    .bc-sale-carousel-wrap {
        padding: 0;
    }
    .bc-sale-arrow {
        display: none;
    }
    .bc-sale-card {
        width: 180px;
    }
}

/* ── FIX: Category hero when no image — single column ── */
.category-hero:has(> .category-info:first-child) {
    grid-template-columns: 1fr !important;
}

/* Also handle when category-info is the only child */
.category-hero > .category-info:only-child {
    grid-column: 1 / -1 !important;
}

/* Standard category icon — 120px column */
.category-hero:has(> .category-icon) {
    grid-template-columns: 120px 1fr !important;
    gap: 32px !important;
}

/* Ensure description text wraps properly */
.category-description {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.category-description p {
    margin-bottom: 12px !important;
    line-height: 1.7 !important;
}

/* ============================================
   PRODUCT PAGE — Carousel + Tabs Fixes
   ============================================ */

/* Related sections — centered, max-width */
.bc-related-section {
    max-width: 1400px !important;
    margin: 40px auto 0 !important;
    padding: 0 40px !important;
    clear: both !important;
}

/* Related products wrapper — no overflow so arrows aren't clipped */
.bc-related-section .related-products {
    position: relative !important;
    overflow: visible !important;
}

/* Carousel nav — position at top right of section */
.bc-related-section .bc-carousel-nav,
.bc-related-section .customNavigation {
    position: absolute !important;
    top: -50px !important;
    right: 0 !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 5 !important;
}

.bc-related-section .bc-carousel-nav a,
.bc-related-section .customNavigation a {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid #e5e5e5 !important;
    background: white !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

.bc-related-section .bc-carousel-nav a:hover,
.bc-related-section .customNavigation a:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
}

/* Heading needs relative positioning and right padding for arrows */
.bc-related-section .bc-related-heading {
    position: relative !important;
    padding-right: 100px !important;
}

/* Product carousel / grid — single row horizontal scroll */
.bc-related-section .product-carousel,
.bc-related-section .bc-related-grid,
.bc-related-section .productbox-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    padding: 4px 0 16px !important;
}

.bc-related-section .product-carousel::-webkit-scrollbar,
.bc-related-section .bc-related-grid::-webkit-scrollbar,
.bc-related-section .productbox-grid::-webkit-scrollbar {
    display: none !important;
}

/* Cards — fixed width */
.bc-related-section .slider-item,
.bc-related-section .product-items {
    flex: 0 0 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Product card inside related — must respect parent width */
.bc-related-section .slider-item .bc-product-card,
.bc-related-section .product-items .bc-product-card {
    flex: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Product card inside related */
.bc-related-section .bc-product-card {
    width: 100% !important;
    margin: 0 !important;
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    border: 1px solid #f0f0f0 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.bc-related-section .bc-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.bc-related-section .bc-product-card .card-image {
    position: relative !important;
    overflow: hidden !important;
}

.bc-related-section .bc-product-card .card-image img {
    width: 100% !important;
    aspect-ratio: 5/7 !important;
    object-fit: cover !important;
    display: block !important;
}

.bc-related-section .bc-product-card .card-body-bc {
    padding: 10px 12px 14px !important;
}

.bc-related-section .bc-product-card .card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-height: 32px !important;
}

.bc-related-section .bc-product-card .card-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.bc-related-section .bc-product-card .card-price {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #3dd5c0 !important;
    margin-bottom: 8px !important;
}

.bc-related-section .bc-product-card .card-btn {
    display: block !important;
    width: 100% !important;
    padding: 8px !important;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.bc-related-section .bc-product-card .card-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(61,213,192,0.3) !important;
}

.bc-related-section .bc-product-card .card-btn.out_of_stock {
    background: #e5e5e5 !important;
    color: #999 !important;
    cursor: not-allowed !important;
}

/* Tabs section — center and proper styling */
.bc-tabs-section {
    max-width: 1400px !important;
    margin: 40px auto 0 !important;
    padding: 0 !important;
}

/* Owl carousel overrides inside related */
.bc-related-section .owl-wrapper-outer {
    overflow: visible !important;
}

.bc-related-section .owl-wrapper {
    display: flex !important;
    gap: 16px !important;
}

.bc-related-section .owl-item {
    float: none !important;
    margin-right: 0 !important;
}

/* Hide old owl pagination dots */
.bc-related-section .owl-pagination,
.bc-related-section .owl-controls {
    display: none !important;
}

/* Slider wrappers — make transparent so flex flows to .slider-item */
.bc-related-section .slider-wrapper-outer,
.bc-related-section .slider-wrapper {
    display: contents !important;
}

/* Slider controls (prev/next inside carousel) — hide if broken */
.bc-related-section .slider-controls {
    display: none !important;
}

/* Carousel spacing — breathing room between and around cards */
.bc-related-section .product-carousel {
    padding: 4px 4px 16px 4px !important;
    gap: 20px !important;
}

.bc-related-section .related-products {
    gap: 20px !important;
}

@media (max-width: 768px) {
    .bc-related-section {
        padding: 0 20px !important;
    }
    .bc-related-section .slider-item,
    .bc-related-section .product-items {
        flex: 0 0 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
    .bc-related-section .bc-carousel-nav,
    .bc-related-section .customNavigation {
        display: none !important;
    }
}

/* ============================================
   BLOG ARTICLE PAGE — Matching design template
   ============================================ */

/* Hero image banner */
.article-hero {
    position: relative;
    height: 480px;
    overflow: hidden;
}
.article-hero img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.55);
}
.hero-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 40px 48px;
}
.hero-overlay .hero-inner { max-width: 820px; margin: 0 auto; width: 100%; }
.article-category {
    display: inline-flex; align-items: center; gap: 6px;
    background: #3dd5c0; color: white;
    padding: 4px 12px; border-radius: 99px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    text-decoration: none; margin-bottom: 14px;
    width: fit-content;
}
.article-title-hero {
    font-size: 40px; font-weight: 700; color: white;
    line-height: 1.2; letter-spacing: -0.5px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
    margin-bottom: 16px;
}
.article-meta {
    display: flex; align-items: center; gap: 20px;
    flex-wrap: wrap;
}
.meta-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500;
}
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.4); }

/* 2-column blog layout */
.blog-page-wrap {
    max-width: 1200px; margin: 0 auto;
    padding: 48px 40px 80px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    align-items: start;
}
.blog-article-body { min-width: 0; }

/* Lead paragraph */
.article-lead {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px; line-height: 1.7;
    color: #333; margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 2px solid #f0f0f0;
}

/* Prose styling for blog content */
.blog-desc.prose h2 {
    font-size: 26px; font-weight: 700; color: #1a1a1a;
    margin: 44px 0 16px; line-height: 1.3;
    scroll-margin-top: 90px;
}
.blog-desc.prose h3 {
    font-size: 19px; font-weight: 700; color: #1a1a1a;
    margin: 28px 0 12px; line-height: 1.4;
}
.blog-desc.prose p {
    font-size: 16px; line-height: 1.85; color: #333;
    margin-bottom: 20px;
}
.blog-desc.prose ul, .blog-desc.prose ol {
    margin: 0 0 20px 0; padding-left: 0;
    list-style: none;
}
.blog-desc.prose ul li, .blog-desc.prose ol li {
    font-size: 16px; line-height: 1.8; color: #333;
    padding: 6px 0 6px 28px; position: relative;
}
.blog-desc.prose ul li::before {
    content: '\2713'; position: absolute; left: 0;
    color: #3dd5c0; font-weight: 700; font-size: 14px;
}
.blog-desc.prose ol { counter-reset: li; }
.blog-desc.prose ol li::before {
    content: counter(li); counter-increment: li;
    position: absolute; left: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background: #3dd5c0; color: white;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    top: 9px;
}
.blog-desc.prose strong { font-weight: 700; color: #1a1a1a; }
.blog-desc.prose a { color: #3dd5c0; font-weight: 600; text-decoration: none; }
.blog-desc.prose a:hover { text-decoration: underline; }

/* Article images */
.article-img-wrap {
    margin: 32px 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
.article-img-wrap img {
    width: 100%; display: block;
    aspect-ratio: 16/9; object-fit: cover;
}
.img-caption {
    background: #f8f9fa; padding: 10px 16px;
    font-size: 13px; color: #888; font-style: italic;
    border-top: 1px solid #f0f0f0;
}

/* Tip box */
.tip-box {
    background: #e8faf6;
    border-left: 4px solid #3dd5c0;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 24px 0;
}
.tip-box-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #0d9488; margin-bottom: 6px;
}
.tip-box p { margin: 0; font-size: 15px; color: #115e59; }

/* Warning box */
.warn-box {
    background: #fff8e8;
    border-left: 4px solid #f59e0b;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 24px 0;
}
.warn-box-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #d97706; margin-bottom: 6px;
}
.warn-box p { margin: 0; font-size: 15px; color: #78350f; }

/* Comparison table */
.compare-table {
    width: 100%; border-collapse: collapse;
    margin: 28px 0; font-size: 14px;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.compare-table thead th {
    background: #3dd5c0; color: white;
    padding: 13px 16px; text-align: left;
    font-weight: 700; font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.3px;
}
.compare-table thead th:first-child { border-radius: 12px 0 0 0; }
.compare-table thead th:last-child { border-radius: 0 12px 0 0; }
.compare-table tbody tr:nth-child(even) { background: #f8f9fa; }
.compare-table tbody tr:hover { background: #f0fdfb; }
.compare-table td {
    padding: 12px 16px; border-bottom: 1px solid #f0f0f0;
    color: #333; vertical-align: middle;
}
.compare-table td:first-child { font-weight: 600; color: #1a1a1a; }
.tag-good { color: #0d9488; font-weight: 600; }
.tag-mid  { color: #d97706; font-weight: 600; }
.tag-bad  { color: #ef4444; font-weight: 600; }

/* Method cards grid */
.method-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 16px; margin: 24px 0;
}
.method-card {
    background: white; border: 1px solid #e8e8e8;
    border-radius: 12px; padding: 20px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.method-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
.method-icon { font-size: 32px; margin-bottom: 10px; }
.method-name { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.method-price { font-size: 12px; color: #3dd5c0; font-weight: 600; margin-bottom: 8px; }
.method-desc { font-size: 13px; color: #666; line-height: 1.6; }
.method-rating { display: flex; gap: 3px; margin-top: 10px; }
.star { font-size: 13px; }

/* CTA block */
.cta-block {
    background: linear-gradient(135deg, #0d9488 0%, #3dd5c0 60%, #5eead4 100%);
    border-radius: 16px;
    padding: 36px 32px;
    margin: 44px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.cta-block::before {
    content: '';
    position: absolute; right: -30px; top: -30px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
}
.cta-block::after {
    content: '';
    position: absolute; right: 60px; bottom: -50px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}
.cta-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #ccfbf1; margin-bottom: 8px;
}
.cta-title {
    font-size: 22px; font-weight: 700; color: white;
    line-height: 1.3; margin-bottom: 10px;
}
.cta-desc { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; }
.cta-btn {
    background: white; color: #0d9488;
    text-decoration: none; padding: 14px 28px;
    border-radius: 10px; font-size: 15px; font-weight: 700;
    white-space: nowrap; flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative; z-index: 1;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.cta-cards-preview {
    display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;
}
.cta-card-chip {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 99px; padding: 4px 12px;
    font-size: 12px; color: white; font-weight: 500;
}

/* Author bio */
.author-bio {
    display: flex; align-items: center; gap: 16px;
    background: white; border: 1px solid #e8e8e8;
    border-radius: 12px; padding: 20px 24px;
    margin-top: 48px;
}
.author-avatar {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; border: 2px solid #e8faf6;
}
.author-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.author-role { font-size: 12px; color: #3dd5c0; font-weight: 600; margin: 2px 0 6px; }
.author-desc { font-size: 13px; color: #666; line-height: 1.5; }

/* Share bar */
.share-bar {
    display: flex; align-items: center; gap: 12px;
    margin-top: 40px; padding-top: 28px;
    border-top: 2px solid #f0f0f0; flex-wrap: wrap;
}
.share-label { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.share-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: transform 0.15s;
}
.share-btn:hover { transform: translateY(-1px); }
.share-btn.fb { background: #e8f0ff; color: #1877f2; }
.share-btn.tw { background: #e8f8ff; color: #1da1f2; }
.share-btn.cp { background: #f5f5f5; color: #555; cursor: pointer; border: none; font-family: inherit; }

/* Related articles */
.blog-related-section { margin-top: 56px; }
.blog-section-label {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #3dd5c0; margin-bottom: 8px;
}
.blog-section-title {
    font-size: 24px; font-weight: 700; color: #1a1a1a;
    margin-bottom: 24px;
}
.blog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-related-card {
    background: white; border-radius: 12px; overflow: hidden;
    border: 1px solid #e8e8e8; text-decoration: none; color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.blog-related-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.1); transform: translateY(-3px); }
.blog-related-img { aspect-ratio: 16/9; object-fit: cover; width: 100%; display: block; }
.blog-related-content { padding: 16px; }
.blog-related-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #3dd5c0; margin-bottom: 6px; }
.blog-related-title { font-size: 14px; font-weight: 700; color: #1a1a1a; line-height: 1.4; margin-bottom: 8px; }
.blog-related-meta { font-size: 12px; color: #aaa; }

/* Sidebar */
.article-sidebar { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 24px; }

/* TOC card */
.toc-card {
    background: white; border: 1px solid #e8e8e8; border-radius: 12px;
    overflow: hidden;
}
.toc-header {
    background: #f8f9fa; border-bottom: 1px solid #e8e8e8;
    padding: 14px 18px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: #1a1a1a;
    display: flex; align-items: center; gap: 8px;
}
.toc-list { padding: 8px 0; }
.toc-item a {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 18px; font-size: 13px; color: #555;
    text-decoration: none; transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}
.toc-item a:hover, .toc-item.active a { background: #f0fdfb; color: #3dd5c0; }
.toc-num { font-weight: 700; color: #3dd5c0; flex-shrink: 0; font-size: 12px; min-width: 18px; }

/* Reading progress */
.read-progress {
    background: white; border: 1px solid #e8e8e8; border-radius: 12px;
    padding: 16px 18px;
}
.progress-label { font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; justify-content: space-between; }
.progress-track { background: #f0f0f0; border-radius: 99px; height: 6px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3dd5c0, #0d9488); transition: width 0.3s; width: 0%; }

/* Sidebar CTA */
.sidebar-cta {
    background: linear-gradient(160deg, #0d9488, #3dd5c0);
    border-radius: 12px; padding: 22px 18px; text-align: center;
}
.scta-icon { font-size: 36px; margin-bottom: 10px; }
.scta-title { font-size: 15px; font-weight: 700; color: white; margin-bottom: 6px; line-height: 1.3; }
.scta-desc { font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 16px; line-height: 1.5; }
.scta-btn {
    display: block; background: white; color: #0d9488;
    text-decoration: none; padding: 10px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 700; transition: transform 0.15s;
}
.scta-btn:hover { transform: scale(1.02); }

/* Tags card */
.tags-card {
    background: white; border: 1px solid #e8e8e8; border-radius: 12px;
    padding: 16px 18px;
}
.tags-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #aaa; margin-bottom: 12px; }
.tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tag {
    background: #f5f5f5; color: #555; border-radius: 99px;
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    text-decoration: none; transition: background 0.15s, color 0.15s;
}
.blog-tag:hover { background: #e8faf6; color: #3dd5c0; }

/* Reading progress bar (top of page) */
.top-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: transparent; z-index: 200; pointer-events: none;
}
.top-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #3dd5c0, #0d9488);
    transition: width 0.1s;
}

/* Blog page — override Bootstrap grid */
.single-blog.col-sm-12,
.single-blog.col-sm-9 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Blog responsive */
@media (max-width: 1024px) {
    .blog-page-wrap { grid-template-columns: 1fr; padding: 32px 24px 60px; }
    .article-sidebar { position: static; }
    .toc-card { display: none; }
    .read-progress { display: none; }
    .blog-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .article-hero { height: 340px; }
    .hero-overlay { padding: 0 20px 32px; }
    .article-title-hero { font-size: 28px; }
    .blog-page-wrap { padding: 24px 20px 48px; }
    .cta-block { grid-template-columns: 1fr; }
    .cta-btn { text-align: center; }
    .method-grid { grid-template-columns: 1fr; }
    .blog-related-grid { grid-template-columns: 1fr; }
    .compare-table { font-size: 12px; }
    .compare-table td, .compare-table th { padding: 10px 10px; }
}
@media (max-width: 480px) {
    .article-title-hero { font-size: 23px; }
    .article-lead { font-size: 17px; }
    .blog-desc.prose h2 { font-size: 21px; }
}

/* ============================================
   INFORMATION SIDEBAR BOX — Clean design
   ============================================ */

/* The .box with .box-heading + .list-group pattern (info pages, account pages) */
#column-left .box,
#column-right .box,
.col-sm-3 .box {
    background: white !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

#column-left .box .box-heading,
#column-right .box .box-heading,
.col-sm-3 .box .box-heading {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-radius: 0 !important;
}

#column-left .box .list-group,
#column-right .box .list-group,
.col-sm-3 .box .list-group {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    list-style: none !important;
}

#column-left .box .list-group .list-group-item,
#column-right .box .list-group .list-group-item,
.col-sm-3 .box .list-group .list-group-item {
    display: block !important;
    padding: 11px 20px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, padding-left 0.15s !important;
    background: white !important;
}

#column-left .box .list-group .list-group-item:last-child,
#column-right .box .list-group .list-group-item:last-child,
.col-sm-3 .box .list-group .list-group-item:last-child {
    border-bottom: none !important;
}

#column-left .box .list-group .list-group-item:hover,
#column-right .box .list-group .list-group-item:hover,
.col-sm-3 .box .list-group .list-group-item:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
    padding-left: 24px !important;
}

#column-left .box .list-group .list-group-item.active,
#column-right .box .list-group .list-group-item.active,
.col-sm-3 .box .list-group .list-group-item.active {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
    font-weight: 700 !important;
    border-left: 3px solid #3dd5c0 !important;
}

/* Account sidebar links (rendered as inline links without list-group) */
#column-left .box .box-content,
#column-right .box .box-content {
    padding: 0 !important;
}

#column-left .box .box-content a,
#column-right .box .box-content a {
    display: block !important;
    padding: 11px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background 0.15s, color 0.15s !important;
}

#column-left .box .box-content a:last-child,
#column-right .box .box-content a:last-child {
    border-bottom: none !important;
}

#column-left .box .box-content a:hover,
#column-right .box .box-content a:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
}

/* ── Column left/right general layout fix ── */
#column-left,
#column-right {
    padding: 0 !important;
}

/* Information pages — content area */
.information-information #content,
.information-blogger #content {
    padding: 0 !important;
}

/* Account module box (rendered in column-left on account pages) */
#column-left .box .box-heading + .list-group .heading {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 20px 6px !important;
    background: white !important;
    cursor: default !important;
    border-bottom: none !important;
}

#column-left .box .box-heading + .list-group .heading:hover {
    background: white !important;
    color: #999 !important;
    padding-left: 20px !important;
}

/* ============================================
   MOBILE HEADER — Cart button + Burger fix
   ============================================ */

/* Desktop: hide the mobile-cart-wrap (desktop uses header-actions cart) */
.mobile-cart-wrap {
    display: none;
}

/* Mobile: show mobile-cart-wrap, reorder header */
@media (max-width: 900px) {
    /* Show mobile cart wrap */
    .mobile-cart-wrap {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }

    /* Header content — flex with proper ordering */
    .header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 20px !important;
        gap: 8px !important;
    }

    /* Logo stays left */
    .header-logo {
        order: 1 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Hide desktop nav and actions */
    .main-nav-wrapper {
        display: none !important;
    }

    .header-actions {
        display: none !important;
    }

    /* Mobile search — order 2 */
    .mobile-search-btn {
        order: 2 !important;
        flex-shrink: 0 !important;
    }

    /* Mobile cart — order 3 */
    .mobile-cart-wrap {
        order: 3 !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
    }

    /* Cart button on mobile — yellow circle */
    .mobile-cart-wrap .cart-btn,
    .mobile-cart-wrap a#cartButton {
        position: relative !important;
        padding: 0 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 20px !important;
    }

    .mobile-cart-wrap .cart-text {
        display: none !important;
    }

    .mobile-cart-wrap .cart-badge,
    .mobile-cart-wrap #cart-badge {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }

    /* Burger — order 4, far right */
    .burger-menu {
        order: 4 !important;
        display: flex !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================
   INFORMATION PAGES — 2-column layout fix
   ============================================ */

/* Force proper 2-column grid on info/account pages */
#information-information > .container > .row,
#product-special > .container > .row,
.information-information .container > .row,
.information-contact .container > .row {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    float: none !important;
    margin: 0 !important;
}

/* When no sidebar, full width */
#information-information > .container > .row:not(:has(#column-left)),
.information-information .container > .row:not(:has(#column-left)) {
    grid-template-columns: 1fr !important;
}

/* Column left — proper sizing */
#information-information #column-left,
.information-information #column-left,
.information-contact #column-left {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    max-width: 280px !important;
}

/* Content area — proper sizing */
#information-information #content,
.information-information #content,
.information-contact #content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Container max-width */
#information-information > .container,
.information-information .container,
.information-contact .container {
    max-width: 1400px !important;
    padding: 0 40px 60px !important;
}

/* Content styling */
#information-information #content h1,
.information-information #content h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
}

#information-information #content .info-description,
.information-information #content > div:not(.breadcrumb):not(.buttons) {
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #333 !important;
}

/* Account pages — same grid layout */
[id^="account-"] > .container > .row,
body[class*="account-"] .container > .row {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    float: none !important;
    margin: 0 !important;
}

[id^="account-"] #column-left,
body[class*="account-"] #column-left {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    max-width: 280px !important;
}

[id^="account-"] #content,
body[class*="account-"] #content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

[id^="account-"] > .container,
body[class*="account-"] .container {
    max-width: 1400px !important;
    padding: 0 40px 60px !important;
}

/* Responsive — stack on mobile */
@media (max-width: 900px) {
    #information-information > .container > .row,
    .information-information .container > .row,
    .information-contact .container > .row,
    [id^="account-"] > .container > .row,
    body[class*="account-"] .container > .row {
        grid-template-columns: 1fr !important;
    }

    #information-information #column-left,
    .information-information #column-left,
    .information-contact #column-left,
    [id^="account-"] #column-left,
    body[class*="account-"] #column-left {
        max-width: 100% !important;
    }

    #information-information > .container,
    .information-information .container,
    [id^="account-"] > .container,
    body[class*="account-"] .container {
        padding: 0 20px 40px !important;
    }
}

/* ── FIX: Information page layout — correct selectors ── */
/* The #information-information IS the .container, not a child */
#information-information > .row {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    margin: 0 !important;
}

#information-information {
    max-width: 1400px !important;
    padding: 0 40px 60px !important;
}

#information-information > .row > #column-left,
#information-information > .row > aside {
    width: 100% !important;
    max-width: 280px !important;
    float: none !important;
    padding: 0 !important;
}

#information-information > .row > #content,
#information-information > .row > [id="content"] {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Same pattern for account pages */
#account-account > .row,
#account-edit > .row,
#account-address > .row,
#account-password > .row,
#account-wishlist > .row,
#account-order > .row,
#account-reward > .row,
#account-transaction > .row,
#account-newsletter > .row,
div[id^="account-"] > .row {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    margin: 0 !important;
}

div[id^="account-"] {
    max-width: 1400px !important;
    padding: 0 40px 60px !important;
}

div[id^="account-"] > .row > #column-left,
div[id^="account-"] > .row > aside {
    width: 100% !important;
    max-width: 280px !important;
    float: none !important;
    padding: 0 !important;
}

div[id^="account-"] > .row > #content,
div[id^="account-"] > .row > [id="content"] {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Contact page */
#information-contact > .row {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    margin: 0 !important;
}

#information-contact {
    max-width: 1400px !important;
    padding: 0 40px 60px !important;
}

/* Checkout/cart pages — single column, no sidebar */
#checkout-cart > .row,
#checkout-checkout > .row {
    display: block !important;
}

/* Responsive */
@media (max-width: 900px) {
    #information-information > .row,
    div[id^="account-"] > .row,
    #information-contact > .row {
        grid-template-columns: 1fr !important;
    }
    #information-information > .row > #column-left,
    div[id^="account-"] > .row > #column-left,
    #information-contact > .row > #column-left {
        max-width: 100% !important;
    }
    #information-information,
    div[id^="account-"],
    #information-contact {
        padding: 0 20px 40px !important;
    }
}

/* ── Onboarding page — full width, no sidebar grid ── */
body[class*="favourite"] .container > .row,
div[id*="favourite"] > .row {
    display: block !important;
    grid-template-columns: none !important;
}

body[class*="favourite"] #column-left,
body[class*="favourite"] #column-right {
    display: none !important;
}

body[class*="favourite"] #content {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    float: none !important;
    padding: 40px 20px !important;
}

/* Onboarding cards */
body[class*="favourite"] .onboarding-hero,
body[class*="favourite"] .ob-hero {
    max-width: 600px !important;
    margin: 0 auto 32px !important;
    text-align: center !important;
}

body[class*="favourite"] .onboarding-step,
body[class*="favourite"] .ob-step-card {
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* Sport/team/player selection grid — allow wrapping */
body[class*="favourite"] .ob-options-grid,
body[class*="favourite"] .sport-grid,
body[class*="favourite"] .team-grid,
body[class*="favourite"] .player-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 12px !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* Option cards */
body[class*="favourite"] .ob-option,
body[class*="favourite"] .sport-option,
body[class*="favourite"] .team-option {
    border: 2px solid #e5e5e5 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: white !important;
}

body[class*="favourite"] .ob-option:hover,
body[class*="favourite"] .sport-option:hover,
body[class*="favourite"] .team-option:hover {
    border-color: #3dd5c0 !important;
    background: #f0fdfb !important;
}

body[class*="favourite"] .ob-option.selected,
body[class*="favourite"] .sport-option.selected,
body[class*="favourite"] .team-option.selected {
    border-color: #3dd5c0 !important;
    background: #e8faf6 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.15) !important;
}

/* Continue/submit button */
body[class*="favourite"] .btn-primary,
body[class*="favourite"] .ob-continue-btn {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 40px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: block !important;
    margin: 24px auto 0 !important;
    min-width: 200px !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
    transition: all 0.2s !important;
}

body[class*="favourite"] .btn-primary:hover,
body[class*="favourite"] .ob-continue-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

/* Step indicators */
body[class*="favourite"] .ob-steps,
body[class*="favourite"] .step-indicators {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
}

/* ============================================
   ACCOUNT PAGES — Match sidebar to /account design
   ============================================ */

/* Account page custom layout */
.account-layout {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px 60px !important;
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    align-items: start !important;
}

/* Account sidebar nav — custom design from /account */
.account-sidebar-nav {
    background: white !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    position: sticky !important;
    top: 100px !important;
}

.account-user-info {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.account-user-avatar {
    font-size: 40px;
    margin-bottom: 8px;
}

.account-user-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.account-nav-section {
    margin-bottom: 20px;
}

.account-nav-label {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 0 12px;
}

.account-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.account-nav-link:hover {
    background: #f0fdfb;
    color: #3dd5c0;
}

.account-nav-link.logout {
    color: #999;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.account-nav-link.logout:hover {
    color: #ff6b6b;
    background: #fef2f2;
}

.account-nav-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* Account main content */
.account-main {
    min-width: 0;
}

.account-main h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 24px;
}

/* Dashboard stat cards */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.stat-icon-teal { background: #e8faf6; color: #0d9488; }
.stat-icon-yellow { background: #fff8e1; color: #f59e0b; }
.stat-icon-red { background: #fef2f2; color: #ef4444; }

/* Account content cards */
.account-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
    overflow: hidden;
}

.account-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #f0f0f0;
}

.account-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.account-card-body {
    padding: 24px;
}

/* BC buttons */
.bc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.bc-btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
}

.bc-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(61,213,192,0.3);
}

.bc-btn-outline {
    background: white;
    color: #3dd5c0;
    border: 1.5px solid #3dd5c0;
}

.bc-btn-outline:hover {
    background: #f0fdfb;
}

.bc-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.bc-text-muted {
    color: #666;
    font-size: 14px;
}

.bc-alert {
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.bc-alert-success {
    background: #e8faf6;
    color: #0d9488;
    border: 1px solid #b2f0e4;
}

.bc-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ── Style #column-left on account sub-pages to match /account sidebar ── */
div[id^="account-"] > .row > #column-left .box {
    background: white !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    padding: 24px !important;
    overflow: visible !important;
}

div[id^="account-"] > .row > #column-left .box .box-heading {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 12px 10px !important;
    margin: 0 0 8px !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

div[id^="account-"] > .row > #column-left .box .list-group {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: none !important;
}

div[id^="account-"] > .row > #column-left .box .list-group .list-group-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    background: none !important;
}

div[id^="account-"] > .row > #column-left .box .list-group .list-group-item:hover {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
    padding-left: 12px !important;
}

div[id^="account-"] > .row > #column-left .box .list-group .list-group-item.active {
    background: #f0fdfb !important;
    color: #3dd5c0 !important;
    font-weight: 700 !important;
}

/* Section headings in account sidebar */
div[id^="account-"] > .row > #column-left .box .list-group .heading,
div[id^="account-"] > .row > #column-left .box .list-group .list-group-item.heading {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 12px 6px !important;
    cursor: default !important;
    background: none !important;
    border-top: 1px solid #f0f0f0 !important;
    margin-top: 8px !important;
}

div[id^="account-"] > .row > #column-left .box .list-group .heading:first-child,
div[id^="account-"] > .row > #column-left .box .list-group .list-group-item.heading:first-child {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

div[id^="account-"] > .row > #column-left .box .list-group .heading:hover,
div[id^="account-"] > .row > #column-left .box .list-group .list-group-item.heading:hover {
    background: none !important;
    color: #999 !important;
}

/* Account mobile toggle button — hidden on desktop */
.account-menu-toggle {
    display: none;
}
.account-aside-close-wrap {
    display: none;
}
.account-aside-overlay {
    display: none;
}

/* Account page responsive */
@media (max-width: 900px) {
    .account-layout {
        grid-template-columns: 1fr !important;
        padding: 0 20px 40px !important;
    }
    .dashboard-stats {
        grid-template-columns: 1fr !important;
    }
    /* Account sub-pages — single column, hide sidebar */
    div[id^="account-"] > .row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    div[id^="account-"] {
        padding: 0 16px 40px !important;
    }
    div[id^="account-"] > .row > #column-left {
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Show mobile toggle button */
    .account-menu-toggle {
        display: flex !important;
        align-items: center;
        gap: 8px;
        background: white !important;
        border: 1px solid #e8e8e8 !important;
        border-radius: 10px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        cursor: pointer !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    .account-menu-toggle:active {
        background: #f8f8f8 !important;
    }

    /* Close button inside aside */
    .account-aside-close-wrap {
        display: flex !important;
        justify-content: flex-end !important;
        padding: 16px 20px 0 !important;
    }
    .account-aside-close {
        width: 36px;
        height: 36px;
        border: none;
        background: #f5f5f5;
        border-radius: 50%;
        font-size: 22px;
        cursor: pointer;
        color: #666;
    }

    /* Sidebar becomes slide-out aside */
    .account-sidebar-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: white !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
        z-index: 2000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s !important;
        overflow-y: auto !important;
        padding: 0 20px 24px !important;
        border-radius: 0 !important;
    }
    .account-sidebar-nav.aside-open {
        transform: translateX(0) !important;
    }

    /* Overlay */
    .account-aside-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }
    .account-aside-overlay.active {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

/* ============================================
   ACCOUNT SUB-PAGES — Content area card styling
   ============================================ */

/* Main content on account sub-pages — wrap in card */
div[id^="account-"] > .row > #content {
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    border: 1px solid #f0f0f0 !important;
}

/* Page title */
div[id^="account-"] > .row > #content > h1,
div[id^="account-"] > .row > #content > h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

/* Fieldset / legend */
div[id^="account-"] #content fieldset {
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    background: #fafafa !important;
}

div[id^="account-"] #content legend {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    padding: 0 12px !important;
    margin: 0 !important;
    width: auto !important;
    border: none !important;
    float: none !important;
}

/* Form groups */
div[id^="account-"] #content .form-group {
    margin-bottom: 20px !important;
}

div[id^="account-"] #content .form-group label,
div[id^="account-"] #content label.control-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
}

/* Form controls */
div[id^="account-"] #content .form-control {
    padding: 12px 16px !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    transition: border-color 0.2s !important;
    background: white !important;
}

div[id^="account-"] #content .form-control:focus {
    border-color: #3dd5c0 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
    outline: none !important;
}

/* Buttons */
div[id^="account-"] #content .btn-primary,
div[id^="account-"] #content .buttons .btn-primary {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
    transition: all 0.2s !important;
}

div[id^="account-"] #content .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

div[id^="account-"] #content .btn-default,
div[id^="account-"] #content .buttons .btn-default {
    background: white !important;
    color: #333 !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

div[id^="account-"] #content .btn-default:hover {
    border-color: #3dd5c0 !important;
    color: #3dd5c0 !important;
}

/* Buttons row — proper spacing */
div[id^="account-"] #content .buttons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid #f0f0f0 !important;
    gap: 12px !important;
}

div[id^="account-"] #content .buttons .pull-left,
div[id^="account-"] #content .buttons .pull-right {
    float: none !important;
}

/* ============================================
   ORDER LIST — Card-based layout
   ============================================ */

.order-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.order-card {
    display: block !important;
    background: #fafafa !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    text-decoration: none !important;
    color: #1a1a1a !important;
    transition: all 0.2s !important;
}

.order-card:hover {
    border-color: #3dd5c0 !important;
    box-shadow: 0 2px 12px rgba(61,213,192,0.12) !important;
    text-decoration: none !important;
    color: #1a1a1a !important;
}

.order-card-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #eee !important;
}

.order-id {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
}

.order-status {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Status colors */
.order-status { background: #f0f0f0 !important; color: #666 !important; }
.order-status--kompletni,
.order-status--complete,
.order-status--doruceno { background: #e8faf6 !important; color: #0d9488 !important; }
.order-status--zpracovava-se,
.order-status--processing { background: #e3f2fd !important; color: #1565c0 !important; }
.order-status--cekajici,
.order-status--pending { background: #fff8e1 !important; color: #d97706 !important; }
.order-status--odeslano,
.order-status--shipped { background: #ede9fe !important; color: #7c3aed !important; }
.order-status--zruseno,
.order-status--canceled,
.order-status--denied { background: #fef2f2 !important; color: #dc2626 !important; }

.order-card-body {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.order-detail {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.order-detail-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.order-detail-value {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
}

.order-total {
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.order-card-action {
    text-align: right !important;
}

.order-view-btn {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3dd5c0 !important;
    transition: color 0.2s !important;
}

.order-card:hover .order-view-btn {
    color: #2bbfaa !important;
}

/* Empty state */
.order-empty {
    text-align: center !important;
    padding: 60px 20px !important;
}

.order-empty-icon {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

.order-empty-text {
    font-size: 16px !important;
    color: #888 !important;
}

/* Order list responsive */
@media (max-width: 768px) {
    .order-card-body {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .order-card {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .order-card-body {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Tables on account pages (orders, transactions, rewards) */
div[id^="account-"] #content .table {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #f0f0f0 !important;
    margin-bottom: 20px !important;
}

div[id^="account-"] #content .table thead td,
div[id^="account-"] #content .table thead th {
    background: #f8f9fa !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

div[id^="account-"] #content .table td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    vertical-align: middle !important;
}

div[id^="account-"] #content .table .btn-info {
    background: #3dd5c0 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: white !important;
}

/* Empty state text */
div[id^="account-"] #content > p {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.7 !important;
}

/* Address list */
div[id^="account-"] #content .table-bordered {
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
}

/* Wishlist items */
div[id^="account-"] #content .table .btn-danger {
    background: #ff6b6b !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
}

/* Breadcrumb on account pages */
div[id^="account-"] > .breadcrumb {
    max-width: 1400px !important;
    margin: 16px auto 20px !important;
    padding: 0 40px !important;
    background: none !important;
}

/* Remove the old column padding from Bootstrap */
div[id^="account-"] > .row > .col-sm-9,
div[id^="account-"] > .row > .col-sm-6 {
    padding: 0 !important;
}

/* Information pages — same content card */
#information-information > .row > #content {
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    border: 1px solid #f0f0f0 !important;
}

#information-information > .row > #content > h1 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

/* Blogger / blog-post content card */
body.information-blogger .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.information-blogger .container > .row > #content {
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    border: 1px solid #f0f0f0 !important;
}

@media (max-width: 900px) {
    body.information-blogger .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    body.information-blogger .container > .row > #content {
        padding: 24px !important;
    }
}

@media (max-width: 600px) {
    #information-information > .row > #content {
        padding: 20px !important;
        border-radius: 12px !important;
    }
    #information-information {
        padding: 0 16px 32px !important;
        box-sizing: border-box !important;
    }
    body.information-blogger .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
    body.information-blogger .container > .row > #content {
        padding: 20px !important;
        border-radius: 12px !important;
    }
}

/* ============================================
   CATEGORY PAGE — Hide old #column-left (has own sidebar)
   ============================================ */
body[class*="product-category"] #column-left,
body[class*="product-category"] #column-right,
body[class*="product-category"] .bc-column-left {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    overflow: hidden !important;
}

/* Category page container — override Bootstrap row */
body[class*="product-category"] .container > .row {
    display: block !important;
    margin: 0 !important;
}

body[class*="product-category"] .container > .row > #content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

body[class*="product-category"] .container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* ── PRODUCT PAGE — Hide coupon/discount bullets ── */
body[class*="product-product"] .coupon-info,
body[class*="product-product"] .discount-info-list,
body[class*="product-product"] .bc-coupon-section,
body[class*="product-product"] ul.list-unstyled:has(li:contains("Slevový")),
body[class*="product-product"] .product-right-bc ul.list-unstyled {
    display: none !important;
}

/* Target the specific coupon bullets by content — hide any ul with "DEKUJEME" or "Slevový kód" */
body[class*="product-product"] .bc-discount-box {
    display: none !important;
}

/* ── Hide WebDigify service/coupon bullets globally ── */
.wdservice,
.wd-return.wdservice,
.service-info-heading,
ul:has(.wdservice) {
    display: none !important;
}

/* ── CRITICAL FIX: column-left is INSIDE category-sidebar ── */
/* Undo the hide — column-left renders filters inside category-sidebar */
body[class*="product-category"] #column-left,
body[class*="product-category"] .bc-column-left {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    left: auto !important;
    overflow: visible !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* But hide column-RIGHT which is truly separate */
body[class*="product-category"] #column-right {
    display: none !important;
}

/* The outer .row wrapping everything — let category-container handle layout */
body[class*="product-category"] .container > .row {
    display: block !important;
    margin: 0 !important;
}

body[class*="product-category"] .container > .row > #content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Reset column-left Bootstrap classes inside category-sidebar */
.category-sidebar #column-left {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    position: static !important;
    left: auto !important;
    display: block !important;
}

/* Hide the col-sm-3 width constraint */
.category-sidebar .col-sm-3 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Hide the hidden-xs class override for mobile (we handle mobile sidebar separately) */
.category-sidebar .hidden-xs {
    display: block !important;
}

/* ── FIX: Ensure overlays don't block clicks when hidden ── */
.mobile-overlay,
.sidebar-overlay,
.cart-overlay {
    pointer-events: none !important;
}

.mobile-overlay.active,
.sidebar-overlay.active,
.cart-overlay.active {
    pointer-events: auto !important;
}

/* ── FIX: Onboarding page — ensure sport cards are clickable ── */
#account-favourite-onboarding .sport-card {
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

#account-favourite-onboarding .sport-grid {
    position: relative !important;
    z-index: 10 !important;
}

#account-favourite-onboarding .onboarding-page {
    position: relative !important;
    z-index: 5 !important;
}

/* Make sure buttons are clickable */
#account-favourite-onboarding .btn-next,
#account-favourite-onboarding .btn-done,
#account-favourite-onboarding .btn-skip,
#account-favourite-onboarding .btn-back {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* ============================================
   LIVE SEARCH DROPDOWN — Suggestions
   ============================================ */

.search-bar {
    position: relative !important;
}

.live-search {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border: 1px solid #e8e8e8 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    z-index: 9999 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    display: none;
    min-width: 320px !important;
}

.live-search ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.live-search ul li {
    border-bottom: 1px solid #f5f5f5 !important;
}

.live-search ul li:last-child {
    border-bottom: none !important;
}

.live-search ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    color: #333 !important;
    transition: background 0.15s !important;
}

.live-search ul li a:hover {
    background: #f0fdfb !important;
}

/* Product image in search results */
.live-search .product-image {
    width: 48px !important;
    height: 66px !important;
    flex-shrink: 0 !important;
    aspect-ratio: auto !important;
}

.live-search .product-image img {
    width: 48px !important;
    height: 66px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid #e8e8e8 !important;
    aspect-ratio: auto !important;
}

/* Product name */
.live-search .search-description,
.live-search .product-name {
    flex: 1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.3 !important;
}

.live-search .search-description p {
    font-size: 12px !important;
    color: #999 !important;
    margin: 2px 0 0 !important;
    font-weight: 400 !important;
}

/* Product price */
.live-search .product-price {
    white-space: nowrap !important;
    font-weight: 700 !important;
    color: #3dd5c0 !important;
    font-size: 14px !important;
}

.live-search .product-price .price {
    color: #3dd5c0 !important;
    font-weight: 700 !important;
}

.live-search .product-price .special {
    color: #aaa !important;
    font-size: 12px !important;
    text-decoration: line-through !important;
    margin-left: 4px !important;
}

/* View all results link */
.live-search .result-text {
    padding: 10px 16px !important;
    border-top: 1px solid #f0f0f0 !important;
    text-align: center !important;
}

.live-search .result-text a,
.live-search .view-all-results {
    color: #3dd5c0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.live-search .result-text a:hover,
.live-search .view-all-results:hover {
    text-decoration: underline !important;
}

/* Loading spinner */
.live-search .loading {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    margin: 8px auto !important;
}

/* Body overlay when search is open */
body.search-open::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.15) !important;
    z-index: 998 !important;
    pointer-events: none !important;
}

/* ============================================
   SEARCH RESULTS PAGE — Nicer design
   ============================================ */

/* Container ID is #product-search */
#product-search > .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
}

#product-search {
    max-width: 1400px !important;
    padding: 0 40px 60px !important;
}

/* Hide left column on search page (New items etc.) */
#product-search #column-left,
#product-search #column-right,
body[class*="product-search"] #column-left,
body[class*="product-search"] #column-right {
    display: none !important;
}

#product-search #content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Search page heading */
#product-search h1,
body[class*="product-search"] h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
}

/* Search input on results page */
#product-search .form-group input[type="text"],
#product-search .form-group select {
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: border-color 0.2s !important;
}

#product-search .form-group input[type="text"]:focus {
    border-color: #3dd5c0 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
}

/* Search button */
#product-search .btn-primary,
#product-search #button-search {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.3) !important;
}

#product-search .btn-primary:hover,
#product-search #button-search:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(61,213,192,0.4) !important;
}

/* Search results grid */
#product-search .product-layout {
    margin-bottom: 16px !important;
}

/* Comparison link */
#product-search .compare-total {
    display: none !important;
}

@media (max-width: 768px) {
    #product-search { padding: 0 10px 40px !important; }

    /* 2 cards per row on mobile */
    #product-search .row > .product-layout,
    body[class*="product-search"] .row > .product-layout,
    #product-special .row > .product-layout {
        width: 50% !important;
        padding: 0 4px !important;
        margin-bottom: 8px !important;
    }

    /* Compact product thumb on mobile */
    #product-search .product-thumb .caption,
    #product-special .product-thumb .caption {
        padding: 10px !important;
    }
    #product-search .product-thumb .caption h4,
    #product-special .product-thumb .caption h4 {
        font-size: 11px !important;
        max-height: 30px !important;
    }
    #product-search .product-thumb .price,
    #product-special .product-thumb .price {
        font-size: 14px !important;
    }
    #product-search .product-thumb .button-group button,
    #product-special .product-thumb .button-group button {
        padding: 8px !important;
        font-size: 12px !important;
    }

    /* Text wrapping */
    #product-search .product-thumb .caption h4 a,
    #product-special .product-thumb .caption h4 a {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 480px) {
    #product-search { padding: 0 6px 40px !important; }
    #product-search .row > .product-layout,
    body[class*="product-search"] .row > .product-layout {
        padding: 0 3px !important;
        margin-bottom: 6px !important;
    }
}

/* ── Search results — 3 products per row on desktop ── */
#product-search .row > .product-layout,
body[class*="product-search"] .row > .product-layout {
    width: 33.333% !important;
    float: left !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
}

/* Special page — also 3 per row */
#product-special .row > .product-layout,
body[class*="product-special"] .row > .product-layout {
    width: 33.333% !important;
    float: left !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
}

/* Product thumb inside search/special */
#product-search .product-thumb,
#product-special .product-thumb {
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    border: 1px solid #f0f0f0 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    height: 100% !important;
}

#product-search .product-thumb:hover,
#product-special .product-thumb:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

#product-search .product-thumb .image img,
#product-special .product-thumb .image img {
    width: 100% !important;
    aspect-ratio: 5/7 !important;
    object-fit: cover !important;
    display: block !important;
}

#product-search .product-thumb .caption,
#product-special .product-thumb .caption {
    padding: 12px !important;
}

#product-search .product-thumb .caption h4,
#product-special .product-thumb .caption h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
    max-height: 36px !important;
    overflow: hidden !important;
}

#product-search .product-thumb .caption h4 a,
#product-special .product-thumb .caption h4 a {
    color: #1a1a1a !important;
    text-decoration: none !important;
}

#product-search .product-thumb .caption h4 a:hover,
#product-special .product-thumb .caption h4 a:hover {
    color: #3dd5c0 !important;
}

#product-search .product-thumb .price,
#product-special .product-thumb .price {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

#product-search .product-thumb .price-new,
#product-special .product-thumb .price-new {
    color: #3dd5c0 !important;
    font-weight: 800 !important;
}

#product-search .product-thumb .price-old,
#product-special .product-thumb .price-old {
    color: #aaa !important;
    text-decoration: line-through !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

#product-search .product-thumb .button-group,
#product-special .product-thumb .button-group {
    border-top: 1px solid #f0f0f0 !important;
    padding: 8px 12px !important;
    display: flex !important;
    gap: 6px !important;
}

#product-search .product-thumb .button-group button,
#product-special .product-thumb .button-group button {
    flex: 1 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

#product-search .product-thumb .button-group button:first-child,
#product-special .product-thumb .button-group button:first-child {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
}

#product-search .product-thumb .button-group button:first-child:hover,
#product-special .product-thumb .button-group button:first-child:hover {
    transform: translateY(-1px) !important;
}

@media (max-width: 900px) {
    #product-search .row > .product-layout,
    #product-special .row > .product-layout,
    body[class*="product-search"] .row > .product-layout,
    body[class*="product-special"] .row > .product-layout {
        width: 50% !important;
    }
}

@media (max-width: 480px) {
    #product-search .row > .product-layout,
    #product-special .row > .product-layout,
    body[class*="product-search"] .row > .product-layout,
    body[class*="product-special"] .row > .product-layout {
        width: 100% !important;
    }
}

/* ── Search results page — hide "New items" from left column ── */
body[class*="product-search"] #column-left .box:has(.box-heading:first-child),
body[class*="product-search"] #column-left .wd_latest,
body[class*="product-search"] #column-left .latest,
body[class*="product-search"] #column-left .box-product {
    display: none !important;
}

/* Keep the category filter box visible */
body[class*="product-search"] #column-left .box:has(.list-group) {
    display: block !important;
}

/* Search page layout — 2-column grid */
#product-search > .row,
body[class*="product-search"] .container > .row {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    margin: 0 !important;
}

#product-search,
body[class*="product-search"] .container {
    max-width: 1400px !important;
    padding: 0 40px 60px !important;
}

#product-search > .row > #column-left,
body[class*="product-search"] .container > .row > #column-left {
    width: 100% !important;
    max-width: 280px !important;
    float: none !important;
    padding: 0 !important;
}

#product-search > .row > #content,
body[class*="product-search"] .container > .row > #content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Search page title styling */
body[class*="product-search"] #content h1,
body[class*="product-search"] #content h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
}

/* Search input on search page */
body[class*="product-search"] #content #input-search {
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    transition: border-color 0.2s !important;
}

body[class*="product-search"] #content #input-search:focus {
    border-color: #3dd5c0 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
}

/* Live search dropdown styling */
.live-search {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    border: 1px solid #e8e8e8 !important;
    z-index: 9999 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    margin-top: 8px !important;
}

.live-search ul {
    list-style: none !important;
    padding: 8px !important;
    margin: 0 !important;
}

.live-search ul li {
    margin: 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.live-search ul li:last-child {
    border-bottom: none !important;
}

.live-search ul li a {
    display: flex !important;
    gap: 12px !important;
    padding: 10px !important;
    text-decoration: none !important;
    color: #333 !important;
    border-radius: 8px !important;
    transition: background 0.15s !important;
    align-items: center !important;
}

.live-search ul li a:hover {
    background: #f0fdfb !important;
}

.live-search .product-image {
    width: 48px !important;
    height: 66px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    float: none !important;
    padding: 0 !important;
}

.live-search .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.live-search .search-description {
    flex: 1 !important;
    min-width: 0 !important;
    float: none !important;
    padding: 0 !important;
    width: auto !important;
}

.live-search .product-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.live-search .product-name p {
    font-size: 11px !important;
    color: #999 !important;
    margin: 2px 0 0 !important;
    font-weight: 400 !important;
}

.live-search .product-price {
    margin-top: 4px !important;
}

.live-search .product-price .price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #3dd5c0 !important;
}

.live-search .product-price .special {
    font-size: 12px !important;
    color: #aaa !important;
    text-decoration: line-through !important;
    margin-left: 6px !important;
}

.live-search .result-text {
    padding: 10px 16px !important;
    border-top: 1px solid #f0f0f0 !important;
    text-align: center !important;
}

.live-search .result-text a,
.live-search .view-all-results {
    color: #3dd5c0 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.live-search .view-all-results:hover {
    text-decoration: underline !important;
}

/* Ensure search-bar has position:relative for dropdown */
.search-bar {
    position: relative !important;
}

@media (max-width: 900px) {
    #product-search > .row,
    body[class*="product-search"] .container > .row {
        grid-template-columns: 1fr !important;
    }
    #product-search > .row > #column-left {
        max-width: 100% !important;
    }
}

/* ============================================
   SEARCH PAGE — Fix layout
   ============================================ */

/* Hide sidebar on search page — not needed */
body.product-search #column-left,
body.product-search #column-right,
#product-search > .row > #column-left,
#product-search > .row > aside {
    display: none !important;
}

/* Content takes full width */
body.product-search #content,
#product-search > .row > #content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Container */
#product-search {
    max-width: 1400px !important;
    padding: 0 40px 60px !important;
}

#product-search > .row {
    display: block !important;
    margin: 0 !important;
}

/* Search heading */
#product-search h1,
body.product-search h1,
#product-search h2.page-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
}

/* Search form styling */
#product-search .well {
    background: white !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    margin-bottom: 24px !important;
}

/* Force grid view on search results */
#product-search .row > .product-layout {
    width: 25% !important;
    float: left !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Override list view to grid */
#product-search .product-layout.product-list {
    width: 25% !important;
}

#product-search .product-layout.product-list .product-block-inner,
#product-search .product-layout.product-list .product-thumb {
    flex-direction: column !important;
    display: flex !important;
}

#product-search .product-layout.product-list .product-block-inner .image,
#product-search .product-layout.product-list .product-thumb .image {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

#product-search .product-layout.product-list .product-block-inner .caption,
#product-search .product-layout.product-list .product-thumb .caption {
    width: 100% !important;
    float: none !important;
}

#product-search .product-layout.product-list .product-block-inner .button-group,
#product-search .product-layout.product-list .product-thumb .button-group {
    width: 100% !important;
    float: none !important;
}

/* Product card styling on search */
#product-search .product-thumb {
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    border: 1px solid #f0f0f0 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    height: 100% !important;
}

#product-search .product-thumb:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

#product-search .product-thumb .image img {
    width: 100% !important;
    aspect-ratio: 5/7 !important;
    object-fit: cover !important;
    display: block !important;
}

#product-search .product-thumb .caption {
    padding: 12px !important;
}

#product-search .product-thumb .caption h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
    max-height: 36px !important;
    overflow: hidden !important;
}

#product-search .product-thumb .caption h4 a {
    color: #1a1a1a !important;
    text-decoration: none !important;
}

#product-search .product-thumb .caption h4 a:hover {
    color: #3dd5c0 !important;
}

#product-search .product-thumb .price {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

#product-search .product-thumb .price-new {
    color: #3dd5c0 !important;
}

#product-search .product-thumb .price-old {
    color: #aaa !important;
    text-decoration: line-through !important;
    font-size: 13px !important;
}

/* Description — hidden on search cards */
#product-search .product-thumb p.description,
#product-search .product-details p.description {
    display: none !important;
}

/* Wishlist badge — hidden on search cards (icon missing) */
#product-search .wishlist-button {
    display: none !important;
}

/* Button group */
#product-search .product-thumb .button-group {
    border-top: 1px solid #f0f0f0 !important;
    padding: 8px 12px !important;
    display: flex !important;
    gap: 6px !important;
}

#product-search .product-thumb .button-group button {
    flex: 1 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

#product-search .product-thumb .button-group button:first-child {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
}

/* ── Search page: page title ── */
#product-search h3.page-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px !important;
}

#product-search > .row > #content > .control-label {
    display: none !important;
}

/* ── Search page: search form row ── */
#product-search #content > .row:first-of-type {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    background: white !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    margin: 0 0 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

#product-search .search_term {
    flex: 1 1 220px !important;
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}

#product-search .search_term .form-control {
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    height: auto !important;
    transition: border-color 0.2s !important;
}

#product-search .search_term .form-control:focus {
    border-color: #3dd5c0 !important;
    box-shadow: 0 0 0 3px rgba(61,213,192,0.12) !important;
    outline: none !important;
}

#product-search .category_dropdown {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 1 auto !important;
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}

#product-search .category_dropdown .form-control {
    border: 2px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    height: auto !important;
    max-width: 220px !important;
    min-width: 160px !important;
}

#product-search .category_dropdown .btn-primary,
#product-search .category_dropdown #button-search {
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    height: auto !important;
}

#product-search .category_dropdown .btn-primary:hover,
#product-search .category_dropdown #button-search:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(61,213,192,0.35) !important;
}

#product-search .search_subcategory {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 0 1 auto !important;
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}

#product-search .search_subcategory .checkbox-inline {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #666 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
}

#product-search .search_subcategory input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #3dd5c0 !important;
    margin: 0 !important;
}

/* ── Search page: filter toolbar ── */
#product-search .category_filter,
body.product-search .category_filter {
    background: white !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    border: 1px solid #e8e8e8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
}

#product-search .category_filter .btn-list-grid {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}

#product-search .category_filter .btn-list-grid .btn-group {
    display: flex !important;
    gap: 0 !important;
}

#product-search .category_filter .btn-list-grid .btn {
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    color: #888 !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    transition: all 0.15s !important;
    cursor: pointer !important;
}

#product-search .category_filter .btn-list-grid .btn:first-child {
    border-radius: 8px 0 0 8px !important;
}

#product-search .category_filter .btn-list-grid .btn:last-child {
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
}

#product-search .category_filter .btn-list-grid .btn:hover,
#product-search .category_filter .btn-list-grid .btn.active {
    background: #3dd5c0 !important;
    border-color: #3dd5c0 !important;
    color: white !important;
}

#product-search .category_filter .compare-total {
    display: none !important;
}

#product-search .category_filter .pagination-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-left: auto !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}

#product-search .category_filter .sort-by-wrapper,
#product-search .category_filter .show-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    float: none !important;
}

#product-search .category_filter .sort-by-wrapper .sort-by,
#product-search .category_filter .show-wrapper .show {
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}

#product-search .category_filter .sort-by-wrapper .sort,
#product-search .category_filter .show-wrapper .limit {
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}

#product-search .category_filter label.control-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #888 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#product-search .category_filter select.form-control {
    border: 2px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    color: #333 !important;
    height: auto !important;
    min-width: 120px !important;
    background: white !important;
    cursor: pointer !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

#product-search .category_filter select.form-control:focus {
    border-color: #3dd5c0 !important;
    outline: none !important;
}

/* ── Search page: pagination ── */
#product-search .pagination,
body.product-search .pagination {
    display: flex !important;
    gap: 4px !important;
    justify-content: center !important;
    margin: 32px 0 !important;
}

/* Compare link */
#product-search .compare-total a {
    color: #3dd5c0 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
    #product-search .row > .product-layout,
    #product-search .product-layout.product-list {
        width: 33.333% !important;
    }
}

@media (max-width: 768px) {
    #product-search .row > .product-layout,
    #product-search .product-layout.product-list {
        width: 50% !important;
    }
    #product-search { padding: 0 20px 40px !important; }
}

@media (max-width: 480px) {
    #product-search .row > .product-layout,
    #product-search .product-layout.product-list {
        width: 100% !important;
    }
}

/* ── SPECIAL PAGE — same treatment ── */
body.product-special #column-left,
body.product-special #column-right,
#product-special > .row > #column-left,
#product-special > .row > aside {
    display: none !important;
}

body.product-special #content,
#product-special > .row > #content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

#product-special {
    max-width: 1400px !important;
    padding: 0 40px 60px !important;
}

#product-special > .row {
    display: block !important;
    margin: 0 !important;
}

#product-special h2.page-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
}

/* Force grid on special page too */
#product-special .row > .product-layout {
    width: 25% !important;
    float: left !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
}

#product-special .product-layout.product-list {
    width: 25% !important;
}

#product-special .product-layout.product-list .product-block-inner,
#product-special .product-layout.product-list .product-thumb {
    flex-direction: column !important;
    display: flex !important;
}

#product-special .product-layout.product-list .product-block-inner .image,
#product-special .product-layout.product-list .product-thumb .image {
    width: 100% !important;
    float: none !important;
}

#product-special .product-layout.product-list .product-block-inner .caption,
#product-special .product-layout.product-list .product-thumb .caption {
    width: 100% !important;
    float: none !important;
}

/* Same card styling */
#product-special .product-thumb {
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    border: 1px solid #f0f0f0 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

#product-special .product-thumb:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

#product-special .product-thumb .image img {
    width: 100% !important;
    aspect-ratio: 5/7 !important;
    object-fit: cover !important;
    display: block !important;
}

#product-special .product-thumb .caption { padding: 12px !important; }
#product-special .product-thumb .caption h4 { font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; margin: 0 0 6px !important; }
#product-special .product-thumb .caption h4 a { color: #1a1a1a !important; text-decoration: none !important; }
#product-special .product-thumb .caption h4 a:hover { color: #3dd5c0 !important; }
#product-special .product-thumb .price { font-size: 16px !important; font-weight: 800 !important; }
#product-special .product-thumb .price-new { color: #3dd5c0 !important; }
#product-special .product-thumb .price-old { color: #aaa !important; text-decoration: line-through !important; font-size: 13px !important; }
#product-special .product-thumb .button-group { border-top: 1px solid #f0f0f0 !important; padding: 8px 12px !important; display: flex !important; gap: 6px !important; }
#product-special .product-thumb .button-group button:first-child { background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%) !important; color: white !important; }
#product-special .category_filter { background: white !important; border-radius: 12px !important; padding: 16px 20px !important; margin-bottom: 24px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; border: 1px solid #e8e8e8 !important; }

@media (max-width: 1024px) {
    #product-special .row > .product-layout,
    #product-special .product-layout.product-list { width: 33.333% !important; }
}
@media (max-width: 768px) {
    #product-special .row > .product-layout,
    #product-special .product-layout.product-list { width: 50% !important; }
    #product-special { padding: 0 20px 40px !important; }
}
@media (max-width: 480px) {
    #product-special .row > .product-layout,
    #product-special .product-layout.product-list { width: 100% !important; }
}

/* ── Team logo image inside circle ── */
.team-logo-wrap .team-logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

/* ── Bootstrap Tab Pane ── */
.tab-pane:not(.active) {
    display: none !important;
}
.tab-pane.active,
.tab-content > .tab-pane.active,
.checklist-tab-content > .tab-pane.active {
    display: block !important;
}

/* Checklist tab content — scrollable */
.checklist-tab-content {
    max-height: 700px;
    overflow-y: auto;
    padding: 0;
}

/* ============================================
   Account sidebar inside #column-left (subpages)
   ============================================ */
#column-left .account-sidebar-nav {
    background: none !important;
    border-radius: 0 !important;
    padding: 24px !important;
    box-shadow: none !important;
}

#column-left .account-sidebar-nav .account-nav-link {
    padding: 10px 12px !important;
}

#column-left .account-sidebar-nav .account-nav-section {
    margin-bottom: 16px !important;
}

/* Hide non-account modules (e.g. Information) when account sidebar is present */
#column-left .account-sidebar-nav ~ .box {
    display: none !important;
}

/* Also hide Information box on account pages directly */
div[id^="account-"] #column-left > .box {
    display: none !important;
}

/* ============================================
   MOBILE ACCOUNT — Final overrides (must be last)
   ============================================ */
@media (max-width: 900px) {
    /* Force single column on ALL account pages */
    #account-account > .row,
    #account-edit > .row,
    #account-address > .row,
    #account-password > .row,
    #account-wishlist > .row,
    #account-order > .row,
    #account-reward > .row,
    #account-transaction > .row,
    #account-newsletter > .row,
    #account-download > .row,
    #account-return > .row,
    #account-favourite > .row,
    #account-favourite-onboarding > .row,
    div[id^="account-"] > .row,
    div[id^="account-"] > .container > .row,
    body[class*="account-"] .container > .row {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }

    /* Hide column-left on mobile on ACCOUNT pages — sidebar moved to body via JS */
    div[id^="account-"] #column-left,
    div[id^="account-"] > .row > #column-left,
    div[id^="account-"] > .row > aside#column-left,
    div[id^="account-"] .col-sm-3.hidden-xs {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Content — full width, no float, keep inner padding */
    div[id^="account-"] > .row > #content,
    div[id^="account-"] > .row > .col-sm-9,
    div[id^="account-"] > .row > .col-sm-6,
    div[id^="account-"] > .row > .col-sm-12 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding: 20px 16px !important;
    }

    /* Toggle button — full width above content */
    .account-menu-toggle {
        display: flex !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    /* Container padding */
    div[id^="account-"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Sidebar slide-out aside — fixed overlay above page */
    #column-left .account-sidebar-nav,
    .account-layout .account-sidebar-nav,
    .account-sidebar-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: white !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
        z-index: 2000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s !important;
        overflow-y: auto !important;
        padding: 16px 20px 24px !important;
        border-radius: 0 !important;
    }
    #column-left .account-sidebar-nav.aside-open,
    .account-layout .account-sidebar-nav.aside-open,
    .account-sidebar-nav.aside-open {
        transform: translateX(0) !important;
    }

    /* Overlay — above page content */
    .account-aside-overlay.active {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 1999 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ============================================
   MOBILE CATEGORY PAGES — Final optimizations
   ============================================ */
@media (max-width: 768px) {
    /* Container — tighter padding, minimal gap, prevent overflow */
    .category-container {
        padding: 0 10px !important;
        gap: 8px !important;
        margin-bottom: 40px !important;
        overflow: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Force all children to respect container width */
    .category-main {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    .category-main > * {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Category header — very compact */
    .category-header {
        padding: 12px 14px !important;
        border-radius: 10px !important;
        margin-bottom: 0 !important;
    }
    .category-header h1,
    .category-hero h1,
    .category-info h1 {
        font-size: 24px !important;
        margin: 0 !important;
    }
    /* Hide category description on mobile to save space */
    .category-description {
        display: none !important;
    }

    /* Hero section — compact */
    .category-hero {
        gap: 12px !important;
    }
    .category-hero .category-icon,
    .category-hero img.category-icon {
        width: 48px !important;
        height: 48px !important;
    }

    /* Subcategories — compact inline */
    .subcategories-section {
        padding: 10px 14px !important;
        margin-bottom: 0 !important;
    }
    .subcategory-grid {
        gap: 6px !important;
    }
    .subcategory-card {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    .subcategory-card img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Filter button — compact */
    .mobile-filters-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }

    /* Active filters bar — slim */
    .active-filters,
    .filter-active-bar {
        padding: 6px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* Sort/toolbar — single compact row */
    .products-toolbar {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        position: relative !important;
        transform: none !important;
    }
    .products-toolbar select {
        padding: 4px 8px !important;
        font-size: 16px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    .toolbar-left,
    .toolbar-right {
        gap: 6px !important;
    }
    .view-toggle .btn {
        padding: 4px 8px !important;
    }

    /* Products grid — 2 col, tight gap, contained */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Products list view — compact for mobile */
    .products-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .products-list .product-card {
        display: grid !important;
        grid-template-columns: 140px 1fr !important;
        border-radius: 10px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .products-list .product-card-image-wrap {
        width: 140px !important;
        max-width: 140px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    .products-list .product-card-image-wrap .wishlist-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
        top: 6px !important;
        right: 6px !important;
    }
    .products-list .product-card-image-wrap .product-image {
        width: 140px !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: auto !important;
    }
    .products-list .product-card-info,
    .products-list .product-info {
        padding: 10px 12px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .products-list .product-card-info *,
    .products-list .product-info * {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
    .products-list .product-card-name,
    .products-list .product-name {
        font-size: 13px !important;
        -webkit-line-clamp: 2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .products-list .price-current,
    .products-list .product-price {
        font-size: 16px !important;
    }
    .products-list .product-card-price {
        margin-bottom: 8px !important;
    }
    .products-list .add-to-cart-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    .products-list .urgency-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
        position: absolute !important;
        bottom: 6px !important;
        left: 6px !important;
        z-index: 5 !important;
    }
    /* Badges in list view info area */
    .products-list .card-badges,
    .products-list .product-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }
    .products-list .card-badge,
    .products-list .product-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
    }

    /* Product cards — compact, prevent overflow */
    .product-card {
        border-radius: 10px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .product-card-info {
        padding: 8px 10px 12px !important;
    }
    .product-card-name {
        font-size: 12px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
        height: auto !important;
        max-height: 32px !important;
        overflow: hidden !important;
    }
    .price-current {
        font-size: 15px !important;
    }
    .add-to-cart-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* Pagination — compact */
    .pagination-bar {
        flex-direction: column !important;
        gap: 6px !important;
        padding: 10px !important;
        font-size: 12px !important;
    }

    /* Category main gap */
    .category-main {
        gap: 8px !important;
    }

    /* Breadcrumb — minimal */
    .breadcrumb {
        padding: 6px 10px !important;
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }
}

@media (max-width: 480px) {
    .category-container {
        padding: 0 6px !important;
    }
    .category-header {
        padding: 10px 12px !important;
    }
    .category-header h1,
    .category-info h1 {
        font-size: 22px !important;
    }
    .products-grid {
        gap: 6px !important;
    }
    .product-card-info {
        padding: 6px 8px 10px !important;
    }
    .product-card-name {
        font-size: 11px !important;
    }
    .price-current {
        font-size: 14px !important;
    }
    .add-to-cart-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    /* List view — slightly smaller on tiny screens */
    .products-list .product-card {
        grid-template-columns: 120px 1fr !important;
    }
    .products-list .product-card-image-wrap {
        width: 120px !important;
        max-width: 120px !important;
    }
    .products-list .product-card-image-wrap .product-image {
        width: 120px !important;
    }
}

/* ============================================
   GLOBAL OVERFLOW FIX — Prevent horizontal scroll
   ============================================ */

/* Cart sidebar — use transform instead of right offset */
.cart-sidebar {
    right: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s !important;
}
.cart-sidebar.active {
    right: 0 !important;
    transform: translateX(0) !important;
}

/* Marquee — must not cause overflow */
.marquee-strip {
    overflow: hidden !important;
}

/* Global safety net */
html, body {
    overflow-x: hidden !important;
}

/* Category sidebar — ensure proper slide on mobile */
@media (max-width: 1024px) {
    .category-sidebar {
        left: -320px !important;
        transition: left 0.3s !important;
        z-index: 2500 !important;
    }
    .category-sidebar.active {
        left: 0 !important;
    }
    /* Override hidden-xs on column-left inside category sidebar */
    .category-sidebar #column-left,
    .category-sidebar #column-left.hidden-xs,
    .category-sidebar .col-sm-3.hidden-xs {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    .sidebar-overlay.active {
        z-index: 2499 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ============================================
   CATEGORY HEADER — Unified box with inline elements
   ============================================ */

/* Category icon inline with title */
.category-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.category-icon-inline {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Subcategories as inline chips inside header */
.subcategories-inline {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.subcategories-grid-inline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.subcategories-inline .subcategories-grid-inline.subcategories-2col {
    grid-template-columns: repeat(2, 1fr) !important;
}
.subcategory-chip.subcat-hidden {
    display: none !important;
}
.subcat-show-more {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    background: #f8f9fa;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.subcat-show-more:hover {
    background: #e6faf7;
    border-color: #3dd5c0;
    color: #1a7a70;
}
@media(max-width:640px) {
    .subcategories-inline .subcategories-grid-inline.subcategories-2col {
        grid-template-columns: 1fr !important;
    }
}
.subcategory-chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #f8f9fa;
    border: 1.5px solid #eee;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    text-align: left;
    line-height: 1.3;
    min-height: 52px;
}
.subcategory-chip:hover {
    background: #e6faf7;
    border-color: #3dd5c0;
    color: #1a7a70;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(61,213,192,0.15);
}
.subcategory-chip-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #eee;
    padding: 2px;
}
.subcategory-chip-initial {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3dd5c0 0%, #2ab3a1 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.subcategory-chip-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subcategory-chip-count {
    flex-shrink: 0;
    background: #e8e8e8;
    color: #555;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}
.subcategory-chip:hover .subcategory-chip-count {
    background: #3dd5c0;
    color: white;
}

/* Mobile filters button — inside category-main flow */
.mobile-filters-btn {
    display: none;
    width: 100%;
    padding: 10px 16px;
    background: white;
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s;
}
.mobile-filters-btn:hover {
    border-color: #3dd5c0;
}
@media (max-width: 768px) {
    .mobile-filters-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .category-icon-inline {
        width: 80px !important;
        height: 80px !important;
        border-radius: 12px !important;
    }
    .category-title-row {
        gap: 10px !important;
    }
    .subcategories-inline {
        margin-top: 14px !important;
        padding-top: 14px !important;
    }
    .subcategories-grid-inline {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .subcategory-chip {
        padding: 10px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    .subcategory-chip-img {
        width: 28px !important;
        height: 28px !important;
    }
    .subcategory-chip-initial {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    /* Hide results count in toolbar on mobile — shown in pagination below */
    .products-toolbar .results-count {
        display: none !important;
    }
    /* Category sidebar — force open on mobile */
    .category-sidebar {
        z-index: 2500 !important;
        left: -320px !important;
        transition: left 0.3s !important;
    }
    .category-sidebar.active {
        z-index: 2500 !important;
        left: 0 !important;
    }
    /* Column-left must be visible inside category sidebar */
    .category-sidebar #column-left,
    .category-sidebar #column-left.hidden-xs,
    .category-sidebar .hidden-xs {
        display: block !important;
        width: 100% !important;
    }
    .sidebar-overlay.active {
        z-index: 2499 !important;
    }
}

/* ============================================
   ENTITY HERO — Polished Mobile Layout (Player + Team)
   ============================================ */
@media (max-width: 768px) {
    /* Hero grid — single column, centered */
    .category-hero {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .category-info {
        text-align: center !important;
    }
    .category-info h1 {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }

    /* Show description on mobile (override the hide) — clamped to 3 lines */
    .category-description {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #888 !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }

    /* CTA row centered */
    .entity-cta-row {
        justify-content: center !important;
        gap: 10px !important;
    }
    .fav-toggle-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    .entity-product-count {
        font-size: 12px !important;
    }

    /* ── Team logo in hero — bigger + centered ── */
    .team-logo-wrap--hero {
        width: 110px !important;
        height: 110px !important;
        margin: 0 auto !important;
        padding: 10px !important;
    }
    .team-logo-wrap--hero .team-logo,
    .team-logo-wrap--hero img {
        width: 100% !important;
        height: 100% !important;
    }

    /* ── Player photo in hero — slightly smaller + centered ── */
    .player-photo-wrap {
        width: 110px !important;
        height: 110px !important;
        margin: 0 auto !important;
    }
    .player-photo {
        width: 110px !important;
        height: 110px !important;
        border-width: 3px !important;
    }
    .player-nationality-flag {
        width: 26px !important;
        height: 26px !important;
        font-size: 14px !important;
        bottom: 2px !important;
        right: 2px !important;
    }
}

/* ============================================
   BLOG LISTING PAGE
   ============================================ */
.blog-listing-container {
    max-width: 1400px;
    margin: 0 auto 80px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.blog-listing-container.blog-listing-no-sidebar {
    grid-template-columns: 1fr;
}

.blog-listing-main {
    min-width: 0;
}

.blog-listing-header {
    margin-bottom: 32px;
}

.blog-listing-header h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.3;
}

.blog-listing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blog-listing-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-listing-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}

.blog-listing-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0f0f0;
}

.blog-listing-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.blog-listing-card:hover .blog-listing-thumb img {
    transform: scale(1.04);
}

.blog-listing-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.blog-listing-date {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-listing-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    font-weight: 650;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0;
}

.blog-listing-excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-listing-readmore {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #3dd5c0;
    margin-top: auto;
    padding-top: 6px;
    transition: color 0.2s;
}

.blog-listing-card:hover .blog-listing-readmore {
    color: #2bb5a3;
}

.blog-listing-empty {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #888;
    text-align: center;
    padding: 60px 20px;
}

/* Blog listing — tablet */
@media (max-width: 991px) {
    .blog-listing-container {
        grid-template-columns: 1fr;
        padding: 0 24px;
        gap: 24px;
    }
    .blog-listing-container .category-sidebar {
        position: static;
    }
    .blog-listing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .blog-listing-header h1 {
        font-size: 24px;
    }
}

/* Blog listing — mobile */
@media (max-width: 600px) {
    .blog-listing-container {
        padding: 0 16px;
        margin-bottom: 48px;
    }
    .blog-listing-header {
        margin-bottom: 20px;
    }
    .blog-listing-header h1 {
        font-size: 21px;
    }
    .blog-listing-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .blog-listing-body {
        padding: 16px 16px 18px;
    }
    .blog-listing-title {
        font-size: 16px;
    }
    .blog-listing-excerpt {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }
}

/* Hide "Dále nakupovat" button on mobile */
@media (max-width: 767px) {
    .cart-btn-back {
        display: none !important;
    }
}

/* ==============================================
   FIX: Mobile tabs + arrows — keep in one row
   ============================================== */
@media (max-width: 767px) {
    .products-section-header {
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 0 !important;
        justify-content: space-between !important;
    }
    .products-tabs {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .products-section-header > div:last-child {
        flex-shrink: 0 !important;
        padding-bottom: 8px !important;
    }
    .view-all-link {
        display: none !important;
    }
}

/* ============================================
   HP CHECKLIST CAROUSEL
   ============================================ */
.hp-checklists-section {
    background: transparent;
    border: none;
    padding: 8px 0 24px;
    margin: 0;
}

.hp-checklists-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

.hp-checklists-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

.hp-checklists-title {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.02em;
}

.hp-checklists-subtitle {
    font-size: 14px;
    color: #999;
    font-weight: 400;
}

.hp-checklists-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;
    padding: 8px;
}

.hp-checklists-scroll::-webkit-scrollbar { display: none; }

.hp-checklists-track {
    display: flex;
    gap: 16px;
    width: max-content;
}

.hp-cl-card {
    flex-shrink: 0;
    width: 240px;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #1a1a1a;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    transition: transform 0.25s, box-shadow 0.25s;
}

.hp-cl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.hp-cl-img {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: #eee;
}

.hp-cl-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-cl-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: #f0fdfb;
}

.hp-cl-info {
    padding: 14px 16px 16px;
}

.hp-cl-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-cl-meta {
    display: block;
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

.hp-checklists-arrows {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
}

.hp-cl-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.2s;
}

.hp-cl-arrow:hover {
    border-color: #3dd5c0;
    color: #3dd5c0;
}

/* Responsive */
@media (max-width: 768px) {
    .hp-checklists-section { padding: 4px 0 16px; }
    .hp-checklists-inner { padding: 0 16px; }
    .hp-checklists-header { flex-direction: column; gap: 4px; margin-bottom: 16px; }
    .hp-checklists-title { font-size: 22px; }
    .hp-cl-card { width: 200px; }
    .hp-cl-img { height: 110px; }
    .hp-cl-info { padding: 10px 12px 12px; }
    .hp-cl-name { font-size: 12px; }
}


/* ── Player search bar ── */
.player-search-wrap { position: relative; margin-top: 12px; max-width: 520px; }
.player-search-input-wrap { position: relative; display: flex; align-items: center; }
.player-search-input {
    width: 100%;
    padding: 10px 40px 10px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 24px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    background: white;
    box-sizing: border-box;
}
.player-search-input:focus { border-color: #3dd5c0; }
.player-search-icon { position: absolute; right: 14px; font-size: 16px; color: #888; pointer-events: none; }
.player-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 200;
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}
.player-search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    text-decoration: none;
    color: #1a1a1a;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}
.player-search-result-item:last-child { border-bottom: none; }
.player-search-result-item:hover { background: #f0fdfb; }
.player-search-result-name { font-weight: 600; font-size: 14px; }
.player-search-result-sport { font-size: 12px; color: #888; margin-left: 8px; }
.player-search-no-results { padding: 12px 16px; color: #888; font-size: 14px; }

/* ── Player letter / name row (below search box) ── */
.player-letters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.player-letter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: #f0fdfb;
    color: #1a7a70;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    border: 1px solid #c8ede9;
    box-sizing: border-box;
}
.player-letter-chip:hover {
    background: #3dd5c0;
    border-color: #3dd5c0;
    color: white;
}
.player-letter-chip.chip-hidden {
    display: none !important;
}
.player-show-more-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 20px;
    background: #f0fdfb;
    border: 1.5px solid #3dd5c0;
    border-radius: 20px;
    color: #1a7a70;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
}
.player-show-more-btn:hover {
    background: #3dd5c0;
    color: white;
}

/* ── Sale end date in specials card ── */
.bc-sale-end-date {
    font-size: 11px;
    color: #e05a7a;
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 4px;
}

/* ── Top bar: bold text items ── */
.top-bar-left > *,
.top-bar-right > *,
.top-bar .account-link,
.top-bar .language-selector,
.top-bar .currency-selector {
    font-weight: 700;
}
.top-bar .account-link,
.top-bar a { font-weight: 700; }

/* ── Gamification bar: mobile full-width & shorter ── */
@media (max-width: 767px) {
    .gamif-bar {
        margin: 0 0 12px 0;
        padding: 10px 14px;
        border-radius: 8px;
    }
    .gamif-top {
        margin-bottom: 6px;
    }
    .gamif-text { font-size: 13px; }
    .gamif-reward { font-size: 12px; }
    .gamif-progress-track { height: 8px; }
    .gamif-labels { font-size: 10px; }
}

div.category_cms.bottom-to-top { display: none !important; }

/* Trust strip order - zobrazit pred Oblibenymi kategoriemi */
.content-top { display: flex; flex-direction: column; }
.content-top .hero-slider { order: 1; }
.content-top .trust-strip { order: 2; }
.content-top .categories-section { order: 3; }
.content-top .category_cms { order: 4; }


/* Hide QuickStore default TOP button - replaced by back-to-top */
.top_button { display: none !important; }


/* Remove line between trust strip and banners */
.trust-strip { border-bottom: none !important; }
.content-top { border-bottom: none !important; border-top: none !important; }