html {
  scroll-behavior: smooth;

}


.region-header {
  /* position: fixed; */
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  transition: transform 0.3s ease;
  transform: translateY(0);
  /* margin-top: 1rem; */
}

.region-header--hidden {
  transform: translateY(-100%);
}

/* header {
  min-height: 84px;
  max-height: 84px;

} */


.layout-container {
  direction: rtl !important;
}

.py-5 {
  padding-top: 1rem !important;
  ;
  padding-bottom: 0rem !important;
}

.bg-dark {
  background-color: black;
}

.mt-lg-4 {
  margin-top: 0 !important;
}


.block-system-branding-block {
  margin-left: auto;
}

.block-commerce-cart {
  padding-left: 1rem;
  padding-bottom: 1rem;
}

.block-wishlist-block {
  padding-left: 0.6rem;
  padding-bottom: 0.7rem;
}



/* .menu--account {
   margin-right: auto;
} */

.menu--lry-ysy {
  margin: 0 auto;
}

.me-2 {
  margin-right: 0 !important;
}

.fw-light {
  margin-left: auto;
  /* Pushes the element to the far right */
}

.view-site-categories-view .view-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 equal columns */
  grid-template-rows: repeat(2, 1fr);
  /* 2 equal rows */
  gap: 10px;
  /* Space between grid items */
  height: 70vh;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  box-sizing: border-box;
  overflow: hidden;
  /* Ensures content stays within the boundaries */
}

.view-new-arrivals-products .view-content {
  margin: auto;
}

/* Style each grid item */
.grid-item,
.views-field-category-image,
.field-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Ensure images fill their grid cells */
.field-content img {
  width: 100%;
  /* Fill the container width */
  height: 100%;
  /* Fill the container height */
  object-fit: cover;
  /* Crop the image while maintaining aspect ratio */
  display: block;
  /* Remove inline spacing */
  image-rendering: auto;
  /* Smooth rendering */

}

/* Specific grid item placements */
.grid-item:first-child {
  grid-column: span 2;
  /* Spans the first two columns */
  grid-row: span 2;
  /* Spans the first two rows */
}

.grid-item:nth-child(2) {
  grid-column: 3 / 4;
  /* Third column */
  grid-row: 1 / 2;
  /* First row */
}

.grid-item:nth-child(3) {
  grid-column: 4 / 5;
  /* Fourth column */
  grid-row: 1 / 2;
  /* First row */
}

.grid-item:nth-child(4) {
  grid-column: 3 / 5;
  /* Spans the third and fourth columns */
  grid-row: 2 / 3;
  /* Spans the second row */
}



/* Title styling */
.views-field-name {
  position: absolute;
  top: 87%;
  transform: translateY(-50%);
  color: white;
  font-size: 2em;
  font-weight: bold;
  border-radius: 5px;
  z-index: 1;
  font-family: 'Cairo';
  transition: all 1s ease;
  /* Smooth hover effect */
}


/* Container styling */
.field-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Allow the image to "pop out" beyond the container */
  transition: transform 1s ease, box-shadow 0.3s ease;
  /* Smooth animation */
  text-align: center;
}

/* Image styling */
.field-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image fills the container while maintaining aspect ratio */
  display: block;
  transition: transform 1s ease, box-shadow 0.3s ease;
  /* Smooth scaling and shadow on hover */
}

.grid-item {
  position: relative;
  /* Establish positioning context for pseudo-elements */
  display: inline-block;
  /* Ensure proper layout */
  overflow: hidden;
  /* Prevent the border and overlay from overflowing */
}

.grid-item img {
  display: block;
  /* Ensure the image behaves like a block element */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Smooth transitions for image effects */
}

.grid-item:hover img {
  transform: scale(1.15) translateY(-10px);
  /* Scale the image and move it slightly upward */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  /* Add a shadow for depth */
  z-index: 10;
  /* Ensure the image appears above other content */
}

/* Add the animated border using ::before */
.grid-item::before {
  content: '';
  /* Required for pseudo-elements */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  /* Start with a transparent border */
  box-sizing: border-box;
  /* Include the border in the dimensions */
  z-index: 9;
  /* Ensure it sits below the image */
  pointer-events: none;
  /* Prevent pointer interaction with the pseudo-element */
  transition: border-color 0.3s ease, border-width 0.3s ease;
  /* Smooth transition for hover out */
}

.grid-item:hover::before {
  border-color: rgb(0, 0, 0);
  /* Change border color to rgb(65, 68, 159) on hover */
}


.sf-depth-1>a[href*="/promotions"] {
  position: relative;
  padding-right: 30px;
}


.sf-depth-1>a[href*="/promotions"]::after {
  content: "حصري";
  position: absolute;
  top: 30%;
  transform: translateY(-50%);

  font-size: 10px;
  color: white;
  background-color: red;
  padding: 2px 3px;
  border-radius: 3px;
  font-weight: bold;
  white-space: nowrap;
  /* keep text from breaking */
}

.nav-link {
  font-family: "Cairo";
  font-size: 16px;
  font-weight: bold !important;
  color: #414042;
}

/* Style for each menu item */
.dropdown-menu .nav-item {
  border-bottom: 1px solid #ddd;
  /* Add line between items */
  text-align: right;
}

.dropdown-menu .nav-item:last-child {
  border-bottom: none;
  /* Remove line for the last item */
}

/* Style the links inside the dropdown */
.dropdown-menu .nav-link {
  display: block;
  /* Make the link fill the item */
  padding-left: 1rem !important;
  text-decoration: none;
  /* Remove underline */
  color: #333;
  /* Dark text color */
  transition: all 0.3s ease;
  /* Smooth transition for hover effect */
  white-space: nowrap;
}

/* Hover effect for links */
.dropdown-menu .nav-link:hover {
  background-color: #464a4f;
  /* Blue background */
  color: white;
}

/* Active link style */
.dropdown-menu .nav-link.is-active {
  font-weight: bold;
  /* Make active link bold */
}

.nav-item:hover {
  font-weight: bold !important;
  /* Make active link bold */
  text-decoration: none !important;
}

.underline,
.region-header .nav>.nav-item:not(.dropdown)>.nav-link {
  position: unset;
  border-bottom: 1px solid rgb(161, 156, 156, 0.1);
}

.nav-link::before {
  display: none;
}

.view-new-arrivals-products .swiper-pagination-bullets-dynamic {
  bottom: var(--swiper-pagination-bottom, 0px) !important;
}

.layout__region--second {
  display: flex;
  flex-direction: column;
  padding-right: 20px;
  font-family: "Cairo", sans-serif;
  margin-bottom: 15px;
  width: 100%;
  text-align: right;
  /* Align text to the right */
}



.layout__region--second .body p {
  margin: 0;
}


.product-tags {
  text-decoration: none;
  font-weight: bold;
  padding: 4px 6px;
  /* Add padding for spacing */
  border-radius: 8px;
  /* Add border radius for rounded corners */
  display: inline-block;
  /* Ensure proper spacing and alignment */
}


.layout__region--second .product-tags:empty {
  display: none;
}


.layout__region--second .stock-quantity {
  margin-top: 2rem;
  margin-bottom: 1rem;
}




.layout__region--second .title,
.layout__region--second .price {
  font-family: "Cairo", serif;
  /* Elegant and formal serif font */
  font-size: 2rem;
  /* Stand-out size for the title */
  color: #2c2c2c;
  /* Fallback color if gradient isn't supported */
  text-align: right;
  /* Center the title for a balanced layout */
  position: relative;
  /* Enables the use of pseudo-elements for decoration */
  direction: ltr !important;
}

.layout__region--second .price,
.layout__region--second .body {
  padding-top: 1rem;
}


.form-actions {
  order: 1;
  /* Move this div to the first position */
  align-self: flex-end;
  /* Align the button section to the right */
}



.button--add-to-cart {
  color: #fff;
  /* White text for contrast */
  border: none !important;
  /* No border */
  cursor: pointer;
  /* Pointer cursor for interactivity */
  margin-right: 10rem;
  position: relative !important;
  /* Ensure the element is positioned relative to its normal flow */
  top: -65px !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  width: 50% !important;
  height: 50px !important;
  border-radius: 50px !important;
  background-image: none !important;

}

.button--add-to-cart:hover {
  background-color: #595e73 !important;
}

/* Container for products */
.view-new-arrivals-products .view-content {
  display: flex;
  /* Use flexbox for horizontal layout */
  flex-wrap: nowrap;
  /* Prevent wrapping to the next row */
  overflow-x: auto;
  /* Enable horizontal scrolling */
  gap: 10px;
  /* Space between product cards */
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 40% !important;
  margin: 10px;
  width: 40px !important;
  /* Set the width */
  height: 40px !important;
  /* Set the height */
  margin-top: calc(0px - var(--swiper-navigation-size));
  /* Center vertically */
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #414042;
  /* Default arrow color */
  --beo-bg-opacity: 1;
  background-color: white;
  border-radius: 50%;
  /* Make the background a circle */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* Add smooth transition */
}


.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 20px !important;
  /* Adjust the icon size */
  font-weight: bold;
  ;
}

.block-views-blocknew-arrivals-products-block-1 h2 {
  margin: 0 auto;
  /* Center the heading horizontally */
  text-align: center;
  /* Center the text */
  --beo-bg-opacity: 1;
  background-color: rgba(var(--beo-dark-rgb), var(--beo-bg-opacity)) !important;
  color: white;
  /* Set the text color to white */
  font-size: 24px;
  /* Set a suitable font size */
  font-family: "Arial", sans-serif;
  /* Use a clean, modern font */
  padding: 10px 20px;
  /* Add padding for better spacing */
  border-radius: 5px;
  /* Slightly round the corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  /* Add a subtle shadow for style */
  text-transform: uppercase;
  /* Make the text uppercase for emphasis */
  letter-spacing: 1px;
  /* Add spacing between letters */
  line-height: 1.4;
  /* Improve line spacing */
}


