/* Locomotive Scroll Integration */
html.has-scroll-smooth {
  overflow: hidden;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
}

[data-scroll-container] {
  will-change: transform;
}

[data-scroll-section] {
  position: relative;
}

.header-logo, .header-cart {
    width: 20%;
}

.header-cart {
    flex-grow: unset;
}

.search-header-bar {
    height: 100px;
}

.search-header-bar > * {
    height: 100%;
}

.search-input > div {
    width: 100%;
}

.search-input-icon {
    position: absolute;
    font-size: 22px;
    top: 8px;
    left: 4px;
}


.rtl .search-input-icon {
    left: unset;
    right: 4px;
    top: 9px;
}

.search-input-input {
    padding-left: 30px;
    min-height: 40px;
    max-height: 40px;
}

.rtl .search-input-input {
    padding-left: inherit;
    padding-right: 30px;
}


.icon-shopping_cart_black_36dp-1-1, .sm-search-icon > span {
    font-size: 32px;
}

.icon-shopping_cart_black_36dp-1-1 .path1:before {
    color: unset;
}

.icon-shopping_cart_black_36dp-1-1 .path2:before {
    color: unset;
}

.icon-language_black_24dp .path1:before {
    color: unset;
}

.cart-badge {
    position: absolute;
    right: 20px;
    top: -8px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    background-color: #AB0000;
}

.rtl .cart-badge {
    right: unset;
    left: 20px;
}

.top-main-menu-wrapper {
    margin-right: -22px;
    margin-left: -22px;
}

.ic.menu{
    text-align: left;
    position: relative;
    right: 4px;
}

.rtl .ic.menu{
    text-align: right;
    right: unset;
    left: 4px;
}

.ic.menu, .sm-search-icon {
    margin-right: 20px;
}

.icon-menu-top {
    margin-right: 10px !important;
}

.rtl .ic.menu, .sm-search-icon {
    margin-right: unset;
    margin-left: 20px;
}

.rtl .icon-menu-top {
    margin-right: unset !important;
    margin-left: 10px !important;
}

.icon-menu-top > span {
    font-size: 32px;
}

.icon-menu_open_black_24dp-1:before {
    color: unset;
}


.sm-search-div {
    display: none;
    visibility: hidden;
    position: absolute;
    left: 0;
    padding: 0px 15px 20px 15px;
    width: 100%;
    background-color: var(--header-primary-color, var(--primary-color));
    transform: translateY(-100%);
    transition: all .3s ease;
    z-index: 1;
}

.sm-search-div.show {
    visibility: visible;
    transform: translateY(0%);
    -webkit-transform:translate3d(0,0,0);
}

.footer .apps-social-icons:nth-child(2) {
    padding-left: 0px;
}

.rtl .footer .apps-social-icons:nth-child(2) {
    padding-right: 0px;
    padding-left: 15px;
}

.footer .google-app-stores {
    margin-left: -4px;
    margin-right: -4px;
}

.footer .icons-wrapper {
    padding: 0px;
}

.footer-about-us-links-div {

}


.footer-about-us-div {
    padding-right: 20%;
}

.rtl .footer-about-us-div {
    padding-right: unset;
    padding-left: 20%;
}

.slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.main-slider .slick-dots {
    bottom: 12px;
}

.main-slider .slick-dots li button:before {
    font-size: 14px;
}

.features-section-img {
    max-height: 90px;
    max-width: 90px;
}

.slick-next.slick-arrow > span, .slick-prev.slick-arrow > span {
    color: var( --primary-color);
    font-size: 3.3rem;
}

.category-item a, .category-item img, .card-item a, .card-item img {
    display: block;
    text-align: center;
    width: 100%;
}

.category-item img, .card-item img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.category-item h3, .card-item h3 {
    margin-top: 15px;
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
    color: var( --primary-color);
    white-space: break-spaces;
}

.category-page-slider .category-item h3 {
    font-size: 1.2rem;
}

.categories-slider .category-item,
.cards-slider .card-item {
    width: 100%;
    max-width: 200px;
}

.slider-container {
    padding-left: 15px;
    padding-right: 15px;
}
.main-slider .slider-item {

}

.section-title {
    padding-left: 0px;
    padding-right: 0px;
}

.products-slider .prod-col, .categories-slider .cat-col, .cards-slider .card-col {
    padding-left: 15px;
    padding-right: 15px;
    display: block;
    width: auto;
}

.category-page-slider .categories-slider.s-slider {
    margin-right: -15px;
    margin-left: -15px;
}

.category-page-slider .home-categories-section .section-title {
    margin-right: -15px;
    margin-left: -15px;
}

.category-page-slider .products-slider .prod-col, .categories-slider .cat-col, .cards-slider .card-col {
    padding-left: 15px;
    padding-right: 15px;
}

.categories-slider-wrapper, .products-slider-wrapper, .cards-slider-wrapper, .testimonials-slider-wrapper, .partners-slider-wrapper  {
    margin-right: -15px;
    margin-left: -15px;
}

.products-list .prod-col, .bundle-offer-products .prod-col{
    width: 20%;
    padding: 15px;
}

.products-list .prod-col-attr{
    width: 25%;
}

.sort-block-width {
    margin-left: 30px;
}

.rtl .sort-block-width {
    margin-left: 0px;
    margin-right: 30px;
}

.select-dropdown .dropdown-item {
    padding-bottom: 7.5px;
    padding-top: 7.5px;
}

#products-list-filter-form-close {
    width: 44px;
    height: 44px;
    position: absolute;
    right: 0;
    top:0;
}

.rtl #products-list-filter-form-close {
    right: unset;
    left: 0;
}

.products-pagination {
    margin-bottom: 24px;
    padding: 0 15px;
}

.products-pagination ul  {
    padding: 0px;
}

.products-pagination .page-link {
    color: var( --primary-color);
    font-size: 1.2rem;
}

.products-pagination .page-link.active {
    color: #ffffff;
    background-color: var( --primary-color);
}

