/* ============================================================
   LIGHT THEME OVERRIDE  — White / Black / Red color scheme
   ============================================================ */

/* -------------------------------------------------------
   1. Root Variable Overrides
------------------------------------------------------- */
:root {
    /* Main section backgrounds: very dark → white */
    --color-four: rgb(255, 255, 255);
    --color-four-rgb: 255, 255, 255;

    /* Secondary backgrounds (header-top, footer): dark gray → light gray */
    --color-two: rgb(242, 242, 242);
    --color-two-rgb: 242, 242, 242;

    /* Text/icons that were light (designed for dark bg): → dark */
    --color-three: rgb(31, 32, 35);
    --color-three-rgb: 31, 32, 35;

    /* Footer bottom bar: dark gray → very light */
    --color-six: rgb(220, 220, 220);
    --color-six-rgb: 220, 220, 220;
    --white-color-rgb: rgba(247, 247, 247);
}

/* -------------------------------------------------------
   2. Base — body & page wrapper
------------------------------------------------------- */
body {
    color: var(--color-three);
    background-color: #ffffff;
}

.page-wrapper {
    background-color: #ffffff;
}

/* Headings — were using --color-two (now light), force dark */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-three);
}

p,
.text {
    color: rgb(71, 71, 71);
}

/* Section title heading — used --color-three (now dark) → good
   Section title text opacity variant stays readable */
.sec-title_heading {
    color: var(--color-three);
}

.sec-title_text {
    color: rgba(31, 32, 35, 0.65);
}

/* List style one — white text on dark bg → dark on light */
.list-style-one li,
.list-style-one li a {
    color: var(--color-three);
}

/* -------------------------------------------------------
   3. Header
------------------------------------------------------- */
.main-header {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

/* Header top bar — black background */
.header-top {
    background-color: #111111;
    border-bottom: none;
}

/* List items text */
.header-top_list li {
    color: rgba(255, 255, 255, 0.65);
}

/* Divider between list items */
.header-top_list li:before {
    background-color: rgba(255, 255, 255, 0.20);
}

/* Links inside list */
.header-top_list li a {
    color: rgba(255, 255, 255, 0.85);
}

.header-top_list li a:hover {
    color: var(--main-color);
}

/* Language dropdown button */
.language-dropdown button {
    color: rgba(255, 255, 255, 0.85);
}

.language-dropdown button:hover,
.language-dropdown button:focus {
    color: var(--main-color);
}

/* Header socials */
.header_socials span {
    color: rgba(255, 255, 255, 0.65);
}

.header_socials a {
    color: rgba(255, 255, 255, 0.85);
    border: rgba(255, 255, 255, 0.20);
}

.header_socials a:hover {
    color: #ffffff;
    border: var(--main-color);
    background-color: var(--main-color);
}

/* Header lower / nav area */
.main-header .header-lower {
    background-color: #ffffff;
}

/* Nav link — text was --color-three (now dark) → OK.
   Border was white-rgba → make dark-rgba */
.main-header .main-menu .navigation>li>a {
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.12);
}

/* Nav hover / active — keep red bg + white text */
.main-header .main-menu .navigation>li:hover>a,
.main-header .main-menu .navigation>li.current>a {
    color: #ffffff;
    background-color: var(--main-color);
    border: var(--main-color);
}

/* Sticky / fixed header */
.main-header.fixed-header .header-lower {
    background-color: #ffffff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
}

/* Dropdown btn (mobile toggle indicator inside nav) */
.main-header .main-menu .navbar-collapse>ul li.dropdown .dropdown-btn {
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.20);
}

/* Header options box (search + cart + menu icons container) */
.header-options_box {
    border: rgba(0, 0, 0, 0.12);
}

/* Search button icon */
.main-header .search-box-btn {
    color: var(--color-three);
}

.main-header .search-box-btn:hover {
    color: var(--main-color);
}

/* Cart sidebar button */
.navSidebar-button {
    color: var(--color-three);
    border-left-color: rgba(0, 0, 0, 0.12);
    border-right-color: rgba(0, 0, 0, 0.12);
}

