:root {
    /* Overrides style.min.css's --color-primary (#215ADA) — this file loads
       after it, so this wins without having to touch the vendor bundle. */
    --color-primary: #000000;

    --primaryColor: var(--color-primary);
    --secondaryColor: var(--color-secondary);
    --titleColor: var(--color-heading);
    --paraColor: var(--color-body);
    --whiteColor: var(--color-white);
    --offwhiteColor: var(--color-border);
    --ashColor: var(--color-gray-100);
}

body {
    font-family: var(--font-primary);
    color: var(--paraColor);
}

a {
    transition: var(--transition-short);
}

.text-title {
    color: var(--titleColor) !important;
}

.text-para {
    color: var(--paraColor) !important;
}

.text_primary {
    color: var(--primaryColor) !important;
}

.bg-ash {
    background-color: var(--ashColor) !important;
}

.round-10 { border-radius: 10px !important; }
.round-15 { border-radius: 15px !important; }
.round-20 { border-radius: 20px !important; }
.round-30 { border-radius: 30px !important; }

.hover-text-primary:hover,
.link-hover-primary:hover {
    color: var(--primaryColor) !important;
}

.link-hover-secondary:hover {
    color: var(--secondaryColor) !important;
}

/* Buttons ------------------------------------------------------------- */

.btn.style-one,
.btn.style-two,
.btn.style-three,
.btn.style-four {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 30px;
    font-size: 15px;
    font-weight: var(--f-medium);
    border: 1px solid transparent;
    line-height: 1;
    text-decoration: none;
    transition: var(--transition-short);
}

.btn.style-one {
    background-color: var(--titleColor);
    color: var(--whiteColor);
}
.btn.style-one:hover {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
}

.btn.style-two {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
}
.btn.style-two:hover {
    background-color: var(--titleColor);
    color: var(--whiteColor);
}

.btn.style-three {
    background-color: var(--secondaryColor);
    color: var(--whiteColor);
}
.btn.style-three:hover {
    background-color: var(--titleColor);
    color: var(--whiteColor);
}

.btn.style-four {
    height: 44px;
    padding: 0 22px;
    font-size: 14px;
    background-color: transparent;
    border-color: var(--offwhiteColor);
    color: var(--titleColor);
}
.btn.style-four:hover {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--whiteColor);
}

.btn.disabled,
.btn.style-four.disabled {
    opacity: .5;
    pointer-events: none;
}

/* .rbt-btn-border has no enabled-state rule in the vendor bundle (only a
   disabled-state override), so it renders identically to a plain .rbt-btn —
   filling in the outline look its name implies. */
.rbt-btn.rbt-btn-border {
    background: transparent;
    border: 2px solid var(--primaryColor);
    color: var(--primaryColor);
}
.rbt-btn.rbt-btn-border:hover {
    background: var(--primaryColor);
    color: var(--whiteColor);
}

/* Section headings ------------------------------------------------------ */

.section-subtile,
.section-subtitle {
    display: block;
    font-family: var(--font-secondary);
    font-size: 24px !important;
    color: var(--primaryColor);
}

.section-title.style-one {
    font-size: 34px;
    font-weight: var(--f-bold);
    color: var(--titleColor);
}

/* Breadcrumb ------------------------------------------------------------ */

.breadcrumb-area {
    padding: 70px 0;
    background-color: var(--color-gray-light);
}
.breadcrumb-area .br-title {
    font-size: 32px;
    font-weight: var(--f-bold);
    color: var(--titleColor);
}
.breadcrumb-area .br-menu li a,
.breadcrumb-area .br-menu li {
    color: var(--paraColor);
    text-decoration: none;
}
.breadcrumb-area .br-menu li a:hover {
    color: var(--primaryColor);
}

/* Category card ---------------------------------------------------------- */

.category-card.style-one .category-img {
    width: 150px;
    height: 150px;
    overflow: hidden;
    background-color: var(--ashColor);
}
.category-card.style-one .category-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.category-card.style-one h3 {
    margin-top: 18px;
    margin-bottom: 2px;
}
.category-card.style-one span {
    color: var(--paraColor);
    font-size: 14px;
}

/* Product card ------------------------------------------------------------ */