.product-info {
  display: flex !important;
  flex-direction: column;
  font-family: "Cairo" !important;
  /* align-items: flex-end !important; */
}




.product-info,
.product-title a {
  border-bottom: unset !important;
  color: #111111 !important;
  font-size: 14px !important;
}

.product-title {
  font-weight: unset !important;
  /* padding-right: 0.5rem !important; */
  position: relative;
  /* Required for the ::after element positioning */
  display: inline-block;
  /* Helps to properly position the underline */
  font-family: "Cairo";
  /* Optional: Apply the desired font */
  text-decoration: none;
  /* Remove default underline if any */
  color: inherit;
  /* Ensure it inherits the text color */
  text-align: center;
}

.product-title::after {
  content: '';
  /* Creates an empty element for the underline */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  /* Thickness of the underline */
  background-color: black;
  /* Color of the underline */
  transition: width 0.3s ease;
  /* Animation effect */
}

.product-title:hover::after {
  width: 100%;
  /* Expands the underline on hover */
}

.product-info .price {
  padding-right: 0.5rem !important;
}

.product-image {
  position: relative;
  /* Ensure proper positioning for the container */
  overflow: hidden;
  /* Prevent scaling image from overflowing the container */
  border-radius: 10px;
  /* Rounded corners */
  transition: box-shadow 0.4s ease;
  /* Smooth shadow animation */
  border: 1px solid #e3e3e3;
}

.product-image img {
  display: block;
  /* Removes gaps caused by inline elements */
  width: 100%;
  /* Ensures the image fills the width of the container */
  height: 340px;
  max-height: 340px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  /* Smooth scaling and shadow animation */
  transform: scale(1);
  /* Default state: no scaling */
  border-radius: 10px;
  /* Consistent rounded corners */
}

.product-image:hover {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  /* Add a shadow on hover */
}

.product-image:hover img {
  transform: scale(1.02);
  /* Slightly scale up the image */
}


/* .noUi-handle-upper::after {
  left: -25px !important;
  top: -17px !important;
} */

.js-form-wrapper input[type="text"] {
  display: none !important;
}


.col-lg-3 {
  width: 20% !important;
  text-align: right !important;
}

.color-swatch {
  display: inline-block;
  cursor: pointer;
  margin: 5px;
}

.color-swatch input[type="checkbox"] {
  display: none;
  /* Hide the default checkbox */
}

.color-swatch .swatch,
.color_field__swatch {
  position: relative;
  /* Required for positioning the pseudo-element */
  width: 40px !important;
  /* Example size */
  height: 40px !important;
  /* Example size */
  display: inline-block;
  background-color: #ccc;
  /* Example background color */
  border: 1px solid #ddd;
  /* Default border */
  box-sizing: border-box;
  overflow: hidden;
  /* Ensure pseudo-elements are clipped inside the swatch */
  border-radius: 50% !important;
}

.color_field__swatch:hover,
.swatch:hover {
  background-color: #595e73 !important;
}

/* Style when the checkbox is selected */
.color-swatch input[type="checkbox"]:checked+.swatch {
  border: 1px solid #000;
  /* Highlight selected swatches */
}

/* Default diagonal line (black) for light swatches */
.color-swatch input[type="checkbox"]:checked+.swatch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 48%, #000 48%, #000 52%, transparent 52%);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* White diagonal line for dark swatches */
.color-swatch input[type="checkbox"]:checked+.swatch.dark-swatch::before {
  background: linear-gradient(135deg, transparent 48%, #fff 48%, #fff 52%, transparent 52%);
}


input[type="radio"]:checked+label .color_field__swatch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 48%, #000 48%, #000 52%, transparent 52%);
  z-index: 1;
  pointer-events: none;
  /* Ensure it doesn't block interactions */
}

input[type="radio"]:checked+label .color_field__swatch.dark-swatch::before {
  background: linear-gradient(135deg, transparent 48%, #fff 48%, #fff 52%, transparent 52%);
}

/* Ensure the rendered-color div is positioned correctly for the pseudo-element */
.color_field__swatch {
  position: relative;
}


.accordion-button {
  padding: 0.5rem;
}





.form-item-price-min .form-label,
.form-item-price-max .form-label {
  display: none;
}




.accordion-button::after {
  display: none;
}

.accordion-header {
  position: relative;
  cursor: default !important;
  margin-bottom: 2rem !important;
  font-weight: 400 !important;
}

.accordion-button:not(.collapsed) {
  box-shadow: unset !important;
}


.bef-exposed-form .fieldset-legend,
.accordion .fieldset-legend.accordion-button {
  font-size: 1rem;
  border-bottom: 0 !important;
}

.bef-exposed-form .fieldset-legend {
  font-weight: 600 !important;
  font-size: 1.2rem !important;
}

.bef-toggle {
  font-size: 0.7rem;
}

.size-swatch,
#edit-tag--2 .form-checkboxes label {
  display: inline-block;
  margin: 5px;
  cursor: pointer;
}


.size-swatch input[type="checkbox"],
#edit-tag--2 .form-checkboxes input[type="checkbox"] {
  display: none;
  /* Hide the default checkbox */
}

.size-swatch .swatch,
#edit-tag--2 .form-checkboxes label,
.form-check-label .name {
  display: flex;
  /* Use Flexbox to center content */
  align-items: center;
  /* Center content vertically */
  justify-content: center;
  /* Center content horizontally */
  margin-left: 5px;
  /* Add spacing between the boxes */
  width: auto;
  /* Adjust the size of the box */
  min-width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  /* Add a border */
  border-radius: 4px;
  /* Optional: Rounded corners */
  text-align: center;
  /* Align text in the center horizontally (optional with Flexbox) */
  color: black;
  transition: all 0.2s ease;
  /* Add a hover effect */
  padding: 3px;
  font-size: 12px;
}

.variations .form-check-label .name {
  width: 40px !important;
  /* Adjust the size of the box */
  height: 40px !important;
}

.size-swatch input[type="checkbox"]:checked+.swatch,
#edit-tag--2 .form-checkboxes input[type="checkbox"]:checked+label,
input[type="radio"]:checked+.form-check-label .name,
input[type="checkbox"]:checked+.form-check-label .name {
  border-color: white;
  /* Highlight the border when selected */
  background-color: rgba(0, 0, 0, 0.8);
  /* Slightly darker background when selected */
  color: white;
  font-size: 12px !important;
}

/* Ensure the list items are displayed in a single row with wrapping */
#edit-tag--2 .form-checkboxes ul {
  display: flex;
  /* Arrange items in a single row */
  flex-wrap: wrap;
  /* Allow items to wrap if there's not enough space */
  gap: 10px;
  /* Add spacing between items */
  list-style: none;
  /* Remove default bullet points */
  padding: 0;
  margin: 0;
  direction: rtl !important;
}

#edit-tag--2 .form-checkboxes li {
  margin: 0;
  /* Remove default margin */
}


.size-swatch .swatch:hover,
.form-check-label .name:hover {
  background-color: #595e73 !important;
  color: white;
  cursor: pointer;
}

.form-item-purchased-entity-0-attributes-attribute-color-att .name {
  display: none !important;
}


.block-views-blocknew-arrivals-products-block-1 {
  margin-bottom: 2rem !important;
}



