@media (min-width: 1601px) {
  .container, .container-lg, .container-xl, .container-xxl {
    max-width: 1400px;
  }
}

.row {
  margin-top: 10px;
}

/* 1. Target the Reflow v2 CSS Variables directly */

html {
  scroll-behavior: smooth;
}

:root {
  --ref-primary-color: #F77585 !important;
  --ref-primary-color-text: #ffffff !important;
}

/* 2. Target the actual button classes for the Shopping Cart */

.reflow-shopping-cart .ref-button, .reflow-shopping-cart .ref-checkout-button, .ref-cart-footer .ref-checkout-button {
  background-color: #F77585 !important;
  color: #ffffff !important;
  border: none !important;
  background-image: none !important;
}

/* 3. Target the Product List buttons */

.ref-product .ref-button.ref-add-to-cart {
  background-color: #F77585 !important;
  color: #ffffff !important;
  border: none !important;
}

/* 4. Hover states to ensure the green doesn't come back on mouseover */

.ref-button:hover, .ref-checkout-button:hover {
  background-color: #F77585 !important;
  color: #ffffff !important;
}

.ref-button, .ref-checkout-button {
  background-color: #F77585 !important;
  color: #ffffff !important;
}

/* =========================================================   REFRESH REFLOW BUTTONS: COLOR + 8px CORNER RADIUS   Targeting both Shopping Cart and Product List buttons   ========================================================= */

/* 1. Universal Variable for Reflow (Sets the base radius) */

:root {
  --ref-button-border-radius: 8px !important;
}

/* 2. Target the Checkout Button (Shopping Cart Footer) */

.reflow-shopping-cart .ref-checkout-button, .ref-cart-footer .ref-checkout-button {
  background-color: #ff7e8c !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 600 !important;
}

/* 3. Target the View Cart / Add to Cart / Close Buttons (Product List & Cart) */

.reflow-product-list .ref-button.ref-add-to-cart, .reflow-shopping-cart .ref-button, .ref-cart-footer .ref-button {
  background-color: #ff7e8c !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: none !important;
}

/* 4. Hover States to prevent default theme colors/corners on hover */

.ref-button:hover, .ref-checkout-button:hover {
  background-color: #f86b7a !important;
  color: black !important;
  border-radius: 8px !important;
  cursor: pointer;
}

.ref-button, .ref-checkout-button {
  background-color: #f86b7a !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  cursor: pointer;
}

.ref-cart-button * {
  transition: none !important;
}

/* 1. Force the 'View Cart' wrapper to be the fixed anchor */

.ref-cart-button, [data-reflow-type="view-cart"], .view-cart {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 45px !important;
  height: 45px !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

/* 2. Target the Icon inside to make sure it doesn't shift */

.ref-cart-button img, .ref-cart-button .icon {
  margin: 0 !important;
  display: block !important;
}

/* 3. The Firefox Killer: Absolute Lock */

/* We reset the 'inset' which Firefox uses to guess position */

.ref-cart-button .ref-cart-quantity {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  transform: translate(20%, -20%) !important;
  margin: 0 !important;
  z-index: 10 !important;
}

/* 4. Keep it there during the click/update state */

.ref-cart-button:active .ref-cart-quantity, .ref-cart-button.ref-open .ref-cart-quantity {
  top: 0 !important;
  right: 0 !important;
  transform: translate(20%, -20%) !important;
}

/* Target the image directly using the class you found */

img.ref-image {
  border-radius: 5px !important;
  overflow: hidden !important;
  display: block !important;
}

/* Often, Reflow wraps the image in a link or div that also needs rounding */

.ref-product .ref-image-container, .ref-product .ref-image-wrapper {
  border-radius: 5px !important;
  overflow: hidden !important;
}

::selection {
  background: #ff7e8c;
  color: white;
}

/* Optional: Add a separator line back in if you want it */

.ref-product {
  border-bottom: 1px solid #f0f0f0 !important;
  padding-bottom: 20px !important;
}

/* Remove the line from the very last item */

.ref-product:last-child {
  border-bottom: none !important;
}

.filter select {
  border-radius: 8px !important;
  padding: 10px 20px !important;
}

/* The container for both groups */

.filter-form {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}

/* Mobile Fix: Stack them on top of each other if the screen is too small */

@media (max-width: 576px) {
  .filter-form {
    flex-direction: column;
    gap: 15px;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .filter-left, .filter-right {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .filter-left select, .filter-right select {
    width: 100%;
  }
}

/* Align the filter bar perfectly with the product cards */

.filter {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 25px;
}

.filter-form {
  display: flex !important;
  justify-content: space-between;
  width: 100%;
}

/* If the row itself has padding, this clears it */

.filter .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.dropdown-menu {
  background-color: white !important;
}

.nav-item .nav-link {
  /*padding: 12px !important;*/
}

li .nav-item .nav-link {
  padding: 12px 0 !important;
}

.dropdown-menu {
  -webkit-box-shadow: 0 8px 6px -8px #b7b2b6;
  -moz-box-shadow: 0 8px 6px -8px #b7b2b6;
  box-shadow: 0 8px 6px -8px #b7b2b6;
}

.accordion-collapse p {
  padding-top: 12px;
}

/* Make the modal and its backdrop completely transparent */

#smartforms-modal, .smartforms-modal, .modal-backdrop, div[style*="z-index: 100000"], div[style*="background: rgba(0, 0, 0, 0.5)"] {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
  pointer-events: none !important;
}

/* Ensure the 'Success' box inside the form is also a ghost */

.message-success, .form-static-message {
  display: none !important;
}

/* Prevent the body from shifting or dimming when the hidden modal triggers */

body.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

.modal-backdrop.show {
  opacity: 0 !important;
  display: none !important;
}

/* Target the category select specifically */

select.form-control, select.form-select {
  background-color: #f2f2f2 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 2.25rem !important;
}

/* 1. Hide the first option (placeholder) from the list once clicked */

select option:first-child {
  display: none !important;
}

/* 2. Make the placeholder text look like a placeholder (lighter grey) */

select:has(option:first-child:checked) {
  color: #6c757d !important;
}

/* 3. Make the actual choices appear in solid black when selected */

select:not(:has(option:first-child:checked)) {
  color: #212529 !important;
}

#logo {
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: red;
}

.brand-4 {
  color: #ff7e8c;
  text-shadow: 0 0 15px rgba(255, 126, 140, 0.3);
  margin: 0 2px;
}