/**
 * SecretBasar v5.0 — Hell, Clean & Modern
 * Accent: #B11D58 | BG: #FFFFFF/#FAF7F8 | Text: #1A1A1A
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── Variables ───────────────────────────────────────────────── */
:root {
    --sb-accent:       #B11D58;
    --sb-accent-dark:  #8e164a;
    --sb-accent-light: #f8e8ef;
    --sb-bg:           #FFFFFF;
    --sb-bg-soft:      #FAF7F8;
    --sb-bg-muted:     #F3F0F2;
    --sb-text:         #1A1A1A;
    --sb-text-soft:    #555;
    --sb-text-muted:   #888;
    --sb-border:       #ECEAEB;
    --sb-shadow:       0 2px 12px rgba(0,0,0,.07);
    --sb-shadow-hover: 0 6px 24px rgba(0,0,0,.13);
    --sb-radius:       10px;
    --sb-radius-sm:    6px;
    --sb-font:         'Inter', 'Open Sans', sans-serif;
}

/* ─── Base ────────────────────────────────────────────────────── */
body { font-family: var(--sb-font) !important; background: var(--sb-bg) !important; color: var(--sb-text) !important; }
h1,h2,h3,h4 { font-family: var(--sb-font) !important; }
a { color: var(--sb-accent); text-decoration: none; }
a:hover { color: var(--sb-accent-dark); }
::selection { background: var(--sb-accent-light); color: var(--sb-accent-dark); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--sb-bg-soft); }
::-webkit-scrollbar-thumb { background: #d4ced1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-accent); }

/* ─── Header ElCapitan — Top Bar ──────────────────────────────── */
.Header_ElCapitan .HeaderTop {
    background: var(--sb-bg) !important;
    box-shadow: 0 1px 0 var(--sb-border) !important;
}

/* Make Center a flex row so logo | slogan | right are always in one line */
.Header_ElCapitan .HeaderTop .Center {
    width: auto !important;
    max-width: 1240px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.Header_ElCapitan .HeaderSearchBar .Center {
    width: auto !important;
    max-width: 1240px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* Hide the H2 — redundant, clutters the header */
.Header_ElCapitan .HeaderTop h2 {
    display: none !important;
}

/* Logo */
.Header_ElCapitan .HeaderTop .Center .HeaderTopLogo {
    padding: 10px 0 10px 0 !important;
    flex-shrink: 0 !important;
    float: none !important;
}
.Header_ElCapitan .HeaderTop .Center .HeaderTopLogo img {
    max-height: 46px !important;
}

/* Slogan — fills the space between logo and right section */
.Header_ElCapitan .HeaderTop .Center .HeaderTopSlogan {
    flex: 1 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--sb-text-muted) !important;
    font-family: var(--sb-font) !important;
    border-left: 1px solid var(--sb-border) !important;
    line-height: normal !important;
    padding: 0 24px !important;
    font-style: italic !important;
    float: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Right section — push to far right naturally via flex */
.Header_ElCapitan .HeaderTop .Center .HeaderTopRightLayout {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* Create button */
.Header_ElCapitan .HeaderTop .Center .HeaderTopRightLayout .RightLayoutCreateButton {
    line-height: normal !important;
    float: none !important;
}
.Header_ElCapitan .HeaderTop .Center .HeaderTopRightLayout .RightLayoutCreateButton .CreateButton {
    background: var(--sb-accent) !important;
    color: #fff !important;
    border-radius: 30px !important;
    padding: 9px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--sb-font) !important;
    box-shadow: 0 2px 10px rgba(177,29,88,.28) !important;
    transition: background .2s, box-shadow .2s, transform .15s !important;
    line-height: normal !important;
}
.Header_ElCapitan .HeaderTop .Center .HeaderTopRightLayout .RightLayoutCreateButton .CreateButton:hover {
    background: var(--sb-accent-dark) !important;
    box-shadow: 0 4px 16px rgba(177,29,88,.38) !important;
    transform: translateY(-1px) !important;
}

/* User/Avatar area */
.Header_ElCapitan .HeaderTop .Center .HeaderTopRightLayout .RightLayout {
    padding-right: 16px !important;
}
.Header_ElCapitan .HeaderTop .Center .HeaderTopRightLayout .RightLayout .HeaderUserView .UserViewIcon {
    width: 40px !important;
    height: 40px !important;
    border: 2px solid var(--sb-border) !important;
    background-color: var(--sb-bg-muted) !important;
}
.Header_ElCapitan .HeaderTop .Center .HeaderTopRightLayout .RightLayout .HeaderUserView:hover .UserViewDown {
    color: var(--sb-accent) !important;
}
.Header_ElCapitan .HeaderTop .Center .HeaderTopRightLayout .RightLayout .HeaderUserView .UserViewDown {
    color: var(--sb-text-muted) !important;
    font-family: var(--sb-font) !important;
    font-size: 13px !important;
}

/* Messages notification button */
.Header_ElCapitan .Notification-ChatMessage .Notification-ChatMessageButton {
    background: var(--sb-accent) !important;
    border-color: var(--sb-accent) !important;
    border-radius: 20px !important;
    font-family: var(--sb-font) !important;
    font-size: 13px !important;
}

/* User dropdown menu */
.userMenuLayout {
    border-radius: var(--sb-radius) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
    border: 1px solid var(--sb-border) !important;
    background: var(--sb-bg) !important;
    overflow: hidden !important;
}
.userMenuLayout ul.listenerUserMenu { padding: 6px 0 !important; }
.userMenuLayout ul.listenerUserMenu li { list-style: none !important; }
.userMenuLayout ul.listenerUserMenu li a {
    display: block !important;
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    color: var(--sb-text) !important;
    font-family: var(--sb-font) !important;
    transition: background .15s !important;
}
.userMenuLayout ul.listenerUserMenu li a:hover { background: var(--sb-bg-muted) !important; color: var(--sb-accent) !important; }
.userMenuLayout ul.listenerUserMenu li.baseLine span { display: block !important; height: 1px !important; background: var(--sb-border) !important; margin: 4px 0 !important; }

/* ─── Header — Search Bar ─────────────────────────────────────── */
.Header_ElCapitan .HeaderSearchBar {
    background: var(--sb-bg-soft) !important;
    border-bottom: 1px solid var(--sb-border) !important;
}

.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout {
    padding: 18px 0 !important;
    gap: 12px !important;
    align-items: center !important;
}

/* Keyword box */
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCategoryQuery {
    background: var(--sb-bg) !important;
    border: 1.5px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    overflow: visible !important;
    width: 40% !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCategoryQuery:focus-within {
    border-color: var(--sb-accent) !important;
    box-shadow: 0 0 0 3px rgba(177,29,88,.1) !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCategoryQuery .SearchBarCategoryQueryLeft input {
    font-family: var(--sb-font) !important;
    font-size: 14px !important;
    color: var(--sb-text) !important;
    border-radius: var(--sb-radius-sm) 0 0 var(--sb-radius-sm) !important;
    border: none !important;
    height: 44px !important;
    padding: 0 14px !important;
    background: transparent !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCategoryQuery .SearchBarCategoryQueryRight {
    background: var(--sb-bg-muted) !important;
    border-left: 1px solid var(--sb-border) !important;
    border-radius: 0 var(--sb-radius-sm) var(--sb-radius-sm) 0 !important;
    width: 38% !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCategoryQuery .SearchBarCategoryQueryRight select.Beta {
    background-color: transparent !important;
    font-family: var(--sb-font) !important;
    font-size: 13px !important;
    color: var(--sb-text-soft) !important;
    height: 44px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 10px !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCategoryQuery .SearchBarCategoryQueryRight select.Beta:focus,
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCategoryQuery .SearchBarCategoryQueryRight select.Beta:hover {
    box-shadow: none !important;
}

/* City/radius box */
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCity {
    background: var(--sb-bg) !important;
    border: 1.5px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
    box-shadow: none !important;
    transition: border-color .2s !important;
    width: calc(40% - 20px) !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCity:focus-within {
    border-color: var(--sb-accent) !important;
    box-shadow: 0 0 0 3px rgba(177,29,88,.1) !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCity .SearchBarCategoryQueryLeft input {
    font-family: var(--sb-font) !important;
    font-size: 14px !important;
    color: var(--sb-text) !important;
    border: none !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: var(--sb-radius-sm) 0 0 var(--sb-radius-sm) !important;
    background: transparent !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCity .SearchBarCategoryQueryRight {
    background: var(--sb-bg-muted) !important;
    border-left: 1px solid var(--sb-border) !important;
    border-radius: 0 var(--sb-radius-sm) var(--sb-radius-sm) 0 !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCity .SearchBarCategoryQueryRight select.Beta {
    background-color: transparent !important;
    font-family: var(--sb-font) !important;
    font-size: 13px !important;
    color: var(--sb-text-soft) !important;
    height: 44px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 10px !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCity .SearchBarCategoryQueryRight select.Beta:focus,
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCity .SearchBarCategoryQueryRight select.Beta:hover {
    box-shadow: none !important;
}

/* Search submit button */
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarSubmit {
    background: var(--sb-accent) !important;
    border-radius: var(--sb-radius-sm) !important;
    width: auto !important;
    min-width: 120px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 10px rgba(177,29,88,.28) !important;
    transition: background .2s, transform .15s !important;
    margin-left: 4px !important;
    float: none !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarSubmit:hover {
    background: var(--sb-accent-dark) !important;
    transform: translateY(-1px) !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarSubmit span:nth-child(1) {
    width: auto !important;
    line-height: normal !important;
    text-align: center !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarSubmit span:nth-child(1) img {
    filter: brightness(0) invert(1) !important;
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle !important;
}
.Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarSubmit span:nth-child(2) {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    font-family: var(--sb-font) !important;
    line-height: normal !important;
    width: auto !important;
    padding: 0 !important;
}

/* ─── Main Layout ─────────────────────────────────────────────── */
.MainLayout { background: var(--sb-bg-soft) !important; }

.ViewLayout.addPadding-20 {
    max-width: 1240px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 28px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    gap: 24px !important;
}

/* Sidebar */
.ViewLayout .ViewMenu {
    width: 230px !important;
    flex-shrink: 0 !important;
    float: none !important;
}
.ViewLayout .ViewMenu .MenuListener {
    background: var(--sb-bg) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius) !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    box-shadow: var(--sb-shadow) !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li {
    border-bottom: 1px solid var(--sb-border) !important;
    float: none !important;
    width: 100% !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li:last-child { border-bottom: none !important; }
.ViewLayout .ViewMenu .MenuListener ul.list li span.title {
    display: block !important;
    padding: 11px 16px 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--sb-text-muted) !important;
    background: var(--sb-bg-soft) !important;
    font-family: var(--sb-font) !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 16px !important;
    font-size: 13.5px !important;
    color: var(--sb-text) !important;
    font-family: var(--sb-font) !important;
    transition: background .15s, color .15s !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li a:hover {
    background: var(--sb-accent-light) !important;
    color: var(--sb-accent) !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li .right {
    float: none !important;
    margin-left: auto !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li .right a {
    font-size: 12px !important;
    color: var(--sb-accent) !important;
    padding: 4px 0 !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li > span:last-child:not(.title) {
    font-size: 12px !important;
    color: var(--sb-text-muted) !important;
    float: right !important;
}

/* Content area */
.ViewLayout .ViewContent {
    flex: 1 !important;
    float: none !important;
    min-width: 0 !important;
}

/* ─── H1 on homepage ──────────────────────────────────────────── */
.ViewLayout .ViewContent h1 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--sb-text) !important;
    margin: 0 0 20px !important;
    font-family: var(--sb-font) !important;
}

/* ─── Section titles ──────────────────────────────────────────── */
.Box-Title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 12px !important;
    margin-bottom: 0 !important;
    border-bottom: 2px solid var(--sb-accent) !important;
}
.Box-Title span:first-child {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--sb-text) !important;
    font-family: var(--sb-font) !important;
}
.Box-Title span:last-child a {
    font-size: 13px !important;
    color: var(--sb-accent) !important;
    font-weight: 500 !important;
}
.Box-Title span:last-child a:hover { text-decoration: underline !important; }

/* ─── Content sections ────────────────────────────────────────── */
.ContentNewProducts,
.ContentTopProducts {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 32px !important;
}
.ContentTopProducts.bg-yellow,
.ContentTopProducts.Grey {
    background: transparent !important;
    border: none !important;
}
.ContentNewProducts .Box-Content,
.ContentTopProducts .Box-Content {
    margin-top: 16px !important;
}

/* ─── Product Card Grid ───────────────────────────────────────── */
.ContentNewProducts .Box-Content ul.Listener,
.ContentTopProducts .Box-Content ul.Listener {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important;
    gap: 16px !important;
    float: none !important;
    width: 100% !important;
}
.ContentNewProducts .Box-Content ul.Listener li,
.ContentTopProducts .Box-Content ul.Listener li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    display: flex !important;
}

.Box-Layout {
    background: var(--sb-bg) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow .2s, transform .2s !important;
    cursor: pointer !important;
    width: 100% !important;
    float: none !important;
}
.Box-Layout:hover {
    box-shadow: var(--sb-shadow-hover) !important;
    transform: translateY(-3px) !important;
}

/* Card image wrapper */
.Box-Layout > span:first-child { display: block !important; float: none !important; width: 100% !important; }
.Box-Layout > span:first-child > div:first-child {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    background: var(--sb-bg-muted) !important;
}
.Box-Layout > span:first-child > div:first-child a { display: block !important; width: 100% !important; height: 100% !important; }
.Box-Layout > span:first-child > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .3s !important;
    display: block !important;
    float: none !important;
}
.Box-Layout:hover > span:first-child > div:first-child img { transform: scale(1.04) !important; }

/* Price / badge row */
.Box-Layout > span:first-child > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px 4px !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.Box-Layout > span:first-child > div:last-child span {
    color: var(--sb-accent) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.Box-Layout > span:first-child > div:last-child i {
    font-style: normal !important;
    font-size: 11px !important;
    background: var(--sb-accent) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 2px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.Box-Layout > span:first-child > div:last-child i img { height: 10px !important; width: auto !important; filter: brightness(0) invert(1) !important; }

/* Card title */
.Box-Layout > span:nth-child(2) {
    padding: 2px 10px 4px !important;
    float: none !important;
    display: block !important;
}
.Box-Layout > span:nth-child(2) a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sb-text) !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-family: var(--sb-font) !important;
}
.Box-Layout > span:nth-child(2) a:hover { color: var(--sb-accent) !important; }

/* Card location */
.Box-Layout > span:nth-child(3) {
    padding: 0 10px 4px !important;
    float: none !important;
    display: block !important;
    font-size: 11.5px !important;
    color: var(--sb-text-muted) !important;
}

/* Card category */
.Box-Layout > span:nth-child(4) {
    padding: 0 10px 10px !important;
    float: none !important;
    display: block !important;
    margin-top: auto !important;
}
.Box-Layout > span:nth-child(4) a {
    color: var(--sb-text-muted) !important;
    background: var(--sb-bg-muted) !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    display: inline-block !important;
}
.Box-Layout > span:nth-child(4) a:hover { background: var(--sb-accent-light) !important; color: var(--sb-accent) !important; }

/* ─── Block title ─────────────────────────────────────────────── */
.block-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--sb-text-muted) !important;
    padding: 11px 16px 9px !important;
    background: var(--sb-bg-soft) !important;
    border-bottom: 1px solid var(--sb-border) !important;
    font-family: var(--sb-font) !important;
}

/* ─── Mobile category slider ──────────────────────────────────── */
.CategoryListViewItemImage { border-radius: var(--sb-radius-sm) !important; border: 1px solid var(--sb-border) !important; background-color: var(--sb-bg-muted) !important; }
.CategoryListViewItemText { color: var(--sb-text-soft) !important; font-size: 12px !important; font-family: var(--sb-font) !important; margin-top: 4px !important; }

/* ─── Footer ──────────────────────────────────────────────────── */
.TableLayout {
    background: var(--sb-bg) !important;
    border-top: 1px solid var(--sb-border) !important;
    font-family: var(--sb-font) !important;
}
.TableLayout .View { max-width: 1240px !important; width: auto !important; padding: 0 24px !important; box-sizing: border-box !important; }
.FooterLayout { display: flex !important; gap: 40px !important; padding: 36px 0 28px !important; float: none !important; }
.FooterLayoutCompanyInfo { flex: 1 !important; min-width: 180px !important; float: none !important; width: auto !important; }
.FooterLayoutCompanyLinks { display: flex !important; gap: 28px !important; float: none !important; width: auto !important; }
.FooterLinkBlock { min-width: 130px !important; }
.FooterEndLayout {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--sb-border) !important;
    font-size: 13px !important;
    color: var(--sb-text-muted) !important;
    float: none !important;
}
.FooterEndLayoutLeft b { font-size: 13px !important; color: var(--sb-text-soft) !important; font-family: var(--sb-font) !important; }

/* ─── Buttons ─────────────────────────────────────────────────── */
.submitMiddleBlue, .submitMiddleGreen,
input[type=submit].submitMiddleBlue, input[type=submit].submitMiddleGreen {
    background: var(--sb-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--sb-font) !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: background .2s !important;
}
.submitMiddleBlue:hover, .submitMiddleGreen:hover { background: var(--sb-accent-dark) !important; }

.btn--lime { background: var(--sb-accent) !important; color: #fff !important; border-color: var(--sb-accent) !important; }
.btn--lime:hover, .btn--lime:focus { background: var(--sb-accent-dark) !important; border-color: var(--sb-accent-dark) !important; }
.btn--white { background: var(--sb-bg) !important; color: var(--sb-text-soft) !important; }
.btn--white:hover, .btn--white:focus { color: var(--sb-accent) !important; }
.btn--white:hover:before, .btn--white:focus:before { border-color: var(--sb-accent) !important; }

/* ─── Inputs ──────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=number], textarea {
    font-family: var(--sb-font) !important;
    border-radius: var(--sb-radius-sm) !important;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=number]:focus, textarea:focus {
    border-color: var(--sb-accent) !important;
    box-shadow: 0 0 0 3px rgba(177,29,88,.1) !important;
    outline: none !important;
}

/* ─── Announcement banner ─────────────────────────────────────── */
.HomeAnnouncement--info { background: #eef6ff !important; color: #1e40af !important; border-bottom-color: #bfdbfe !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — max-width 768px
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {

    /* Mobile header is hidden by theme_big — use mobile.css layout */
    /* Ensure mobile layout has correct font + colors */
    .MobileHeader,
    .mobileHeaderLayout,
    .MobileTopBar {
        font-family: var(--sb-font) !important;
        background: var(--sb-bg) !important;
    }

    /* Mobile main layout: single column, no sidebar */
    .ViewLayout.addPadding-20 {
        flex-direction: column !important;
        padding: 16px 12px !important;
        gap: 16px !important;
    }
    .ViewLayout .ViewMenu {
        width: 100% !important;
        display: none !important; /* hidden on mobile — category slider used instead */
    }
    .ViewLayout .ViewContent {
        width: 100% !important;
    }

    /* Product grid: 2 columns on mobile */
    .ContentNewProducts .Box-Content ul.Listener,
    .ContentTopProducts .Box-Content ul.Listener {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Smaller card text on mobile */
    .Box-Layout > span:nth-child(2) a { font-size: 12px !important; }
    .Box-Layout > span:nth-child(3) { font-size: 11px !important; }

    /* Full-width search bar */
    .Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 0 !important;
    }
    .Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCategoryQuery,
    .Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarCity {
        width: 100% !important;
    }
    .Header_ElCapitan .HeaderSearchBar .Center .SearchBarLayout .SearchBarSubmit {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Footer: single column */
    .FooterLayout {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 24px 0 16px !important;
    }
    .FooterLayoutCompanyLinks {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .FooterEndLayout {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Box-Title on mobile */
    .Box-Title span:first-child { font-size: 14px !important; }

    /* Mobile category slider text */
    .CategoryListViewItemText { font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — max-width 480px (small phones)
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 480px) {
    .ContentNewProducts .Box-Content ul.Listener,
    .ContentTopProducts .Box-Content ul.Listener {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .ViewLayout.addPadding-20 {
        padding: 12px 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET — 769px–1024px
   ═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .ViewLayout.addPadding-20 {
        padding: 20px 16px !important;
    }
    .ViewLayout .ViewMenu {
        width: 190px !important;
    }
    .ContentNewProducts .Box-Content ul.Listener,
    .ContentTopProducts .Box-Content ul.Listener {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }
    .Header_ElCapitan .HeaderTop .Center,
    .Header_ElCapitan .HeaderSearchBar .Center {
        padding: 0 16px !important;
    }
    .Header_ElCapitan .HeaderTop .Center .HeaderTopSlogan {
        display: none !important; /* hide slogan on tablet to save space */
    }
}

/* ═══════════════════════════════════════════════════════════════
   v5.0 PATCH — Sidebar links, specificity fixes
   ═══════════════════════════════════════════════════════════════ */

/* Kill ALL orange/blue link colors from old Kogao CSS in sidebar */
.ViewLayout .ViewMenu a,
.ViewLayout .ViewMenu a:link,
.ViewLayout .ViewMenu a:visited {
    color: var(--sb-text) !important;
}
.ViewLayout .ViewMenu a:hover {
    color: var(--sb-accent) !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li span.right a,
.ViewLayout .ViewMenu .MenuListener ul.list li span.right a:link {
    color: var(--sb-accent) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Sub-category items (indented links) */
.ViewLayout .ViewMenu .MenuListener ul.list li a {
    color: var(--sb-text) !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    display: block !important;
    transition: background .15s, color .15s, padding-left .15s !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li a:hover {
    background: var(--sb-accent-light) !important;
    color: var(--sb-accent) !important;
    padding-left: 20px !important;
}

/* Category group title (bold headers like "Getragene Wäsche") */
.ViewLayout .ViewMenu .MenuListener ul.list li > b,
.ViewLayout .ViewMenu .MenuListener ul.list li > strong {
    display: block !important;
    padding: 10px 16px 4px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--sb-text) !important;
    font-family: var(--sb-font) !important;
}

/* "alle anzeigen" right link */
.ViewLayout .ViewMenu .MenuListener ul.list li .right {
    float: right !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li .right a {
    padding: 11px 16px !important;
    font-size: 12px !important;
    color: var(--sb-accent) !important;
    display: inline-block !important;
}

/* Subcategory container inside each <li> */
.ViewLayout .ViewMenu .MenuListener ul.list li > span:not(.title):not(.right) {
    display: block !important;
    float: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Individual subcategory links (.category_list) */
.ViewLayout .ViewMenu .MenuListener ul.list li .category_list {
    display: block !important;
    float: none !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li .category_list a {
    display: block !important;
    padding: 5px 16px 5px 26px !important;
    font-size: 12.5px !important;
    color: var(--sb-text-muted) !important;
    border-bottom: none !important;
    background: transparent !important;
    position: relative !important;
    transition: color .15s, padding-left .15s !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li .category_list a::before {
    content: '›' !important;
    position: absolute !important;
    left: 14px !important;
    color: var(--sb-border) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    transition: color .15s !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li .category_list a:hover {
    color: var(--sb-accent) !important;
    background: var(--sb-accent-light) !important;
    padding-left: 30px !important;
}
.ViewLayout .ViewMenu .MenuListener ul.list li .category_list a:hover::before {
    color: var(--sb-accent) !important;
}

/* General link reset — prevent old CSS colors bleeding through */
.ViewContent a { color: inherit; }
.ViewContent a:hover { color: var(--sb-accent) !important; }
.Box-Title a { color: var(--sb-accent) !important; }

/* Card title links explicitly black */
.Box-Layout > span:nth-child(2) a,
.Box-Layout > span:nth-child(2) a:link,
.Box-Layout > span:nth-child(2) a:visited {
    color: var(--sb-text) !important;
}
.Box-Layout > span:nth-child(2) a:hover {
    color: var(--sb-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   KATEGORIE-BILDGITTER — Desktop + Mobile
   Slick-Slider wird per CSS neutralisiert
   ═══════════════════════════════════════════════════════════════ */

/* Show on ALL screen sizes */
.CategoryListenerMobile,
.ViewContent .MobileVisible.CategoryListenerMobile,
.ViewContent .CategoryListenerMobile {
    display: block !important;
    margin-bottom: 28px !important;
}

/* ── Slick neutralisieren: Container ── */
.CategoryListenerMobile .slick-slider,
.CategoryListenerMobile .CategoryListView,
.CategoryListenerMobile .CategoryListView.slick-initialized {
    display: block !important;
}
.CategoryListenerMobile .slick-list,
.CategoryListenerMobile .slick-list.draggable {
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
}

/* ── Slick Track → CSS Grid ── */
.CategoryListenerMobile .slick-track {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ── Slides → normale Grid-Zellen ── */
.CategoryListenerMobile .slick-slide,
.CategoryListenerMobile .CategoryListView .slick-slide {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.CategoryListenerMobile .slick-slide > div {
    height: 100% !important;
}

/* Slick-Pfeile + Dots verstecken */
.CategoryListenerMobile .slick-arrow,
.CategoryListenerMobile .slick-dots { display: none !important; }

/* ── Kategorie-Kachel ── */
.CategoryListenerMobile .CategoryListViewItem {
    display: block !important;
    float: none !important;
    width: auto !important;
    height: 100% !important;
}
.CategoryListenerMobile .CategoryListViewItem a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 14px 8px 12px !important;
    background: var(--sb-bg) !important;
    border: 1.5px solid var(--sb-border) !important;
    border-radius: var(--sb-radius) !important;
    transition: border-color .2s, box-shadow .2s, transform .2s !important;
    height: 100% !important;
    box-sizing: border-box !important;
}
.CategoryListenerMobile .CategoryListViewItem a:hover {
    border-color: var(--sb-accent) !important;
    box-shadow: 0 4px 16px rgba(177,29,88,.15) !important;
    transform: translateY(-3px) !important;
}

/* Kategorie-Icon */
.CategoryListenerMobile .CategoryListViewItemImage {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: var(--sb-accent-light) !important;
    background-size: 38px !important;
    background-position: center !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
    transition: background-color .2s !important;
}
.CategoryListenerMobile .CategoryListViewItem a:hover .CategoryListViewItemImage {
    background-color: #edc8d6 !important;
}

/* Kategorie-Label */
.CategoryListenerMobile .CategoryListViewItemText {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--sb-text) !important;
    font-family: var(--sb-font) !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    transition: color .2s !important;
}
.CategoryListenerMobile .CategoryListViewItem a:hover .CategoryListViewItemText {
    color: var(--sb-accent) !important;
}
.CategoryListenerMobile .CategoryListViewItem a:hover {
    border-color: var(--sb-accent) !important;
    box-shadow: 0 4px 16px rgba(177,29,88,.15) !important;
    transform: translateY(-3px) !important;
}

/* Category image */
.CategoryListenerMobile .CategoryListViewItemImage {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: var(--sb-accent-light) !important;
    background-size: 36px !important;
    background-position: center !important;
    margin-bottom: 8px !important;
    transition: background-color .2s !important;
    flex-shrink: 0 !important;
}
.CategoryListenerMobile .CategoryListViewItem a:hover .CategoryListViewItemImage {
    background-color: #f0c8d8 !important;
}

/* Category label */
.CategoryListenerMobile .CategoryListViewItemText {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--sb-text) !important;
    font-family: var(--sb-font) !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    transition: color .2s !important;
}
.CategoryListenerMobile .CategoryListViewItem a:hover .CategoryListViewItemText {
    color: var(--sb-accent) !important;
}

/* ─── Sidebar: tighter layout, main cat as bold row ──────────── */
.ViewLayout .ViewMenu .MenuListener ul.list li {
    padding-bottom: 0 !important;
}
/* Main category <a> — bold, black, full border-bottom */
.ViewLayout .ViewMenu .MenuListener ul.list li > a:first-of-type {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--sb-text) !important;
    padding: 10px 16px 8px !important;
    border-bottom: 1px solid transparent !important;
}
/* Separator after subcategory block */
.ViewLayout .ViewMenu .MenuListener ul.list li {
    border-bottom: 1px solid var(--sb-border) !important;
}

/* ─── Hero H1 styling ─────────────────────────────────────────── */
.ViewLayout .ViewContent > h1 {
    background: linear-gradient(135deg, #1A1A1A 60%, #B11D58) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 20px !important;
    line-height: 1.3 !important;
}

/* ─── Responsive: category grid columns ───────────────────────── */
@media screen and (max-width: 900px) {
    .CategoryListenerMobile .CategoryListView {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 8px !important;
    }
    .CategoryListenerMobile .CategoryListViewItemImage {
        width: 46px !important;
        height: 46px !important;
    }
}

@media screen and (max-width: 600px) {
    .CategoryListenerMobile .CategoryListView {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }
    .CategoryListenerMobile .CategoryListViewItem a {
        padding: 8px 4px 8px !important;
    }
    .CategoryListenerMobile .CategoryListViewItemImage {
        width: 40px !important;
        height: 40px !important;
        background-size: 26px !important;
    }
    .CategoryListenerMobile .CategoryListViewItemText {
        font-size: 10.5px !important;
    }
}