.region-content {
  width: 100%;
  padding-right: calc(var(--beo-gutter-x) * .5);
  padding-left: calc(var(--beo-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
  font-family: "Cairo";
}


/* .js-form-item.form-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-family: Arial, sans-serif;
} */

/* Input Field Styling */
.js-form-item.form-item .form-text {
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
  font-family: inherit;
  color: #333;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: right;
}

/* Placeholder Styling */
.js-form-item.form-item .form-text::placeholder {
  color: #aaa;
  font-style: italic;
}

/* Hover Effect */
.js-form-item.form-item .form-text:hover {
  background-color: #fff;
  border-color: #007bff;
}

/* Focus Effect */
.js-form-item.form-item .form-text:focus {
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
  outline: none;
}

/* Optional: Error and Success States */
.js-form-item.form-item .form-text.error {
  border-color: #dc3545;
  background-color: #ffe6e6;
}

.js-form-item.form-item .form-text.success {
  border-color: #28a745;
  background-color: #e6ffee;
}

.discount-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: red;
  color: white;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  z-index: 1;
}

.product-image .flag-icon {
  position: absolute;
  top: 10px;
  right: -50px;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 5px;
  z-index: 100;
  padding: 0;
  border: none;
  box-sizing: border-box;
  font-size: 24px;
  line-height: 1;
  opacity: 0;
  display: grid;
  place-items: center;
  transition: right 0.3s ease, opacity 0.3s ease;
  color: black;
}

.product-image .cart-icon {
  top: 60px !important;
}

.product-image:hover .flag-icon {
  right: 10px;
  opacity: 1;
}

.product-image .flag-icon a {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 40px;
  padding-top: 0.2rem;
}

.product-image .flag-icon a>svg {
  vertical-align: middle;
  max-width: 24px;
  max-height: 24px;
}

.flag-icon {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
  color: white;
  font-size: 1.5em;
}

.flag-icon:hover {
  transform: scale(1.2) rotate(10deg);
  background-color: gold;
}



.layout__region--second .calculated-price {
  color: #28a745;
}

.layout__region--second .product-title {
  padding-left: 0rem !important;
}

.views-view-grid .calculated-price,
.views-view-grid .applied-discount,
.new-arrivals-slider .calculated-price,
.new-arrivals-slider .applied-discount,
.views-view-grid .price-title,
.new-arrivals-slider .price-title {
  display: none;
}

.views-view-grid .base-price,
.new-arrivals-slider .base-price {
  text-decoration: none;
}

.price-title {
  font-size: 1.25rem !important;
  color: var(--beo-heading-color) !important;
}



main {
  position: relative;
  max-width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin-top: 2rem;
}



.js-form-item-price__number-max {
  display: none !important;
}


.accordion-body {
  padding: unset !important;
}


.fieldset-legend.form-required::after {
  background-image: unset !important
}



.field--widget-commerce-quantity {
  margin-top: 2rem;
  justify-content: flex-end;
  /* Align all items to the right */
}

/* Hide default browser number input spinners */
.js-form-type-number input[type=number]::-webkit-inner-spin-button,
.js-form-type-number input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.js-form-type-number input[type=number] {
  -moz-appearance: textfield;
}


.custom-number-input {
  position: relative;
  display: inline-block;
}

.custom-number-input input[type="number"] {
  width: 80px;
  padding-left: 28px;
  /* Space for minus button */
  padding-right: 28px;
  /* Space for plus button */
  text-align: center;
  box-sizing: border-box;
}

.custom-number-input .minus,
.custom-number-input .plus {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  background: transparent;
  border: none;
  color: #444;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
  outline: none;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.custom-number-input .minus {
  left: 0;
  border-radius: 4px 0 0 4px;
}

.custom-number-input .plus {
  right: 0;
  border-radius: 0 4px 4px 0;
}

.custom-number-input .minus:active,
.custom-number-input .plus:active {
  color: #0074d9;
}

.js-form-type-number input {
  width: 140px !important;
  height: 50px !important;
  border-radius: 50px !important;
  padding: 5px;
  /* Add some padding for better usability */
  border: 1px solid #ccc;
  /* Add a light gray border */
  border-radius: 4px;
  /* Round the corners slightly */
  font-size: 14px;
  /* Adjust the font size for better readability */
}

.js-form-type-number label {
  display: none;
}


.form-radios {
  display: grid;
  grid-auto-flow: row;
  /* Reverse the order of items visually */
  direction: rtl;
  /* Right-to-left for reverse placement */
}

.layout--twocol-section {
  width: 80% !important;
  max-width: 1400px !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  flex-direction: row-reverse;
  display: flex !important;
  flex-wrap: nowrap !important;
}


/* Styling the Swiper Slides */
.block--type-about-us-block .swiper-slide {
  margin: 0 10px;
  /* Adds spacing between slides */
  overflow: hidden;
  /* Ensures content stays within the rounded border */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  /* Smooth hover effect on the border */
}

/* Add hover effect to the border */
.block--type-about-us-block .swiper-slide:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  /* Intensifies shadow on hover */
}

/* Styling Swiper Slide Images */
.block--type-about-us-block .swiper-slide img {
  width: 100%;
  /* Ensures the image takes the full width of its container */
  height: 600px;
  /* Fixed height for consistent sizing */
  object-fit: cover;
  /* Crops the image proportionally to fit the container */
  transition: transform 0.3s ease;
  /* Smooth zoom effect on hover */
}

/* Add a hover effect to the image */
.block--type-about-us-block .swiper-slide img:hover {
  transform: scale(1.05);
  /* Slight zoom-in effect on hover */
}

/* Optional: Styling the Swiper container */
.block--type-about-us-block .swiper {
  padding: 20px;
  /* Adds padding around the Swiper slider */
  background-color: #f8f9fa;
  /* Light background to contrast the images */
  border-radius: 20px;
  /* Matches the rounded corners of the slides */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* Adds a subtle shadow around the Swiper container */
}

.social-media-links--platforms {
  position: relative;
}

.dropdown-toggle::after {
  display: none;
}


.dropdown-toggle::before {
  content: "\f078";
  /* Unicode for 'chevron-down' icon */
  font-family: "Font Awesome 6 Free";
  /* Use 'Font Awesome 6 Pro' if you're using Pro */
  font-weight: 900;
  /* Solid style */
  margin-right: 3px;
  /* Add spacing between icon and text */
  vertical-align: middle;
  display: inline-block;
  opacity: 0.5;
}

.fa-instagram {
  background: linear-gradient(45deg,
      #f09433,
      #e6683c,
      #dc2743,
      #cc2366,
      #bc1888);
  border-radius: 30%;
  /* Circular background */
  width: 30px;
  /* Set size */
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  /* Icon color */
  font-size: 12px;
  /* Icon size */
}

.fa-facebook {
  color: #1877F2;
  /* Facebook blue color */
  font-size: 30px;
  /* Set the icon size */
}

.me-1 {
  margin-right: 0rem !important;
}


.cart-block--link__expand,
.wishlist-header-link {
  display: flex !important;
  flex-direction: column;
  /* Stack children vertically */
  align-items: flex-end;
  ;
  /* Center align the items */
  text-align: center;
  /* Center align the text */
}



.cart-block--summary__count,
.wishlist-count-badge {
  width: 1rem;
  height: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 400;
  position: relative;
  top: 0.2rem;
  right: 0.4rem;
  background-color: #595e73;
  color: white;
}

.block-social-media-links {
  position: relative;
  /* Enable positioning for the pseudo-element */
  padding-right: 15px;
  margin-top: 1rem;
  /* Add space for the pseudo-element */
}

.block-social-media-links::before {
  content: "";
  /* Pseudo-element with no content */
  position: absolute;
  top: 0;
  right: 0;
  /* Align to the right */
  width: 1px;
  /* Border width */
  height: 100%;
  /* Full height of the element */
  background: linear-gradient(to bottom, black, white);
  /* Gradient from black to white */
  z-index: 1;
  /* Ensure it stays above the background but below content */
}

.block-social-media-links ul {
  list-style: none;
  /* Remove bullet points */
  margin: 0;
  padding: 0;
  display: flex !important;
  /* Ensure the icons are displayed inline */
  flex-direction: column;
}

.block-social-media-links li {
  display: inline-block;
  /* Display list items inline */
}

.block-social-media-links a {
  text-decoration: none;
  /* Remove underline from links */
  color: #333;
  /* Color of the icons or text */
  font-size: 16px;
  /* Adjust text or icon size */
}

.block-social-media-links a:hover {
  color: #3498db;
  /* Change color when hovered over */
}

.block-social-media-links i {
  font-size: 20px;
  /* Adjust icon size */
  margin-right: 5px;
  /* Add space between the icon and text */
}

#block-belgrade-useraccountmenu .svg-inline--fa {
  height: 25px;
  color: #6d9aaa;
  line-height: 1;
}



.popup-menu {
  display: none;
  /* Menu is hidden by default */
  position: absolute;
  top: 5rem;
  /* Adjust based on your site's design */
  left: 7rem;
  background-color: #ffffff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  font-family: "Cairo";
  width: 150px;
}

.contextual-region .popup-menu {
  left: 0rem !important;
  top: 3rem !important;
}


.popup-menu.active {
  display: block;
  /* Show the menu when active */
}

.popup-menu .nav {
  width: 100% !important;
}

.popup-menu ul {
  all: unset !important;
  list-style: none !important;
}

.popup-menu .nav-item {
  text-align: left;
  width: 100% !important;
}

.popup-menu .nav-item:hover {
  font-weight: bold !important;
  /* Make active link bold */
  background-color: #464a4f !important;
  /* Blue background */
  color: white;
}

.popup-menu .nav-item:hover .nav {
  background-color: #464a4f !important;
  /* Blue background */
}


.popup-menu .nav-item:hover .nav-link {
  color: white;
}

.view-main-categories-view {
  font-family: "Cairo";
}

/* Menu toggle button */
.menu-toggle {
  cursor: pointer;
  background-color: transparent;
  border: none;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin-left: 0.2rem;
}


/* Hide navigation buttons by default */
.swiper-button-next,
.swiper-button-prev {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show buttons on hover */
.swiper-container:hover .swiper-button-next,
.swiper-container:hover .swiper-button-prev {
  opacity: 1;
  visibility: visible;
}


/* Make sure the swiper-slide is the positioning context */
.view-highlighted-products .swiper-slide {
  position: relative;
  /* Enable positioning for child elements */
  width: 100%;
  /* Ensure the slide takes the full width */
  /* Set a fixed height for the slide or adapt dynamically */
  overflow: hidden;
  /* Prevent overflowing elements */
}

/* Style the image */
.view-highlighted-products .swiper-slide img {
  width: 100%;
  /* Make the image span the full width of the parent */
  height: 100%;
  /* Scale the image to fill the height */
  object-fit: cover;
  /* Ensures the image covers the container without distortion */
  display: block;
  /* Removes inline gaps caused by the image being an inline element */
}

.view-highlighted-products .swiper-slide .title {
  position: absolute;
  /* Position relative to .swiper-slide */
  top: 80%;
  /* Start from the top */
  left: 50%;
  /* Center horizontally */
  transform: translate(-50%, 0);
  /* Start horizontally centered at the top */
  color: white;
  /* Initial text color */
  padding: 10px 20px;
  /* Optional: Add padding for better spacing */
  font-size: 32px;
  /* Customize font size */
  font-family: "Cairo";
  font-weight: bold;
  border-radius: 5px;
  /* Optional: Add rounded corners for aesthetics */
  text-align: center;
  /* Center-align the text */
  z-index: 10;
  /* Ensure the title appears above the image */

  /* Separate animations */
  /* animation: moveDown 1s ease-out forwards, blink 2s infinite alternate; */
}

/* Keyframes for moving the title from the top to its position */
@keyframes moveDown {
  0% {
    top: 0;
    /* Start at the top */
    transform: translate(-50%, 0);
    /* Horizontal center, top position */
    opacity: 0;
    /* Start invisible */
  }

  100% {
    top: 80%;
    /* Final position */
    transform: translate(-50%, -50%);
    /* Fully centered at the final position */
    opacity: 1;
    /* Fade in */
  }
}

/* Keyframes for blinking between white and gray */
@keyframes blink {
  0% {
    color: white;
    /* Start with white text */
  }

  100% {
    color: gray;
    /* Transition to gray text */
  }
}


.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 30px) !important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
}