.product-card {
    background-color: var(--whiteColor);
    box-shadow: var(--shadow-3);
}
.product-card .product-card-media {
    position: relative;
    background-color: var(--ashColor);
}
.product-card .product-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.product-card .product-img img:last-child {
    position: relative;
}
.product-card .product-img img:first-child {
    opacity: 0;
    transition: var(--transition-short);
}
.product-card:hover .product-img img:first-child {
    opacity: 1;
}
.product-card .rating {
    display: flex;
    gap: 2px;
    font-size: 13px;
}
.product-card .rating li i {
    color: var(--color-gray-300);
}
.product-card .rating li i.fa-solid,
.product-card .rating li i.ri-star-fill {
    color: var(--color-extra-eight);
}
.product-card h3 {
    font-size: 17px;
    font-weight: var(--f-semi-bold);
    margin-bottom: 6px;
}
.product-card .product-price {
    display: block;
    font-weight: var(--f-bold);
    color: var(--primaryColor);
    margin-bottom: 14px;
}
.product-weight-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--whiteColor);
    color: var(--titleColor);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    z-index: 2;
}
.add-to-wishlist {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background-color: var(--whiteColor) !important;
    color: var(--titleColor);
    z-index: 2;
}
.add-to-wishlist i {
    font-size: 16px;
}
.add-to-wishlist:hover,
.add-to-wishlist.is-active {
    background-color: var(--secondaryColor) !important;
    color: var(--whiteColor);
}

.card-variant-selector {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
    opacity: 0;
    transition: var(--transition-short);
}
.product-card:hover .card-variant-selector {
    opacity: 1;
}
.card-variant-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.card-variant-badge {
    border: 1px solid var(--whiteColor);
    background: transparent;
    color: var(--whiteColor);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}
.card-variant-badge.is-active {
    background-color: var(--whiteColor);
    color: var(--titleColor);
}

/* The wide product card (home Latest/Featured Products swipers) places the
   variant selector as normal in-flow content next to the price, not as a
   dark image overlay — override the overlay-style defaults above. */
.product-card-wide .card-variant-selector {
    position: static;
    opacity: 1;
    padding: 0;
    background: none;
}
.product-card-wide .card-variant-axis-label {
    display: block;
    font-size: 11px;
    color: var(--paraColor);
    margin-bottom: 4px;
}
.product-card-wide .card-variant-badge {
    border-color: var(--offwhiteColor);
    color: var(--titleColor);
}
.product-card-wide .card-variant-badge.is-active {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--whiteColor);
}
.product-card-wide .rbt-card-top-content.has-two-align {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.product-card-wide .right-part {
    min-width: 180px;
}

.cart-qty-stepper {
    border: 1px solid var(--offwhiteColor);
    border-radius: var(--radius);
    overflow: hidden;
}
.cart-qty-stepper .cart-qty-control {
    width: 38px;
    height: 40px;
    border: 0;
    background-color: var(--ashColor);
    color: var(--titleColor);
    font-size: 16px;
}
.cart-qty-stepper .cart-qty-value {
    flex: 1;
    text-align: center;
    font-weight: var(--f-semi-bold);
}
.cart-pop {
    animation: cartPop .3s ease;
}
@keyframes cartPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* Banner / hero ------------------------------------------------------------ */

.rbt-product-img img {
    width: 100%;
    display: block;
}

/* Product / offer / testimonial / blog sections ----------------------------- */

.offer-area,
.product-area,
.category-area,
.testimonial-area,
.about-area {
    overflow: hidden;
}

.rbt-reviewer-img {
    display: inline-block;
    margin-bottom: 8px;
}
.rbt-reviewer-img img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.rbt-reviewer-meta {
    color: var(--paraColor);
    font-size: 13px;
}

.rbt-blog-details-meta-list li span {
    color: var(--paraColor);
}

.about-img w-100,
.about-img-wrap img {
    width: 100%;
    border-radius: 20px;
}

.rbt-inf-box-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* Forms --------------------------------------------------------------------- */

.auth-form.comment-form-wrap {
    background-color: var(--whiteColor);
    box-shadow: var(--shadow-3);
    padding: 40px;
}
.form-group.floating-label {
    position: relative;
}
.form-group.floating-label input,
.form-group.floating-label select,
.form-group.floating-label textarea {
    height: 54px;
    border: 1px solid var(--offwhiteColor);
    background-color: var(--color-gray-light);
    padding: 0 18px;
    font-size: 15px;
}
.form-group.floating-label textarea {
    height: auto;
    padding: 16px 18px;
}
.form-group.floating-label label {
    position: absolute;
    left: 18px;
    top: 16px;
    color: var(--paraColor);
    font-size: 14px;
    pointer-events: none;
    transition: var(--transition-short);
    background-color: transparent;
}
.form-group.floating-label input:focus,
.form-group.floating-label select:focus,
.form-group.floating-label textarea:focus {
    outline: 0;
    border-color: var(--primaryColor);
}
.form-group.floating-label input:focus ~ label,
.form-group.floating-label input:not(:placeholder-shown) ~ label,
.form-group.floating-label textarea:focus ~ label,
.form-group.floating-label textarea:not(:placeholder-shown) ~ label,
.form-group.floating-label select ~ label {
    top: -9px;
    left: 12px;
    font-size: 11px;
    padding: 0 6px;
    background-color: var(--whiteColor);
    color: var(--primaryColor);
}

/* Header ------------------------------------------------------------------
 * rbt-header-8's own markup (topbar, logo, search-with-category, quick
 * access icons, mainmenu) is styled entirely by this theme's own
 * style.min.css — these rules only cover the small bits that markup
 * doesn't already have real classes for (the mobile nav drawer, the
 * plain-text topbar location link). */

/* The main nav bar's background is rbt-bg-color-primary, and
   style.min.css colors the active link the same --color-primary — on the
   bar itself that makes the active item's text invisible against its own
   background, so it's forced to white here instead. */
.rbt-main-navigation .rbt-mainmenu-nav .mainmenu > li > a.active {
    color: var(--color-white) !important;
}

.rbt-access-link {
    color: var(--titleColor);
    text-decoration: none;
}
.rbt-access-link:hover {
    color: var(--primaryColor);
}

.mobile-nav-drawer {
    width: 300px;
}
.mobile-nav-menu li a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--offwhiteColor);
    color: var(--titleColor);
    text-decoration: none;
}
.mobile-nav-menu li a:hover {
    color: var(--primaryColor);
}
.mobile-nav-menu .collapse a {
    border-bottom: 0;
    padding: 8px 0;
    color: var(--paraColor);
}