.navSidebar-button span {
    color: #ffffff;
    background-color: var(--main-color);
}

.journey-block_one-title a {
    color: var(--color-three);
}

/* About / menu widget icon */
.about-widget {
    color: var(--color-three);
}

/* Mobile nav toggler */
.main-header .mobile-nav-toggler {
    color: var(--color-three);
}

.btn-style-two .btn-wrap .text-one,
.btn-style-two .btn-wrap .text-two {
    color: var(--color-three);
}

.shop-block_one-title {
    color: var(--color-three);
}

.event-block_one-heading a {
    color: var(--color-three);
}

.event-block_two-inner {
    border-top: 1px solid var(--color-three);
}

.event-block_two:last-child {
    border-bottom: 1px solid var(--color-three);
}

.event-block_two-arrow .arrow {
    color: var(--color-three);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.event-block_two-arrow .arrow:hover {
    color: #fff;
}

/* -------------------------------------------------------
   4. Buttons
------------------------------------------------------- */

/* btn-style-three hover fill — was --color-two (now light gray) → dark */
.btn-style-three:before {
    background-color: var(--color-three);
}

/* -------------------------------------------------------
   5. Search Popup
------------------------------------------------------- */
.search-popup .color-layer {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------------------
   6. Footer
------------------------------------------------------- */
.main-footer {
    background-color: var(--color-three);
}

/* Footer titles were --white-color (invisible on light bg) */
.footer-title {
    color: #ffffff;
}

.footer-widget h5 {
    color: #ffffff;
}

/* Footer text */
.footer-text {
    color: var(--white-color-rgb);
}

/* Footer links */
.footer-list li a {
    color: var(--white-color-rgb);
}

.footer-list li a:hover {
    color: var(--main-color);
}

/* Footer contact list */
.footer-contact_list li {
    color: var(--white-color-rgb);
}

.footer-contact_list li span {
    color: var(--white-color-rgb);
}

/* Footer social icons */
.footer_socials a {
    color: var(--white-color-rgb);
    border: 1px solid var(--white-color-rgb, 0.15);
}

.footer_socials a:hover {
    color: #ffffff;
    border: var(--main-color);
    background-color: var(--main-color);
}

/* Footer bottom bar */
.footer-bottom {
    background-color: rgb(71, 71, 71);
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.footer-bottom .copyright {
    color: var(--white-color-rgb, 0.15);
}

.footer-bottom_nav li a {
    color: var(--white-color-rgb, 0.15);
}

.footer-bottom_nav li a:hover {
    color: var(--main-color);
}

/* Newsletter input */
.newsletter-box_two .form-group input {
    background-color: #ffffff;
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.15);
}

.newsletter-box_two .form-group input::placeholder {
    color: rgba(31, 32, 35, 0.50);
}

.newsletter-box_two .form-group input[type="text"],
.newsletter-box_two .form-group input[type="email"] {
    background-color: #fff;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
    color: var(--color-three);
}

.search-popup .form-group input[type="search"]::placeholder {
    color: var(--color-three);
}

/* -------------------------------------------------------
   7. Sidebar Cart (xs-sidebar-widget)
------------------------------------------------------- */
.xs-sidebar-widget {
    background-color: #ffffff;
}

.sidebar-info-contents .title-box h5,
.sidebar-info-contents .title-box h5 span {
    color: var(--color-three);
}

.sidebar-info-contents .price {
    color: rgba(31, 32, 35, 0.65);
}

.sidebar-info-contents .no-cart {
    color: rgba(31, 32, 35, 0.50);
}

.sidebar-info-contents .post-block h6 a {
    color: var(--color-three);
}

.sidebar-info-contents .post-block h6 a:hover {
    color: var(--main-color);
}

.sidebar-info-contents .price-box {
    color: var(--main-color);
}

/* -------------------------------------------------------
   8. About Sidebar
------------------------------------------------------- */
.about-sidebar {
    background-color: #ffffff;
}

.about-sidebar .content-box h3,
.about-sidebar .content-box h3 span {
    color: var(--color-three);
}

.about-sidebar .text {
    color: rgba(31, 32, 35, 0.70);
}

.about-sidebar .about-one_list li {
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.10);
}

.about-sidebar .social-box a {
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.15);
}