img,
svg {
  vertical-align: unset !important;
}

.brands-block {
  margin: 0 auto;
  /* Centers the swiper container horizontally within the parent */
  width: 80%;
  /* Sets the container width */
}


.brand-icon {
  width: 135px;
  overflow: hidden;
  /* Ensures the image doesn’t overflow outside the container */
}

.brand-icon img {
  transition: transform 0.3s ease;
  /* Smooth animation for scaling */
}

.brand-icon:hover img {
  transform: scale(1.2);
  /* Scales the image to 120% of its original size */
}

.brands-block .name {
  font-family: "Cairo";
  font-size: 14px;
  color: #414042;
}

/* Centering and styling for the container */
.brands-block .swiper-slide div,
.brands-block .swiper-slide {
  display: flex;
  /* Enables flexbox for layout control */
  flex-direction: column-reverse;
  /* Stacks children (brand-icon and h2) vertically */
  align-items: center;
  /* Centers children horizontally */
  justify-content: center;
  /* Centers children vertically (optional) */
}

/* Style for the brand icon (image) */
.brands-block .brand-icon img,
.brands-block .views-field-brand-icon img {
  max-width: 100%;
  /* Ensures the image is responsive */
  height: auto;
  /* Maintains aspect ratio */
  border-radius: 10px;
  /* Optional: Adds rounded corners to the image */
}

.brands-block .swiper-wrapper {
  padding: 20px;
  justify-content: center !important;
  transform: unset !important;
}

.block-views-blockbrands-block-1,
.block-views-blockmain-categories-view-block-1,
.block-quicktabs-blocknew-arrivals-tab {
  margin-top: 3rem;
}

.block-views-blockbrands-block-1 h2,
.block-views-blockmain-categories-view-block-1 h2,
.block-quicktabs-blocknew-arrivals-tab h2 {
  font-family: "Cairo";
  font-size: 2rem;
  color: #414042;
  text-align: center;
}

.brands-block .view-header,
.main-categories .view-header,
.block-quicktabs-blocknew-arrivals-tab .view-header {
  text-align: center;
  color: #414042;
  font-family: "Cairo";
}

.main-categories .view-content {
  width: 70%;
  margin: auto;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
}

.main-categories .view-content img {
  border-radius: 10px;
  /* Adds rounded corners to the images */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Smooth scaling and shadow animation */
  width: 100%;
  /* Ensures the image takes up the parent element's width */
  height: auto;
  /* Maintains the image's aspect ratio */
}

.main-categories .view-content img:hover {
  transform: scale(1.1);
  /* Scales the image slightly on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Adds a shadow to the image during hover */
}

.main-categories .views-row div {
  position: relative;
  /* Allows positioning of child elements like h2 and term-action */
  display: inline-block;
  /* Ensures the div wraps around the image */
  width: fit-content;
  /* Optional: Adjust based on your layout needs */
}

.category-image img {
  display: block;
  /* Ensures the image behaves like a block-level element */
  width: 100%;
  /* Adjust width to the parent container */
  height: auto;
  /* Maintain the aspect ratio of the image */
  border-radius: 10px;
  /* Optional: Adds rounded corners to the image */
}

.main-categories .views-row h2 {
  /* Aligns to the right edge */
  text-align: right !important;
  /* Centers the text horizontally */
  padding: 10px;
  /* Adds padding around the text */
  z-index: 100;
  top: 10%;
}


.main-categories a {
  color: #414042 !important;
}

.main-categories .views-row h2 {
  bottom: 50px;
  /* Positions the title 50px above the bottom of the image */
  font-size: 1.5rem important;
  /* Adjust font size for the title */
  font-weight: bold;
  /* Makes the title bold */
}


.views-field-term-action .field-content a {
  position: relative;
  /* Needed for positioning the ::after pseudo-element */
  display: inline-block;
  /* Or block, depending on your layout needs */
  padding-bottom: 5px;
  /* Space for the underline below the text */
  text-decoration: none;
  /* Remove default underline if any */
  color: inherit;
  /* Ensure text color is inherited or set explicitly */
}

.views-field-term-action .field-content a::after {
  content: '';
  /* Required for pseudo-elements */
  position: absolute;
  left: 0;
  bottom: 0;
  /* Position at the bottom of the parent link */
  width: 0;
  /* Starts with no width (invisible) */
  height: 2px;
  /* Thickness of the underline */
  background-color: white;
  /* Color of the underline */
  /* Crucial for animation: smooth transition for the 'width' property */
  transition: width 0.2s ease-in-out;
}


.views-field-category-image:hover+.views-field-term-action .field-content a::after {
  width: 100%;
  /* Expands the underline to full width */
}

/* General tab styles */
.quicktabs-tabs {
  display: flex;
  justify-content: center;
  /* Center the tabs horizontally */
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Cairo', sans-serif;
  /* Use the Cairo font family */
  font-size: 16px;
  gap: 50px;
  /* Add space between the tabs */
}

/* Individual tab styles */
.quicktabs-tabs li {
  position: relative;
  /* Needed for the hover underline effect */
  padding: 10px 15px;
  /* Add padding for better click area */
  cursor: pointer;
  /* Add a pointer cursor on hover */
  text-align: center;
}

/* Add hover animation for underline */
.quicktabs-tabs li a {
  text-decoration: none;
  /* Remove default link underline */
  color: #333;
  /* Default text color */
  transition: color 0.3s ease;
  /* Smooth transition for text color */
}

#block-belgrade-quicktabsnewarrivalstab .quicktabs-tabs li a:hover {
  color: black;
  /* Change text color on hover */
}

/* Add underline animation on hover */
#block-belgrade-quicktabsnewarrivalstab .quicktabs-tabs li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: black;
  /* Black underline */
  transition: width 0.3s ease;
  /* Smooth animation */
}

#block-belgrade-quicktabsnewarrivalstab .quicktabs-tabs li a:hover::after {
  width: 100%;
  /* Full underline on hover */
}

/* Active tab styling */
.quicktabs-tabs .active a {
  color: black;
  /* Highlight active tab */
  font-weight: bold;
}

.quicktabs-tabs .active a::after {
  width: 100%;
  /* Ensure underline is visible for the active tab */
}

#backtotop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0.8;
}

#backtotop:hover {
  opacity: 1;
  transform: scale(1.1);
}

#backtotop:focus {
  outline: none;
}

.block-quicktabs-blocknew-arrivals-tab .views-element-container {
  width: 72%;
  margin: auto;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 3rem;
  margin-bottom: 3rem;
}


.view-men-new-arrivals,
.view-women-new-arrivals,
.view-kids-new-arrivals {
  width: 100%;
}


.region-footer .body {
  margin-left: 1rem;
}


#quicktabs-container-new_arrivals_tab .views-row {
  float: right;
  clear: both;
  display: flex;
  width: 100%;
  direction: rtl;
}

.block-quicktabs-blocknew-arrivals-tab .quicktabs-tabs {
  margin-top: 1rem;
}

/* Ensure the parent container is a positioning context */
.region-highlighted {
  position: relative;
  z-index: 0 !important;
  /* margin-top: 4.5rem; */
  /* Establish a relative positioning context */
  /* max-height: 198px; */
}

.region-highlighted .title {
  position: absolute;
  /* Position relative to the nearest positioned ancestor (container-xl) */
  top: 30%;
  /* Vertically center */
  left: 50%;
  /* Horizontally center */
  transform: translate(-50%, -50%);
  /* Adjust for the block's own width and height */
  font-family: "Cairo";
  font-size: 3rem;
  color: white;
  font-weight: bold;
  z-index: 100;
}


/* Center the first block relative to the parent container */
.region-highlighted .block-system-breadcrumb-block {
  position: absolute;
  /* Position relative to the nearest positioned ancestor (container-xl) */
  top: 60%;
  /* Vertically center */
  left: 50%;
  /* Horizontally center */
  transform: translate(-50%, -50%);
  /* Adjust for the block's own width and height */
  z-index: 100;
}


.region-highlighted .breadcrumb-item {
  font-family: "Cairo";
  font-size: 1rem;
  color: white;
}

.region-highlighted .breadcrumb-item a {
  color: white;
}

.breadcrumb-item+.breadcrumb-item::before {
  float: unset !important;
  color: white;
}

.region-content .breadcrumb-item+.breadcrumb-item::before {
  color: black !important;
}



.region-header {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-bottom: 1px solid #e7e3e3;
  /* Adds a 1px solid black border to the bottom */
  /* You can adjust the width, style, and color as needed */
}

.region-help .brands-block {
  width: 100% !important;
}

.region-help {
  width: 100% !important;
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}


.region-help .brand-icon {
  width: 160px;
  overflow: hidden;
  /* Ensures the image doesn’t overflow outside the container */
  border-radius: 10px;
  /* Adds rounded corners to the image */
}