.rtl .products-pagination .page-item:first-child .page-link {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


.rtl .products-pagination .page-item:last-child .page-link {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.products-container .products-list {
    margin-bottom: 24px;
}

.cart-header-total {
    margin-right: 10px;
    font-size: 1.6rem;
    color: var(--header-text-color-primary-bg, var(--text-color-primary-bg));
}

.rtl .cart-header-total {
    margin-right: unset;
    margin-left: 10px;
}

.form-control {
    border-radius: 3px;
}


.box-1-1 {
    position: relative;
    width:    100%;
}

.box-1-1:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.box-1-1 .content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.box-1-1.ratio2_1:before{
    padding-top: 50%;
}
.box-1-1.ratio1_2:before{
    padding-top: 200%;
}
.box-1-1.ratio4_3:before{
    padding-top: 75%;
}
.box-1-1.ratio16_9:before{
    padding-top: 56.25%;
}

.box-1-1.ratio21_9:before{
    padding-top: 42.85%;
}

.product-item-out-of-stock {
    filter: grayscale(1);
}


.sm-search-div .autocomplete-items, .lg-search-div .autocomplete-items{
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.sm-search-div .autocomplete-items div, .lg-search-div .autocomplete-items div {
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.sm-search-div .autocomplete-items div:hover, .lg-search-div .autocomplete-items div:hover {
    background-color: #e9e9e9;
}

.sm-search-div .autocomplete-items div a, .lg-search-div .autocomplete-items div a {
    padding: 10px;
    cursor: pointer;
    color: inherit;
    display: block;
}

.product-crd-spec {
    min-height: 81px;
}

.gallery-section + .gallery-section {
    padding-top: 0px;
}

.ic-menu-back {
    font-size: 22px;
    margin-right: 16px;
    font-weight: bold;
}

.rtl .ic-menu-back {
    margin-right: unset;
    margin-left: 16px;
}

@media (max-width: 768px) {
    .header-cart {
        flex-grow: 1;
        width: 30%;
    }

    .header-logo {
        width: 70%;
    }

    .search-header-bar {
        height: 64px;
    }


    .footer .apps-social-icons:nth-child(2) {
        padding-left: 15px;
    }

    .rtl .footer .apps-social-icons:nth-child(2) {
        padding-right: 15px;
        padding-left: 15px;
    }

    .footer .icons-wrapper {
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .footer-about-us-div {
        padding-right: 0;
    }

    .rtl .footer-about-us-div {
        padding-right: unset;
        padding-left: 0;
    }

    .category-page-slider .categories-slider {
        height: 225px;
    }

    .categories-slider .category-item, .cards-slider .card-item {
        width: 190px;
    }

    .category-page-slider .categories-slider .category-item {
        width: 165px;
    }

    .category-page-slider .categories-slider.s-slider {
        margin-right: -7.5px;
        margin-left: -7.5px;
    }

    .category-page-slider .products-slider .prod-col, .categories-slider .cat-col, .cards-slider .card-col {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    .products-slider .prod-col, .categories-slider .cat-col, .cards-slider .card-col, .testimonials-slider .testimonials-customer-card , .partners-slider .partners-item {
        display: inline-block;
        vertical-align: top;
    }

    .partners-slider .partners-item {
        vertical-align: middle;
    }

    .categories-slider, .products-slider, .cards-slider, .testimonials-slider , .partners-slider {
        overflow-y: hidden;
        overflow-x: scroll;
        white-space: nowrap;
    }
    .product-crd-spec small {
        white-space: break-spaces;
    }

    .testimonials-slider::-webkit-scrollbar { width: 0 !important }


    .categories-slider-wrapper, .products-slider-wrapper, .cards-slider-wrapper, .testimonials-slider-wrapper, .partners-slider-wrapper  {
        overflow-x: hidden;
        margin-right: 0px;
        margin-left: 0px;
    }

    .slider-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .main-slider, .main-slider .slider-item {

    }

    .main-slider .slick-dots li button:before {
        font-size: 10px;
    }


    .main-slider .slick-dots {
        bottom: 4px;
    }

    .section-title {
        padding-right: 15px;
        padding-left: 15px;
    }

    .products-list .prod-col, .bundle-offer-products .prod-col {
        margin: 0 auto;
        width: auto;
    }

    .products-list .prod-col, .products-list .prod-col-attr{
        width: 50%;
    }

    .product-item {
        width: 135px;
    }

    .products-list .prod-col .product-item {
        width: 100%;
    }

    .sm-search-div {
        display: block;
    }

    .icon-shopping_cart_black_36dp-1-1, .sm-search-icon > span {
        font-size: 28px;
    }

    .icon-menu-top {
        width: 32px;
    }

}


.btn:focus,.btn:active, .page-link:focus, .page-link:active {
    outline: none !important;
    box-shadow: none;
}

.gift-popover-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 115px;
    height: 140px;
    max-width: 100%;
}
.popover {
    top: 40px;
}
.popover .arrow {
    top: -0.5rem;
    left: 5px;
}
.popover .arrow::before {
    top: 0;
    border-width: 0 0.5rem 0.5rem;
    border-bottom-color: #fff;
}
.popover .arrow ::after {
    top: 1px;
    border-width: 0 0.5rem 0.5rem;
    border-bottom-color: #fff;
}

.btn-product-card-out-of-stock {
  width: max-content;
}

.add-to-wishlist {
  position: absolute;
  right: 0;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  width: 40px;
  height: 35px;
  cursor: pointer;
  border-radius: 5px;
  background-color: white;
}

.rtl .add-to-wishlist {
  right: unset;
  left: 0;
}

.icon-heart-mask {
  display: inline-block;
  width: 25px;
  height: 20px;
  mask-size: 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-image: var(--heart-outlined-icon);
  background-color: var(--secondary, #A1A0A9);
}

.icon-heart-mask.filled {
  mask-image: var(--heart-filled-icon);
  background-color: var(--primary_color, #D86F6F);
}

/* ============================================
   BR Theme - Page Background
   ============================================ */

/* Main content area background */
.main.app-content {
    background-color: var(--stone-beige, #D2C8BC) !important;
}

/* ============================================
   BR Theme - Navbar Custom Styling
   ============================================ */

/* Main Navigation Bar Background */
.dark {
  background-color: var(--espresso-black, #231010);
}

/* Search Header Bar - Top Section */
.search-header {
  background-color: var(--stone-beige, #D2C8BC);
}

.search-header-bar {
  background-color: var(--stone-beige, #D2C8BC);
}

/* Mega Menu Navigation */
.menu-header-theme-bg-primary {
  background-color: var(--espresso-black, #231010) !important;
}

/* Main Navigation Links */
ul.main-nav > li > a,
.item-all-categories a {
  color: var(--stone-beige, #D2C8BC) !important;
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 400;
  font-size: 1.1666666666666667rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* Navigation Hover States */
ul.main-nav > li:hover,
.item-all-categories {
  background-color: var(--cocoa-brown, #271519) !important;
}

ul.main-nav > li:hover > a,
.item-all-categories > a {
  color: var(--warm-caramel, #90674D) !important;
  font-weight: 500;
}

/* Sub-menu Styling */
ul.main-nav > li > div.sub-menu-block {
  background-color: var(--espresso-black, #231010) !important;
  border-left: 1px solid var(--chestnut-brown, #6C3E24);
  border-right: 1px solid var(--chestnut-brown, #6C3E24);
  border-bottom: 1px solid var(--chestnut-brown, #6C3E24);
}

.sub-menu-head {
  color: var(--warm-caramel, #90674D) !important;
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 500;
}

.sub-menu-head a {
  color: var(--warm-caramel, #90674D) !important;
  transition: color 0.3s ease;
}

.sub-menu-head a:hover {
  color: var(--stone-beige, #D2C8BC) !important;
}

ul.main-nav > li ul.sub-menu-lists > li > a {
  color: var(--stone-beige, #D2C8BC) !important;
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 300;
  transition: color 0.3s ease;
}

ul.main-nav > li ul.sub-menu-lists > li > a:hover {
  color: var(--warm-caramel, #90674D) !important;
}

/* Mega Menu Dropdown Arrow */
ul.main-nav > li > a.mega-menu > span:after {
  border-top-color: var(--stone-beige, #D2C8BC) !important;
}

ul.main-nav > li:hover > a.mega-menu span:after {
  border-bottom-color: var(--warm-caramel, #90674D) !important;
}

/* Header Icons */
.header-theme-icon-primary {
  color: var(--espresso-black, #231010) !important;
}

/* Cart Badge */
.cart-badge {
  background-color: var(--deep-red, #581817) !important;
}

/* Search Input Styling */
.search-input-input {
  background-color: var(--white-color, #fff);
  border: 1px solid var(--mink-taupe, #998273);
  color: var(--espresso-black, #231010);
  font-family: 'Aileron', 'The Year of the Camel', sans-serif;
}

.search-input-input:focus {
  border-color: var(--warm-caramel, #90674D);
  outline: none;
}

.search-input-icon {
  color: var(--mink-taupe, #998273);
}

/* Mobile Menu Icon */
.icon-menu_open_black_24dp-1:before {
  color: var(--espresso-black, #231010) !important;
}

/* Account/Language/Currency Bar */
.account-lang-currency {
  background-color: var(--stone-beige, #D2C8BC);
  border-bottom: 1px solid var(--mink-taupe, #998273);
}

.language-btn,
.currency-btn {
  color: var(--espresso-black, #231010) !important;
  font-family: 'Aileron', 'The Year of the Camel', sans-serif;
}

.account-btn {
  color: var(--espresso-black, #231010) !important;
  border-color: var(--mink-taupe, #998273) !important;
  font-family: 'Aileron', 'The Year of the Camel', sans-serif;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .search-header {
    background-color: var(--stone-beige, #D2C8BC);
  }
  
  ul.main-nav > li > a {
    font-size: 1rem;
  }
}

/* RTL Support for Navbar */
.rtl ul.main-nav > li > a.mega-menu > span:after {
  margin-right: 0;
  margin-left: 10px;
}

/* ============================================
   BR Theme - New Header Component
   ============================================ */

/* Header Container */
.br-header {
  background-color: var(--stone-beige, #D2C8BC);
  color: var(--espresso-black, #231010);
  position: relative;
  overflow: hidden;
  transition: height 0.4s ease, background-color 0.4s ease, color 0.4s ease;
  height: 5.5rem; /* ~56px - closed state */
}

.br-header.open {
  height: auto;
  /* min-height: 21.6875rem; */
  background-color: var(--espresso-black, #231010);
  color: var(--stone-beige, #D2C8BC);
}

/* Top Bar - Always Visible */
.br-header-top {
  padding: 0.75rem 0;
  border-bottom: 0.5px solid var(--mink-taupe, #998273);
  transition: border-color 0.4s ease;
}

/* Align header container width with hero container */
.br-header-top .container {
  /* margin-left: 1.5rem !important; */
  /* margin-right: 1.5rem !important; */
  /* width: calc(100% - 3rem) !important; */
  max-width: 1880px !important;
}

.br-header.open .br-header-top {
  border-bottom: 0.5px solid var(--mink-taupe, #998273);
}

/* Header Top Wrapper - Uses flexbox with space-between for RTL/LTR support */
.br-header-top-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo Wrapper - Will be on left for LTR, right for RTL */
.br-header-logo-wrapper {
  flex: 0 0 auto;
}

/* Menu Items Wrapper - Will be on right for LTR, left for RTL */
.br-header-actions-wrapper {
  flex: 0 0 auto;
}

/* Logo */
.br-header-logo {
  flex: 0 0 auto;
  background-color: var(--stone-beige, #D2C8BC);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: background-color 0.4s ease, padding 0.4s ease;
}

/* Remove background when open */
.br-header.open .br-header-logo {
  background-color: transparent;
  padding: 0.75rem 0;
}

.br-header-logo a {
  display: flex;
  align-items: center;
  height: 100%;
}

.br-logo-img {
  height: 3rem;
  width: auto;
  display: block;
}

.br-logo-open {
  display: none !important;
}

.br-header.open .br-logo-closed {
  display: none !important;
}

.br-header.open .br-logo-open {
  display: block !important;
}

/* Header Actions */
.br-header-actions {
  gap: 1.5rem;
  align-items: center;
}

/* Icons */
.br-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.2rem;
  margin-bottom: 0.2rem;
  display: block;
  flex-shrink: 0;
  align-self: center;
}

.rtl .br-icon {
  margin-right: 0;
  margin-left: 0.2rem;
  margin-bottom: 0.2rem;
}

/* Ensure icons are visible and properly colored */
.br-icon svg,
.br-icon {
  fill: currentColor;
  color: inherit;
}

/* About-us page header icons - MINK-TAUPE color */
body.about-us-page #br-header-about-us:not(.open) .br-icon,
body.about-us-page #br-header-about-us:not(.open) .br-icon svg,
body.about-us-page #br-header-about-us:not(.open) .br-icon path,
body.about-us-page #br-header-about-us:not(.open) .br-icon *,
body.about-us-page #br-header-about-us:not(.open) img.br-icon,
body.about-us-page .br-header.about-us-header:not(.open) .br-icon,
body.about-us-page .br-header.about-us-header:not(.open) .br-icon svg,
body.about-us-page .br-header.about-us-header:not(.open) .br-icon path,
body.about-us-page .br-header.about-us-header:not(.open) .br-icon *,
body.about-us-page .br-header.about-us-header:not(.open) img.br-icon {
  color: var(--MINK-TAUPE, #998273) !important;
  fill: var(--MINK-TAUPE, #998273) !important;
  stroke: var(--MINK-TAUPE, #998273) !important;
}

/* Force icon images to use filter for color change on about-us page - MINK-TAUPE */
body.about-us-page #br-header-about-us:not(.open) img.br-icon,
body.about-us-page .br-header.about-us-header:not(.open) img.br-icon {
  filter: brightness(0) saturate(100%) invert(59%) sepia(10%) saturate(1100%) hue-rotate(340deg) brightness(97%) contrast(89%) !important;
  opacity: 1 !important;
}

.br-header-link {
  color: var(--espresso-black, #231010) !important;
  text-decoration: none;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.4s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* About-us page header links - MINK-TAUPE color */
body.about-us-page #br-header-about-us:not(.open) .br-header-link,
body.about-us-page #br-header-about-us:not(.open) .br-header-link span,
body.about-us-page .br-header.about-us-header:not(.open) .br-header-link,
body.about-us-page .br-header.about-us-header:not(.open) .br-header-link span {
  color: var(--MINK-TAUPE, #998273) !important;
}

.br-header.open .br-header-link {
  color: var(--stone-beige, #D2C8BC) !important;
}

.br-header-link:hover {
  color: var(--warm-caramel, #90674D) !important;
}

.br-cart-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.br-cart-count {
  font-weight: 400;
}

/* Menu Toggle Button */
.br-menu-toggle {
  background: none;
  border: none;
  color: var(--espresso-black, #231010);
  cursor: pointer;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.125rem; /* 18px */
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0;
  transition: color 0.4s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* About-us page menu toggle - MINK-TAUPE color */
body.about-us-page #br-header-about-us:not(.open) .br-menu-toggle,
body.about-us-page #br-header-about-us:not(.open) .br-menu-text,
body.about-us-page .br-header.about-us-header:not(.open) .br-menu-toggle,
body.about-us-page .br-header.about-us-header:not(.open) .br-menu-text {
  color: var(--MINK-TAUPE, #998273) !important;
}

.br-header.open .br-menu-toggle {
  color: var(--stone-beige, #D2C8BC);
}

/* .br-menu-toggle:hover {
  color: var(--warm-caramel, #90674D);
} */

.br-menu-text {
  display: inline-block;
}

/* Language Button */
.br-lang-btn {
  width: 3.3125rem; /* 53px */
  height: 2.875rem; /* 46px */
  padding: 0;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.125rem; /* 18px - same as menu items */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.4s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid;
  box-sizing: border-box;
}

/* For LTR (English), language switcher is last in HTML, so it stays last (rightmost) */
.br-header-actions .br-lang-btn {
  margin-left: 1.5rem; /* Space before language switcher */
}

/* For RTL (Arabic), language switcher should be first (leftmost) */
/* With row-reverse, last in HTML becomes first visually (leftmost) */
.rtl .br-header-actions {
  flex-direction: row-reverse;
}

.rtl .br-header-actions .br-lang-btn {
  margin-left: 0;
  margin-right: 1.5rem; /* Space after language switcher */
}

/* Language button in closed state - stone-beige background with espresso-black text and border */
.br-header:not(.open) .br-lang-btn {
  background-color: var(--espresso-black, #231010);
  color: var(--stone-beige, #D2C8BC);
}

/* Language button in open state - espresso-black background with stone-beige text */
.br-header.open .br-lang-btn {
  background-color: var(--espresso-black, #231010);
  border-color: var(--espresso-black, #231010);
  color: var(--stone-beige, #D2C8BC);
}

.br-lang-btn:hover {
  /* color: var(--stone-beige, #D2C8BC); */
  color: var(--PLUM, #2F191E);
}

/* Language button stays in header - overlay is centered separately */

/* Expandable Menu Section */
.br-header-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  max-height: 0;
  overflow: hidden;
  padding: 0;
}

.br-header.open .br-header-menu {
  opacity: 1;
  visibility: visible;
  max-height: none;
  /* padding: 2rem 0; */
  overflow: visible;
}

.br-menu-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

/* Menu Row */
.br-menu-row {
  position: relative;
  display: flex;
  align-items: stretch; /* Make all columns same height */
  margin: 0;
}

/* Menu Columns */
.br-menu-column {
  padding: 2rem 0 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

.br-menu-column:first-child {
  padding-left: 0;
}

.br-menu-column:last-child {
  padding-right: 0;
}

/* Column Footer - items at bottom of each column */
.br-menu-column-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  padding-bottom: 0.75rem;
  display: flex;
  align-items: flex-end;
}

/* Copyright Column - ensure alignment with other columns */
/* .br-menu-copyright-column { */
  /* Uses same flex structure as other columns via .br-menu-column */
  /* Footer items will align via .br-menu-column-footer */
/* } */

/* Vertical Separators */
.br-menu-separator {
  width: 0.5px;
  background: var(--mink-taupe, #998273);
  align-self: stretch;
  margin: 0 1.5rem;
  min-height: 10rem;
  flex-shrink: 0;
}

.br-menu-section-title {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  color: var(--PLUM, #2F191E);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.br-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.br-menu-list li {
  margin-bottom: 0.75rem;
}

.br-menu-list a {
  color: var(--stone-beige, #D2C8BC);
  text-decoration: none;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.75rem; /* 12px */
  font-weight: 300;
  transition: color 0.3s ease;
  display: inline-block;
}

/* .br-menu-list a:hover {
  color: var(--warm-caramel, #90674D);
} */

/* Menu Column Footer Items */
.br-menu-email {
  color: var(--stone-beige, #D2C8BC);
  /* text-decoration: 0.5px underline; */
  text-underline-offset: 0.2rem;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.675rem;
  font-weight: 300;
  transition: color 0.3s ease;
  display: block;
  border-bottom: 0.5px solid currentColor;
  width: fit-content;
}

/* .br-menu-email:hover {
  color: var(--warm-caramel, #90674D);
} */

.br-menu-message {
  color: var(--stone-beige, #D2C8BC);
  text-underline-offset: 0.2rem;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.675rem;
  font-weight: 300;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  /* gap: 0.5rem; */
}

/* .br-menu-message:hover {
  color: var(--warm-caramel, #90674D);
} */

/* Underline for message arrow icon - make it part of the underline */
.br-menu-message {
  border-bottom: 0.5px solid currentColor;
  /* padding-bottom: 0.125rem; */
  width: fit-content;
}

.br-message-arrow-icon {
  width: 0.475rem;
  height: 0.475rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.2rem;
}

.rtl .br-message-arrow-icon {
  margin-left: 0;
  margin-right: 0.2rem;
  transform: scaleX(-1); /* Flip arrow for RTL */
}

.br-menu-copyright {
  color: var(--stone-beige, #D2C8BC);
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.675rem;
  font-weight: 300;
}

.br-menu-logo {
  display: flex;
  align-items: center;
}

.br-menu-logo-img {
  width: auto;
  height: auto;
  max-height: 1.5rem;
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .br-header.open {
    height: auto;
    min-height: 21.6875rem;
  }

  .br-header-actions {
    gap: 1rem;
  }

  .br-header-link {
    font-size: 0.75rem;
  }

  .br-menu-content {
    gap: 1.5rem;
  }

  .br-menu-footer {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .br-menu-footer > div {
    width: 100%;
  }

  /* Hide text labels (Menu, Account, Cart) when menu is closed - show only icons */
  .br-header:not(.open) .br-menu-text,
  .br-header:not(.open) .br-header-link span {
    display: none !important;
  }

  /* When menu is open, show text and match font sizes */
  .br-header.open .br-menu-text,
  .br-header.open .br-header-link span {
    display: inline-block !important;
    font-size: 0.75rem !important; /* Match cart and account font size */
  }

  /* Ensure menu toggle button text (Close) matches cart and account font size when open */
  .br-header.open .br-menu-toggle {
    font-size: 0.75rem !important; /* Match cart and account font size */
  }
}

/* RTL Support */
/* For RTL, we reverse the order and use order property to position items correctly */
.rtl .br-header-actions {
  flex-direction: row-reverse;
}

/* In RTL, we want: Language → Cart → Account → Menu */
/* HTML order is: Menu, Account, Cart, Language */
/* With row-reverse: Language, Cart, Account, Menu */
/* We need to swap Cart and Menu positions */
.rtl .br-header-actions .br-lang-btn {
  order: -999; /* Language first (leftmost) */
}

.rtl .br-header-actions .br-cart-link {
  order: -998; /* Cart second */
}

.rtl .br-header-actions .br-header-link:not(.br-cart-link) {
  order: -997; /* Account third */
}

.rtl .br-header-actions .br-menu-toggle {
  order: -996; /* Menu last (rightmost) */
}

.rtl .br-menu-footer {
  flex-direction: row-reverse;
}

/* ============================================
   BR Theme - Region Settings Dialog (Language Switcher Modal)
   ============================================ */

/* Blur background when modal is open */
body.region-dialog-open {
  overflow: hidden;
}

body.region-dialog-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(35, 16, 16, 0.3); /* espresso-black with reduced opacity */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1040;
}

/* Region Settings Dialog Modal */
#region-settings-dialog,
.region-settings-dialog,
[class*="region-settings"] {
  z-index: 1050 !important;
}

/* Modal backdrop */
.modal-backdrop,
[class*="backdrop"] {
  background-color: rgba(35, 16, 16, 0.3) !important; /* espresso-black with reduced opacity */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Modal buttons - espresso-black background with stone-beige text */
#region-settings-dialog .btn,
.region-settings-dialog .btn,
[class*="region-settings"] .btn,
.modal .btn-primary,
.modal .btn {
  background-color: var(--espresso-black, #231010) !important;
  border-color: var(--espresso-black, #231010) !important;
  color: var(--stone-beige, #D2C8BC) !important;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1.5rem;
  border-radius: 0.125rem;
  transition: all 0.3s ease;
}

#region-settings-dialog .btn:hover,
.region-settings-dialog .btn:hover,
[class*="region-settings"] .btn:hover,
.modal .btn-primary:hover,
.modal .btn:hover {
  background-color: var(--warm-caramel, #90674D) !important;
  border-color: var(--warm-caramel, #90674D) !important;
  color: var(--stone-beige, #D2C8BC) !important;
}

/* Modal content */
.modal-content,
[class*="modal-content"] {
  background-color: var(--stone-beige, #D2C8BC) !important;
  border: 1px solid var(--mink-taupe, #998273);
  border-radius: 0.25rem;
}

/* Modal header */
.modal-header,
[class*="modal-header"] {
  border-bottom: 1px solid var(--mink-taupe, #998273);
  color: var(--espresso-black, #231010);
  font-family: 'The Year of the Camel', sans-serif;
}

/* Modal body text */
.modal-body,
[class*="modal-body"] {
  color: var(--espresso-black, #231010);
  font-family: 'Aileron', 'The Year of the Camel', sans-serif;
}

/* Close button */
.modal-header .close,
[class*="close"] {
  color: var(--espresso-black, #231010);
  opacity: 1;
}

.modal-header .close:hover {
  color: var(--warm-caramel, #90674D);
}

/* Form elements in modal */
.modal select,
.modal input,
[class*="region-settings"] select,
[class*="region-settings"] input {
  border-color: var(--mink-taupe, #998273);
  color: var(--espresso-black, #231010);
  font-family: 'Aileron', 'The Year of the Camel', sans-serif;
  background-color: var(--stone-beige, #D2C8BC) !important;
}

.modal select:focus,
.modal input:focus,
[class*="region-settings"] select:focus,
[class*="region-settings"] input:focus {
  border-color: var(--warm-caramel, #90674D);
  outline: none;
  box-shadow: 0 0 0 0.125rem rgba(144, 103, 77, 0.25);
}

/* Material-UI Dialog Styling for Region/Language Popup */
.MuiDialog-root[role="dialog"] {
  align-items: flex-end !important; /* Align to bottom */
  justify-content: flex-end !important; /* Align to right */
  padding: 0 !important;
}

.MuiDialog-root[role="dialog"],
.MuiDialog-root[role="dialog"] * {
  font-family: 'The Year of the Camel', sans-serif !important;
}

/* Dialog container positioning - always right, never switch sides on language change */
.MuiDialog-container {
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  display: flex !important;
  direction: ltr !important; /* Force LTR for container to prevent RTL repositioning */
}

/* Ensure dialog scroll container is positioned correctly */
.MuiDialog-scrollPaper {
  align-items: flex-end !important;
  justify-content: flex-end !important;
  direction: ltr !important; /* Force LTR to prevent RTL repositioning */
}

/* Material-UI Dialog Paper (Modal Container) - Slide from bottom, positioned right */
.MuiDialog-paper,
.MuiDialog-paperRoot,
.MuiDialog-root .MuiDialog-paper,
.MuiDialog-root .MuiDialog-paperRoot,
[class*="MuiDialog-paper"] {
  background-color: rgba(210, 200, 188, 0.4) !important; /* stone-beige with 40% opacity */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--mink-taupe, #998273) !important;
  border-radius: 0.5rem 0.5rem 0 0 !important; /* Rounded top corners only */
  padding: 1.5rem !important;
  color: var(--espresso-black, #231010) !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  max-width: 350px !important; /* Reduced width - 350px */
  width: 100% !important;
  max-height: 80vh !important;
  position: fixed !important; /* Fixed position to prevent repositioning */
  right: 0 !important; /* Always on the right */
  bottom: 0 !important; /* Always at the bottom */
  left: auto !important; /* Don't allow left positioning */
  /* GSAP will handle the animation - initial state set by GSAP, not CSS */
  /* Don't hide it initially in CSS, let GSAP handle it */
}

/* Language switcher overlay - 100% width on mobile and small screens */
@media (max-width: 575.98px) {
  .MuiDialog-root[role="dialog"] {
    align-items: flex-end !important; /* Align to bottom */
    justify-content: center !important; /* Center horizontally on mobile */
    padding: 0 !important;
  }
  
  .MuiDialog-container {
    align-items: flex-end !important;
    justify-content: center !important; /* Center horizontally on mobile */
    padding: 0 !important;
    display: flex !important;
    direction: ltr !important;
  }
  
  .MuiDialog-scrollPaper {
    align-items: flex-end !important;
    justify-content: center !important; /* Center horizontally on mobile */
    direction: ltr !important;
  }
  
  .MuiDialog-paper,
  .MuiDialog-paperRoot,
  .MuiDialog-root .MuiDialog-paper,
  .MuiDialog-root .MuiDialog-paperRoot,
  [class*="MuiDialog-paper"] {
    right: 0 !important; /* Full width from right edge */
    left: 0 !important; /* Full width from left edge */
    transform: none !important; /* No transform needed for full width */
    max-width: 100% !important; /* 100% width on mobile */
    width: 100% !important; /* Full width */
    border-radius: 0.5rem 0.5rem 0 0 !important;
  }
}

/* Material-UI Dialog Title */
.MuiDialogTitle-root,
.MuiDialogTitle-root h2,
.MuiDialogTitle-root h1,
.MuiDialogTitle-root h3,
.MuiDialogTitle-root h4,
.MuiDialogTitle-root h5,
.MuiDialogTitle-root h6 {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--espresso-black, #231010) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  text-align: center !important;
  padding: 0 0 1rem 0 !important;
  margin: 0 !important;
}

/* Material-UI Dialog Content */
.MuiDialogContent-root {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--espresso-black, #231010) !important;
  padding: 1rem 0 !important;
}

.MuiDialogContent-root p,
.MuiDialogContent-root span,
.MuiDialogContent-root div {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--espresso-black, #231010) !important;
}

/* Material-UI Form Controls (no outer “card”; fields use stone-beige like former label tone) */
.MuiDialog-root .MuiTextField-root,
.MuiDialog-root .MuiFormControl-root {
  background-color: transparent !important;
}

.MuiDialog-root .MuiInputBase-root,
.MuiDialog-root .MuiOutlinedInput-root,
.MuiDialog-root .MuiSelect-root,
.MuiDialog-root select {
  font-family: 'The Year of the Camel', sans-serif !important;
  border-color: var(--mink-taupe, #998273) !important;
  color: var(--dark-mocha, #312516) !important;
  background-color: var(--stone-beige, #D2C8BC) !important;
  border-radius: 0.125rem !important;
}

.MuiDialog-root .MuiInputBase-input,
.MuiDialog-root .MuiOutlinedInput-input,
.MuiDialog-root input,
.MuiDialog-root select {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--dark-mocha, #312516) !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
}

.MuiDialog-root .MuiOutlinedInput-notchedOutline {
  border-color: var(--mink-taupe, #998273) !important;
}

.MuiDialog-root .MuiInputBase-root:focus-within .MuiOutlinedInput-notchedOutline,
.MuiDialog-root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--warm-caramel, #90674D) !important;
  border-width: 1px !important;
}

.MuiDialog-root .MuiInputBase-root:focus-within,
.MuiDialog-root .MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 0.125rem rgba(144, 103, 77, 0.25) !important;
}

/* Material-UI Input Label — dark mocha (field blocks use stone-beige) */
.MuiDialog-root .MuiInputLabel-root,
.MuiDialog-root .MuiFormLabel-root,
.MuiDialog-root label.MuiInputLabel-root,
.MuiDialog-root label.MuiFormLabel-root {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--dark-mocha, #312516) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
}

.MuiDialog-root .MuiInputLabel-root.Mui-focused,
.MuiDialog-root .MuiFormLabel-root.Mui-focused {
  color: var(--espresso-black, #231010) !important;
}

/* Material-UI Buttons */
.MuiDialog-root .MuiButton-root,
.MuiDialog-root .MuiButton-contained,
.MuiDialog-root .MuiButton-containedPrimary,
.MuiDialog-root button[type="submit"],
.MuiDialog-root button:not([class*="close"]) {
  background-color: var(--espresso-black, #231010) !important;
  border: 1.5px solid var(--espresso-black, #231010) !important;
  color: var(--stone-beige, #D2C8BC) !important;
  font-family: 'The Year of the Camel', sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  text-transform: none !important; /* Changed from uppercase to camelCase */
  letter-spacing: normal !important; /* Reset letter-spacing for camelCase */
  padding: 0.75rem 2rem !important;
  border-radius: 0.125rem !important;
  min-height: 3rem !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.MuiDialog-root .MuiButton-root:hover,
.MuiDialog-root .MuiButton-contained:hover,
.MuiDialog-root .MuiButton-containedPrimary:hover,
.MuiDialog-root button[type="submit"]:hover,
.MuiDialog-root button:not([class*="close"]):hover {
  background-color: var(--warm-caramel, #90674D) !important;
  border-color: var(--warm-caramel, #90674D) !important;
  color: var(--stone-beige, #D2C8BC) !important;
  box-shadow: none !important;
}

/* Material-UI Dialog Actions */
.MuiDialogActions-root {
  padding: 1rem 0 0 0 !important;
  justify-content: flex-end !important;
  gap: 1rem !important;
}

/* Material-UI Backdrop - Reduced opacity with blur */
.MuiBackdrop-root {
  background-color: rgba(35, 16, 16, 0.3) !important; /* espresso-black with reduced opacity */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Material-UI Select Dropdown - Force native HTML select behavior */
.MuiDialog-root .MuiSelect-select,
.MuiDialog-root .MuiSelect-root,
.MuiDialog-root select,
.MuiDialog-root .MuiOutlinedInput-root {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--dark-mocha, #312516) !important;
  background-color: var(--stone-beige, #D2C8BC) !important;
  border: 1px solid var(--mink-taupe, #998273) !important;
  border-radius: 0.125rem !important;
  padding: 0.75rem 1rem !important;
  appearance: auto !important; /* Standard browser dropdown appearance */
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  cursor: pointer !important;
}

/* Hide Material-UI Select icon and prevent modal opening */
.MuiDialog-root .MuiSelect-icon {
  display: none !important;
  visibility: hidden !important;
}

/* Prevent Material-UI Select from opening modal/popover */
.MuiDialog-root .MuiSelect-root {
  pointer-events: auto !important;
}

.MuiDialog-root .MuiSelect-root[aria-expanded="true"] {
  pointer-events: auto !important;
}

/* Ensure native select styling */
.MuiDialog-root select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23312516' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2.5rem !important;
  width: 100% !important;
}

/* Allow Material-UI popover/menu to show for country select - style it as dropdown */

/* Style Material-UI Menu/Popover for country select as a normal dropdown (not a modal) */
.MuiDialog-root ~ .MuiMenu-root,
.MuiDialog-root ~ .MuiPopover-root,
.MuiMenu-root[role="presentation"],
.MuiPopover-root[role="presentation"] {
  position: absolute !important;
  z-index: 1300 !important; /* Above dialog but not modal-like */
}

/* Style the menu paper to look like a dropdown list */
.MuiMenu-paper,
.MuiPopover-paper {
  background-color: #FFFFFF !important; /* White background like native dropdown */
  border: 1px solid var(--mink-taupe, #998273) !important;
  border-radius: 0.125rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; /* Subtle shadow, not modal-like */
  max-height: 300px !important; /* Limit height like a dropdown */
  margin-top: 4px !important; /* Small gap from select field */
  padding: 0.25rem 0 !important;
  min-width: 200px !important;
}

/* Hide backdrop for country select menu - no modal overlay */
.MuiBackdrop-root:not(.MuiDialog-backdrop) {
  display: none !important;
  visibility: hidden !important;
}

/* Ensure menu appears below the select field, not centered */
.MuiPopover-root[role="presentation"] {
  position: absolute !important;
}

.MuiPopover-paper {
  margin: 0 !important;
  transform-origin: top !important;
}

/* Region dialog select list: same bg as fields + width from JS (--br-region-menu-width on .br-region-select-menu) */
.br-region-select-menu.MuiPaper-root,
.br-region-select-menu {
  background-color: var(--stone-beige, #D2C8BC) !important;
  border: 1px solid var(--mink-taupe, #998273) !important;
  min-width: var(--br-region-menu-width, 200px) !important;
  width: var(--br-region-menu-width, auto) !important;
  max-width: var(--br-region-menu-width, none) !important;
  box-sizing: border-box !important;
}

.br-region-select-menu .MuiMenuItem-root {
  color: var(--dark-mocha, #312516) !important;
  background-color: transparent !important;
}

.br-region-select-menu .MuiMenuItem-root:hover,
.br-region-select-menu .MuiMenuItem-root.Mui-selected,
.br-region-select-menu .MuiMenuItem-root.Mui-selected:hover {
  background-color: rgba(49, 37, 22, 0.12) !important;
  color: var(--dark-mocha, #312516) !important;
}

.MuiMenuItem-root {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--espresso-black, #231010) !important;
}

.MuiMenuItem-root:hover,
.MuiMenuItem-root.Mui-selected {
  background-color: rgba(144, 103, 77, 0.1) !important;
  color: var(--espresso-black, #231010) !important;
}

/* Additional targeting for region/language specific elements */
[class*="region"],
[class*="shipping"],
[class*="country"],
[class*="language-selector"] {
  font-family: 'The Year of the Camel', 'Aileron', sans-serif !important;
}

[class*="region"] h1,
[class*="region"] h2,
[class*="region"] h3,
[class*="region"] h4,
[class*="region"] h5,
[class*="region"] h6,
[class*="region"] p,
[class*="region"] span,
[class*="region"] label {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--espresso-black, #231010) !important;
}

[class*="region"] input,
[class*="region"] select {
  font-family: 'Aileron', sans-serif !important;
  border-color: var(--mink-taupe, #998273) !important;
  color: var(--espresso-black, #231010) !important;
  background-color: var(--stone-beige, #D2C8BC) !important;
}

[class*="region"] button,
[class*="region"] .btn {
  background-color: var(--espresso-black, #231010) !important;
  border-color: var(--espresso-black, #231010) !important;
  color: var(--stone-beige, #D2C8BC) !important;
  font-family: 'The Year of the Camel', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

[class*="region"] button:hover,
[class*="region"] .btn:hover {
  background-color: var(--warm-caramel, #90674D) !important;
  border-color: var(--warm-caramel, #90674D) !important;
}

/* MUI region/shipping dialog: generic [class*="region"] rules sit above — reassert transparent blocks, dark-mocha labels, stone-beige fields */
.MuiDialog-root .MuiTextField-root,
.MuiDialog-root .MuiFormControl-root {
  background-color: transparent !important;
}

.MuiDialog-root .MuiDialogContent-root .MuiBox-root,
.MuiDialog-root .MuiDialogContent-root .MuiStack-root {
  background-color: transparent !important;
}

.MuiDialog-root .MuiDialogContent-root .MuiInputLabel-root,
.MuiDialog-root .MuiDialogContent-root .MuiFormLabel-root {
  color: var(--dark-mocha, #312516) !important;
}

.MuiDialog-root .MuiDialogContent-root .MuiInputLabel-root.Mui-focused,
.MuiDialog-root .MuiDialogContent-root .MuiFormLabel-root.Mui-focused {
  color: var(--espresso-black, #231010) !important;
}

.MuiDialog-root .MuiOutlinedInput-root,
.MuiDialog-root .MuiDialogContent-root select,
.MuiDialog-root .MuiSelect-select {
  background-color: var(--stone-beige, #D2C8BC) !important;
  color: var(--dark-mocha, #312516) !important;
}

/* ============================================
   BR Hero Section - Two Images/Videos Side by Side
   ============================================ */

   body .container {
    max-width: 1880px !important;
   }

.br-hero-section {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* Ensure header and hero use same container width - both use Bootstrap's .container class */


.br-hero-row {
  margin: 0 auto;
  height: 90vh;
  position: relative;
  display: flex;
  width: 100%;
}

.br-hero-item {
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Left Image/Video - 50% width, full viewport height */
.br-hero-left {
  flex: 0 0 50%;
  width: 50%;
  height: 90vh;
}

.br-hero-left .br-hero-media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  mix-blend-mode: normal;
  transition: mix-blend-mode 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* Ensure no gaps between images */
  margin: 0;
  padding: 0;
}

.br-hero-left .br-hero-image,
.br-hero-left .br-hero-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stack duplicated images on top of each other - ensure perfect overlap */
.br-hero-left .br-hero-image-1,
.br-hero-left .br-hero-image-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: clip-path, z-index, mix-blend-mode; /* Optimize for animation */
  /* Ensure images always cover each other - no gaps */
  margin: 0;
  padding: 0;
  /* Images are always fully present, clip-path controls visibility for reveal effect */
}

/* Initial states - before animation starts */
.br-hero-left .br-hero-image-1 {
  z-index: 2;
  clip-path: inset(0 0 0 0); /* Fully visible */
  mix-blend-mode: normal;
  isolation: isolate; /* Create stacking context for blend mode */
}

.br-hero-left .br-hero-image-2 {
  z-index: 1;
  clip-path: inset(100% 0 0 0); /* Hidden from top, will reveal down */
  mix-blend-mode: normal;
  isolation: isolate; /* Create stacking context for blend mode */
}

.br-hero-left .br-hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* Right Image/Video - 50% width, full viewport height */
.br-hero-right {
  flex: 0 0 50%;
  width: 50%;
  height: 90vh;
}

.br-hero-right .br-hero-media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* mix-blend-mode removed - will be applied to individual images via animation */
}

.br-hero-right .br-hero-image,
.br-hero-right .br-hero-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stack duplicated images on top of each other - ensure perfect overlap */
.br-hero-right .br-hero-image-1,
.br-hero-right .br-hero-image-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: clip-path, z-index, mix-blend-mode; /* Optimize for animation */
  /* Ensure images always cover each other - no gaps */
  margin: 0;
  padding: 0;
  /* Images are always fully present, clip-path controls visibility for reveal effect */
}

/* Initial states - before animation starts */
.br-hero-right .br-hero-image-2 {
  z-index: 2;
  clip-path: inset(0 0 0 0); /* Fully visible */
  mix-blend-mode: luminosity;
  isolation: isolate; /* Create stacking context for blend mode */
}

.br-hero-right .br-hero-image-1 {
  z-index: 1;
  clip-path: inset(0 0 100% 0); /* Hidden from bottom, will reveal up */
  mix-blend-mode: luminosity;
  isolation: isolate; /* Create stacking context for blend mode */
}

/* Prevent any transitions on images before animation starts */
.br-hero-left .br-hero-image-1,
.br-hero-left .br-hero-image-2,
.br-hero-right .br-hero-image-1,
.br-hero-right .br-hero-image-2 {
  transition: none; /* No transitions until animation starts */
}

/* Ensure initial states are maintained until animation starts */
/* GSAP handles all clip-path animations - these only set blend modes */
body.is-loaded .br-hero-left .br-hero-image-1,
body:not(.is-loading):not(.br-splash-active) .br-hero-left .br-hero-image-1 {
  mix-blend-mode: normal;
}

body.is-loaded .br-hero-left .br-hero-image-2,
body:not(.is-loading):not(.br-splash-active) .br-hero-left .br-hero-image-2 {
  mix-blend-mode: normal;
}

body.is-loaded .br-hero-right .br-hero-image-2,
body:not(.is-loading):not(.br-splash-active) .br-hero-right .br-hero-image-2 {
  mix-blend-mode: luminosity !important;
}

body.is-loaded .br-hero-right .br-hero-image-1,
body:not(.is-loading):not(.br-splash-active) .br-hero-right .br-hero-image-1 {
  mix-blend-mode: luminosity !important;
}

.br-hero-right .br-hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* Video Container - General */
.br-hero-video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* HTML5 Video Element */
.br-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play/Pause Button */
.br-hero-play-pause-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.br-hero-play-pause-btn:hover {
  opacity: 0.8;
}

.rtl .br-hero-play-pause-btn {
  transform: translate(50%, -50%);
}

.br-hero-play-icon {
  width: 4rem;
  height: 4rem;
  display: block;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Video Iframe Container */
.br-hero-iframe-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: var(--espresso-black, #231010);
}

.br-hero-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.br-hero-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 21;
  color: var(--stone-beige, #D2C8BC);
  font-size: 2rem;
  font-weight: 300;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 16, 16, 0.5);
  border-radius: 50%;
  transition: background 0.3s ease;
  text-decoration: none;
}

.br-hero-close-btn:hover {
  background: rgba(35, 16, 16, 0.8);
  color: var(--stone-beige, #D2C8BC);
  text-decoration: none;
}

.rtl .br-hero-close-btn {
  right: auto;
  left: 1rem;
}

/* Overlay Mask: Chestnut Brown with 50% opacity + Checkers Pattern - covers both images */
.br-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: var(--chestnut-brown, #6C3E24); */
  opacity: 0.30;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  z-index: 5;
  pointer-events: none;
}

/* Text at bottom of right image/video */
.br-hero-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 2rem;
  z-index: 10;
  color: var(--stone-beige, #D2C8BC);
  font-family: 'The Year of the Camel', sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.br-hero-title {
  font-size: 5rem;
  font-weight: 400;
  margin: 0;
  color: var(--stone-beige, #D2C8BC);
  font-family: 'The Year of the Camel', sans-serif;
  text-align: center;
  overflow: hidden;
}

.br-hero-word {
  will-change: transform, opacity;
  white-space: pre-wrap;
  display: inline-block;
  overflow: hidden;
}

.br-hero-description {
  font-size: 1.125rem;
  font-weight: 300;
  margin: 0;
  color: var(--stone-beige, #D2C8BC);
  font-family: 'The Year of the Camel', sans-serif;
}

/* Responsive Design */
@media (max-width: 991.98px) {
  .br-hero-row {
    flex-direction: column;
    height: 100vh;
  }
  
  .br-hero-left,
  .br-hero-right {
    flex: 0 0 50%;
    width: 100%;
    height: 50vh;
  }
  
  .br-hero-text {
    bottom: 1rem;
    padding: 1.5rem;
  }
  
  .br-hero-title {
    font-size: 3.5rem;
  }
  
  .br-hero-description {
    font-size: 1rem;
  }
  
  .br-hero-play-icon {
    width: 3rem;
    height: 3rem;
  }
}

@media (max-width: 575.98px) {
  .br-hero-left,
  .br-hero-right {
    height: 50vh;
  }
  
  .br-hero-text {
    bottom: 0.75rem;
    padding: 1rem;
  }
  
  .br-hero-title {
    font-size: 1.25rem;
  }
  
  .br-hero-description {
    font-size: 0.875rem;
  }
}

/* ============================================
   BR New In Section
   ============================================ */

.br-new-in-section {
  background-color: var(--stone-beige, #D2C8BC);
  padding: 5rem 0;
}

/* Section Header */
.br-new-in-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding: 0 15px; /* Match Bootstrap container padding */
}

.br-new-in-header-left,
.br-new-in-header-right {
  display: flex;
  align-items: center;
  /* gap: 1rem; */
  flex: 1;
}

.br-new-in-header-right {
  justify-content: flex-end;
  display: flex;
  align-items: center;
  /* gap: 1rem; */
}

.br-new-in-title {
  font-family: 'Aileron', sans-serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--espresso-black, #231010);
  margin: 0;
  text-align: center;
  flex: 1;
}

/* Arabic title font weight */
.rtl .br-new-in-title {
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 400;
}

.br-new-in-count {
  font-family: 'Aileron', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--espresso-black, #231010);
  text-transform: none !important;
}

/* Force The Year of the Camel font for Curated Selection header in both languages */
.br-curated-selection-section .br-new-in-count {
  font-family: 'The Year of the Camel', sans-serif !important;
  text-transform: none !important;
}

/* Force The Year of the Camel font for Curated Selection title in both languages */
.br-curated-selection-section .br-new-in-title {
  font-family: 'The Year of the Camel', sans-serif !important;
}

.br-new-in-count-number {
  font-family: 'Aileron', sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--mink-taupe, #998273);
}

.br-new-in-show-all,
a.br-new-in-show-all {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--mink-taupe, #998273);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 0.45px;
  text-underline-offset: 2.5px;
  text-underline-position: from-font;
  cursor: pointer;
  display: inline-block;
}

a.br-new-in-show-all {
  text-decoration: underline;
}

a.br-new-in-show-all:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* English styling for show all */
:not(.rtl) .br-new-in-show-all,
:not(.rtl) a.br-new-in-show-all {
  font-family: 'Aileron', sans-serif;
  text-decoration: none;
}

.br-new-in-nav-btn {
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.br-new-in-nav-btn:hover {
  opacity: 0.7;
}

.br-new-in-nav-icon {
  width: 1rem;
  height: 1rem;
}

/* Flip arrows for RTL only */
.rtl .br-new-in-nav-icon {
  transform: scaleX(-1);
}

/* Products Grid */
.br-new-in-products-wrapper {
  position: relative;
}

.br-new-in-products-slider {
  margin: 0 -0.75rem;
}

.br-new-in-product-col {
  padding: 0 0.75rem;
}

/* Product Item */
.br-new-in-product-item {
  position: relative;
  background: transparent;
  transition: transform 0.3s ease;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Out of stock indicator */
.br-new-in-product-item.br-product-out-of-stock {
  opacity: 0.7;
}

.br-new-in-product-item.br-product-out-of-stock .br-new-in-product-image {
  filter: grayscale(0.3);
}

.br-new-in-product-item.br-product-out-of-stock::after {
  content: '';
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--mink-taupe, #998273);
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
}

.br-new-in-product-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Product Image Container */
.br-new-in-product-image-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 159.633%; /* 522/327 * 100 = 159.633% (maintains 109/174 aspect ratio) */
  overflow: hidden;
  background: var(--white-color, #fff);
  /* Ensure proper overflow for slide animations */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Ensure images maintain aspect ratio */
.br-new-in-product-image-wrapper .br-new-in-product-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Product Info - transparent background */
.br-new-in-product-info {
  background: transparent;
  width: 100%;
  min-height: 4rem; /* Reserve space to prevent layout shift on hover */
  position: relative;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}

.br-new-in-product-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.br-new-in-product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, 
              visibility 0.2s ease-in-out;
  will-change: opacity, transform;
  transform: translateX(0);
  /* Ensure images can slide properly */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.br-new-in-product-image.active {
  opacity: 1;
  visibility: visible;
}

.br-new-in-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image Navigation Arrows */
.br-new-in-image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 15;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.br-new-in-image-nav:hover {
  background: transparent;
  opacity: 0.7;
}

.br-new-in-image-prev {
  left: 0.5rem;
}

.br-new-in-image-next {
  right: 0.5rem;
}

/* Multicolor swatch — same treatment on PDP buttons and collection cards */
.br-color-swatch--multicolor,
.br-new-in-color-swatch.br-color-swatch--multicolor {
  background: conic-gradient(
    from 45deg,
    #231010 0deg,
    #8b4513 90deg,
    #d2c8bc 180deg,
    #ffc0cb 270deg,
    #231010 360deg
  ) !important;
  background-color: transparent !important;
}

.br-color-value.br-color-swatch--multicolor .br-color-swatch {
  background: transparent !important;
  background-color: transparent !important;
}

@media (max-width: 767.98px) {
  .br-new-in-image-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .br-new-in-product-item:hover .br-new-in-image-nav {
    display: none !important;
  }
}

.br-new-in-image-nav img {
  width: 1rem;
  height: 1rem;
}

/* Don't flip product image navigation arrows for RTL - keep original direction */

.br-new-in-product-item:hover .br-new-in-image-nav {
  display: flex;
}

/* Image Progress Bar */
.br-new-in-image-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  display: none;
}

.br-new-in-product-item:hover .br-new-in-image-progress {
  display: block;
}

.br-new-in-image-progress-track {
  display: flex;
  gap: 0;
  width: 100%;
  height: 0.125rem;
  /* background: rgba(35, 16, 16, 0.3); espresso-black with opacity */
  border-radius: 0;
}

.br-new-in-image-progress-segment {
  flex: 1;
  height: 100%;
  /* background: rgba(35, 16, 16, 0.5); espresso-black with opacity */
  border-radius: 0;
  cursor: pointer;
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: background;
}

.br-new-in-image-progress-segment:hover {
  background: rgba(35, 16, 16, 0.7); /* espresso-black with opacity */
}

.br-new-in-image-progress-segment.active {
  background: var(--espresso-black, #231010); /* solid espresso-black */
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* NEW IN Badge */
.br-new-in-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: transparent;
  color: var(--PLUM, #2F191E);
  padding: 0.25rem 0.5rem;
  font-family: 'Aileron', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 5;
}

/* Arabic badge styling */
.rtl .br-new-in-badge {
  left: auto;
  right: 0.75rem;
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 400;
}

/* Product Info - Merged with rule above at line 2464 */

.br-new-in-product-name {
  font-family: 'Aileron', sans-serif;
  font-size: 0.875rem; /* 14px */
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--PLUM, #2F191E);
  margin-bottom: 0.5rem;
  transition: opacity 0.3s ease;
  order: 1; /* First when not hovered */
}

/* Arabic product name styling */
.rtl .br-new-in-product-name {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--espresso-black, #231010);
  text-transform: none;
}

/* Product Sizes (shown on hover) */
.br-new-in-product-sizes {
  font-family: 'Aileron', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--espresso-black, #231010);
  margin-bottom: 0.5rem;
  display: none; /* Hidden by default */
  gap: 0.75rem;
  flex-wrap: wrap;
  min-height: 1.5rem; /* Reserve space to prevent layout shift */
  order: 1; /* First when hovered (before price) */
}

/* Show sizes on hover */
.br-new-in-product-item:hover .br-new-in-product-sizes {
  display: flex !important;
}

/* Hide name on hover */
.br-new-in-product-item:hover .br-new-in-product-name {
  display: none !important;
}

/* Hide color count on hover */
.br-new-in-product-item:hover .br-new-in-product-colors-count {
  display: none !important;
}

/* Show color swatches on hover */
.br-new-in-product-item:hover .br-new-in-product-colors {
  display: flex !important;
}

.br-new-in-size {
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  font-family: 'Aileron', sans-serif;
}

/* In-stock length options: PLUM color (matching single product page) */
.br-new-in-size.available {
  color: var(--plum, #2F191E) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

.br-new-in-size.available:hover {
  color: var(--plum, #2F191E) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--plum, #2F191E) !important;
  text-underline-offset: 0.15em !important;
}

.br-new-in-size.available.selected {
  color: var(--plum, #2F191E) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--plum, #2F191E) !important;
  text-underline-offset: 0.15em !important;
}

/* Out-of-stock length options: mink-taupe with strikethrough (matching single product page) */
.br-new-in-size.unavailable {
  color: var(--mink-taupe, #998273) !important;
  text-decoration: line-through !important;
  text-decoration-color: var(--mink-taupe, #998273) !important;
  cursor: not-allowed !important;
  opacity: 0.85 !important;
}

.br-new-in-size.unavailable:hover {
  color: var(--mink-taupe, #998273) !important;
  text-decoration: line-through !important;
  text-decoration-color: var(--mink-taupe, #998273) !important;
  background: transparent !important;
}

.br-new-in-color-swatch.selected {
  border: 2px solid var(--espresso-black, #231010);
  transform: scale(1.15);
}

/* Price */
.br-new-in-product-price {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.125rem;
  order: 2; /* Always second (middle position) */
  font-weight: 400;
  color: var(--espresso-black, #231010);
  margin-bottom: 0.5rem;
}

.br-new-in-price,
.br-new-in-price-sale {
  display: inline-block;
}

/* Hide card labels (colors/sizes) when section has show_card_labels off */
.br-new-in-hide-labels .br-new-in-product-colors-count,
.br-new-in-hide-labels .br-new-in-product-sizes,
.br-new-in-hide-labels .br-new-in-product-colors {
  display: none !important;
}

/* Colors Count */
.br-new-in-product-colors-count {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--espresso-black, #231010);
  transition: opacity 0.3s ease;
  order: 3; /* Third when not hovered */
}

/* Colors Count Number (Aileron in both English and Arabic) */
.br-new-in-colors-number {
  font-family: 'Aileron', sans-serif !important;
}

/* Colors Count Text (Aileron in English, The Year of the Camel in Arabic) */
.br-new-in-colors-text {
  font-family: 'Aileron', sans-serif !important;
}

/* Arabic: Only the text "Colors" uses The Year of the Camel */
.rtl .br-new-in-colors-text {
  font-family: 'The Year of the Camel', sans-serif !important;
}

/* Colors Swatches (shown on hover) */
.br-new-in-product-colors {
  display: none; /* Hidden by default */
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  min-height: 1.5rem; /* Reserve space */
  order: 3; /* Third when hovered (after price) */
}

.br-new-in-color-swatch {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  border-radius: 50%;
  border: none;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.br-new-in-color-swatch.selected {
  border: 1.5px solid var(--espresso-black, #231010);
}

.br-new-in-color-swatch:hover {
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 991.98px) {
  .br-new-in-title {
    font-size: 1.5rem;
  }
}

/* Mobile: hide section header prev/next (slick is off ≤768px; arrows are nonfunctional) */
@media (max-width: 768px) {
  .br-new-in-header {
    flex-direction: row;
    gap: 0.5rem;
    text-align: center;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .br-new-in-header .br-new-in-nav-btn {
    display: none !important;
  }
  
  .br-new-in-header-left,
  .br-new-in-header-right {
    justify-content: center;
    flex: 0 0 auto; /* Don't grow, maintain size */
  }
  
  .br-new-in-title {
    font-size: 1.5rem;
    flex: 1; /* Take remaining space */
    text-align: center;
  }

  .br-new-in-count {
    font-size: 0.875rem;
  }

  /* Mobile: 2 product cards per row */
  /* Apply to both New In and Curated Selection (curated has br-new-in-section class) */
  .br-new-in-products-slider,
  .br-curated-selection-section .br-new-in-products-slider,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider,
  #curated-selection-slider {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important; /* Further reduced gap between cards */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .br-new-in-product-col,
  .br-curated-selection-section .br-new-in-product-col,
  .br-product-page .br-curated-selection-section .br-new-in-product-col {
    width: 100% !important;
    padding: 0 !important;
  }

  /* Reduce image size on mobile */
  .br-new-in-product-image-wrapper {
    padding-bottom: 140%; /* Slightly less tall on mobile */
  }
}

@media (max-width: 575.98px) {
  .br-new-in-section {
    padding: 2rem 0;
  }
  
  .br-new-in-title {
    font-size: 1.25rem;
  }

  .br-new-in-count {
    font-size: 0.75rem;
  }

  .br-new-in-nav-icon {
    width: 1rem;
    height: 1rem;
  }
}

/* About Section */
.br-about-section {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.br-about-container {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.br-about-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.br-about-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.br-about-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.br-about-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: 1;
}

.br-about-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--stone-beige, #D2C8BC);
  opacity: 0.12;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}

.br-about-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 5rem 0;
  text-align: center;
}

.br-about-main-text {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.br-about-main-text-icon {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Editable main text (when replacing default SVG) - size options */
.br-about-main-text-editable {
  font-family: var(--br-font-heading, 'The Year of the Camel', sans-serif);
  margin: 0;
  line-height: 1.3;
  max-width: 100%;
}
.br-about-main-text-editable.br-about-main-text-small {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}
.br-about-main-text-editable.br-about-main-text-medium {
  font-size: clamp(1.25rem, 3.5vw, 2rem);
}
.br-about-main-text-editable.br-about-main-text-large {
  font-size: clamp(1.5rem, 5vw, 2.75rem);
}

.br-about-description {
  color: var(--stone-beige, #D2C8BC);
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.525rem;
  line-height: 1.8;
  font-weight: 300;
  max-width: 800px;
  margin: 0 auto;
}

.br-about-description p {
  margin: 0;
  /* margin-bottom: 1rem; */
}

.br-about-description p:last-child {
  margin-bottom: 0;
}

/* Text Mask Animation for About Section */
.br-about-description .about-us-text-mask-line {
  overflow: hidden;
  display: block;
}

.br-about-description .about-us-text-mask-line p {
  transform: translateY(100%);
}

/* Fallback: Show text if GSAP not available */
.no-js .br-about-description .about-us-text-mask-line p,
.br-about-description .about-us-text-mask-line p[data-animated="true"] {
  transform: translateY(0);
}

/* Arabic description styling */
.rtl .br-about-description {
  font-size: 1.125rem; /* 18px */
  font-style: normal;
  font-weight: 500;
}

.rtl .br-about-description-line1,
.rtl .br-about-description-line2 {
  display: block;
}

/* English description styling */
:not(.rtl) .br-about-description {
  font-family: 'The Year of the Camel', sans-serif;
}

/* Discover More Button */
.br-about-button-wrapper {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

.br-about-discover-btn {
  display: inline-grid;
  padding: 0.9375rem 6.3125rem; /* 15px 101px */
  background: var(--stone-beige, #D2C8BC);
  color: var(--espresso-black, #231010);
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  row-gap: 0.625rem; /* 10px */
  column-gap: 0.625rem; /* 10px */
  grid-template-rows: repeat(1, fit-content);
  grid-template-columns: repeat(1, fit-content);
}

.br-about-discover-btn:hover {
  opacity: 0.9;
  text-decoration: none;
  color: var(--espresso-black, #231010);
}

/* Responsive */
@media (max-width: 768px) {
  .br-about-container {
    min-height: 60vh;
  }
  
  .br-about-content {
    padding: 3rem 0;
  }
  
  .br-about-description {
    font-size: 1rem;
    padding: 0 1rem;
  }
}

/* BR Soul Section */
.br-soul-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--stone-beige, #D2C8BC);
  display: flex;
  align-items: center;
  justify-content: center;
}

.br-soul-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.br-soul-background-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  z-index: 1;
  pointer-events: none;
}

.br-soul-background {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

.br-soul-bg-image,
.br-soul-bg-video {
  width: auto;
  height: auto;
  max-width: 400px;
  max-height: 400px;
  object-fit: contain;
  display: block;
  mix-blend-mode: luminosity;
  opacity: 0.45;
}

.br-soul-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.br-soul-background .br-soul-bg-video {
  position: relative;
  max-width: 400px;
  max-height: 400px;
  object-fit: contain;
}

.br-soul-icon-wrapper {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}

.br-soul-icon {
  max-width: 100%;
  height: auto;
  display: block;
  width: auto;
  max-width: 300px;
  max-height: 300px;
}

.br-soul-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 5rem 0;
  text-align: center;
}

.br-soul-title {
  color: var(--chestnut-brown, #6C3E24);
  text-align: center;
  font-size: 3rem; /* 53.5px */
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: lowercase;
  margin-bottom: 2rem;
}

:not(.rtl) .br-soul-title {
  font-family: 'MrBlaketon Pro', 'Mr Blaketon', serif;
}

.rtl .br-soul-title {
  font-family: 'The Year of the Camel', sans-serif;
}

.br-soul-paragraph {
  color: var(--chestnut-brown, #6C3E24);
  text-align: center;
  font-size: 1.625rem; /* 26px */
  font-style: normal;
  font-weight: 600;
  line-height: 2.125rem; /* 34px */
  text-transform: uppercase;
  max-width: 800px;
  margin: 0 auto;
}

:not(.rtl) .br-soul-paragraph {
  font-family: 'Aileron', sans-serif;
}

.rtl .br-soul-paragraph {
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 500;
}

/* Text Mask Animation for Soul Section */
.br-soul-title .about-us-text-mask-line,
.br-soul-paragraph .about-us-text-mask-line {
  overflow: hidden;
  display: block;
}

.br-soul-title .about-us-text-mask-line span,
.br-soul-paragraph .about-us-text-mask-line span {
  transform: translateY(100%);
  display: block;
}

/* Fallback: Show text if GSAP not available */
.no-js .br-soul-title .about-us-text-mask-line span,
.no-js .br-soul-paragraph .about-us-text-mask-line span,
.br-soul-title .about-us-text-mask-line span[data-animated="true"],
.br-soul-paragraph .about-us-text-mask-line span[data-animated="true"] {
  transform: translateY(0);
}

/* Title Between Sections */
.br-what-we-care-title-between {
  background-color: var(--stone-beige, #D2C8BC);
  padding-bottom: 2rem;
  text-align: center;
}

.br-what-we-care-title-between-text {
  color: var(--chestnut-brown, #6C3E24);
  font-size: 1.75rem; /* 28px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

:not(.rtl) .br-what-we-care-title-between-text {
  font-family: 'Aileron', sans-serif;
}

.rtl .br-what-we-care-title-between-text {
  font-family: 'The Year of the Camel', sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-size: 2.75rem;
}

/* Responsive */
@media (max-width: 768px) {
  .br-soul-section {
    min-height: 80vh;
  }
  
  .br-soul-content {
    padding: 3rem 0;
  }
  
  .br-soul-title {
    font-size: 2rem; /* 32px */
    padding: 0 1rem;
  }
  
  .br-soul-paragraph {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
    padding: 0 1rem;
  }
}

/* What We Care About Section */
.br-what-we-care-section {
  position: relative;
  background: url('https://raw.githubusercontent.com/YasminOE/br-images/main/home-we-care.jpg') lightgray 50% / cover no-repeat;
  background-blend-mode: multiply;
  padding: 5rem 0;
  color: var(--stone-beige, #D2C8BC);
  overflow: hidden;
  min-height: auto;
  margin: 1rem;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.25);
  /* border: 1px solid rgba(210, 200, 188, 0.15); */
}

.br-what-we-care-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-position: center center;
  background-repeat: repeat;
  background-size: 150% auto;
  background-blend-mode: multiply;
  transform: rotate(90deg) translate(-50%, -50%);
  transform-origin: center;
  top: 50%;
  left: 50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
}

.br-what-we-care-section .container {
  position: relative;
  z-index: 1;
}

/* Section Title */
.br-what-we-care-title-wrapper {
  text-align: center;
  margin-bottom: 4rem;
  padding-top: 2rem;
}

.br-what-we-care-title {
  color: var(--stone-beige, #D2C8BC);
  font-family: 'Aileron', sans-serif;
  font-size: 2.25rem; /* 36px - increased from 28px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.rtl .br-what-we-care-title {
  font-family: 'The Year of the Camel', sans-serif;
}

/* Values List – full width so each card’s hover area extends to the right edge */
.br-what-we-care-values-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 2rem;
  max-width: 100%;
  width: 100%;
}

.br-what-we-care-value-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 130px;
  width: 100%; /* Full width so hover works all the way to the right */
  cursor: pointer;
}

.br-what-we-care-value-content {
  flex: 1;
  position: relative;
  max-width: 100%; /* Cards width should be 100% on desktop */
}

.br-what-we-care-value-title {
  color: var(--stone-beige, #D2C8BC);
  font-family: 'MrBlaketon Pro', 'Mr Blaketon', serif;
  font-size: 3.71875rem; /* 59.5px */
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  margin: 0;
  transition: opacity 0.3s ease;
  width: 100%; /* Title takes full width */
}

.br-what-we-care-value-subtext {
  color: var(--light-blue, #CAE8F9);
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.55rem;
  font-weight: 400;
  margin: 0 0 1rem 0;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 50%; /* Paragraph should remain as is - keep original width */
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.rtl .br-what-we-care-value-title {
  font-family: 'The Year of the Camel', sans-serif;
  text-align: right;
}

.rtl .br-what-we-care-value-subtext {
  font-family: 'The Year of the Camel', sans-serif;
  text-align: right;
  left: auto;
  right: 0;
}

.br-what-we-care-image-wrapper {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25%;
  max-width: 320px;
  height: 320px;
  background: #000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* GSAP will handle transform animations smoothly */
  will-change: transform;
}

.br-what-we-care-value-item:first-child .br-what-we-care-image-wrapper {
  top: 149%;
  transform: translateY(-50%);
}

.br-what-we-care-value-item:last-child .br-what-we-care-image-wrapper {
  top: -50%;
  transform: translateY(-50%);
}

/* RTL - Arabic: Images on the left */
.rtl .br-what-we-care-image-wrapper {
  right: auto;
  left: 0;
}

.rtl .br-what-we-care-value-content {
  margin-left: 0;
}

.br-what-we-care-image,
.br-what-we-care-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  mix-blend-mode: luminosity;
}

/* Desktop: Hover effects (not click/expand) */
.br-what-we-care-value-item:hover .br-what-we-care-value-title {
  opacity: 0;
}

.br-what-we-care-value-item:hover .br-what-we-care-value-subtext {
  opacity: 1;
  transform: translateY(0);
  position: relative;
  max-width: 50%; /* Paragraph should remain as is - keep original width */
}

.br-what-we-care-value-item:hover .br-what-we-care-image-wrapper {
  opacity: 1;
  visibility: visible;
}

/* Disable hover effects on mobile – no shrink (desktop :hover sets max-width: 50%); tap/.active controls state */
@media (max-width: 768px) {
  .br-what-we-care-value-item:hover .br-what-we-care-value-title {
    opacity: 1; /* Keep title visible on mobile */
  }
  
  .br-what-we-care-value-item:hover .br-what-we-care-value-subtext {
    opacity: 0; /* Controlled by .active class on mobile */
    transform: translateY(10px);
    position: relative;
    max-width: 100% !important; /* Prevent desktop hover rule from shrinking text to 50% */
  }
  
  .br-what-we-care-value-item:hover .br-what-we-care-image-wrapper {
    opacity: 0; /* Controlled by .active class on mobile */
    visibility: hidden;
  }
}

/* Responsive */
@media (max-width: 992px) {
  .br-what-we-care-top-section {
    margin-bottom: 3rem;
  }

  .br-what-we-care-mannequin-wrapper {
    margin-top: 2rem;
  }

  .br-what-we-care-value-title {
    font-size: 2.5rem;
  }

  .br-what-we-care-image-wrapper {
    width: 30%;
    max-width: 280px;
    height: 350px;
  }
}

@media (max-width: 768px) {
  .br-what-we-care-section {
    padding: 3rem 0;
    margin: 1rem 0.5rem; /* Reduce margin on mobile */
  }

  /* Remove rotation from background image on mobile */
  .br-what-we-care-section::before {
    transform: none !important; /* Remove rotation */
    background-size: cover;
    background-position: center center;
  }

  .br-what-we-care-value-item {
    flex-direction: column;
    align-items: center; /* Center items on mobile */
    min-height: auto; /* Remove min-height to reduce space */
    margin-top: 0; /* No top margin */
    margin-bottom: 3rem; /* A bit more space between titles on mobile */
    padding: 0; /* Remove any padding */
    cursor: pointer;
  }
  
  .br-what-we-care-value-content {
    max-width: 100%;
    text-align: center; /* Center content on mobile */
    order: 1; /* Content appears first */
  }
  
  .br-what-we-care-value-subtext {
    max-width: 100%;
    text-align: center; /* Center subtext on mobile */
    position: relative !important; /* Override absolute positioning on mobile */
    opacity: 0;
    transform: translateY(10px);
    max-height: 0;
    overflow: hidden;
    margin: 0;
    pointer-events: auto;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                margin 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .br-what-we-care-value-item.active .br-what-we-care-value-subtext {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
    margin-bottom: 1rem;
  }
  
  .br-what-we-care-value-title {
    font-size: 2.5rem; /* Increased from 2rem */
    text-align: center; /* Center title on mobile */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
    line-height: 1.05; /* Tighter so titles sit closer vertically */
  }
  
  .br-what-we-care-value-item.active .br-what-we-care-value-title {
    opacity: 0.6;
  }
  
  /* Collapsed: no height so titles sit close; expanded: show image with smooth transition */
  .br-what-we-care-image-wrapper {
    position: relative;
    left: auto;
    top: auto;
    transform: none !important; /* Override GSAP transforms on mobile */
    width: 100%;
    max-width: 100%;
    height: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    visibility: hidden;
    order: 2; /* Image appears after content */
    pointer-events: none;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .br-what-we-care-value-item.active .br-what-we-care-image-wrapper {
    height: auto;
    max-height: 220px;
    opacity: 0.7;
    visibility: visible;
    margin-top: 1rem;
  }
  
  .br-what-we-care-image {
    opacity: 1;
  }

  .br-what-we-care-values-list {
    gap: 0; /* Remove gap between blocks */
    padding: 0 1rem;
    margin: 0; /* Remove any margin */
  }

  .br-what-we-care-title-wrapper {
    margin-bottom: 2rem; /* Reduce margin */
    padding-top: 1rem;
  }

  .br-what-we-care-title {
    font-size: 1.875rem; /* 30px - larger on mobile */
    text-align: center; /* Center title on mobile */
  }

  .br-what-we-care-title-between-text {
    text-align: center; /* Center title between text on mobile */
  }
}

/* BR Footer */
.br-footer {
  position: relative;
  background-color: var(--plum, #2F191E);
  color: var(--stone-beige, #D2C8BC);
  padding: 5rem 4rem; /* 80px top/bottom, 64px left/right */
  min-height: 12.25rem;
  height: auto;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  box-sizing: border-box;
}

.br-footer-container {
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

@media (max-width: 767.98px) {
  .br-footer-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.br-footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.br-footer-social {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  order: 3;
  flex-wrap: wrap;
  max-width: 100%;
}

.br-footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
  min-width: 1.125rem;
}

.br-footer-social-link:hover {
  opacity: 0.7;
}

.br-footer-social-link-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.br-footer-social-icon {
  width: 1.125rem; /* 18px */
  height: 1.125rem; /* 18px */
  display: block;
  filter: brightness(0) saturate(100%) invert(89%) sepia(8%) saturate(500%) hue-rotate(5deg) brightness(95%) contrast(88%);
}

.br-footer-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  order: 2;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.br-footer-nav-link {
  color: var(--stone-beige, #D2C8BC);
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.3s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.br-footer-nav-link:hover {
  opacity: 0.7;
  text-decoration: none;
  color: var(--stone-beige, #D2C8BC);
}

.br-footer-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  order: 1;
  flex-shrink: 0;
  max-width: 100%;
}

/* Mobile Columns - Hidden on Desktop by default; logo column shown on desktop */
.br-footer-right-column,
.br-footer-social-mobile,
.br-footer-nav-mobile {
  display: none;
}

/* Desktop: show left column (logo only) so footer logo is visible */
@media (min-width: 768px) {
  .br-footer-left-column {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    order: 1;
    flex-shrink: 0;
  }
  .br-footer-left-column .br-footer-social-mobile {
    display: none !important;
  }
}

.br-footer-logo-img {
  width: auto;
  height: 6.5rem; /* 104px */
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/* RTL Support */
.rtl .br-footer-content {
  flex-direction: row-reverse;
}

.rtl .br-footer-social {
  order: 3;
}

.rtl .br-footer-nav {
  order: 2;
}

.rtl .br-footer-logo {
  order: 1;
}

/* Responsive - Two Column Layout for Small Screens */
@media (max-width: 767.98px) {
  .br-footer {
    padding: 3rem 2rem;
    height: auto;
    min-height: auto;
    justify-content: center;
  }
  
  .br-footer-container {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  
  /* Hide desktop elements on small screens */
  .br-footer-social,
  .br-footer-nav {
    display: none;
  }
  
  /* Show mobile columns */
  .br-footer-left-column,
  .br-footer-right-column {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    flex-shrink: 0;
  }
  
  .br-footer-social-mobile,
  .br-footer-nav-mobile {
    display: flex;
  }
  
  .br-footer-content {
    flex-direction: row !important;
    justify-content: center;
    align-items: stretch;
    gap: 3rem;
    text-align: left;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
  }
  
  .br-footer-left-column {
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
    padding-right: 3rem;
    align-items: center;
    text-align: center;
    align-self: stretch;
  }
  
  .br-footer-left-column::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--stone-beige, #D2C8BC);
    opacity: 0.3;
    height: 100%;
  }
  
  .br-footer-right-column {
    flex: 0 0 auto;
    align-items: center;
    text-align: center;
    min-width: 0;
    padding-left: 0;
    align-self: stretch;
  }
  
  .br-footer-social-mobile {
    flex-direction: row;
    gap: 1.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .br-footer-social-mobile .br-footer-social-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .br-footer-social-mobile .br-footer-social-link {
    padding: 0.5rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .br-footer-nav-mobile {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
  .br-footer-logo {
    order: initial !important;
    justify-content: center;
  }
  
  .br-footer-logo-img {
    height: 6rem;
  }
  
  /* RTL Support for Small Screens */
  .rtl .br-footer-content {
    flex-direction: row-reverse;
  }
  
  .rtl .br-footer-left-column {
    align-items: center;
    text-align: center;
    padding-right: 0;
    padding-left: 3rem;
  }
  
  .rtl .br-footer-left-column::after {
    right: auto;
    left: 0;
  }
  
  .rtl .br-footer-right-column {
    align-items: center;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  
  .rtl .br-footer-nav-mobile {
    align-items: center;
  }
  
  .rtl .br-footer-logo {
    justify-content: center;
  }
}

/* Tablet - Keep desktop layout but adjust spacing */
@media (min-width: 768px) and (max-width: 991.98px) {
  .br-footer {
    padding: 3rem 2rem;
    height: auto;
    min-height: auto;
  }
  
  .br-footer-content {
    gap: 1.5rem;
  }
  
  .br-footer-logo-img {
    height: 6rem;
  }
}

@media (max-width: 575.98px) {
  .br-footer {
    padding: 2.5rem 1rem;
  }
  
  .br-footer-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .br-footer-content {
    gap: 1.5rem;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: stretch;
  }
  
  .br-footer-left-column {
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
    padding-right: 1.5rem;
    align-items: center;
    text-align: center;
    align-self: stretch;
  }
  
  .br-footer-left-column::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--stone-beige, #D2C8BC);
    opacity: 0.3;
    height: 100%;
  }
  
  .br-footer-right-column {
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 0;
    align-items: center;
    text-align: center;
    align-self: stretch;
  }
  
  .br-footer-social-mobile {
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .br-footer-social-mobile .br-footer-social-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
  
  .br-footer-social-mobile .br-footer-social-link {
    padding: 0.5rem;
    min-width: 2.125rem;
    min-height: 2.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .br-footer-nav-mobile {
    gap: 0.5rem;
    align-items: center;
  }
  
  .br-footer-nav-link {
    font-size: 0.9375rem;
    white-space: nowrap;
    text-align: center;
  }
  
  .br-footer-logo {
    justify-content: center;
  }
  
  .br-footer-logo-img {
    height: 4.5rem;
    max-width: 100%;
  }
  
  .br-footer-social-mobile {
    gap: 0.5rem;
  }
  
  /* RTL Support for Small Mobile */
  .rtl .br-footer-left-column {
    align-items: center;
    text-align: center;
    padding-right: 0;
    padding-left: 2rem;
  }
  
  .rtl .br-footer-left-column::after {
    right: auto;
    left: 0;
  }
  
  .rtl .br-footer-right-column {
    align-items: center;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  
  .rtl .br-footer-nav-mobile {
    align-items: center;
  }
  
  .rtl .br-footer-logo {
    justify-content: center;
  }
  
  .rtl .br-footer-social-mobile {
    justify-content: center;
  }
}

/* ============================================
   BR Theme - 404 Error Page
   ============================================ */

.br-404-page {
  min-height: calc(100vh - 5.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
  background-color: var(--stone-beige, #D2C8BC);
}

.br-404-content {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.br-404-number-wrapper {
  position: relative;
  display: inline-block;
}

.br-404-number {
  font-size: 8rem;
  font-weight: 300;
  color: rgba(35, 16, 16, 0.3); /* espresso-black with low opacity */
  line-height: 1;
  margin-bottom: 0;
  font-family: 'The Year of the Camel', sans-serif;
}

.br-404-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  color: var(--espresso-black, #231010);
  z-index: 2;
  line-height: 1.2;
  white-space: nowrap;
}

/* Arabic: All text uses The Year of the Camel */
.rtl .br-404-overlay-text {
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 400;
  font-size: 2rem;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin-top: -3rem;
}

.br-404-not-found-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}

.br-404-not-found-text {
  font-size: 8rem;
  line-height: 1;
  margin: 0;
  display: inline-block;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.br-404-number-part {
  color: rgba(35, 16, 16, 0.3); /* espresso-black with low opacity */
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 300;
  font-size: 8rem;
  display: inline-block;
  vertical-align: middle;
}

.br-404-text-part {
  color: rgba(35, 16, 16, 0.3); /* espresso-black with low opacity - same as 404 */
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 300;
  font-size: 8rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.br-404-lost-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: var(--espresso-black, #231010);
  font-family: 'MrBlaketon Pro', 'Mr Blaketon', serif;
  font-weight: 400;
  text-transform: none;
  z-index: 2;
  white-space: nowrap;
  margin: 0;
}

.rtl .br-404-lost-text {
  display: none;
}

.br-404-home-btn {
  display: inline-block;
  padding: 0.9375rem 6.3125rem; /* 15px top/bottom, 101px left/right */
  background-color: var(--stone-beige, #D2C8BC);
  color: var(--espresso-black, #231010);
  border: 1px solid var(--espresso-black, #231010);
  text-decoration: none;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  transition: all 0.3s ease;
  margin-top: 2rem;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.0625rem; /* 17px */
  min-width: fit-content;
}

.br-404-home-btn:hover {
  background-color: var(--espresso-black, #231010);
  color: var(--stone-beige, #D2C8BC);
  text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
  .br-404-number {
    font-size: 5rem;
  }
  
  .br-404-overlay-text {
    font-size: 1.75rem;
    margin-top: -2rem;
  }
  
  .rtl .br-404-overlay-text {
    font-size: 1.5rem;
  }
  
  .br-404-found-text {
    font-size: 1.25rem;
  }
}

/* ============================================
   BR Theme - Products Page
   ============================================ */

.br-products-page {
  background-color: var(--stone-beige, #D2C8BC);
  padding: 2rem 0;
  min-height: calc(100vh - 5.5rem);
}

.br-products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
}

.br-products-breadcrumb {
  margin: 0;
}

.br-products-breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.br-products-breadcrumb .breadcrumb-item {
  font-size: 0.75rem; /* 12px */
  display: flex;
  align-items: center;
}

.br-products-breadcrumb .breadcrumb-item::before {
  content: "/";
  margin: 0 0.1rem;
  color: var(--mink-taupe, #998273);
}

.br-products-breadcrumb .breadcrumb-item:first-child::before {
  display: none;
}

/* English styling */
:not(.rtl) .br-products-breadcrumb .breadcrumb-item {
  font-family: 'Aileron', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

:not(.rtl) .br-products-breadcrumb .breadcrumb-item a {
  color: var(--mink-taupe, #998273);
  text-decoration: none;
  font-family: 'Aileron', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

:not(.rtl) .br-products-breadcrumb .breadcrumb-item.active {
  color: var(--PLUM, #2F191E);
  font-family: 'Aileron', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

/* Arabic styling */
.rtl .br-products-breadcrumb .breadcrumb-item {
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 600;
}

.rtl .br-products-breadcrumb .breadcrumb-item a {
  color: var(--mink-taupe, #998273);
  text-decoration: none;
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 600;
}

.rtl .br-products-breadcrumb .breadcrumb-item.active {
  color: var(--PLUM, #2F191E);
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 600;
}

.br-filter-sort-btn {
  background: transparent;
  border: none;
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 1rem;
  transition: opacity 0.3s ease;
}

/* English styling */
:not(.rtl) .br-filter-sort-btn {
  color: var(--MINK-TAUPE, #998273);
  font-family: 'Aileron', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

:not(.rtl) .br-filter-sort-btn:hover {
  opacity: 0.7;
}

/* Arabic styling */
.rtl .br-filter-sort-btn {
  color: var(--MINK-TAUPE, #998273);
  font-family: 'The Year of the Camel', sans-serif;
  font-weight: 600;
}

.rtl .br-filter-sort-btn:hover {
  opacity: 0.7;
}

.br-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  padding: 0;
}

.br-products-col {
  width: 100%;
}

/* Products page: in EN align content from the left; in AR from the right (no empty block on start side) */
html:not([dir="rtl"]) .br-products-page .container {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .br-products-page .container {
  margin-left: auto;
  margin-right: 0;
}

/* Category page products list - match New In section styling */
#products-list.br-new-in-products-wrapper {
  margin: 0 0 3rem 0;
  padding: 0;
  width: 100%;
}

/* EN / LTR: cards start from the left, left-to-right */
html:not([dir="rtl"]) #products-list.br-new-in-products-wrapper,
html:not([dir="rtl"]) #products-list .br-new-in-products-slider {
  direction: ltr;
  text-align: left;
}

/* AR / RTL: cards start from the right, right-to-left */
html[dir="rtl"] #products-list.br-new-in-products-wrapper,
html[dir="rtl"] #products-list .br-new-in-products-slider {
  direction: rtl;
  text-align: right;
}

#products-list .br-new-in-products-slider {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  width: 100%;
  justify-content: start;
  justify-items: start;
}

#products-list .br-new-in-product-col {
  padding: 0;
  width: 100%;
  display: block;
}

/* Override old products-list styles */
#products-list.br-new-in-products-wrapper .br-new-in-product-col {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 991.98px) {
  #products-list .br-new-in-products-slider {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem;
  }
}

@media (max-width: 575.98px) {
  #products-list .br-new-in-products-slider {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem;
  }
}

.br-products-load-more-wrapper {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 2rem;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  padding: 0 15px;
}

.br-products-load-more-btn {
  background: var(--stone-beige, #D2C8BC) !important;
  border: 1px solid var(--espresso-black, #231010) !important;
  color: var(--espresso-black, #231010) !important;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 200px;
}

.br-products-load-more-btn:hover {
  background: var(--espresso-black, #231010);
  color: var(--stone-beige, #D2C8BC);
}

/* Filter and Sort Overlay */
.br-filter-sort-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  z-index: 9999;
  display: none;
  opacity: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.br-filter-sort-overlay.active,
.br-filter-sort-overlay.closing {
  pointer-events: auto;
}

.br-filter-sort-overlay.active {
  display: flex;
  animation: slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.br-filter-sort-overlay.closing {
  animation: slideOutRight 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.br-filter-sort-overlay-content {
  will-change: transform;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.br-filter-sort-overlay.active .br-filter-sort-overlay-content {
  transform: translateX(0);
}

.br-filter-sort-overlay.closing .br-filter-sort-overlay-content {
  transform: translateX(100%);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.br-filter-sort-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  /* background: rgba(210, 200, 188, 0.4); */
  /* backdrop-filter: blur(4px) brightness(1.2); */
  -webkit-backdrop-filter: blur(2px);
  margin: 0;
  padding: 0;
}

.br-filter-sort-overlay-content {
  position: relative;
  background-color: rgba(210, 200, 188, 1);
  width: 90%;
  max-width: 500px;
  max-height: 100vh;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  z-index: 10000;
  /* box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); */
}

.br-filter-sort-overlay-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url('logo-mark-stone-beige-filter.jpg');
  background-size: 100% auto;
  background-position: top left;
  background-repeat: repeat-y;
  background-blend-mode: overlay;
  opacity: 0.09;
  z-index: -1;
  pointer-events: none;
}


.br-filter-sort-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  border-bottom: 0.5px solid var(--mink-taupe, #998273);
  position: relative;
  background: transparent !important;
  z-index: 10;
}

.br-filter-sort-title {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--mink-taupe, #998273);
  margin: 0;
}

.br-filter-sort-close {
  background: transparent;
  border: none;
  color: var(--espresso-black, #231010);
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  padding: 0.5rem;
}

.br-filter-sort-body {
  padding: 2rem;
  position: relative;
  background: transparent !important;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.br-filter-section {
  margin-bottom: 2.5rem;
  padding-top: 2.5rem;
  border-top: 0.5px solid var(--mink-taupe, #998273);
  background: transparent !important;
}

.br-filter-section:first-child {
  padding-top: 0;
  border-top: none;
}

.br-filter-section-title {
  font-family: 'Aileron', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mink-taupe, #998273);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  letter-spacing: 0.05em;
}

.br-filter-section-hint {
  font-family: 'Aileron', sans-serif;
  font-size: 0.75rem;
  color: var(--mink-taupe, #998273);
  opacity: 0.9;
  margin-bottom: 0.75rem;
  font-weight: 400;
  text-transform: none;
}

.br-filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.br-filter-options-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.br-filter-col-left,
.br-filter-col-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.br-filter-radio,
.br-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 400;
}

:not(.rtl) .br-filter-radio,
:not(.rtl) .br-filter-checkbox {
  font-family: 'Aileron', sans-serif;
}

.rtl .br-filter-radio,
.rtl .br-filter-checkbox {
  font-family: 'The Year of the Camel', sans-serif;
}

.br-filter-radio span,
.br-filter-checkbox span {
  color: var(--dark-mocha, #312516);
}

.br-filter-radio input[type="radio"],
.br-filter-checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--dark-mocha, #312516);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.br-filter-radio input[type="radio"]:checked,
.br-filter-checkbox input[type="checkbox"]:checked {
  border-color: var(--dark-mocha, #312516);
  background: transparent;
}

.br-filter-radio input[type="radio"]:checked::after,
.br-filter-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: calc(50% - 0.5rem);
  left: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--warm-caramel, #90674D);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
}

.br-filter-sort-footer {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 2rem;
  border-top: 0.5px solid var(--mink-taupe, #998273);
  background: transparent !important;
  flex-shrink: 0;
}

.br-filter-clear-btn,
.br-filter-apply-btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--espresso-black, #231010);
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
}

.br-filter-clear-btn {
  background: var(--stone-beige, #D2C8BC);
  color: var(--espresso-black, #231010);
}

.br-filter-clear-btn:hover {
  background: var(--espresso-black, #231010);
  color: var(--stone-beige, #D2C8BC);
}

.br-filter-apply-btn {
  background: var(--espresso-black, #231010);
  color: var(--stone-beige, #D2C8BC);
}

.br-filter-apply-btn:hover {
  background: var(--warm-caramel, #90674D);
  border-color: var(--warm-caramel, #90674D);
}

/* Responsive */
@media (max-width: 992px) {
  .br-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .br-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .br-filter-sort-overlay-content {
    width: 100%;
    max-width: 100%;
  }
  
  .br-filter-options-two-col {
    grid-template-columns: 1fr;
  }
}

/* Splash Screen - Lusano/Dulcedo-inspired: percentage + refined typography */
.br-splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(165deg, var(--PLUM, #2F191E) 0%, #25161a 50%, #1a0f12 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 1;
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.br-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: clamp(1.5rem, 4vw, 3rem);
  box-sizing: border-box;
}

.br-splash-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.br-splash-tagline {
  margin: 1.25rem 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.8125rem, 1.8vw, 1rem);
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(210, 200, 188, 0.85);
  max-width: 22ch;
}

.br-splash-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}

.br-splash-loading-label,
.br-splash-percent {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  letter-spacing: 0.06em;
  color: var(--stone-beige, #D2C8BC);
  opacity: 0.8;
}

.br-splash-percent {
  font-variant-numeric: tabular-nums;
}

/* Logo in a container: container clips when logo slides down */
.br-splash-logo-container {
  overflow: hidden;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.br-splash-logo-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.br-loader-icon-wrapper {
  display: inline-block;
  width: 44px;
  height: auto;
}

.br-splash-content .br-loader-icon {
  width: 44px;
  height: auto;
  display: block;
  filter: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(500%) hue-rotate(15deg) brightness(95%) contrast(90%);
  transform-origin: center center;
}

/* Splash responsive */
@media (max-width: 768px) {
  .br-splash-logo-container {
    height: 48px;
  }
  .br-loader-icon-wrapper,
  .br-splash-content .br-loader-icon {
    width: 38px;
  }
}

@media (max-width: 480px) {
  .br-splash-logo-container {
    height: 44px;
  }
  .br-loader-icon-wrapper,
  .br-splash-content .br-loader-icon {
    width: 34px;
  }
  .br-splash-tagline {
    max-width: 20ch;
  }
}

body.is-loading,
body.br-splash-active {
  overflow: hidden;
}

/* Graceful load when splash is skipped (navigate without full reload): fade in main content */
body.br-splash-skipped .app {
  opacity: 0;
}
body.br-splash-skipped.is-loaded .app {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* Initial state - hide content while loading */
body.is-loading .br-hero-section {
  opacity: 0;
  visibility: hidden;
}

/* Hero section animation after splash screen - using clip-path like templier */
body.is-loading .br-hero-section,
body.br-splash-active .br-hero-section {
  opacity: 0;
  visibility: hidden;
}

body.is-loading .br-hero-left,
body.br-splash-active .br-hero-left {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1);
}

body.is-loading .br-hero-right,
body.br-splash-active .br-hero-right {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1);
}

body.is-loading .br-hero-item .br-hero-image,
body.is-loading .br-hero-item .br-hero-video,
body.br-splash-active .br-hero-item .br-hero-image,
body.br-splash-active .br-hero-item .br-hero-video {
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reveal hero section after loading completes */
body.is-loaded .br-hero-section,
body:not(.is-loading):not(.br-splash-active) .br-hero-section {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s,
              visibility 0s linear 0.4s;
}

body.is-loaded .br-hero-left,
body:not(.is-loading):not(.br-splash-active) .br-hero-left {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}

body.is-loaded .br-hero-right,
body:not(.is-loading):not(.br-splash-active) .br-hero-right {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}

/* Hero section animations - GSAP only (CSS animations removed) */
/* Initial states for images */
body.is-loaded .br-hero-left .br-hero-image-1,
body:not(.is-loading):not(.br-splash-active) .br-hero-left .br-hero-image-1 {
  z-index: 2;
  mix-blend-mode: normal;
}

body.is-loaded .br-hero-left .br-hero-image-2,
body:not(.is-loading):not(.br-splash-active) .br-hero-left .br-hero-image-2 {
  z-index: 1;
  mix-blend-mode: normal;
}

body.is-loaded .br-hero-right .br-hero-image-2,
body:not(.is-loading):not(.br-splash-active) .br-hero-right .br-hero-image-2 {
  z-index: 2;
  mix-blend-mode: luminosity !important; /* Always luminosity on right side */
}

body.is-loaded .br-hero-right .br-hero-image-1,
body:not(.is-loading):not(.br-splash-active) .br-hero-right .br-hero-image-1 {
  z-index: 1;
  mix-blend-mode: luminosity !important; /* Always luminosity on right side */
}

body.is-loaded .br-hero-item .br-hero-image,
body.is-loaded .br-hero-item .br-hero-video,
body:not(.is-loading):not(.br-splash-active) .br-hero-item .br-hero-image,
body:not(.is-loading):not(.br-splash-active) .br-hero-item .br-hero-video {
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger the left and right images */
body.is-loaded .br-hero-left,
body:not(.is-loading):not(.br-splash-active) .br-hero-left {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}

body.is-loaded .br-hero-right,
body:not(.is-loading):not(.br-splash-active) .br-hero-right {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}

/* ============================================
   BR Login/Signup Page Styling
   ============================================ */

/* Target Zid login/signup pages - change background to match site */
/* Target body and html directly for login pages */
body[class*="login"],
body[class*="signup"],
body[class*="auth"],
body[class*="verification"],
html[class*="login"],
html[class*="signup"],
html[class*="auth"],
html[class*="verification"],
[class*="login-page"],
[class*="signup-page"],
[class*="auth-page"],
[class*="verification-page"],
body:has([class*="login-form"]),
body:has([class*="signup-form"]),
body:has([class*="auth-form"]) {
  background-color: var(--stone-beige, #D2C8BC) !important;
}

/* Also target the main wrapper/container */
[class*="login"] > *,
[class*="signup"] > *,
[class*="auth"] > *,
[class*="verification"] > * {
  background-color: var(--stone-beige, #D2C8BC) !important;
}

/* Main container for login/signup forms */
[class*="login"] [class*="container"],
[class*="signup"] [class*="container"],
[class*="auth"] [class*="container"],
[class*="verification"] [class*="container"],
[class*="login-form"],
[class*="signup-form"],
[class*="auth-form"] {
  background-color: var(--stone-beige, #D2C8BC) !important;
}

/* Page title and headings - use The Year of the Camel */
[class*="login"] h1,
[class*="login"] h2,
[class*="login"] h3,
[class*="login"] h4,
[class*="login"] h5,
[class*="login"] h6,
[class*="signup"] h1,
[class*="signup"] h2,
[class*="signup"] h3,
[class*="signup"] h4,
[class*="signup"] h5,
[class*="signup"] h6,
[class*="auth"] h1,
[class*="auth"] h2,
[class*="auth"] h3,
[class*="verification"] h1,
[class*="verification"] h2,
[class*="verification"] h3,
[class*="login-title"],
[class*="signup-title"],
[class*="auth-title"] {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--dark-mocha, #312516) !important;
}

/* Labels and text - use The Year of the Camel */
[class*="login"] label,
[class*="signup"] label,
[class*="auth"] label,
[class*="verification"] label {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--dark-mocha, #312516) !important;
}

[class*="login"] p,
[class*="signup"] p,
[class*="auth"] p,
[class*="verification"] p {
  font-family: 'Aileron', 'The Year of the Camel', sans-serif !important;
  color: var(--mink-taupe, #998273) !important;
}

[class*="login"] span:not(input span),
[class*="signup"] span:not(input span),
[class*="auth"] span:not(input span) {
  font-family: 'The Year of the Camel', sans-serif !important;
  color: var(--dark-mocha, #312516) !important;
}

/* Input fields - use Aileron font */
[class*="login"] input[type="text"],
[class*="login"] input[type="email"],
[class*="login"] input[type="tel"],
[class*="login"] input[type="number"],
[class*="login"] input[type="password"],
[class*="signup"] input[type="text"],
[class*="signup"] input[type="email"],
[class*="signup"] input[type="tel"],
[class*="signup"] input[type="number"],
[class*="signup"] input[type="password"],
[class*="auth"] input[type="text"],
[class*="auth"] input[type="email"],
[class*="auth"] input[type="tel"],
[class*="auth"] input[type="number"],
[class*="auth"] input[type="password"],
[class*="verification"] input[type="text"],
[class*="verification"] input[type="email"],
[class*="verification"] input[type="tel"],
[class*="verification"] input[type="number"],
[class*="verification"] input[type="password"],
[class*="phone-input"],
[class*="country-code"],
[class*="phone-number"] {
  font-family: 'Aileron', 'The Year of the Camel', sans-serif !important;
  border-color: var(--dark-mocha, #312516) !important;
  color: var(--dark-mocha, #312516) !important;
  background-color: #faf6f2 !important;
  border-radius: 0.125rem !important;
  padding: 0.5rem 0.75rem !important;
}

/* Input focus states */
[class*="login"] input:focus,
[class*="signup"] input:focus,
[class*="auth"] input:focus,
[class*="verification"] input:focus,
[class*="phone-input"]:focus,
[class*="country-code"]:focus,
[class*="phone-number"]:focus {
  border-color: var(--warm-caramel, #90674D) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.125rem rgba(144, 103, 77, 0.25) !important;
}

/* Select dropdowns */
[class*="login"] select,
[class*="signup"] select,
[class*="auth"] select,
[class*="verification"] select,
[class*="country-select"] {
  font-family: 'Aileron', 'The Year of the Camel', sans-serif !important;
  border-color: var(--dark-mocha, #312516) !important;
  color: var(--dark-mocha, #312516) !important;
  background-color: #faf6f2 !important;
  border-radius: 0.125rem !important;
  padding: 0.5rem 0.75rem !important;
}

[class*="login"] select:focus,
[class*="signup"] select:focus,
[class*="auth"] select:focus,
[class*="verification"] select:focus {
  border-color: var(--warm-caramel, #90674D) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.125rem rgba(144, 103, 77, 0.25) !important;
}

/* Buttons - match site style */
[class*="login"] button,
[class*="login"] .btn,
[class*="login"] [type="submit"],
[class*="signup"] button,
[class*="signup"] .btn,
[class*="signup"] [type="submit"],
[class*="auth"] button,
[class*="auth"] .btn,
[class*="auth"] [type="submit"],
[class*="verification"] button,
[class*="verification"] .btn,
[class*="verification"] [type="submit"],
[class*="send-sms"],
[class*="verify-button"],
[class*="submit-button"] {
  background-color: var(--espresso-black, #231010) !important;
  border-color: var(--espresso-black, #231010) !important;
  color: var(--stone-beige, #D2C8BC) !important;
  font-family: 'The Year of the Camel', sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.5rem 1.5rem !important;
  border-radius: 0.125rem !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
}

/* Button hover states */
[class*="login"] button:hover,
[class*="login"] .btn:hover,
[class*="login"] [type="submit"]:hover,
[class*="signup"] button:hover,
[class*="signup"] .btn:hover,
[class*="signup"] [type="submit"]:hover,
[class*="auth"] button:hover,
[class*="auth"] .btn:hover,
[class*="auth"] [type="submit"]:hover,
[class*="verification"] button:hover,
[class*="verification"] .btn:hover,
[class*="verification"] [type="submit"]:hover,
[class*="send-sms"]:hover,
[class*="verify-button"]:hover,
[class*="submit-button"]:hover {
  background-color: var(--warm-caramel, #90674D) !important;
  border-color: var(--warm-caramel, #90674D) !important;
  color: var(--stone-beige, #D2C8BC) !important;
}

/* Remove/hide Zid footer with icon */
[class*="login"] [class*="footer"],
[class*="signup"] [class*="footer"],
[class*="auth"] [class*="footer"],
[class*="verification"] [class*="footer"],
[class*="powered-by"],
[class*="zid-footer"],
[class*="zid-logo"],
[class*="footer"] [class*="zid"],
[class*="footer"] img[src*="zid"],
[class*="footer"] [alt*="zid" i],
[class*="footer"] [alt*="Zid" i],
footer[class*="zid"],
footer img[src*="zid"],
footer [alt*="zid" i],
footer [alt*="Zid" i],
[class*="login"] footer,
[class*="signup"] footer,
[class*="auth"] footer,
[class*="verification"] footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide any "Powered by" text */
[class*="powered-by"],
[class*="powered"],
[class*="powered-by"] * {
  display: none !important;
  visibility: hidden !important;
}

/* Additional footer targeting for login pages */
body[class*="login"] footer,
body[class*="signup"] footer,
body[class*="auth"] footer,
body[class*="verification"] footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Additional targeting for Zid-specific classes */
[data-zid],
[class*="zid-auth"],
[class*="zid-login"],
[class*="zid-signup"] {
  background-color: var(--stone-beige, #D2C8BC) !important;
}

/* Form containers */
[class*="login"] form,
[class*="signup"] form,
[class*="auth"] form,
[class*="verification"] form {
  background-color: transparent !important;
}

/* Links */
[class*="login"] a,
[class*="signup"] a,
[class*="auth"] a,
[class*="verification"] a {
  color: var(--espresso-black, #231010) !important;
  font-family: 'The Year of the Camel', sans-serif !important;
}

[class*="login"] a:hover,
[class*="signup"] a:hover,
[class*="auth"] a:hover,
[class*="verification"] a:hover {
  color: var(--warm-caramel, #90674D) !important;
}

/* --------------------------------------------------------------------------
   Zid MUI auth (phone login, OTP, etc.) — when layout loads theme CSS
   body.br-zid-auth-page is set from session.template in layout.jinja
   -------------------------------------------------------------------------- */
body.br-zid-auth-page {
  background-color: var(--stone-beige, #D2C8BC) !important;
}

body.br-zid-auth-page #root,
body.br-zid-auth-page .MuiScopedCssBaseline-root,
body.br-zid-auth-page .MuiCssBaseline-root {
  background-color: transparent !important;
}

body.br-zid-auth-page .MuiTypography-root {
  font-family: 'The Year of the Camel', 'Aileron', sans-serif !important;
  color: var(--dark-mocha, #312516) !important;
}

body.br-zid-auth-page .MuiTypography-colorTextSecondary,
body.br-zid-auth-page .MuiTypography-body2,
body.br-zid-auth-page .MuiFormHelperText-root {
  color: var(--mink-taupe, #998273) !important;
}

body.br-zid-auth-page .MuiInputLabel-root,
body.br-zid-auth-page .MuiFormLabel-root,
body.br-zid-auth-page .MuiInputLabel-shrink {
  color: var(--dark-mocha, #312516) !important;
}

body.br-zid-auth-page .MuiOutlinedInput-root {
  background-color: #faf6f2 !important;
  border-radius: 0.125rem !important;
}

body.br-zid-auth-page .MuiOutlinedInput-notchedOutline {
  border-color: var(--dark-mocha, #312516) !important;
  border-width: 1px !important;
}

body.br-zid-auth-page .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
body.br-zid-auth-page .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--warm-caramel, #90674D) !important;
}

body.br-zid-auth-page .MuiInputBase-input,
body.br-zid-auth-page .MuiSelect-select {
  color: var(--dark-mocha, #312516) !important;
  font-family: 'Aileron', 'The Year of the Camel', sans-serif !important;
}

body.br-zid-auth-page .MuiButton-contained,
body.br-zid-auth-page .MuiButton-containedPrimary,
body.br-zid-auth-page .MuiButton-contained.MuiButton-fullWidth {
  background-color: var(--espresso-black, #231010) !important;
  color: var(--stone-beige, #D2C8BC) !important;
  border-radius: 0.125rem !important;
  font-family: 'The Year of the Camel', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

body.br-zid-auth-page .MuiButton-contained:hover,
body.br-zid-auth-page .MuiButton-containedPrimary:hover {
  background-color: var(--warm-caramel, #90674D) !important;
  color: var(--stone-beige, #D2C8BC) !important;
}

body.br-zid-auth-page .MuiButton-text,
body.br-zid-auth-page .MuiButton-outlined {
  color: var(--dark-mocha, #312516) !important;
  border-color: var(--dark-mocha, #312516) !important;
  border-radius: 0.125rem !important;
  font-family: 'The Year of the Camel', sans-serif !important;
}

body.br-zid-auth-page .MuiButton-text:hover,
body.br-zid-auth-page .MuiButton-outlined:hover {
  color: var(--warm-caramel, #90674D) !important;
  border-color: var(--warm-caramel, #90674D) !important;
  background-color: rgba(49, 37, 22, 0.06) !important;
}

body.br-zid-auth-page .MuiLink-root,
body.br-zid-auth-page a {
  color: var(--dark-mocha, #312516) !important;
}

body.br-zid-auth-page .MuiLink-root:hover,
body.br-zid-auth-page a:hover {
  color: var(--warm-caramel, #90674D) !important;
}

/* Country / phone dropdown lists — match field surface */
body.br-zid-auth-page .MuiMenu-paper,
body.br-zid-auth-page .MuiPopover-paper,
body.br-zid-auth-page .MuiPaper-root.MuiMenu-paper {
  background-color: #faf6f2 !important;
  border: 1px solid var(--dark-mocha, #312516) !important;
  border-radius: 0.125rem !important;
  box-shadow: 0 4px 24px rgba(35, 16, 16, 0.12) !important;
  min-width: 260px !important;
  max-width: min(100vw - 2rem, 420px) !important;
}

body.br-zid-auth-page .MuiMenuItem-root,
body.br-zid-auth-page .MuiListItemText-primary {
  color: var(--dark-mocha, #312516) !important;
  font-family: 'Aileron', 'The Year of the Camel', sans-serif !important;
}

body.br-zid-auth-page .MuiMenuItem-root:hover,
body.br-zid-auth-page .MuiMenuItem-root.Mui-selected,
body.br-zid-auth-page .MuiMenuItem-root.Mui-selected:hover {
  background-color: rgba(49, 37, 22, 0.08) !important;
}

body.br-zid-auth-page .MuiSvgIcon-root {
  color: var(--dark-mocha, #312516) !important;
}

body.br-zid-auth-page .MuiDivider-root {
  border-color: rgba(49, 37, 22, 0.15) !important;
}

/* Hide Zid “Powered by” strip on auth shell */
body.br-zid-auth-page [class*="powered"],
body.br-zid-auth-page [class*="Powered"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================
   BR Cart Sidebar - New Design
   ============================================ */

/* Cart overlay – same as accordion/size chart: transparent root, "lights off" slides with panel */
#header-shopping-cart,
#header-shopping-cart.cart-sidebar,
.cart-sidebar#header-shopping-cart {
    height: 100vh !important;
    height: 100dvh !important;
    width: 100% !important;
    position: fixed !important;
    z-index: 99999 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    display: block !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    isolation: isolate;
    contain: layout style paint;
}

/* Open: overlay appears almost instantly; block touch scroll so mobile can't scroll page behind */
#header-shopping-cart.open,
#header-shopping-cart.cart-sidebar.open,
.cart-sidebar#header-shopping-cart.open {
    opacity: 1;
    pointer-events: auto;
    transition-duration: 0.12s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    touch-action: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Left Side - Blurred backdrop; slides in with panel as one strip */
.cart-sidebar-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 70%;
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    background-color: rgba(210, 200, 188, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1;
    box-sizing: border-box;
    isolation: isolate;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.cart-sidebar.open .cart-sidebar-bg {
    transform: translate3d(0, 0, 0);
}

/* Content Panel - slides in with bg as one strip */
.cart-sidebar-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 30%;
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    background-image: url('https://raw.githubusercontent.com/YasminOE/br-images/main/cart-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1rem;
    z-index: 3;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: transparent;
    isolation: isolate;
    margin: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.cart-sidebar.open .cart-sidebar-panel {
    transform: translate3d(0, 0, 0);
}

/* Icons Container - Inside footer panel, after button */
.cart-sidebar-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* padding: 1.5rem 0 0 0; */
    margin-top: 1rem;
}

/* Left Icon */
/* .cart-sidebar-icon-left {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
} */


/* Right Icon */
/* .cart-sidebar-icon-right {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
} */

/* Header */
.cart-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.cart-sidebar-title {
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 1.25rem;
    color: var(--stone-beige, #D2C8BC);
    font-weight: 300;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cart-sidebar-close {
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 1rem;
    color: var(--stone-beige, #D2C8BC);
    cursor: pointer;
    transition: color 0.3s ease;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.cart-sidebar-close:hover {
    color: var(--warm-caramel, #90674D);
}

/* Divider */
.cart-sidebar-divider {
    height: 1px;
    background-color: rgba(210, 200, 188, 0.3);
    margin: 1rem 0;
}

/* Empty Cart Message */
.cart-sidebar-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: auto;
    margin: 0;
    padding: 0 1rem;
}

.cart-empty-text {
    font-size: 1.5rem;
    color: var(--stone-beige, #D2C8BC);
    font-style: italic;
    font-weight: 300;
    text-align: center;
    margin: 0;
    width: 100%;
    display: block;
    position: relative;
}

/* English: Mr Blaketon Pro, Arabic: The Year of the Camel */
html[lang="en"] .cart-empty-text,
html:not([lang="ar"]) .cart-empty-text {
    font-family: 'MrBlaketon Pro', sans-serif;
}

html[lang="ar"] .cart-empty-text,
.rtl .cart-empty-text {
    font-family: 'The Year of the Camel', sans-serif;
}

/* Cart Items */
.cart-sidebar-items {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 1rem 0;
    display: none;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 1;
    width: 100%;
}

.cart-sidebar-items:not(:empty) {
    display: flex;
}

/* Individual Cart Item */
.cart-sidebar-item {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(210, 200, 188, 0.3);
    width: 100%;
    flex-shrink: 0;
}

.cart-item-image {
    width: 100px;
    height: 120px;
    flex-shrink: 0;
    background-color: transparent;
    padding: 0;
    border-radius: 0.25rem;
    overflow: hidden;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
}

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: flex-start;
}

.cart-item-collection {
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 0.875rem;
    color: rgba(210, 200, 188, 0.8);
    font-weight: 300;
    margin-bottom: 0.25rem;
}

.cart-item-name {
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 1rem;
    color: var(--stone-beige, #D2C8BC);
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.cart-item-quantity {
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 0.875rem;
    color: rgba(210, 200, 188, 0.8);
    font-weight: 300;
    margin-bottom: 0.25rem;
}

.cart-item-price {
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 1.125rem;
    color: var(--stone-beige, #D2C8BC);
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.cart-item-remove {
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 0.875rem;
    color: var(--stone-beige, #D2C8BC);
    text-decoration: underline;
    cursor: pointer;
    margin-top: 0.25rem;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.cart-item-remove:hover {
    color: var(--warm-caramel, #90674D);
}

/* Total Section */
.cart-total-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    width: 100%;
}

.cart-total-label {
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 1rem;
    color: var(--stone-beige, #D2C8BC);
    font-weight: 400;
}

.cart-total-amount {
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 1.125rem;
    color: var(--stone-beige, #D2C8BC);
    font-weight: 400;
}

/* Footer */
.cart-sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 100%;
}

.cart-sidebar-checkout-btn {
    width: 100%;
    padding: 1rem 2rem;
    background-color: var(--espresso-black, #231010);
    border: none;
    color: var(--stone-beige, #D2C8BC);
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: normal;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    margin-top: 0;
}

.cart-sidebar-checkout-btn:hover {
    background-color: var(--warm-caramel, #90674D);
    color: var(--stone-beige, #D2C8BC);
}

.cart-sidebar-back-btn {
    width: 100%;
    padding: 1rem 2rem;
    background-color: var(--stone-beige, #D2C8BC);
    border: none;

    color: var(--espresso-black, #231010);
    font-family: 'The Year of the Camel', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: normal;
    position: relative;
    z-index: 1;
    margin-top: 0.5rem !important;
}

.cart-sidebar-back-btn:hover {
    background-color: var(--warm-caramel, #90674D);
    color: var(--stone-beige, #D2C8BC);
}

/* Show empty cart when no items */
.cart-sidebar-empty {
    display: flex !important;
}

.cart-sidebar-items:not(:empty) ~ .cart-sidebar-empty,
#cart-items:not(:empty) ~ .cart-sidebar-empty {
    display: none !important;
}

/* When cart is open: prevent mobile from scrolling content behind the overlay */
body.disable-scroll {
    touch-action: none !important;
    -webkit-overflow-scrolling: auto;
}
html:has(body.disable-scroll) {
    overflow: hidden !important;
}

/* Responsive adjustments for cart sidebar */
@media (max-width: 768px) {
    .cart-sidebar-bg {
        width: 0%;
    }

    .cart-sidebar-panel {
        width: 100%;
    }

    .cart-sidebar-icons {
        display: flex;
    }

    /* Ensure cart overlay stays full screen on mobile (address bar safe) */
    #header-shopping-cart.cart-sidebar.open,
    .cart-sidebar#header-shopping-cart.open {
        min-height: 100dvh !important;
        height: 100dvh !important;
    }
}

/* ========== BR Product Page: single column via .br-product-info-inner, horizontal sizes, Send + Wishlist row ========== */
body .br-product-page .br-product-info,
body .br-product-page .br-product-info-inner,
.app .main .br-product-page .br-product-info,
.app .main .br-product-page .br-product-info-inner {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  width: 100% !important;
  max-width: 100% !important;
}
body .br-product-page .br-product-info-inner > *,
.app .main .br-product-page .br-product-info-inner > * {
  width: 100% !important;
  max-width: 100% !important;
}
body .br-product-page .br-product-form,
.app .main .br-product-page .br-product-form {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  flex-wrap: nowrap !important;
}
body .br-product-page .br-product-actions,
.app .main .br-product-page .br-product-actions {
  display: flex !important;
  flex-direction: column !important;
}
body .br-product-page .br-product-out-of-stock,
.app .main .br-product-page .br-product-out-of-stock {
  width: 100% !important;
  max-width: 100% !important;
}
body .br-product-page .br-product-option-values,
.app .main .br-product-page .br-product-option-values {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}
body .br-product-page .br-actions-row,
.app .main .br-product-page .br-actions-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
}
body .br-product-page .br-actions-row .br-add-to-wishlist-btn,
body .br-product-page .br-actions-row .br-notify-btn,
.app .main .br-product-page .br-actions-row .br-add-to-wishlist-btn,
.app .main .br-product-page .br-actions-row .br-notify-btn {
  width: auto !important;
  max-width: none !important;
}