/* Offcanvas drawers (cart / auth / account) --------------------------------- */

.offcanvas.cart-drawer,
.offcanvas.auth-drawer,
.offcanvas.account-drawer {
    width: 420px;
}
.cart-drawer-header,
.auth-drawer-header,
.account-drawer-header {
    background-color: var(--titleColor);
    color: var(--whiteColor);
}
.auth-drawer-header-content,
.account-drawer-header-content {
    gap: 14px;
}
.auth-drawer-icon,
.account-drawer-avatar {
    width: 46px;
    height: 46px;
    background-color: rgba(255,255,255,.15);
    color: var(--whiteColor);
    font-weight: var(--f-bold);
    flex-shrink: 0;
}
.auth-drawer-subtitle,
.account-drawer-subtitle {
    color: rgba(255,255,255,.7);
    font-size: 13px;
}
.auth-panel {
    display: none;
}
.auth-panel.active {
    display: block;
}
.cart-drawer-item {
    position: relative;
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid var(--offwhiteColor);
}
.cart-drawer-item .product-img {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    overflow: hidden;
}
.cart-drawer-item .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-drawer-item .product-info {
    padding-left: 14px;
}
.cart-drawer-item-remove {
    position: absolute;
    top: 16px;
    right: 0;
    border: 0;
    background: transparent;
    color: var(--paraColor);
}
.cart-drawer-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.cart-drawer-qty .qty-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--offwhiteColor);
    background: transparent;
    border-radius: 50%;
}
.cart-drawer-summary,
.cart-drawer-footer {
    padding: 16px 0;
    border-top: 1px solid var(--offwhiteColor);
}
.account-menu-item {
    display: flex;
    padding: 14px 0;
    border-bottom: 1px solid var(--offwhiteColor);
    color: var(--titleColor);
    text-decoration: none;
}
.account-menu-item:hover {
    color: var(--primaryColor);
}
.account-logout-btn {
    margin-top: 20px;
}

/* Misc ----------------------------------------------------------------------- */

#progress-wrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--whiteColor);
    box-shadow: var(--shadow-3);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-short);
    z-index: 998;
}
#progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
}
#progress-wrap::after {
    content: "\f077";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--titleColor);
}
#progress-wrap svg path {
    fill: none;
    stroke: var(--primaryColor);
    stroke-width: 4;
}

.switch-theme-mode {
    display: none;
}