.swiper-container {
  margin: 0rem !important;
}

/* Ensure the container aligns items properly */
.js-form-item {
  display: flex;
  ;
  align-items: center;
  /* Vertically align the checkbox and label */
  justify-content: flex-start;
  /* Ensure the checkbox is on the right for Arabic layout */
  padding-left: 0rem !important;
}

/* Add space between the label and the checkbox */
.form-check-label {
  display: inline-block;
  /* Ensure the label behaves like a block element for alignment */
  line-height: 1;
  /* Fix vertical alignment issues */
  font-weight: normal;

}

.views-exposed-form .form-check-label {
  margin-right: 2rem;
}

/* Optional: Styling for checkbox */
.form-check-input {
  cursor: pointer;
  /* Makes the checkbox clickable */
  flex-shrink: 0;
  /* Prevent the checkbox from shrinking in the layout */
  width: 18px;
  /* Adjust width for better alignment */
  height: 18px;
  /* Adjust height for better alignment */
  margin: 0;
  /* Reset any default margin */
  border-radius: 0 !important;
  /* Remove any default border radius */
}


.fieldset-legend.accordion-button.border-bottom {
  position: absolute;
  /* Set the span to absolute positioning */
  right: 0;
  /* Align it to the far right of the parent */
  top: 50%;
  /* Vertically center the span */
  transform: translateY(-50%);
  /* Adjust for vertical centering */
  text-align: right;
  /* Ensure the text inside the span is aligned to the right */
  white-space: nowrap;
  /* Prevent the text from wrapping to a new line */
}

.region-sidebar-first {
  padding-top: 3rem !important;
}

.js-form-wrappe {
  padding-top: 2rem;
}

.my-2 {
  margin-top: 2rem !important;
}


.accordion-flush>.accordion-item {
  width: 100%;
}



#search-icon {
  font-size: 24px;
  cursor: pointer;
  color: #333;
  position: relative;
  z-index: 10;
  margin-left: 0.3rem;
}

/* Initial hidden state */
.region-header .block-views-exposed-filter-blockall-products-search-page-1 {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Changed to fixed to ensure it stays at the top during scrolling */
  top: 6rem;
  /* Initial position at the top */
  left: 10%;
  /* Horizontal centering adjustment */
  margin-right: auto;
  margin-left: auto;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  width: 80%;
  height: 220px;
  opacity: 1;
  /* Start as invisible */
  transform: translateY(-20px);
  /* Start slightly above its position */
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* Smooth transition */
}

/* Visible state with animation */
.region-header .block-views-exposed-filter-blockall-products-search-page-1.show {
  display: block;
  /* Make it visible */
  opacity: 1;
  /* Fully visible */
  transform: translateY(0);
  /* Reset transform to bring it into view */
}

/* Make the search div visible when the class is added */
.region-header .block-views-exposed-filter-blockall-products-search-page-1.visible {
  display: block;
}

/* Optional: Style the input inside the search div */
.region-header .block-views-exposed-filter-blockall-products-search-page-1 input,
.region-content .block-views-exposed-filter-blockall-products-search-page-1 input {
  width: 60%;
  /* Set the width to 80% of the parent */
  max-width: 60% !important;
  margin: 0 auto;
  /* Center horizontally using auto margins */
  display: block;
  /* Ensure the element respects the margin: auto rule */
  font-family: "Cairo";
  border-radius: 50px;
  background-color: white !important;
}

#search-title {
  font-family: "Cairo";
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}

.close-popup-button {
  position: absolute;
  /* Position relative to the popup */
  top: 10px;
  /* Adjust based on your design */
  left: 10px;
  /* Adjust based on your design */
  background: transparent;
  /* No background */
  border: none;
  /* No border */
  font-size: 1.5rem;
  /* Larger font for the "X" */
  color: #333;
  /* Match your design colors */
  cursor: pointer;
  /* Pointer cursor for hover */
}

.close-popup-button:hover {
  color: #f00;
  /* Change color on hover for better UX */
}


#edit-submit-all-products-search,
#edit-submit-all-products-search--2 {
  width: 30% !important;
  background-color: #6d9aaa !important;
  border: 1px;
}

#edit-submit-all-products-search:hover,
#edit-submit-all-products-search--2:hover {
  background-color: #385d6b !important;
}



.view-all-products-search .search-products-count {
  font-size: 36px !important;
  color: #414042 !important;
  margin-bottom: .5rem !important;
}

.view-display-id-filter .view-header,
.view-all-products-search .view-header,
.view-display-id-promotions .view-header {
  display: grid;
  /* Use grid layout for dividing regions */
  grid-template-columns: 1fr 1fr 1fr;
  /* Divide into three equal columns */
  align-items: center;
  /* Center items vertically */
  justify-items: center;
  /* Center items horizontally */
  align-items: center;
  /* Align items vertically in the center */
  font-family: 'Cairo', sans-serif;
  /* Apply Cairo font */
  padding-bottom: 1rem;
  position: relative;
  /* Position for the ::after pseudo-element */
}

.view-display-id-filter .view-header::after,
.view-display-id-promotions .view-header::after {
  content: '';
  /* Create an empty pseudo-element */
  position: absolute;
  /* Position it relative to the header */
  bottom: 0;
  /* Align it at the bottom of the header */
  left: 0;
  /* Start at the left edge */
  width: 100%;
  /* Span the entire width of the header */
  height: 1px;
  /* Set the thickness of the underline */
  background: #f5f5f5;
  /* Add a gradient for a beautiful effect */
  border-radius: 1px;
  /* Slightly round the edges of the underline */

}

.view-display-id-filter .view-header>div:nth-child(1) {
  grid-column: 1;
  /* Place the first div in the first region */
}

.view-display-id-filter .view-header>div:nth-child(2),
.view-id-all_products_search .view-header>div:nth-child(2) {
  grid-column: 2;
  /* Place the second div in the second region */
}

/* The third region (grid-column: 3) will remain empty automatically */
/* Style for the first div (aligned to the right) */
.products-count {
  text-align: right;
  /* Align text to the right */
  flex: 1;
  /* Allow it to take up available space */
}

/* Style for the second div (center aligned) */
.search-type {
  text-align: right;
  /* Center align the text */
  flex: 1;
  /* Allow it to take up available space */
}



/* Parent Container: Flexbox for Layout */
.bootstrap-basic-image-gallery {
  display: flex;
  /* Enable flexbox */
  flex-direction: row;
  /* Arrange the main image and thumbnails side-by-side */
  align-items: flex-start;
  /* Vertically align thumbnails and main image */
}

/* Main Image: Takes Remaining Space */
.bootstrap-basic-image-gallery .main-image {
  flex-grow: 1;
  /* Allow the main image to take up the remaining horizontal space */
  margin-right: 10px;
  /* Optional: Add spacing between the main image and thumbnails */
  position: relative;
}

.bootstrap-basic-image-gallery .main-image img {
  width: 100%;
  /* Make the main image responsive */
  height: auto;
  /* Maintain aspect ratio */
  object-fit: contain;
  /* Prevent distortion of the image */
  border-radius: 4px;
  cursor: zoom-in;
}

/* Thumbnails: Fixed Width */
.bootstrap-basic-image-gallery .thumbnails {
  display: flex;
  /* Enable flexbox for vertical stacking */
  flex-direction: column;
  /* Stack thumbnails vertically */
  align-items: center;
  /* Center thumbnails horizontally */
  width: 50px;
  /* Set fixed width for the thumbnails column */
  max-width: 50px;
  /* Ensure the thumbnails column doesn’t grow */
  border-radius: 4px;
}

.bootstrap-basic-image-gallery .thumbnails .thumb {
  width: 100% !important;
  /* Ensure each thumbnail fits the thumbnails column */
  height: 50px;
  /* Fixed height for thumbnails */
}

.bootstrap-basic-image-gallery .thumbnails .thumb img {
  width: 100%;
  /* Make thumbnails fill their containers */
  height: 100%;
  /* Maintain fixed dimensions */
  object-fit: cover;
  /* Crop thumbnails to fit their containers */
  border: 2px solid transparent;
  /* Default border */
  border-radius: 4px;
  /* Optional: Add rounded corners */
  cursor: pointer;
  /* Pointer cursor to indicate interactivity */
  transition: border-color 0.2s ease;
  /* Smooth border color transition */
}

.bootstrap-basic-image-gallery .thumbnails .thumb img:hover {
  border-color: black;
  /* Highlight border on hover */
}

