:root {
    --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;
}

/* The vendor rbt-btn system ships primary/secondary/black/gray/white/
   border variants but no green one — account pages use it for the
   "add new" actions, so it's added here rather than editing the
   vendor stylesheet directly. */
.rbt-btn.rbt-btn-green {
    background: var(--color-green, #24BD25);
    color: var(--color-white, #fff);
}
.rbt-btn.rbt-btn-green:hover {
    background: var(--titleColor);
    color: var(--color-white, #fff);
}

/* .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) !important;
    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);
}

.cart-qty-stepper {
    border: 1px solid var(--offwhiteColor);
    border-radius: var(--radius);
    overflow: hidden;
}
/* On first render the stepper sits inside .add-to-cart-row (a flex row) and
   has no flex-grow, so it only takes its own content width. After a qty
   change, cart.js's stepper markup skips that wrapper and writes straight
   into .add-to-cart-wrap (a plain block), where it stretches full width by
   default block sizing instead. This makes the initial render match that
   width instead of looking narrower until the first click. Scoped to product
   cards specifically since they never pair the stepper with a Buy Now button
   (showBuyNow defaults to false), so there's never a sibling to share the
   row with. */
.prd-btn-grp .cart-qty-stepper {
    width: 100%;
}
.cart-qty-stepper .cart-qty-control {
    width: 38px;
    height: 40px;
    border: 0;
    color: var(--titleColor);
    font-size: 24px;
}
.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); }
}

/* 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;
}

.add-to-cart-row {
    width: 100%;
}
.add-to-cart-row .js-add-to-cart,
.add-to-cart-row .cart-qty-buynow {
    flex: 1 1 auto;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.qty-picker,
.cart-qty-stepper {
    flex-shrink: 0;
    min-width: 128px;
    height: 50px;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-60);
}
/* Pin to the stepper's own height/shape explicitly rather than relying on
   whichever of the vendor stylesheet's many .rbt-btn{height:...} rules
   happens to win by cascade order — the two need to line up exactly since
   they sit side by side in the same row. */
.cart-qty-buynow {
    height: 50px;
    border-radius: var(--radius-60);
}
.qty-picker-control,
.cart-qty-control {
    width: 40px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 18px;
}
.qty-picker-value,
.cart-qty-value {
    flex: 1;
    text-align: center;
    font-weight: var(--f-semi-bold);
    color: var(--color-primary);
}
.cart-pop {
    animation: cartPop .3s ease;
}

/* Product card's Add To Cart button is .rbt-btn-sm (36px tall) — match the
   post-add stepper to it so swapping button -> stepper doesn't jump in height.
   width: 100% makes it fill .add-to-cart-row on first render the same way it
   already (accidentally) does after a qty change — cart.js's stepper markup
   skips the .add-to-cart-row flex wrapper, so it falls back to plain block
   sizing and stretches full width there; this makes Blade's initial render
   match that instead of sitting at its own flex-item content width. Safe to
   force full width unconditionally: product cards never pair the stepper
   with a Buy Now button (showBuyNow defaults to false), so there's never a
   sibling it would need to leave room for. */
.prd-btn-grp .cart-qty-stepper {
    height: 36px;
    min-width: unset;
    width: 100%;
}
@keyframes cartPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.rbt-password-toggle {
    position: absolute;
    right: 20px;
    bottom: 12px;
    height: 24px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-gray-500);
    font-size: 15px;
    line-height: 24px;
}
.rbt-password-toggle:hover {
    color: var(--color-heading);
}

.file-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* The vendor bundle only styles hover/active on the button variant of
   .rbt-sidebar-nav-list items — our account sidebar links are real <a>
   navigation, not JS tab buttons, so they need the same states spelled out. */
.rbt-sidebar-nav-list a:hover,
.rbt-sidebar-nav-list a.active {
    color: var(--color-primary);
}
.rbt-sidebar-nav-list a.active {
    font-weight: var(--f-bold);
}

/* 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(--whiteColor);
    padding: 0 18px;
    font-size: 15px;
}
.form-group.floating-label textarea {
    height: auto;
    padding: 16px 18px;
}
/* The theme's global `select { appearance: none; ... }` reset (style.min.css)
   strips the native arrow but never supplies a replacement image — only
   selects enhanced by the rbt-select-activation JS widget get one. These
   are plain <select> elements, so without this they render with no
   dropdown indicator at all. */
.form-group.floating-label select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 40px;
}
.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). */

/* Sticky header (see layouts/web.blade.php's <body class="rbt-header-sticky">
   and main.js's headerSticky(), which toggles .rbt-sticky on scroll) gets a
   frosted-glass look once fixed to the viewport top, layered on top of
   style.min.css's own .rbt-sticky rule (solid white background, already has
   box-shadow: var(--shadow-1) — repeated here rather than assumed, so this
   rule fully describes the sticky look on its own). */
.rbt-header.rbt-header-8 .rbt-header-wrapper.rbt-sticky {
    background-color: rgba(255, 255, 255, .7) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-1) !important;
}
.rbt-header-wrapper-three.rbt-header-wrapper-one.rbt-sticky .rbt-header-middle-one{
    min-height: 30px;
    padding: 6px 0;
}

/* 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) --------------------------------- */

/* .side-menu (the mobile filter drawer, etc.) already has
   overscroll-behavior: contain, but that's the outer, non-scrolling
   wrapper — .inner-wrapper is what actually scrolls (overflow-y: auto)
   and had no containment of its own, so scrolling it to its top/bottom
   could chain through to the page underneath. On mobile, focusing a field
   inside it (e.g. the shop sidebar's price filter) opens the keyboard and
   abruptly shifts the viewport to keep the field visible — exactly the
   kind of sudden scroll that chains into a spurious pull-to-refresh on
   the body if nothing stops it here. */
.inner-wrapper {
    overscroll-behavior: contain;
}

.offcanvas.cart-drawer,
.offcanvas.auth-drawer {
    width: 420px;
}
.cart-drawer-header,
.auth-drawer-header {
    background-color: var(--titleColor);
    color: var(--whiteColor);
}
/* h1-h6 get color:var(--color-heading) globally, which beats the inherited
   white above (a directly-specified color always wins over inheritance) —
   without this the customer's name rendered in the same dark color as the
   header background behind it. */
.auth-drawer-header .offcanvas-title,
.cart-drawer-header .offcanvas-title {
    color: var(--whiteColor);
}
.auth-drawer-header-content {
    gap: 14px;
}
.auth-drawer-icon {
    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 {
    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);
}

/* 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;
}