.about-sidebar .social-box a:hover {
    color: #ffffff;
    background-color: var(--main-color);
    border: var(--main-color);
}

/* -------------------------------------------------------
   9. Preloader
------------------------------------------------------- */
.preloader {
    background-color: #ffffff;
}

/* -------------------------------------------------------
   10. Scrollbar — keep red handle
------------------------------------------------------- */
::-webkit-scrollbar-track {
    background: #eeeeee;
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
}

/* -------------------------------------------------------
   11. UI Menu hover (custom select)
------------------------------------------------------- */
.ui-menu-item:hover {
    background-color: #eeeeee;
}

.logo a img {
    max-width: 160px;
}
.main-header .header-lower .logo-box{
    padding: 0px !important;
}

.cats-slider-section {
    background-color: #fff;
    padding: 70px 0px;
}

@media screen and (max-width: 991px) {
    .cats-slider-header {
        margin-bottom: 0px !important;
    }

    .sec-title {
        margin-bottom: 0px !important;
    }
}

@media screen and (max-width: 767px) {
    .cats-slider-header {
        gap: 0px;
    }
}

.cats-slider-section .cats-slider-prev,
.cats-slider-section .cats-slider-next {
    color: var(--color-three);
}

.cats-slider-section .cats-slider-prev:hover,
.cats-slider-section .cats-slider-next:hover {
    color: #fff;
}

/* Parallax effect for all page title banners */
.page-title {
    background-attachment: fixed;
    background-position: center center;
}
/* iOS Safari doesn't support fixed background-attachment inside transforms */
@supports (-webkit-touch-callout: none) {
    .page-title {
        background-attachment: scroll;
    }
}

.page-title:before {
    opacity: 0.50;
    background-color: var(--color-three);
}

.service-block_one-title a,
.service-block_one-text {
    color: #fff;
}

.journey-block_two-title a {
    color: var(--color-three);
}

/* -------------------------------------------------------
   Product card hover-image effect
------------------------------------------------------- */
.shop-block_one-image {
    position: relative;
    overflow: hidden;
}

.shop-block_one-image a {
    display: block;
    line-height: 0;
}

.shop-block_one-image a img:not(.pcard-hover-img) {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.4s ease;
}

.shop-block_one-image .pcard-hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.shop-block_one-inner:hover .pcard-hover-img {
    opacity: 1;
}

.shop-block_one-inner:hover .shop-block_one-image a img:not(.pcard-hover-img) {
    opacity: 0;
}
/* -------------------------------------------------------
   Category Heading Section
------------------------------------------------------- */
.category-heading-section {
    padding: 40px 0 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.category-heading-title {
    font-size: 30px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 14px;
    line-height: 1.2;
}

.category-heading-desc {
    color: #555;
    font-size: 15px;
    line-height: 1.75;
    max-width: 960px;
    margin-bottom: 0;
}

.category-heading-desc p { margin-bottom: 12px; }
.category-heading-desc p:last-child { margin-bottom: 0; }

/* Toolbar: sort + count + grid toggle */
.category-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0 18px;
    margin-top: 20px;
    border-top: 1px solid #eee;
}

.toolbar-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

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

.toolbar-count {
    font-size: 14px;
    color: #555;
    white-space: nowrap;
}

.toolbar-select {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}
.toolbar-select:focus { outline: none; border-color: #e8232a; }

/* Grid toggle buttons */
.grid-toggle-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.grid-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s;
}
.grid-btn:hover   { border-color: #e8232a; color: #e8232a; }
.grid-btn.active  { background: #e8232a; border-color: #e8232a; color: #fff; }

.toolbar-perpage { display: flex; align-items: center; }

@media (max-width: 767px) {
    .category-heading-title { font-size: 22px; }
    .category-toolbar { flex-direction: column; align-items: flex-start; }
    .toolbar-right { gap: 10px; }
    .grid-toggle-btns { display: none; }
}