/* Default style for the ::before pseudo-element */
.bootstrap-basic-image-gallery .main-image::before {
  content: '';
  /* Empty content for the pseudo-element */
  position: absolute;
  /* Position relative to the main image */
  top: 10px;
  /* Offset from the top */
  left: 10px;
  /* Offset from the left */
  width: 32px;
  /* Width of the pseudo-element */
  height: 32px;
  /* Height of the pseudo-element */
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none"><path d="M0.000357628 13.3636L0.000596046 10.1813C0.000596046 9.82984 0.28544 9.54512 0.636787 9.54512C0.988253 9.54512 1.27286 9.82984 1.27286 10.1814V11.8261L4.96974 8.12603C5.09417 8.00148 5.25721 7.93963 5.42013 7.93963C5.58281 7.93963 5.7455 8.0016 5.8698 8.12591C6.1183 8.37416 6.11853 8.77699 5.87016 9.02549L2.17208 12.7271H3.81643C4.16789 12.7271 4.45274 13.0121 4.45274 13.3637C4.45274 13.715 4.16777 14 3.81643 14H0.636787C0.467907 14 0.306178 13.9329 0.186758 13.8134C0.067338 13.6941 0.000357628 13.532 0.000357628 13.3636ZM0.636668 4.45524C0.988253 4.45524 1.27286 4.16992 1.27286 3.81869V2.17399L4.90777 5.77791C5.1565 6.02641 5.57638 6.02665 5.82487 5.77815C6.07348 5.53002 6.08206 5.12694 5.83381 4.87857L2.23561 1.27286H3.88174H3.88305C4.23452 1.27286 4.51972 0.988133 4.51984 0.636548C4.51995 0.285439 4.23559 0.000356674 3.884 0.000356674L0.70484 0C0.53584 0 0.339906 0.0670996 0.220843 0.186399C0.101542 0.3057 0.000238419 0.467548 0.000238419 0.636189V3.81881C0.000357628 4.17004 0.285321 4.45524 0.636668 4.45524ZM9.09271 5.80592L12.7273 2.17375V3.81881C12.7273 4.17028 13.0065 4.45452 13.3579 4.45452H13.3552C13.7067 4.45452 13.9902 4.16992 13.9902 3.81881L13.99 0.636667C13.99 0.467787 13.9227 0.305939 13.8034 0.186638C13.6838 0.0672178 13.5217 0.000237465 13.353 0.000237465H10.1732C9.82174 0.000237465 9.5369 0.285201 9.5369 0.636548C9.5369 0.988253 9.82186 1.2731 10.1732 1.2731H11.8171L8.18705 4.90646C7.93832 5.15483 7.94153 5.55826 8.19003 5.8064C8.43852 6.05453 8.84409 6.0543 9.09271 5.80592ZM11.8283 12.6698H10.1842C9.8327 12.6698 9.54798 12.9544 9.54798 13.3058C9.54798 13.6574 9.83282 13.9423 10.1842 13.9423L13.3636 13.9426H13.3637C13.5326 13.9426 13.6942 13.8758 13.8137 13.7565C13.9329 13.6372 14 13.4755 14 13.3064L13.9996 10.124C13.9996 9.77299 13.7148 9.48767 13.3635 9.48767C13.012 9.48767 12.7273 9.77299 12.7273 10.124V11.7689L9.05934 8.09802C8.93503 7.97359 8.77199 7.91138 8.60907 7.91138C8.4465 7.91138 8.28358 7.97335 8.1594 8.09766C7.91079 8.34592 7.91043 8.74911 8.15904 8.99784L11.8283 12.6698Z" fill="%23111111"/></svg>');
  background-size: contain;
  /* Ensure the SVG fits properly */
  background-repeat: no-repeat;
  /* Prevent repeating */
  transition: transform 0.2s ease, background-color 0.2s ease;
  /* Smooth scale and color transition */
}

/* Hover effect: Change background color and scale the SVG */
.bootstrap-basic-image-gallery .main-image:hover::before {
  transform: scale(1.2);
  /* Scale the SVG to 120% */
}

.variations {
  margin-top: 3rem;
}

.variations legend {
  float: none !important;
  margin-bottom: 0.5rem !important;
}

.block-addtoany-block {
  margin-right: 3.5rem;
}

.a2a_kit {
  font-size: 1.125rem;
}

#copyUrlBtn {
  background: none;
  border: none;
  padding: 0 !important;
}

.share-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end !important;
  /* Aligns items to the left */
  margin-right: 0;
  margin-left: 3rem;
}

.share-label {
  margin-left: 0.5rem;
  /* Adds space between label and icons */
}

.share-icons a {
  margin-left: 0.2rem;
}

.views-view-grid {
  --beo-gutter-x: 1rem !important;
}

.row {
  --beo-gutter-x: 1rem !important;
}

.count-label {
  font-size: 0.8rem;
}


.border-bottom,
.attribute-widgets>.form-item .fieldset-legend,
.attribute-widgets>.form-item>label {
  border-bottom: 0 !important;
}

.py-2,
.attribute-widgets>.form-item .fieldset-legend,
.attribute-widgets>.form-item>label {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.bls__delivery,
.bls__return {
  display: flex;
  align-items: center;
}

.bls__return {
  margin-top: 1rem;
}

.mr-15 {
  margin-left: 1rem;
}





.attribute-widgets {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.attribute-widgets>fieldset {
  flex: 1 1 0;
  min-width: 0;
}

.block-quicktabs-blockproduct-return-tab .quicktabs-tabs {
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
  margin-top: 5rem !important;
}

.block-quicktabs-blockproduct-return-tab .quicktabs-tabs li[role="tab"] {
  background: #f5f5f5;
  color: black;
  cursor: pointer;
  padding: 10px 24px;
  border: none;
  margin-right: 8px;
  border-radius: 20px;

}

.block-quicktabs-blockproduct-return-tab.quicktabs-tabs li[role="tab"].active,
.block-quicktabs-blockproduct-return-tab .quicktabs-tabs li[role="tab"][aria-selected="true"] {
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: #fff;
}

.block-quicktabs-blockproduct-return-tab.quicktabs-tabs li[role="tab"]:focus {
  color: #fff;
}

/* Optional: style the anchor if you want clickable area to cover the whole tab */
.block-quicktabs-blockproduct-return-tab .quicktabs-tabs li[role="tab"] a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.block-quicktabs-blockproduct-return-tab {
  border-top: 1px solid #e7e3e3;
  /* Light gray line */
  font-family: "Cairo";
  margin-top: 5rem;
}


form .field,
p:not(:only-of-type) {
  margin-bottom: 1.5rem;
}

.tab-panel {
  width: 80% !important;
  max-width: 1400px !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}

.block-views-blockrecent-viewed-products-block-1 {
  border-top: 1px solid #e7e3e3;
  margin-top: 5rem;
}


.view-recent-viewed-products {
  width: 80% !important;
  max-width: 1400px !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
}

.recently-vewied-title,
.search-products-count {
  font-family: "Cairo";
  font-size: 1rem !important;
  color: rgb(65, 64, 66);
  text-align: center;
}

.recently-vewied-title {
  font-size: 2rem !important;
}

.search-products-count,
.search-type {
  grid-column: 2 !important;
  font-family: "Cairo";
  font-size: 2rem;
  color: rgb(65, 64, 66);
  text-align: center;
}


.new-arrivals-text {
  font-family: "Cairo";
  font-size: 1rem;
  color: rgb(65, 64, 66);
  text-align: center;
}


.cart-block--contents {
  position: fixed !important;
  /* Keeps the cart on top (adjust if needed) */
  left: 5rem;
  top: 5rem;
  width: auto !important;
  outline: 1px solid rgb(172, 172, 172);
  /* White outline border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Subtle shadow for depth */
  padding: 20px;
  /* Add some spacing inside the cart block */
  border-radius: 8px;
  /* Optional: Add rounded corners */
  font-family: "Cairo" !important;
  color: black !important;
  background-color: white !important;
}

.cart-block--contents__links {
  color: #fff;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.8) !important;
  width: 50% !important;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50px;
  border: 0 !important;
}

.cart-block--contents__links a:hover {
  background-color: #595e73 !important;
  color: white !important;

}

.end-0 {
  left: 0 !important;
}

.btn-outline-white {
  border-radius: 50px;
  border: 0;
}


.highlights-background {
  z-index: 0 !important;
}

.highlights-background img {
  height: 200px !important;
  width: 100% !important;
}

.highlights-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10;
  pointer-events: none;
  padding: 2rem;
  height: 200px !important;
}

#block-belgrade-subtheme-menhighlightsbackground>*,
#block-belgrade-womenhighlightsbackground>*,
#block-belgrade-kidshighlightsbackground>*,
#block-belgrade-allproductshighlightsbackground>*,
#block-belgrade-promotionshighlightsbackground>*,
#block-belgrade-accessorieshighlightsbackground>*,
#block-belgrade-brandshighlightsbackground>*,
#block-belgrade-wishlisthighlightsbackground>* {
  z-index: 20;
}


.user-login-form .js-form-item {
  display: block !important;
}

.user-login-form .form-label {
  direction: rtl !important;
}

.block-extra-field-blockuserusermember-for .js-form-item {
  direction: ltr !important;
  gap: 10px !important;
  font-family: "Cairo" !important;
  font-size: 24px !important;
  font-weight: 500 !important;

}


.block-belgrade-breadcrumbs-product-page {
  color: black !important;
}




.view-all-products-search .category-id-text {
  position: fixed;
  /* Ensures the div stays at the top, even when scrolling */
  top: 0;
  /* Positions it at the very top of the screen */
  left: 0;
  /* Aligns it to the left side of the screen */
  width: 100%;
  /* Makes the div span the entire width of the screen */
  background-color: #f8f9fa;
  /* Optional: Gives a background color for visibility */
  color: #333;
  /* Optional: Sets the text color */
  padding: 10px;
  /* Optional: Adds some padding for better spacing */
  z-index: 1000;
  /* Ensures the div appears above other content */
  text-align: center;
  /* Optional: Centers the text horizontally */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  /* Optional: Adds a subtle shadow for better visibility */
}

#formatter-settings-wrapper .js-form-item {
  display: block !important;
}

#block-belgrade-mainmenu .nav {
  padding-left: 5rem !important;
}

.product-info .discount-percentage {
  display: none;
}

.promotion-discount-price {
  color: #595e73 !important;
  font-weight: 600 !important;

}

.layout__region--second .promotion-discount-price {
  color: green !important;
  font-size: 32px !important;
}

.nav-link.dropdown-toggle {
  cursor: pointer;
}

#edit-submit-all-products-search--3 {
  display: none;
}


#bs_ui .js-form-item {
  display: block !important;
  direction: ltr !important;
}

.view-wishlist {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem !important
}

.block-extra-field-blockcommerce-productmyproductflag-wishlist {
  position: relative;
  top: -12.2rem;
  margin-right: auto;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: grid;
  place-items: center;
  margin-left: 4rem;
  border: 1px solid lightgray;
  color: black;
  padding-top: 0.3rem;
}

.fav-icon {
  color: black !important;
}

.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist a {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 40px;
  padding-top: 0.2rem;
}

.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist a>svg {
  vertical-align: middle;
  max-width: 24px;
  max-height: 24px;
}

.block-extra-field-blockcommerce-productmyproductflag-wishlist:hover {
  background-color: #595e73;
}

.block-extra-field-blockcommerce-productmyproductflag-wishlist:hover svg {
  color: white !important;
}


/* Ensure the swiper slide content is vertically aligned and centered */
.pages-brands-swipper .swiper-slide {
  display: flex;
  flex-direction: column !important;
  align-items: center;
  /* Centers the image and name horizontally */
  justify-content: center;
  /* Centers content vertically if there's extra space */
  text-align: center;
  /* Ensures the text is centered */
}

/* Style for the brand icon container */
.pages-brands-swipper .swiper-slide .views-field-brand-icon {
  width: 160px;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 10px;
  /* Adds some space between the image and the name */
}

/* Style for the image itself */
.pages-brands-swipper .swiper-slide .views-field-brand-icon img {
  display: block;
  /* Ensures the image behaves as a block element */
  max-width: 100%;
  /* Makes sure the image is responsive within its container */
  height: auto;
  /* Maintains aspect ratio */
  transition: transform 0.3s ease-in-out;
  /* Smooth transition for the hover effect */
}

/* Hover effect for the image */
.pages-brands-swipper .swiper-slide .views-field-brand-icon img:hover {
  transform: scale(1.2);
  /* Scales the image to 120% on hover */
}

/* Style for the brand name */
.pages-brands-swipper .swiper-slide .views-field-name {
  position: unset !important;
  background-color: unset !important;
  text-shadow: unset !important;
  margin-top: 0;
  /* Ensures no extra top margin pushes it away from the image */
}

.pages-brands-swipper .swiper-slide .views-field-name a {
  font-family: "Cairo";
  font-size: 14px;
  color: #414042;
  font-weight: 500 !important;
}

.table>thead {
  text-align: center;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  text-align: center;
}

[class*="-catalog"] {
  display: grid;
  /* Change from flex to grid */
  width: 90%;

  /* Define your grid columns: 20% for filters, 1fr for content */
  grid-template-columns: 20% 1fr;

  /* Define your grid rows: auto for the header, 1fr for the main content area */
  grid-template-rows: auto 1fr;

  /* Optional: Add some gap between grid items */
  gap: 10px;
  margin-left: auto;
  margin-right: auto;
}

[class*="-catalog"] .view-header {
  /* Position the header to span all columns in the first row */
  grid-column: 1 / -1;
  /* This means from the first column line to the last */
  grid-row: 1;
  /* Place it in the first row */
  margin-right: 20% !important;
  display: flex;
  font-family: "Cairo";
  position: relative;
  margin-bottom: 1rem;
}


[class*="-catalog"] .view-empty {
  /* Position the header to span all columns in the first row */
  grid-column: 1 / -1;
  /* This means from the first column line to the last */
  grid-row: 1;
  /* Place it in the first row */
  display: flex;
  font-family: "Cairo";
  position: relative;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

[class*="-catalog"] .view-header::after {
  content: '';
  /* Required for pseudo-elements */
  position: absolute;
  /* Allows precise positioning relative to the parent */
  bottom: -0.5rem;
  /* Positions the bottom edge of the ::after element 1rem below the parent's bottom edge */
  left: 0;
  /* Aligns the left edge of the ::after element with the parent's left edge */
  right: 0;
  /* Aligns the right edge of the ::after element with the parent's right edge */
  height: 1px;
  /* The thickness of your underline */
  background-color: #ddd;
  /* The color of your underline */
  /* z-index: 1; /* Optional: Ensure it appears above other content if needed */
}

#category-id-text {
  margin-right: 25%;
}

.view-filters {
  /* Position filters in the first column of the second row */
  grid-column: 1;
  /* First column */
  grid-row: 2;
  /* Second row */
  padding: 10px;

}


.view-brands-view-for-category .view-content {
  padding: 10px;
}

.view-content {
  grid-column: 2;
  /* Second column */
  grid-row: 2;
  /* Second row */
}

.view-filters {
  font-family: "Cairo" !important;
}

.view-filters .form-item {
  border: none;
}

.view-filters li {
  list-style-type: none;
}

details[data-drupal-selector="edit-attribute-size-att-collapsible"] input[type="checkbox"] {
  display: none !important;
  /* Hide the default checkbox */
}


details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-check-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  color: black;
  transition: all 0.2s ease;
  padding: 3px;
  font-size: 12px !important;
}


/* 1. Ensure the list displays in one row and wraps */
details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-checkboxes.bef-checkboxes ul {
  display: flex;
  flex-wrap: wrap;
  /* Allows items to wrap to the next line */
  list-style: none;
  /* Removes default list bullet points */
  padding: 0;
  margin: 0;
}


/* 5. Style the label to fill the swatch container and act as the visible part */
details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-checkboxes.bef-checkboxes .form-check-label.option {
  cursor: pointer;
  /* Ensure cursor is pointer when hovering over the label text */
}

/* 6. Add hover effect for the swatch */
details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-checkboxes.bef-checkboxes .form-check-label:hover {
  border-color: #007bff;
  /* Change border color on hover */
  background-color: #e9f5ff;
  /* Light blue background on hover */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  /* Subtle shadow on hover */
}

/* 7. Change background for selected (checked) swatch */
/* This uses the adjacent sibling selector (+) to target the label when its associated input is checked */
details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-checkboxes.bef-checkboxes input[type="checkbox"]:checked+.form-check-label.option {
  background-color: #007bff;
  /* Blue background for selected swatch */
  color: #fff;
  /* White text for selected swatch */
  border-color: #007bff;
  /* Blue border for selected swatch */
}

/* Optional: Adjust hover effect for selected items to maintain consistency */
details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-checkboxes.bef-checkboxes input[type="checkbox"]:checked+.form-check-label.option:hover {
  background-color: #0056b3;
  /* Slightly darker blue on hover for selected */
  border-color: #0056b3;
}

details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-check-label {
  margin-right: 0.3rem !important;
}

div[data-drupal-selector="edit-price-wrapper"] .js-form-item {
  display: block !important;
  width: 90%;
}


.nav-item.dropdown.nav-item--expanded {
  position: relative;
  direction: ltr;
}

.nav-item--expanded .nav-item.dropdown.nav-item--expanded>.dropdown-menu {
  position: absolute;
  left: auto;
  right: 100%;
  top: 0;
  margin-left: 0;
  margin-right: 0;
  z-index: 1050;
}

#block-belgrade-exposedformall-products-searchpage-1 {
  margin-top: 3rem;
}


#edit-coupon-redemption {
  padding-right: 0 !important;
}


#edit-coupon-redemption label {
  display: none;
}

#edit-coupon-redemption input[type="text"] {
  display: block !important;
  width: 178px;
  height: 41px;
}

#edit-coupon-redemption .error.form-control {
  background-image: unset !important;

}

#views-form-commerce-cart-form-default-13 .form-actions {
  margin-top: 0 !important;
}

.cart-form+.cart-form {
  padding-top: 0rem;
  border-top: 0px;
}

.view-commerce-cart-form {
  font-family: "Cairo";
  margin-top: 2rem;
}

#products-sort {
  position: absolute;
  left: 5rem;
  z-index: 10;
  top: -0.4rem;
  /* desktop default */
}


.swiper-slide {
  position: relative;
  /* Allows absolute positioning of children */
  overflow: hidden;
  /* Hides any overflow from the image */
  display: flex;
  /* Use flexbox to center content */
  align-items: center;
  /* Vertically center content */
  justify-content: center;
  /* Horizontally center content */
  text-align: center;
  color: white;
  /* Default text color for better contrast */
  box-sizing: border-box;
  /* Include padding and border in the element's total width and height */
}

/* Style the image to act as a background */
.swiper-slide .views-field-brand-icon img {
  top: 0;
  left: 0;
  width: 100%;
  /* Make image fill the slide width */
  height: 100%;
  /* Make image fill the slide height */
  object-fit: cover;
  /* Cover the entire area without distortion */
  z-index: 1;
  /* Place image behind other content */
  filter: brightness(0.7);
  /* Slightly darken the image for better text readability */
}


.highlighted-products-swiper .flag-wishlist {
  display: none !important;
}


.layout-checkout-form {
  font-family: "Cairo" !important;
}

.layout-checkout-form .js-form-item {
  flex-direction: column;
}

#edit-sidebar-coupon-redemption-form {
  display: flex;
  flex-direction: column;
}



.layout-checkout-form .fieldset-wrapper {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

.layout-checkout-form .js-form-wrapper input[type="text"] {
  display: block !important;
}

.popup-menu .nav-item {
  text-align: right;
}

input.button--add-to-cart:disabled {
  color: white !important;
}

fieldset .form-check {
  margin-top: 0 !important;
}


/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -45%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}


.flag-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip styling */
.flag-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  transform: translateX(-50%) translateY(5px);
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
}

/* Show tooltip on hover */
.flag-icon:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.stock-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(220, 0, 0, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  z-index: 5;
  text-transform: uppercase;
}

.product-image.position-relative {
  position: relative;
}

.product-teaser {
  position: relative;
}



.out-of-stock .stock-status {
  position: absolute;
  top: 50px;
  left: 10px;
  background: red;
  color: #fff;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  z-index: 2;
  font-family: "Cairo";
}


.cart-empty-page {
  margin-top: 5rem;
}

.views-view-responsive-grid__item img {
  /* Reset any inline attributes */
  width: auto;
  height: auto;

  /* Max dimensions relative to viewport */
  max-width: 30vw;
  /* Maximum 30% of the viewport width */
  max-height: 70vh;
  /* Maximum 60% of the viewport height */
  /* Standard responsive image properties */
  display: block;
  width: 100%;
  /* Allows it to shrink if container is smaller */
  height: auto;
  /* Maintains aspect ratio */
}



.views-view-responsive-grid__item-inner {
  position: relative;
  /* each grid item becomes its own positioning context */
  overflow: hidden;
  /* keeps overlay inside image box */
}

.views-field-category-image {
  display: block;
}

.views-field-category-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Group overlay fields at the bottom of each item */
.views-view-responsive-grid__item-inner .views-field-name,
.views-view-responsive-grid__item-inner .views-field-term-action {
  position: absolute;
  bottom: 17px;
  /* space from bottom */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;


}

.views-view-responsive-grid__item-inner .views-field-name a,
.views-view-responsive-grid__item-inner .views-field-term-action a {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  width: fit-content !important;
  border-radius: 4px;
  padding: 5px 12px;
  display: inline-block;

}
.views-view-responsive-grid__item-inner .views-field-term-action a{
  font-size: 10px !important;
}

.views-view-responsive-grid__item-inner .views-field-name a{
  font-size: 24px !important;
}

/* Product tags wrapper */
#tags,
.cart-modal-tags {
  display: flex;
  flex-wrap: wrap;
  /* allow wrapping */
  gap: 8px;
  /* spacing between tags */
  padding: 8px 0;
  font-size: 0.875rem;
  color: #777;
  margin-bottom: 0.5rem;
}

/* Brand and category blocks inside #tags */
#tags .my-brand,
.cart-modal-tags .my-brand {
  font-weight: bold;
  color: #333;
}

#tags .main-category,
.main-category {
  margin-left: 1rem;
}

/* Style the actual links */
#tags a,
.cart-modal-tags a {
  display: inline-block;
  background: linear-gradient(135deg, #f9f9f9, #ececec);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

#tags a:hover,
.cart-modal-tags a:hover {
  background: linear-gradient(135deg, #ff6f61, #ff8a75);
  color: white;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}


.view-empty {
  text-align: center;
  font-family: "Cairo";
  font-size: 2rem !important;
  margin-top: 5rem;
  margin-bottom: 2rem !important;
  text-align: center;

}

.col-md-10 {
  width: 100%;
}


.my-4 {
  padding-top: 1rem;
}


/* 1. Ensure html and body take up the full viewport height */
html,
body {
  height: 100%;
  margin: 0;
  /* Remove default body margin */
  padding: 0;
  /* Remove default body padding */
}

/* 2. Make the .layout-container the Flex container */
/* This div wraps all your main page content and the footer */
.layout-container {
  display: flex;
  /* Enable Flexbox */
  flex-direction: column;
  /* Stack children (header, section, main, footer) vertically */
  min-height: 100vh;
  /* Ensure it's at least the height of the viewport */
  /* Your existing classes like font-smoothing, position-relative, overflow-hidden should remain */
}

/* 3. Make the <main> element expand to fill available space */
/* This pushes the footer down */
main[role="main"] {
  /* Using attribute selector for specificity if needed, or just 'main' */
  flex-grow: 1;
  /* This is the key: it expands to fill available space */
  /* Your existing classes like col-md-10, offset-md-1 should remain */
}

/* Optional: Basic footer styling for visibility (if not already styled) */
footer[role="contentinfo"] {
  /* Add or keep your footer specific styles here */
  background-color: #333;
  /* Example background */
  color: white;
  /* Example text color */
  padding: 20px;
  /* Example padding */
  text-align: center;
  /* Example alignment */
}

/* Ensure header and section don't interfere with flex-grow */
/* They will take their natural height */
header[role="banner"] {
  flex-shrink: 0;
  /* Prevents them from shrinking if space is constrained */
  z-index: 100 !important;

}

.view-commerce-cart-form {
  padding: 40px;
}

.block-extra-field-blockuserusermember-for {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: #fff;
  padding: 2rem 3rem;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  text-align: center;
}



/* Apply the animation to your alert div */
.alert-remaining-items {


  /* Optional: Add some base styling for the alert to make it look good */
  color: red;
  /* Darker text color */
  padding: 10px 20px;
  margin-bottom: 15px;
  text-align: right;
  font-weight: bold;
}

#products-sort .js-form-item {
  direction: rtl !important;
}

#views-exposed-form-all-products-search-page-1 {
  margin-top: 3rem;
}

#edit-coupon-redemption .js-form-item {
  direction: rtl !important;
}

.site-logo {
  display: inline-block;
  line-height: 0;
}

.site-logo img {
  display: block;
}

.custom-svg {
  color: #000 !important;
}

/* Target the horizontal responsive grid */
.views-view-responsive-grid--horizontal {
  display: grid;
  gap: var(--views-responsive-grid--layout-gap, 30px);

  /* make the columns only as wide as the items */
  grid-template-columns: repeat(var(--views-responsive-grid--column-count),
      auto);

  /* shrink-wrap the grid and center it */
  width: max-content;
}


.card-body {
  padding: 0rem !important;
}

.card-body ul {
  padding: 0 !important;
}


.bef-slider .noUi-handle{
  border-radius: 5px !important;
}


/* Target delete buttons in the cart */
.table.cols-6 .views-field-remove-button input.delete-order-item {
  font-size: 0 !important;       /* hide the text "حذف" */
  color: transparent !important; /* extra insurance */
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c00' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L141.1 0h165.7l5.9 17.7L328 32H448V80H0V32H120l15.2-14.3zM32 96H416l-21.2 373.3c-1.5 26.1-23.1 46.7-49.2 46.7H102.4c-26.1 0-47.7-20.6-49.2-46.7L32 96z'/%3E%3C/svg%3E")
              no-repeat center center !important;
  background-size: 18px 18px !important;
  cursor: pointer;
}

/* ================================================
   Region Top Bar Styling
   ================================================ */
.region-top-bar {
  height: auto !important;
  border-bottom: 1px solid #e7e3e3;
}

/* ================================================
   Language Switcher in region-top-bar
   ================================================ */

/* Reset and style the language switcher block */
#block-gin-languageswitcher,
.region-top-bar #block-gin-languageswitcher,
.region-top-bar .block-language {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* Style the language links list */
#block-gin-languageswitcher ul.links,
.region-top-bar #block-gin-languageswitcher ul.links,
.region-top-bar .block-language ul.links {
  display: inline-flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: none !important;
}

/* Style individual language items */
#block-gin-languageswitcher ul.links li,
.region-top-bar #block-gin-languageswitcher ul.links li,
.region-top-bar .block-language ul.links li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 0.3rem !important;
  border: none !important;
  background: none !important;
}

/* Add separator between language links */
/* Remove any previous border-based separator */
#block-gin-languageswitcher ul.links li,
.region-top-bar #block-gin-languageswitcher ul.links li,
.region-top-bar .block-language ul.links li {
  border: none !important;
}

/* Insert a pipe separator before the second language item only */
#block-gin-languageswitcher ul.links li + li::before,
.region-top-bar #block-gin-languageswitcher ul.links li + li::before,
.region-top-bar .block-language ul.links li + li::before {
  content: "|";
  display: inline-block !important;
  color: #999 !important;
  font-weight: 400 !important;
  font-family: 'Cairo', Arial, sans-serif !important;
  margin: 0 0.5rem 0 0rem !important;
  transform: translateY(-1px);
}

/* Ensure no duplicate pipes appear if JS injected previously */
.language-separator, .language-separator-item { display: none !important; }

/* Style language links */
#block-gin-languageswitcher ul.links li a,
.region-top-bar #block-gin-languageswitcher ul.links li a,
.region-top-bar .block-language ul.links li a,
#block-gin-languageswitcher a.language-link,
.region-top-bar #block-gin-languageswitcher a.language-link,
.region-top-bar .block-language a.language-link {
  color: #333 !important;
  text-decoration: none !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  padding: 0.1rem 0 !important;
  display: inline-block !important;
  transition: color 0.2s ease-in-out !important;
  font-weight: 400 !important;
  background: none !important;
  border: none !important;
  font-family: 'Cairo', Arial, sans-serif !important;
  letter-spacing: 0.5px !important;
  font-size: 10px !important;
}

/* Hover state */
#block-gin-languageswitcher ul.links li a:hover,
.region-top-bar #block-gin-languageswitcher ul.links li a:hover,
.region-top-bar .block-language ul.links li a:hover {
  color: #0d6efd !important;
  text-decoration: none !important;
}

/* Active language styling */
#block-gin-languageswitcher ul.links li.is-active a,
#block-gin-languageswitcher ul.links li a.is-active,
.region-top-bar #block-gin-languageswitcher ul.links li.is-active a,
.region-top-bar #block-gin-languageswitcher ul.links li a.is-active,
.region-top-bar .block-language ul.links li.is-active a,
.region-top-bar .block-language ul.links li a.is-active {
  font-weight: 600 !important;
  color: #0d6efd !important;
  font-family: 'Cairo', Arial, sans-serif !important;
}